@extends('layouts.app')
@section('title', trans('menu.360_feedback_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="{{__('title.360_feedback_review')}}">
		<x-slot:headerRight>
			@can('create', Modules\Feedback\Entities\Feedback::class)
                <a href="{{route('settings.feedbacks.create')}}" class="btn-secondary-base btn-create"><x-svg-icon icon="icon-plus"/>{{trans('forms.lbl_add_new')}}</a>
            @endcan

            @can('access', Modules\Feedback\Entities\Feedback::class)
                <a href="{{route('settings.feedback.subjects.index')}}" class="btn-tertiary-base btn-create"><x-svg-icon icon="icon-settings"/>{{trans('menu.feedback_settings')}}</a>
            @endif
		</x-slot:headerRight>
	</x-content.header>
	@include('feedback::feedbacks.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 feedbacks']))
                <a href="javascript:;" data-uri="{{route('settings.feedbacks.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">Supervisor</th> -->
                    {{-- <th scope="col">Date</th> --}}
                    <th scope="col" class="min-w-[135px]">{{trans('tables.deadline_title')}}</th>
                    <th scope="col">{{trans('tables.review_for')}}</th>
                    <th scope="col">{{trans('tables.reviewers')}}</th>
                    <th scope="col">{{trans('tables.status_title')}}</th>
                    <th scope="col">{{trans('tables.result')}}</th>
                    <th scope="col">{{trans('tables.review')}}</th>
                    <th scope="col">{{trans('tables.actions_title')}}</th>
                </tr>
            </thead>
        </table>
    </div>

</div>
@stop

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

    <script type="text/javascript">

        PDDataTable({
			searching : false,
            url: "{{ route('settings.feedbacks.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: 'supervisor', name: 'supervisor'},
                // { data: 'date', name: 'date'},
                { data: 'deadline', name: 'deadline'},
                { data: 'review_for', name: 'review_for'},
                { data: 'reviewers', name: 'reviewers'},
                { data: 'status', name: 'status'},
                { data: 'result', name: 'result'},
                { data: 'doc', name: 'doc'},
				{ data: 'action', name: 'action', orderable: false, searchable : false, className : "text-right" }
            ],
            order : [2, '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.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(){
            PDTable.draw();
        });

		$("body").on("change", "#users", function(){
            spinner($(".btn-filter"), true);
            PDTable.draw();
        });
	    $("body").on("click", ".btn-filter", 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,
	        showDropdowns       : true,
            showWeekNumbers: 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