@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

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

                        <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"></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 payé</th>
                                                        <th class="orange">Reste à payer </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-montant=""></td>
                                                        <td  class="">{{ strtoupper($application->student_name) }}</td>
                                                        <td class="">{{ $application->num_decision }}</td>
                                                        <td class="">{{ $application->num_page }}</td>
                                                        <td class="">
                                                            <input type="number" 
                                                                name="amount" 
                                                                class="form-control amount-input" 
                                                                value=""
                                                                style="width:120px" 
                                                                min="0" 
                                                                {{ $status_etat_virement == 'Signed' ? 'disabled' : '' }}>
                                                        </td>
                                                        <td class="">{{ $application->banque_name }}</td>
                                                        <td class="red">{{ $application->swift_iban_number }}</td>
                                                        <td class="red">{{ number_format(($application->montant_paye ?? 0) / 655.957, 2, ',', ' ') }} €</td>
                                                        <td class="orange">{{ number_format(($application->difference ?? 0) / 655.957, 2, ',', ' ') }} €</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>

                                        <!-- Alerte -->
                                        <div id="alertMessage" class="alert-bubble" style="display:none;">Veuillez sélectionner au moins une case ou saisir un montant.</div>

                                        <!-- Bouton de soumission -->
                                        <!-- <div class="d-flex justify-content-between mt-4">
                                            <div>
                                                <label for="amount">Montant Total €:</label>
                                                <input type="text" id="amount" name="amount" class="form-control" readonly>
                                            </div>
                                            <div>
                                                <button type="button" id="submitBtn" class="btn btn-primary" disabled>Soumettre</button>
                                            </div>
                                        </div> -->

                                        <div class="d-flex justify-content-between mt-4 gap-3">
                                            <div>
                                                <label for="amount">Montant Total €:</label>
                                                <input type="text" id="amount" name="amount" class="form-control" readonly>
                                            </div>

                                            <div>
                                                <label for="typepaiement">Type de paiement :</label>
                                                <select id="typepaiement" name="typepaiement" class="form-control">
                                                    <option value="bourse">Bourse</option>
                                                    <option value="inscription_scolaire">Inscription scolaire</option>
                                                    <option value="assurance_maladie">Assurance maladie</option>
                                                </select>
                                            </div>

                                            <div class="align-self-end">
                                                <button type="button" id="submitBtn" class="btn btn-primary" disabled>Soumettre</button>
                                            </div>
                                        </div>

                                        <style>
                                            .alert-bubble {
                                                position: fixed;
                                                top: 20px;
                                                left: 50%;
                                                transform: translateX(-50%);
                                                background-color: #f8d7da;
                                                color: #721c24;
                                                border: 1px solid #f5c6cb;
                                                padding: 15px;
                                                border-radius: 5px;
                                                font-size: 16px;
                                                display: none;
                                            }
                                        </style>
                                    </div>									  
                                </div>									  
                            </div>
                        </div>
                        </section>

                            <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>
                                document.addEventListener('DOMContentLoaded', function () {
                                    const checkboxes = document.querySelectorAll('.selectRow');
                                    const amountInputs = document.querySelectorAll('.amount-input');
                                    const selectAll = document.getElementById('selectAll');
                                    const submitBtn = document.getElementById('submitBtn');
                                    const amountInput = document.getElementById('amount');
                                    const typepaiementInput = document.getElementById('typepaiement');
                                    const alertMessage = document.getElementById('alertMessage');
                                    const status_etat = "{{ $status_etat_virement }}";
                                    const MAX_SELECTION = 25; // Limite à 25

                                    if (status_etat === "Signed") {
                                        amountInputs.forEach(input => {
                                            if (input.value.trim() !== "") {
                                                input.disabled = true;
                                            }
                                        });

                                        checkboxes.forEach(checkbox => {
                                            checkbox.disabled = true;
                                        });

                                        if (submitBtn) {
                                            submitBtn.style.display = "none";
                                        }
                                    }

                                    function countChecked() {
                                        return Array.from(checkboxes).filter(chk => chk.checked).length;
                                    }

                                    function updateTotalAndButtonState() {
                                        let totalAmount = 0;
                                        let hasValidSelection = false;

                                        checkboxes.forEach((checkbox, index) => {
                                            let montant = amountInputs[index].value.replace(/\s/g, '').replace(',', '.');
                                            montant = parseFloat(montant) || 0;
                                            const isChecked = checkbox.checked;

                                            if (isChecked || montant > 0) {
                                                hasValidSelection = true;
                                            }

                                            if (isChecked) {
                                                totalAmount += parseFloat(checkbox.getAttribute('data-montant')) || 0;
                                            }

                                            if (montant > 0) {
                                                totalAmount += montant;
                                            }
                                        });

                                        amountInput.value = totalAmount.toLocaleString('fr-FR', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
                                        submitBtn.disabled = !hasValidSelection;
                                    }

                                    // Gestion limitation à 25 checkbox
                                    function handleCheckboxChange(checkbox) {
                                        const checkedCount = countChecked();

                                        if (checkedCount > MAX_SELECTION) {
                                            alert(`Vous ne pouvez sélectionner que ${MAX_SELECTION} lignes maximum.`);
                                            checkbox.checked = false; // Décocher automatiquement
                                        }

                                        updateTotalAndButtonState();
                                    }

                                    // Sélection/Déselection de toutes les lignes
                                    selectAll.addEventListener('change', function () {
                                        const toCheck = this.checked;
                                        let count = 0;

                                        checkboxes.forEach(checkbox => {
                                            if (toCheck && count < MAX_SELECTION) {
                                                checkbox.checked = true;
                                                count++;
                                            } else {
                                                checkbox.checked = false;
                                            }
                                        });

                                        if (toCheck && count === MAX_SELECTION) {
                                            alert(`Seulement ${MAX_SELECTION} lignes ont été sélectionnées en raison de la limite maximale.`);
                                        }

                                        updateTotalAndButtonState();
                                    });

                                    // Événements checkbox individuels
                                    checkboxes.forEach(checkbox => {
                                        checkbox.addEventListener('change', function () {
                                            handleCheckboxChange(this);
                                        });
                                    });

                                    // Événements sur les champs de montant
                                    amountInputs.forEach(input => {
                                        input.addEventListener('input', updateTotalAndButtonState);
                                    });

                                    // Vérification avant soumission
                                    submitBtn.addEventListener('click', function (event) {
                                        let selectedApplications = [];
                                        let hasValidSelection = false;

                                        checkboxes.forEach((checkbox, index) => {
                                            const montant = parseFloat(amountInputs[index].value) || 0;
                                            const isChecked = checkbox.checked;
                                            let row = checkbox.closest('tr');

                                            const differenceFCFA = parseFloat(row.getAttribute('data-difference')) || 0;
                                            const differenceEUR = differenceFCFA / 655.957;

                                            if (isChecked && montant > 0) {
                                                if (montant > differenceEUR) {
                                                    alert(`Le montant saisi (${montant.toFixed(2)} €) dépasse le montant restant (${differenceEUR.toFixed(2)} €) pour cette ligne.`);
                                                } else {
                                                    selectedApplications.push({
                                                        applicationId: row.getAttribute('data-application-id'),
                                                        montant: montant,
                                                        id: row.getAttribute('data-service-id'),
                                                        numero_ordre: row.getAttribute('data-numero-ordre'),
                                                        studentID: row.getAttribute('data-student-id'),
                                                        applicationSelected: row.getAttribute('data-application-selected')
                                                    });
                                                    hasValidSelection = true;
                                                }
                                            }
                                        });

                                        if (!hasValidSelection) {
                                            event.preventDefault();
                                            alertMessage.style.display = 'block';
                                            setTimeout(() => {
                                                alertMessage.style.opacity = '0';
                                                setTimeout(() => alertMessage.style.display = 'none', 500);
                                            }, 4000);
                                            return;
                                        }

                                        fetch('{{ route("submitStudentsPaye") }}', {
                                            method: 'POST',
                                            headers: {
                                                'Content-Type': 'application/json',
                                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                                            },
                                            body: JSON.stringify({
                                                selectedApplications: selectedApplications,
                                                montanttotal: amountInput.value,
                                                typebourse: typepaiementInput.value,
                                                id: {{ $id }},
                                                numero_ordre: {{ $numero_ordre }}
                                            })
                                        })
                                        .then(response => response.json())
                                        .then(data => {
                                            if (data.success) {
                                                document.querySelectorAll('.selectRow').forEach(checkbox => checkbox.checked = false);
                                                document.querySelectorAll('.amount-input').forEach(input => input.value = '');
                                                selectedApplications = [];

                                                if (data.redirectUrl) {
                                                    window.location.href = data.redirectUrl;
                                                } else {
                                                    alert("Soumission réussie !");
                                                }
                                            } else {
                                                alert(data.message || "Une erreur est survenue.");
                                            }
                                        })
                                        .catch(error => {
                                            console.error('Erreur:', error);
                                        });
                                    });

                                    // Init
                                    updateTotalAndButtonState();
                                });
                                </script>

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