
<div class="card mb-3 " x-data="draft_schedule_options">
    <div class="card-body rounded p-3 border-left-success shadows" x-show="false">

        <span class="m-r-5">
            <span class="dropdown no-arrow">
                <button class="dropdown-toggle fs-15 btn btn-outline-success"
                        type="link" id="dropdownMenuSchedule"
                        data-toggle="dropdown" aria-haspopup="true"
                        aria-expanded="false">
                        <span class="fa fa-clock-o"></span>
                </button>

                <form class="dropdown-menu p-4" style="min-widths: 250px !important">
                    <h6 class="dropdown-header fs-14 m-b-10" x-text="desc"></h6>

                    <div class="m-b-5">
                        <div class="custom-control custom-switch-success custom-switch cursor-pointer">
                            <input type="checkbox"
                                ckecked
                                x-model="settings.enable"
                                class="custom-control-input cursor-pointer"
                                id="switch-schedule-state">
                            <label class="custom-control-label fs-14 cursor-pointer ms-t-5"
                                for="switch-schedule-state">
                                Enable
                            </label>
                        </div>
                    </div>
                    <div class="m-b-5">
                        <label class="fs-14 m-b-0">{{__("Time interval")}}</label>
                        <div class="input-group input-group-sm m-b-0">
                            <input type="number"
                                class="form-control form-control-sm"
                                placeholder="{{__("Time interval")}}"
                                :disabled="!settings.enable"
                                x-model="settings.interval"
                            />
                            <div class="input-group-append">
                                <strong class="input-group-text">
                                    <span  x-text="formatNumber(time.s)"></span>
                                    <small class="fs-11 m-t-3"> sec</small>
                                    <span class="m-l-2 m-r-2"> = </span>
                                    <span  x-text="formatNumber(time.min)"></span>
                                    <small class="fs-11 m-t-3"> min</small>
                                </strong>

                            </div>
                        </div>
                        <small class="text-muted fs-11 text-success">Intervalle de temps</small>
                    </div>

                    <div class="m-b-10">
                        <label class="fs-14 m-b-0">{{__("Number of Orders")}}</label>
                        <input type="number"
                            class="form-control form-control-sm"
                            placeholder="minute"
                            :disabled="!settings.enable"
                            x-model="settings.number_of_order"
                        />
                        <small class="text-muted fs-11 text-success">Nombre de commande envoyés dans l'intervalle de temps </small>
                    </div>

                    <div class="float-right">
                        <button type="button"
                                class="btn btn-success btn-sm"
                                @click="saveSetting();">
                            Save
                        </button>
                    </div>
                </form>
            </span>
        </span>
        <span class="float-right">
            <h4 x-text="desc"  class="fs-15"></h4>
        </span>
    </div>
</div>

 @push("js")

 <script>


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

         Alpine.data("queue", ()=>({

             get items (){
                 return JSON.parse(localStorage.getItem("QUEUE_ITEMS")) ?? [];
             },

             start (){
               const items = this.items;

                 for (const item of items) {

                 }
             },

         }));

     })
 </script>

 @endpush
