<!-- resources/views/your-page.blade.php -->
@extends('layouts.theme1')

@section('title', 'Dashboard')


@section('style')

<link rel="stylesheet" href="{{ asset('theme1/dist/libs/select2/dist/css/select2.min.css') }}">
    <!-- Custom CSS -->
<link href="{{ asset('theme1/dist/css/style.min.css') }}" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.11.5/datatables.min.css"/>

 
<style>
    th, td {
        max-width: 113px !important;
        word-wrap: break-word;
    }
</style>
@endsection

@section('content')
    <!-- Contenu de votre page -->
    @if(session('success'))
        <div class="alert alert-success">
            {{ session('success') }}
        </div>
    @endif
                          
    <div class="col-md-12">
        <div class="card">
        <div class="border-bottom title-part-padding">
            <h4 class="card-title mb-0">Dossier permis: # {{ $dossier->numero_dossier }} </h4>
        </div>
        <div class="card-body">

              <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li class="nav-item">
                    <a class="nav-link active" data-bs-toggle="tab" href="#home">Candidat</a>
                    </li>
                    <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="tab" href="#step1">Code de la route</a>
                    </li>
                    <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="tab" href="#step2">Crenaux</a>
                    </li>
                    <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="tab" href="#step3">Conduite en ville</a>
                    </li>
                    <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="tab" href="#step4">Provisoire</a>
                    </li>
                    <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="tab" href="#step5">Permis</a>
                    </li>
                    <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="tab" href="#step6">Renouvellement</a>
                    </li>
                </ul>

                <!-- Tab panes -->
                <div class="tab-content">
                    <div id="home" class="container tab-pane active"><br>
                    <h3>Nom complet : {{ $dossier->nom }} {{ $dossier->prenom }}</h3>
                        <div class="row">
                            <div class="col-md-6">
                                <!-- Colonne de gauche -->
                                
                                @if(!empty($dossier->nom_jeune))
                                    <p><strong>Nom de jeune fille:</strong> {{ $dossier->nom_jeune }}</p>
                                @endif
                                
                                <p><strong>Profession:</strong> {{ $dossier->profession ?? 'N/A' }}</p>
                                <p><strong>Document ID:</strong> {{ $dossier->document_id ?? 'N/A' }}</p>
                                <p><strong>Date de naissance:</strong> {{ $dossier->date_naissance ?? 'N/A' }}</p>
                                <p><strong>Lieu de naissance:</strong> {{ $dossier->lieu_naissance ?? 'N/A' }}</p>
                                <p><strong>Adresse:</strong> {{ $dossier->adresse ?? 'N/A' }}</p>
                                <p>
                                    <strong>Sexe:</strong> {{ $dossier->sexe ?? 'N/A' }}, 
                                    <strong>Yeux:</strong> {{ $dossier->yeux ?? 'N/A' }},
                                    <strong>Taille:</strong> {{ $dossier->taille ?? 'N/A' }}
                                </p>

                                <p><strong>Père:</strong> {{ $dossier->pere ?? 'N/A' }}</p>
                                <p><strong>Mère:</strong> {{ $dossier->mere ?? 'N/A' }}</p>


                                <a href="{{ route('admin.dossiers.index') }}" class="btn btn-secondary">Retour</a>
                                <a href="{{ route('admin.dossiers.edit', $dossier->id) }}" class="btn btn-primary">Modifier</a>
                                <!-- Fin colonne de gauche -->
                            </div>
                            <div class="col-md-6">
                                <!-- Colonne de droite -->

                                <p><strong>Photo:</strong><br>
                                    @if($dossier->photo)
                                        <img src="{{ asset('storage/' . $dossier->photo) }}" alt="Photo" width="150">
                                    @else
                                        Aucune photo disponible
                                    @endif
                                </p>

                                <p><strong>Document:</strong><br>
                                    @if($dossier->document)
                                        <a href="{{ asset('storage/' . $dossier->document) }}" target="_blank">Voir le document</a>
                                    @else
                                        Aucun document
                                    @endif
                                </p>

                                <p><strong>Signature:</strong><br>
                                    @if($dossier->signature)
                                        <img src="{{ asset('storage/' . $dossier->signature) }}" alt="Signature" width="150">
                                    @else
                                        Aucune signature disponible
                                    @endif
                                </p>

                                <p><strong>Classe:</strong> {{ $dossier->classe ?? 'N/A' }}</p>

                            </div>
                        </div>
                    </div>

                    <div id="step1" class="container tab-pane fade"><br>
                       
                        <h3>Etapes 1 : Code de la route</h3>

                        
                        @if (!is_null($dossier->permis_code_obtention_date) && $dossier->permis_code_obtention_date !== '')
                           
                            <div class="row">
                                <!-- Fin colonne de gauche -->
                                <div class="col-md-6">                
                                    <p><strong>Date d'obtention : </strong> {{ $dossier->permis_code_obtention_date ?? 'Non disponible' }}</p>

                                    @if($dossier->permis_code_fiche_pdf)
                                        <p><strong>Fiche PDF : </strong> 
                                            <a href="{{ asset('storage/' . $dossier->permis_code_fiche_pdf) }}" target="_blank">
                                                Voir le fichier
                                            </a>
                                        </p>
                                    @else
                                        <p><strong>Fiche PDF : </strong> Non disponible</p>
                                    @endif

                                    <p><strong>Utilisateur ayant délivré le code : </strong> 
                                        {{ optional($dossier->agentCode)->email ?? 'Non disponible' }}
                                    </p>

                                    

                                </div>

                                <!-- Fin colonne droite -->
                                <div class="col-md-6">
                                  

                                </div>
                            </div>
                        @else
                   
                            <form id="addcodeRouteForm" action="{{ route('admin.dossiers.coderoute') }}" method="POST" enctype="multipart/form-data">
                                @csrf
                                
                                <input type="hidden" name="id" value="{{ $dossier->id }}">                        

                                <div class="mb-12">

                                    <button type="submit" class="btn btn-primary ">
                                        Récuperer les résultats
                                    </button>
                                </div>
                                
                            </form>
                        @endif

                        <div class="container mt-5">
                            <h4>Liste des Sessions d'Examen</h4>

                            <table class="table table-striped table-bordered mt-3">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Score</th>
                                        <th>Nombre de Questions</th>
                                        <th>Date Examen</th>
                                        <th>Description</th>
                                        <th>Document ID</th>
                                        <th>Réussi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($sessionsExamens as $index => $session)
                                        <tr>
                                            <td>{{ $index + 1 }}</td>
                                            <td>{{ $session->score }}</td>
                                            <td>{{ $session->number_questions }}</td>
                                            <td>{{ date('d-m-Y H:i:s', strtotime($session->date_examen)) }}</td>
                                            <td>{{ $session->description }}</td>
                                            <td>{{ $session->document_id }}</td>
                                            <td>{{ $session->reussi ? 'Oui' : 'Non' }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        
                        
                    </div>

                    <div id="step2" class="container tab-pane fade"><br>
                        <h3>Etapes 2 : Crénaux</h3>
                        @if($dossier->permis_crenaux === false)
                            Le candidat n'a pas obentenu le crenaux
                            <p>
                                <a class="btn btn-success font-weight-medium rounded-pill px-4" href="javascript:void(0)" id="openModalBtnCrenaux"> Ajouter des résultats de crénaux </a>

                            </p>

                            
                                                       
                        @else                            
                            <p><strong>Date d'obtention : </strong> {{ $dossier->permis_crenaux_obtention_date ?? 'Non disponible' }}</p>

                            @if($dossier->permis_crenaux_fiche_pdf)
                                <p><strong>Fiche PDF : </strong> 
                                    <a href="{{ asset('storage/' . $dossier->permis_crenaux_fiche_pdf) }}" target="_blank">
                                        Voir le fichier PDF
                                    </a>
                                </p>
                            @else
                                <p><strong>Fiche PDF : </strong> Non disponible</p>
                            @endif

                            <p><strong>Utilisateur ayant délivré le créneau :</strong> 
                                {{ optional($dossier->agentCrenaux)->email ?? 'Non disponible' }}
                            </p>
                        @endif
                    </div>

                    <div id="step3" class="container tab-pane fade"><br>
                    <h3>Etapes 3 : Conduite en ville</h3>

                        @if($dossier->permis_conduite === false)
                            Le candidat n'a pas encore validé la conduite en ville
                            <p>
                                <button 
                                    id="addConduiteVille"    
                                    type="button" class="
                                            btn btn-primary
                                            font-weight-medium
                                            rounded-pill
                                            px-4
                                        ">Ajouter des résultats de conduite en ville
                                </button>

                            </p>
                                                    
                        @else                            
                            <p><strong>Date d'obtention : </strong> {{ $dossier->permis_conduite_obtention_date ?? 'Non disponible' }}</p>

                            @if($dossier->permis_conduite_fiche_pdf)
                                <p><strong>Fiche PDF : </strong> 
                                    <a href="{{ asset('storage/' . $dossier->permis_conduite_fiche_pdf) }}" target="_blank">
                                        Voir le fichier PDF
                                    </a>
                                </p>
                            @else
                                <p><strong>Fiche PDF : </strong> Non disponible</p>
                            @endif
                        @endif
                    
                    </div>

                    <div id="step4" class="container tab-pane fade"><br>
                    <h3>Menu 4</h3>
                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
                    </div>

                    <div id="step5" class="container tab-pane fade"><br>
                    <h3>Menu 5</h3>
                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
                    </div>

                    <div id="step6" class="container tab-pane fade"><br>
                    <h3>Menu 6</h3>
                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
                    </div>

                </div>
            
        </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="card">
            <div class="border-bottom title-part-padding">
                <h4 class="card-title mb-0">Commentaire</h4>
            </div>
            <div class="card-body">
                <h4 class="card-subtitle mb-3">
                   L'utilisateur à un dossier sur un point.
                </h4>

                <form action="#" method="POST">
                    @csrf

                    <div class="form-group">
                        <label for="commentaire">Votre commentaire :</label>
                        <textarea name="commentaire" id="commentaire" class="form-control" rows="4" required>{{ old('commentaire') }}</textarea>
                    </div>

                    <button type="submit" class="btn btn-primary mt-2">Envoyer</button>
                </form>
               
        
            </div>
            </div>
        </div>
    </div>

    <!-- Modal Add products -->
 
    <!-- Modal Add products -->
    

    @include('admin.dossiers.crenaux_confirme_modal')


    <script src="{{ asset('theme1/dist/libs/select2/dist/js/select2.full.min.js') }}"></script>
    <script src="{{ asset('theme1/dist/libs/select2/dist/js/select2.min.js') }}"></script>
    <script src="{{ asset('theme1/dist/js/pages/forms/select2/select2.init.js') }}"></script>


    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.11.5/datatables.min.js"></script>
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>

    <script>
        $(document).ready(function() {

            $('#permis_crenaux').on('change', function() {
                $('#submit-button').prop('disabled', !$(this).is(':checked'));
            });
            $('#createDossier').on('click', function () {
                $('#nouveauDossierForm').fadeIn(); // Affiche le div avec effet
                $(this).fadeOut(); // Cache le bouton avec effet
            });
            
            function toggleNomJeune() {
                if ($('#sexe').val() === 'F') {
                    $('#nomJeuneField').show();
                } else {
                    $('#nomJeuneField').hide();
                }
            }

            // Initialisation de select2 (si ce n'est pas déjà fait)
            $('.select2').select2();

            // Appeler la fonction au démarrage
            toggleNomJeune();

            // Réagir aux changements
            $('#sexe').on('change', function() {
                toggleNomJeune();
            });
            
            $("#question").hide();

            $('#answers-table').DataTable({
                processing: true,
                serverSide: true,
                lengthMenu: [ [10, 20, 50, 100, 200, -1], [10, 20, 50, 100, 200, "All"] ],
                pageLength: 50,  // Définir la valeur par défaut à afficher
                ajax: '{{ route('admin.dossiers.index') }}',
                columns: [
                    { data: 'id', name: 'id' },
                    { data: 'numero_dossier', name: 'numero_dossier' },
                    { data: 'nom_complet', name: 'nom_complet' },
                    { data: 'profession', name: 'profession' },
                    { data: 'document_id', name: 'document_id' },
                    { data: 'date_naissance', name: 'date_naissance' },
                    { data: 'sexe', name: 'sexe' },
                    { data: 'classe', name: 'classe' },
                    { data: 'photo', name: 'photo', orderable: false, searchable: false },
                    { 
                        data: 'action', 
                        name: 'action', 
                        orderable: false, 
                        searchable: false,
                        createdCell: function (td, cellData, rowData, row, col) {
                            $(td).attr('data-id', rowData.id);
                        }
                    },
                ]
            });

            $('#answers-table tbody').on('click', 'tr', function () {
                var rowId = $(this).find('td[data-id]').data('id');
                console.log('ID de l\'élément sélectionné :', rowId);
                // Vous pouvez maintenant utiliser rowId comme nécessaire
            });


            // Gestionnaire d'événement pour fermer le modal
            $('#addProjectModal').on('hidden.bs.modal', function () {
                // Réinitialisez le formulaire lorsque le modal est fermé
                $('#addProjectForm')[0].reset();
            });


            // Gestionnaire d'événement pour le clic sur le bouton de suppression
            $('#answers-table tbody').on('click', '.deleteProject', function (e) {
                e.stopPropagation(); // Empêche la propagation de l'événement à la ligne
                var rowId = $(this).data('id');
                
                // Ouvrir le modal de confirmation
                $('#deleteConfirmationModal').modal('show');

                // Gestionnaire d'événement pour le clic sur le bouton de confirmation de suppression
                $('#confirmDelete').on('click', function () {
                    // Fermer le modal de confirmation
                    $('#deleteConfirmationModal').modal('hide');

                    // Effectuer la suppression en utilisant AJAX
                    $.ajax({
                        url: '/admin/answers/' + rowId,
                        type: 'DELETE',
                        data: {
                            _token: $('meta[name="csrf-token"]').attr('content'),
                        },
                        success: function (response) {
                            console.log(response.message);
                            $('#answers-table').DataTable().ajax.reload();
                            // Mettez à jour votre interface utilisateur ou effectuez d'autres actions nécessaires
                        },
                        error: function (error) {
                            console.error('Erreur AJAX:', error);
                            // Gérez l'erreur ici
                        }
                    });
                });
            });

            // Gestionnaire d'événement pour le clic sur le bouton d'édition
            $('#answers-table tbody').on('click', '.editAnswer', function (e) {
                e.stopPropagation(); // Empêche la propagation de l'événement à la ligne
                var rowId = $(this).data('id');

                // Effectuer une requête AJAX pour charger les données du projet
                $.ajax({
                    url: '/admin/answers/' + rowId + '/edit',
                    type: 'GET',
                    success: function (project) {
                        // Pré-remplir le formulaire d'édition avec les données du projet
                        $('#edit-libelle').val(project.libelle);
                        $('#edit-description').val(project.description);
                        $('#edit-isRightAnswer').prop('checked', project.isRightAnswer);

                        // Ouvrir le modal d'édition
                        $('#editAnswerModal').modal('show');
                    },
                    error: function (error) {
                        console.error('Erreur AJAX:', error);
                        // Gérez l'erreur ici
                    }
                });

                // Gestionnaire d'événement pour la soumission du formulaire d'édition
                $('#editAnswerForm').on('submit', function (event) {
                    event.preventDefault();

                    var formData = {
                        libelle: $('#edit-libelle').val(),
                        description: $('#edit-description').val(),
                        isRightAnswer: $('#edit-isRightAnswer').is(':checked') ? 1 : 0,
                        _token: $('meta[name="csrf-token"]').attr('content'), // Récupérer le jeton CSRF depuis la balise meta
                    };
                    // Effectuer une requête AJAX pour mettre à jour le projet
                    $.ajax({
                        url: '/admin/answers/' + rowId,
                        type: 'PUT',
                        data: formData,
                        success: function (response) {
                            console.log(response.message);
                            // Mettez à jour votre interface utilisateur ou effectuez d'autres actions nécessaires
                            $('#answers-table').DataTable().ajax.reload();

                            // Fermer le modal d'édition
                            $('#editAnswerModal').modal('hide');
                        },
                        error: function (error) {
                            console.error('Erreur AJAX:', error);
                            // Gérez l'erreur ici
                        }
                    });
                });
            });

            // Ajouter un gestionnaire d'événements au changement de la sélection
            $("#questionSelect").change(function() {
                // Récupérer la valeur sélectionnée
                var selectedValue = $(this).val();

                // Si la valeur est "0", afficher le champ de texte, sinon le cacher
                if (selectedValue === "0") {
                    $("#question").show();
                } else {
                    $("#question").hide();
                }
                console.log("Option sélectionnée :", selectedValue);
            });

            //Fin des fonctions
        });


        function removeAnswer(rid) {
            $(".removeAnswer" + rid).remove();
        }

        function updateCheckboxValue(checkbox) {
            // Mettre à jour la valeur en fonction de l'état de la case à cocher
            checkbox.value = checkbox.checked ? 1 : 0;

            // Afficher la nouvelle valeur dans la console (facultatif)
            console.log('Nouvelle valeur de la case à cocher :', checkbox.value);
        }


    // ********Crenaux***********
        // Gestionnaire d'événement pour ouvrir le modal
        $('#openModalBtnCrenaux').on('click', function () {
            $('#addDossierModalCrenaux').modal('show');
        });

        // Gestionnaire d'événement pour fermer le modal
        $('#addDossierModalCrenaux').on('hidden.bs.modal', function () {
            // Réinitialisez le formulaire lorsque le modal est fermé
            $('#addapplicationForm')[0].reset();
        });
                
    </script>
@endsection


@section('script')

    <script src="{{ asset('theme1/dist/libs/select2/dist/js/select2.full.min.js') }}"></script>
    <script src="{{ asset('theme1/dist/libs/select2/dist/js/select2.min.js') }}"></script>
    <script src="{{ asset('theme1/dist/js/pages/forms/select2/select2.init.js') }}"></script>

@endsection