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

@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>
        <div class="card-body">
            <div class="col-lg-12">
                <div class="table-responsives mt-10"  x-data="displayable_orders()">
                    {{$dataTable->table()}}
                </div>

                <x-offcanvas  id="offcanvas-displayed-invoice"
                              :closable="true"
                              data-bs-scroll="true"
                              data-bs-backdrop="true"
                              class="offcanvas-end offcanvas-size-xl">
                    <x-slot name="title">{{__("Invoice")}}</x-slot>

                    <div x-data="{
                        get order(){
                         return this.$store.invoice.order
                         }
                        }">
                        <div class="row">
                            <div class="col-lg-12" id="invoice-block">
                                <x-invoice />
                            </div>
                            <template x-if="order">
                                <div class="col-lg-12">
                                    <button class="btn btn-warning rounded-sm btn-block text-uppercase btn-action-action-order"
                                            @click="printHtmlBlock('invoice-block','INVOICE-'+order.reference)">
                                        <span x-text="'Print invoice ('+order.reference+')'"></span>
                                        <i class="m-l-2 fa fa-print"></i>
                                    </button>
                                </div>
                            </template>
                        </div>
                    </div>
                </x-offcanvas>

                <div class="cards shadows mb-4s" x-data="{
                                                    refreshOrdersList () {
                                                        return  refresh_datatable(tableId,getUrl())
                                                    },
                                                    }">
                    <x-offcanvas  id="offcanvas-modal-filters"
                                  :closable="true"
                                  data-bs-scroll="true"
                                  data-bs-backdrop="true"
                                  class="offcanvas-end offcanvas-size-sms">
                        <x-slot name="title">{{__("Sales filters")}}</x-slot>

                        <div >
                            <div class="row">
                                <div class="col-lg-12">
                                    {!! BootForm::select('status-filter',__("Statuses"),
                                        $statuses->pluck("code"),$statuses->pluck('name',"code"), ['data-plugin-multiselect',"multiple"])
                                       !!}
                                </div>
                                {{--                                        <div class="col-lg-12">--}}
                                {{--                                            {!! BootForm::select('period-filter',__("Statuses"),--}}
                                {{--                                                $statuses->pluck("code"),$statuses->pluck('name',"code"), ['data-plugin-multiselect',"multiple"])--}}
                                {{--                                               !!}--}}
                                {{--                                        </div>--}}

                                <div class="col-lg-12 form-group">
                                    <div class="pull-rights" id="order-bloc-dates">
                                        <label class="mb-1">{{__("Period")}}</label>
                                        <div class="input-daterange datepicker input-group"
                                             data-plugin-datepicker
                                             data-plugin-options="{format:'dd-mm-yyyy'}">
                                            <span class="input-group-addon"><strong>{{__("From")}}</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>{{__("To")}}</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 class="col-lg-12">
                                    {!! BootForm::select('billing-desks-filter',__("Billing Desks"),
                                        $billing_desks->pluck("id"),$billing_desks->pluck('name',"id"), ['data-plugin-multiselect',"multiple"])
                                       !!}
                                </div>
                                <div class="col-lg-12">
                                    {!! BootForm::select('created-by-filter',__("Created By"),
                                        $users->pluck("id"),$users->pluck('full_name',"id"), ['data-plugin-multiselect',"multiple"])
                                       !!}
                                </div>

                                <div class="col-lg-12">
                                    <button class="btn btn-app btn-block text-white"
                                            @click="refreshOrdersList()">
                                        {{__("Apply Filter")}}
                                        <span class="fa fa-check"></span>
                                    </button>
                                </div>
                            </div>
                        </div>

                    </x-offcanvas>

                </div>
            </div>
        </div>
    </div>
@endsection


@push("js")

    {{$dataTable->scripts()}}

    <script>

        const $selectStatuses = $("select#status-filter");
        const $selectPOS = $("select#billing-desks-filter");
        const $selectCreatedBy = $("select#created-by-filter");
        const $startDate = $("#order-start-date");
        const $endDate = $("#order-end-date");

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

        const getUrl = function(url = '{{route("admin.sales.index")}}'){
            let statuses = $selectStatuses.val();
            let startDate = $startDate.val();
            let endDate = $endDate.val();
            const billing_desks = $selectPOS.val();
            const created_by = $selectCreatedBy.val();
            return  url+"?statuses="+statuses
                +"&start_date="+startDate
                +"&end_date="+endDate
                +"&billing_desks="+billing_desks
                +"&users="+created_by
                ;
            {{--return  "{{route("admin.orders.index")}}?statuses="+statuses;--}}
        };

        var tableId = '{{$table_sale_id}}';

        $(function () {

        })
        document.addEventListener('alpine:init', () => {


        })
    </script>

@endpush