@php use App\Support\BusinessTimezone; @endphp
@include('emails.partials.header', ['title' => 'Payment Receipt – MJ VAC Services'])

    <p>Dear <strong>{{ $appointment->name }}</strong>,</p>
    <p>Thank you for your payment to <strong>MJ VAC Services</strong>.</p>
    
    <div style="background-color: #d4edda; border: 2px solid #28a745; border-radius: 8px; padding: 20px; margin: 24px 0; text-align: center;">
        <p style="margin: 0; font-size: 18px; color: #155724;">
            <strong>✓ Payment Successful</strong>
        </p>
        <p style="margin: 12px 0 0 0; font-size: 24px; color: #155724; font-weight: bold;">
            ${{ number_format($appointment->price, 2) }}
        </p>
        <p style="margin: 8px 0 0 0; font-size: 14px; color: #155724;">
            Paid on {{ BusinessTimezone::formatInstant($appointment->paid_at, 'l, F d, Y \a\t h:i A') }} ({{ BusinessTimezone::label() }})
        </p>
    </div>

    <div class="section-title">Payment Details</div>
    <div class="details">
        <p><span>Transaction Date:</span> {{ BusinessTimezone::formatInstant($appointment->paid_at, 'F d, Y \a\t h:i A') }} ({{ BusinessTimezone::label() }})</p>
        <p><span>Amount Paid:</span> <strong style="color: #28a745;">${{ number_format($appointment->price, 2) }}</strong></p>
        <p><span>Payment Reference:</span> {{ $appointment->payment_reference }}</p>
        <p><span>Payment Method:</span> Credit/Debit Card (via Clover)</p>
    </div>

    <div class="section-title">Appointment Details</div>
    <div class="details">
        <p><span>Appointment ID:</span> {{ $appointment->appointment_id }}</p>
        <p><span>Customer Name:</span> {{ $appointment->name }}</p>
        <p><span>Email:</span> {{ $appointment->email }}</p>
        <p><span>Phone:</span> {{ $appointment->phone }}</p>
        <p><span>Preferred Date:</span> {{ $appointment->scheduledAt()->format('F d, Y') }}</p>
        <p><span>Preferred Time:</span> {{ $appointment->slotTimeRangeLabel() }} ({{ BusinessTimezone::label() }})</p>
        @include('emails.partials._appointment-custom-fields', ['appointment' => $appointment])
    </div>

    <div style="background-color: #fff3cd; border-left: 4px solid #ffc107; padding: 12px 16px; margin: 20px 0; border-radius: 4px;">
        <p style="margin: 0; font-size: 14px; color: #856404;">
            <strong>Note:</strong> This is a booking fee payment. Your appointment will be confirmed by our team shortly via email.
        </p>
    </div>

    <div class="section-title">Contact Us</div>
    <div class="contact-box">
        <strong>MJ VAC Services</strong><br>
        Email: <a href="mailto:info@mjvacservices.ca">info@mjvacservices.ca</a><br>
        Phone: <a href="tel:+17786751861">+1 (778) 675 1861</a>
    </div>

    <p style="margin-top:20px;">Thank you for choosing <strong>MJ VAC Services</strong>. We look forward to serving you!</p>
    
    <p style="font-size: 12px; color: #666; margin-top: 20px; font-style: italic;">
        Please keep this receipt for your records. If you have any questions about this payment, please contact us.
    </p>

@include('emails.partials.footer')