@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('payor.ListEtatVirementPayor') }}" 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>

                    <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">

                        <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="green sorting">Date</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">Documents</th>
                                                        <th class="orange">Montant total</th>
                                                    </tr>
                                            </thead>
                                            <!-- <tfoot>
                                            <tr>
                                                <th>Nom Complet</th>
                                                <th>Numero de decision</th>
                                                <th>Page</th>
                                                <th>Montant a payer</th>
                                                <th>Banque</th>
                                                <th>RIB</th>
                                                <th>Montant paye</th>
                                                <th>Reste a payer </th>
                                                <th>Doc 1</th>
                                                <th>Doc 2</th>
                                                <th>Doc 3</th>
                                                <th>Paiement 1</th>
                                                <th>Date</th>
                                                <th>Paiement 2</th>
                                                <th>Date</th>
                                                <th>Paiement 3</th>
                                                <th>Date</th>
                                                <th>Paiement 4</th>
                                                <th>Date</th>
                                                <th>Montant total</th>
                                            </tr>
                                            </tfoot> -->
                                            <tbody>
                                                @foreach ($acceptedApplications as $application)
                                                    <tr  
                                                        data-application-selected="{{ $application->applicationID }}" 
                                                        data-student-id="{{ $application->studentID }}"
                                                        data-numero-ordre="{{ $numero_ordre }}"
                                                        data-difference="{{$application->difference}}"
                                                        data-service-selected="{{ $application->service_selected }}" 
                                                    >
                                                        <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>
                                                        @if (!empty($application->payment_data->first_amount) && empty($application->payment_data->first_payment))
                                                            <td>
                                                                <input type="number" 
                                                                    name="amount" 
                                                                    class="form-control amount-input" 
                                                                    value="{{ floor(($application->payment_data->first_amount / 655.957) * 100) / 100 }}" 
                                                                    style="width:120px" 
                                                                    min="0"
                                                                    {{ ($status_payor == 'Signed') ? 'disabled' : '' }}
                                                                >
                                                            </td>
                                                            <td>
                                                                <input type="date" 
                                                                    name="first_payment" 
                                                                    class="form-control" 
                                                                    value="{{ old('first_payment') }}"
                                                                    {{ ($status_payor == 'Signed') ? 'disabled' : '' }}
                                                                >
                                                            </td>

                                                        @elseif (!empty($application->payment_data->second_amount) && empty($application->payment_data->second_payment))
                                                            <td>
                                                                <input type="number" 
                                                                    name="amount" 
                                                                    class="form-control amount-input" 
                                                                    value="{{ floor(($application->payment_data->second_amount / 655.957) * 100) / 100 }}" 
                                                                    style="width:120px" 
                                                                    min="0"
                                                                    {{ ($status_payor == 'Signed') ? 'disabled' : '' }}
                                                                >
                                                            </td>
                                                            <td>
                                                                <input type="date" 
                                                                    name="first_payment" 
                                                                    class="form-control" 
                                                                    value="{{ old('second_payment') }}"
                                                                    {{ ($status_payor == 'Signed') ? 'disabled' : '' }}
                                                                >
                                                            </td>

                                                        @elseif (!empty($application->payment_data->third_amount) && empty($application->payment_data->third_payment))
                                                            <td>
                                                                <input type="number" 
                                                                    name="amount" 
                                                                    class="form-control amount-input" 
                                                                    value="{{ floor(($application->payment_data->third_amount / 655.957) * 100) / 100 }}"
                                                                    style="width:120px" 
                                                                    min="0"
                                                                    {{ ($status_payor == 'Signed') ? 'disabled' : '' }}
                                                                >
                                                            </td>
                                                            <td>
                                                                <input type="date" 
                                                                    name="first_payment" 
                                                                    class="form-control" 
                                                                    value="{{ old('third_payment') }}"
                                                                    {{ ($status_payor == 'Signed') ? 'disabled' : '' }}
                                                                >
                                                            </td>

                                                        @elseif (!empty($application->payment_data->fourth_amount) && empty($application->payment_data->fourth_payment))
                                                            <td>
                                                                <input type="number" 
                                                                    name="amount" 
                                                                    class="form-control amount-input" 
                                                                    value="{{ floor(($application->payment_data->fourth_amount / 655.957) * 100) / 100 }}"
                                                                    style="width:120px" 
                                                                    min="0"
                                                                    {{ ($status_payor == 'Signed') ? 'disabled' : '' }}
                                                                >
                                                            </td>
                                                            <td>
                                                                <input type="date" 
                                                                    name="first_payment" 
                                                                    class="form-control" 
                                                                    value="{{ old('fourth_payment') }}"
                                                                    {{ ($status_payor == 'Signed') ? 'disabled' : '' }}
                                                                >
                                                            </td>
                                                        @else
                                                            <td></td>
                                                        @endif

                                                        <!-- <td>
                                                            <input type="date" 
                                                            name="first_payment" 
                                                            class="form-control" 
                                                            value="{{$application->payment_data->first_payment}}" 
                                                            {{ (isset($application->payment_data->first_payment) && $status_payor == '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="">
                                                            <a href="{{ asset('storage/uploads/' . $application->certificat_scolarite) }}" target="_blank">
                                                                <img src="{{ asset('assets/image/doc-sign.png') }}" alt="doc 1" / title="doc 1">
                                                            </a>
                                                            <a href="{{ asset('storage/uploads/' . $application->copy_of_password_cni) }}" target="_blank">
                                                                <img src="{{ asset('assets/image/doc-sign.png') }}" alt="doc 2" / title="doc 2" />
                                                            </a>
                                                            <a href="{{ asset('storage/uploads/' . $application->copy_rib) }}" target="_blank">
                                                                <img src="{{ asset('assets/image/doc-sign.png') }}"  alt="doc 3" / title="doc 3" />
                                                            </a>
                                                        </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>

                                        <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 alertMessage = document.getElementById('alertMessage');
                                    const status_etat = "{{ $status_etat_virement }}";
                                    const status_payor = "{{ $status_payor }}";

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

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

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

                                    // Sélectionne tous les inputs de type date
                                    const dateInputs = document.querySelectorAll('input[type="date"][name="first_payment"]');

                                    dateInputs.forEach(input => {
                                        input.addEventListener('change', function () {
                                            const selectedDate = this.value; // Récupère la date choisie

                                            // Applique cette date à tous les autres inputs
                                            dateInputs.forEach(otherInput => {
                                                otherInput.value = selectedDate;
                                            });
                                        });
                                    });

                                    function updateTotalAndButtonState() {
                                        let totalAmount = 0;
                                        let hasValidSelection = false; // Vérifie si au moins une case est cochée ou un montant est saisi

                                        checkboxes.forEach((checkbox, index) => {
                                            let montant = amountInputs[index].value.replace(/\s/g, '').replace(',', '.'); // Nettoyage de l'entrée utilisateur
                                            montant = parseFloat(montant) || 0; // Conversion en nombre

                                            const isChecked = checkbox.checked;

                                            if (isChecked || montant > 0) {
                                                hasValidSelection = true; // Condition validée si case cochée ou montant saisi
                                            }

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

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

                                        // Met à jour l'affichage du montant total avec 2 décimales et le symbole €
                                        amountInput.value = totalAmount.toLocaleString('fr-FR', { minimumFractionDigits: 2, maximumFractionDigits: 2 });

                                        // Désactiver le bouton si aucune sélection et aucun montant saisi
                                        submitBtn.disabled = !hasValidSelection;
                                    }


                                    // Événements sur les cases à cocher
                                    checkboxes.forEach((checkbox, index) => {
                                        checkbox.addEventListener('change', updateTotalAndButtonState);
                                    });

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

                                    dateInputs.forEach(dateInput => {
                                        dateInput.addEventListener('change', function () {
                                            const selectedDate = this.value; 
                                            const row = this.closest('tr'); 
                                            const checkbox = row.querySelector('.selectRow');

                                            if (checkbox) {
                                                checkbox.checked = true; 
                                                updateTotalAndButtonState();
                                            }
                                        });
                                    });

                                    // Sélectionner/Déselectionner tout
                                    selectAll.addEventListener('change', function () {
                                        checkboxes.forEach(checkbox => {
                                            checkbox.checked = this.checked;
                                        });
                                        updateTotalAndButtonState();
                                    });

                                    // Vérification avant soumission
                                    submitBtn.addEventListener('click', function (event) {
                                        let selectedApplications = [];
                                        let hasValidSelection = false; // Défini à false par défaut
                                        let hasDateError = false; // Vérifie si une date manque

                                        checkboxes.forEach((checkbox, index) => {
                                            const montant = parseFloat(amountInputs[index].value) || 0; // Montant saisi (en EUR)
                                            const isChecked = checkbox.checked;
                                            let row = checkbox.closest('tr'); // Récupère la ligne parent <tr>
                                            const selectedDate = row.querySelector('input[type="date"][name="first_payment"]').value;
                                            const differenceFCFA = parseFloat(row.getAttribute('data-difference')) || 0; // Montant restant (en FCFA)
                                            const differenceEUR = differenceFCFA / 655.957; // Conversion FCFA → EUR

                                            if (isChecked && montant > 0) {

                                                if (!selectedDate) {
                                                    hasDateError = true;
                                                    row.querySelector('input[type="date"][name="first_payment"]').classList.add('border', 'border-danger'); // Ajoute un style d'erreur
                                                } else {
                                                    row.querySelector('input[type="date"][name="first_payment"]').classList.remove('border', 'border-danger');
                                                }

                                                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, // Montant toujours en EUR
                                                        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'),
                                                        serviceSelected: row.getAttribute('data-service-selected'),
                                                        datePaiement: selectedDate
                                                    });
                                                    hasValidSelection = true; // Condition remplie au moins une fois
                                                }
                                            }
                                        });

                                        //console.log("Selected Applications:", selectedApplications);
                                        //console.log("hasValidSelection:", hasValidSelection);

                                        if (hasDateError) {
                                            alert("Veuillez sélectionner une date pour chaque ligne sélectionnée.");
                                            event.preventDefault();
                                            return;
                                        }

                                        if (!hasValidSelection) {
                                            //alert("Veuillez sélectionner au moins une ligne ou saisir un montant.");
                                            event.preventDefault(); // Empêcher la soumission
                                            alertMessage.style.display = 'block';

                                            setTimeout(() => {
                                                alertMessage.style.opacity = '0';
                                                setTimeout(() => alertMessage.style.display = 'none', 500);
                                            }, 4000);

                                            return;
                                        }

                                        fetch('{{ route("payor.submitPaiements") }}', {
                                            method: 'POST',
                                            headers: {
                                                'Content-Type': 'application/json',
                                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                                            },
                                            body: JSON.stringify({
                                                selectedApplications: selectedApplications,
                                                montanttotal: amountInput.value, // Assurez-vous que le montant total est envoyé ici
                                                numero_ordre: {{ $numero_ordre }}
                                            })
                                        })
                                        .then(response => response.json())
                                        .then(data => {
                                            //console.log(data);
                                            
                                            if (data.success) {
                                                // Réinitialiser les cases cochées
                                                document.querySelectorAll('.selectRow').forEach(checkbox => {
                                                    checkbox.checked = false;
                                                });

                                                // Réinitialiser les champs de saisie des montants
                                                document.querySelectorAll('.amount-input').forEach(input => {
                                                    input.value = '';
                                                });

                                                document.querySelectorAll('input[type="date"][name="first_payment"]').forEach(input => {
                                                    input.value = '';
                                                });

                                                // Réinitialiser la variable de sélection
                                                selectedApplications = [];

                                                // Recharger la page pour afficher le message de session
                                                //window.location.reload();
                                                // Vérifier si une URL de redirection est présente
                                                if (data.redirectUrl) {
                                                    window.location.href = data.redirectUrl; // Rediriger l'utilisateur
                                                } else {
                                                    alert("Soumission réussie !");
                                                }
                                            } else {
                                                alert(data.message || "Une erreur est survenue.");
                                            }
                                        })
                                        .catch(error => {
                                            console.error('Erreur:', error);
                                        });
                                    });

                                    // Désactiver le bouton au chargement
                                    updateTotalAndButtonState();
                                });
                            </script>

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