@extends('layouts.admin')

@section('content')
<div class="container">

    <h3>Confirm Disbursal</h3>

    <form id="disbursalForm">
        @csrf

        <div class="mb-3">
            <label>Account Number</label>
            <input type="text" class="form-control" value="{{ $application->society_sb_account_number }}" readonly>
        </div>

        <div class="mb-3">
            <label>Applicant Name</label>
            <input type="text" class="form-control" value="{{ $application->name }}" readonly>
        </div>

        <div class="mb-3">
            <label>Date of Disbursal *</label>
            <input type="date" name="disbursal_date" id="disbursal_date" class="form-control" max="{{ date('Y-m-d') }}">
            <span class="text-danger" id="error_disbursal_date"></span>
        </div>

        <div class="mb-3">
            <label>Amount Disbursed *</label>
            <input type="number" name="amount_disbursed" id="amount_disbursed"
                   value="{{ $application->amount_approved_by_registrar }}" class="form-control">
            <span class="text-danger" id="error_amount_disbursed"></span>
        </div>

        <div class="mb-3">
            <label>Transaction Number *</label>
            <input type="text" name="transaction_number" id="transaction_number" class="form-control">
            <span class="text-danger" id="error_transaction_number"></span>
        </div>

        <button type="button" id="submitBtn" class="btn btn-primary">Submit</button>
    </form>

</div>
@endsection

@push('scripts')
{{-- Load jQuery FIRST --}}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
$(document).ready(function() {

    console.log("jQuery Loaded. Ready!");

    let submitUrl = "{{ route('disbursal.store', [Crypt::encryptString($application->id), 1]) }}";
    console.log("POST URL:", submitUrl);

    $('#submitBtn').on('click', function(e) {

        console.log("Submit button clicked!");
        e.preventDefault();

        $('span.text-danger').text('');
        $('input').removeClass('is-invalid');

        let formData = $('#disbursalForm').serialize();

        // 🔥 SWEET ALERT CONFIRMATION
        Swal.fire({
            title: "Confirm Disbursal?",
            text: "Are you sure you want to confirm disbursal?",
            icon: "warning",
            showCancelButton: true,
            confirmButtonColor: "#3085d6",
            cancelButtonColor: "#d33",
            confirmButtonText: "Yes, Confirm",
            cancelButtonText: "Cancel"
        }).then((result) => {

            if (result.isConfirmed) {

                // 🔥 Proceed with AJAX after confirmation
                $.ajax({
                    url: submitUrl,
                    method: 'POST',
                    data: formData,
                    dataType: 'json',

                    success: function(response) {
                        console.log("SUCCESS:", response);

                        Swal.fire({
                            title: "Success!",
                            text: response.message,
                            icon: "success",
                            confirmButtonColor: "#3085d6"
                        });

                        $('#disbursalForm input, #submitBtn').attr('disabled', true);
                    },

                    error: function(xhr) {
                        console.log("ERROR RESPONSE:", xhr);

                        if (xhr.status === 422) {
                            let errors = xhr.responseJSON.errors;

                            $.each(errors, function(field, messages) {
                                $('#error_' + field).text(messages[0]);
                                $('#' + field).addClass('is-invalid');
                            });

                        } else {
                            Swal.fire(
                                "Error!",
                                "Unexpected error occurred.",
                                "error"
                            );
                        }
                    }
                });
            }

        });

    });

});


</script>
@endpush