@extends('email.mail')
@section('body')
    <table role="presentation" class="mb-100" cellspacing="0" cellpadding="30" width="800" align="center" border="0"
        style="background-color: #FAFAFA;">
        <tr>
            <td style="padding: 60px" class="p-50 leave-pad">
                <table role="presentation" cellspacing="0" cellpadding="16" width="600" align="center"
                    class="mb-100 leave-mar"
                    style="background-color: #fff; border-radius: 20px 20px; padding: 20px 0px; margin: 0px auto; padding-bottom: 40px;">

                    <!-- Payment Success Badge -->
                    <tr>
                        <td align="center" style="padding-bottom: 24px;">
                            <span style="display:inline-block; padding:10px 30px; background:#D1FAE5; color:#065F46; font-weight:700; font-size:24px; letter-spacing:0.5px; border-radius:20px;">
                                ✓ Payment Received Successfully
                            </span>
                        </td>
                    </tr>

                    <!-- Icon/Image -->
                    <tr>
                        <td class="lock-img" align="center">
                            <a href="">
                                <img src="https://projects-sl.s3.ap-south-2.amazonaws.com/ecorental/Jton8QmEzfVfkCXKPM6rZ9SMqk6sbQzWheUHUsWe.png" 
                                     alt="Payment Success" width="80" height="80" class="lock-non">
                            </a>
                        </td>
                    </tr>

                    <!-- Greeting -->
                    <tr>
                        <td class="dear">
                            <h1 style="font-size: 22px; color: #000000; font-weight: 600; line-height: 33px; letter-spacing: 2.64px; text-transform: uppercase; text-align: center;"
                                class="dear-sec">Hello {{ $booking->client->full_name ?? 'Valued Customer' }},</h1>
                        </td>
                    </tr>

                    <!-- Payment Success Message -->
                    <tr>
                        <td style="font-size: 14px; font-weight: 400; color: #000000; line-height: 22px; letter-spacing: 1.2px; text-align: center; padding: 10px 30px;">
                            Great news! We have successfully received your payment for your vehicle booking with <b style="font-weight: 700;">Ibson Eco Rental</b>.
                        </td>
                    </tr>

                    <tr>
                        <td style="font-size: 14px; font-weight: 400; color: #16A34A; line-height: 22px; letter-spacing: 1.2px; text-align: center; padding: 10px 30px;">
                            Your booking is now fully confirmed and paid. We look forward to serving you!
                        </td>
                    </tr>

                    <!-- Payment Details Header -->
                    <tr>
                        <td style="font-size: 12px; font-weight: 300; color: #000000; line-height: 18px; letter-spacing: 1.44px; text-align: center; text-transform: uppercase; margin-top: 30px; padding: 20px 30px 10px 30px;">
                            Payment Details
                        </td>
                    </tr>

                    <!-- Payment Details Table -->
                    <tr>
                        <td style="padding: 10px 30px 30px 30px;">
                            <table role="presentation" cellspacing="0" cellpadding="0" width="100%"
                                style="background-color: #D1FAE5; border-radius: 10px; padding: 20px; border: 2px solid #10B981;">
                                
                                <!-- Booking Reference -->
                                <tr>
                                    <td style="font-size: 14px; font-weight: 600; color: #065F46; padding-bottom: 10px;">
                                        Booking Reference No:
                                    </td>
                                </tr>
                                <tr>
                                    <td style="font-size: 16px; font-weight: 600; color: #000000; background-color: #fff; padding: 10px; border-radius: 5px; text-align: center; letter-spacing: 2px; margin-bottom: 20px;">
                                        {{ $booking->client_ref ?? 'N/A' }}
                                    </td>
                                </tr>

                                <!-- Amount Paid -->
                                <tr>
                                    <td style="font-size: 14px; font-weight: 600; color: #065F46; padding-top: 20px; padding-bottom: 10px;">
                                        Amount Paid:
                                    </td>
                                </tr>
                                <tr>
                                    <td style="font-size: 24px; font-weight: 700; color: #16A34A; padding-bottom: 20px; text-align: center; background-color: #fff; padding: 15px; border-radius: 8px;">
                                        Rs. {{ number_format($booking->total_price ?? 0, 2) }}
                                    </td>
                                </tr>

                                <!-- Payment Status -->
                                <tr>
                                    <td style="font-size: 14px; font-weight: 600; color: #065F46; padding-top: 20px; padding-bottom: 10px;">
                                        Payment Status:
                                    </td>
                                </tr>
                                <tr>
                                    <td style="font-size: 16px; font-weight: 700; color: #16A34A; padding-bottom: 20px; text-align: center;">
                                        ✓ PAID
                                    </td>
                                </tr>

                            </table>
                        </td>
                    </tr>

                    <!-- Booking Details Header -->
                    <tr>
                        <td style="font-size: 12px; font-weight: 300; color: #000000; line-height: 18px; letter-spacing: 1.44px; text-align: center; text-transform: uppercase; margin-top: 30px; padding: 20px 30px 10px 30px;">
                            Your Booking Details
                        </td>
                    </tr>

                    <!-- Booking Details Table -->
                    <tr>
                        <td style="padding: 10px 30px 30px 30px;">
                            <table role="presentation" cellspacing="0" cellpadding="0" width="100%"
                                style="background-color: #F8F9FA; border-radius: 10px; padding: 20px;">
                                
                                <!-- Vehicle -->
                                <tr>
                                    <td style="font-size: 14px; font-weight: 600; color: #16A34A; padding-bottom: 10px;">
                                        Vehicle:
                                    </td>
                                </tr>
                                <tr>
                                    <td style="font-size: 14px; font-weight: 400; color: #000000; padding-bottom: 5px;">
                                        {{ $booking->vehicle->vehicle_name ?? 'N/A' }}
                                    </td>
                                </tr>
                                <tr>
                                    <td style="font-size: 13px; font-weight: 400; color: #666666; padding-bottom: 20px;">
                                        {{ $booking->vehicle->vehicle_no ?? 'N/A' }}
                                    </td>
                                </tr>

                                <!-- Pickup Date & Time -->
                                <tr>
                                    <td style="font-size: 14px; font-weight: 600; color: #16A34A; padding-top: 10px; padding-bottom: 10px;">
                                        Pickup Date & Time:
                                    </td>
                                </tr>
                                <tr>
                                    <td style="font-size: 14px; font-weight: 400; color: #000000; padding-bottom: 20px;">
                                        {{ \Carbon\Carbon::parse($booking->pickup_date)->format('F d, Y \a\t g:i A') }}
                                    </td>
                                </tr>

                                <!-- Return Date & Time -->
                                <tr>
                                    <td style="font-size: 14px; font-weight: 600; color: #16A34A; padding-top: 10px; padding-bottom: 10px;">
                                        Return Date & Time:
                                    </td>
                                </tr>
                                <tr>
                                    <td style="font-size: 14px; font-weight: 400; color: #000000; padding-bottom: 20px;">
                                        {{ \Carbon\Carbon::parse($booking->return_date)->format('F d, Y \a\t g:i A') }}
                                    </td>
                                </tr>

                                <!-- Pickup Location -->
                                <tr>
                                    <td style="font-size: 14px; font-weight: 600; color: #16A34A; padding-top: 10px; padding-bottom: 10px;">
                                        Pickup Location:
                                    </td>
                                </tr>
                                <tr>
                                    <td style="font-size: 14px; font-weight: 400; color: #000000; padding-bottom: 20px;">
                                        {{ $booking->location ?? 'N/A' }}
                                    </td>
                                </tr>

                                @if($booking->special_requests)
                                <!-- Special Requests -->
                                <tr>
                                    <td style="font-size: 14px; font-weight: 600; color: #16A34A; padding-top: 10px; padding-bottom: 10px;">
                                        Special Requests:
                                    </td>
                                </tr>
                                <tr>
                                    <td style="font-size: 13px; font-weight: 400; color: #000000; line-height: 20px; padding-bottom: 10px;">
                                        {{ $booking->special_requests }}
                                    </td>
                                </tr>
                                @endif

                            </table>
                        </td>
                    </tr>

                    <!-- Next Steps -->
                    <tr>
                        <td style="font-size: 13px; font-weight: 400; color: #065F46; line-height: 20px; letter-spacing: 0.5px; text-align: center; padding: 10px 30px; background-color: #D1FAE5; border-radius: 8px; margin: 10px 30px;">
                            <b style="font-weight: 700;">✓ What's Next?</b><br>
                            • Your booking is confirmed and fully paid<br/>
                            • Please arrive at the pickup location on time<br/>
                            • Bring a valid ID and driving license<br/>
                            • Keep this email as your payment receipt<br/>
                            • Contact us if you need any assistance
                        </td>
                    </tr>

                    <!-- Footer Message -->
                    <tr>
                        <td style="font-size: 12px; font-weight: 300; color: #666666; line-height: 18px; text-align: center; padding: 20px 30px 10px 30px;">
                            Thank you for choosing Ibson Eco Rental! If you have any questions about your payment or booking, please don't hesitate to contact our support team.
                        </td>
                    </tr>

                    <!-- Contact Info -->
                    <tr>
                        <td style="font-size: 11px; font-weight: 400; color: #999999; line-height: 16px; text-align: center; padding: 10px 30px;">
                            This is an automated payment confirmation email. Please save this for your records.
                        </td>
                    </tr>

                </table>
            </td>
        </tr>
    </table>
@endsection