@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('selectedFirstPaiement', ['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°{{ $id }}</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">Doc 1</th>
                                                        <th class="orange">Doc 2</th>
                                                        <th class="orange">Doc 3</th>
                                                        <th class="green">Paiement 1</th>
                                                        <th class="green">Date</th>
                                                        <th class="green">Paiement 2</th>
                                                        <th class="green">Date</th>
                                                        <th class="green">Paiement 3</th>
                                                        <th class="green">Date</th>
                                                        <th class="green">Paiement 4</th>
                                                        <th class="green">Date</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-id="{{ $id }}">
                                                    <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:250px"></td>
                                                        <td class="">{{ $application->banque_name }}</td>
                                                        <td class="red">{{ $application->swift_iban_number }}</td>
                                                        <td class="red">{{ number_format($application->montant_paye ?? 0, 0, '', ' ') }}</td>
                                                        <td class="orange">{{ number_format($application->difference ?? 0, 0, '', ' ') }}</td>
                                                        <td class="">
                                                            <a href="{{ asset('storage/uploads/' . $application->certificat_scolarite) }}" target="_blank">
                                                                <img src="{{ asset('assets/image/doc-sign.png') }}" alt="doc-sign" />
                                                            </a>
                                                        </td>
                                                        <td class="">
                                                            <a href="{{ asset('storage/uploads/' . $application->copy_of_password_cni) }}" target="_blank">
                                                                <img src="{{ asset('assets/image/doc-sign.png') }}" alt="doc-sign" />
                                                            </a>
                                                        </td>
                                                        <td class="">
                                                            <a href="{{ asset('storage/uploads/' . $application->copy_rib) }}" target="_blank">
                                                                <img src="{{ asset('assets/image/doc-sign.png') }}" alt="doc-sign" />
                                                            </a>
                                                        </td>
                                                        <td class="">
                                                            {{ isset($application->payment_data) && is_numeric($application->payment_data->first_amount) 
                                                                ? number_format((float) $application->payment_data->first_amount, 0, '', ' ') 
                                                                : '' }}
                                                        </td>
                                                        <td class="green">
                                                            {{ $application->payment_data->first_payment ? \Carbon\Carbon::parse($application->payment_data->first_payment)->format('d/m/y') : '' }}
                                                        </td>
                                                        <td class="">
                                                            {{ isset($application->payment_data) && is_numeric($application->payment_data->second_amount) 
                                                                ? number_format((float) $application->payment_data->second_amount, 0, '', ' ') 
                                                                : '' }}
                                                        </td>
                                                        <td class="">
                                                            {{ $application->payment_data->second_payment ? \Carbon\Carbon::parse($application->payment_data-second_payment)->format('d/m/y') : '' }}
                                                        </td>
                                                        <td class="">
                                                            {{ isset($application->payment_data) && is_numeric($application->payment_data->third_amount) 
                                                                ? number_format((float) $application->payment_data->third_amount, 0, '', ' ') 
                                                                : '' }}
                                                        </td>
                                                        <td class="">
                                                            {{ $application->payment_data->third_payment ? \Carbon\Carbon::parse($application->payment_data-third_payment)->format('d/m/y') : '' }}
                                                        </td>
                                                        <td class="">
                                                            {{ isset($application->payment_data) && is_numeric($application->payment_data->fourth_amount) 
                                                                ? number_format((float) $application->payment_data->fourth_amount, 0, '', ' ') 
                                                                : '' }}
                                                        </td>
                                                        <td class="">
                                                            {{ $application->payment_data->fourth_payment ? \Carbon\Carbon::parse($application->payment_data->fourth_payment)->format('d/m/y') : '' }}
                                                        </td>
                                                        <td class="green">
                                                            {{ isset($application->payment_data) && is_numeric($application->montant_bourse) 
                                                                ? number_format((float) $application->montant_bourse, 0, '', ' ') 
                                                                : '' }}
                                                        </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="Search '+title+'" />' );
                                } );
                                
                                // DataTable
                                var table = $('#example').DataTable();
                                
                                // 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');

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

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

                                            if (isChecked || montant > 0) {
                                                hasValidSelection = true; // Condition respectée au moins une fois
                                            }

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

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

                                        // Met à jour l'affichage du montant total
                                        amountInput.value = totalAmount.toLocaleString('fr-FR', { minimumFractionDigits: 0, maximumFractionDigits: 0 });

                                        // 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);
                                    });

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

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

                                            if (isChecked && montant > 0) {
                                                selectedApplications.push({
                                                    applicationId: checkbox.closest('tr').getAttribute('data-application-id'),
                                                    montant: montant
                                                });
                                                hasValidSelection = true; // Condition remplie au moins une fois
                                            }
                                        });

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

                                        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("submitSelections") }}', {
                                            method: 'POST',
                                            headers: {
                                                'Content-Type': 'application/json',
                                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                                            },
                                            body: JSON.stringify({
                                                selectedApplications: selectedApplications,
                                                montant: amountInput.value, // Assurez-vous que le montant total est envoyé ici
                                                id: {{ $id }} // Ajout du paramètre 'id'
                                            })
                                        })
                                        .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 = '';
                                                });

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

                                                // Recharger la page pour afficher le message de session
                                                window.location.reload();
                                            } 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