@extends('layouts.admin')
@section('title' ,$title)

@push('js')
    {{$dataTable->scripts()}}
@endpush

@include("backend.orders.scripts")

@push('js')
    <script >
        var $selectStatuses = $("select#status-filter");
        var $startDate = $("#order-start-date");
        var $endDate = $("#order-end-date");

        // const checkHomme = (name) => (name === "Joel") ? "HOMME" : "DIABLO"

        var getUrl = function(){
            let statuses = $selectStatuses.val();
            let startDate = $startDate.val();
            let endDate = $endDate.val();
            return  "{{route("admin.orders.index")}}?statuses="+statuses+"&start_date="+startDate+"&end_date="+endDate;
            {{--return  "{{route("admin.orders.index")}}?statuses="+statuses;--}}
        };

        var tableId = "orders-table";

        $(function () {
            $("select#status-filter,#order-start-date,#order-end-date").on('change',function (e) {
                refresh_datatable(tableId,getUrl());
            });
            $("table.table").on('click','tbody td a.order-set-status-to',function (e) {
                var after = function(){
                    refresh_datatable(tableId,getUrl());
                };
                changeStatus($(this),after);
            })

        })
    </script>
@endpush




@section('content')

    <div class="card shadow mb-4">
        <div class="card-header py-3 d-flex">
            <h6 class="m-0 font-weight-bold">
                {{$title}}
            </h6>
            <div class="ml-auto">
                @if(auth(activeGuard())->user()->can('order-create'))
                    <a href="{{ route('admin.orders.create') }}" class="btn btn-success">
                    <span class="icon text-white-50">
                        <i class="fa fa-plus"></i>
                    </span>
                        <span class="text">{{__("New Order")}}</span>
                    </a>
                @endif
            </div>
        </div>

        <div class="card-body py-3 border-left-secondary bg-gray-100">
            <div class="row">
                <div class="col-lg-3">
                    {!! BootForm::select('status-filter',__("Statuses"),
                        $statuses->pluck("code"),$statuses->pluck('name',"code"), ['data-plugin-multiselect',"multiple"])
                       !!}
                </div>
                <div class="col-lg-6 form-group">
                    <div class="pull-right" id="order-bloc-dates" style="margin-top: 2rem !important;">
                        <div class="input-daterange datepicker input-group mt-2"
                             data-plugin-datepicker
                             data-plugin-options="{format:'dd-mm-yyyy'}">
                            <span class="input-group-addon"><strong>{{__("To")}}</strong></span>
                            <input type="text" class="form-control form-control-sm order-input-date"
                                   name="order-start-date"
                                   readonly
                                   id="order-start-date"
                                   value="{{date("d-m-Y",strtotime(first_date_of_period()))}}">
                            <span class="input-group-addon"><strong>{{__("From")}}</strong></span>
                            <input type="text" class="form-control form-control-sm order-input-date"
                                   name="order-end-date"
                                   readonly
                                   id="order-end-date" value="{{date('d-m-Y')}}">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-body">
            <div class="col-lg-12">
                <div class="table-responsive mt-10">
                    {{$dataTable->table()}}
                </div>
            </div>
        </div>
    </div>
@endsection