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

@section('content')
    @php $user = auth()->user(); @endphp
<div class="content">
    <x-content.header title="{{__('title.special_days')}}" >
        <x-slot:headerRight>
            @can('create specialdays')
                <a href="javascript:;"
                    data-toggle="canvas-panel"
                    data-uri="{{route('special-days.index')}}"
                    data-title="{{trans('forms.lbl_add_new')}}"
                    class="btn-secondary-base"><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" />

            @if($user->hasAnyPermission(['delete specialdays']))
                <a href="javascript:;" data-uri="{{route('special-days.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>
            @endif
        </div>


        <table id="datatable" class="table-custom-striped w-full" style="width: 100%;">
            <thead>
                <tr>
                    @if($user->hasAnyPermission(['delete specialdays']))
                        <th width="5%">
                            <input class="table-header-checkbox" type="checkbox" name="select_all" id="select-all" value="1">
                        </th>
                    @endif
                    <th>{{trans("tables.title_title")}}</th>
                    {{-- <th>{{trans("tables.note_title")}}</th> --}}
                    <th  width="20%">{{trans("tables.location_title")}}</th>
                    <th class="min-w-[135px]">{{trans("tables.date_title")}}</th>
                    <th width="15%">{{trans("tables.action_title")}}</th>
                </tr>
            </thead>
        </table>
    </div>


</div>

@endsection

@section('panel-content')
    @include('specialdays.form')
@stop

@section('footer-script')
    <script type="text/javascript">
        $.fn.modal.Constructor.prototype._enforceFocus = function() {};

        PDDataTable({
            url: "{{ route('special-days.index') }}",
            columns:[
                @if($user->hasAnyPermission(['delete specialdays']))
                    { data: 'checkboxgrid', name: 'checkboxgrid', orderable: false, searchable: false, className: "checkbox-column"},
                @endif
                { data: 'name', name: 'name'},
                // { data: 'description', name: 'description', className:"text-center add-button", orderable : false},
                { data: 'locations.name', name: 'locations.name', className:"text-center", orderable : false},
				{ data: 'event_at', name: 'event_at', className:"text-center"},
                { data: 'action', name: 'action', orderable: false, searchable : false, className:"text-right" }
            ],
            order : [2, 'asc'],
        });


        $("div.toolbar").on("click", ".dropdown-item", function() {
            $("div.toolbar").find(".dropdown-item").removeClass('active');
            $(this).addClass("active");
            PDTable.page.len( $(this).text() ).draw();
        })

        $(".btn-save").on("click", function(event) {
            event.preventDefault();
			if($("#form").valid()){
	            data = $('#form').serialize();
	            PDRequest({
	                type    : $('#form').attr("method"),
	                url     : $("#form").attr("action"),
	                data    : data,
	                event   : event
	            }).then((response) => {

                    PDTable.draw();

                    Canvas.close();


	            });
			}
        });


    </script>
@stop