@extends('counter_manager.layouts.app')

@section('panel')
    <div class="row gy-4">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">
                    <form id="filterForm" method="GET">
                        <div class="filter-wrapper">
                            <div class="filter-wrapper__left">
                                <div class="filter-wrapper__item">
                                    <div class="form-group mb-0">
                                        <label>@lang('Date of Journey')</label>
                                        <input class="form-control date-range" name="date_of_journey" type="text" value="{{ request()->date_of_journey ?? '' }}" required autocomplete="off">
                                    </div>
                                </div>

                                <div class="filter-wrapper__item">
                                    <div class="form-group mb-0">
                                        <label>@lang('From')</label>
                                        <select class="select2 form-control" name="from" required>
                                            <option value="" selected disabled>@lang('Select One')</option>
                                            @foreach ($stoppages as $stoppage)
                                                <option value="{{ $stoppage->id }}" @selected($stoppage->id == (request()->from ?? $counter->id))>{{ __($stoppage->name) }} - {{ __($stoppage?->city?->name) }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="d-xl-block d-none text-center">
                                <span class="changeStoppage">
                                    <i class="las la-exchange-alt"></i>
                                </span>
                            </div>
                            <div class="filter-wrapper__right">
                                <div class="filter-wrapper__item">
                                    <div class="form-group mb-0">
                                        <div class="d-flex justify-content-between gap-2 align-items-center mb-2">
                                            <label class="mb-0">@lang('To')</label>
                                            <div class="d-xl-none d-inline">
                                                <span class="btn btn--sm btn--base changeStoppage">
                                                    <i class="las la-exchange-alt"></i>
                                                </span>
                                            </div>
                                        </div>
                                        <select class="select2 form-control" name="to" required>
                                            <option value="" disabled selected>@lang('Select One')</option>
                                            @foreach ($stoppages as $stoppage)
                                                <option value="{{ $stoppage->id }}" @selected($stoppage->id == request()->to)>{{ __($stoppage->name) }} - {{ __($stoppage?->city?->name) }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="filter-wrapper__item">
                                    <div class="form-group mb-0">
                                        <button class="btn btn--primary h-45 w-100 mt-1" type="submit">
                                            <i class="las la-search"></i>
                                            @lang('Search')
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-lg-12">
            @include('counter_manager.partials.trip', ['isShowDate' => true])
        </div>
    </div>
@endsection

@push('breadcrumb-plugins')
    <a href="{{ route('counter.manager.book.ticket.cancel') }}" class="btn btn-lg btn--warning w-100">
        <i class="la la-id-card"></i> @lang('Cancel Ticket')
    </a>
@endpush

@push('script-lib')
    <script src="{{ asset('assets/admin/js/vendor/apexcharts.min.js') }}"></script>
    <script src="{{ asset('assets/admin/js/vendor/chart.js.2.8.0.js') }}"></script>
    <script src="{{ asset('assets/global/js/moment.min.js') }}"></script>
    <script src="{{ asset('assets/global/js/daterangepicker.min.js') }}"></script>
    <script src="{{ asset('assets/admin/js/charts.js') }}"></script>

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

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

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

            const datePicker = $('.date-range').daterangepicker({
                singleDatePicker: true,
                autoUpdateInput: false,
                locale: {
                    cancelLabel: 'Clear',
                    format: 'MMMM DD, YYYY'
                },
                showDropdowns: true,
                timePicker: true,
                timePicker24Hour: true,
                timePickerIncrement: 1
            });

            const changeDatePickerText = (event, selectedDate) => {
                $(event.target).val(selectedDate.format('MMMM DD, YYYY'));
            }

            $('.date-range').on('apply.daterangepicker', (event, picker) => {
                changeDatePickerText(event, picker.startDate);
            });

            if ($('.date-range').val()) {
                let selectedDate = $('.date-range').val();
                $('.date-range').data('daterangepicker').setStartDate(new Date(selectedDate));
            }

            $('.changeStoppage').on('click', function() {
                const from = $('#from');
                const to = $('#to');
                if (to.val() == '') {
                    to[0].reportValidity();
                } else {
                    const fromStoppage = from.val();
                    from.val(to.val()).trigger('change');
                    to.val(fromStoppage).trigger('change');
                }
            });
        })(jQuery)
    </script>
@endpush

@push('style')
    <style>
        .apexcharts-menu {
            min-width: 120px !important;
        }

        .empty-list {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .empty-list img {
            width: 150px;
            margin-bottom: 15px;
        }

        #paymentChartArea {
            height: 413px;
        }

        .filter-wrapper {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            align-items: flex-end;
            gap: 20px;
        }

        .filter-wrapper .changeStoppage {
            height: 45px;
            width: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 auto;
        }

        .select2-container .select2-selection--single .select2-selection__rendered {
            padding-right: 30px;
        }

        .filter-wrapper__left {
            gap: 10px 20px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            align-items: flex-end;
        }

        .filter-wrapper__right {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px 20px;
            align-items: flex-end;
        }

        @media (max-width:1199px) {
            .filter-wrapper {
                display: grid;
                grid-template-columns: 1fr;
            }

            .filter-wrapper .changeStoppage i {
                transform: rotate(90deg);
            }

            .filter-wrapper .changeStoppage {
                width: unset;
                height: unset;
            }

            .filter-wrapper__right,
            .filter-wrapper__left {
                grid-template-columns: 1fr;
            }
        }
    </style>
@endpush
