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


{{--@include("backend.orders.scripts")--}}

<style>
    table#table-order-for-traitment tr td:hover,table#table-order-for-traitment tr td.selected{
        cursor: pointer !important;
        background: #b2eae1 !important;
    }
</style>

@section('content')

    <div class="row" x-data>
        <div class="col-sm-6 col-lg-5 col-xxl-4 form-group">

            <div class="card shadow mb-4">
               <div class="card-header py-3 d-flex">
                   <h6 class="m-0 font-weight-bold">
                       {{__("Lists")}}
                   </h6>
                   <div class="ml-auto">
                       @can("order-create")
{{--                           <button class="btn btn-success"--}}
{{--                               type="button"--}}
{{--                               data-bs-toggle="offcanvas"--}}
{{--                               data-bs-target="#offcanvas-new-order"--}}
{{--                               aria-controls="offcanvas-new-order">--}}
{{--                                <span class="icon text-white-50">--}}
{{--                                    <i class="fa fa-plus"></i>--}}
{{--                                </span>--}}
{{--                               <span class="text">{{__("New Order")}}</span>--}}

{{--                           </button>--}}
                           <a href="{{ route('admin.orders.create') }}" class="btn btn-success btn-sm">
                                <span class="icon text-white-50">
                                    <i class="fa fa-plus"></i>
                                </span>
                                <span class="text">{{__("New Order")}}</span>
                           </a>
                       @endcan
                   </div>
               </div>
                <div class="card-body">
                    <div class="table-responsives mt-10"
                         x-data="displayable_orders({
                             displayed_into_offcanvas : false,
                             table : {
                                 options : table_options,
                                 initialized : false,
                                 id : 'table-order-for-traitment'
                             },
                         }
                         )">
                        <table class="table table-striped" :id="table_id" style="width: 100%"></table>

                        <div class="cards shadows mb-4s">
                            <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">{{__("Table 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>
        </div>
        <div class="col-sm-6 col-lg-7 col-xxl-8">
            <div class="card shadow mb-4">
                <div class="card-header py-3 d-flex">
                    <h6 class="m-0 font-weight-bold">
                       <template x-if="blank($store.invoice.order)">
                           <span> {{__("Details")}}</span>
                       </template>
                        <template x-if="filled($store.invoice.order)">
                           <span x-text="'{{__("Details #")}}'+$store.invoice.order.reference"></span>
                        </template>
                    </h6>
                    <div class="ml-auto">
                       <div class="input-group"
                            x-data="{
                               order_id : null,
                               searchOrder(){
                                 return this.$store.invoice.open(this.order_id)
                               },
                       }">
                           <input type="number"
                                  placeholder="{{__("Order ID")}}"
                                  x-model="order_id"
                                  @keyup.enter="searchOrder()"
                                  class="form-control form-control-sm"
                                  id="txt-order-id">
                           <span class="input-group-append">
                               <button class="btn btn-dark btn-sm"
                                       :disabled="$store.invoice.loading"
                                       @click="searchOrder()">
                                   <span class="fa fa-refresh"></span>
                               </button>
                                <button class="btn btn-warning btn-sm"
                                        @click="$store.invoice.print()"
                                       :disabled="blank($store.invoice.order)">
                                   <span class="fa fa-print"></span>
                               </button>
                           </span>
                       </div>
                    </div>
                </div>
                <div class="card-body" x-data="{
                        get order(){
                            return this.$store.invoice.order
                         }
                        }">

                    <div class="row">
                        <div class="col-lg-12" id="invoice-block" >
                            <x-invoice />
                        </div>
                        <div class="col-lg-12">
                            @can("order-set-status")
                                <template x-if="filled($store.invoice.order)">
                                    <div class="dropdown mb-4">
                                        <button class="btn btn-light dropdown-toggle fs-13" type="button" id="dropdownMenuButton"
                                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                                                x-html="$store.invoice.order?.status?.badge_dot ?? order.status.name">
                                        </button>

                                        <template x-if="$store.invoice.order.editable && filled($store.invoice.order.next_statuses)">
                                            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                                <template x-for="status in $store.invoice.order.next_statuses" :key="status.code">
                                                    <a class="dropdown-item "
                                                       href="javascript:void(0);"
                                                      @click.prevent="$store.invoice.changeOrderStatus(
                                                      order,
                                                      status,
                                                      ()=> {
                                                       $store.invoice.open(order,true);
                                                        $('#table-order-for-traitment')
                                                        .parents('div.dataTables_wrapper')
                                                        .first()
                                                        .find('.dt-btn-refresh')
                                                        .trigger('click')
                                                      })"
                                                       x-html="status?.badge_dot ?? status.name">
                                                    </a>
                                                </template>
                                            </div>
                                        </template>
                                    </div>
                                </template>
                            @endcan
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

{{--    <x-offcanvas  id="offcanvas-new-order"--}}
{{--                  :closable="true"--}}
{{--                  data-bs-scroll="true"--}}
{{--                  data-bs-backdrop="true"--}}
{{--                  class="offcanvas-bottom offcanvas-size-full">--}}
{{--        <x-slot name="title">{{__("New Order")}}</x-slot>--}}
{{--        @include("backend.orders.create.create-order-component")--}}
{{--    </x-offcanvas>--}}
@endsection


@push("js")

    <script>

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

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

        var getUrl = function(url = '{{route("admin.orders.traitments.list")}}'){
            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 = "orders-table";

        const table_options = {
            serverSide : true,
            processing : true,
            lengthChange: true,
            searching: false,
            ajax : "{{route("admin.orders.traitments.list")}}",
            dom : "Bfrtilp",
          //  responsive: true,
            //fixedHeader:true,
            scrollY:500,
            buttons : [
                // { extend: "reset" },
                { extend: "reload" },
                { extend: "filters" },
            ],

            columns :  [
                {
                    {{--title : "#{{__('ID')}}",--}}
                    name : "order_ref",
                    // width : "20%",
                    className : "left fs-12 p-0 order-item border-0",
                    searchable: false,
                    orderable: false,
                    data : "order_formated",
                },
            ],
        };

        $(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);
            //  })

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


        })
    </script>

@endpush