@extends('layouts.template')
@section('title', 'GestStudentValidation')
@section('nom')
    MODIF PHOTO/ {{ session('sigle') }}
@endsection
@section('name', 'Modif photo')
@section('bottom-header')
    @include('partials.bottom-header')
@endsection
@section('css')
    <link href=" {{ asset('assets/libs/dropify-master/dist/css/dropify.min.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/extra-libs/sweetalert2/dist/sweetalert2.min.css') }}" rel="stylesheet">
@endsection
@section('contenu')

   
    <div class="row " style="margin:0 100px">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header" style="background-color: {{ session('etablissementCouleur1')}};">
                    <h4 class="mb-2 text-white" style=" color: {{ session('couleurText1')}}">Mise à jour de la photo de l'étudiant </h4>
                </div>
                <form action="{{ route('post_modifphoto') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="card-body">
                        <!--/row-->
                        <div class="mb-4 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">
                                <div class="form-group">
                                    <input type="text" id="matricule" class="form-control" placeholder=""
                                        value=" {{ $matricule }}" name="matricule">
                                </div>
                            </div>

                        </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">
                                <div class="form-group">
                                    <input type="file" name="imageUpload" id="imageUpload" class="dropify dropify-fr"
                                        data-allowed-file-extensions="jpeg jpg png" data-max-file-size="3M" />
                                </div>
                            </div>

                        </div>
                        <div class="form-actions">
                            <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" href="{{ route('list') }}" style="color: black">
                                                <i class="fa fa-ban" aria-hidden="true"></i>
                                                Annuler
                                            </a>
                                        </button>
                                        <button type="submit" id="soumettre"  onsubmit='return alert()' class="  btn btn-success fs-6">
                                            <i class="fa fa-check"></i>
                                            Soumettre
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection
@section('script')
    <script src="{{ asset('assets/libs/dropify-master/dist/js/dropify.min.js') }}"></script>
    <script src="{{ asset('assets/extra-libs/sweetalert2/dist/sweetalert2.all.min.js') }}"></script>

    <script>

      var alert = function(){
        Swal.fire({
            title: 'Confirmer l\'opération ?',
            text: "Cette operation mettra à jour la photo de l'étudiant",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#2cd07e',
            cancelButtonColor: '#edf1f5',
            confirmButtonText: 'Oui!'
        }).then((result) => {
            if (result.isConfirmed) {

                Swal.fire(
                    'Validé!',
                    'Votre inscription a été validé.',
                    'success'
                )
            }
            $(".soumettre").submit();
        });
        return true;
      } 
    </script>

    <script>
        $(document).ready(function() {
            // Basic
            $('.dropify').dropify();
            // 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 trop volumineux'
                }
            });
            // Used events
            var drEvent = $('#input-file-events').dropify();
            drEvent.on('dropify.beforeClear', function(event, element) {
                return confirm("Do you really want to delete \"" + element.file.name + "\" ?");
            });
            drEvent.on('dropify.afterClear', function(event, element) {
                alert('File deleted');
            });
            drEvent.on('dropify.errors', function(event, element) {
                console.log('Has Errors');
            });
            var drDestroy = $('#input-file-to-destroy').dropify();
            drDestroy = drDestroy.data('dropify')
            $('#toggleDropify').on('click', function(e) {
                e.preventDefault();
                if (drDestroy.isDropified()) {
                    drDestroy.destroy();
                } else {
                    drDestroy.init();
                }
            })

        });
    </script>
@endsection