@extends('layouts.base', [
	"breadcrumb" => [  // see partials/breadcrumb.blade.php for default options
		"title" => "REQUÊTES",
		// "showNav" => true,
		"nav" => [
			"Dashboard" => route("home"),
			"Page des requêtes" => "",
			],
		"btnText" => "GestStudent v17.04",
	]
])

@section('title', "Requêtes des étudiants | GestStudent Admin")

@section('css')
<link rel="stylesheet" href="{{ asset('assets/libs/select2/dist/css/select2.min.css') }}">
<link rel="stylesheet" href="{{ asset('dist/css/dropify.min.css') }}">
<style>
    .form-select {
        background-image: url({{ asset('assets/images/custom-select.png')}});
    }
</style>
@endsection

@section('content')
<div class="row">
    <div class="col-2"></div>
    <div class="col-8">
        <div class="card">
            <div class="border-bottom title-part-padding">
                <h3 class="card-title mb-0">Lecture de la requête</h3>
            </div>
            <div class="card-body">
                <div>  
                    <h4 style="font-weight: normal;">
                        Cours: 
                        {{$data['infosRequest']->intituleFilieres}}/
                        @if ($data['infosRequest']->niveauFormation == 1)
                            Licence/ 
                        @elseif ($data['infosRequest']->niveauFormation == 2)
                            Master/ 
                        @else
                            Doctorat/ 
                        @endif
    
                        @if ($data['infosRequest']->annee == 1)
                            Première année: 
                        @elseif ($data['infosRequest']->annee == 2)
                            Deuxième année: 
                        @else
                            Troisième année: 
                        @endif
                        {{$data['infosRequest']->intituleEcu}}
                        <br/><br/>De: {{$data['infosRequest']->nom}} {{$data['infosRequest']->prenom}}
                    </h4>
                </div>
                <div>Reçu le: {{$data['infosRequest']->dateenvoie}} à {{$data['infosRequest']->heureenvoie}}</div>
                <div class="mt-5">
                                    </div>
                                @if($data['infosRequest']->reponse == "" && $data['infosRequest']->requetefichier == "")
                    <div class="ms-auto">
                        <button class="btn btn-info mt-3" id="answerButton"><i class="mdi mdi-email-outline"></i> Répondre</button>
                    </div>
                                    @endif
            </div>
        </div>

        @if($data['infosRequest']->requetefichier != "")
            <div class="card">
                <div class="card-body">
                    <iframe scrolling="yes" src="{{$data['infosRequest']->requetefichier}}" name="imgbox" id="imgbox" frameborder="10">
                    </iframe>
                </div>
            </div>
                @if($data['infosRequest']->reponse == "")
                    <div class="ms-auto">
                        <button class="btn btn-info mt-3" id="answerButton"><i class="mdi mdi-email-outline"></i> Répondre</button>
                    </div>
                                    @endif
        @endif

        <div class="card" style="display: {{$noneOrBlock}};" id="answerBlock">
            @if ($data['infosRequest']->reponse == "")  
                <div class="border-bottom title-part-padding">
                    <h3 class="card-title mb-0">Réponse à la requête</h3>
                </div>
                <form class="needs-validation" novalidate action="#" id="answerForm">
                    @csrf
                    <div class="card-body">
                        <div class="form-group">
                            <textarea class="form-control" style="height: 200px" name="texteReponse" id="textereponse" required=""></textarea>
                            <div class="valid-feedback">Ok!</div>
                            <div class="invalid-feedback">Entrez un message</div>

                            <input type="text" id="mailAdress" name="mailAdress" style="display: none;" value="{{$data['infosRequest']->email}}" readonly/>
                            <input type="text" id="idrequest" name="idrequest" style="display: none;" value="{{$data['infosRequest']->idrequete}}" readonly/>
                        </div>
                    </div>
                    <div class="card-body">
                        <label class="col-xs-3 control-label">Joindre un fichier</label>
                        <div class="form-group">
                            <input type="file" id="input-file-events validatedCustomFile" class="dropify"
                                data-max-file-size="2M"
                                accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
                                name="texteReponseFile" />
                        </div>
                    </div>
                    <div class="card-footer bg-white" style="text-align: end;">
                        <button class="btn btn-info mt-3" type="submit"><i class="mdi mdi-email-outline"></i> Envoyer</button>
                    </div>
                </form>
            @else
                <div class="border-bottom title-part-padding">
                    <h3 class="card-title mb-0">Réponse à la requête</h3>
                    <div class="col-3 mt-1">
                        <h5><i>Envoyé le :  {{$data['infosRequest']->datereponse}} à  {{$data['infosRequest']->heurereponse}}</i></h5>
                    </div>
                </div>
                <div class="card-body">
					<div>
                        					</div>
				</div>
            @endif
        </div>
    </div>
</div>
@endsection

@section('script')

<script src="{{ asset('assets/libs/select2/dist/js/select2.full.min.js') }}"></script>
<script src="{{ asset('assets/libs/select2/dist/js/select2.min.js') }}"></script>
<script src="{{ asset('dist/js/dropify.min.js') }}"></script>
<script>
        $(document).ready(function() {
            $('.dropify').dropify();

            $('.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'
                }
            });

            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();
                }
            });
        });

        $('#answerButton').click(function(){
            $('#answerBlock').attr('style', 'display:block');
            $('#answerButton').attr('style', 'display:none');
        });

    // Example starter JavaScript for disabling form submissions if there are invalid fields
    (function() {
        'use strict';
        window.addEventListener('load', function() {
            // Fetch all the forms we want to apply custom Bootstrap validation styles to
            var forms = document.getElementsByClassName('needs-validation');
            // Loop over them and prevent submission
            var validation = Array.prototype.filter.call(forms, function(form) {
                form.addEventListener('submit', function(event) {
                    if (form.checkValidity() === false) {
                        event.preventDefault();
                        event.stopPropagation();
                    } else{
                        let data = new FormData($("#answerForm")[0]);
                        // debugger;
                        form.classList.add('is-validated');
                        event.preventDefault();
                        event.stopPropagation();

                        Swal.fire({
                            text: "En cours d'envoi...",
                            didOpen: () => {
                                Swal.showLoading()
                            },
                            allowOutsideClick: false
                        });

                        $.ajax({
                            type: "POST",  
                            url: '{{route("etudiants.answerRequests", $data["infosRequest"]->idrequete)}}',  
                            data: data,
                            processData: false,  // tell jQuery not to process the data
                            contentType: false ,  // tell jQuery not to set contentType
                            dataType: "json",       
                            success: function(data)  
                            {
                                Swal.fire({
                                    title: 'Envoyé...',
                                    text: 'Votre réponse a été envoyée avec succès!',
                                    icon: 'success',
                                    showConfirmButton: true,
                                    confirmButtonColor: '#8cd4f5',
                                    backdrop: `rgba(0,200,0,0.4)`
                                });	
                            }, 
                            complete: function() { 
                                //$('#decodeimage').html('<div class="form-group" id="decodeimage"><label class="control-label col-md-3">Reçu bank info</label><div class="col-md-6"><input name = "decode"  id = "decode" type = "text" class="form-control" readonly ></div></div>');	
                                // unblock when remote call returns 
                                $.unblockUI(); 
                            }, 
                            error: function(jqXHR, exception){
                                Swal.fire({
                                    title: 'Alert info',
                                    text: "Une erreur est survenue lors de l'envoi de votre réponse. Vérifiez votre connexion internet et re-essayez!!",
                                    icon: 'error',
                                    showConfirmButton: true,
                                    confirmButtonColor: '#8cd4f5',
                                    backdrop: `rgba(200,0,0,0.4)`
                                });
                                		
                            }
                        });
                    }
                    form.classList.add('was-validated');
                }, false);
            });
        }, false);
    })();
</script>
@endsection