<!DOCTYPE html>
<html>

<head>
    <title>Appointment Reminder</title>
</head>

<body>

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

    <p style="color: #2E2E2E;">Dear {{ $appointment->customer_name }},</p>

    <h3 style="margin-bottom: 2rem; color: #212121;">This is a reminder of your upcoming appointment. Here are the details:</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;">{{ $appointment->id }}</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;">{{ $appointment->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;">{{ $appointment->start_time }} - {{ $appointment->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;">{{ $appointment->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;">{{ $appointment->branch }}</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;">{{ $appointment->customer_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;">{{ $appointment->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;">{{ $appointment->email }}</p>

                </div>

            </div>
        </div>

        <p style="margin-top: 20px; color: #2E2E2E;">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; color: #2E2E2E;">Best Regards,</p>
        <p style="margin: 0; margin-bottom: 1rem; color: #2E2E2E;">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>
