@extends('layouts.master')

@section('title', 'Express54')

@section('content')



    <div class="homesection">
        <!-- <div class="homesec">
            <img src="{{ asset('/assets/image/adminlogo.png') }}" class="homelogo" alt="Icon">
        </div> -->
    </div>

    <!-- table -->
    <div class="admin_bg" style="min-height: calc(100vh - 110px)">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="mb-3 d-flex justify-content-end mt-3">
                        <td>
                            <!-- <a href="{{ url('admin/platform/add') }}" class="btn btn-lg px-3 superbutton">
                                <i class="fa-solid fa-plus"></i>@lang('messages.addplatform')
                            </a> -->
                            <a href="#" 
                               class="btn btn-lg px-3 superbutton" 
                               data-bs-toggle="modal" 
                               data-bs-target="#platformModal">
                               <i class="fa-solid fa-list"></i> @lang('messages.addplatform')
                            </a>
                            <a href="{{ url('admin/userlist') }}" class="btn btn-lg px-3 superbutton">
                                <i class="fa-solid fa-plus"></i>@lang('messages.user_list')
                            </a>
                            <a href="{{ url('admin/addsupervisor') }}" class="btn btn-lg px-3 superbutton">
                                <i class="fa-solid fa-plus"></i>@lang('messages.add_Supervisor')
                            </a>

                            <a href="{{ url('admin/countrybanner') }}" class="btn btn-lg px-3 superbutton">
                                <i class="fa-solid fa-list"></i> @lang('messages.country_banner')</a>

                            <a href="{{ url('admin/viewembassy') }}" class="btn btn-lg px-3 superbutton">
                                <i class="fa-solid fa-list"></i> @lang('messages.embassy_list')
                            </a>
                        </td>

                    </div>
                    <!-- <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
                        <script>
                            document.addEventListener("DOMContentLoaded", function() {
                                var alertContainer = document.getElementById("alert-container");
                                if (alertContainer) {
                                    setTimeout(function() {
                                        alertContainer.remove();
                                    }, 5000);
                                }
                            });
                        </script>
                    </div> -->

                    <div class="card shadow-sm p-3 mb-5 bg-white rounded">
                        <div class="card-body hometabel">
                            <h4 class="fw-bold mb-5 custom-heading">@lang('messages.user_applications')</h4>

                            <!-- search form -->
                            <form action="{{ route('search.userapplications') }}" method="GET" id="searchForm" class="mb-4">
                                <div class="row">
                                    <!-- Sélectionner un pays et Sélectionner une ambassade côte à côte -->
                                    <div class="col-md-6 mb-3">
                                        <label for="country" class="form-label">@lang('messages.country')</label>
                                        <select id="country" name="country" class="form-select">
                                            <option value="">@lang('messages.select_country')</option>
                                            @foreach ($countries as $country)
                                                <option value="{{ $country->id }}">{{ $country->title }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="col-md-6 mb-3">
                                        <label for="embassy" class="form-label">@lang('messages.embassy')</label>
                                        <select id="embassy" name="embassy" class="form-select">
                                            <option value="">@lang('messages.select_embassy')</option>
                                        </select>
                                    </div>
                                </div>

                                <!-- Bouton de soumission centré -->
                                <div class="mt-3 d-flex justify-content-end">
                                    <button type="submit" class="btn btn-primary">
                                        @lang('messages.search')
                                    </button>
                                </div>
                            </form>

                            <div id="error-message" class="alert alert-danger d-none"></div>

                            <form id="deleteFraisForm" method="POST" action="{{ route('deleteSelectedFees') }}">
                                @csrf
                                @method('DELETE')

                                <!-- <div class="mb-3">
                                    <button type="submit" class="btn btn-danger" onclick="return confirm('Are you sure you want to delete the selected fees ?')">
                                        Delete Selected
                                    </button>
                                </div> -->
                                
                                <table class="table" id="tablelist">
                                    <thead class="table-light">
                                        <tr>
                                            <!-- <th>
                                                <input type="checkbox" id="selectAll" title="Select All">
                                            </th> -->
                                            <th>@lang('messages.status')</th>
                                            <th>@lang('messages.name')</th>
                                            <th>@lang('messages.phone')</th>
                                            <th>@lang('messages.email')</th>
                                            <th>@lang('messages.service')</th>
                                            <th>@lang('messages.subservice')</th>
                                            <th>@lang('messages.country')</th>
                                            <th>@lang('messages.embassy_name')</th>
                                            <th>@lang('messages.country_selected')</th>
                                            <th>@lang('messages.speed')</th>
                                            <th>@lang('messages.delivery')</th>
                                            <th>@lang('messages.total_amount_paid')</th>
                                            
                                            <th>@lang('messages.date')</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse ($acceptedApplications as $applications)
                                            <tr>
                                                <!-- <td>
                                                    <input type="checkbox" name="selectedFrais[]" value="" class="userCheckbox">
                                                </td> -->
                                                <td>{{ $applications->status }}</td>
                                                <td>{{ $applications->name }} {{ $applications->surname }}</td>
                                                <td>{{ $applications->contact }}</td>
                                                <td>{{ $applications->email }}</td>
                                                <td>{{ $applications->service_name }}</td>
                                                <td>{{ $applications->sub_service_name }}</td>
                                                <td>{{ $applications->country_name }}</td>
                                                <td>{{ $applications->embassy_name }}</td>
                                                <td>
                                                    @if ($applications->country_selected !== null)
                                                        @php
                                                            $country = $countries->where('iso2', $applications->country_selected)->first();
                                                        @endphp
                                                        
                                                        @if ($country)
                                                            {{ $country->title }}
                                                        @else
                                                            Country not found
                                                        @endif
                                                    @else
                                                        No country selected
                                                    @endif
                                                </td>
                                                <td>{{ $applications->speed }}</td>
                                                <td>{{ $applications->deliveryMethod }}</td>
                                                <td>{{ $applications->total_payment }}</td>
                                                <td>{{ $applications->created_at }}</td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="11">No data available</td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>

                            </form>

                            <script>
                                $(document).ready(function() {
                                    // Destroy and Initialize Expedited Table
                                    if ($.fn.DataTable.isDataTable('#tablelist')) {
                                        $('#tablelist').DataTable().destroy();
                                    }
                                    $('#tablelist').DataTable();
                                });

                                // delete check box
                                /*document.addEventListener("DOMContentLoaded", function () {
                                    const deleteForm = document.getElementById('deleteFraisForm');
                                    const userCheckboxes = document.querySelectorAll('.userCheckbox');
                                    const selectAllCheckbox = document.getElementById('selectAll');

                                    // Gérer la sélection/dé-sélection de toutes les cases
                                    selectAllCheckbox.addEventListener('change', function () {
                                        userCheckboxes.forEach(checkbox => checkbox.checked = this.checked);
                                    });

                                    // Intercepter la soumission du formulaire
                                    deleteForm.addEventListener('submit', function (e) {
                                        const isAnyCheckboxChecked = Array.from(userCheckboxes).some(checkbox => checkbox.checked);
                                        const errorMessage = document.getElementById('error-message');

                                        if (!isAnyCheckboxChecked) {
                                            e.preventDefault();
                                            errorMessage.textContent = 'Please select at least one fee to delete.';
                                            errorMessage.classList.remove('d-none'); // Afficher le message
                                        }
                                    });
                                });*/

                                // search
                                document.addEventListener("DOMContentLoaded", function () {
                                    const countrySelect = document.getElementById("country");
                                    const embassySelect = document.getElementById("embassy");
                                    const serviceSelect = document.getElementById("service");
                                    const subServiceSelect = document.getElementById("sub_service");

                                    // Lorsque le pays est sélectionné, charger les ambassades associées
                                    countrySelect.addEventListener("change", function () {
                                        const countryId = countrySelect.value;
                                        embassySelect.innerHTML = '<option value="">@lang("messages.select_embassy")</option>';  // Réinitialiser la liste des ambassades

                                        if (countryId) {
                                            fetch(`/admin/get-embassies/${countryId}`)
                                            .then(response => response.json())
                                            .then(data => {
                                                data.forEach(embassy => {
                                                    embassySelect.innerHTML += `<option value="${embassy.id}">${embassy.name}</option>`;
                                                });
                                            })
                                            .catch(error => console.error('Error fetching embassies:', error));
                                        }
                                    });

                                    // Lorsque le service est sélectionné, charger les sous-services associés
                                    // serviceSelect.addEventListener("change", function () {
                                    //     const serviceId = serviceSelect.value;
                                    //     subServiceSelect.innerHTML = '<option value="">@lang("messages.subservice")</option>';  // Réinitialiser la liste des sous-services

                                    //     if (serviceId) {
                                    //         fetch(`/admin/get-subservices/${serviceId}`)
                                    //         .then(response => response.json())
                                    //         .then(data => {
                                    //             data.forEach(subService => {
                                    //                 subServiceSelect.innerHTML += `<option value="${subService.id}">${subService.name}</option>`;
                                    //             });
                                    //         })
                                    //         .catch(error => console.error('Error fetching subservices:', error));
                                    //     }
                                    // });
                                });

                                // document.addEventListener('DOMContentLoaded', function () {
                                //     const modal = document.getElementById('platformModal');
                                //     const modalContent = document.getElementById('modalContent');

                                //     modal.addEventListener('show.bs.modal', function (event) {
                                //         // URL de l'action pour charger le formulaire
                                //         const url = "{{ url('admin/platform/add') }}";

                                //         // Afficher un indicateur de chargement
                                //         modalContent.innerHTML = '<p class="text-center">Loading...</p>';

                                //         // Charger le contenu avec Fetch API
                                //         fetch(url)
                                //             .then(response => response.text())
                                //             .then(html => {
                                //                 modalContent.innerHTML = html; // Insérer le contenu dans la modal
                                //             })
                                //             .catch(error => {
                                //                 modalContent.innerHTML = '<p class="text-center text-danger">Error loading content.</p>';
                                //                 console.error('Error loading modal content:', error);
                                //             });
                                //     });
                                // });
                            </script>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection