@extends('layout.mail')

@section('content')
@php
    $flightDetail  = json_decode($booking->flight_detail, true);
@endphp
    <table data-outer-table border="0" align="center" cellpadding="0" cellspacing="0" class="outer-table row" role="presentation" width="640" style="width:640px;max-width:640px;" data-module="blue-preface-13">
        <!-- blue-preface-13 -->
        <tr>
            <td align="center" bgcolor="#FFFFFF" data-bgcolor="BgColor" class="container-padding">

                <table data-inner-table border="0" align="center" cellpadding="0" cellspacing="0" role="presentation" class="inner-table row" width="580" style="width:580px;max-width:580px;">
                    <tr>
                        <td height="40" style="font-size:40px;line-height:40px;" data-height="Spacing top">&nbsp;</td>
                    </tr>
                    <tr>
                        <td align="center" data-bgcolor="BgColor" bgcolor="#FFFFFF">
                            <!-- content -->
                            <table border="0" align="center" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%;max-width:100%;">
                                <tr data-element="blue-subline" data-label="Sublines">
                                    <td class="center-text" data-text-style="Sublines" align="center" style="font-family:'Barlow',Arial,Helvetica,sans-serif;font-size:14px;line-height:24px;font-weight:900;font-style:normal;color:#2B3A91;text-decoration:none;letter-spacing:1px;">
                                        <singleline>
                                            <div mc:edit data-text-edit>
                                                BOOKING 
                                            </div>
                                        </singleline>
                                    </td>
                                </tr>
                               <tr data-element="blue-headline" data-label="Headlines">
    <td class="center-text" data-text-style="Headlines" align="center" style="font-family:'Barlow',Arial,Helvetica,sans-serif;font-size:30px;line-height:54px;font-weight:900;font-style:normal;color:#222222;text-decoration:none;letter-spacing:0px;">
        <singleline>
            <div mc:edit data-text-edit>
                {{ $booking->payment_status === 'paid' 
                    ? 'Payment Successful - Your Booking is Confirmed' 
                    : 'Seat Reserved – Please Complete Payment to Confirm Your Booking' 
                }}
                 
                Call Us: 0207-043-4343
            </div>
        </singleline>
    </td>
</tr>
                                <tr data-element="blue-headline" data-label="Headlines">
                                    <td height="15" style="font-size:15px;line-height:15px;" data-height="Spacing under headline">&nbsp;</td>
                                </tr>

                                <tr data-element="blue-header-paragraph" data-label="Paragraphs">
                                    <td height="40" style="font-size:40px;line-height:40px;" data-height="Spacing under paragraph">&nbsp;</td>
                                </tr>
                                <tr data-element="blue-title" data-label="Titles">
                                    <td class="center-text" data-text-style="Titles" align="center" style="font-family:'Barlow',Arial,Helvetica,sans-serif;font-size:18px;line-height:24px;font-weight:400;font-style:normal;color:#333333;text-decoration:none;letter-spacing:0px;">
                                        <singleline>
                                            <div mc:edit data-text-edit>
                                               Pnr No:
                                            </div>
                                        </singleline>
                                    </td>
                                </tr>

                                <tr data-element="blue-bm-usercode" data-label="User Code">
                                    <td align="center">
                                        <!-- Use Code -->
                                        <table border="0" cellspacing="0" cellpadding="0" role="presentation" align="center" class="row" width="80%" style="width:80%;max-width:80%;">
                                            <tr>
                                                <td align="center" data-bgcolor="User Code" bgcolor="#F8F8F8" style="border-radius: 0px;">
                                                    <!-- Content -->
                                                    <table border="0" cellspacing="0" cellpadding="0" role="presentation" align="center" class="row" width="100%" style="width:100%;max-width:100%;">
                                                        <tr>
                                                            <td height="20" style="font-size:20px;line-height:20px;">&nbsp;</td>
                                                        </tr>
                                                        <tr>
                                                            <td class="center-text" data-text-style="Use Code" align="center" style="font-family:'Barlow',Arial,Helvetica,sans-serif;font-size:22px;line-height:26px;font-weight:700;font-style:normal;color:#2B3A91;text-decoration:none;letter-spacing:4px;">
                                                                <singleline>
                                                                    <div mc:edit data-text-edit>
                                                                        {{ $booking->pnr_no ?? '' }}
                                                                    </div>
                                                                </singleline>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td height="20" style="font-size:20px;line-height:20px;">&nbsp;</td>
                                                        </tr>
                                                    </table>
                                                    <!-- Content -->
                                                </td>
                                            </tr>
                                        </table>
                                        <!-- User Code -->
                                    </td>
                                </tr>
                                <tr data-element="blue-bm-usercode" data-label="User Code">
                                    <td height="60" style="font-size:60px;line-height:60px;" data-height="Spacing under user code">&nbsp;</td>
                                </tr>
                                <tr data-element="blue-title" data-label="Titles">
                                    <td class="center-text" data-text-style="Titles" align="center" style="font-family:'Barlow',Arial,Helvetica,sans-serif;font-size:18px;line-height:24px;font-weight:400;font-style:normal;color:#333333;text-decoration:none;letter-spacing:0px;">
                                        <singleline>
                                            <div mc:edit data-text-edit>
                                               Order Ticket Id:
                                            </div>
                                        </singleline>
                                    </td>
                                </tr>

                                <tr data-element="blue-bm-usercode" data-label="User Code">
                                    <td align="center">
                                        <!-- Use Code -->
                                        <table border="0" cellspacing="0" cellpadding="0" role="presentation" align="center" class="row" width="80%" style="width:80%;max-width:80%;">
                                            <tr>
                                                <td align="center" data-bgcolor="User Code" bgcolor="#F8F8F8" style="border-radius: 0px;">
                                                    <!-- Content -->
                                                    <table border="0" cellspacing="0" cellpadding="0" role="presentation" align="center" class="row" width="100%" style="width:100%;max-width:100%;">
                                                        <tr>
                                                            <td height="20" style="font-size:20px;line-height:20px;">&nbsp;</td>
                                                        </tr>
                                                        <tr>
                                                            <td class="center-text" data-text-style="Use Code" align="center" style="font-family:'Barlow',Arial,Helvetica,sans-serif;font-size:22px;line-height:26px;font-weight:700;font-style:normal;color:#2B3A91;text-decoration:none;letter-spacing:4px;">
                                                                <singleline>
                                                                    <div mc:edit data-text-edit>
                                                                        {{ $booking->order_reference ?? '' }}
                                                                    </div>
                                                                </singleline>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td height="20" style="font-size:20px;line-height:20px;">&nbsp;</td>
                                                        </tr>
                                                    </table>
                                                    <!-- Content -->
                                                </td>
                                            </tr>
                                        </table>
                                        <!-- User Code -->
                                    </td>
                                </tr>
                                <tr data-element="blue-bm-usercode" data-label="User Code">
                                    <td height="60" style="font-size:60px;line-height:60px;" data-height="Spacing under user code">&nbsp;</td>
                                </tr>
                                <tr data-element="blue-title" data-label="Titles">
                                    <td class="center-text" data-text-style="Titles" align="center" style="font-family:'Barlow',Arial,Helvetica,sans-serif;font-size:18px;line-height:24px;font-weight:400;font-style:normal;color:#333333;text-decoration:none;letter-spacing:0px;">
                                        <singleline>
                                            <div mc:edit data-text-edit>
                                               Payment Status:
                                            </div>
                                        </singleline>
                                    </td>
                                </tr>

                                <tr data-element="blue-bm-usercode" data-label="User Code">
                                    <td align="center">
                                        <!-- Use Code -->
                                        <table border="0" cellspacing="0" cellpadding="0" role="presentation" align="center" class="row" width="80%" style="width:80%;max-width:80%;">
                                            <tr>
                                                <td align="center" data-bgcolor="User Code" bgcolor="#F8F8F8" style="border-radius: 0px;">
                                                    <!-- Content -->
                                                    <table border="0" cellspacing="0" cellpadding="0" role="presentation" align="center" class="row" width="100%" style="width:100%;max-width:100%;">
                                                        <tr>
                                                            <td height="20" style="font-size:20px;line-height:20px;">&nbsp;</td>
                                                        </tr>
                                                        <tr>
                                                            <td class="center-text" data-text-style="Use Code" align="center" style="font-family:'Barlow',Arial,Helvetica,sans-serif;font-size:22px;line-height:26px;font-weight:700;font-style:normal;color:#2B3A91;text-decoration:none;letter-spacing:4px;">
                                                                <singleline>
                                                                    <div mc:edit data-text-edit>
                                                                        {{ $booking->payment_status ?? '' }}
                                                                    </div>
                                                                </singleline>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td height="20" style="font-size:20px;line-height:20px;">&nbsp;</td>
                                                        </tr>
                                                    </table>
                                                    <!-- Content -->
                                                </td>
                                            </tr>
                                        </table>
                                        <!-- User Code -->
                                    </td>
                                </tr>
                                <tr data-element="blue-bm-usercode" data-label="User Code">
                                    <td height="60" style="font-size:60px;line-height:60px;" data-height="Spacing under user code">&nbsp;</td>
                                </tr>
                                <tr data-element="blue-title" data-label="Titles">
                                    <td class="center-text" data-text-style="Titles" align="center" style="font-family:'Barlow',Arial,Helvetica,sans-serif;font-size:18px;line-height:24px;font-weight:400;font-style:normal;color:#333333;text-decoration:none;letter-spacing:0px;">
                                        <singleline>
                                            <div mc:edit data-text-edit>
                                              Booking Amount:
                                            </div>
                                        </singleline>
                                    </td>
                                </tr>

                                <tr data-element="blue-bm-usercode" data-label="User Code">
                                    <td align="center">
                                        <!-- Use Code -->
                                        <table border="0" cellspacing="0" cellpadding="0" role="presentation" align="center" class="row" width="80%" style="width:80%;max-width:80%;">
                                            <tr>
                                                <td align="center" data-bgcolor="User Code" bgcolor="#F8F8F8" style="border-radius: 0px;">
                                                    <!-- Content -->
                                                    <table border="0" cellspacing="0" cellpadding="0" role="presentation" align="center" class="row" width="100%" style="width:100%;max-width:100%;">
                                                        <tr>
                                                            <td height="20" style="font-size:20px;line-height:20px;">&nbsp;</td>
                                                        </tr>
                                                        <tr>
                                                            <td class="center-text" data-text-style="Use Code" align="center" style="font-family:'Barlow',Arial,Helvetica,sans-serif;font-size:22px;line-height:26px;font-weight:700;font-style:normal;color:#2B3A91;text-decoration:none;letter-spacing:4px;">
                                                                <singleline>
                                                                    <div mc:edit data-text-edit>
                                                                        {{ $booking->amount ?? '' }}
                                                                    </div>
                                                                </singleline>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td height="20" style="font-size:20px;line-height:20px;">&nbsp;</td>
                                                        </tr>
                                                    </table>
                                                    <!-- Content -->
                                                </td>
                                            </tr>
                                        </table>
                                        <!-- User Code -->
                                    </td>
                                </tr>
                                <tr data-element="blue-bm-usercode" data-label="User Code">
                                    <td height="60" style="font-size:60px;line-height:60px;" data-height="Spacing under user code">&nbsp;</td>
                                </tr>


                                <tr data-element="blue-shipping-details" data-label="Shipping details">
                                    <td align="center">
                                        <!-- rwd-col -->
                                        <table border="0" cellpadding="0" cellspacing="0" align="center" class="container-padding" width="100%" style="width:100%;max-width:100%;">
                                            <tr>
                                                <td class="rwd-col" align="center" valign="top" width="31.03%" style="width:31.03%;max-width:31.03%;">

                                                    <!-- column -->
                                                    <table border="0" align="center" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%;max-width:100%;">
                                                        <tr data-element="blue-content-titles" data-label="Titles">
                                                            <td class="center-text" data-text-style="Titles" align="right" style="font-family:'Barlow',Arial,Helvetica,sans-serif;font-size:20px;line-height:24px;font-weight:700;font-style:normal;color:#333333;text-decoration:none;letter-spacing:0px;">
                                                                <singleline>
                                                                    <div mc:edit data-text-edit>
                                                                        From
                                                                    </div>
                                                                </singleline>
                                                            </td>
                                                        </tr>
                                                    </table>
                                                    <!-- column -->

                                                </td>
                                                <td class="rwd-col" align="center" width="3.45%" height="10" style="width:3.45%;max-width:3.45%;height: 10px;">&nbsp;</td>
                                                <td class="rwd-col" align="center" valign="top" width="65.52%" style="width:65.52%;max-width:65.52%;">

                                                    <!-- column -->
                                                    <table border="0" align="center" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%;max-width:100%;">
                                                        <tr data-element="blue-content-paragraph" data-label="Paragraphs">
                                                            <td class="hide-mobile" align="center" width="20" style="width:20px;max-width:20px;border-left: 1px solid #000000;"></td>
                                                            <td class="center-text" data-text-style="Paragraphs" align="left" style="font-family:'Barlow',Arial,Helvetica,sans-serif;font-size:18px;line-height:24px;font-weight:400;font-style:normal;color:#333333;text-decoration:none;letter-spacing:0px;">
                                                                <singleline>
                                                                    <div mc:edit data-text-edit>
                                                                        {{ $flightDetail['from']}}
                                                                    </div>
                                                                </singleline>
                                                            </td>
                                                        </tr>
                                                    </table>
                                                    <!-- column -->

                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="rwd-col" align="center" valign="top" width="31.03%" style="width:31.03%;max-width:31.03%;">

                                                    <!-- column -->
                                                    <table border="0" align="center" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%;max-width:100%;">
                                                        <tr data-element="blue-content-titles" data-label="Titles">
                                                            <td class="center-text" data-text-style="Titles" align="right" style="font-family:'Barlow',Arial,Helvetica,sans-serif;font-size:20px;line-height:24px;font-weight:700;font-style:normal;color:#333333;text-decoration:none;letter-spacing:0px;">
                                                                <singleline>
                                                                    <div mc:edit data-text-edit>
                                                                        To
                                                                    </div>
                                                                </singleline>
                                                            </td>
                                                        </tr>
                                                    </table>
                                                    <!-- column -->

                                                </td>
                                                <td class="rwd-col" align="center" width="3.45%" height="10" style="width:3.45%;max-width:3.45%;height: 10px;">&nbsp;</td>
                                                <td class="rwd-col" align="center" valign="top" width="65.52%" style="width:65.52%;max-width:65.52%;">

                                                    <!-- column -->
                                                    <table border="0" align="center" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%;max-width:100%;">
                                                        <tr data-element="blue-content-paragraph" data-label="Paragraphs">
                                                            <td class="hide-mobile" align="center" width="20" style="width:20px;max-width:20px;border-left: 1px solid #000000;"></td>
                                                            <td class="center-text" data-text-style="Paragraphs" align="left" style="font-family:'Barlow',Arial,Helvetica,sans-serif;font-size:18px;line-height:24px;font-weight:400;font-style:normal;color:#333333;text-decoration:none;letter-spacing:0px;">
                                                                <singleline>
                                                                    <div mc:edit data-text-edit>
                                                                        {{ $flightDetail['to']}}
                                                                    </div>
                                                                </singleline>
                                                            </td>
                                                        </tr>
                                                    </table>
                                                    <!-- column -->

                                                </td>
                                            </tr>
                                        </table>
                                        <!-- rwd-col -->
                                    </td>
                                </tr>
                                <tr data-element="blue-shipping-details" data-label="Shipping details">
                                    <td height="20" style="font-size:20px;line-height:20px;" data-height="Spacing under shipping details">&nbsp;</td>
                                </tr> 
                            </table>
                            <!-- content -->
                        </td>
                    </tr>
                    <tr>
                        <td height="40" style="font-size:40px;line-height:40px;" data-height="Spacing bottom">&nbsp;</td>
                    </tr>
                </table>

            </td>
        </tr>
        <!-- blue-preface-13 -->
    </table>

    <!-- blue-title -->

    <table data-outer-table border="0" align="center" cellpadding="0" cellspacing="0" class="outer-table row" role="presentation" width="640" style="width:640px;max-width:640px;" data-module="blue-product-1">
        <!-- blue-product-1 -->
        <tr>
            <td height="5" style="font-size:5px;line-height:5px;" data-height="Spacing top">&nbsp;</td>
        </tr>
        {{-- CUSTOMER INFORMATION --}}
        <tr>
            <td align="center" bgcolor="#FFFFFF" data-bgcolor="BgColor" class="container-padding">
                <!-- Content -->
                <table border="0" align="center" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%;max-width:100%;">

                    <tr>
                        <td align="center" bgcolor="#F8F8F8" data-bgcolor="Inner BgColor">
                            <!-- rwd-col -->
                            <table border="0" cellpadding="0" cellspacing="0" align="center" class="row container-padding" width="90.63%" style="width:90.63%;max-width:90.63%;">
                                <tr>
                                    <td height="30" style="font-size:30px;line-height:30px;">&nbsp;</td>
                                </tr>
                                <tr>
                                    <td class="rwd-col" align="center" width="31.03%" style="width:31.03%;max-width:31.03%;">

                                        <!-- column -->
                                        <table border="0" align="center" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%;max-width:100%;">
                                            <tr data-element="blue-content-picture" data-label="Picture">
                                                <td align="center">
                                                    <h3>Customer Information</h3>
                                                </td>
                                            </tr>
                                        </table>
                                        <!-- column -->

                                    </td>
                                    <td class="rwd-col" align="center" width="3.45%" height="30" style="width:3.45%;max-width:3.45%;height: 30px;">&nbsp;</td>
                                    <td class="rwd-col" align="center" width="65.52%" style="width:65.52%;max-width:65.52%;">

                                        <!-- column -->
                                        <table border="0" align="center" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width:100%;max-width:100%;">
                                            <tr data-element="blue-content-option-1" data-label="1st Option">
                                                <td class="center-text" data-text-style="Options" align="left" style="font-family:'Barlow',Arial,Helvetica,sans-serif;font-size:16px;line-height:24px;font-weight:400;font-style:normal;color:#333333;text-decoration:none;letter-spacing:0px;">
                                                    <singleline>
                                                        <div mc:edit data-text-edit>
                                                            <strong>Name:</strong> {{ $passenger->first_name .' '. $passenger->last_name }}
                                                        </div>
                                                    </singleline>
                                                </td>
                                            </tr>
                                            <tr data-element="blue-content-option-2" data-label="2nd Option">
                                                <td class="center-text" data-text-style="Options" align="left" style="font-family:'Barlow',Arial,Helvetica,sans-serif;font-size:16px;line-height:24px;font-weight:400;font-style:normal;color:#333333;text-decoration:none;letter-spacing:0px;">
                                                    <singleline>
                                                        <div mc:edit data-text-edit>
                                                            <strong>Email:</strong> {{ $passenger->email }}
                                                        </div>
                                                    </singleline>
                                                </td>
                                            </tr>
                                            <tr data-element="blue-content-option-3" data-label="3rd Option">
                                                <td class="center-text" data-text-style="Options" align="left" style="font-family:'Barlow',Arial,Helvetica,sans-serif;font-size:16px;line-height:24px;font-weight:400;font-style:normal;color:#333333;text-decoration:none;letter-spacing:0px;">
                                                    <singleline>
                                                        <div mc:edit data-text-edit>
                                                            <strong>Phone No.</strong> {{ $passenger->phone_no ?? 'N/A' }}
                                                        </div>
                                                    </singleline>
                                                </td>
                                            </tr>
                                        </table>
                                        <!-- column -->

                                    </td>
                                </tr>
                                <tr>
                                    <td height="30" style="font-size:30px;line-height:30px;">&nbsp;</td>
                                </tr>
                            </table>
                            <!-- rwd-col -->
                        </td>
                    </tr>
                </table>
                <!-- Content -->
            </td>
        </tr>
        <tr>
            <td height="5" style="font-size:5px;line-height:5px;" data-height="Spacing top">&nbsp;</td>
        </tr>
        <tr>
            <td height="20" style="font-size:20px;line-height:20px;" data-height="Spacing bottom">&nbsp;</td>
        </tr>
        <!-- blue-product-1 -->
    </table>

@endsection