{{-- @extends('layouts.masteruser') --}}
@extends('layouts.master')

@section('content')
<div class="p-5 bgImage" style="min-height: calc(100vh - 110px)">
    <div class="card mx-4 mx-md-5 shadow-5-strong" style="backdrop-filter: blur(30px);">
        <div class="card-body px-md-6">
            <div class="row d-flex justify-content-center">
                <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>

                <form action="{{route('student.payment.store')}}" method="POST">
                        @csrf
                        <a href="{{ route('payor.dashboard') }}" class="btn btn-lg btn-danger_ rounded-pill px-3" style="margin-left: 20px;background: #ff7700;color:#fff;">
                        <i class="fa-solid fa-arrow-left"></i>
                        @lang('messages.back')</a>
                    <input type="hidden" name="student_id"class="form-control" value="{{$student_data->id}}" />
                    <input type="hidden" name="email_id"class="form-control" value="{{$student_data->email}}" />
                    <div class="form-group row p-3">
                        <label for="" class="col-sm-2 col-form-label">Nom étudiant
                            :</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" name="name" value="{{$student_data->name}}"
                                disabled>
                        </div>

                        <label for="" class="col-sm-2 col-form-label">Filière :</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" name="field"
                                value="{{$student_data->field}}" disabled>
                        </div>
                    </div>
                    <div class="form-group row p-3">
                        <label for="" class="col-sm-2 col-form-label">Année d'étude
                            :</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" name="year_of_study" value="{{$student_data->year_of_study}}"
                                disabled>
                        </div>

                        <label for="" class="col-sm-2 col-form-label">Université :</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" name="institution"
                                value="{{$student_data->institution}}" disabled>
                        </div>
                    </div>
                    <div class="form-group row p-3">
                        <label for="" class="col-sm-2 col-form-label">Code SWIFT
                            :</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" name="swift_iban_number" value="{{$application_data->swift_iban_number ?? ''}}"
                                disabled>
                        </div>

                        <label for="" class="col-sm-2 col-form-label">Banque :</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" name="banque_name"
                                value="{{$application_data->banque_name ?? ''}}" disabled>
                        </div>
                    </div>
                    <div class="form-group row p-3">
                        <label for="" class="col-sm-2 col-form-label">Numéro bancaire
                            :</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" name="bank_account_number" value="{{$application_data->bank_account_number ?? '' }}"
                                disabled>
                        </div>

                        <label for="" class="col-sm-2 col-form-label">Pays :</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" name="country_name"
                                value="{{$countries->title ?? ''}}" disabled>
                        </div>
                    </div>
                    <div class="form-group row p-3">
                        <label for="" class="col-sm-2 col-form-label">Email
                            :</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" name="email" value="{{$student_data->email}}" disabled>
                        </div>

                        <label for="" class="col-sm-2 col-form-label">Montant Total</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" name="total_amount"
                                value="{{$student_data->total_amount}}" disabled>
                        </div>
                    </div>

                                        
                    <div class="form-group row p-3">
                        <label for="" class="col-sm-2 col-form-label">Type de bourse :</label>
                        <div class="col-sm-3">
                            <input type="text" 
                                   class="form-control" 
                                   name="type_bourse" 
                                   value="{{ $typeBourseLabels[$student_data->type_bourse] ?? 'Inconnu' }}" 
                                   disabled>
                        </div>
                    </div>

                    
                    <div class="form-group row p-3">
                        <label for="" class="col-sm-2 col-form-label">1er paiement</label>
                        <div class="col-sm-3">
                            <input type="number" class="form-control" name="first_amount" value="{{$firstAmount}}" 
                                   max="{{ $remainingAmount }}" {{ ($firstAmount != 0) ? 'readonly' : '' }}  id="first_amount">
                        </div>
                        <label for="" class="col-sm-2 col-form-label">Date 1er paiement</label>
                        <div class="col-sm-3">
                            <input type="date" class="form-control" name="first_payment" value="{{$payment_data->first_payment ?? ''}}" 
                            {{ ($firstAmount != 0) ? 'readonly' : '' }}  id="first_payment">
                        </div>
                    </div>

                    <div class="form-group row p-3">
                        <label for="" class="col-sm-2 col-form-label">2e paiement</label>
                        <div class="col-sm-3">
                            <input type="number" class="form-control" name="second_amount" value="{{$secondAmount}}" 
                                   max="{{ $remainingAmount }}" {{ ($secondAmount != 0) ? 'readonly' : '' }}  id="second_amount">
                        </div>
                        <label for="" class="col-sm-2 col-form-label">Date 2e paiement</label>
                        <div class="col-sm-3">
                            <input type="date" class="form-control" name="second_payment" value="{{$payment_data->second_payment ?? ''}}" 
                            {{ ($secondAmount != 0) ? 'readonly' : '' }}  id="second_payment">
                        </div>
                    </div>

                    <div class="form-group row p-3">
                        <label for="" class="col-sm-2 col-form-label">3e paiement</label>
                        <div class="col-sm-3">
                            <input type="number" class="form-control" name="third_amount" value="{{$thirdAmount}}" {{ ($thirdAmount != 0) ? 'readonly' : '' }} 
                            id="third_amount">
                            <input type="hidden" class="form-control" name="last_amount" value="{{$dernierAmount}}" id="last_amount">
                        </div>
                        <label for="" class="col-sm-2 col-form-label">Date 3e paiement</label>
                        <div class="col-sm-3">
                            <input type="date" class="form-control" name="third_payment" value="{{$payment_data->third_payment ?? ''}}" 
                            {{ ($thirdAmount != 0) ? 'readonly' : '' }}  id="third_payment">
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12 text-center">
                            <button type="submit" class="btn btn-outline-dark btn-md px-3 savebutton" style="background:#de7210;" 
                                    id="submitButton" {{$isDisabled ? 'readonly' : ''}}>Payer</button>
                        </div>
                    </div>

                    <script>
                        document.addEventListener('DOMContentLoaded', function() {

                            const amountPaid = {{ $amountPaid }};  // Passez $amountPaid à JavaScript
                            const totalAmount = {{ $totalAmount }};  // Passez $totalAmount à JavaScript
                            const dernierAmount  = {{ $thirdAmount }};
                            //console.log(dernierAmount);


                            // Fonction pour vérifier si au moins un champ de montant est supérieur à 0
                            function checkRequiredField() {
                                const firstAmount = parseFloat(document.getElementById('first_amount').value);
                                const secondAmount = parseFloat(document.getElementById('second_amount').value);
                                const thirdAmount = parseFloat(document.getElementById('third_amount').value);
                                const submitButton = document.getElementById('submitButton');
                                const dernierAmount = parseFloat(document.getElementById('last_amount').value);

                                const firstAmountField = document.getElementById('first_amount');
                                const firstDatePayment = document.getElementById('first_payment');

                                const secondAmountField = document.getElementById('second_amount');
                                const secondDatePayment = document.getElementById('second_payment');

                                const thirdAmountField = document.getElementById('third_amount');
                                const thirdDatePayment = document.getElementById('third_payment');
                                //console.log(dernierAmount);




                                // Vérifier si au moins un champ est supérieur à 0
                                if (firstAmount > 0 || secondAmount > 0 || thirdAmount > 0) {
                                    submitButton.disabled = false;  // Activer le bouton si au moins un champ est > 0
                                } else {
                                    submitButton.disabled = true;  // Désactiver le bouton si aucun champ n'est > 0
                                }

                                // Désactiver le bouton si le montant payé est égal au montant total
                                if (amountPaid === totalAmount) {
                                    submitButton.disabled = true;
                                }

                               
                                if (thirdAmount > 0 && thirdAmount !== dernierAmount) { 

                                    // Lorsqu'on modifie la valeur du champ "third_amount"
                                    thirdAmountField.addEventListener('input', function () {
                                        const thirdAmount = parseFloat(thirdAmountField.value);

                                        // Vérifier si la valeur saisie est exactement égale à dernierAmount
                                        if (thirdAmount !== dernierAmount) {
                                            // Définit un message d'erreur personnalisé si la valeur n'est pas égale
                                            thirdAmountField.setCustomValidity(`Veuillez saisir une valeur égale à ${dernierAmount}.`);
                                        } else {
                                            // Réinitialiser la validité si la valeur est correcte
                                            thirdAmountField.setCustomValidity('');
                                        }
                                    });

                                    // Forcer la validation (par exemple avant la soumission du formulaire)
                                    thirdAmountField.addEventListener('invalid', function (e) {
                                        console.error('L\'événement "invalid" a été déclenché');
                                        // Affichage d'un message d'erreur personnalisé dans la console
                                        if (thirdAmountField.validity.valueMissing) {
                                            thirdAmountField.setCustomValidity('Ce champ ne peut pas être vide.');
                                        } else if (thirdAmountField.validity.customError) {
                                            console.log(thirdAmountField.validationMessage); // Affiche le message d'erreur
                                        }
                                    });
                                }

                                if (firstAmount > 0) {
                                    //console.log(firstDatePayment);
                                    firstDatePayment.required = true;
                                } else {
                                    firstDatePayment.required = false;
                                }

                                if (secondAmount > 0) {
                                    //console.log(secondDatePayment);
                                    secondDatePayment.required = true;
                                } else {
                                    secondDatePayment.required = false;
                                }

                                if (thirdAmount > 0) {
                                    //console.log(thirdDatePayment);
                                    thirdDatePayment.required = true;
                                } else {
                                    thirdDatePayment.required = false;
                                }
                            }

                            // Vérification à chaque modification des champs de paiement
                            document.getElementById('first_amount').addEventListener('input', checkRequiredField);
                            document.getElementById('second_amount').addEventListener('input', checkRequiredField);
                            document.getElementById('third_amount').addEventListener('input', checkRequiredField);

                            // Initialiser l'état du bouton lors du chargement
                            checkRequiredField();
                        });
                    </script>

                </form>
            </div>
        </div>
    </div>
</div>
@endsection