@extends('layouts.base', [
	"breadcrumb" => [  // see partials/breadcrumb.blade.php for default options
		"title" => "PARAMÈTRES DE MISE EN PAGE",
		// "showNav" => true,
		"nav" => [
			"Dashboard" => route("home"),
			"Mise en page" => "",
			],
		"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') }}">
    <style>
        .form-select{ 
			background-image:url({{asset('assets/images/custom-select.png')}});
		}
    </style>
@endsection

@section('title', "Paramètres de mise en page| 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 mise en page des documents pdf.</p>
                </div>
                <div class="card-body wizard-content">
                    <form action="{{route('docs.layout.config')}}" class="validation-wizard wizard-circle mt-5"
                        id="layout-form"
                    >
                        <!-- Step 1 -->
                        <h6>Paramètres de mise en page</h6>
                        <section>
                            <div class="row">
                                <input type="hidden" name="id" value="{{$configs['id']}}">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label> TAILLE_PAPIER: <span class="danger">*</span> </label>
                                        <select class="form-select required" name="taille_papier">
                                            <option value="A0" {{($configs['taillePapier'] == 'AO' ? 'selected' : '')}}>A0</option>
                                            <option value="A1" {{($configs['taillePapier'] == 'A1' ? 'selected' : '')}}>A1</option>
                                            <option value="A2" {{($configs['taillePapier'] == 'A2' ? 'selected' : '')}}>A2</option>
                                            <option value="A3" {{($configs['taillePapier'] == 'A3' ? 'selected' : '')}}>A3</option>
                                            <option value="A4" {{($configs['taillePapier'] == 'A4' ? 'selected' : '')}}>A4</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <label> PDF_MARGE_BAS: <span class="danger">*</span> </label>
                                    <div class="mb-3 input-group">
                                        <span class="input-group-text bg-light-secondary"><i class="icon-calculator"></i></span>
                                        <input type="number" class="form-control required" name="marge_bas" value="{{$configs['margeB']}}" min="5">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <label> PDF_MARGE_HAUT: <span class="danger">*</span> </label>
                                    <div class="mb-3 input-group">
                                        <span class="input-group-text bg-light-secondary"><i class="icon-calculator"></i></span>
                                        <input type="number" class="form-control required" name="marge_haut" value="{{$configs['margeH']}}" min="5">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label> ENTETE_RELEVE: <span class="danger">*</span> </label>
                                        <select class="form-select required" name="entete">
                                            <option value="0" {{($configs['entete'] == 0 ? 'selected' : '' )}}>Entête papier</option>
                                            <option value="1" {{($configs['entete'] == 1 ? 'selected' : '' )}}>Entête par défaut : Entête générée par le système</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </section>
                        <!-- Step 2 -->
                        <h6>Paramètres de mise en page</h6>
                        <section>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label> POLICE_DOCUMENT: <span class="danger">*</span> </label>
                                        <select class="form-select required" name="police_doc">
                                            <option value="dejavusans" {{($configs['policeDocument'] == 'dejavusans' ? 'selected' : '' )}}>dejavusans</option>
                                            <option value="helvetica" {{($configs['policeDocument'] == 'helvetica' ? 'selected' : '' )}}>helvetica</option>
                                            <option value="times" {{($configs['policeDocument'] == 'times' ? 'selected' : '' )}}>times</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <label> TAILLE_POLICE: <span class="danger">*</span> </label>
                                    <div class="mb-3 input-group">
                                        <span class="input-group-text bg-light-secondary"><i class="icon-calculator"></i></span>
                                        <input type="number" class="form-control required" name="taille_police" value="{{$configs['taillePolice']}}" min="5">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label> ORIENTATION_DOCUMENT: <span class="danger">*</span> </label>
                                        <select class="form-select required" name="orientation_doc">
                                            <option value="P" {{($configs['orientationDocument'] == 'P') ? 'selected' : ''}}>PORTRAIT</option>
                                            <option value="L" {{($configs['orientationDocument'] == 'L') ? 'selected' : ''}}>LANDSCAPE</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label> FORMAT RESULTATS: <span class="danger">*</span> </label>
                                        <select class="form-select required" name="result_format">
                                            <option value="A" {{($configs['modeResultat'] == 'A') ? 'selected' : ''}}>EC uniquement</option>
                                            <option value="B" {{($configs['modeResultat'] == 'B') ? 'selected' : ''}}>EX + CC + EC</option>
                                            <option value="C" {{($configs['modeResultat'] == 'C') ? 'selected' : ''}}>UE uniquement</option>
                                        </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/sweetalert2/dist/sweetalert2.all.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:
                        'Mise à jour des paramètres de mise en page.',
                    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){
                                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: {
                marge_bas: "Ce champ est requis",
                marge_haut: "Ce champ est requis",
                taille_police: "Ce champ est requis",
            }
        })

    </script>

@endsection