@extends('layouts.base',
    $breadcrumb = [
        "title" => "MODIFICATION PHOTO / ".session('sigle'), //TODO: GET SIGLE OF CONNECTED UNIVERSITY
        "nav" => [ // "text to show" => "link",
            "Dashboard" => route('home'), // Current page is last item
            "MODIFICATION" => 'javascript:void(0)'
        ],
    ]
)

@section('title', 'Update Profil')

@section('css')
    <!-- This page CSS -->
    <link href="{{ asset('/assets/libs/jquery-steps/jquery.steps.css')}}" rel="stylesheet">
    <link href="{{ asset('/assets/libs/jquery-steps/steps.css')}}" rel="stylesheet">
    <!-- Select2 -->
    <link rel="stylesheet" type="text/css" href=" {{ asset('assets/libs/select2/dist/css/select2.min.css') }} ">
    <!-- dropify -->
    <link href=" {{ asset('assets/libs/dropify-master/dist/css/dropify.min.css') }} " rel="stylesheet">
    <!-- Wizard CSS -->
    {{-- <link href="{{ asset('assets/libs/jquery-wizard-master/css/wizard.css')}}" rel="stylesheet"> --}}
    <!-- FormValidation -->
    <link rel="stylesheet" href="{{ asset('assets/libs/jquery-wizard-master/libs/formvalidation/formValidation.min.css')}}">

    <style>
        /* Student profil image */
        .profil-content {
            width: 10rem;
            height: 10rem;
            border-radius: 50% !important;
            background: rgb(245, 245, 245);
            border : 1px solid rgb(0 0 0 / 20%);
            background-position: center center;
            background-size: cover;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }

        button.swal2-cancel {
            margin-right: 0.5rem!important;
        }

        .wizard-content .wizard>.steps>ul>li.current .step {
            background-color: #fff;
            color: var(--gs-primary);
            border-color: var(--gs-primary);
        }

        .wizard-content .wizard>.steps>ul>li.done .step {
            color: var(--gs-text-primary);
            background-color: var(--gs-primary);
            border-color: var(--gs-primary);
        }

        .wizard-content .wizard.wizard-circle>.steps>ul>li:after,
        .wizard-content .wizard.wizard-circle>.steps>ul>li:before {
            background-color: var(--gs-primary);
        }

        .wizard-content .wizard>.actions>ul>li>a {
            color: var(--gs-text-primary);
            background-color: var(--gs-primary);
        }

        span.error-info {
            font-size: 1.2rem;
            font-family: 'Courier New', Courier, monospace;
            font-weight: 800;
            color: red;
        }
    </style>
@endsection

@section('content')
    {{-- alert with content --}}
    @include('partials.alert')

    <div class="col-12">
        <div class="card wizard" id="exampleValidator">
            <div class="card-header d-flex align-items-center px-3 py-4 border-bottom">
                <div>
                    <h4 class="card-title mb-2">ETUDIANT</h4>
                    <h4 class="card-subtitle mb-0">Mise à jour de la photo de l'étudiant.</h4>
                </div>
                <div class="ms-auto">
                    <a href="{{ route('print.card', ["matricule" => $etudiant['matricule']] ) }}" target="_blank" style="color:  {{ session('couleurs.textColor2') }}">
                        <button class="btn btn-theme btn-rounded">
                            Imprimer Carte <i class="icon-action-redo"></i>
                        </button>
                    </a>
                </div>
            </div>
            <div class="card-body wizard-content">
                <h6 class="card-subtitle mb-3"></h6>
                <form
                    class="tab-wizard wizard-circle"
                    action="{{ route('student-image.update', ["matricule" => $etudiant['matricule']] ) }}"
                    method="POST"
                    enctype="multipart/form-data"
                    id = "validation"
                >
                    @csrf
                    <!-- Step 1 -->
                    <h6>Informations de l'utilisateur</h6>
                    <section>
                        <div class="col-md-6 col-sm-12 mx-auto">
                            <div class="card ">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-4 text-center">
                                            @if ($etudiant['cheminPhoto'])
                                            <a href="javascript:void(0)">
                                                <img
                                                    src="{{ getImgPath('PROFIL', $etudiant['cheminPhoto'], 0)}}"
                                                    {{-- src="{{ asset($etudiant['cheminPhoto'])}}" --}}
                                                    alt="etudiant"
                                                    class="rounded-circle img-fluid profil-content"
                                                    onerror="this.onerror=null;this.src='{{ asset('/assets/images/avatar.png') }}';"
                                                >
                                            </a>
                                            @else
                                                <svg
                                                    width="50px"
                                                    height="50px"
                                                    viewBox="0 0 18 18"
                                                    xmlns="http://www.w3.org/2000/svg"
                                                >
                                                    <path
                                                        fill="#494c4e"
                                                        d="M9 0a9 9 0 0 0-9 9 8.654 8.654 0 0 0 .05.92 9 9 0 0 0 17.9 0A8.654 8.654 0 0 0 18 9a9 9 0 0 0-9-9zm5.42 13.42c-.01 0-.06.08-.07.08a6.975 6.975 0 0 1-10.7 0c-.01 0-.06-.08-.07-.08a.512.512 0 0 1-.09-.27.522.522 0 0 1 .34-.48c.74-.25 1.45-.49 1.65-.54a.16.16 0 0 1 .03-.13.49.49 0 0 1 .43-.36l1.27-.1a2.077 2.077 0 0 0-.19-.79v-.01a2.814 2.814 0 0 0-.45-.78 3.83 3.83 0 0 1-.79-2.38A3.38 3.38 0 0 1 8.88 4h.24a3.38 3.38 0 0 1 3.1 3.58 3.83 3.83 0 0 1-.79 2.38 2.814 2.814 0 0 0-.45.78v.01a2.077 2.077 0 0 0-.19.79l1.27.1a.49.49 0 0 1 .43.36.16.16 0 0 1 .03.13c.2.05.91.29 1.65.54a.49.49 0 0 1 .25.75z"
                                                    />
                                                </svg>
                                            @endif
                                        </div>
                                        <div class="d-flex col-md-8">
                                            <div class="align-self-center text-center justify-content-center">
                                                <h3 class="box-title m-b-0">{{ $etudiant['nom']. ' ' .$etudiant['prenom'] }}</h3>
                                                <input type="hidden" name="student" value="{{ $etudiant['nom']. ' ' .$etudiant['prenom'] }}">
                                                <h5 style="font-weight: 400;">Etudiant{{ $etudiant['sexe'] == "F" ? 'e' : '' }} en {{ findNiveau($etudiant['niveauFormation']) .' '.$etudiant['annee']}}</h5>
                                                <h6>
                                                    @switch(mb_strtolower ($etudiant['etat_carte']))
                                                        @case("imprimée")
                                                            <span class='badge rounded-pill fw-bold bg-light-info text-dark' style="font-size: 1em;"> Carte imprimée </span>
                                                            @break
                                                        @case("duplicata")
                                                            <span class='badge rounded-pill fw-bold bg-light-danger text-dark' style="font-size: 1em;"> Duplicata </span>
                                                            @break
                                                        @default
                                                            <span class='badge rounded-pill fw-bold bg-light-primary text-dark' style="font-size: 1em;"> Pas de carte </span>
                                                    @endswitch
                                                </h6>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>
                    <!-- Step 2 -->
                    <h6>Modification de l'image de profil</h6>
                    <section>
                        <div class="col-lg-12" id="imgUpdate">
                            <div class="card">
                                <div class="card-header bg-theme">
                                    <h4 class="mb-0 text-white">Image de profil</h4>
                                </div>

                                <div class="card-body">

                                    <!--/row-->
                                    <div class="mb-3 row ">
                                        <div class="col-md-3 text-md-end">
                                            <label for="example-month-input2" class=" col-form-label fw-bold fs-5">Matricule</label>
                                        </div>
                                        <div class="col-md-6">
                                            <input id = "matricule" type="number" class="form-control" name="matricule" value = "{{ $etudiant['matricule']}}" readonly/>
                                        </div>
                                        <input
                                            class="form-control"
                                            type="text"
                                            name ="origImage"
                                            id="origImage"
                                            value="{{ $etudiant['cheminPhoto'] }}"
                                            hidden
                                        />
                                    </div>

                                    <div class="mb-3 row ">
                                        <div class="col-md-3 text-md-end">
                                            <label for="example-month-input2" class=" col-form-label fw-bold fs-5">Choisir une image</label>
                                        </div>
                                        <div class="col-md-6">
                                            <input
                                                type="file"
                                                name = "imageUpload"
                                                id="imageUpload"
                                                accept="image/*"
                                                class="dropify-fr"
                                                data-height="200"
                                                {{-- data-default-file="{{ asset($etudiant['cheminPhoto'])}}" --}}
                                                data-default-file="{{ getImgPath2('PROFIL', $etudiant['cheminPhoto'], 0)}}"
                                                data-max-file-size="0.5M"
                                            />
                                        </div>
                                    </div>

                                    <!--/row-->

                                    <div class="form-actions d-none">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="d-grid gap-2 d-md-flex justify-content-center">
                                                    <button type="reset" class=" btn fs-6" style="background-color: #e4e7ea">
                                                        <a class="fs-4" style="color: black">
                                                            <i class="fa fa-ban" aria-hidden="true"></i>
                                                            Annuler
                                                        </a>
                                                    </button>
                                                    <button type="submit" class="  btn btn-success fs-6" style="color:  {{ session('couleurs.textColor2') }}">
                                                        <i class="fa fa-check"></i>
                                                        Soumettre
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script src="{{ asset('/assets/libs/jquery-steps/build/jquery.steps.min.js')}}"></script>
    <script src="{{ asset('assets/libs/dropify-master/dist/js/dropify.min.js') }}"></script>
    <!-- Form Wizard JavaScript -->
    <script src="{{ asset('assets/libs/jquery-wizard-master/dist/jquery-wizard.min.js')}}"></script>
    <!-- FormValidation plugin and the class supports validating Bootstrap form -->
    <script src="{{ asset('assets/libs/jquery-wizard-master/libs/formvalidation/formValidation.min.js')}}"></script>
    <script src="{{ asset('assets/libs/jquery-wizard-master/libs/formvalidation/bootstrap.min.js')}}"></script>

    <script type="text/javascript">

        $(function(){
            const targetDiv = $('form#validation');
            $('#sidebarnav > .sidebar-item:nth-child(3)').addClass('selected');

            $(".tab-wizard").steps({
                headerTag: "h6",
                bodyTag: "section",
                transitionEffect: "fade",
                titleTemplate: '<span class="step">#index#</span> #title#',
                labels: {
                    previous: "Précédent",
                    next: "Suivant",
                    finish: "Valider"
                },
                onFinished: function(event, currentIndex) {
                    $('#validation').formValidation({
                        framework: 'bootstrap',
                        excluded: ':disabled',
                        icon: {
                            valid: 'glyphicon glyphicon-ok',
                            invalid: 'glyphicon glyphicon-remove',
                            validating: 'glyphicon glyphicon-refresh'
                        },
                        fields: {
                            matricule: {
                                validators: {
                                    notEmpty: {
                                        message: '<span class="error-info">Le matricule est requis</span>'
                                    },
                                    /*stringLength: {
                                        min: 6,
                                        max: 30,
                                        message: 'The username must be more than 6 and less than 30 characters long'
                                    },
                                    regexp: {
                                        regexp: /^[a-zA-Z0-9_\.]+$/,
                                        message: 'The username can only consist of alphabetical, number, dot and underscore'
                                    }*/
                                }
                            },

                            imageUpload: {
                                validators: {
                                    notEmpty: {
                                        message: '<span class="error-info">Le champ est requis</span>'
                                    },
                                    file: {
                                        extension: 'jpeg,jpg,png',
                                        type: 'image/jpeg,image/png',
                                        maxSize: 600000,   // 2048 * 1024
                                        message: '<span class="error-info">Le fichier selectionné n\'est pas valide</span>'
                                    }
                                }
                            }
                        }
                    });

                    let fv = $('#validation').data('formValidation');

                    let $this = $(this);
                    // Validate the container
                    fv.validateContainer($this);

                    let isValidStep = fv.isValidContainer($this);

                    if (isValidStep === false || isValidStep === null) {

                        Swal.fire({
                            icon: 'error',
                            title: 'La validation a échoué. Veuillez réessayer',
                            showClass: {
                                popup: 'animate__animated animate__fadeInDown'
                            },
                            hideClass: {
                                popup: 'animate__animated animate__fadeOutUp'
                            }
                        })

                        return false;

                    } else {

                        swalWithBootstrapButtons.fire({
                            title: 'Êtes-vous sûr de cette opération ?',
                            html: "La photo de profil de <strong>" + $('input[name="student"]').val() + "</strong> sera modifiée!",
                            // icon: 'warning',
                            icon: 'info',
                            showCancelButton: true,
                            confirmButtonText:
                                '<i class="fa fa-thumbs-up"></i> Sauvegarder!',
                            confirmButtonAriaLabel: 'Valid Operation!',
                            cancelButtonText:
                                '<i class="fa fa-thumbs-down"></i> Annuler',
                            cancelButtonAriaLabel: 'Aborted operation',
                            reverseButtons: true


                        }).then((result) => {
                            targetDiv.block(blockOptions);
                            if (result.isConfirmed) {
                                $('.wizard-content .wizard > .actions > ul > li > a:last').addClass('btn-disabled');
                                $('#validation').formValidation('defaultSubmit');
                                swalWithBootstrapButtons.fire(
                                    'Image sauvegardée!',
                                    'Photo de profil modifiée avec succès.',
                                    'success'
                                )
                            } else if (result.dismiss === Swal.DismissReason.cancel ) {
                                $('.wizard-content .wizard > .actions > ul > li > a:last').removeClass('btn-disabled');
                                swalWithBootstrapButtons.fire(
                                    'Choix annulé',
                                    'Aucune modification apportée.',
                                    'error'
                                )
                            }
                            targetDiv.unblock();
                        });
                    }
                }
            });

            // Translated
            $('.dropify-fr').dropify({
                messages: {
                    default: 'Glissez-déposez un fichier ici ou cliquez',
                    replace: 'Glissez-déposez un fichier ou cliquez pour remplacer',
                    remove:  'Supprimer',
                    error:   'Désolé, le fichier est trop volumineux'
                }
            });

        }());
    </script>

@endsection