<!DOCTYPE html>
<html>

<head>
    <title>{{ $bookingData['message_subject'] }}</title>
</head>

<body>

    <span style="opacity: 0; color: rgba(255, 255, 255, 0);">{{ now()->format('Y-m-d') }}</span>

    <p>Dear {{ $bookingData['user_name'] }},</p>

    <h3 style="color: #212121; margin-bottom: 2rem;">{{ isset($bookingData['message_body'][0]) ? $bookingData['message_body'][0] : '' }}</h3>

    <div style="border: 1px solid #aaaaaa; background: #F3F2F1; padding: 1.5rem;">

        <div style="border: 1px solid #aaaaaa; border-radius: 4px; padding: 1.8rem 1.5rem; background: white;">

            <div style="margin-bottom: 2rem;">
                <p style="font-size: 15px; text-align: left; font-weight: 700; color: #ea4d56; margin: 0; line-height: 1.2; margin-bottom: 2rem !important;">Appointment Details:</p>

                <div style="border-bottom: 1px solid #f0f0f0; padding-left: 0.5rem; padding-bottom: 0.5rem; margin-bottom: 1rem;">
                    <p style="font-size: 12px; color: #aaaaaa; margin: 0; line-height: 1.2; padding-bottom: 0.5rem;">{{translate('Booking No.')}}</p>
                    <p style="margin: 0; line-height: 1.2; font-weight: 700; color: #212121; font-size: 13px;">{{ $bookingData['booking_no'] }}</p>
                </div>

                <div style="border-bottom: 1px solid #f0f0f0; padding-left: 0.5rem; padding-bottom: 0.5rem; margin-bottom: 1rem;">
                    <p style="font-size: 12px; color: #aaaaaa; margin: 0; line-height: 1.2; padding-bottom: 0.5rem;">{{translate('Date')}}</p>
                    <p style="margin: 0; line-height: 1.2; font-weight: 700; color: #212121; font-size: 13px;">{{ $bookingData['booking_date'] }}</p>
                </div>

                <div style="border-bottom: 1px solid #f0f0f0; padding-left: 0.5rem; padding-bottom: 0.5rem; margin-bottom: 1rem;">
                    <p style="font-size: 12px; color: #aaaaaa; margin: 0; line-height: 1.2; padding-bottom: 0.5rem;">{{translate('Time')}}</p>
                    <p style="margin: 0; line-height: 1.2; font-weight: 700; color: #212121; font-size: 13px;">{{ $bookingData['booking_start_time'] }} - {{ $bookingData['booking_end_time'] }}</p>
                </div>

                <div style="border-bottom: 1px solid #f0f0f0; padding-left: 0.5rem; padding-bottom: 0.5rem; margin-bottom: 1rem;">
                    <p style="font-size: 12px; color: #aaaaaa; margin: 0; line-height: 1.2; padding-bottom: 0.5rem;">{{translate('Service')}}</p>
                    <p style="margin: 0; line-height: 1.2; font-weight: 700; color: #212121; font-size: 13px;">{{ $bookingData['booking_service'] }}</p>
                </div>

                <div style="border-bottom: 1px solid #f0f0f0; padding-left: 0.5rem; padding-bottom: 0.5rem; margin-bottom: 1rem;">
                    <p style="font-size: 12px; color: #aaaaaa; margin: 0; line-height: 1.2; padding-bottom: 0.5rem;">{{translate('Location')}}</p>
                    <p style="margin: 0; line-height: 1.2; font-weight: 700; color: #212121; font-size: 13px;">{{ $bookingData['booking_location'] }}</p>
                </div>
            </div>

            <div style="margin-bottom: 2rem;">
                <p style="font-size: 15px; text-align: left; font-weight: 700; color: #ea4d56; margin: 0; line-height: 1.2; margin-bottom: 2rem !important;">Contact Information</p>

                <div style="border-bottom: 1px solid #f0f0f0; padding-left: 0.5rem; padding-bottom: 0.5rem; margin-bottom: 1rem;">
                    <p style="font-size: 12px; color: #aaaaaa; margin: 0; line-height: 1.2; padding-bottom: 0.5rem;">{{translate('Name')}}</p>
                    <p style="margin: 0; line-height: 1.2; font-weight: 700; color: #212121; font-size: 13px;">{{ $bookingData['user_name'] }}</p>
                </div>

                <div style="border-bottom: 1px solid #f0f0f0; padding-left: 0.5rem; padding-bottom: 0.5rem; margin-bottom: 1rem;">
                    <p style="font-size: 12px; color: #aaaaaa; margin: 0; line-height: 1.2; padding-bottom: 0.5rem;">{{translate('Phone')}}</p>
                    <p style="margin: 0; line-height: 1.2; font-weight: 700; color: #212121; font-size: 13px;">{{ $bookingData['phone_no'] }}</p>
                </div>

                <div style="border-bottom: 1px solid #f0f0f0; padding-left: 0.5rem; padding-bottom: 0.5rem; margin-bottom: 1rem;">
                    <p style="font-size: 12px; color: #aaaaaa; margin: 0; line-height: 1.2; padding-bottom: 0.5rem;">{{translate('Email')}}</p>
                    <p style="margin: 0; line-height: 1.2; font-weight: 700; color: #212121; font-size: 13px;">{{ $bookingData['email'] }}</p>
                </div>

            </div>
        </div>

        @if (isset($bookingData['message_body'][1]) && isset($bookingData['message_body'][2]))
        <p style="margin-top: 1.5rem;">{{ $bookingData['message_body'][1] }} <a style="text-decoration: underline !important; color: #22A6E3 !important;" href="{{ $bookingData['message_body'][2] }}">{{ $bookingData['message_body'][2] }}</a></p>
        @endif

        @if (isset($bookingData['message_body'][3]) && isset($bookingData['message_body'][4]))
        <p>{{ $bookingData['message_body'][3] }} <a style="text-decoration: underline !important; color: #22A6E3 !important;" href="tel:{{ $bookingData['message_body'][4] }}">{{ $bookingData['message_body'][4] }}</a></p>
        @endif

        @if (isset($bookingData['message_body'][5]))
        <p>{{ $bookingData['message_body'][5] }}</p>
        @endif

        <p style="margin-top: 20px;">This is a strictly no-reply email.</p>
        <!-- <p>For any inquiries or to reschedule/cancel your appointment, kindly WhatsApp our customer service <a href="https://api.whatsapp.com/send/?phone=60162234831" style="text-decoration: underline !important; color: #ea4d56 !important;">here</a>.</p> -->

    </div>

    <div>
        <p style="margin-top: 1.5rem; margin-bottom: 0; line-height: 1;">Best Regards,</p>
        <p style="margin: 0; margin-bottom: 1rem;">Fireworks</p>
        <!-- <img src="{{ asset('site/img/MOG-Eyewear.png') }}" /> -->
    </div>

    <span style="opacity: 0; color: rgba(255, 255, 255, 0);">{{ now()->format('Y-m-d H:i:s') }}</span>

</body>

</html>
