@extends('layout.template')

@section('title', 'Suppression')

@section('style')
    <link href="{{ asset('assets/libs/jquery-steps/jquery.steps.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/libs/jquery-steps/steps.css') }}" rel="stylesheet">
    <link rel="stylesheet" href="{{ asset('assets/css/dropify.min.css') }}">
    <style>
        .wizard-content .wizard>.steps>ul>li.current .step {
            border-color: #fff;
            background-color: #2cabe3;
            color: #fff;
        }

        .dropify-wrapper .dropify-message p {
            text-align: center;
        }

        .wizard-content .wizard>.steps>ul>li.done .step {
            background-color: #53e69d;
            border-color: #fff;
            color: #fff;
        }
    </style>
@endsection

@section('page_breadcrumb')
    <div class="col col-xs-12 justify-content-start d-flex align-items-center">
        <h5 class="font-weight-medium text-uppercase mb-0"> SUPPRESSION DU RELEVE DE NOTES </h5>
    </div>
@endsection


@section('content')
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="border-bottom title-part-padding">
                    <h4 class="card-title mb-0">RELEVÉ</h4>
                    <p class="text-muted">Ce formulaire permet d'imprimer le relevé de notes.</p>
                </div>
                <div class="card-body wizard-content">
                    <form action="{{ route('supp_rel') }}" method="POST" class="tab-wizard wizard-circle">
                        @csrf
                        <!-- Step 1 -->
                        <h1>STEP</h1>
                        <section>
                            <div class="row justify-content-center text-start m-3">
                                <div class="col-md-7">
                                    <div class="row mb-3">
                                        <div class="col-4 text-center"><label for="format_imp"
                                                style="font-weight: bold;">
                                                Format du relevé </label>
                                        </div>
                                        <div class="col-8">
                                            <select class="form-select required" id="format_imp" name="format_imp"
                                                onchange="valider(this);">
                                                <option value>Selectionner un format de relevé</option>
                                                <option value="1">Annuel</option>
                                                <option value="2">Semestriel</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row justify-content-center text-start m-3">
                                <div class="col-md-7">
                                    <div class="row mb-3">
                                        <div class="col-4 text-center"><label for="matricule" style="font-weight: bold;">
                                                Matricule </label></div>
                                        <div class="col-8"><input type="text" name="matricule" id="matricule"
                                                class="form-control required" placeholder="m1-m2 ou m1;m2;m3..."
                                                oninput="valider(this);">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row justify-content-center text-start m-3">
                                <div class="col-md-7">
                                    <div class="row mb-3">
                                        <div class="col-4 text-center"><label for="filiere" style="font-weight: bold;">
                                                Filière </label></div>
                                        <div class="col-8">
                                            <select class="form-select required" id="filiere" name="filiere"
                                                onchange="valider(this);">
                                                <option value>Selectionner la filière</option>
                                                @foreach ($filieres as $filiere)
                                                    <option value="{{ $filiere->idFiliere }}">
                                                        {{ $filiere->intituleFilieres }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row justify-content-center text-start m-3">
                                <div class="col-md-7">
                                    <div class="row mb-3">
                                        <div class="col-4 text-center"><label for="aca_year" style="font-weight: bold;">
                                                Année Académique </label>
                                        </div>
                                        <div class="col-8">
                                            <select class="form-select required" id="aca_year" name="aca_year"
                                                onchange="valider(this);">
                                                <option value>Choisir l'année académique</option>
                                                @foreach ($anneeAcads as $anneeAcad)
                                                    <option value="{{ $anneeAcad->annee_acad }}">
                                                        {{ $anneeAcad->periode }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row justify-content-center text-start m-3">
                                <div class="col-md-7">
                                    <div class="row mb-3">
                                        <div class="col-4 text-center"><label for="niv_etude" style="font-weight: bold;">
                                                Niveau Relevé </label>
                                        </div>
                                        <div class="col-8">
                                            <select class="form-select required" id="niv_etude" name="niv_etude"
                                                onchange="valider(this);">
                                                <option value="1">{{ session('formationbase', 'Licence') }}</option>
                                                <option value="2">Master</option>
                                                <option value="3">Doctorat</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row justify-content-center text-start m-3">
                                <div class="col-md-7">
                                    <div class="row mb-3">
                                        <div class="col-4 text-center">
                                            <label for="etude_year" id="y_e" style="font-weight: bold;"> Année
                                                d'étude </label>
                                            <label for="semestre" style="display:none" id="s_m"
                                                style="font-weight: bold;"> Semestre </label>
                                        </div>
                                        <div class="col-8">
                                            <select class="form-select" id="etude_year" name="etude_year" onchange="valider(this);">
                                                <option value="1">Première année</option>
                                                <option value="2">Deuxième année</option>
                                                <option value="3" class="niv">Troisième
                                                    année
                                                </option>
                                            </select>
                                            <select class="form-select" style="display:none" id="semestre" name="semestre"
                                                onchange="valider(this);">
                                                <option value="1">1</option>
                                                <option value="2">2</option>
                                                <option value="3">3</option>
                                                <option value="4">4</option>
                                                <option value="5" class="niv">5</option>
                                                <option value="6" class="niv">6</option>
                                            </select>
                                        </div>
                                    </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/js/dropify.min.js') }}"></script>

    <script>
        //Dropify
        $(document).ready(function() {
            // Basic
            $('.dropify').dropify();
        });

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

        if("