@php
    $contents = getContent('banner.content', true);
    $stoppages = App\Models\Stoppage::active()->get();
@endphp
<!-- Banner Section Starts Here -->
<section class="banner-section"
    style="background: url({{ getImage('assets/images/frontend/banner/' . $contents?->data_values?->background_image, '1500x88') }}) repeat-x bottom;">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="banner-content">
                    <h2 class="banner-content__title text-center">{{ __($contents?->data_values?->heading) }}</h2>
                    <section class="ticket-form-section">
                        <form action="{{ route('ticket') }}" class="ticket-form">
                            <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="select2" name="pickup" required>
                                            <option value="">@lang('Select Pickup Point')</option>
                                            @foreach ($stoppages as $stoppage)
                                                <option value="{{ $stoppage->id }}"
                                                    @if (request()->pickup == $stoppage->id) selected @endif>
                                                    {{ __($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 name="destination" class="select2" required>
                                            <option value="">@lang('Select Dropping Point')</option>
                                            @foreach ($stoppages as $stoppage)
                                                <option value="{{ $stoppage->id }}"
                                                    @if (request()->destination == $stoppage->id) selected @endif>
                                                    {{ __($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 type="text" class="form--control date-range" name="date_of_journey"
                                            placeholder="@lang('Departure Date')" autocomplete="off">
                                    </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>
    </div>
    <div class="shape">
        <img src="{{ getImage('assets/images/frontend/banner/' . $contents?->data_values?->animation_image, '200x69') }}"
            alt="bg">
    </div>
</section>


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

            $('.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', 'Search Location');
                    }, 0);
                });
            });

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

            $('.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();
                }
            });

            $('.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>
        .daterangepicker td.active,
        .daterangepicker td.active:hover,
        .daterangepicker .ranges li.active {
            background-color: hsl(var(--base)) !important;
        }


        .select2-results__option.select2-results__option--selected,
        .select2-results__option--selectable,
        .select2-container--default .select2-results__option--disabled {
            font-size: 14px;
        }
    </style>
@endpush
