{{-- @extends('layouts.masteremployee') --}}
@extends('layouts.master')

@section('title', 'Express54')

@section('content')

    @php
        $child = request()->query('childServiceId');

        $sousTitres = [
            25 => "Secours",
            27 => "Attributions",
            28 => "Renouvellement",
            26 => "Attributions",
            29 => "Renouvellement",
            23 => "Secours",
        ];

        $soustitre = $sousTitres[$child] ?? null; // null si l'ID ne correspond à aucun
    @endphp

    <!-- Background image -->
    <div class="p-5 bgImage" style="min-height: calc(100vh - 110px)">
        <div class="card mx-4 mx-md-5 shadow-5-strong" style="backdrop-filter: blur(30px);">
            <div class="card-body px-md-6">
                <div class="row d-flex justify-content-center">
                    <div id="alert-container">
                        @if (Session('error'))
                            <div class="alert alert-warning" role="alert">
                                {{ Session('error') }}
                            </div>
                        @endif

                        @if (Session('success'))
                            <div class="alert alert-success" role="alert">
                                {{ Session('success') }}
                            </div>
                        @endif
                    </div>
                    <!-- alert time out  -->
                    <script>
                        document.addEventListener("DOMContentLoaded", function() {
                            var alertContainer = document.getElementById("alert-container");
                            if (alertContainer) {
                                setTimeout(function() {
                                    alertContainer.remove();
                                }, 5000);
                            }
                        });
                    </script>

                    <!-- Indicateur de chargement -->
                    <div id="loader" style="display: none;">
                        <!-- Remplacez ceci par votre propre indicateur de chargement -->
                        <img src="chemin/vers/loader.gif" alt="Chargement en cours...">
                    </div>

                    <div class="search-container">
                        <input type="text" placeholder="Nom et Prénoms - Nom ou Prénoms" class="search-input" id="searchInput" value="{{ $application->fname }}"> 
                        <button class="search-button">RECHERCHER</button>
                    </div>
                    <div id="searchResults" style="margin-bottom:20px;">
                        <!-- Search results will appear here -->
                    </div>

                    <form action="{{ route('employee.viewApplications', ['id' => $application->id]) }}" method="POST" style="margin-top:20px;">
                        @csrf
                        @method('PUT')

                        @if ($userRole !== 'user')
                            <a href="{{ $application->status == 'Pending'
                                        ? url('employee/dashboard-app/' . $application->service_selected . '?childServiceId=' . $child)
                                        : url('employee/dashboard/' . $application->service_selected . '?childServiceId=' . $child) }}"
                                class="btn btn-lg btn-danger_ rounded-pill px-3" style="background: #ff7700;color:#fff">
                                <i class="fa-solid fa-arrow-left"></i> @lang('messages.back')
                            </a>
                        @elseif($userRole === 'user')
                            <a href="{{ url('user/services') }}" class="btn btn-lg btn-danger rounded-pill px-3"><i
                                    class="fa-solid fa-arrow-left"></i>
                                @lang('messages.back')</a>
                        @endif

                        <!-- <div class="form-group row p-3">
                            <label for="" class="col-sm-2 col-form-label">@lang('messages.services')</label>
                            <div class="col-sm-3">
                                <input class="form-control" id="service_name" name="service_name"
                                    value="{{ $service->where('id', $application->service_selected)->first()->name }}"
                                    disabled>
                            </div>

                            <label for="" class="col-sm-2 col-form-label">@lang('messages.moreservices')</label>
                            <div class="col-sm-3">
                                <input type="text" class="form-control" id="sub_service" name="sub_service"
                                    value="{{ $service->where('id', $application->sub_service)->first()->name }}" disabled>
                            </div>
                        </div> -->



                        <div class="form-group row p-3">
                            <label for="" class="col-sm-2 col-form-label">@lang('messages.full_name')
                                :</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" name="name" value="{{ $application->fname }}"
                                    disabled>
                            </div>

                            <label for="" class="col-sm-2 col-form-label">@lang('messages.street')
                                :</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" name="adresse"
                                    value="{{ $application->adresse }}" disabled>
                            </div>
                        </div>

                        <div class="form-group row p-3">
                            <label for="" class="col-sm-2 col-form-label">@lang('messages.contact')
                                :</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" name="telephone" value="{{ $application->telephone }}"
                                    disabled>
                            </div>

                            <label for="" class="col-sm-2 col-form-label">@lang('messages.passport_number')
                                :</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" name="passport_number" value="{{ $application->passport_number }}"
                                    disabled>
                            </div>
                        </div>

                        <div class="form-group row p-3">
                            <label for="" class="col-sm-2 col-form-label">@lang('messages.bank_name')
                                :</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" name="banque_name" value="{{ $application->banque_name }}"
                                    disabled>
                            </div>

                            <label for="" class="col-sm-2 col-form-label">@lang('messages.bank_account_number')
                                :</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" name="bank_account_number" value="{{ $application->bank_account_number }}"
                                    disabled>
                            </div>
                        </div>

                        <div class="form-group row p-3">
                            <label for="appartmentornumber" class="col-sm-2 col-form-label">@lang('messages.university_name')
                                :</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" id="university"
                                    name="university" value="{{ $application->university }}" disabled>
                            </div>

                            <label for="city" class="col-sm-2 col-form-label">@lang('messages.filiere') :</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" id="city1" name="filiere"
                                    value="{{ $application->filiere }}" disabled>
                            </div>
                        </div>
                        <div class="form-group row p-3">
                            <label for="country" class="col-sm-2 col-form-label">@lang('messages.study_year') :</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" id="annee_detude" name="annee_detude"
                                    value="{{ $application->annee_detude }}" disabled>
                            </div>
                            <label for="country" class="col-sm-2 col-form-label">Email :</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" id="email" name="email"
                                    value="{{ $application->email }}" disabled>
                            </div>
                        </div>

                        <div class="form-group row p-3">
                            <label for="country" class="col-sm-2 col-form-label">Pays d'étude :</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" id="country_id" name="country_id"
                                    value="{{ $studyCountryId }}" disabled>
                            </div>

                            <label for="niveau_etude" class="col-sm-2 col-form-label">Niveau d'étude :</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" id="niveau_etude" name="niveau_etude"
                                    value="{{ $niveauEtude }}" disabled>
                            </div>
                            
                        </div>

                        <div class="form-group row p-3">
                            <label for="country" class="col-sm-2 col-form-label">Date de naissance :</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" id="date_naissance" name="date_naissance"
                                    value="{{ \Carbon\Carbon::parse($application->date_naissance)->format('d/m/Y') }}" disabled>
                            </div>
                            <label for="country" class="col-sm-2 col-form-label">Lieu de naissance :</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" id="lieu_naissance" name="lieu_naissance"
                                    value="{{ $application->lieu_naissance }}" disabled>
                            </div>
                        </div>

                        <div class="form-group row p-3">
                            <label for="country" class="col-sm-2 col-form-label">Pays de naissance :</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" id="pays_naissance" name="pays_naissance"
                                    value="{{ $application->pays_naissance }}" disabled>
                            </div>
                        </div>

                        <div class="form-group row p-3">
                            <label for="" class="col-sm-2 col-form-label">@lang('messages.photo') :</label>
                            <div class="col-sm-4">
                                @php
                                    $filePath = storage_path('app/public/uploads/' . $applicationInfo->photo);
                                @endphp

                                @if (file_exists($filePath) && $applicationInfo->photo)
                                    @if (pathinfo($applicationInfo->photo, PATHINFO_EXTENSION) == 'pdf')
                                        <a href="{{ asset('storage/uploads/' . $applicationInfo->photo) }}" target="_blank" title="click to view">
                                            <iframe src="{{ asset('storage/uploads/' . $applicationInfo->photo) }}" style="width: 50%; height: 100px;"></iframe>
                                            <i class="fa-regular fa-eye iconcolor"></i>
                                        </a>
                                    @else
                                        <a href="{{ asset('storage/uploads/' . $applicationInfo->photo) }}" target="_blank" title="click to view">
                                            <img src="{{ asset('storage/uploads/' . $applicationInfo->photo) }}" alt="image" style="width: 100px; height: 100px;">
                                        </a>
                                    @endif
                                @else
                                    <p>Aucune photo disponible.</p>
                                @endif
                            </div>

                            <label for="copyconsulatecard" class="col-sm-2 col-form-label ">@lang('messages.copy_baccalaureat_attestation_reussite'):</label>
                            <div class="col-sm-4">
                                @php
                                    $filePath = storage_path('app/public/uploads/' . $applicationInfo->copy_baccalaureat_attestation_reussite);
                                @endphp

                                @if (file_exists($filePath) && $applicationInfo->copy_baccalaureat_attestation_reussite)
                                    @if (pathinfo($applicationInfo->copy_baccalaureat_attestation_reussite, PATHINFO_EXTENSION) == 'pdf')
                                        <a href="{{ asset('storage/uploads/' . $applicationInfo->copy_baccalaureat_attestation_reussite) }}" target="_blank" title="click to view">
                                            <iframe src="{{ asset('storage/uploads/' . $applicationInfo->copy_baccalaureat_attestation_reussite) }}" style="width: 50%; height: 100px;"></iframe>
                                            <i class="fa-regular fa-eye iconcolor"></i>
                                        </a>
                                    @else
                                        <a href="{{ asset('storage/uploads/' . $applicationInfo->copy_baccalaureat_attestation_reussite) }}" target="_blank" title="click to view">
                                            <img src="{{ asset('storage/uploads/' . $applicationInfo->copy_baccalaureat_attestation_reussite) }}" alt="image" style="width: 100px; height: 100px;">
                                        </a>
                                    @endif
                                @else
                                    <p>Aucun document disponible.</p>
                                @endif
                            </div>
                        </div>

                        <div class="form-group row p-3">
                            <label for="" class="col-sm-2 col-form-label">@lang('messages.copy_dernier_diplome') :</label>
                            <div class="col-sm-4">
                                @php
                                    $filePath = storage_path('app/public/uploads/' . $applicationInfo->copy_dernier_diplome);
                                @endphp

                                @if (file_exists($filePath) && $applicationInfo->copy_dernier_diplome)
                                    @if (pathinfo($applicationInfo->copy_dernier_diplome, PATHINFO_EXTENSION) == 'pdf')
                                        <a href="{{ asset('storage/uploads/' . $applicationInfo->copy_dernier_diplome) }}" target="_blank" title="click to view">
                                            <iframe src="{{ asset('storage/uploads/' . $applicationInfo->copy_dernier_diplome) }}" style="width: 50%; height: 100px;"></iframe>
                                            <i class="fa-regular fa-eye iconcolor"></i>
                                        </a>
                                    @else
                                        <a href="{{ asset('storage/uploads/' . $applicationInfo->copy_dernier_diplome) }}" target="_blank" title="click to view">
                                            <img src="{{ asset('storage/uploads/' . $applicationInfo->copy_dernier_diplome) }}" alt="image" style="width: 100px; height: 100px;">
                                        </a>
                                    @endif
                                @else
                                    <p>Aucune photo disponible.</p>
                                @endif
                            </div>

                            <label for="copyconsulatecard" class="col-sm-2 col-form-label ">@lang('messages.attestion_engagement'):</label>
                            <div class="col-sm-4">
                                @php
                                    $filePath = storage_path('app/public/uploads/' . $applicationInfo->attestion_engagement);
                                @endphp

                                @if (file_exists($filePath) && $applicationInfo->attestion_engagement)
                                    @if (pathinfo($applicationInfo->attestion_engagement, PATHINFO_EXTENSION) == 'pdf')
                                        <a href="{{ asset('storage/uploads/' . $applicationInfo->attestion_engagement) }}" target="_blank" title="click to view">
                                            <iframe src="{{ asset('storage/uploads/' . $applicationInfo->attestion_engagement) }}" style="width: 50%; height: 100px;"></iframe>
                                            <i class="fa-regular fa-eye iconcolor"></i>
                                        </a>
                                    @else
                                        <a href="{{ asset('storage/uploads/' . $applicationInfo->attestion_engagement) }}" target="_blank" title="click to view">
                                            <img src="{{ asset('storage/uploads/' . $applicationInfo->attestion_engagement) }}" alt="image" style="width: 100px; height: 100px;">
                                        </a>
                                    @endif
                                @else
                                    <p>Aucun document disponible.</p>
                                @endif
                            </div>
                        </div>

                        <div class="form-group row p-3">
                            <label for="" class="col-sm-2 col-form-label">@lang('messages.certificat_scolarite') :</label>
                            <div class="col-sm-4">
                                @php
                                    $filePath = storage_path('app/public/uploads/' . $applicationInfo->certificat_scolarite);
                                @endphp

                                @if (file_exists($filePath) && $applicationInfo->certificat_scolarite)
                                    @if (pathinfo($applicationInfo->copy_dernier_diplome, PATHINFO_EXTENSION) == 'pdf')
                                        <a href="{{ asset('storage/uploads/' . $applicationInfo->certificat_scolarite) }}" target="_blank" title="click to view">
                                            <iframe src="{{ asset('storage/uploads/' . $applicationInfo->certificat_scolarite) }}" style="width: 50%; height: 100px;"></iframe>
                                            <i class="fa-regular fa-eye iconcolor"></i>
                                        </a>
                                    @else
                                        <a href="{{ asset('storage/uploads/' . $applicationInfo->certificat_scolarite) }}" target="_blank" title="click to view">
                                            <img src="{{ asset('storage/uploads/' . $applicationInfo->certificat_scolarite) }}" alt="image" style="width: 100px; height: 100px;">
                                        </a>
                                    @endif
                                @else
                                    <p>Aucun document disponible.</p>
                                @endif
                            </div>

                            <label for="copyconsulatecard" class="col-sm-2 col-form-label ">@lang('messages.copy_of_password_cni'):</label>
                            <div class="col-sm-4">
                                @php
                                    $filePath = storage_path('app/public/uploads/' . $applicationInfo->copy_of_password_cni);
                                @endphp

                                @if (file_exists($filePath) && $applicationInfo->copy_of_password_cni)
                                    @if (pathinfo($applicationInfo->copy_of_password_cni, PATHINFO_EXTENSION) == 'pdf')
                                        <a href="{{ asset('storage/uploads/' . $applicationInfo->copy_of_password_cni) }}" target="_blank" title="click to view">
                                            <iframe src="{{ asset('storage/uploads/' . $applicationInfo->copy_of_password_cni) }}" style="width: 50%; height: 100px;"></iframe>
                                            <i class="fa-regular fa-eye iconcolor"></i>
                                        </a>
                                    @else
                                        <a href="{{ asset('storage/uploads/' . $applicationInfo->copy_of_password_cni) }}" target="_blank" title="click to view">
                                            <img src="{{ asset('storage/uploads/' . $applicationInfo->copy_of_password_cni) }}" alt="image" style="width: 100px; height: 100px;">
                                        </a>
                                    @endif
                                @else
                                    <p>Aucun document disponible.</p>
                                @endif
                            </div>
                        </div>

                        <div class="form-group row p-3">
                            <label for="" class="col-sm-2 col-form-label">@lang('messages.copy_rib') :</label>
                            <div class="col-sm-4">
                                @php
                                    $filePath = storage_path('app/public/uploads/' . $applicationInfo->copy_rib);
                                @endphp

                                @if (file_exists($filePath) && $applicationInfo->copy_rib)
                                    @if (pathinfo($applicationInfo->copy_dernier_diplome, PATHINFO_EXTENSION) == 'pdf')
                                        <a href="{{ asset('storage/uploads/' . $applicationInfo->copy_rib) }}" target="_blank" title="click to view">
                                            <iframe src="{{ asset('storage/uploads/' . $applicationInfo->copy_rib) }}" style="width: 50%; height: 100px;"></iframe>
                                            <i class="fa-regular fa-eye iconcolor"></i>
                                        </a>
                                    @else
                                        <a href="{{ asset('storage/uploads/' . $applicationInfo->copy_rib) }}" target="_blank" title="click to view">
                                            <img src="{{ asset('storage/uploads/' . $applicationInfo->copy_rib) }}" alt="image" style="width: 100px; height: 100px;">
                                        </a>
                                    @endif
                                @else
                                    <p>Aucun document disponible.</p>
                                @endif
                            </div>

                            <label for="" class="col-sm-2 col-form-label">Attestation de bourse / secours financier de la DOB :</label>
                            <div class="col-sm-4">
                                @php
                                    $filePath = storage_path('app/public/uploads/' . $applicationInfo->attestion_bourse_secour);
                                @endphp

                                @if (file_exists($filePath) && $applicationInfo->attestion_bourse_secour)
                                    @if (pathinfo($applicationInfo->copy_dernier_diplome, PATHINFO_EXTENSION) == 'pdf')
                                        <a href="{{ asset('storage/uploads/' . $applicationInfo->attestion_bourse_secour) }}" target="_blank" title="click to view">
                                            <iframe src="{{ asset('storage/uploads/' . $applicationInfo->attestion_bourse_secour) }}" style="width: 50%; height: 100px;"></iframe>
                                            <i class="fa-regular fa-eye iconcolor"></i>
                                        </a>
                                    @else
                                        <a href="{{ asset('storage/uploads/' . $applicationInfo->attestion_bourse_secour) }}" target="_blank" title="click to view">
                                            <img src="{{ asset('storage/uploads/' . $applicationInfo->attestion_bourse_secour) }}" alt="image" style="width: 100px; height: 100px;">
                                        </a>
                                    @endif
                                @else
                                    <p>Aucun document disponible.</p>
                                @endif
                            </div>
                        </div>
                    </form>
                    
                    <div class="form-group row p-3">
                        <center>
                            <div class="col-sm">
                                @if ($userRole !== 'user' && $application->status == 'Pending')
                                    <button id="showAcceptReasonBtn" class="btn btn-lg btn-success rounded-pill px-3">
                                        @lang('messages.accept')
                                    </button>

                                    <button id="showRejectReasonBtn" class="btn btn-lg btn-danger rounded-pill px-3">
                                        @lang('messages.reject')
                                    </button>
                                @endif
                                <!-- accept button reason -->
                                <form method="POST"
                                    action="{{ route('acceptApplication', ['id' => $application->id]) }}">
                                    @csrf
                                    <div id = "select_result">

                                    </div>
                                    <br>
                                    <div class="form-group row" style="display: none;" id="acceptReasonField">
                                        <label for="acceptReason" class="col-sm-3 col-form-label">Raison d'approbation :</label>
                                        <div class="col-sm-6">
                                            <textarea class="form-control" id="acceptReason" name="acceptReason" required> </textarea>
                                        </div>
                                    </div>
                                    <br>

                                    <!-- @if ($application->service_selected == 1)
                                        <div class="form-group row p-3" style="display: none;" id="fromDateField">
                                            <label for="fromDate" class="col-sm-2 col-form-label">From Date:</label>
                                            <div class="col-sm-3">
                                                <input type="date" class="form-control" id="fromDate"
                                                    name="fromDate" required>
                                            </div>

                                            <label for="toDate" class="col-sm-3 col-form-label">To Date:</label>
                                            <div class="col-sm-3 mb-5">
                                                <input type="date" class="form-control" id="toDate" name="toDate"
                                                    required>
                                            </div>


                                            <label for="" class="col-sm-2 col-form-label">Number of Entries:</label>
                                            <div class="col-sm-3">
                                                <select class="form-control" id="numberEntry" name="numberEntry" required>
                                                    <option value="MUL">Multiple</option>
                                                    <option value="SIN">Single</option>
                                                </select>
                                            </div>
                                        </div>
                                    @endif -->

                                    @if ($userRole !== 'user')
                                        <button type="submit" class="btn btn-lg btn-success rounded-pill px-3" id="submitAcceptButton" style="display: none;">@lang('messages.submit')</button>
                                    @endif
                                </form>

                                <script>
                                    $(document).ready(function() {
                                        $("#showAcceptReasonBtn").click(function() {
                                            $("#acceptReasonField").toggle();
                                            $("#fromDateField").toggle();
                                            $("#toDateField").toggle();
                                            $("#submitAcceptButton").toggle();
                                        });
                                        // Function to check and enable/disable the submit button
                                        /*function checkTextarea() {
                                            var acceptReason = $("#acceptReason").val().trim(); // Trim to remove leading/trailing whitespace
                                            if (acceptReason.length === 0) {
                                                $("#submitAcceptButton").prop("disabled", true);
                                            } else {
                                                $("#submitAcceptButton").prop("disabled", false);
                                            }
                                        }
                                        $("#acceptReason").on("input", checkTextarea);
                                        checkTextarea();*/

                                        // Fonction qui vérifie si la zone de texte 'acceptReason' contient du texte
                                        function checkTextarea() {
                                            var acceptReason = $("#acceptReason").val().trim(); // Trim pour enlever les espaces avant/après
                                            var isChecked = $("#selectStatus").is(":checked"); // Vérifie si la case est cochée

                                            // Si la case est cochée et que le texte dans 'acceptReason' n'est pas vide
                                            if (acceptReason.length > 0 && isChecked) {
                                                $("#submitAcceptButton").prop("disabled", false); // Active le bouton
                                            } else {
                                                $("#submitAcceptButton").prop("disabled", true); // Désactive le bouton
                                            }
                                        }

                                        // Détecter les changements dans le champ 'acceptReason'
                                        $("#acceptReason").on("input", function() {
                                            checkTextarea(); // Appeler la fonction chaque fois que l'utilisateur tape
                                        });

                                        // Détecter le changement de la case 'selectStatus'
                                        $("#selectStatus").change(function() {
                                            checkTextarea(); // Appeler la fonction chaque fois que l'utilisateur coche/décoche la case
                                        });
                                    });
                                </script>

                                <!-- reject button reason -->
                                <form method="POST"
                                    action="{{ route('rejectApplication', ['id' => $application->id]) }}">
                                    @csrf
                                    <div id = "select_result">

                                    </div>
                                    <br>
                                    <div class="form-group row" style="display: none;" id="rejectReasonField">
                                        <label for="rejectReason" class="col-sm-3 col-form-label">@lang('messages.reject_reason')
                                            :</label>
                                        <div class="col-sm-6">
                                            <textarea class="form-control" id="rejectReason" name="rejectReason" required> </textarea>

                                        </div>
                                    </div>
                                    <br>
                                    <div class="form-group row" style="display: none;" id="submitRejectButton">
                                        <div class="col-sm-6 offset-sm-3">
                                            @if ($userRole !== 'user')
                                                <button type="submit" class="btn btn-lg btn-danger rounded-pill px-3"
                                                    onclick="return confirm('Are you sure you want to Reject this Application?')">@lang('messages.submit')</button>
                                            @endif
                                        </div>
                                    </div>
                                </form>

                                <script>
                                    $(document).ready(function() {
                                        $("#showRejectReasonBtn").click(function() {
                                            $("#rejectReasonField").toggle();
                                            $("#submitRejectButton")
                                                .toggle(); // Call the function to enable/disable the "Reject" button
                                        });

                                        // Function to heck and enable/disable the "Reject" button
                                        function toggleRejectButton() {
                                            var rejectReason = $("#rejectReason").val().trim(); // Trim to remove leading/trailing whitespace
                                            var rejectButton = $("#submitRejectButton button[type=submit]");

                                            if (rejectReason.length === 0) {
                                                rejectButton.prop("disabled", true);
                                            } else {
                                                rejectButton.prop("disabled", false);
                                            }
                                        }

                                        // Add event listeners for input and when the page loads
                                        $("#rejectReason").on("input", toggleRejectButton);
                                        toggleRejectButton(); // Call the function on page load
                                    });
                                </script>
                            </div>
                        </center>
                    </div>
                </div>
            </div>
        </div>
    </div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.5/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.5/js/dataTables.bootstrap5.min.js"></script>
<script>
    $(document).ready(function() {
        // Fonction pour effectuer la recherche
        function performSearch() {
            var searchTerm = $('#searchInput').val();
            //console.log(searchTerm);

            // Envoi de la requête AJAX vers la route Laravel
            $.ajax({
                url: "{{ route('search') }}", // La route définie dans Laravel
                method: 'POST',
                data: {
                    '_token': "{{ csrf_token() }}",
                    search: searchTerm
                },
                beforeSend: function() {
                    // Afficher l'indicateur de chargement avant l'envoi de la requête
                    $('#loader').show();
                },
                success: function(response) {
                    // Insérer la réponse (HTML) dans la div searchResults
                    $('#searchResults').html(response.html);
                },
                error: function() {
                    // Gérer les erreurs éventuelles
                    $('#searchResults').html('<p>Une erreur est survenue lors du traitement de votre demande.</p>');
                },
                complete: function() {
                    // Masquer l'indicateur de chargement après la fin de la requête
                    $('#loader').hide();
                }
            });
        }

        // Déclencher la recherche lors du clic sur le bouton de recherche
        $('.search-button').on('click', function() {
            performSearch();
        });

        // Déclencher la recherche au chargement de la page
        $(window).on('load', function() {
            performSearch();
        });
    });

    // $(document).ready(function() {
    //     // Trigger the search when the button is clicked
    //     $('.search-button').on('click', function() {
    //         var searchTerm = $('#searchInput').val();
    //         console.log(searchTerm);

    //         // Send the AJAX request to the Laravel route
    //         $.ajax({
    //             url: "{{ route('search') }}", // The route we defined earlier
    //             method: 'POST',
    //             data: {
    //                 '_token': "{{ csrf_token() }}",
    //                 search: searchTerm
    //             }, // The search term to be passed
    //             success: function(response) {
    //                 // Insert the response (HTML) into the searchResults div
    //                 $('#searchResults').html(response.html);
    //             },
    //             error: function() {
    //                 // Handle errors if any
    //                 $('#searchResults').html('<p>Une erreur est survenue lors du traitement de votre demande.</p>');
    //             }
    //         });
    //     });

    //     // Optional: Trigger search automatically when the user types (without needing to click the button)
    //     $('#searchInput').on('keyup', function() {
    //         var searchTerm = $(this).val();

    //         if (searchTerm.length > 2) { // Start searching after typing 3 characters
    //             $.ajax({
    //                 url: "{{ route('search') }}",
    //                 method: 'GET',
    //                 data: { search: searchTerm },
    //                 success: function(response) {
    //                     $('#searchResults').html(response);
    //                 },
    //                 error: function() {
    //                     $('#searchResults').html('<p>There was an error processing your request.</p>');
    //                 }
    //             });
    //         } else {
    //             $('#searchResults').html(''); // Clear results if search term is too short
    //         }
    //     });

    // });
</script>
@endsection