@extends('dashboard.layout.content')

@section('customTitle')
{{ __('general.add_reservation') }}
@endsection

@section('customStyle')
<link href='{{ asset("dashboard/$locale/assets/css/elements/alert.css") }}' rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<link href='{{ asset("dashboard/$locale/plugins/jquery-ui-range-slider/jquery-ui-range-slider.min.css") }}' rel="stylesheet" type="text/css" />
<link href='{{ asset("dashboard/$locale/plugins/flatpickr/flatpickr.css") }}' rel="stylesheet" type="text/css" />
<link href='{{ asset("dashboard/$locale/plugins/flatpickr/custom-flatpickr.css") }}' rel="stylesheet" type="text/css" />
@endsection

@section('customBody')

<x-layout.widget>

    <div class="filter-container">
        <div class="d-inline-flex">
            <button class="btn btn-primary filter-button"> <i class="fas fa-filter"></i></button>
        </div>
    
        <div class="filters-inputs">
            <form>
                <div class="form-row">
                    <x-fields.input placeholder="{{ __('validation.attributes.start_date') }}" cID="startDateFilter" cClass="basicFlatpickr flatpickr flatpickr-input" />
                    
                    <x-fields.input placeholder="{{ __('validation.attributes.end_date') }}" cID="endDateFilter" cClass="basicFlatpickr flatpickr flatpickr-input" />

                    <x-fields.select placeholder="{{ __('validation.attributes.company') }}" cID="companyFilter">
                        <x-fields.select.option placeholder="{{ __('general.all') }}" selected="selected" />
                    </x-fields.select>

                    <x-fields.select placeholder="{{ __('validation.attributes.branch') }}" cID="branchFilter">
                        <x-fields.select.option placeholder="{{ __('general.all') }}" selected="selected" />
                    </x-fields.select>

                    <x-fields.select placeholder="{{ __('validation.attributes.brand') }}" cID="brandFilter">
                        <x-fields.select.option placeholder="{{ __('general.all') }}" selected="selected" />
                    </x-fields.select>

                    <x-fields.select placeholder="{{ __('validation.attributes.category') }}" cID="categoryFilter">
                        <x-fields.select.option placeholder="{{ __('general.all') }}" selected="selected" />
                        @foreach ($categories as $category)
                        <x-fields.select.option placeholder="{{ $category->name }}" value="{{ $category->id }}" />
                        @endforeach
                    </x-fields.select>

                    <x-fields.select placeholder="{{ __('validation.attributes.car') }}" cID="carFilter">
                        <x-fields.select.option placeholder="{{ __('general.all') }}" selected="selected" />
                    </x-fields.select>

                    <div class="form-group col-md-4 mb-0 pr-5">
                        <label for="priceFilter" class="mb-5">{{ __('validation.attributes.price') }}</label>
                        <div id="price-range"></div>
                    </div>

                    <div class="col-12">
                        <button id="search_btn" type="button" class="btn btn-success">search</button>
                    </div>
                    
                </div>
            </form>
        </div>
    </div>

    <x-dtables.search.index></x-dtables.search.index>

</x-layout.widget>
@endsection

@section('customScript')
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<script src='{{ asset("dashboard/$locale/plugins/jquery-ui-range-slider/jquery-ui-range-slider.min.js") }}'></script>
<script src='{{ asset("dashboard/$locale/plugins/flatpickr/flatpickr.js") }}'></script>
<script src='{{ asset("dashboard/$locale/plugins/flatpickr/custom-flatpickr.js") }}'></script>
<script>
    $("#reservations-menu-box").attr("data-active", "true")

    priceTimeout = null;
    $('#price-range').rangeSlider({
        min: 1,
        max: {{$maxPrice}},
        ranges: [{
            id: 1,
            startValue: 1,
            endValue: {{$maxPrice}},
            color: "#4361ee",
        }],
        rangeSlide: function(event, ui) {
            let startValue = ui.range.startValue;
            let endValue= ui.range.endValue;

            clearTimeout(priceTimeout);
            
            priceTimeout = setTimeout(() => {
                reloadDataTable(reservationsTable,{
                    startPrice : startValue,
                    endPrice : endValue,
                });
            }, 100);
        },
        
    });



    $('#companyFilter').on('change', function() {
        $.ajax({
            url: "{{ route('dashboard.BranchDependsOnCompanyOrAll') }}",
            data: {
                company_id: $(this).val(),
            },
            success(result) {
                $('#branchFilter').html(result);
            },
        });
    });


    ajaxSelect2('#companyFilter','/dashboard/select2/companies',{
        withAll: true
    });
    ajaxSelect2('#brandFilter','/dashboard/select2/brands',{
        withAll: true
    });
    ajaxSelect2('#carFilter','/dashboard/select2/cars',{
        withAll: true
    });

    $("#search_btn").on('click', function(){
        var reservationsTable = initializeDataTable("#searchTable",{
        columns : [
            {data: 'DT_RowIndex', orderable: false, searchable: false },
            {data: "logo", searchable: false, orderable: false},
            {data: "company", searchable: false, orderable: false},
            {data: "branch", searchable: false, orderable: false},
            {data: "category", searchable: false, orderable: false},
            {data: "brand", searchable: false, orderable: false},
            {data: "car", searchable: false, orderable: false},
            {data: "base_price", searchable: false, orderable: false},
            {data: "actions", searchable: false, orderable: false},
    ]},
    {
        subPlace: "search_datatable"
    }
    );
    });

</script>
@endsection