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

@section('plugin-styles')
    <link type="text/css" rel="stylesheet" href="{{asset('vendors/daterangepicker/css/daterangepicker.css')}}" />
@stop

@section('content')
	<div class='content'>
		<x-content.header title="{{__('title.settings')}}" subTitle="{{ __('settings.review_title') }}" >
			<x-slot:headerRight>
                @can('create', Modules\Review\Entities\Review::class)
                    <a href="{{route('settings.reviews.create')}}" class="btn-secondary-base btn-create"><x-svg-icon icon="icon-plus"/>{{trans('forms.lbl_add_new')}}</a>
                @endcan

                @can('access', Modules\Review\Entities\Review::class)
                    <a href="{{route('settings.review.subjects.index')}}" class="btn-tertiary-base btn-create"><x-svg-icon icon="icon-settings"/>{{trans('menu.review_settings')}}</a>
                @endif
            </x-slot:headerRight>
		</x-content.header>

	@include('review::reviews.filter')

    <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(request()->user()->hasAnyPermission(['delete reviews']))
                <a href="javascript:;" data-uri="{{route('settings.reviews.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>
                    <th scope="col">
                        <input class="table-header-checkbox" type="checkbox" name="select_all" id="select-all" value="1">
                    </th>
                    <th scope="col">{{trans('tables.subject')}}</th>
                    <th scope="col">{{trans('tables.action_type_title')}}</th>
                    <th scope="col" class="min-w-[135px]">{{trans('tables.date_title')}}</th>
                    <th scope="col" class="min-w-[135px]">{{trans('tables.due_at')}}</th>
                    <th scope="col">{{trans('tables.review_for')}}</th>
                    <th scope="col">{{trans('tables.reviewed_by')}}</th>
                    <th scope="col">{{trans('tables.status_title')}}</th>
                    <th scope="col">{{(trans('tables.actions_title'))}}</th>
                </tr>
            </thead>
        </table>
    </div>
</div>

@stop

@section('panel-content')
    <x-content.canvas width="375px"
        title="{{ __('settings.review_title') }}"
        saveBtnText="{{ __('forms.lbl_accept') }}"
        saveBtnClass="btn-accept"
        saveBtnType="button"
        action=""></x-content.canvas>
@stop

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

        PDDataTable({
			searching : false,
            url: "{{ route('settings.reviews.index') }}",
            columns:[
                { data: 'checkboxgrid', name: 'checkboxgrid', orderable: false, searchable: false, className: "checkbox-column"},
                { data: 'subject', name: 'subject', className:"!text-custom-grey-900 !font-medium"},
                { data: 'type', name: 'future'},
                { data: 'review_date', name: 'review_date', render: function(data, type) {
				   return type === 'sort' ? data : moment(data).format("{{getDateFormat()}}");
			   	}},
                { data: 'due_at', name: 'due_at', 'orderable' : false},
                { data: 'review_for', name: 'review_for'},
				{ data: 'reviewer', name: 'reviewer'},
                { data: 'status', name: 'status'},
                { data: 'action', name: 'action', orderable: false, searchable : false, className: "text-right" }
            ],
            order : [3, 'desc'],
			callbackFunc  : function(d){
	            d.range = [];
	            d.range = $('input[name="range"]').val();

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

                d.status = $('#filter-form .tabs-btn-box.active').attr('data-val');

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

	            d.type = $('select[name="type"]').val();

                d.users = $('select[name="users[]"]').val();

	        },
			drawCallback : function( settings ) {

	            if (this.api().page.info().pages > 1) {
	                $('.dataTables_paginate').show();
	            }

	            if ( $(".btn-filter span.spinner-border").length > 0) {
	                spinner($(".btn-filter"), false);
	            }
	        }
        });

		$("body").on("keyup", "#query", function() {
            spinner($(".btn-filter"), true);
            PDTable.draw();
        });

        $("body").on("change", "#subject", function(){
            spinner($(".btn-filter"), true);
            PDTable.draw();
        });

        $("body").on("change", "#type", function(){
            spinner($(".btn-filter"), true);
            PDTable.draw();
        });

        $("body").on("change", "#users", function(){
            spinner($(".btn-filter"), true);
            PDTable.draw();
        });

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

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

        $('body').on('click', '.tabs-btn-box', function () {
            // Reset all tabs and contents for the second set filter
            $(".tabs-btn-box").removeClass("active");

            // Set new active state for the clicked tab in the filter set
            $(this).addClass("active");

             PDTable.draw();
        });

    </script>
@stop