@extends('layouts.base', [
	"breadcrumb" => [  // see partials/breadcrumb.blade.php for default options
		"title" => "PARAMÈTRES DE DÉLIBÉRATION",
		// "showNav" => true,
		"nav" => [
			"Dashboard" => route("home"),
			"Grades ECTS" => "",
			],
		"btnText" => "GestStudent v17.04",
	]
])

@section('title', "Paramètres de délibération| GestStudent Admin")

@section('content')
    <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 des grades ECTS.</p>
                </div>
                <div class="card-body border-bottom">
                    <h6 class="card-subtitle mb-3"></h6>
                    <div class="bg-info p-4">
                        <span style="color: white">
                            <strong>BORNES INTERVALLES GRADES ECTS</strong> 
                        </span>
                    </div>
                </div>
                <div class="card-body border-bottom">
                    <form class="needs-validation" novalidate id="grades-form" action="{{route('ecues.grade.config')}}">
                        <input type="hidden" name="id" value="{{$grades['id']}}">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <div class="row">
                                    <div class="col-md-4" style="text-align: end">
                                        <label for=""><strong>a1:</strong></label>
                                    </div>
                                    <div class="col-md-8">
                                        <div class="input-group">
                                            <span class="input-group-text bg-light-secondary"><i class="icon-calculator"></i></span>
                                            <input type="number" class="form-control" name="a1" min="0" value="{{$grades['a1']}}" required>
                                            <div class="valid-feedback">Ok!</div>
                                            <div class="invalid-feedback">Le champ est requis</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 mb-3">
                                <div class="row">
                                    <div class="col-md-4" style="text-align: end">
                                        <label for=""><strong>a4:</strong></label>
                                    </div>
                                    <div class="col-md-8">
                                        <div class="input-group">
                                            <span class="input-group-text bg-light-secondary"><i class="icon-calculator"></i></span>
                                            <input type="number" class="form-control" name="a4" min="0" value="{{$grades['a4']}}" required>
                                            <div class="valid-feedback">Ok!</div>
                                            <div class="invalid-feedback">Le champ est requis</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <div class="row">
                                    <div class="col-md-4" style="text-align: end">
                                        <label for=""><strong>a2:</strong></label>
                                    </div>
                                    <div class="col-md-8">
                                        <div class="input-group">
                                            <span class="input-group-text bg-light-secondary"><i class="icon-calculator"></i></span>
                                            <input type="number" class="form-control" name="a2" min="0" value="{{$grades['a2']}}" required>
                                            <div class="valid-feedback">Ok!</div>
                                            <div class="invalid-feedback">Le champ est requis</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 mb-3">
                                <div class="row">
                                    <div class="col-md-4" style="text-align: end">
                                        <label for=""><strong>a5:</strong></label>
                                    </div>
                                    <div class="col-md-8">
                                        <div class="input-group">
                                            <span class="input-group-text bg-light-secondary"><i class="icon-calculator"></i></span>
                                            <input type="number" class="form-control" name="a5" min="0" value="{{$grades['a5']}}" required>
                                            <div class="valid-feedback">Ok!</div>
                                            <div class="invalid-feedback">Le champ est requis</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <div class="row">
                                    <div class="col-md-4" style="text-align: end">
                                        <label for=""><strong>a3:</strong></label>
                                    </div>
                                    <div class="col-md-8">
                                        <div class="input-group">
                                            <span class="input-group-text bg-light-secondary"><i class="icon-calculator"></i></span>
                                            <input type="number" class="form-control" name="a3" min="0" value="{{$grades['a3']}}" required>
                                            <div class="valid-feedback">Ok!</div>
                                            <div class="invalid-feedback">Le champ est requis</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-4"></div>
                            <div class="col-4 text-center">
                                <button class="btn btn-success mt-3 rounded-pill px-4" id="btn-save" type="submit">Valider</button>
                            </div>
                            <div class="col-4"></div>
                        </div>
                    </form>
                </div>
                <div class="card-body border-bottom">
                    <table class="table table-hover table-bordered">
                        <thead>
                          <tr class="text-center">
                            <th style="font-size:16px; background-color:#e6faff">Intervalles Grades ECTS</th>
                            <td style="font-size:16px; background-color:#e6faff">&lt;    6</td>
                            <td style="font-size:16px; background-color:#e6faff">[6, 8[</td>
                            <td style="font-size:16px; background-color:#e6faff">[8, 10[</td>
                            <td style="font-size:16px; background-color:#e6faff">[10, 12[</td>
                            <td style="font-size:16px; background-color:#e6faff">[12, 15[</td>
                            <td style="font-size:16px; background-color:#e6faff">[15, 20]</td>
                          </tr>
                        </thead>
                        <tbody>
                              <tr>
                                    <th scope="row" style="font-size:16px;" width="16%">Grade ECTS</th>
                                    <td class="text-center" style="font-size:16px;" width="14%">F</td>
                                    <td class="text-center" style="font-size:16px;" width="14%">E</td>
                                    <td class="text-center" style="font-size:16px;" width="14%">D</td>
                                    <td class="text-center" style="font-size:16px;" width="14%">C</td>
                                    <td class="text-center" style="font-size:16px;" width="14%">B</td>
                                    <td class="text-center" style="font-size:16px;" width="14%">A</td>
                              </tr>
                              <tr>
                                    <th scope="row" style="font-size:16px;">Appréciation : Commentaire</th>
                                    <td class="text-center" style="font-size:16px;"><i>INSUFFISANT :</i> Un travail supplémentaire considérable est nécessaire</td>
                                    <td class="text-center" style="font-size:16px;"><i>PASSABLE :</i> Le résultat satisfait aux critères minimaux</td>
                                    <td class="text-center" style="font-size:16px;"><i>SATISFAISANT :</i> Travail honnête, mais comportant des lacunes importantes</td>
                                    <td class="text-center" style="font-size:16px;"><i>BIEN :</i> Travail généralement bon, malgré un certain nombre d'insuffisances notables</td>
                                    <td class="text-center" style="font-size:16px;"><i>TRES BIEN :</i> Résultat supérieur à la moyenne, malgré un certain nombre d'insuffisances notables</td>
                                    <td class="text-center" style="font-size:16px;"><i>EXCELLENT :</i> Résultat remarquable, avec seulement quelques insuffisances mineures</td>
                              </tr>
                        </tbody>
                      </table>
                </div>
            </div>
        </div>
    </div>
@endsection


@section('script')

    <script>

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

        $("#grades-form").submit(function (e) {

            let form = document.getElementById('grades-form');
            if(form.checkValidity() === false) {
                form.classList.add('was-validated');
                return false;
            }

            e.preventDefault();

            Swal.fire({
                title: "Confirmer l'oprération ?",
                text: "Cette opération mettra à jour les paramètres de délibération.",
                showCancelButton: true,
                showLoaderOnConfirm: true,
                confirmButtonText: "Oui",
                cancelButtonText: "Annuler",
                confirmButtonColor: "#8000ff",
                preConfirm: () => {
        
                    // Donnees du formulaire a envoyer
                    let formData = new FormData(form);

                    // Requete AJAX
                    return fetch($('#grades-form').attr('action'),{
                        method: "POST",
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        body: formData
                    })
                    .then(response => response.json())
                    .then(response => {
                        if(response.success == true){
                            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();
                        }
                    })
                }
            })
        });
    </script>
@endsection