@extends('models')
@section('titre-page', 'Fichiers Stats IMS')
@section('content-body')
    <style>
        .ellipsis {

            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>

    <!-- Page Header -->
    <div class="d-md-flex d-block align-items-center justify-content-between mt-4 page-header-breadcrumb">
        <div class="col-xl-12 col-12">
            <div class="row mb-3">
                <div class="col-xl-7 col-md-4 mt-2">
                    <nav>
                        <ol class="breadcrumb mb-0">
                            <li class="breadcrumb-item text-light"><a href="javascript:void(0);">Prestation & Outils</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Fichiers Stats IMS</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>
    <!-- Page Header Close -->

    <div class="row mt-xl-2">
        <div class="row">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-xl-6 border-end">
                            <div class="row">
                                <div class="col-md-2 d-flex align-items-center">
                                    <div class="form-check mt-2">
                                        <input class="form-check-input" type="radio" name="radioMode" id="radioMois" value="1" checked>
                                        <label class="form-check-label fw-normal text-muted" for="radioMois">Mois</label>
                                    </div>
                                </div>
                                <div class="col-md-5">
                                    <p class="text-muted mb-0">Mois</p>
                                    <select class="form-select" name="mois" id="selmois">
                                        <option value="01">JANVIER</option>
                                        <option value="02">FEVRIER</option>
                                        <option value="03">MARS</option>
                                        <option value="04">AVRIL</option>
                                        <option value="05">MAI</option>
                                        <option value="06">JUIN</option>
                                        <option value="07">JUILLET</option>
                                        <option value="08">AOÛT</option>
                                        <option value="09">SEPTEMBRE</option>
                                        <option value="10">OCTOBRE</option>
                                        <option value="11">NOVEMBRE</option>
                                        <option value="12">DECEMBRE</option>
                                    </select>
                                </div>
                                <div class="col-md-5">
                                    <p class="text-muted mb-0">Année</p>
                                    <select id="selAnnee" name="annee" class="form-select">
                                        @php
                                            $annee = date('Y');

                                            for($i = $annee - 5; $i <= $annee; $i ++){
                                        @endphp

                                                <option value="{{ $i }}" >{{ $i }}</option>
                                        @php
                                            }
                                        @endphp
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-5 border-end">
                            <div class="row ps-2">
                                <div class="col-md-3 d-flex align-items-center">
                                    <div class="form-check mt-2">
                                        <input class="form-check-input" type="radio" name="radioMode" id="radioPeriode" value="2">
                                        <label class="form-check-label fw-normal text-muted" for="radioPeriode">
                                            Période
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-9">
                                    <p class="mb-0 text-muted">Période de filtre&nbsp;:</p>
                                    <input type="text" class="form-control text-center" name="datetimes" id="filtrePeriode" disabled/>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-1">
                            <button type="button" class="btn btn-success btn-wave d-flex mx-1 mt-3" id="bntValider">
                                <i class="bx bxs-check-circle me-1" style="font-size: 16px;"></i>
                                Valider
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')

<!-- Script de changement de mode et se validation -->
<script>

    $(function() {
        dateRangeInput('input[name="datetimes"]', true, "DD/MM/YYYY")
        // $('input[name="datetimes"]').daterangepicker({
        //     timePicker: true,
        //     // startDate: moment().startOf('day'),
        //     // endDate: moment().endOf('day'),
        //     "locale": {
        //         "format": "DD/MM/YYYY",
        //         "separator": " - ",
        //         "applyLabel": "Appliquer",
        //         "cancelLabel": "Annuler",
        //         "fromLabel": "From",
        //         "toLabel": "To",
        //         "customRangeLabel": "Custom",
        //         "weekLabel": "W",
        //         "daysOfWeek": [
        //             "Dim",
        //             "Lun",
        //             "Mar",
        //             "Mer",
        //             "Jeu",
        //             "Ven",
        //             "Sam"
        //         ],
        //         "firstDay": 2
        //     },
        // });
    })

    document.querySelectorAll('[name="radioMode"]').forEach(function(element) {
        element.addEventListener('change', function() {
            let value = this.value

            if (value == 1) {
                
                _('selmois').removeAttribute('disabled')
                _('selAnnee').removeAttribute('disabled')
                _('filtrePeriode').setAttribute('disabled', '')
            }else if(value == 2){

                _('selmois').setAttribute('disabled', '')
                _('selAnnee').setAttribute('disabled', '')
                _('filtrePeriode').removeAttribute('disabled')
            }
        });
    });

    _('bntValider').addEventListener('click', function(){

        let dateDebut, dateFin

        let mode = document.querySelector('[name="radioMode"]:checked').value
        let annee = _("selAnnee").value
        let mois = _("selmois").value

        if (mode == 1) {
            
            dateDebut = _('selAnnee').value + '-' + _('selmois').value + '-' + '01'
            
            // Créer une date avec le dernier jour du mois
            dateFin = new Date(annee, mois, 0); // 0 dans le jour donne le dernier jour du mois
            dernierJourDuMois = dateFin.getDate();

            // Format final de la date : 'YYYY-MM-DD'
            dateFin = `${annee}-${mois}-${dernierJourDuMois}`;
        }else{

            let Periode = convertirFormatDate2(_('filtrePeriode').value)
            dateDebut = Periode[0]
            dateFin = Periode[1]
        }

        $.ajax({

            url : "{{ route('genererLesFichierIMSCSV') }}",
            type : 'POST',
            dataType : 'json',
            data : {

                dateDebut : dateDebut,
                dateFin : dateFin,
                _token : '{{ csrf_token() }}'
            },
            beforeSend : progressHandler(),
            success : function(response){

                if (response.success != 1) {

                    notifError(response.msg)
                }else{

                    notif('success', 'Succès', 'Fichiers Statistiques envoyés avec succès !')
                }

                completeHandler()
            },
            error : function(){

                notifError('Échec de l\'opération.')
                completeHandler()
                reject()
            }
        })
    })

    @if(date('m') == '01')

        $('#selmois').val('12')
        $('#selAnnee').val('{{ date('Y', strtotime('-1 year')) }}')
    @else

        $('#selmois').val('{{ date('m', strtotime('-1 month')) }}')
        $('#selAnnee').val('{{ date('Y') }}')
    @endif

</script>
@endsection