@extends('layouts.master')

@section('title', 'Express54')

@section('content')

    <link rel="stylesheet" href="{{ asset('assets/css/style2.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/dataTables.css') }}">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous" />
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap" rel="stylesheet">

    <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('supervisor.listEtatVirement', ['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('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">Etudiants Boursiers - Ordre de Paiement N°{{ $numero_ordre }}</h5>
                    <div class="card shadow-sm p-3 mb-5 bg-white rounded">
                        <div class="card-body hometabel">

                            <form id="paymentForm">
                                <section class="secure-datatable">
                                    <div class="container">
                                        <div class="row align-items-center">
                                            <div class="col col-12 col-md-12 col-sm-12 secure-datatable-col">
                                                <div class="table-parent">
                                                    <table id="example" class="display" cellspacing="0" width="100%">
                                                        <thead>
                                                            <tr>
                                                                <th><input type="checkbox" id="selectAll" checked></th>
                                                                <th class="orange">Nom Complet</th>
                                                                <th class="orange">Numéro de décision</th>
                                                                <th class="orange">Page</th>
                                                                <th class="red">Montant à payer</th>
                                                                <th class="orange">Banque</th>
                                                                <th class="orange">RIB</th>
                                                                <th class="orange">Montant total</th>
                                                            </tr>
                                                    </thead>
                                                    <tbody>
                                                        @foreach ($acceptedApplications as $application)
                                                            <tr  
                                                                data-application-id="{{ $id }}"
                                                                data-application-selected="{{ $application->applicationID }}" 
                                                                data-student-id="{{ $application->studentID }}"
                                                                data-service-id="{{ $id }}" 
                                                                data-numero-ordre="{{ $numero_ordre }}"
                                                                data-difference="{{$application->difference}}"
                                                            >
                                                                <td>
                                                                    <input type="checkbox" class="selectRow"
                                                                        data-student-name="{{ strtoupper($application->student_name) }}"
                                                                        data-amount="{{ $application->payment_data->first_amount }}"
                                                                        data-bank="{{ $application->banque_name }}"
                                                                        data-account="{{ $application->bank_account_number }}"
                                                                        data-numero-ordre="{{ $numero_ordre }}">
                                                                </td>
                                                                <td  class="">{{ strtoupper($application->student_name) }}</td>
                                                                <td class="">{{ $application->num_decision }}</td>
                                                                <td class="">{{ $application->num_page }}</td>
                                                                <td class="green">
                                                                    @if(isset($application->payment_data->first_amount))
                                                                                                                                                {{ number_format($truncatedValue, 2, '.', '') }}
                                                                    @endif
                                                                </td>
                                                                <td class="">{{ $application->banque_name }}</td>
                                                                <td class="red">{{ $application->swift_iban_number }}</td>
                                                                <td class="green">
                                                                    {{ isset($application->payment_data) && is_numeric($application->montant_bourse) 
                                                                    ? number_format((float) $application->montant_bourse / 655.957, 2, ',', ' ') . ' €' 
                                                                    : '' }}
                                                                </td>
                                                            </tr>
                                                        @endforeach
                                                    </tbody>
                                                </table>
                                            </div>									  
                                        </div>									  
                                    </div>
                                </div>

                                <!-- Champ caché pour numero_ordre -->
                                <input type="hidden" id="numero_ordre" name="numero_ordre" value="{{ $numero_ordre }}">
                                <!-- Bouton de soumission -->
                                @php
                                    $disabled = isset($application) && $application->supervisor_approval == 'Approved' && $application->signature_request == 'Signed';
                                @endphp

                                <div class="text-center mt-4">
                                    <button type="button" id="submitBtn" class="btn btn-primary" {{ $disabled ? 'disabled' : '' }}>
                                        Valider et Signer
                                    </button>
                                </div>

                                </section>
                            </form>

                            <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
                            <script src="{{ asset('assets/js/dataTables.js') }}"></script>
                            <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
                            <script>
                                jQuery(document).ready(function() {
                                    // Setup - add a text input to each footer cell
                                    $('#example tfoot th').each(function () {
                                        var title = jQuery('#example thead th').eq(jQuery(this).index()).text();
                                        jQuery(this).html('<input type="text" placeholder="Rechercher ' + title + '" />');
                                    });

                                    // DataTable avec options personnalisées
                                    var table = $('#example').DataTable({
                                        pageLength: 25, // Afficher 25 lignes par défaut
                                        language: {
                                            url: "https://cdn.datatables.net/plug-ins/1.13.6/i18n/fr-FR.json" // Chemin vers le fichier de langue française
                                        }
                                    });

                                    // Apply the filter
                                    $("#example tfoot input").on('keyup change', function () {
                                        table
                                            .column(jQuery(this).parent().index() + ':visible')
                                            .search(this.value)
                                            .draw();
                                    });
                                });

                            </script>

                            <script>

                                // Sélectionner/désélectionner toutes les lignes
                                document.addEventListener("DOMContentLoaded", function () {
                                    let selectAll = document.getElementById("selectAll");
                                    let checkboxes = document.querySelectorAll(".selectRow");

                                    // Cocher toutes les cases au chargement de la page
                                    checkboxes.forEach(checkbox => {
                                        checkbox.checked = true;
                                    });

                                    // Gérer le clic sur "Tout sélectionner"
                                    selectAll.addEventListener("change", function () {
                                        checkboxes.forEach(checkbox => {
                                            checkbox.checked = this.checked;
                                        });
                                    });
                                });

                                // Envoi des données sélectionnées au serveur
                                document.getElementById("submitBtn").addEventListener("click", function () {
                                    let selectedApplications = [];
                                    let checkboxes = document.querySelectorAll(".selectRow:checked"); // Ne prendre que ceux cochés

                                    checkboxes.forEach((checkbox) => {
                                        selectedApplications.push({
                                            student_name: checkbox.getAttribute("data-student-name"),
                                            amount: checkbox.getAttribute("data-amount"),
                                            bank: checkbox.getAttribute("data-bank"),
                                            account: checkbox.getAttribute("data-account"),
                                            numero_ordre: checkbox.closest("tr").getAttribute("data-numero-ordre"), // Correction ici
                                            service_id: checkbox.closest("tr").getAttribute("data-service-id"),
                                            application_selected: checkbox.closest("tr").getAttribute("data-application-selected"),
                                        });
                                    });

                                    if (selectedApplications.length === 0) {
                                        alert("Veuillez sélectionner au moins une ligne.");
                                        return;
                                    }

                                    fetch("{{ route('updatePaymentStatus') }}", {
                                        method: "POST",
                                        headers: {
                                            "Content-Type": "application/json",
                                            "X-CSRF-TOKEN": "{{ csrf_token() }}"
                                        },
                                        body: JSON.stringify({ applications: selectedApplications })
                                    })
                                    .then(response => response.json())
                                    .then(data => {
                                        if (data.success) {
                                            // Rediriger avec les données passées dans l'URL
                                            window.location.href = data.redirect;
                                        } else {
                                            alert("Erreur : " + data.message);
                                        }
                                    })
                                    .catch(error => console.error("Erreur :", error));
                                });

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