@extends('dashboard.layouts.app')
@push('headScripts')
    <link href="{{ asset('assets/plugins/datatable/css/dataTables.bootstrap5.min.css') }}" rel="stylesheet" type="text/css">@endpush
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/3.0.5/daterangepicker.min.css" />
@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">
        <div class="float-end">
            <div class="row">
                <div class="col-12">
                    <div id="reportrange"  style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
                        <i class="fa fa-calendar"></i>&nbsp;
                        <span></span> <i class="fa fa-caret-down"></i>
                        <input type="hidden" id="start_date">
                        <input type="hidden" id="end_date">
                    </div>
                </div>
            </div>
        </div>
        <h4 class="fw-bold py-3 mb-4">
            <span class="text-muted fw-light">{{ __('KPIS') }} /</span> {{ __('User KPIS Report') }}
        </h4>

        <div class="row">
            <div class="col-md-12">
                <div class="card mb-4">
                    <h5 class="card-header">{{ __('User KPIS Report') }}</h5>
                    <div class="m-4 mb-0 mt-0">
                    @if(PerUser('users_kpis.export'))
                        <div class="btn-group float-end ms-1 me-1" role="group">
                            <button id="exportUserKPIS" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                                <i class="fadeIn animated bx bx-export"></i>
                                {{ __('Export') }}
                            </button>
                            <div class="dropdown-menu dropdown-menu-right dropdown-menu-lg-left" aria-labelledby="exportUserKPIS">
                                <a class="dropdown-item export-type" data-type="csv">{{ __('CSV') }}</a>
                                <a class="dropdown-item export-type" data-type="excel">{{ __('Excel') }}</a>
                                <a class="dropdown-item export-type" data-type="pdf">{{ __('PDF') }}</a>
                            </div>
                            <form action="{{ route('users_kpis.report_export') }}" method="POST" class="d-inline-block exportData">
                                <input type="hidden" name="export_type" value="excel">
                                <input type="hidden" name="start_date" value="">
                                <input type="hidden" name="end_date" value="">
                                @csrf
                                {{--                            <button class="btn btn-info "><i class="fadeIn animated bx bx-export"></i> {{ __('Export') }}</button>--}}
                            </form>
                        </div>
                    @endif
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            {{ $dataTable->table(['class' => 'table table-bordered table-striped mb-0']) }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('footerScripts')
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/3.0.5/daterangepicker.min.js"></script>
    <script src="{{ asset('vendor/sweetalert/sweetalert.all.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatable/js/jquery.dataTables.min.js') }}"></script>
    {{ $dataTable->scripts(attributes: ['type' => 'module']) }}
    <script>
        $(document).on('click','.export-type',function(e){
            e.preventDefault();
            let form=$(this).parent().parent().find('form')
            form.find('[name="export_type"]').val($(this).attr('data-type'));
            form.submit();
        });
        var start = moment().subtract(29, 'days');
        var end = moment();

        function cb(start, end) {
            $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
            $("#start_date").val(start.format('YYYY-MM-DD'))
            $("[name='start_date']").val(start.format('YYYY-MM-DD'))
            $("#end_date").val(end.format('YYYY-MM-DD'))
            $("[name='end_date']").val(end.format('YYYY-MM-DD'))
            if(typeof window.LaravelDataTables!='undefined'){
                window.LaravelDataTables["users_kpis"].draw();
            }
        }


        $('#reportrange').daterangepicker({
            startDate: start,
            endDate: end,
            ranges: {
                'Today': [moment(), moment()],
                'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                'This Month': [moment().startOf('month'), moment().endOf('month')],
                'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            }
        }, cb);

        cb(start, end);
        tippy('#reportrange', {
            placement: 'left',
            content: 'This search with year & month',
        });
    </script>
@endpush