@extends('layouts.app')
@section('title', trans('title.workstation'))

@section('plugin-styles')
    <link href="//cdn.datatables.net/rowreorder/1.4.1/css/rowReorder.bootstrap4.min.css" rel="stylesheet">
    <link rel="stylesheet" href="{{asset('vendors/ion-rangeslider/css/ion.rangeSlider.css')}}">
@stop

@section('content')
    <div class="content">
        <x-content.header title="{{ __('title.workstation') }}" >
            <x-slot:headerRight>
                @can('create workstation')
                    <a href="javascript:;" class="btn-secondary-base" data-toggle="modal" data-target="#modal-dialog" data-title="{{trans('title.workstation_create_title')}}"><x-svg-icon icon="icon-plus" />{{trans('forms.lbl_add_new')}}</a>
                @endcan
            </x-slot:headerRight>
        </x-content.header>

        <div class="relative">
            <div class="selection-overlay hidden absolute top-1 left-16 right-1 bg-white/90 rounded-t-lg px-4 py-3 lg:py-2 flex items-center gap-3 z-[20]">
                <span class="text-md-semibold text-custom-grey-600"><span class="selected-count">0</span> {{ trans('forms.lbl_items_selected') }}</span>
                <x-svg-icon icon="vertical-bar" />

                @can('delete workstation')
                    <a href="javascript:;" data-uri="{{route('workstations.index')}}" class="btn-delete-all text-sm-semibold text-custom-orange-500 flex items-center gap-2"><x-svg-icon icon="icon-trash"/><span class="hidden lg:inline-block">{{trans('forms.lbl_delete')}}</span></a>
                @endcan
            </div>

            <table id="datatable" class="table-custom-striped w-full" style="width: 100%;">
                <thead>
                    <tr>
                        @can('delete workstation')
                            <th scope="col" width="5%">
                                <input class="table-header-checkbox" type="checkbox" name="select_all" id="select-all" value="1">
                            </th>
                        @endcan
                        <th scope="col">&nbsp;</th>
                        <th scope="col">&nbsp;</th>
                        <th scope="col">{{trans("tables.order_title")}}</th>
                        <th scope="col">{{trans("tables.name_title")}}</th>
                        <th scope="col">{{trans("tables.description_title")}}</th>
                        <th scope="col">{{trans("forms.lbl_disabled")}}</th>
                        <th scope="col">{{trans("forms.lbl_hide")}}</th>
                        <th scope="col">{{trans("tables.action_title")}}</th>
                    </tr>
                </thead>
            </table>
        </div>
        @include('workstations.form')
        @include('workstations.workstation-duplicate')
    </div>
@stop

@section('footer-script')
    <!-- plugin js for this page -->
    <script src="{{asset('vendors/ion-rangeslider/js/ion.rangeSlider.min.js')}}"></script>
    <!-- End plugin js for this page -->

    <script type="text/javascript">
        $(document).ready(function(){
            drEvent.on('dropify.beforeClear', function(event, element){
                if(confirm("{{trans('forms.do_you_really_want_delete')}}")) {

                    let form = drEvent.parents("form[name='modal-form']"),
                        id = form.find("input[name='id']").val(),
                        url = form.attr('action')+"/"+id+"/featured-image";

                    if(Number(id) > 0) {
                        return PDRequest({
                            type    : "DELETE",
                            url     : url
                        }).then(function(response){
                            return true;
                        });
                    } else {
                        return true;
                    }


                } else {
                    return false;
                }
            });

            PDDataTable({
                url: "{{ route('workstations.index') }}",
                columns:[
                    @can('delete workstation')
                        { data: 'checkboxgrid', name: 'checkboxgrid', orderable: false, searchable: false, className: "checkbox-column"},
                    @endcan
                    { data: 'reorder', name: 'reorder', orderable: false, searchable :false},
                    { data: 'featured_image', name: 'featured_image', orderable: true, searchable :false},
                    { data: 'order', name: 'order', orderable: true, visible:false},
                    { data: 'name', name: 'name'},
                    { data: 'description', name: 'description', orderable: false},
                    { data: 'is_disable', name: 'is_disable', orderable: false, searchable : false},
                    { data: 'is_hide', name: 'is_hide', orderable: false, searchable : false},
                    { data: 'action', name: 'action', orderable: false, searchable : false, className:"text-right" }
                ],
                order : [2, 'asc'],
                //lengthMenu : [[100, 200, 300, -1], [100, 200, 300, "All"]],
                rowReorder : {
                    dataSrc : 'order',
                    update  : false,
                    selector: 'td .reorder-handle',
                    ajaxUri : "{{route('workstations.reorder')}}"
                }
            });

            var $range = $(".js-range-slider");
            $range.each(function(){
                var date    = moment( "{{ now()->format(config('settings.date_format')) }}", "{{getDateFormat()}}");
                var start   = moment(date, "{{getDateFormat()}} {{getTimeFormat()}}");
                var end     = moment(date, "{{getDateFormat()}} {{getTimeFormat()}}").add('23.99', 'hours');

                $from_time = $(this).data('start').split(" ");
                $from_time = $from_time[1]+($from_time[2] ?  " " + $from_time[2] : "");
                $to_time = $(this).data('end').split(" ");
                $to_time = $to_time[1]+($to_time[2] ?  " " + $to_time[2] :  "");

                $from = moment("{{ now()->format(config('settings.date_format')) }} " + $from_time, "{{getDateFormat()}} {{getTimeFormat()}}");
                $to = moment("{{ now()->format(config('settings.date_format')) }} " + $to_time, "{{getDateFormat()}} {{getTimeFormat()}}");

                $(this).ionRangeSlider({
                    skin       : "round",
                    type       : "double",
                    grid       : true,
                    min        : start.format("x"),
                    max        : end.format("x"),
                    from       : $from.format("x"),
                    to         : $to.format("x"),
                    step       : 300000,                // 5 minutes in ms
                    prettify   : function (num) {
                        return moment(num, 'x').format("{{getTimeFormat()}}");
                    }
                });
            });

            $("body").on("change", "input[name='is_operation_room']", function(e) {
                $(this).is(":checked") ? $(".workinghours-section").show() : $(".workinghours-section").hide();
            });

            $("input[name='is_operation_room']").trigger("change");
        });
    </script>
@stop