@extends($activeTemplate . 'layouts.frontend')
@section('content')
    <div class="ticket-search-bar bg_img padding-top"
        style="background: url({{ getImage('assets/templates/basic/images/search_bg.jpg') }}) left center;">
        <div class="container">
            <div class="bus-search-header">
                <section class="ticket-form-section">
                    <form action="{{ route('ticket') }}" class="ticket-form" id="ticketSearchForm">
                        <input type="hidden" id="filterOrder" name="order">
                        <div class="ticket-form-wrapper">
                            <div class="ticket-form-group pickup-point-group">
                                <span class="icon">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"
                                        viewBox="0 0 14 14" fill="none">
                                        <path
                                            d="M13.9275 1.42945C14.2541 0.580255 13.4197 -0.254121 12.5705 0.0724892L0.673149 4.64842C-0.278128 5.01429 -0.202793 6.3845 0.782861 6.64385L5.69051 7.93537C5.87356 7.98353 6.01643 8.12647 6.06459 8.30945L7.35611 13.2171C7.61546 14.2028 8.98573 14.2782 9.35155 13.3268L13.9275 1.42945Z"
                                            fill="currentColor"></path>
                                    </svg>
                                </span>
                                <div class="ticket-form-group-content">
                                    <label class="title">@lang('Pickup Point')</label>
                                    <select class="form--control select2 pickupPoint" name="pickup" required>
                                        @foreach ($stoppages as $stoppage)
                                            <option value="{{ $stoppage->id }}" data-city="{{ $stoppage?->city_id }}"
                                                @selected(request()->pickup == $stoppage->id)>
                                                {{ __($stoppage->name) }} - {{ __($stoppage?->city?->name) }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <span class="changeStoppage ticket-form-arrow">
                                <svg _ngcontent-ng-c827709370="" xmlns="http://www.w3.org/2000/svg" width="18"
                                    height="23" viewBox="0 0 18 23" fill="none"
                                    class="hover:scale-110 transition-transform">
                                    <path _ngcontent-ng-c827709370=""
                                        d="M18 18.4L13.2 13.8L13.2 17.25L4.8 17.25C3.48 17.25 2.4 16.215 2.4 14.95C2.4 13.685 3.48 12.65 4.8 12.65L13.2 12.65C15.852 12.65 18 10.5915 18 8.05C18 5.5085 15.852 3.45 13.2 3.45L4.8 3.45L4.8 -5.7699e-07L1.70628e-06 4.6L4.8 9.2L4.8 5.75L13.2 5.75C14.52 5.75 15.6 6.785 15.6 8.05C15.6 9.315 14.52 10.35 13.2 10.35L4.8 10.35C2.148 10.35 1.36496e-06 12.4085 1.25386e-06 14.95C1.14277e-06 17.4915 2.148 19.55 4.8 19.55L13.2 19.55L13.2 23L18 18.4Z"
                                        fill="currentColor"></path>
                                </svg>
                            </span>
                            <div class="ticket-form-group destination-point-group">
                                <span class="icon">
                                    <svg _ngcontent-ng-c827709370="" xmlns="http://www.w3.org/2000/svg" width="12"
                                        height="14" viewBox="0 0 12 14" fill="none">
                                        <path _ngcontent-ng-c827709370=""
                                            d="M10.2426 10.414L9.42472 11.2364C8.82184 11.8379 8.03967 12.6114 7.07779 13.5569C6.47678 14.1478 5.52323 14.1477 4.92229 13.5567L2.51663 11.1776C2.21429 10.8757 1.96121 10.6212 1.75736 10.414C-0.585785 8.03165 -0.585785 4.16909 1.75736 1.78675C4.1005 -0.595584 7.89951 -0.595584 10.2426 1.78675C12.5858 4.16909 12.5858 8.03165 10.2426 10.414ZM7.72284 6.29282C7.72284 5.3254 6.95148 4.54115 6.00001 4.54115C5.04853 4.54115 4.27716 5.3254 4.27716 6.29282C4.27716 7.26021 5.04853 8.04447 6.00001 8.04447C6.95148 8.04447 7.72284 7.26021 7.72284 6.29282Z"
                                            fill="currentColor"></path>
                                    </svg>
                                </span>
                                <div class="ticket-form-group-content">
                                    <label class="title">@lang('Dropping Point')</label>
                                    <select class="form--control select2 droppingPoint" name="destination" required>
                                        @foreach ($stoppages as $stoppage)
                                            <option value="{{ $stoppage->id }}" @selected(request()->destination == $stoppage->id)>
                                                {{ __($stoppage->name) }} - {{ __($stoppage?->city?->name) }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="ticket-form-group search-date-group">
                                <span class="icon">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"
                                        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"
                                        stroke-linecap="round" stroke-linejoin="round"
                                        class="lucide lucide-calendar-fold-icon lucide-calendar-fold">
                                        <path d="M8 2v4" />
                                        <path d="M16 2v4" />
                                        <path d="M21 17V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h11Z" />
                                        <path d="M3 10h18" />
                                        <path d="M15 22v-4a2 2 0 0 1 2-2h4" />
                                    </svg>
                                </span>
                                <div class="ticket-form-group-content">
                                    <label class="title">@lang('Journey Date')</label>
                                    <input class="form--control date-range dateOfJourney" name="date_of_journey"
                                        type="text" value="{{ request()->date_of_journey }}"
                                        placeholder="@lang('Date of Journey')" autocomplete="off" required>
                                </div>
                            </div>
                            <div class="ticket-form-button">
                                <button class="btn btn--base">
                                    <span class="me-2">
                                        <i class="fa-solid fa-magnifying-glass"></i>
                                    </span>
                                    @lang('SEARCH')
                                </button>
                            </div>
                        </div>
                    </form>
                </section>
            </div>
        </div>
    </div>

    <!-- Ticket Section Starts Here -->
    <section class="ticket-section pt-4 padding-bottom section-bg">
        <div class="container">
            <div class="row gy-3" id="ticketArea">
                @include($activeTemplate . 'partials.trips')
            </div>
        </div>
    </section>

    <!-- Ticket Search Starts -->
    <div class="ticket-sidebar ticketTripDetails">

    </div>
@endsection

@push('style-lib')
    <link href="{{ asset('assets/global/css/select2.min.css') }}" rel="stylesheet">
    <link type="text/css" href="{{ asset('assets/global/css/daterangepicker.css') }}" rel="stylesheet">
@endpush

@push('style')
    <style>
        .daterangepicker td.active,
        .daterangepicker td.active:hover,
        .daterangepicker .ranges li.active {
            background-color: hsl(var(--base)) !important;
        }
    </style>
@endpush

@push('script-lib')
    <script src="{{ asset('assets/global/js/select2.min.js') }}"></script>
    <script src="{{ asset('assets/global/js/moment.min.js') }}"></script>
    <script src="{{ asset('assets/global/js/daterangepicker.min.js') }}"></script>
@endpush

@push('script')
    <script>
        (function($) {
            "use strict";

            $('.ticket-form-group').on('click', function() {
                const $select = $(this).find('select.select2');
                if ($select.length && $select.data('select2')) {
                    $select.select2('open');
                }

                const $dateInput = $(this).find('.date-range');
                if ($dateInput.length && $dateInput.data('daterangepicker')) {
                    $dateInput.data('daterangepicker').show();
                }
            });

            $('.select2').each(function() {
                const $this = $(this);
                $this.select2({
                    dropdownParent: $this.closest('.ticket-form-group'),
                    width: '100%',
                });

                $this.on('select2:open', function() {
                    setTimeout(function() {
                        $('.select2-container--open .select2-search__field')
                            .attr('placeholder', `@lang('Search Location')`);
                    }, 0);
                });
            });

            // date range picker

            const datePicker = $('.date-range').daterangepicker({
                autoUpdateInput: true,
                singleDatePicker: true,
                minDate: new Date()
            });

            $('.reset-button').on('click', function() {
                $('.search').attr('checked', false);
                refreshData();
            });

            $(document).on('change', 'input[name="order"]',function(event) {
                event.preventDefault();
                $('#filterOrder').val($('input[name="order"]:checked').val());
                refreshData();
            });

            $('#ticketSearchForm').on('submit', function(event) {
                event.preventDefault();
                refreshData();
            });

            function refreshData() {
                let url = $('#ticketSearchForm').attr('action');
                let formData = $('#ticketSearchForm').serialize();
                $(".preloader").fadeIn();

                let requestUrl = url + '?' + formData;
                window.history.pushState({
                    path: requestUrl
                }, '', requestUrl);

                $.ajax({
                    url: '{{ route('search') }}',
                    type: 'GET',
                    data: formData,
                    success: function(response) {
                        if (response.html) {
                            $('#ticketArea').html(response.html);
                        } else {
                            notify('error', response.error);
                        }
                        $(".preloader").fadeOut();
                    },
                    error: function(xhr) {
                        $(".preloader").fadeOut();
                        notify('error', xhr.statusText);
                    }
                });
            }

            $(document).on("click", ".booketTicket", function() {
                const tripId = $(this).data('trip-id');
                const pickup = $(this).data('trip-pickup');
                const destination = $(this).data('trip-destination');

                $.ajax({
                    url: "{{ route('trip.seat.details') }}",
                    type: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        id: tripId,
                        pickup,
                        destination
                    },
                    success: function(response) {
                        if (response.error != null || response.error != undefined) {
                            notify('error', response.error);
                        } else {
                            $(".ticket-sidebar").addClass("show-sidebar");
                            $(".sidebar-overlay").addClass("show");
                            $("body").addClass("scroll-hide-sm");
                            $(document).find('.ticketTripDetails').html(response.html);
                            response.html = '';
                            bookedSeats(response);
                        }
                    },
                    error: function(xhr, status, s) {}
                });

            });

            $(document).on("click", ".sidebar-close-icon", function() {
                $(".ticket-sidebar").removeClass("show-sidebar");
                $(".sidebar-overlay").removeClass("show");
                $("body").removeClass("scroll-hide-sm");
            });
            $(document).on("click", ".sidebar-overlay", function() {
                $(".ticket-sidebar").removeClass("show-sidebar");
                $(".sidebar-overlay").removeClass("show");
                $("body").removeClass("scroll-hide-sm");
            });
            $(document).on("click", ".close-boarding-area", function() {
                $(document).find('.boardingPointArea').remove();
                $(document).find('.seatLayoutArea').removeClass('d-none');
            });


            // tab js start here ============================
            function updateBar(navItem) {
                var width = navItem.outerWidth();
                var position = navItem.position();
                $('.tab-bar').css({
                    'width': width + 'px',
                    'left': position + 'px'
                });
            }

            $('.custom--tab .nav-link').on('click', function() {
                updateBar($(this))
            });
            var activeNavItem = $('.custom--tab .nav-link.active');
            if (activeNavItem) {
                updateBar(activeNavItem)
            }
            // tab js end here ===================================

            function bookedSeats(response) {
                const stoppagesIds = response.stoppagesIds;
                const reqSource = stoppagesIds.indexOf(response.reqSource.toString());
                const reqDestination = stoppagesIds.indexOf(response.reqDestination.toString());

                const tripStoppages = response.stoppages.slice(reqSource, reqDestination);

                $.each(response.bookedSeats, function(i, book) {
                    const bookedSource = stoppagesIds.indexOf(book.pickup_point.toString());
                    const bookedDestination = stoppagesIds.indexOf(book.dropping_point.toString());

                    let genderClass = 'selected-by-others';
                    let gender = (book.user_id > 0) ? book.user?.gender : book.guest_user?.gender;
                    if (gender == 1) {
                        genderClass = 'selected-by-gents';
                    } else if (gender == 2) {
                        genderClass = 'selected-by-ladies';
                    }

                    if (reqDestination > bookedSource && reqSource < bookedDestination) {
                        $.each(book.seats, function(index, val) {
                            $(document).find(`.seat-wrapper .seat[data-seat="${val}"]`).parent()
                                .addClass(`seat-condition sold disabled`);
                        });
                    }
                });

                boardingPoints(tripStoppages);
            }

            let boardingOptions = '';

            function boardingPoints(tripStoppages) {
                boardingOptions = '';
                let cityId = $('#pickup').find(':selected').data('city');

                $.each(tripStoppages, function(i, stoppage) {
                    if (cityId == stoppage.city_id) {
                        boardingOptions += `<div class="counter-list__item">
                            <div class="form-check mb-0 mt-1">
                                <input class="form-check-input" id="flexRadioDefault${i}" value="${stoppage.id}" name="boarding_point" type="radio">
                                <label class="form-check-label mb-0" for="flexRadioDefault${i}">
                                    <div class="counter-wrapper">
                                        <div class="counter-wrapper__top">
                                            <h6 class="counter-name"> ${stoppage.name} </h6>
                                        </div>
                                        <div class="counter-wrapper__content">
                                            <span class="text"> ${stoppage.city?.name} </span>
                                        </div>
                                    </div>
                                </label>
                            </div>
                        </div>`;
                    }
                });
            }
            $(document).on('click', '.seat-wrapper .seat', function() {
                $(this).toggleClass('selected');
                let selectedSeats = $(document).find('.seat.selected');
                let price = $(document).find('input[name=price]').val();
                let seats = '';
                const confirmBtn = $(document).find('.seatConfirmFormArea button');
                if (selectedSeats.length > 0) {

                    $.each(selectedSeats, function(i, value) {
                        seats += $(value).data('seat');
                        if (i < selectedSeats.length - 1) {
                            seats += ',';
                        }
                    });
                    confirmBtn.prop('disabled', false);
                } else {
                    confirmBtn.prop('disabled', true);
                }
                $(document).find('.totalTicket').text(selectedSeats.length);
                $(document).find('.totalAmount').text((selectedSeats.length * price).toFixed(2));
                $(document).find('input[name=seats]').val(seats);
            });

            $(document).on('submit', '#seatConfirmForm', function(event) {
                event.preventDefault();


                let seat = $(this).find('input[name=seats]').val();
                if (seat != '') {
                    let copyForm = $(document).find('.seatConfirmFormArea').clone(true);
                    copyForm.find('form').attr('id', 'bookingConfirmForm');
                    copyForm.find('button').prop('disabled', true);

                    const boardingHtml = `<div class="boardingPointArea">
                        <div class="ticket-sidebar__container">
                            <div class="ticket-sidebar__header">
                                <span class="close-boarding-area" role="button"> <i class="las la-arrow-left la-lg"></i> </span>
                                <h6 class="title"> @lang('Select Boarding Point') </h6>
                            </div>
                            <div class="ticket-sidebar__body">
                                <div class="counter-list">${boardingOptions}</div>
                            </div>
                        </div>
                        <div class="ticket-sidebar__bottom">${copyForm.html()}</div>
                    </div>`;

                    $(document).find('.seatLayoutArea').addClass('d-none');
                    $('.ticketTripDetails').append(boardingHtml);

                }
            });

            $(document).on('click', 'input[name="boarding_point"]', function() {
                $(document).find('#bookingConfirmForm button').prop('disabled', false);
                $(document).find('#bookingConfirmForm').find('input[name=boarding_point').val($(this).val());
            });


            $('.changeStoppage').on('click', function() {
                const pickup = $('#pickup');
                const destination = $('#destination');
                const pickupStoppage = pickup.val();
                pickup.val(destination.val()).trigger('change');
                destination.val(pickupStoppage).trigger('change');
            });

        })(jQuery)
    </script>
@endpush


@push('style')
    <style>
        .radio-wrapper {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            justify-content: flex-end;
            gap: 15px;
        }

        .radio-wrapper .form-check {
            position: relative;
            z-index: 1;
            padding: 0;
            display: flex;
            align-items: center;
        }

        .radio-wrapper .form-check .form-check-label {
            margin: 0;
            padding: 6px 12px;
            font-size: 14px;
            color: hsl(var(--base));
        }

        .radio-wrapper .form-check .form-check-input {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            margin: 0;
            background-image: none !important;
            z-index: -1;
            border: 1px solid hsl(var(--base));
            color: hsl(var(--base));
            border-radius: 4px;
        }

        .radio-wrapper .form-check .form-check-input:checked {
            background-color: hsl(var(--base)) !important;
            border-color: hsl(var(--base)) !important;
        }

        .radio-wrapper .form-check:has(.form-check-input:checked) .form-check-label {
            color: #fff !important;
        }

        /*========= ticket sidebar css start here ========= */
        .ticket-sidebar {
            position: fixed;
            width: 450px;
            height: 100vh;
            background-color: #fff;
            z-index: 99999;
            transition: 0.4s linear;
            right: 0;
            top: 0;
            display: flex;
            align-items: start;
            flex-direction: row;
            transform: translateX(100%);
            flex-direction: column;
        }

        @media (max-width:575px) {
            .ticket-sidebar {
                width: 320px;
            }
        }

        .ticket-sidebar__body {
            padding: 30px 20px 0;
            height: calc(100% - 35px);
            overflow-y: auto;
        }

        .ticket-sidebar__body::-webkit-scrollbar {
            width: 5px;
        }

        .ticket-sidebar__body::-webkit-scrollbar-thumb {
            width: 0px;
            border-radius: 8px;
            background-color: transparent;
            opacity: 0;
        }

        .ticket-sidebar__body::-webkit-scrollbar-track {
            background-color: transparent;
        }

        .ticket-sidebar__body:hover::-webkit-scrollbar-thumb {
            background-color: #c9c9c9;
        }

        .sidebar-close-icon {
            font-size: 20px;
            cursor: pointer;
            transition: .2s linear;
        }

        .sidebar-close-icon:hover {
            color: #dc3545;
        }

        .ticket-sidebar__header {
            border-bottom: 1px solid rgba(27, 39, 61, 0.1);
            padding: 10px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 20px;
        }

        .bottom-text-wrapper {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            gap: 10px;
        }

        .bottom-text-wrapper__title {
            color: hsl(var(--base));
            font-size: 20px;
        }

        .bottom-text-wrapper .amount {
            font-size: 20px;
            color: #000;
            font-weight: 600;
        }

        .ticket-sidebar__bottom {
            position: relative;
            z-index: 2;
            background: #fff;
            margin-top: auto;
            padding: 20px;
            width: 100%;
            border-top: 1px solid rgba(27, 39, 61, 0.1);
            box-shadow: 0 3px 20px 1px rgba(31, 31, 31, 0.07);
        }

        .ticket-sidebar.show-sidebar {
            transform: translateX(0);
            z-index: 9991;
        }

        .company-logo {
            max-width: 120px;
        }

        .company-logo img {
            width: 100%;
        }

        .company-wrapper {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 24px;
        }

        .company-name {
            margin-bottom: 0;
        }

        .coach-number {
            font-weight: 600;
            font-size: 18px;
        }

        .location-wrapper {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
            gap: 20px;
            position: relative;
        }

        .location-wrapper::after {
            position: absolute;
            content: '';
            top: 50%;
            left: calc(50% - 80px);
            width: 160px;
            transform: translateY(-50%);
            height: 1px;
            border: 1px dashed #c8c3c3;
        }

        @media (max-width: 575px) {
            .location-wrapper::after {
                left: calc(50% - 50px);
                width: 115px;
            }
        }

        .location-wrapper__left .text {
            font-size: 12px;
            font-weight: 600;
            margin-bottom: 0;
            line-height: 1;
        }

        .location-text {
            font-size: 14px;
            line-height: 1;
            font-weight: 700;
            color: #000;
        }

        .ticket-sidebar__container {
            height: calc(100vh - 125px);
            width: 100%;
        }

        .location-wrapper__left .time {
            font-size: 14px;
            font-weight: 600;
        }

        .total-seat {
            padding: 10px 20px;
            text-align: center;
            background: hsl(var(--base)/.059);
            margin-bottom: 20px;
        }

        .total-seat__number {
            color: #000;
            font-weight: 600;
        }

        /*=========== ticket sidebar css end here ========= */
        /*========== custom tab css start here ========== */
        .custom--tab {
            margin-bottom: 30px;
            position: relative;
            z-index: 1;
            gap: 5px;
            flex-wrap: wrap;
            margin-top: 0;
        }

        .custom--tab .nav-item {
            border-bottom: 0;
            padding: 0 !important;
        }

        .custom--tab .nav-item .nav-link {
            color: #000;
            padding: 8px 12px;
            background-color: transparent;
            border-radius: 4px;
            -webkit-transition: 0.4s;
            transition: 0.4s;
            font-size: 0.875rem;
            border: 1px solid rgba(27, 39, 61, 0.3) !important;
        }

        @media screen and (max-width: 1199px) {
            .custom--tab .nav-item .nav-link {
                padding: 12px 15px;
            }
        }

        .custom--tab .nav-item .nav-link.active {
            color: #fff !important;
            border-color: hsl(var(--base)) !important;
            background-color: hsl(var(--base));
        }

        .custom--tab .nav-item .nav-link:hover {
            background-color: hsl(var(--base));
            color: #fff;
        }

        .custom--tab .tab-bar {
            position: absolute;
            height: 100%;
            bottom: 0px;
            border-radius: 4px;
            background-color: hsl(var(--base));
            -webkit-transition: 0.3s linear;
            transition: 0.3s linear;
            z-index: -1;
            padding: 0;
        }

        .body-title {
            margin-bottom: 10px;
        }

        .ticket-status {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            gap: 10px;
        }

        .ticket-status__list {
            font-size: 14px;
            font-weight: 600;
            position: relative;
            padding-left: 32px;
        }

        .ticket-status__list::before {
            position: absolute;
            content: "";
            left: 0px;
            width: 25px;
            height: 22px;
            border: 1px solid #979797;
            top: 53%;
            border-radius: 3px;
            transform: translateY(-50%);
        }

        @media (max-width: 575px) {
            .ticket-status__list::before {
                width: 20px;
                height: 18px;
                top: 48%;
            }

            .ticket-status__list {
                padding-left: 26px;
            }
        }

        .ticket-status__list:nth-child(2)::before {
            background: #d7d7d7;
            border-color: #d7d7d7;
        }

        .ticket-status__list:nth-child(3)::before {
            background: hsl(var(--base));
            border-color: hsl(var(--base));
        }

        .counter-list__item {
            border-bottom: 1px solid rgba(27, 39, 61, 0.1);
            transition: .2s linear;
            padding: 5px 12px;
        }

        .ticket-sidebar__body:has(.counter-list) {
            padding: 0;
        }

        .counter-list__item:hover {
            background-color: #dddddd57;
        }

        .counter-list__item .form-check-label {
            width: 100%;
        }

        .counter-wrapper__top {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .btn--group {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-top: 6px;
        }

        .direction-btn.btn {
            border: 1px solid #000;
            color: #000;
            font-size: 12px;
            padding: 5px 10px;
            line-height: 1;
        }

        .counter-wrapper .text {
            font-size: 14px;
            font-weight: 600;
        }

        .counter-list__item:has(.form-check-input:checked) {
            background-color: #dddddd57;
        }

        .counter-list__item:has(.form-check-input:checked) .counter-name {
            color: hsl(var(--base));
        }

        .counter-list__item:has(.form-check-input:checked) .time {
            color: hsl(var(--base));
        }

        .counter-name {
            font-size: 14px;
        }

        .form-check-input {
            margin-top: 6px;
        }

        .form-check-input:checked {
            background-color: hsl(var(--base));
            border-color: hsl(var(--base));
        }

        .boardingPointArea {
            width: 100%;
        }

        /*========== custom tab css end here ========== */
    </style>
@endpush
