@extends('layouts.master')

@section('title', 'Express54')

@section('content')

    <div class="row banner custom_service">
        @if ($selectedCountry)
            {{-- <img src="{{ asset("/assets/image/$selectedCountry->banner_image") }}" class="test" --}}
            <img src="{{ asset("/storage/banner/$selectedCountry->banner_image") }}" class="test"
                alt="{{ $selectedCountry->title }}" style="width: 100%;">
        @else
            <img src="{{ asset('/assets/image/bluebanner.png') }}" class="test" alt="bluebanner.png"
                style="width: 100%; height:350px;">
            <!-- <div class="col-4 coursel">
                @include('ads.adslider')
            </div> -->
        @endif
    </div>



    <!-- country and embassies section  -->
    <!-- Country Dropdown -->
    <div class="africabackground custom_africabackground p-5">
        <div class="container">
            <div class="col-md-12">
                <form action="{{ route('updateUserProfile', ['id' => $user->id]) }}" method="POST">
                    @csrf
                    <!-- <div class="row">
                        <label for="country" class="col-sm-1 p-2">@lang('back.country') :</label>
                        <div class="col-sm-3">
                            <select name="country" id="countrySelect" class="form-control">
                                <option value="">Select Country</option>
                                @foreach ($countries as $country)
                                    <option value="{{ $country->id }}" @if ($user->country == $country->id) selected @endif>
                                        {{ $country->title }}
                                    </option>
                                @endforeach
                            </select>
                        </div>


                        <label for="embassy" class="col-sm-1 p-2">@lang('messages.embassy') :</label>
                        <div class="col-sm-3">
                            <select name="embassy" id="selected_embassy" class="form-control">
                                <option value="">Select Embassy</option>
                                @foreach ($embassies as $embassy)
                                    <option value="{{ $embassy->id }}" @if ($user->embassies == $embassy->id) selected @endif>
                                        {{ $embassy->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>


                        <div class="col-sm-4 ">
                            {{-- <button type="submit" class="btn btn-md rounded-pill px-3 savebutton"><i
                                    class="fas fa-thin fa-angle-right"></i> @lang('messages.update')</button> --}}


                            <button type="submit" class="btn btn-md rounded-pill px-3 savebutton"
                                style="background: {{ $colorCode }}; color: white;"
                                onmouseover="this.style.backgroundColor='{{ $hovercolor }}';"
                                onmouseout="this.style.backgroundColor='{{ $colorCode }}';">
                                <i class="fas fa-thin fa-angle-right"></i> @lang('messages.update')
                            </button>



                        </div>
                    </div> -->

                    <script>
                        // Function to fetch and populate the embassy options based on the selected country
                        function populateEmbassies(selectedCountry) {
                            const embassySelect = document.querySelector('select[name="embassy"]');
                            embassySelect.innerHTML = '<option value="" disabled selected>Select an embassy</option>';
                            if (selectedCountry) {
                                fetch(`/get-embassies/${selectedCountry}`)
                                    .then(response => response.json())
                                    .then(data => {
                                        if (data.length === 0) {
                                            const option = document.createElement('option');
                                            option.textContent = 'No Embassy';
                                            embassySelect.appendChild(option);
                                        } else {
                                            data.forEach(embassy => {
                                                const option = document.createElement('option');
                                                option.value = embassy.id;
                                                option.textContent = embassy.name;
                                                embassySelect.appendChild(option);
                                            });
                                        }
                                    });
                            }
                        }

                        // Event listener for the country select element
                        document.querySelector('select[name="country"]').addEventListener('change', function(event) {
                            const selectedCountry = event.target.value;
                            const selectedEmbassyField = document.querySelector('#selected_embassy');

                            // Update the embassy select options
                            populateEmbassies(selectedCountry);

                            // Store the selected country in a hidden field
                            selectedEmbassyField.value = '';
                        });

                        // Event listener for the embassy select element
                        document.querySelector('select[name="embassy"]').addEventListener('change', function(event) {
                            const selectedEmbassy = event.target.value;
                            document.querySelector('#selected_embassy').value = selectedEmbassy;
                        });
                    </script>

                </form>
            </div>
        </div>
        <br> <br>

        <center>
            <h3>@lang('messages.applications')</h3>
        </center>


        <div class="">
            <div class="row">
                <div class="col-md-12">
                    <div class="mb-3 d-flex justify-content-end">
                        <td><a href="{{ route('mainService') }}" class="btn btn-lg btn-dark rounded-pill px-3"><i
                                    class="fa-solid fa-plus"></i>
                                Soumettre une application</a>
                        </td>
                    </div>

                    <div id="alert-container">
                        @if (Session('success'))
                            <div class="alert alert-success" role="alert">
                                {{ Session('success') }}
                            </div>
                        @endif

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

                    <div class="card border-light">
                        <div class="card-body hometabel">
                            <table class="table">
                                <thead class="table-light">
                                    <tr>
                                        <th>@lang('')</th>
                                        <th>@lang('messages.Name')</th>
                                        <th>@lang('messages.service')</th>
                                        <th>Formation</th>
                                        <th>@lang('messages.action')</th>
                                        <th>@lang('messages.status')</th>
                                        <th>@lang('messages.super_approval')</th>
                                        <!-- <th>Paiement</th> -->
                                        <th>Certificat</th>
                                        <th>Décision</th>
                                        <th>Page</th>
                                    </tr>
                                </thead>
                                <tbody>
                                @foreach ($applications as $key => $application)

                                    @php
                                        $filePath = "public/pdf/application_{$application->id}.pdf";
                                        $fileUrl = asset("storage/pdf/application_{$application->id}.pdf");
                                        $fileExists = Storage::exists($filePath);
                                    @endphp

                                    <tr>

                                        <td>{{ $key + 1 }}</td>

                                        <td>{{ strtoupper($application->name . ' ' . $application->fname) }}</td>

                                        <td>
                                            @php
                                                $selectedService = $services->where('id', $application->service_selected)->first();
                                            @endphp
                                            {{ $selectedService ? $selectedService->name : 'Service not found' }}
                                        </td>
                                        <td>
                                                                                        {{ $statusBourses[$application->typebourse] ?? $application->typebourse }}
                                        </td>
                                        
                                        <td>
                                            @if (
                                                $application->status == 'Draft' ||
                                                $application->supervisor_approval == 'Return' ||
                                                $application->status == 'Return')
                                                @if ($application->service_selected == '4')
                                                    <a href="{{ route('editdeliveryData', ['id' => $application->id]) }}"
                                                        class="btn btn-sm" title="Edit Application">
                                                        <i class="fa-solid fa-pen"></i>
                                                    </a>
                                                @else
                                                    <a href="{{ route('editCollectData', ['id' => $application->id]) }}"
                                                        class="btn btn-sm" title="Edit Application">
                                                        <i class="fa-solid fa-pen"></i>
                                                    </a>
                                                @endif
                                            @elseif ($application->status == 'Approved' && $application->supervisor_approval == 'Approved')
                                                <a href="{{ route('user.viewApplications', ['id' => $application->id]) }}"
                                                    class="btn btn-sm" title="View Application">
                                                    <i class="fa-regular fa-eye iconcolor"
                                                        style="color: {{ $colorCode }};"
                                                        onmouseover="this.style.color='{{ $hovercolor }}';"
                                                        onmouseout="this.style.color='{{ $colorCode }}';">
                                                    </i>
                                                </a>
                                            @endif
                                        </td>

                                        <td>
                                                                                        {{ $statusLabels[$application->status] ?? $application->status }}
                                            <br />
                                            @if ($application->status == 'Return')
                                                <a href="#" data-bs-toggle="modal" data-bs-target="#reasonModal{{ $application->id }}">
                                                    @lang('messages.view_reason')
                                                </a>
                                            @endif
                                        </td>

                                        <td>
                                                                                        {{ $supervisorLabels[$application->supervisor_approval] ?? $application->supervisor_approval }}
                                        </td>

                                        <!-- <td>
                                            @if ($application->status === 'Approved')
                                            <a href="{{ route('userPayment', ['id' => $application->id]) }}"
                                                    class="btn btn-md" >
                                                    <i class="fa-regular fa-eye iconcolor"></i>
                                                </a>
                                            @else
                                                <a href="#" class="btn btn-md btn disabled-link">
                                                    <i class="fa-regular fa-eye iconcolor"
                                                        style="color: {{ $colorCode }};"
                                                        onmouseover="this.style.color='{{ $hovercolor }}';"
                                                        onmouseout="this.style.color='{{ $colorCode }}';">
                                                    </i>
                                                </a>
                                            @endif
                                        </td> -->

                                        <td>
                                            @if ($fileExists)
                                                <a href="{{ $fileUrl }}" class="btn btn-md btn" target="_blank">
                                                    <i class="fa-regular fa-file-pdf shipcolor"></i>
                                                </a>
                                            @else
                                                <span class="text-muted">N/A</span>
                                            @endif
                                        </td>
                                        <!-- <td>
                                            @if ($application->status === 'Approved' && $application->supervisor_approval === 'Approved')
                                                <a href="{{ route('userReceipt', ['id' => $application->id]) }}"
                                                    class="btn btn-md btn" target="_blank">
                                                    <i class="fa-regular fa-file shipcolor"></i>
                                                </a>
                                            @else
                                                <a href="#" class="btn btn-md btn disabled-link">
                                                    <i class="fa-regular fa-eye iconcolor"
                                                        style="color: {{ $colorCode }};"
                                                        onmouseover="this.style.color='{{ $hovercolor }}';"
                                                        onmouseout="this.style.color='{{ $colorCode }}';">
                                                    </i>
                                                </a>
                                            @endif
                                        </td> -->
                                        <td>{{ $application->num_decision }}</td>
                                        <td>{{ $application->num_page }}</td>

                                    </tr>
                                @endforeach

                                    <script>
                                        $(document).ready(function() {
                                            //$('.table').DataTable();
                                            $('.table').DataTable({
                                                searching: false, // Désactive la recherche
                                                language: {
                                                    url: "https://cdn.datatables.net/plug-ins/1.13.6/i18n/fr-FR.json"
                                                }
                                            });
                                        });
                                    </script>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    @foreach ($applications as $application)
        @if ($application->status == 'Return')
            <div class="modal" id="reasonModal{{ $application->id }}"
                aria-labelledby="exampleModalLabel{{ $application->id }}" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel{{ $application->id }}"> @lang('messages.reason')
                            </h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                            </button>
                        </div>
                        <div class="modal-body">
                            {{ $application->reject_reason }}
                        </div>
                    </div>
                </div>
            </div>
        @endif

        <!-- Modal -->
        @if ($application->signature_request == 'Signed')
            <div class="modal fade" id="pickupdate{{ $application->id }}" data-bs-backdrop="static"
                data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title fs-5" id="staticBackdropLabel">Choose Pickup Date</h1>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <form action="{{ route('updatePickup') }}" method="POST">
                                @csrf
                                <input type="date" id="pickupdateInput{{ $application->id }}" name="pickupdate"
                                    class="form-control mb-5" required />
                                <input type="hidden" name="applicationID" class="form-control mb-5"
                                    value="{{ $application->id }}" />
                                <input type="submit" class="btn btn-dark" value="Submit">
                            </form>
                        </div>

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

            <script>
                document.addEventListener('DOMContentLoaded', function() {
                    const input = document.getElementById('pickupdateInput{{ $application->id }}');
                    const today = new Date();
                    const yesterday = new Date(today);
                    yesterday.setDate(yesterday.getDate() - 1); // Yesterday's date

                    input.addEventListener('input', function() {
                        const selectedDate = new Date(this.value);
                        if (selectedDate <= yesterday) {
                            this.value = ''; // Clear the input if yesterday's date or earlier is selected
                        }
                    });

                    input.addEventListener('change', function() {
                        const selectedDate = new Date(this.value);
                        if (selectedDate.getDay() === 0 || selectedDate.getDay() === 6) {
                            this.value = ''; // Clear the input if Saturday or Sunday is selected
                        }
                    });
                });
            </script>
        @endif
    @endforeach

@endsection