<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Travelport Viewtrip - My Trip</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">

    <style>
        :root {
            --header: #006696;
            --header-bottom: #08517d;
            --footer: #08517d;
            --green: #7ac21f;
        }

        body {
            font-family: "Open Sans", Arial, Helvetica, sans-serif;
            background: #f4f6f8;
        }

        /* Login dropdown */
        .login-btn {
            background: #0b77a6;
            color: #fff;
            padding: 6px 14px;
            border-radius: 6px;
            cursor: pointer;
        }

        .login-btn i {
            margin-left: 6px;
            transition: .3s
        }

        .login-btn.active i {
            transform: rotate(180deg)
        }
        .btn-green {
            background: #7ac21f;
            color: #fff
        }

        .btn-green:hover {
            background: #6aad1b;
            color: #fff
        }

        .btn-gray {
            background: #9fb1bc;
            color: #fff
        }
        .btn-gray:hover {
            background: #9fb1bc;
            color: #fff
        }
        .login-panel {
            position: absolute;
            top: 42px;
            right: 0;
            width: 200px;
            background: #fff;
            border-radius: 4px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
            display: none;
            z-index: 1000;
        }

        .login-panel a {
            display: block;
            padding: 12px 16px;
            color: #333;
            text-decoration: none;
        }

        .login-panel a:hover {
            background: #f1f3f5
        }

        /* Header */
        .header {
            background: var(--header)
        }



        /* ===== TRIP ===== */
        .trip {
            max-width: 1030px;
            margin: auto;
            background: #fff;
            border: 1px solid #cfcfcf;
        }

        .trip__header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #f1f1f1;
            padding: 10px 14px;
            border-bottom: 1px solid #ccc;
        }

        .trip__header h2 {
            margin: 0;
            font-size: 20px;
            font-weight: normal;
        }

        .trip__toggle-all {
            border: none;
            background: none;
            color: #1a73e8;
            cursor: pointer;
            font-size: 12px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        /* ===== ITEM ===== */
        .trip-item {
            box-shadow: 0 1px 2px 2px rgba(0, 0, 0, .2);
            margin: .5rem;
        }

        .trip-item__summary {
            display: flex;
            justify-content: space-between;
            padding: 0px 14px;
        }

        .trip-item__left {
            width: 55%;
        }

        .trip-item__date {
            font-size: 13px;
            border-bottom: 1px solid black;
            padding: 5px 10px;
        }

        .trip-item__date strong {
            font-weight: bold;
        }

        .trip-item__status {
            color: #000;
            font-size: 13px;
        }

        .trip-item__airline {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .trip-item__airline_icon i {
            font-size: 22px;
        }

        .trip-item__airline img {
            height: 24px;
        }

        .trip-item__airline-name {
            font-size: 15px;
        }

        .trip-item__confirm {
            color: #777;
            font-size: 13px;
        }

        /* ===== RIGHT ===== */
        .trip-item__right {
            display: flex;
            align-items: center;
            gap: 30px;
        }

        .trip-item__times {
            display: flex;
            align-items: center;
            gap: 22px;
            text-align: center;
        }

        .trip-item__times small {
            display: block;
            color: #777;
            font-size: 11px;
        }

        .trip-item__times strong {
            font-size: 22px;
        }

        .trip-item__airport {
            font-size: 11px;
            color: #777;
        }

        .trip-item__nonstop {
            font-size: 11px;
            color: #777;
        }

        .trip-item__nonstop span {
            display: block;
            margin-top: 4px;
            width: 28px;
            height: 2px;
            background: #7ac21f;
            position: relative;
        }

        .trip-item__nonstop span:after {
            content: "";
            position: absolute;
            right: -6px;
            top: -4px;
            border-left: 6px solid #7ac21f;
            border-top: 4px solid transparent;
            border-bottom: 4px solid transparent;
        }

        .trip__toggle-all i,
        .trip-item__toggle i {
            font-size: 22px;
        }

        .trip-item__toggle {
            border: none;
            background: none;
            color: #1a73e8;
            cursor: pointer;
            font-size: 12px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        /* ===== DETAILS ===== */
        .trip-item__details {
            display: none;
            padding: 0px 14px;
        }

        .trip-item__block {
            margin-bottom: 16px;
            font-size: 13px;
        }

        .trip-item__block strong {
            display: block;
            color: #1a73e8;
            font-size: 12px;
            margin-bottom: 4px;
        }

        .trip-item__route {
            display: flex;
            align-items: center;
            gap: 10px;
            margin: 8px 0;
        }

        .trip-item__route:before,
        .trip-item__route:after {
            content: "";
            flex: 1;
            border-bottom: 1px dashed #999;
        }

        .trip-item__route span {
            font-size: 12px;
            color: #555;
        }

        /* Footer */
        footer {
            background: var(--footer);
            color: #cfe4f2;
            font-size: 13px
        }

        footer a {
            color: #cfe4f2;
            text-decoration: none
        }

        footer a:hover {
            text-decoration: underline
        }

        .container-main {
            max-width: 1030px
        }



        @media(max-width: 768px) {
            .container {
                --bs-gutter-x: 0rem !important;
            }
        }

        /* ===== HEADER TOOLS BAR ===== */
        .header-tools {
            background-color: #08517d;
            font-size: .625rem;
            line-height: .75rem;
            padding: .5rem;
            text-align: right;
        }

        .header-tools__container {
            max-width: 1030px;
            margin: 0 auto;
            padding: 8px 16px;
        }

        .header-tools__list {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            gap: 12px;
            list-style: none;
            margin: 0;
            padding: 0;
            flex-wrap: wrap;
        }

        .header-tools__list a {
            text-decoration: none;
        }

        /* Tool item */
        .header-tools__item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #ffffff;
            cursor: pointer;
            text-transform: uppercase;
            font-size: .625rem;
            line-height: .75rem;
            text-align: right;
        }

        .header-tools__item i {
            font-size: 18px;
            margin-bottom: 4px;
        }

        /* Hover */
        .header-tools__item:hover {
            opacity: 0.85;
        }

        /* ===== MOBILE ===== */
        @media (max-width:575px) {
            .header-tools__list {
                justify-content: center;
                gap: 20px;
            }
        }

        .trip {
            max-width: 1030px;
            font-family: Arial, Helvetica, sans-serif;
        }

        .trip__header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #f2f2f2;
            padding: 10px 16px;
            border-bottom: 1px solid #ccc;
        }

        .trip__title {
            margin: 0;
            font-size: 20px;
        }

        .trip__toggle-all {
            background: none;
            border: none;
            color: #0077c8;
            font-size: 13px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        /* ITEM */
        .trip-item {
            border: 1px solid #ccc;
            margin-top: 8px;
            background: #fff;
        }

        .trip-item__left {
            max-width: 55%;
        }

        .trip-item__airline {
            margin-top: 6px;
            font-size: 14px;
        }

        .trip-item__airline span {
            color: #777;
        }

        .trip-item__right {
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .trip-item__time {
            display: flex;
            align-items: center;
            gap: 18px;
            text-align: center;
        }

        .trip-item__time strong {
            font-size: 22px;
        }

        .trip-item__time small {
            font-size: 11px;
            color: #777;
        }

        .trip-item__nonstop {
            font-size: 11px;
            color: #777;
        }

        .trip-item__toggle {
            background: none;
            border: none;
            color: #0077c8;
            font-size: 12px;
            cursor: pointer;
            text-align: center;
        }

        .trip-item__block {
            margin-bottom: 16px;
        }

        .trip-item__route {
            text-align: center;
            margin: 8px 0;
            color: #777;
            width: 250px;
        }

        .help {
            font-family: Arial, Helvetica, sans-serif;
            background: #ffffff;
        }

        /* Header */
        .help__header {
            background: #249ad8;
            color: #ffffff;
            padding: 10px 16px;
            font-size: 18px;
            font-weight: normal;
        }

        /* Content */
        .help__content {
            padding: 14px 16px;
            font-size: 14px;
            color: #000;
        }

        .help__reservation {
            margin-bottom: 12px;
        }

        .help__code {
            color: #0b66c3;
            font-weight: bold;
        }

        /* Company block */
        .help__company {
            line-height: 1.4;
        }

        .help__company a {
            color: #0b66c3;
            text-decoration: none;
        }

        .help__company a:hover {
            text-decoration: underline;
        }

        .print-footer {
            display: none;
        }
.email-modal .modal-dialog{
        max-width: 40.063em;
        background-color: #fff;
        padding: 1.25rem;
}
.email-modal .modal-header{
    border-bottom: none;
    background-color: #08517d !important
}
.email-modal .modal-header .btn-close{
    width: 2.25rem;
    height: 2.25rem;
     background-color: #fff;
     position: absolute;
        right: 8px;
    top: 8px;
    border-radius: 0px;
}
.email-modal .modal-content{
    border: none;
      background-color: #08517d !important;
      border-radius: 0px !important;
}
.email-modal form input{
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    border-bottom: 1px solid #fff !important;
    color: #ffffff;
}
.email-modal form textarea{
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    border-bottom: 1px solid #fff !important;
}
.email-modal input::placeholder{
    color: #fff !important;
}
.email-modal textarea::placeholder{
    color: #fff !important;
}
.email-modal .modal-footer{
    border: none !important;
    
}
.email-modal .form-control:focus {
  box-shadow: none;
  color: #ffffff;
  border-bottom: 1px solid #7ac21f !important;
}
.email-modal .btn{
    border-radius: 0px !important;
}
        @media print {

            /* Hide elements */
            .no-print,
            footer {
                display: none !important;
            }

            .header {
                background-color: #006696;
            }

            .trip__header {
                background-color: #fff;
                border-bottom: none;
            }

            .trip-item {
                box-shadow: none;
                border: none;
            }

            .help__header {
                background: none;
                color: black;
                border-bottom: 1px solid black;
            }

            /* Optional: remove background & shadow */
            body {
                background: #fff !important;
            }

            .print-footer {
                display: block;
            }

            .container-main {
                padding: 10px 40px;
            }

            .trip {
                border: none;
            }
        }

    </style>
</head>

<body>
    <div class="container container-main">
        <!-- HEADER -->
        <header class="header p-2">
            <div class="d-flex align-items-center position-relative">
                <div class="brand">
                    <a href="{{ route('/') }}">
                        <img src="{{ asset('frontendAssets/img/logo.svg') }}" alt="Logo">
                    </a>
                </div>

                <div class="ms-auto position-relative no-print">
                    <div class="login-btn" id="loginToggle">
                        Login <i class="fa-solid fa-chevron-down"></i>
                    </div>

                    <div class="login-panel" id="loginPanel">
                        <a href="#">Login</a>
                        <a href="#">Sign Up</a>
                        <a href="#">Change Language</a>
                    </div>
                </div>
            </div>
        </header>
        <div class="header-tools no-print">
            <div class="container-fluid header-tools__container">

                <ul class="header-tools__list">
                    <a href="#">
                        <li class="header-tools__item">
                            <i class="fa-solid fa-ticket"></i>
                            <span>E-TICKET</span>
                        </li>
                    </a>
                    <a href="javascript:void(0)" id="openEmailModal">
                        <li class="header-tools__item">
                            <i class="fa-solid fa-envelope"></i>
                            <span>EMAIL</span>
                        </li>
                    </a>
                    <a href="javascript:void(0)" onclick="printReservation()">
                        <li class="header-tools__item">
                            <i class="fa-solid fa-print"></i>
                            <span>PRINT</span>
                        </li>
                    </a>
                    <a href="#">
                        <li class="header-tools__item">
                            <i class="fa-solid fa-file-invoice-dollar"></i>
                            <span>EXPENSE</span>
                        </li>
                    </a>
                    <a href="#">
                        <li class="header-tools__item">
                            <i class="fa-solid fa-calendar-days"></i>
                            <span>ICAL</span>
                        </li>
                    </a>
                    <a href="#">
                        <li class="header-tools__item">
                            <i class="fa-solid fa-comment-dots"></i>
                            <span>FEEDBACK</span>
                        </li>
                    </a>
                </ul>

            </div>
        </div>


        <div class="trip">

            <!-- HEADER -->
            <div class="trip__header">
                <h2>My Trip</h2>
                <button class="trip__toggle-all no-print" data-state="collapsed">
                    <i class="fa-solid fa-circle-plus"></i>
                    <span>Expand All</span>
                </button>

            </div>

            @foreach($trips as $trip)
            <!-- ITEM 1 -->
            <div class="trip-item">
                <div class="trip-item__date">
                    <strong>{{ strtoupper(\Carbon\Carbon::parse($trip->departure_date)->format('D, M d, Y')) }}</strong> -
                    {{ $trip->departureAirportState->state ?? '-' }}
                    ({{ $trip->departureAirportCode->code ?? '-' }})
                    to
                    {{ $trip->arrivalAirportState->state ?? '-' }}
                    ({{ $trip->arrivalAirportCode->code ?? '-' }})
                    <span class="trip-item__status">
                        -
                        {{ $trip->status }}

                        @if($trip->status === 'On Hold')
                        <i class="fa-solid fa-clock text-warning"></i>
                        @elseif($trip->status === 'Confirmed')
                        <i class="fa-solid fa-circle-check text-success"></i>
                        @elseif($trip->status === 'Booking')
                        <i class="fa-solid fa-ticket text-info"></i>
                        @elseif($trip->status === 'Cancelled')
                        <i class="fa-solid fa-circle-xmark text-danger"></i>
                        @elseif($trip->status === 'Payment-Pending')
                        <i class="fa-solid fa-clock text-warning"></i>
                        @endif
                    </span>

                </div>
                <div class="trip-item__summary">
                    <div class="trip-item__left">
                        <div class="trip-item__airline">
                            <img src="{{ asset($trip->company->logo) }}" alt="Airline Logo" style="max-width: 50px;">
                            <div>
                                <div class="trip-item__airline-name">{{ $trip->company->name }}</div>
                                <div class="trip-item__confirm">Confirmation Number: {{ $passenger->pnr }}</div>
                            </div>
                        </div>

                    </div>

                    <div class="trip-item__right">
                        <div class="trip-item__airline_icon">
                            <i class="fa-solid fa-plane"></i>
                        </div>
                        <div class="trip-item__times">
                            <div>
                                <small>DEPART</small>
                                <strong>{{ \Carbon\Carbon::createFromFormat('H:i:s', $trip->departure_time)->format('h:i') }}</strong> {{ \Carbon\Carbon::createFromFormat('H:i:s', $trip->departure_time)->format('A') }}
                                <div class="trip-item__airport">{{ $trip->departureAirportCode->code ?? '-' }}</div>
                            </div>

                            <div class="trip-item__nonstop">
                                {{ strtoupper($trip->journey_type) }}
                                <span></span>
                                {{ strtoupper($trip->journey_duration) }}
                            </div>

                            <div>
                                <small>ARRIVE</small>
                                <strong>
                                    {{ \Carbon\Carbon::createFromFormat('H:i:s', $trip->arrival_time)->format('h:i') }}
                                </strong>
                                {{ \Carbon\Carbon::createFromFormat('H:i:s', $trip->arrival_time)->format('A') }}

                                <div class="trip-item__airport">
                                    {{ $trip->arrivalAirportCode->code ?? '-' }}
                                </div>
                            </div>
                        </div>

                        <button class="trip-item__toggle no-print">
                            <i class="fa-solid fa-circle-minus"></i>
                            <span>Collapse</span>
                        </button>

                    </div>
                </div>
                <div class="trip-item__details">

                    <div class="trip-item__block">
                        <strong class="text-dark">PASSENGERS</strong>
                        {{ strtoupper($trip->passenger->last_name) }},
                        {{ $trip->passenger->first_name }}
                        {{ $trip->passenger->title }}<br>
                        Class Of Service: {{ $trip->class_of_service }}
                    </div>

                    <div class="trip-item__block">
                        <strong class="text-dark">AIRPORT INFO</strong>
                        {{ $trip->departureAirport->name ?? '-' }}
                        ({{ $trip->departureAirportCode->code ?? '-' }})<br>

                        {{ $trip->departureAirportState->state ?? '-' }},
                        {{ $trip->departureAirportIdentity->identity ?? '-' }} <br>
                        {{ $trip->departure_terminal }}


                        <div class="trip-item__route">
                            <span>to</span>
                        </div>

                        {{ $trip->arrivalAirport->name ?? '-' }}
                        ({{ $trip->arrivalAirportCode->code ?? '-' }})<br>

                        {{ $trip->arrivalAirportState->state ?? '-' }},
                        {{ $trip->arrivalAirportIdentity->identity ?? '-' }}
                    </div>
                    <div class="trip-item__block">
                        <strong class="text-dark">FLIGHT INFO</strong>
                        {{ $trip->airbus_number }} <br>
                        @php
                        $mealLabels = [
                        'included' => 'Meal',
                        'snack' => 'Snack Only',
                        'no_meal' => 'No Meal',
                        ];
                        @endphp

                        {{ $mealLabels[$trip->meal] ?? '-' }}

                    </div>

                </div>
            </div>
            @endforeach


            <div class="help">
                <div class="help__header">Help</div>

                <div class="help__content">
                    <div class="help__reservation">
                        <strong>Your Reservation Code:</strong>
                        <span class="help__code text-dark">{{ $passenger->pnr }}</span>
                    </div>

                    <div class="help__company">
                        <strong>BE FRESH PLC</strong><br>
                        <a class="text-dark" href="#">C and F Tower(9th Fl)1222 sk.mujib Rd</a><br>
                        <a class="text-dark" href="#">Chittagong, 4000</a><br>
                        <a class="text-dark" href="#">Bangladesh</a>
                    </div>
                </div>
            </div>
            <div class="print-footer text-center w-100">
                ©{{ date('Y') }} Travelport.
            </div>



            <!-- FOOTER -->
            <footer class="py-3">
                <div class="container-fluid" style="max-width:1030px">
                    <div class="d-flex flex-column flex-sm-row
             justify-content-center justify-content-sm-between
             align-items-center gap-3
             text-center text-sm-start">
                        <div>
                            <a href="#">Terms Of Use</a> |
                            <a href="#">Privacy Policy</a> |
                            <a href="#">Site Feedback</a> |
                            <a href="#">Change Language</a><br>
                            ©2026 Travelport.<br>v25.2.0
                        </div>
                        <img src="{{ asset('frontendAssets/img/travelport.gif') }}" alt="ViewTrip">
                    </div>
                </div>
            </footer>
        </div>
<div class="modal fade email-modal" id="emailModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="text-white">Email Your Itinerary</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <form id="emailItineraryForm" method="POST" action="{{ route('itinerary.email.send') }}">
                @csrf

                <div class="modal-body">
                    <input type="email" name="to_email" class="form-control mb-5" placeholder="To Email Address" required>
                    <input type="email" name="from_email" class="form-control mb-5" placeholder="Your Email Address" required>
                    <textarea name="message" class="form-control" rows="5" placeholder="Message"></textarea>

                    <input type="hidden" name="passenger_id" value="{{ $passenger->id }}">
                </div>

                <div class="modal-footer d-flex justify-content-start">
                    <button class="btn btn-green">SEND EMAIL</button>
                    <button type="button" class="btn btn-gray" data-bs-dismiss="modal">CANCEL</button>
                </div>
            </form>

        </div>
    </div>
</div>

    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
        <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
        <!-- Bootstrap JS -->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
        <script>
            $(function() {
                $("#loginToggle").on("click", function(e) {
                    e.stopPropagation();
                    $(this).toggleClass("active");
                    $("#loginPanel").stop(true, true).slideToggle(200);
                });
                $(document).on("click", function() {
                    $("#loginPanel").slideUp(200);
                    $("#loginToggle").removeClass("active");
                });
            });

        </script>
        <script>
            $(function() {

                function expandItem(item) {
                    item.find('.trip-item__details').slideDown(200);
                    item.find('.trip-item__toggle i')
                        .removeClass('fa-circle-plus')
                        .addClass('fa-circle-minus');
                    item.find('.trip-item__toggle span').text('Collapse');
                }

                function collapseItem(item) {
                    item.find('.trip-item__details').slideUp(200);
                    item.find('.trip-item__toggle i')
                        .removeClass('fa-circle-minus')
                        .addClass('fa-circle-plus');
                    item.find('.trip-item__toggle span').text('Expand');
                }

                // SINGLE ITEM TOGGLE
                $('.trip-item__toggle').on('click', function() {
                    const item = $(this).closest('.trip-item');
                    item.find('.trip-item__details').is(':visible') ?
                        collapseItem(item) :
                        expandItem(item);
                });

                // MASTER TOGGLE
                $('.trip__toggle-all').on('click', function() {
                    const btn = $(this);
                    const collapsed = btn.attr('data-state') === 'collapsed';

                    $('.trip-item').each(function() {
                        collapsed ? expandItem($(this)) : collapseItem($(this));
                    });

                    btn.attr('data-state', collapsed ? 'expanded' : 'collapsed');
                    btn.find('i').toggleClass('fa-circle-plus fa-circle-minus');
                    btn.find('span').text(collapsed ? 'Collapse All' : 'Expand All');
                });

            });

        </script>
        <script>
            function printReservation() {
                window.print();
            }

        </script>
        <script>
document.getElementById('openEmailModal').addEventListener('click', function () {
    new bootstrap.Modal(document.getElementById('emailModal')).show();
});
</script>
<script>
document.getElementById('emailItineraryForm').addEventListener('submit', function (e) {
    e.preventDefault();

    let form = this;
    let formData = new FormData(form);

    Swal.fire({
        title: 'Sending Email',
        text: 'Please wait...',
        allowOutsideClick: false,
        didOpen: () => {
            Swal.showLoading();
        }
    });

    fetch("{{ route('itinerary.email.send') }}", {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('input[name=_token]').value,
            'Accept': 'application/json'
        },
        body: formData
    })
    .then(async response => {
        const data = await response.json();
        if (!response.ok) throw data;
        return data;
    })
    .then(data => {
        Swal.fire({
            icon: 'success',
            title: 'Success',
            text: data.message,
            timer: 2000,
            showConfirmButton: false
        });

        // close modal
        const modalEl = document.getElementById('emailModal');
        const modal = bootstrap.Modal.getInstance(modalEl);
        modal.hide();

        form.reset();
    })
    .catch(error => {
        let msg = 'Something went wrong';

        if (error.errors) {
            msg = Object.values(error.errors).flat().join('\n');
        } else if (error.message) {
            msg = error.message;
        }

        Swal.fire({
            icon: 'error',
            title: 'Failed',
            text: msg
        });
    });
});
</script>

</body>

</html>
