@extends('company.layout.content')

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

@section('customStyle')
<link href='{{ asset("company/$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("company/$locale/plugins/jquery-ui-range-slider/jquery-ui-range-slider.min.css") }}' rel="stylesheet" type="text/css" />
<link href='{{ asset("company/$locale/plugins/flatpickr/flatpickr.css") }}' rel="stylesheet" type="text/css" />
<link href='{{ asset("company/$locale/plugins/flatpickr/custom-flatpickr.css") }}' rel="stylesheet" type="text/css" />
@endsection


@section('customBody')
<div id="content" class="main-content">
    <div class="layout-px-spacing">
        <div class="row layout-top-spacing">
            <div class="col-12 layout-spacing">
                <div class="widget-content widget-content-area br-6">
                    <div class="table-responsive">
                        <div class="filter-container">
                            <button class="btn btn-primary filter-button"> <i class="fas fa-filter"></i></button>
                            <div class="filters-inputs">
                                <form>
                                    <div class="form-row">
                                        @if ($branches)
                                        <div class="form-group col-md mb-0">
                                            <label for="branchFilter">{{ __('validation.attributes.branch') }}</label>
                                            <select id="branchFilter" class="form-control basic">
                                                <option value="" selected>{{ __('general.all') }}</option>
                                                @foreach ($branches as $branch)
                                                <option value="{{ $branch->id }}">{{ $branch->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        @endif

                                        <div class="form-group col-md mb-0">
                                            <label for="brandFilter">{{ __('validation.attributes.brand') }}</label>
                                            <select id="brandFilter" class="form-control">
                                                <option value="" selected>{{ __('general.all') }}</option>
                                            </select>
                                        </div>

                                        <div class="form-group col-md mb-0">
                                            <label for="categoryFilter">{{ __('validation.attributes.category') }}</label>
                                            <select id="categoryFilter" class="form-control basic">
                                                <option value="" selected>{{ __('general.all') }}</option>
                                                @foreach ($categories as $category)
                                                <option value="{{ $category->id }}">{{ $category->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                    <div class="form-row">
                                        <div class="form-group col-md-4">
                                            <label for="startDateFilter">{{ __('validation.attributes.start_date') }}</label>
                                            <input type="date" id="startDateFilter" class="form-control basicFlatpickr flatpickr flatpickr-input">
                                        </div>

                                        <div class="form-group col-md-4">
                                            <label for="endDateFilter">{{ __('validation.attributes.end_date') }}</label>
                                            <input type="date" id="endDateFilter" class="form-control basicFlatpickr flatpickr flatpickr-input">
                                        </div>

                                        <div class="form-group col-md-4">
                                            <label for="typeFilter">{{ __('validation.attributes.contract_type') }}</label>
                                            <select id="typeFilter" class="form-control basic">
                                                <option value="" selected>{{ __('general.all') }}</option>
                                                <option value="daily">{{ __("validation.attributes.daily") }}</option>
                                                <option value="weekly">{{ __("validation.attributes.weekly") }}</option>
                                                <option value="monthly">{{ __("validation.attributes.monthly") }}</option>
                                                <option value="yearly">{{ __("validation.attributes.yearly") }}</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-row">
                                        <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>
                                </form>
                            </div>
                        </div>
                        <table id="contractsTable" class="table table-hover dataTable text-center">
                            <thead>
                                <tr>
                                    <th>{{ __('validation.attributes.branch') }}</th>
                                    <th>{{ __('validation.attributes.car') }}</th>
                                    <th>{{ __('validation.attributes.customer_name') }}</th>
                                    <th>{{ __('validation.attributes.serial_number') }}</th>
                                    {{-- <th>{{ __('validation.attributes.contract_type') }}</th> --}}
                                    <th>{{ __('validation.attributes.start_date') }}</th>
                                    {{-- <th>{{ __('validation.attributes.start_time') }}</th> --}}
                                    <th>{{ __('validation.attributes.end_date') }}</th>
                                    {{-- <th>{{ __('validation.attributes.end_time') }}</th> --}}
                                    {{-- <th>{{ __('validation.attributes.number_of_days') }}</th> --}}
                                    <th>{{ __('validation.attributes.total_price') }}</th>
                                    <th>{{ __('validation.attributes.status') }}</th>
                                    <th>{{ __('general.actions') }}</th>
                                </tr>
                            </thead>
                            <tfoot>
                                <tr>
                                    <th>{{ __('validation.attributes.branch') }}</th>
                                    <th>{{ __('validation.attributes.car') }}</th>
                                    <th>{{ __('validation.attributes.customer_name') }}</th>
                                    <th>{{ __('validation.attributes.serial_number') }}</th>
                                    {{-- <th>{{ __('validation.attributes.contract_type') }}</th> --}}
                                    <th>{{ __('validation.attributes.start_date') }}</th>
                                    {{-- <th>{{ __('validation.attributes.start_time') }}</th> --}}
                                    <th>{{ __('validation.attributes.end_date') }}</th>
                                    {{-- <th>{{ __('validation.attributes.end_time') }}</th> --}}
                                    {{-- <th>{{ __('validation.attributes.number_of_days') }}</th> --}}
                                    <th>{{ __('validation.attributes.total_price') }}</th>
                                    <th>{{ __('validation.attributes.status') }}</th>
                                    <th>{{ __('general.actions') }}</th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
@endsection



@section('customScript')

<script src="//code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<script src='{{ asset("company/$locale/plugins/jquery-ui-range-slider/jquery-ui-range-slider.min.js") }}'></script>
<script src='{{ asset("company/$locale/plugins/flatpickr/flatpickr.js") }}'></script>
<script src='{{ asset("company/$locale/plugins/flatpickr/custom-flatpickr.js") }}'></script>

<script>
    $("#contracts-menu-box").attr("data-active", "true");
</script>

<script>
    var contractsTable = initializeDataTable("#contractsTable",{
        columns : [
            {data: "branch",searchable: false, orderable: false},
            {data: "car",searchable: false, orderable: false},
            {data: "user",searchable: false, orderable: false},
            {data: "serial_number",searchable: false},
            // {data: "type",searchable: false},
            {data: "start_date",searchable: false},
            // {data: "start_time",searchable: false,visible: false},
            {data: "end_date",searchable: false},
            // {data: "end_time",searchable: false,visible: false},
            // {data: "days_number",searchable: false,visible: false},
            {data: "total_price_with_tax",searchable: false},
            {data: "status",searchable: false},
            {data: "actions",searchable: false, orderable: false},
            {data: "mobile",visible: false},
            {data: "identification_number",visible: false},
            {data: "plate",visible: false,searchable: false, orderable: false},
            {data: "code",visible: false},
    ]
    });

    $("#branchFilter,#brandFilter,#categoryFilter,#startDateFilter,#endDateFilter,#priceFilter,#typeFilter").on("change",function(){
        reloadDataTable(contractsTable,{
            branch : $("#branchFilter").val(),
            brand : $("#brandFilter").val(),
            category : $("#categoryFilter").val(),
            start_date : $("#startDateFilter").val(),
            end_date : $("#endDateFilter").val(),
            price : $("#priceFilter").val(),
            type : $("#typeFilter").val(),
        });
    });

    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(contractsTable,{
                    startPrice : startValue,
                    endPrice : endValue,
                });
            }, 100);
        },
        
    });

    ajaxSelect2('#brandFilter', '/company/select2/brands',{
        withEmpty : true
    });

</script>
@endsection