@extends('template')

@section('page-title')
    {{$model->getLabel()}}
@endsection

@section('tag-title') {{$model->getLabel()}} @endsection

@section('page-sub-title')

@endsection

@section('main-content')

    <style>
        table.dataTable tbody td{
            padding: 3px 10px
        }
    </style>

    <?php
        use App\Models\QuestionSetJob;
        $today = date('Y-m-d');
        $month_first_day = date('Y-m-d', strtotime($today. ' - 12 months'));

        $locations = DB::table('locations')->get();
        $users = DB::table('users')->get();

        $statusIds = $group == 'progress'? QuestionSetJob::PROCESSING_STATUTES : QuestionSetJob::COMPLETED_STATUTES;

        $status = DB::table('status')->whereIn('id', $statusIds)->get();

    ?>

    <div class="row">
        <div class="col-xl-12">
            <div class="card card-filter">
                <div class="card-body">
                    <form autocomplete="off" method="get" action="" id="filter-form" class="row">
                        <div class="col-md-2">
                            <label for="period" class="control-label">Start date</label>
                            <input placeholder="DD/MM/YYYY - DD/MM/YYYY" type="text" class="form-control" id="period"  value="{{date('d/m/Y', strtotime($month_first_day))}} - {{date('d/m/Y', strtotime($today))}}" name="period">
                        </div>

                        <div class="col-sm-3">
                            <label for="location_id" class="control-label">Location</label>
                            <select required class="form-control select2" name="location_id" id="location_id">
                                <option value="">*All</option>
                                @foreach($locations as $item)
                                    <option value="{{$item->id}}">{{$item->name}}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-sm-3">
                            <label for="user_id" class="control-label">User</label>
                            <select required class="form-control select2" name="user_id" id="user_id">
                                <option value="">*All</option>
                                @foreach($users as $item)
                                    <option value="{{$item->id}}">{{$item->lastname}} {{$item->firstname}}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-sm-2">
                            <label for="status_id" class="control-label">Status</label>
                            <select required class="form-control select2" name="status_id" id="status_id">
                                <option value="">*Tous</option>
                                @foreach($status as $item)
                                    <option {{$item->id == \App\Models\Status::COMPLETED? 'selected' : ''}} value="{{$item->id}}">{{$item->name}}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-sm-2 pt-3">
                            <button id="data-refresher" type="button" class="btn btn-primary action-btn waves-effect waves-light float-right">
                                <i class="fa fa-filter"></i> Apply filter
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-xl-12">
            <div class="card">
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover" id="data-table">
                            <thead>
                                <tr>
                                    <th style="width: 10%" class="border-bottom-0">Question set</th>
                                    <th style="width: 20%" class="border-bottom-0">Location</th>
                                    <th style="width: 30%" class="border-bottom-0">User</th>
                                    <th style="width: 20%" class="border-bottom-0">Start at</th>
                                    <th style="width: 20%" class="border-bottom-0">Finished at</th>
                                    @if($group == 'closed')
                                        <th style="width: 20%" class="border-bottom-0">Duration</th>
                                    @endif
                                    <th style="width: 20%" class="border-bottom-0">Score</th>
                                    <th style="width: 20%" class="border-bottom-0">Status</th>
                                    <th class="border-bottom-0" style="width: 10%; border-right: none;">Actions</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-12">
            <div id="progress-chart" style="width: 100%; height: 600px"></div>
        </div>
    </div>

@endsection


@section('page-style')
    <link href="{{url('assets/plugins/bootstrap-daterangepicker/daterangepicker.css')}}" rel="stylesheet">
    <style>
        .card-filter label{
            margin-bottom : 0
        }

        .card-filter{
            box-shadow : none !important;
        }
        .card-filter .card-body{
            padding: .5rem 1rem;
        }
        .select2-container--default .select2-selection--multiple{
            min-height: 35px !important;
        }

        .select2-container--default .select2-search--inline .select2-search__field{
            margin-top: 3px !important;
        }
        .card-body{
            padding: 10px !important;
        }

        .form-control-sm{
            border: 1px solid #e1e5ef;
        }


    </style>
    <link href="{{url('assets/plugins/datatable/css/jquery.dataTables.min.css')}}" rel="stylesheet">
@endsection

@section('page-script')
    <script src="{{url('assets/plugins/datatable/js/jquery.dataTables.min.js')}}"></script>
    <script src="{{url('assets/plugins/bootstrap-daterangepicker/daterangepicker.js')}}"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.13.4/xlsx.core.min.js"></script>
    <script src="{{url('assets/plugins/export-to-excel/jhxlsx.js')}}"></script>
    <script src="{{url('assets/plugins/export-to-excel/FileSaver.js')}}"></script>
    <script src="{{url('assets/plugins/export-to-excel/Blob.js')}}"></script>

    <script !src="">


        $(function(e) {
            $('#period').daterangepicker(
                {alwaysShowCalendars: !0,
                    locale: {
                        format: 'DD/MM/YYYY',
                        "separator": " - ",
                        "applyLabel": "Valider",
                        "cancelLabel": "Annuler",
                        "fromLabel": "De",
                        "toLabel": "A",
                        "customRangeLabel": "Custom",
                        "daysOfWeek": [
                            "Dim",
                            "Lun",
                            "Mar",
                            "Mer",
                            "Jeu",
                            "Ven",
                            "Sam"
                        ],
                        "monthNames": [
                            "Janvier",
                            "Février",
                            "Mars",
                            "Avril",
                            "Mai",
                            "Juin",
                            "Juillet",
                            "Août",
                            "Septembre",
                            "Octobre",
                            "Novembre",
                            "Décembre"
                        ],
                        "firstDay": 1
                    },
                    ranges: {
                        "Hier": [moment().subtract(1, "days"), moment().subtract(1, "days")],
                        "7 derniers jours": [moment().subtract(7, "days"), moment()],
                        "30 derniers jours": [moment().subtract(29, "days"), moment()],
                        "Le mois en cours": [moment().startOf("month"), moment().endOf("month")],
                        "Le mois dernier": [moment().subtract(1, "month").startOf("month"), moment().subtract(1, "month").endOf("month")],
                        "3 derniers mois": [moment().subtract(3, "month"), moment()],
                        "12 derniers mois": [moment().subtract(12, "month"), moment()],
                    },
                },
                function (t, a, e) {
                }
            );

            function refreshData(){
                 $('#data-table').DataTable({
                    lengthMenu: [[10, 25, 50,100,200], [10, 25, 50, 100, 200]],
                    pageLength: 50,
                    responsive: true,
                    processing : true,
                    serverSide: true,
                    ordering: false,
                    ajax: '{{url(Request::path().'/ajax_list?current_path='.Request::path())}}'+'&period='+$('#period').val()+'&location_id='+$('#location_id').val()+'&status_id='+$('#status_id').val()+'&user_id='+$('#user_id').val(),
                    destroy : true,
                    language: {
                        searchPlaceholder: 'Search...',
                        sSearch: '',
                        lengthMenu: '_MENU_',
                        sProcessing : "Loading..."
                    },
                });
            }

            $(document).on('click','#data-refresher',function (e) {
                e.preventDefault();
                refreshData();
            });

            refreshData();

            $(document).on('click','#btn-export-excel',function (e) {
                e.preventDefault();
                $('#btn-export-excel').html('<i class="fa fa-spinner fa-spin fa-fw text-white"></i>');
                var req = $.ajax({
                    url: '{{url(Request::path().'/ajax_list?excel=1')}}'+'&period='+$('#period').val()+'&location_id='+$('#location_id').val()+'&status_id='+$('#status_id').val()+'&user_id='+$('#user_id').val(),
                    type: "GET",
                    data: {},
                    dataType: "json"
                });
                req.done(function (response, textStatus, jqXHR) {
                    var options = {
                        fileName:"{{env('APP_NAME')}} - {{\Illuminate\Support\Str::slug($model->getLabel())}}",
                        extension:".xlsx",
                        header:true,
                        fileFullName:"{{\Illuminate\Support\Str::slug($model->getLabel())}}.xlsx",
                    };
                    Jhxlsx.export(response, options);
                    $('#btn-export-excel').html('<i class="fa fa-download"></i> Export to Excel');
                });
                req.fail(function (jqXHR, textStatus) {
                    swal("Erreur!", "Error during operation.", "warning");
                });
            });


        });
    </script>
@endsection
