@include('layouts.users-navbar')
<div class="bg-gray-800">
    <div class="pt-10">
        <h1 class="text-2xl font-bold text-white text-center my-10">Mine reservationer</h1>
        @foreach ($bookings as $trip)
            <div class="bg-gray-800 pb-5 max-sm:p-4">
                <div class="relative rounded-lg border border-gray-200 shadow p-4 bg-gray-300 max-w-4xl mx-auto">
                    <div class="flex flex-col">
                        <div class="">
                            <div class="flex justify-between sm:flex-row flex-col">
                                <div class="">
                                    <div class="flex flex-col">
                                        @php
                                            $startDateTime = new DateTime($trip->trip->arrival_time);
                                            $endDateTime = new DateTime($trip->trip->departure_time);
                                        @endphp
                                           <p class="flex items-center">
                                            <span class="text-gray-800" kind="span"></span>
                                            <span class="w-16 pl-3 text-sm font-medium text-gray-800">
                                                {{ $endDateTime->format('H:i') }}
                                            </span>
                                            <span
                                                class="text-sm text-gray-800 font-bold">{{ $trip->trip->endLocation->name }}</span>
                                        </p>
                                        <div class="ml-1.5 cursor-pointer self-start"><span
                                                class="w-1 block mb-0.5 bg-neutral" style="height: 3px;"></span><span
                                                class="w-1 block mb-0.5 bg-neutral" style="height: 6px;"></span><span
                                                class="w-1 block bg-neutral" style="height: 3px;"></span>
                                        </div>
                                    </div>
                                    <div class="flex flex-col">
                                        <p class="flex items-center">
                                            <span class="text-gray-800" kind="span"></span>
                                            <p class="flex items-center"><span class="text-primary"
                                                kind="span"></span><span
                                                class="w-16 pl-3 text-sm font-medium text-gray-800">{{ $startDateTime->format('H:i') }}</span>
                                            <span
                                                class="text-sm text-gray-800 font-bold">{{ $trip->trip->startLocation->name }}</span>
                                        </p>
                                        </p>
                                    </div>
                                    <div class="flex flex-col">
                                        <p class="flex items-center mt-3">
                                            @if (strlen($trip->trip->description) > 20)
                                                <span class="!w-50" id="trip-description-{{ $trip->id }}">{{ substr($trip->trip->description, 0, 20) }}</span>
                                                <a onclick="toggleDescription({{ $trip->id }})" class="text-blue-500">Read More</a>
                                            @else
                                                {{ $trip->trip->description ?? 'N/A' }}
                                            @endif
                                        </p>
                                    </div>
                                </div>
                                @php
                                    $startDateTime = new DateTime($trip->trip->arrival_time);
                                    $endDateTime = new DateTime($trip->trip->departure_time);
                                    $timeInterval = $startDateTime->diff($endDateTime);
                                    $hours = $timeInterval->h;
                                    $minutes = $timeInterval->i;
                                    $hours += $timeInterval->days * 24;
                                @endphp
                                <div class="flex flex-col sm:w-1/2 sm:pl-8 sm:mt-0 mt-6">
                                    <div class="flex mb-2">
                                        <div class="flex items-center text-xs text-gray-800 font-medium mr-4">
                                            <span class="mr-2 text-neutral" kind="span"></span>Bus:
                                            <span class="font-bold ml-1">{{ $trip->trip->bus->type }}</span>
                                        </div>
                                        <div class="flex items-center text-xs text-gray-800 font-medium">
                                            <span class="mr-2 text-neutral" kind="span">
                                                <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
                                                    xmlns="http://www.w3.org/2000/svg">
                                                    <path
                                                        d="M8.49992 4.00016C8.49992 3.72402 8.27606 3.50016 7.99992 3.50016C7.72378 3.50016 7.49992 3.72402 7.49992 4.00016V8.20727L9.64637 10.3537C9.84163 10.549 10.1582 10.549 10.3535 10.3537C10.5487 10.1585 10.5487 9.84187 10.3535 9.64661L8.49992 7.79306V4.00016Z"
                                                        fill="currentColor"></path>
                                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                                        d="M14.6666 8.00016C14.6666 11.6821 11.6818 14.6668 7.99992 14.6668C4.31802 14.6668 1.33325 11.6821 1.33325 8.00016C1.33325 4.31826 4.31802 1.3335 7.99992 1.3335C11.6818 1.3335 14.6666 4.31826 14.6666 8.00016ZM13.6666 8.00016C13.6666 11.1298 11.1295 13.6668 7.99992 13.6668C4.87031 13.6668 2.33325 11.1298 2.33325 8.00016C2.33325 4.87055 4.87031 2.3335 7.99992 2.3335C11.1295 2.3335 13.6666 4.87055 13.6666 8.00016Z"
                                                        fill="currentColor"></path>
                                                </svg>
                                            </span>
                                            <span class="">{{ $hours }}
                                                timer, {{ $minutes }} minutter</span>
                                        </div>
                                    </div>
                                    <div class="flex">
                                        <div class="flex items-center text-xs text-gray-800 font-medium">
                                            <span class="mr-2 text-neutral" kind="span"></span>Pris:<span
                                                class="text-gray-800 font-bold mr-2 ml-1">{{ $trip->total_fare }}DKK</span>
                                                <span class="mr-2 text-neutral" kind="span"></span>Book dato:<span
                                                class="text-gray-800 font-bold mr-2 ml-1">{{ $trip->booking_date }}</span>
                                        </div>
                                    </div>
                                    <div class="flex">
                                       <div class="flex items-center text-xs text-gray-800 font-medium mt-2">
                                           <span class="mr-2 text-neutral" kind="span"></span>Rejsende:<span
                                               class="text-gray-800 font-bold mr-2 ml-1">
                                             @foreach ($trip->customers as $customers)
                                                {{$customers->name}},
                                             @endforeach
                                             </span>
                                       </div>
                                   </div>
                                   <div class="flex">
                                    <div class="flex items-center text-xs text-gray-800 font-medium mt-2">
                                        <span class="mr-2 text-neutral" kind="span"></span>Bestillingsbekræftelse:<span
                                            class="text-gray-800 font-bold mr-2 ml-1">
                                            {{$trip->confirmed===1 ? 'Bekræftet' : 'Ikke bekræftet'}}
                                          </span>
                                    </div>
                                </div>
                                </div>
                            </div>
                            <div class="flex mt-4 sm:flex-row flex-col">
                                <div class="flex flex-wrap">
                                    <button data-modal-target="top-right-modal{{ $trip->id }}"
                                        data-modal-toggle="top-right-modal{{ $trip->id }}"
                                        class="text-center font-semibold border-1 border-gray-800 flex items-center py-2 sm:px-6 px-2.5 text-xs text-gray-800 border border-gray-300 mr-2 hover:border-gray-500 transform-gpu transition-all duration-200 rounded-lg"
                                        type="button">
                                        <span class="mr-2 text-neutral" kind="span">
                                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
                                                xmlns="http://www.w3.org/2000/svg">
                                                <path fill-rule="evenodd" clip-rule="evenodd"
                                                    d="M6.27624 9.83333H4.94281C3.90342 9.83333 3.38289 8.57667 4.11785 7.84171L4.82264 7.13692C4.84814 7.11142 4.86469 7.07833 4.86978 7.04263L5.29029 4.09912L4.8025 3.2455C4.35806 2.46773 4.91966 1.5 5.81545 1.5H10.1845C11.0803 1.5 11.6419 2.46773 11.1975 3.2455L10.7097 4.09912L11.1302 7.04263C11.1353 7.07833 11.1519 7.11141 11.1774 7.13691L11.8821 7.84171C12.6171 8.57667 12.0966 9.83333 11.0572 9.83333H9.72369L8.80842 13.4944C8.59801 14.336 7.40192 14.336 7.19151 13.4944L6.27624 9.83333ZM5.67075 2.74936C5.60725 2.63825 5.68748 2.5 5.81545 2.5H10.1845C10.3125 2.5 10.3927 2.63825 10.3293 2.74936L9.67124 3.90088L10.1403 7.18406C10.176 7.43395 10.2918 7.66553 10.4702 7.84402L11.175 8.54881C11.28 8.65381 11.2057 8.83333 11.0572 8.83333H4.94281C4.79433 8.83333 4.71996 8.65381 4.82496 8.54881L5.52975 7.84402C5.70825 7.66553 5.82403 7.43395 5.85973 7.18406L6.32876 3.90088L5.67075 2.74936ZM7.30702 9.83333L7.99997 12.6051L8.69291 9.83333H7.30702Z"
                                                    fill="currentColor"></path>
                                            </svg>
                                        </span>
                                        Rute stopper
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="top-right-modal{{ $trip->id }}" data-modal-placement="top-right" tabindex="-1"
                    class="fixed top-0 left-0 right-0 z-50 hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full">
                    <div class="relative w-full max-w-2xl max-h-full">
                        <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
                            <div class="flex items-center justify-between p-5 border-b rounded-t dark:border-gray-600">
                                <h3 class="text-xl font-medium text-gray-900 dark:text-white">
                                    Route for {{ $trip->trip->startLocation->name }} To
                                    {{ $trip->trip->endLocation->name }}
                                </h3>
                                <button type="button"
                                    class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
                                    data-modal-hide="top-right-modal{{ $trip->id }}">
                                    <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path fill-rule="evenodd"
                                            d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                                            clip-rule="evenodd"></path>
                                    </svg>
                                    <span class="sr-only">Close modal</span>
                                </button>
                            </div>
                            <div class="p-6 space-y-6">
                                @foreach ($trip->trip->routeStops as $routeStops)
                                    <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
                                    <div class="overflow-y-auto overflow-x-hidden"
                                        style="min-height: calc(100% - 3.5rem); height: calc(100% - 3.5rem);">
                                        <div class="my-6 mx-4">
                                            <div class="transform-gpu transition-all origin-center opacity-100 pointer-events-auto translate-x-0"
                                                style="transition-duration: 250ms; transition-delay: 130ms; transition-timing-function: ease;">
                                                <div class="flex flex-col">
                                                    <p class="flex items-center"><span class="text-white"
                                                        kind="span"><svg width="16" height="16"
                                                            viewBox="0 0 16 16" fill="none"
                                                            xmlns="http://www.w3.org/2000/svg">
                                                            <path fill-rule="evenodd" clip-rule="evenodd"
                                                                d="M7.99992 14.6666C11.6818 14.6666 14.6666 11.6818 14.6666 7.99992C14.6666 4.31802 11.6818 1.33325 7.99992 1.33325C4.31802 1.33325 1.33325 4.31802 1.33325 7.99992C1.33325 11.6818 4.31802 14.6666 7.99992 14.6666ZM7.99992 10.6666C9.47268 10.6666 10.6666 9.47268 10.6666 7.99992C10.6666 6.52716 9.47268 5.33325 7.99992 5.33325C6.52716 5.33325 5.33325 6.52716 5.33325 7.99992C5.33325 9.47268 6.52716 10.6666 7.99992 10.6666Z"
                                                                fill="currentColor"></path>
                                                        </svg></span><span
                                                        class="w-16 pl-3 text-sm font-medium text-white">{{ $endDateTime->format('H:i') }}</span><span
                                                        class="text-sm text-white font-bold">{{ $trip->trip->endLocation->name }}</span>
                                                </p>
                                                    <div class="ml-1.5 cursor-pointer self-start"><span
                                                            class="w-1 block mb-0.5 bg-gray"
                                                            style="height: 3px;"></span><span
                                                            class="w-1 block mb-0.5 bg-gray"
                                                            style="height: 6px;"></span><span
                                                            class="w-1 block mb-0.5 bg-gray"
                                                            style="height: 6px;"></span><span
                                                            class="w-1 block bg-gray" style="height: 3px;"></span>
                                                    </div>
                                                </div>
                                            </div>

                                            @foreach ($trip->trip->routeStops as $routeStop)
                                                <div class="transform-gpu transition-all origin-center opacity-100 pointer-events-auto translate-x-0"
                                                    style="transition-duration: 250ms; transition-delay: 160ms; transition-timing-function: ease;">
                                                    <div class="flex flex-col">
                                                        <p class="flex items-center"><span class="text-white"
                                                                kind="span"><svg width="16" height="16"
                                                                    viewBox="0 0 16 16" fill="none"
                                                                    xmlns="http://www.w3.org/2000/svg">
                                                                    <path
                                                                        d="M4.99996 10.6667C5.55224 10.6667 5.99996 10.219 5.99996 9.66667C5.99996 9.11438 5.55224 8.66667 4.99996 8.66667C4.44767 8.66667 3.99996 9.11438 3.99996 9.66667C3.99996 10.219 4.44767 10.6667 4.99996 10.6667Z"
                                                                        fill="currentColor"></path>
                                                                    <path
                                                                        d="M12 9.66667C12 10.219 11.5522 10.6667 11 10.6667C10.4477 10.6667 9.99996 10.219 9.99996 9.66667C9.99996 9.11438 10.4477 8.66667 11 8.66667C11.5522 8.66667 12 9.11438 12 9.66667Z"
                                                                        fill="currentColor"></path>
                                                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                                                        d="M2.16663 4C2.16663 2.61929 3.28591 1.5 4.66663 1.5H11.3333C12.714 1.5 13.8333 2.61929 13.8333 4V10.6667C13.8333 11.236 13.5738 11.7447 13.1666 12.0809V13.3333C13.1666 13.9777 12.6443 14.5 12 14.5H11.3333C10.689 14.5 10.1666 13.9777 10.1666 13.3333V12.5H5.83329V13.3333C5.83329 13.9777 5.31096 14.5 4.66663 14.5H3.99996C3.35563 14.5 2.83329 13.9777 2.83329 13.3333V12.0809C2.42612 11.7447 2.16663 11.236 2.16663 10.6667V4ZM3.16663 4C3.16663 3.17157 3.8382 2.5 4.66663 2.5H11.3333C12.1617 2.5 12.8333 3.17157 12.8333 4V6.83333H3.16663V4ZM11.1666 12.5V13.3333C11.1666 13.4254 11.2412 13.5 11.3333 13.5H12C12.092 13.5 12.1666 13.4254 12.1666 13.3333V12.4925C12.1117 12.4975 12.0561 12.5 12 12.5H11.1666ZM12 11.5C12.4602 11.5 12.8333 11.1269 12.8333 10.6667V7.83333H3.16663V10.6667C3.16663 11.1269 3.53972 11.5 3.99996 11.5H12ZM4.83329 13.3333V12.5H3.99996C3.94378 12.5 3.88819 12.4975 3.83329 12.4925V13.3333C3.83329 13.4254 3.90791 13.5 3.99996 13.5H4.66663C4.75867 13.5 4.83329 13.4254 4.83329 13.3333Z"
                                                                        fill="currentColor"></path>
                                                                </svg></span>
                                                            @php
                                                                $ddate = new DateTime($routeStop->arrival_time);
                                                                
                                                            @endphp
                                                            <span
                                                                class="w-16 pl-3 text-sm font-medium text-white">{{ $ddate->format('H:i') }}</span>
                                                            <span
                                                                class="text-sm text-white">{{ $routeStop->city->name }}</span>
                                                        </p>
                                                        <div class="ml-1.5 cursor-pointer self-start"><span
                                                                class="w-1 block mb-0.5 bg-gray"
                                                                style="height: 3px;"></span><span
                                                                class="w-1 block mb-0.5 bg-gray"
                                                                style="height: 6px;"></span><span
                                                                class="w-1 block mb-0.5 bg-gray"
                                                                style="height: 6px;"></span><span
                                                                class="w-1 block bg-gray" style="height: 3px;"></span>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                            <div class="transform-gpu transition-all origin-center opacity-100 pointer-events-auto translate-x-0"
                                                style="transition-duration: 250ms; transition-delay: 130ms; transition-timing-function: ease;">
                                                <div class="flex flex-col">
                                                    <p class="flex items-center"><span class="text-white"
                                                        kind="span"><svg width="16" height="16"
                                                            viewBox="0 0 16 16" fill="none"
                                                            xmlns="http://www.w3.org/2000/svg">
                                                            <path fill-rule="evenodd" clip-rule="evenodd"
                                                                d="M7.99992 14.6666C11.6818 14.6666 14.6666 11.6818 14.6666 7.99992C14.6666 4.31802 11.6818 1.33325 7.99992 1.33325C4.31802 1.33325 1.33325 4.31802 1.33325 7.99992C1.33325 11.6818 4.31802 14.6666 7.99992 14.6666ZM7.99992 10.6666C9.47268 10.6666 10.6666 9.47268 10.6666 7.99992C10.6666 6.52716 9.47268 5.33325 7.99992 5.33325C6.52716 5.33325 5.33325 6.52716 5.33325 7.99992C5.33325 9.47268 6.52716 10.6666 7.99992 10.6666Z"
                                                                fill="currentColor"></path>
                                                        </svg></span><span
                                                        class="w-16 pl-3 text-sm font-medium text-white">{{ $startDateTime->format('H:i') }}</span><span
                                                        class="text-sm text-white font-bold">{{ $trip->trip->startLocation->name }}</span>
                                                </p>
                                                    <div class="ml-1.5 cursor-pointer self-start"><span
                                                            class="w-1 block mb-0.5 bg-gray"
                                                            style="height: 3px;"></span><span
                                                            class="w-1 block mb-0.5 bg-gray"
                                                            style="height: 6px;"></span><span
                                                            class="w-1 block mb-0.5 bg-gray"
                                                            style="height: 6px;"></span><span
                                                            class="w-1 block bg-gray" style="height: 3px;"></span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    </p>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    </div>
    @endforeach
    <div class="flex items-center justify-center bg-gray-800 py-5">
       {{$bookings->links()}}
    </div>
</div>

</div>
@if ($bookings->count() > 0)
    <script>
        function toggleDescription(tripId) {
            var descriptionElement = document.getElementById('trip-description-' + tripId);
            var fullDescription = {!! json_encode($trip->trip->description) !!};
            
            if (descriptionElement.innerText === '{{ substr($trip->trip->description, 0, 20) }}') {
                descriptionElement.innerText = fullDescription;
            } else {
                descriptionElement.innerText = '{{ substr($trip->trip->description, 0, 20) }}';
            }
        }
    </script>
@endif
@include('layouts.footer')