@extends('layouts.base', [
	"breadcrumb" => [  
		"title" => "FERMERTURE DE LA PLATEFORME",
		// "showNav" => true,
		"nav" => [
			"Dashboard" => route("home"),
			"Fermerture de la plateforme" => "",
			],
		"btnText" => "GestStudent v17.04",
	]
])

@section('css')
    <link rel="stylesheet" href="{{ asset('assets/libs/jquery-steps/jquery.steps.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/libs/jquery-steps/steps.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/libs/clockpicker/dist/jquery-clockpicker.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/libs/select2/dist/css/select2.min.css') }}">
    <style>
        .form-select{ 
			background-image:url({{asset('assets/images/custom-select.png')}});
		}
    </style>
@endsection

@section('title', "Fermerture de la plateforme | GestStudent Admin")

@section('content')
    @if(session()->has('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <strong>{{session('error')}}</strong>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="border-bottom title-part-padding">
                    <h3 class="box-title m-b-0">Paramètres</h3>
                    <p class="text-muted m-b-30 font-13"> Ce formulaire permet de renseigner les paramètres de fermerture de la plateforme.</p>
                </div>
                <div class="card-body wizard-content">
                    <form action="{{route('closePlateform')}}" method="POST" class="validation-wizard wizard-circle mt-5">
                        <input type="hidden" name="idE" value="{{session('idE')}}">
                        <input type="hidden" name="nb" value="{{$data['nb']}}">
                        <!-- Step 1 -->
                        <h6>Etape 1</h6>
                        <section>
                            <div class="row mb-2">
                                <div class="col-md-3"></div>
                                <div class="col-md-6">
                                    <label> Etablissement </label>
                                    <input type="text" name="eta" class="form-control" value="{{$etaData->descreta . '('. $etaData->sigleeta . ')'}}"  readonly>
                                </div>
                            </div>
                            <div class="row mb-2">
                                <div class="col-md-3"></div>
                                <div class="col-md-6">
                                    <label> Activer la fermeture ? </label>
                                    <select class="form-select required" name="fermer">
                                        <option value="YES" {{($data == 'YES') ? 'selected' : '' }}>YES</option>
                                        <option value="NO" {{($data == 'NO') ? 'selected' : '' }}>NO</option>
                                    </select>
                                </div>
                            </div>
                        </section>
                        <!-- Step 2 -->
                        <h6>Etape 2</h6>
                        <section>
                            <div class="row mb-4">
                                <div class="col-md-3"></div>
                                <div class="col-md-6">
                                    <label>Jours ouvrables:</label>
                                    <div>
                                        <select class="form-control" multiple="multiple" name="days[]" 
                                            id="days" style="width: 100%;height: 36px;" 
                                            required
                                        >
                                            <option value=""></option>
                                            @if($data['jours_ouvrables'] != [])
                                                @foreach ($days as $day)
                                                    <option value="{{$day}}" {{(in_array($day, $data['jours_ouvrables'])) ? 'selected' : ''}}>{{$day}}</option>
                                                @endforeach
                                            @else
                                                @foreach ($days as $day)
                                                    <option value="{{$day}}">{{$day}}</option>
                                                @endforeach
                                            @endif
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="row mb-4">
                                <div class="col-md-3"></div>
                                <div class="col-md-6">
                                    <label>Heure début:</label>
                                    <div class="input-group col-xs-5 clockpicker">
                                        <span class="input-group-addon"> 
                                            <span class="glyphicon glyphicon-time"></span> 
                                        </span>
                                        <input type="text" name="heure_debut" class="form-control" value="{{$data['heure_debut']}}"  required> 
                                    </div>
                                </div>
                            </div>
                            <div class="row mb-4">
                                <div class="col-md-3"></div>
                                <div class="col-md-6">
                                    <label>Heure fin:</label>
                                    <div class="input-group col-xs-5 clockpicker">
                                        <span class="input-group-addon"> 
                                            <span class="glyphicon glyphicon-time"></span> 
                                        </span>
                                        <input type="text" name="heure_fin" class="form-control" value="{{$data['heure_fin']}}"  required> 
                                    </div>
                                </div>
                            </div>
                        </section>
                        <!-- Step 3 -->
                        <h6>Etape 3</h6>
                        <section>
                            <div class="row mb-4">
                                <div class="col-md-3"></div>
                                <div class="col-md-6">
                                    <label>Jours semi-ouvrables:</label>
                                    <div>
                                        <select class="form-control" multiple="multiple" name="semi_days[]" 
                                            id="semi_days" style="width: 100%;height: 36px;" 
                                            required
                                        >
                                            <option value=""></option>
                                            @if($data['jours_semi_ouvrables'] != [])
                                                @foreach ($days as $day)
                                                    <option value="{{$day}}" {{(in_array($day, $data['jours_semi_ouvrables'])) ? 'selected' : ''}}>{{$day}}</option>
                                                @endforeach
                                            @else
                                                @foreach ($days as $day)
                                                    <option value="{{$day}}">{{$day}}</option>
                                                @endforeach
                                            @endif
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="row mb-4">
                                <div class="col-md-3"></div>
                                <div class="col-md-6">
                                    <label>Heure début:</label>
                                    <div class="input-group col-xs-5 clockpicker">
                                        <span class="input-group-addon"> 
                                            <span class="glyphicon glyphicon-time"></span> 
                                        </span>
                                        <input type="text" name="heure_debut1" class="form-control" value="{{$data['heure_debut1']}}" required> 
                                    </div>
                                </div>
                            </div>
                            <div class="row mb-4">
                                <div class="col-md-3"></div>
                                <div class="col-md-6">
                                    <label>Heure fin:</label>
                                    <div class="input-group col-xs-5 clockpicker">
                                        <span class="input-group-addon"> 
                                            <span class="glyphicon glyphicon-time"></span> 
                                        </span>
                                        <input type="text" name="heure_fin1" class="form-control" value="{{$data['heure_fin1']}}" required> 
                                    </div>
                                </div>
                            </div>
                        </section>
                        <!-- Step 4 -->
                        <h6>Etape 4</h6>
                        <section>
                            <div class="row mb-4">
                                <div class="col-md-3"></div>
                                <div class="col-md-6">
                                    <label>Jours non-ouvrables:</label>
                                    <div>
                                        <select class="form-control" multiple="multiple" name="no_days[]" 
                                            id="no_days" style="width: 100%;height: 36px;" 
                                            required
                                        >
                                            <option value=""></option>
                                            @if($data['jours_non_ouvrables'] != [])
                                                @foreach ($days as $day)
                                                    <option value="{{$day}}" {{(in_array($day, $data['jours_non_ouvrables'])) ? 'selected' : ''}}>{{$day}}</option>
                                                @endforeach
                                            @else
                                                @foreach ($days as $day)
                                                    <option value="{{$day}}">{{$day}}</option>
                                                @endforeach
                                            @endif
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </section>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script src="{{ asset('assets/libs/jquery-steps/build/jquery.steps.min.js') }}"></script>
    <script src="{{ asset('assets/libs/jquery-validation/dist/jquery.validate.min.js') }}"></script>
    <script src="{{ asset('assets/libs/select2/dist/js/select2.full.min.js')}}"></script>
    <script src="{{ asset('assets/libs/select2/dist/js/select2.min.js')}}"></script>
    <script src="{{ asset('assets/libs/clockpicker/dist/jquery-clockpicker.min.js')}}"></script>

    <script>

        const swalWithBootstrapButtons = Swal.mixin({
            customClass: {
                confirmButton: 'btn btn-success',
                cancelButton: 'btn btn-danger'
            },
            buttonsStyling: false
        });

        var form = $(".validation-wizard").show();

        $(".validation-wizard").steps({
            headerTag: "h6",
            bodyTag: "section",
            transitionEffect: "fade",
            titleTemplate: '<span class="step">#index#</span> #title#',
            labels: {
                finish: "Submit"
            },
            onStepChanging: function(event, currentIndex, newIndex) {
                return currentIndex > newIndex || !(3 === newIndex && Number($("#age-2").val()) < 18) && (currentIndex < newIndex && (form.find(".body:eq(" + newIndex + ") label.error").remove(), form.find(".body:eq(" + newIndex + ") .error").removeClass("error")), form.validate().settings.ignore = ":disabled,:hidden", form.valid())
            },
            onFinishing: function(event, currentIndex) {
                return form.validate().settings.ignore = ":disabled", form.valid()
            },
            onFinished: function(event, currentIndex) {

                // url et data qu'on doit envoyer
                let url = $(this)[0].attributes.action.value;
                let formData = new FormData($(this)[0]);

                Swal.fire({
                    title: "<strong>Confirmer l'opération!</strong>",
                    icon: 'info',
                    html:
                        'Cette opération ajoutera les informations dans la base.',
                    showCancelButton: true,
                    focusConfirm: false,
                    confirmButtonText:
                        'Oui, je confirme !',
                    cancelButtonText:
                        'Annuler',
                    showLoaderOnConfirm: true,
                    preConfirm: () => {

                        // Requete AJAX
                        return fetch(url, {
                            method: "POST",
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            body: formData
                        })
                        .then(response => response.json())
                        .then(response => {
                            if(response.success == true){
                                // debugger;
                                return response;
                            }else{
                                Swal.showValidationMessage(
                                    response.message
                                )
                            }
                        })
                    },
                    allowOutsideClick: () => !Swal.isLoading()

                }).then((result) => {
                    if (result.isConfirmed) {
                        swalWithBootstrapButtons.fire(
                            'Opération enregistrée!',
                            result.value.message,
                            'success'
                        ).then((result2) => {
                            if (result2.isConfirmed) {
                                location.reload();
                            }
                        })
                    }
                })
            }
        }),                     
        $(".validation-wizard").validate({
            ignore: "input[type=hidden]",
            errorClass: "text-danger",
            successClass: "text-success",
            highlight: function(element, errorClass) {
                $(element).removeClass(errorClass)
            },
            unhighlight: function(element, errorClass) {
                $(element).removeClass(errorClass)
            },
            errorPlacement: function(error, element) {
                error.insertAfter(element)
            },
            rules: {
                email: {
                    email: !0
                }
            }, 
            messages: {
                days:"Ce champ est requis",
                heure_debut:"Ce champ est requis",
                heure_fin:"Ce champ est requis",
                semi_days:"Ce champ est requis",
                heure_debut1:"Ce champ est requis",
                heure_fin1:"Ce champ est requis",
                no_days:"Ce champ est requis",
            }
        })

        $("#days").select2({
            placeholder: "Sélectionner un jour",
        });

        $("#semi_days").select2({
            placeholder: "Sélectionner un jour",
        });

        $("#no_days").select2({
            placeholder: "Sélectionner un jour",
        });

        $('.clockpicker').clockpicker({
            donetext: 'Done'
        });

    </script>
@endsection