@extends('layouts.master')

@section('title', 'Express54')

@section('content')
    @php
        //$id = request()->query('id');
        $child = request()->query('childServiceId');

        //echo $id."::".$child;
        $Titres = [
            1 => "MESRS",
            2 => "METFPA"
        ];

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

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

    <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 class="custom_section {{ Auth::user()->role }}">
            <div class="homesec">
                @if (Auth::user()->country == 17)
                    <div class="userhomesec text-center">
                    <img src="{{ asset('/assets/image/homelogo.png') }}" class="homelogo" alt="Icon">
                </div> 
                @elseif (Auth::user()->country == 19)
                    <div class="userhomesec text-center">
                        <img src="{{ asset('/assets/image/burkina_faso.png') }}" class="homelogo" alt="Icon">
                    </div>
                @elseif (Auth::user()->country == 16)
                    <div class="userhomesec text-center">
                        <img src="{{ asset('/assets/image/cameroon.png') }}" class="homelogo" alt="Icon">
                    </div>
                @elseif (Auth::user()->country == 20)
                    <div class="userhomesec text-center">
                        <img src="{{ asset('/assets/image/mali.png') }}" class="homelogo" alt="Icon">
                        <h3>@lang('messages.mali_ambassade')</h3>
                    </div>
                @elseif (Auth::user()->country == 27)
                    <div class="userhomesec text-center">
                        <img src="{{ asset('/assets/image/guinea.png') }}" class="homelogo" alt="Icon">
                    </div>
                @else
                    <div class="userhomesec text-center">
                        <img src="{{ asset('/assets/image/faviconlogo.png') }}" class="homelogo" alt="Icon">
                        <h3>@lang('messages.bannertext')</h3>
                    </div>
                @endif
            </div>
        </div> --}}

    </div>

    <div class="admin_bg" 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="{{ route('selectedService', ['id' => $id, '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>

                    <!-- <a href="{{ url('employee/archived/' . $service_id) }}" 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">{{$soustitre}} approuvé(e)s - {{$titre}}</h5>
                    <div class="card shadow-sm p-3 mb-5 bg-white rounded">
                        <div class="card-body hometabel">

                            <!-- @if ($id == 1 && Auth::user()->country == 1)
                                <form action="{{ route('selectedVisa') }}" method="POST" target="_blank">
                                    @csrf
                                    <input type="hidden" name="selectedvisa" id="selectedvisa">
                                    <button type="submit" class="btn btn-sm btn-primary">Download Visa PDF</button>
                                </form>
                            @endif -->

                            <!-- @if ($id == 1 && Auth::user()->country == 1)
                                <form action="{{ route('selectedVisa') }}" method="POST" target="_blank">
                                    @csrf
                                    <input type="hidden" name="selectedvisa" id="selectedvisa">
                                    <button type="submit" class="btn btn-sm btn-primary">Download Visa Card</button>
                                </form>
                            @endif -->

                            

                            <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é" selected>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 (Chef de service) :</label>
                                        <select id="statusFilterField2" class="form-select">
                                            <option value="">Tous</option>
                                            <option value="Approuvé">Approuvé</option>
                                            <option value="En attente">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 style="width: 70px;min-width: 70px;max-width: 70px;white-space: nowrap;!important">@lang('messages.status')</th>
                                        <th>Cas</th>
                                        <th>Chef de service</th>
                                        <th>@lang('messages.action')</th>
                                        <th>Montant</th>
                                        <th>Certificat</th>
                                        <th>Université</th>
                                        <th>Année étude</th>
                                        <th>Formation</th>
                                        <th>Signature</th>
                                    </tr>
                                </thead>
                                <tbody>
                                                                        @foreach ($acceptedApplications as $application)

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

                                        @if ($application->status != 'Draft')
                                            <tr>
                                                <td>{{ $i }}</td>
                                                <td>{{ strtoupper($application->fname) }}</td>
                                                <!-- <td>{{ $application->email }}</td>
                                                <td>{{ $application->telephone }}</td> -->
                                                <td>
                                                                                                        {{ $statusLabels[$application->status] ?? $application->status }}
                                                </td>
                                                <td>{{ $application->employe_name }}</td>
                                                <td>
                                                                                                        {{ $supervisorLabels[$application->supervisor_approval] ?? $application->supervisor_approval }}
                                                </td>
                                                <td>
                                                    <a href="{{ route('employee.viewApplications', ['id' => $application->id, 'childServiceId' => $child]) }}"
                                                        class="btn btn-sm btn" title="View Application"><i class="fa-regular fa-eye iconcolor"></i>
                                                    </a>
                                                </td>
                                                <td>{{ number_format($application->total_amount, 0, ',', ' ') }}</td>

                                                <!-- label  -->
                                                <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('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>
                                                                                                        {{ $statusBourses[$application->typebourse] ?? $application->typebourse }}
                                                </td>
                                                <td>
                                                    @if ($application->status === 'Approved' && $application->supervisor_approval === 'Approved')
                                                        @if ($application->signature_request === 'Request')
                                                            <span class="fw-bold">Request Sent</span>
                                                        @elseif ($application->signature_request === 'Signed')
                                                            <span class="fw-bold text-success">Signé</span>
                                                        @else
                                                            <span class="fw-bold">En attente</span>
                                                        @endif
                                                    @endif
                                                </td>
                                            </tr>
                                                                                    @endif
                                    @endforeach

                                    @if ($i == 1)
                                        <tr>
                                            <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>
                                <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(2).search('^En attente$', true, false).draw();

                                                // Appliquer un filtre par défaut sur la colonne 2 pour "Approuvé"
                                                table.column(2).search('^Approuvé$', true, false).draw();

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

                                        // Filtrage pour le Champ 1
                                        $('#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 2 (Statut Champ 1)
                                                table.column(2).search('^' + selectedValue + '$', true, false).draw();
                                            } else {
                                                // Réinitialiser le filtre pour afficher toutes les lignes
                                                table.column(2).search('').draw();
                                            }
                                        });

                                        // Filtrage pour le Champ 2
                                        $('#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 3 (Statut Champ 2)
                                                table.column(3).search('^' + selectedValue + '$', true, false).draw();
                                            } else {
                                                // Réinitialiser le filtre pour afficher toutes les lignes
                                                table.column(3).search('').draw();
                                            }
                                        });
                                    });
                                </script>

                                @if ($id == 1 || $id == 3)
                                    <script>
                                        var checkboxes = document.getElementsByClassName('select-checkbox');
                                        var selectedCount = 0;
                                        var selectedApplications = [];

                                        // document.getElementById('select-all').addEventListener('change', function() {
                                        //     for (var i = 0; i < checkboxes.length; i++) {
                                        //         checkboxes[i].checked = this.checked;
                                        //     }
                                        //     selectedCount = this.checked ? checkboxes.length : 0;
                                        //     SelectedApplications();
                                        //     disableCheckboxes();
                                        // });

                                        for (var i = 0; i < checkboxes.length; i++) {
                                            checkboxes[i].addEventListener('change', function() {
                                                if (this.checked) {
                                                    selectedCount++;
                                                    selectedApplications.push(this.value);
                                                } else {
                                                    selectedCount--;
                                                    selectedApplications = selectedApplications.filter(app => app !== this.value);
                                                }
                                                SelectedApplications();
                                                disableCheckboxes();
                                            });
                                        }

                                        function SelectedApplications() {
                                            document.getElementById('selectedvisa').value = selectedApplications;
                                        }

                                        function disableCheckboxes() {
                                            for (var i = 0; i < checkboxes.length; i++) {
                                                checkboxes[i].disabled = selectedCount >= 8 && !checkboxes[i].checked;
                                            }
                                        }
                                    </script>
                                @endif
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <br><br>
        
    </div>
@endsection