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

@section('title', 'Express54')

@section('content')
    <!-- 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>

                    <form action="{{ route('employee.viewApplications', ['id' => $application->id]) }}" method="POST">
                        @csrf
                        @method('PUT')

                        @if ($userRole !== 'user')
                            <a href="{{ url('employee/dashboard/' . $application->service_selected) }}"
                                class="btn btn-lg btn-danger rounded-pill px-3"><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-3">
                                <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-3">
                                <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-3">
                                <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-3">
                                <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-3">
                                <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-3">
                                <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-3">
                                <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-3">
                                <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-3">
                                <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-3">
                                <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="" class="col-sm-2 col-form-label">@lang('messages.photo') :</label>
                            <div class="col-sm-3">
                                @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-3">
                                @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-3">
                                @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-3">
                                @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-3">
                                @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-3">
                                @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-3">
                                @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">@lang('messages.attestion_bourse_secour') :</label>
                            <div class="col-sm-3">
                                @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="search-container">
                        <input type="text" placeholder="Search Here" class="search-input" id="searchInput">
                        <button class="search-button">SEARCH</button>
                    </div>
                    <div id="searchResults">
                        <!-- Search results will appear here -->
                    </div>
                    <div class="form-group row p-3">
                        <center>
                            <div class="col-sm">
                                @if ($userRole !== 'user')
                                    <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">@lang('messages.accept_reason')
                                            :</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();
                                    });
                                </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>
    $(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>There was an error processing your request.</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