@extends('adminlte::page')

@section('content_header')
    <h1>@lang('global.Cars') @lang('global.List')</h1>
@endsection

@section('content')

    <x-row>
        <x-col>
            <x-filter>
                <x-row>
                    <x-col width="3">
                        <x-form-group.select for="usager_id" label="global.Usager">
                            @foreach (get_all_usagers() as $usager)
                                <option value="{{ $usager->id }}">{{ $usager->full_name }}</option>
                            @endforeach
                        </x-form-group.select>
                    </x-col>
                
                    <x-col width="3">
                        <x-form-group.select for="vehicule_type_id" label="global.Car Type" error="vehicule_type_id">
                            @foreach(get_intitules_by_group([['slug', '=', 'types-vehicules']]) as $intitule)
                                <option value="{{ $intitule->id }}">{{ $intitule->libelle }}</option>
                            @endforeach
                        </x-form-group.select>
                    </x-col>

                    <x-col width="2">
                        <div class="form-group">
                            <label>@lang('global.Validity Insurance')</label>
                            <div class="input-group">
                                <button type="button" class="btn btn-default flex-grow-1 text-left" id="insurance-daterange-btn">
                                    <i class="far fa-calendar-alt"></i> @lang('global.Period')
                                    <i lass="fas fa-caret-down float-right"></i>
                                </button>
                            </div>
                        </div>
                        <input type="hidden" name="insurance_date" id="insurance_date" />
                    </x-col>

                    <x-col width="2">
                        <div class="form-group">
                            <label>@lang('global.Validity TC')</label>
                            <div class="input-group">
                                <button type="button" class="btn btn-default flex-grow-1 text-left" id="tc-daterange-btn">
                                    <i class="far fa-calendar-alt"></i> @lang('global.Period')
                                    <i lass="fas fa-caret-down float-right"></i>
                                </button>
                            </div>
                        </div>
                        <input type="hidden" name="tc_date" id="tc_date" />
                    </x-col>

                    <x-col width="2">
                        <div class="form-group">
                            <label>@lang('global.Validity Annual Tax')</label>
                            <div class="input-group">
                                <button type="button" class="btn btn-default flex-grow-1 text-left" id="tax-daterange-btn">
                                    <i class="far fa-calendar-alt"></i> @lang('global.Period')
                                    <i lass="fas fa-caret-down float-right"></i>
                                </button>
                            </div>
                        </div>
                        <input type="hidden" name="tax_date" id="tax_date" />
                    </x-col>
                </x-row>
            </x-filter>
        </x-col>

        <x-col>
            <x-card>
                {{-- <x-slot name="tools">
                    <a class="btn btn-primary btn-sm" href="{{ route('cars.create') }}">{!! Util::FA_ICON("plus") !!} @lang('global.Add New')</a>
                </x-slot> --}}

                <x-table id="cars-table">
                    <thead>
                        <tr>
                            <th>@lang('global.Id')</th>
                            <th>@lang('global.Car Type')</th>
                            <th>@lang('global.Car Registration')</th>
                            <th>@lang('global.Validity Insurance')</th>
                            <th>@lang('global.Validity Annual Tax')</th>
                            <th>@lang('global.Validity TC')</th>
                            <th>@lang('global.Created At')</th>
                        </tr>
                    </thead>
                </x-table>
            </x-card>
        </x-col>
    </x-row>

@endsection

@push('js')
    <script>
        window.dataTable = $('#cars-table').DataTable({
            serverSide: true,
            processing: true,
            ajax: {
                url: '{{ route('cars.index') }}',
                data: d => {

                    if ($('#usager_id').val())  {

                        d.usager_id = $('#usager_id').val();
                    }
                    
                    if ($('#insurance_date').val())  {

                        d.insurance_date = $('#insurance_date').val();
                    }
                    
                    if ($('#tc_date').val())  {

                        d.tc_date = $('#tc_date').val();
                    }
                    
                    if ($('#tax_date').val())  {

                        d.tax_date = $('#tax_date').val();
                    }
                    
                    if ($('#vehicule_type_id').val())  {

                        d.vehicule_type_id = $('#vehicule_type_id').val();
                    }
                }
            },
            columns: [
                {data: 'id'},
                {data: 'vehicule_type_id'},
                {data: 'immat_no'},
                {data: 'insurance_date'},
                {data: 'tax_date'},
                {data: 'tc_date'},
                {data: 'created_at'}
            ]
        });

        $(function () {
            $('#usager_id, #insurance_date, #tc_date, #tax_date, #vehicule_type_id').on('change', function () {

                window.dataTable.ajax.reload();
            });

            //Date range as a button
            $('#insurance-daterange-btn').daterangepicker(
            {
                ranges   : {
                    '@lang("global.Today")'       : [moment(), moment()],
                    '@lang("global.Yesterday")'   : [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    '@lang("global.Last 7 Days")' : [moment().subtract(6, 'days'), moment()],
                    '@lang("global.Last 30 Days")': [moment().subtract(29, 'days'), moment()],
                    '@lang("global.This Month")'  : [moment().startOf('month'), moment().endOf('month')],
                    '@lang("global.Last Month")'  : [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                },
                /* startDate: moment().subtract(29, 'days'),
                endDate  : moment() */
            },
            function (start, end) {

                $('#insurance-daterange-btn').html( "<span>"+start.format('DD-MM-YYYY') + ' ~ ' + end.format('DD-MM-YYYY')+'&nbsp; </span><i class="fas fa-caret-down"></i>');

                const daterange = start.format('MMMM D, YYYY') + '-' + end.format('MMMM D, YYYY');
                $('#insurance_date').val( daterange ).trigger('change');
            }
            );

            $('#tc-daterange-btn').daterangepicker(
            {
                ranges   : {
                    '@lang("global.Today")'       : [moment(), moment()],
                    '@lang("global.Yesterday")'   : [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    '@lang("global.Last 7 Days")' : [moment().subtract(6, 'days'), moment()],
                    '@lang("global.Last 30 Days")': [moment().subtract(29, 'days'), moment()],
                    '@lang("global.This Month")'  : [moment().startOf('month'), moment().endOf('month')],
                    '@lang("global.Last Month")'  : [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                },
                /* startDate: moment().subtract(29, 'days'),
                endDate  : moment() */
            },
            function (start, end) {

                $('#tc-daterange-btn').html( "<span>"+start.format('DD-MM-YYYY') + ' ~ ' + end.format('DD-MM-YYYY')+'&nbsp; </span><i class="fas fa-caret-down"></i>');

                const daterange = start.format('MMMM D, YYYY') + '-' + end.format('MMMM D, YYYY');
                $('#tc_date').val( daterange ).trigger('change');
            }
            );

            $('#tax-daterange-btn').daterangepicker(
            {
                ranges   : {
                    '@lang("global.Today")'       : [moment(), moment()],
                    '@lang("global.Yesterday")'   : [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    '@lang("global.Last 7 Days")' : [moment().subtract(6, 'days'), moment()],
                    '@lang("global.Last 30 Days")': [moment().subtract(29, 'days'), moment()],
                    '@lang("global.This Month")'  : [moment().startOf('month'), moment().endOf('month')],
                    '@lang("global.Last Month")'  : [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                },
                /* startDate: moment().subtract(29, 'days'),
                endDate  : moment() */
            },
            function (start, end) {

                $('#tax-daterange-btn').html( "<span>"+start.format('DD-MM-YYYY') + ' ~ ' + end.format('DD-MM-YYYY')+'&nbsp; </span><i class="fas fa-caret-down"></i>');

                const daterange = start.format('MMMM D, YYYY') + '-' + end.format('MMMM D, YYYY');
                $('#tax_date').val( daterange ).trigger('change');
            }
            );
        });
    </script>
@endpush