@extends('layouts.app')
@if($templateType == "document")
@section('title', trans('menu.document_creator_title'))
@else
@section('title', trans('menu.contract_creator_title'))
@endif

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

@section('content')
@php $user = auth()->user(); @endphp
<div class="content">
    <x-content.header title="{{__('title.'.$templateType.'creator')}}" subTitle="{{__('title.'.$templateType.'creator_report_subtitle')}}">
        <x-slot:headerRight>
            @can('create', [\Modules\DocumentCreator\Entities\DCReport::class, $templateType])
                <a href="{{route("{$templateType}.reports.create")}}" class="btn-primary-base btn-create">
                    <i class="mdi mdi-plus"></i>{{trans('forms.lbl_add_new')}}
                </a>
            @endcan

            @if(request()->user()->hasAnyPermission(['edit task-checklists']))
                @if (request()->has('type') && request()->get('type') === 'archived')
                    <a href="{{url("{$templateType}/reports")}}" class="btn-tertiary-sm"><span class="hidden lg:inline-block">{{trans('forms.lbl_back')}}</span></a>
                @else
                    <a href="{{url("{$templateType}/reports")}}?type=archived" class="btn-tertiary-sm"><span class="hidden lg:inline-block">{{trans('forms.lbl_see_archive')}}</span></a>
                @endif
            @endif
        </x-slot:headerRight>
    </x-content.header>



    @include('documentcreator::reports.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" />

            @if($user->can("edit-any {$templateType}-creator") || $user->can("edit-own {$templateType}-creator"))
                <a href="javascript:;" data-uri="{{request()->has('type') && request()->get('type') === 'archived' ? url("{$templateType}/reports/unarchive") : url("{$templateType}/reports/archive")}}" class="btn-archive-all text-sm-semibold text-custom-orange-500 flex items-center gap-2">
                    <x-svg-icon icon="icon-archive" width="20" height="20" />
                    <span class="hidden lg:inline-block">
                        {{request()->has('type') && request()->get('type') === 'archived' ? trans('forms.lbl_unarchive') : trans('forms.lbl_archive')}}
                    </span>
                </a>
            @endif

            <x-svg-icon icon="vertical-bar" />

            @if($user->can( "delete-any {$templateType}-creator") || $user->can( "delete-own {$templateType}-creator"))
                <a href="javascript:;" data-uri="{{url("{$templateType}/reports")}}" class="btn-delete-all text-sm-semibold text-custom-orange-500 flex items-center gap-2">
                    <x-svg-icon icon="icon-delete" /> <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->can( "delete-any {$templateType}-creator") || $user->can( "delete-own {$templateType}-creator"))
                        <th scope="col">
                            <input class="table-header-checkbox" type="checkbox" name="select_all" id="select-all" value="1">
                        </th>
                    @endif
                    <th>{{trans("tables.name_title")}}</th>
                    @if($templateType == "contract")
                        <th>{{ trans('tables.regarding') }}</th>
                        <th>{{ trans('tables.contract_type_category') }}</th>
                        <th>{{ trans('tables.effective_from') }}</th>
                    @endif
                    <th class="text-right">{{ trans('tables.created') }}</th>
                    <th>{{trans("tables.action_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">
        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().subtract(40, 'year').startOf('year'),
            // 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();
        });

        PDDataTable({
            url: "{{ route("{$templateType}.reports.index").(request()->has('type') && request()->get('type') === 'archived' ? '?type=archived' : '') }}",
            searching : false,
            columns:[
                @if($user->can( "delete-any {$templateType}-creator") || $user->can( "delete-own {$templateType}-creator"))
                { data: 'checkboxgrid', name: 'checkboxgrid', orderable: false, searchable: false, className: "checkbox-column"},
                @endif
                { data: 'name', name: 'name', searchable: true, className:"text-left"},
                @if($templateType == "contract")
                    { data: 'user', name: 'user', orderable: false, searchable : false, className:"text-left"},
                    { data: 'contract_type_category', name: 'contract_type_category', orderable: false, searchable : false, className:"text-left"},
                    { data: 'as_of_date', name: 'as_of_date', orderable: true, searchable : false, className:"text-left"},
                @endif
                { data: 'createdby', name: 'createdby', orderable : false},
                { data: 'action', name: 'action', orderable: false, searchable : false, className:"text-right" }
            ],
            order : [1, 'asc'],
            callbackFunc  : function(d) {
                d.term = $('input[name="query"]').val();
                d.status = $('#dt-search-form .tabs-btn-box.active').attr('data-val');

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

                @if($type == \Modules\DocumentCreator\Constants\Creator::TYPE_CONTRACT)
                    d.users = $('select[name="users[]"]').val();
                @endif

                d.range = [];
                d.range = $('input[name="range"]').val();
			},
            drawCallback : function( d ) {
                if ( $(".btn-filter span.spinner-border").length > 0) {
                    spinner($(".btn-filter"), false);
                }
            }
        });

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

             if($(this).attr('data-val') == "archived") {
                $(".btn-archive-all").data('uri', '{{url("{$templateType}/reports/unarchive")}}');
            } else {
                $(".btn-archive-all").data('uri', '{{url("{$templateType}/reports/archive")}}');
            }
        });

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

        $("body").on("click", ".btn-filter", function(){
            spinner($(".btn-filter"), true);
            PDTable.draw();
        });
    </script>
@stop