@extends('layouts.master')

@section('title', 'Express54')

@section('content')

    <div class="banner">
        @if ($selectedCountry)
            <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;">
        @endif
    </div>

    {{-- <div class="row banner">
        <div class="custom_section  {{ Auth::user()->role }}">
            <div class="col-12">
                <div class="homesec"> --}}
    {{-- <img src="{{ asset('/assets/image/homelogo.png') }}" class="homelogo" alt="Icon">
                    @if (Auth::user()->embassies == 20)
                        <h3>@lang('messages.ambassade')</h3>
                    @else
                        <h3>@lang('messages.bannertext')</h3>
                    @endif --}}
    {{-- </div>
            </div>
        </div>
    </div> --}}

    <div class="admin_bg custom-supervisor-applist" style="min-height: calc(100vh - 110px)"><br><br>
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <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>

                    <a href="{{ url('supervisor/selectservice') . '?id=' . $id }}" 
                        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>

                    <!-- <a href="{{ url('archived-Application') }}" style="float:right"
                        class="btn btn-md btn-secondary rounded-pill px-3">
                        @lang('messages.archive_appications')<i class="fa-solid fa-arrow-right"></i>
                    </a> -->

                    <h3 class="custom-heading text-center text-danger">Bourses en attente</h5>

                        <div class="card shadow-sm p-2 mb-5 bg-white rounded">
                            <div class="card-body hometabel">

                                <table class="table" id="expeditedtable">

                                    <div class="row mb-3">
                                        <!-- Champ Employé -->
                                        <div class="col-md-6">
                                            <label for="statusFilterField1" class="form-label">Filtrer par statut (Employé) :</label>
                                            <select id="statusFilterField1" class="form-select">
                                                <option value="">Tous</option>
                                                <option value="Approuvé">Approuvé</option>
                                                <option value="En attente">En attente</option>
                                            </select>
                                        </div>

                                        <!-- Champ Ambassadeur -->
                                        <div class="col-md-6">
                                            <label for="statusFilterField2" class="form-label">Filtrer par statut (Ambassadeur) :</label>
                                            <select id="statusFilterField2" class="form-select">
                                                <option value="">Tous</option>
                                                <option value="Approuvé">Approuvé</option>
                                                <option value="En attente" selected>En attente</option>
                                            </select>
                                        </div>
                                    </div>


                                    <thead class="table_color">
                                        <tr>
                                            <th>#</th>
                                            <th>@lang('messages.full_name')</th>
                                            <th>@lang('messages.email')</th>
                                            <th>@lang('messages.phone')</th>
                                            <th>@lang('messages.action')</th>
                                            <th>@lang('messages.status')</th>
                                            <th>Cas</th>
                                            <th>Chef de service</th>
                                            <th>Montant</th>
                                            <th>Décision</th>
                                            <!-- <th>Paiement</th> -->
                                            <th>Université</th>
                                            <th>Année étude</th>
                                            <th>@lang('messages.signature_request')</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                                                                @foreach ($acceptedApplications as $application)
                                            @if (($application->status == 'Approved') || $application->status == 'Return')
                                                <tr>
                                                    <td>{{ $i }}</td>
                                                    <td>{{ strtoupper($application->fname) }}</td>
                                                    <td>{{ $application->email }}</td>
                                                    <td>{{ $application->telephone }}</td>
                                                    <td>
                                                        <a href="{{ route('applicationDetails', ['id' => $application->id]) }}"
                                                            class="btn btn-sm btn" title="View Application">
                                                            <i class="fa-regular fa-eye iconcolor"></i></a>
                                                    </td>
                                                    <td>
                                                                                                                {{ $statusLabels[$application->status] ?? $application->status }}
                                                    </td>
                                                    <td>{{ $application->employe_name }}</td>
                                                    <td>
                                                                                                                {{ $supervisorLabels[$application->supervisor_approval] ?? $application->supervisor_approval }}
                                                    </td>
                                                    <td>{{ number_format($application->total_amount ?? 0, 0, ',', ' ') }}</td>
                                                    <td>{{ $application->num_decision }}</td>
                                                    <!-- <td>
                                                        @if ($application->status === 'Approved' && $application->supervisor_approval === 'Approved')
                                                            <a href="{{ route('supervisor.userPayment.info', ['id' => $application->id]) }}" class="btn btn-md btn">
                                                                <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"></i></a>
                                                        @endif
                                                    </td> -->
                                                    <td>{{ $application->university }}</td>
                                                    <td>{{ $application->annee_detude }}</td>
                                                    <td>
                                                        @if ($application->signature_request === 'Request')
                                                            <a style="text-decoration:none; font-weight:bold"
                                                                href="{{ route('signature', ['id' => $application->id]) }}">Sign
                                                                Application</a>
                                                        @elseif ($application->signature_request === 'Signed')
                                                            Signé
                                                        @else
                                                            NA
                                                        @endif
                                                    </td>
                                                </tr>
                                                                                            @endif
                                        @endforeach
                                        @if ($i == 1)
                                            <tr>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <th class="text-center">@lang('messages.noapplication')</th>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                            </tr>
                                        @endif
                                    </tbody>
                                </table>

                                <script>
                                    $(document).ready(function() {
                                        // Initialiser DataTable
                                        var table = $('#expeditedtable').DataTable({
                                            language: {
                                                url: "https://cdn.datatables.net/plug-ins/1.13.6/i18n/fr-FR.json"
                                            },
                                            initComplete: function() {
                                                // Appliquer un filtre par défaut sur la colonne 2 pour "Attente" (Statut Champ 1)
                                                //table.column(5).search('^En attente$', true, false).draw();

                                                // Appliquer un filtre par défaut sur la colonne 3 pour "Attente" (Statut Champ 2)
                                                table.column(7).search('^En attente$', true, false).draw();
                                            }
                                        });

                                        // Filtrage pour le Champ 1 (Employé) - colonne 5
                                        $('#statusFilterField1').on('change', function() {
                                            var selectedValue = $(this).val(); // Obtenir la valeur sélectionnée
                                            if (selectedValue) {
                                                // Filtrer les lignes en fonction de la valeur sélectionnée dans la colonne 5 (Statut Employé)
                                                table.column(5).search('^' + selectedValue + '$', true, false).draw();
                                            } else {
                                                // Réinitialiser le filtre pour afficher toutes les lignes
                                                table.column(5).search('').draw();
                                            }
                                        });

                                        // Filtrage pour le Champ 2 (Ambassadeur) - colonne 6
                                        $('#statusFilterField2').on('change', function() {
                                            var selectedValue = $(this).val(); // Obtenir la valeur sélectionnée
                                            if (selectedValue) {
                                                // Filtrer les lignes en fonction de la valeur sélectionnée dans la colonne 7 (Statut Ambassadeur)
                                                table.column(7).search('^' + selectedValue + '$', true, false).draw();
                                            } else {
                                                // Réinitialiser le filtre pour afficher toutes les lignes
                                                table.column(7).search('').draw();
                                            }
                                        });
                                    });

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

@endsection