@extends('company.layout.content')

@section('customTitle')
    @lang('general.new_contract')
@endsection

@section('customStyle')
    <link href='{{ asset("company/$locale/assets/css/elements/alert.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 d-block">
                                    <form>
                                        <div class="form-row">
                                            <div class="form-group col-md-4">
                                                <label
                                                    for="startDateFilter">{{ __('validation.attributes.start_date') }}</label>
                                                <input required type="date" id="startDateFilter"
                                                    class="form-control basicFlatpickr flatpickr flatpickr-input basicFlatpickrStartDate"
                                                    min="{{ date('Y-m-d') }}"
                                                    onchange="MinDateDependsOnStartDate('end-date-filter', this)">
                                            </div>

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

                                            <div class="form-group col-md-4">
                                                <label for="start_time">{{ __('validation.attributes.start_time') }}</label>
                                                <input required type="time" id="startTimeFilter"
                                                    class="form-control start_time_filter">
                                            </div>

                                            <div class="form-group col-md-4 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-4 mb-0">
                                                <label for="cityFilter">{{ __('validation.attributes.city') }}</label>
                                                <select id="cityFilter" class="form-control">
                                                    <option value="" selected>{{ __('general.all') }}</option>
                                                </select>
                                            </div>

                                            @if ($branches)
                                                <div class="form-group col-md-4 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

                                            <input type="hidden" id="type" class="type"
                                                value="{{ $type }}" />

                                            <div class="col-12">
                                                <button id="search" class="search btn btn-primary"
                                                    type="button">@lang('general.submit')</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>

                            <table id="carTable" class="table table-hover dataTable text-center">
                                <thead>
                                    <tr role="row">
                                        <th>{{ __('validation.attributes.code') }}</th>
                                        <th>{{ __('validation.attributes.models') }}</th>
                                        <th>{{ __('validation.attributes.brand') }}</th>
                                        <th>{{ __('validation.attributes.model') }}</th>
                                        @if ($type == 'contract')
                                            <th>{{ __('validation.attributes.branch') }}</th>
                                            <th>{{ __('validation.attributes.plate') }}</th>
                                        @endif
                                        @if ($type == 'reservation')
                                            <th>{{ __('validation.attributes.quantity') }}</th>
                                        @endif
                                        <th>{{ __('validation.attributes.is_reservation_available') }}</th>
                                        <th>{{ __('general.actions') }}</th>
                                    </tr>
                                </thead>
                                <tfoot>
                                    <tr role="row">
                                        <th>{{ __('validation.attributes.code') }}</th>
                                        <th>{{ __('validation.attributes.models') }}</th>
                                        <th>{{ __('validation.attributes.brand') }}</th>
                                        <th>{{ __('validation.attributes.model') }}</th>
                                        @if ($type == 'contract')
                                            <th>{{ __('validation.attributes.branch') }}</th>
                                            <th>{{ __('validation.attributes.plate') }}</th>
                                        @endif
                                        @if ($type == 'reservation')
                                            <th>{{ __('validation.attributes.quantity') }}</th>
                                        @endif
                                        <th>{{ __('validation.attributes.is_reservation_available') }}</th>
                                        <th>{{ __('general.actions') }}</th>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
@endsection



@section('customScript')
    <script src='{{ asset("company/$locale/plugins/flatpickr/flatpickr.js") }}'></script>
    <script src='{{ asset("company/$locale/plugins/flatpickr/custom-flatpickr.js") }}'></script>
    <script>
        $("#cars-menu-box").attr("data-active", "true");
    </script>

    <script>
        // Define The Table Columns
        var columns = [{
                data: "code",
                searchable: true,
                orderable: false
            },
            {
                data: "models",
                searchable: true,
                orderable: false
            },
            {
                data: "brand",
                searchable: true,
                orderable: false
            },
            {
                data: "model",
                searchable: true,
                orderable: false
            },
            {
                data: "is_reservation_available"
            },
            {
                data: "actions"
            },
        ];

        // Add Branch & plate Columns
        @if ($type == 'contract')
            columns.splice(4, 0, {
                data: "branch",
                searchable: false,
                orderable: false
            });
            columns.splice(5, 0, {
                data: "plate",
                searchable: false,
                orderable: false
            });
        @endif

        // Add Left Quantity Column
        @if ($type == 'reservation')
            columns.splice(4, 0, {
                data: "left_quantity",
                searchable: false,
                orderable: false
            });
        @endif


        // Initialize The The Table
        var carTable = initializeDataTable("#carTable", {
            columns
        }, );

        // Reload The Table When Click On Search Button
        $("#search").on('click', function() {
            reloadDataTable(carTable, {
                type: $("#type").val(),
                start_date_filter: $("#startDateFilter").val(),
                end_date_filter: $("#endDateFilter").val(),
                start_time_filter: $("#startTimeFilter").val(),
                brand_filter: $("#brandFilter").val(),
                city_filter: $("#cityFilter").val(),
                branch_filter: $("#branchFilter").val(),
            });
        });

        ajaxSelect2('#brandFilter', '/company/select2/brands', {
            withEmpty: true
        });
        ajaxSelect2('#cityFilter', '/company/select2/cities', {
            withEmpty: true
        });
    </script>
@endsection