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

@section('plugin-styles')
<link type="text/css" rel="stylesheet" href="{{asset('vendors/daterangepicker/css/daterangepicker.css')}}" />
 <style>
    .has-recurring  td:last-child{
        border-bottom: 2px solid #fbbc06 !important;
    }

    .popover {
        max-width: 100% !important;
        width:100% !important;
        z-index: 1000 !important;
    }
    .modal {
        z-index: 1060 !important;
    }

    .modal-backdrop {
        z-index: 1050 !important;
    }
    .popover .popover-body {
        min-height: 350px;
        max-height: 500px;
    }

    @media (min-width: 992px) {
        .popover{
            max-width: calc(100% - 335px) !important;
            width:100% !important;

        }
    }

 </style>
@endsection

@section('content')
	@php
		$user = auth()->user();
	@endphp
<div class="content">
    <x-content.header title="{{ __('schedules.overview') }}">
        <x-slot:headerRight>
            @can('create schedules')
			    <a href="{{route('schedules.create')}}" class="btn-create btn-secondary-base"><x-svg-icon icon="icon-plus"/>{{trans('forms.lbl_add_new')}}</a>
            @endcan
        </x-slot:headerRight>
    </x-content.header>

    @include('timetracker::schedules.filters')

    <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 schedules')
                <a href="javascript:;" data-uri="{{route('schedules.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">
            <thead>
                <tr>
                    @if($user->hasAnyPermission(['delete schedules']))
                        <th>
                            <input class="table-header-checkbox" type="checkbox" name="select_all" id="select-all" value="1">
                        </th>
                    @endif
                    <th>{{trans('forms.lbl_name')}}</th>
                    <th >{{trans('locations.title')}}</th>
                    <th>{{trans('title.workstations')}}</th>
                    <th>{{trans('title.positions')}}</th>
                    <th>{{trans('title.date')}}</th>
                    @if($user->hasAnyPermission(['edit schedules', 'delete schedules']))
                        <th>{{trans('title.action')}}</th>
                    @endif
                </tr>
            </thead>
        </table>
    </div>
</div>
@endsection

@section('footer-script')
    <script type="text/javascript" src="{{asset('vendors/daterangepicker/js/daterangepicker.js')}}"></script>
	<script>
		$(function(){

			$('[data-toggle="tooltip"]').tooltip();

            $(document).popover({
                container: 'body',
                selector : '[data-toggle="popover"]',
                delay: { "show": 100, "hide": 100 },
                html: true,
                content: function () {
                    var clone = $($(this).data('popover-content')).clone(true).removeClass('hide');
                    return clone;
                }
            });

            $(document).on('click', function (e) {
                var target = $(e.target);
                if (!target.closest('.popover').length && !target.closest('[data-toggle="popover"]').length) {
                    $('[data-toggle="popover"]').popover('hide');
                }
            });

            $(document).on('click', '[data-toggle="popover"]', function (e) {
                $('[data-toggle="popover"]').not(this).popover('hide');
                $(this).popover('toggle');
                e.stopPropagation();
            });


			$.fn.modal.Constructor.prototype._enforceFocus = function() {};

	        PDDataTable({
                searching : false,
	            url: "{{ route('schedules.overview') }}",
	            columns:[
	                @if($user->hasAnyPermission(['delete schedules']))
	                    { data: 'checkboxgrid', name: 'checkboxgrid', orderable: false, searchable: false, className: "checkbox-column"},
	                @endif
					{ data: 'name', name: 'user.name', className:"!text-custom-grey-900 !font-medium"},
					{ data: 'location_name', name: 'location.name'},
					{ data: 'workstation_name', name: 'workstation.name' },
					{ data: 'position_name', name: 'position.name'},
					{ data: 'date', name: 'date', orderable: false},
	                @if($user->hasAnyPermission(['edit schedules', 'delete schedules']))
	                    { data: 'action', name: 'action', orderable: false, searchable : false, className : "text-right" }
	                @endif
	            ],
	            order : [2, 'asc'],
				callbackFunc  : function(d){
	                d.range = [];
                    d.range = $('input[name="range"]').val();

                     d.location = $('input[name="location[]"]:checked').map(function () {
                        return $(this).val();
                    })
                    .get();

                     d.position = $('input[name="position[]"]:checked').map(function () {
                        return $(this).val();
                    })
                    .get();

                    d.term = $('input[name="query"]').val();

				},
				language: {
                "emptyTable": "{{ __('messages.no_records_found') }}"
            	},
				drawCallback : function( settings ) {
	                if ( $(".btn-filter span.spinner-border").length > 0) {
	                    spinner($(".btn-filter"), false);
	                }
	            }
	        });

            function cb(start, end) {
                $('.reportrange span.date-text').html(start.format('D MMM, YYYY') + ' - ' + end.format('D MMM, YYYY'));
                $(document).trigger('onRangeChanged');
            }

            $('.reportrange').daterangepicker({
                opens           : 'left',
                autoApply       : true,
                autoUpdateInput : false,
                startDate       : moment(),
                endDate         : moment(),
                locale          : {
                    format          : "{{getDateFormat()}}",
                    customRangeLabel: "{{trans('label.pick_date_range')}}",
                    "firstDay": 1,
                    "daysOfWeek": daysOfWeek,
                    "monthNames": monthNames
                },
                //ranges  : rangeFilters,
                alwaysShowCalendars : true,
                showWeekNumbers: true,
                showDropdowns       : true
            }, cb);

            $('.reportrange').on('apply.daterangepicker', function(ev, picker) {
                $("input[name='range']").val(picker.startDate.format("{{getDateFormat()}}") + ' - ' + picker.endDate.format("{{getDateFormat()}}"));
                PDTable.draw();
            });

            $('.reportrange').on('cancel.daterangepicker', function(ev, picker) {
                $("input[name='range']").val('');
                PDTable.draw();
            });

            $("body").on("keyup", "#query", function() {
                PDTable.draw();
            });

            $( document ).on( "multi_select_option_change", function( event, eventInfo ) {
                PDTable.draw();
            });

	    });

    </script>
@endsection