document.addEventListener("DOMContentLoaded", function() {
    if (typeof jQuery === 'undefined') {
        console.error('jQuery is required for client-modals.js to work.');
        return;
    }

    $(document).ready(function() {
        console.log('Client modals AJAX script loaded with SweetAlert.');

        // Generic AJAX handler for standard forms (Shortcodes & Payments)
        $(document).on('submit', '#shortcodeForm, #paymentForm, #noteForm', function(e) {
            e.preventDefault();
            
            let $form = $(this);
            let modalId = '#' + $form.closest('.modal').attr('id');
            let $submitBtn = $form.find('button[type="submit"]');
            let originalBtnText = $submitBtn.text();

            $submitBtn.prop('disabled', true).text('Saving...');

            $.ajax({
                url: $form.attr('action'),
                type: 'POST',
                data: $form.serialize(),
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    $(modalId).modal('hide');
                    $form[0].reset();

                    // Success SweetAlert
                    Swal.fire({
                        icon: 'success',
                        title: 'Success!',
                        text: response.message || 'Record saved successfully.',
                        confirmButtonColor: '#0d6efd'
                    }).then(() => {
                        location.reload();
                    });
                },
                error: function(xhr) {
                    let errors = xhr.responseJSON?.errors;
                    let errorMsg = 'Something went wrong. Please check your inputs.';
                    if (errors) {
                        errorMsg = Object.values(errors).flat().join('\n');
                    }

                    // Error SweetAlert
                    Swal.fire({
                        icon: 'error',
                        title: 'Validation Error',
                        text: errorMsg,
                        confirmButtonColor: '#dc3545'
                    });

                    $submitBtn.prop('disabled', false).text(originalBtnText);
                }
            });
        });

        // AJAX handler for Document Upload (FormData)
        $(document).on('submit', '#documentForm', function(e) {
            e.preventDefault();
            
            let formElement = this;
            let $form = $(this);
            let formData = new FormData(formElement);
            let modalId = '#' + $form.closest('.modal').attr('id');
            let $submitBtn = $form.find('button[type="submit"]');
            let originalBtnText = $submitBtn.text();

            $submitBtn.prop('disabled', true).text('Uploading...');

            $.ajax({
                url: $form.attr('action'),
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    $(modalId).modal('hide');
                    formElement.reset();

                    // Success SweetAlert
                    Swal.fire({
                        icon: 'success',
                        title: 'Uploaded!',
                        text: response.message || 'Document uploaded successfully.',
                        confirmButtonColor: '#0d6efd'
                    }).then(() => {
                        location.reload();
                    });
                },
                error: function(xhr) {
                    let errors = xhr.responseJSON?.errors;
                    let errorMsg = 'Failed to upload document. Please check the file size and format.';
                    if (errors) {
                        errorMsg = Object.values(errors).flat().join('\n');
                    }

                    // Error SweetAlert
                    Swal.fire({
                        icon: 'error',
                        title: 'Upload Failed',
                        text: errorMsg,
                        confirmButtonColor: '#dc3545'
                    });

                    $submitBtn.prop('disabled', false).text(originalBtnText);
                }
            });
        });

        // Initialize Select2 for Payment Services when modal opens
        $('#addPaymentModal').on('shown.bs.modal', function () {
            let $select = $('#paymentServicesSelect');
            
            // Only fetch if options haven't been loaded yet
            if ($select.children('option').length === 0) {
                $.ajax({
                    url: base_url + '/api/services', // Update route if needed
                    type: 'GET',
                    success: function(data) {
                        $select.empty();
                        data.forEach(function(service) {
                            $select.append(new Option(service.name, service.name, false, false));
                        });
                        
                        // Initialize Select2 with Bootstrap 5 theme
                        $select.select2({
                            theme: 'bootstrap-5',
                            dropdownParent: $('#addPaymentModal'),
                            placeholder: 'Search and select services...'
                        });
                    },
                    error: function() {
                        console.error('Failed to load services for Select2.');
                    }
                });
            } else {
                // If already loaded, just re-initialize if needed
                $select.select2({
                    theme: 'bootstrap-5',
                    dropdownParent: $('#addPaymentModal'),
                    placeholder: 'Search and select services...'
                });
            }
        });

        // Clear Select2 values when modal is closed
        $('#addPaymentModal').on('hidden.bs.modal', function () {
            $('#paymentServicesSelect').val(null).trigger('change');
        });
    
        // --- DYNAMIC DOCUMENT ROW HANDLERS ---
        $('#addRowBtn').on('click', function() {
            let rowHtml = `
                <div class="file-row card border bg-light p-3 mb-3 position-relative">
                    <div class="row g-2 align-items-center">
                        <div class="col-md-5">
                            <label class="form-label text-muted small fw-bold">Document Name / Title</label>
                            <input type="text" name="names[]" class="form-control" placeholder="e.g. Tax Clearance" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label text-muted small fw-bold">Select File</label>
                            <input type="file" name="files[]" class="form-control" required>
                        </div>
                        <div class="col-md-1 text-end d-flex align-items-end">
                            <button type="button" class="btn btn-outline-danger btn-sm remove-row-btn mt-4"><i class="bi bi-trash"></i></button>
                        </div>
                    </div>
                </div>`;
            $('#fileRowsContainer').append(rowHtml);
            updateRemoveButtons();
        });

        // Remove row click handler
        $(document).on('click', '.remove-row-btn', function() {
            $(this).closest('.file-row').remove();
            updateRemoveButtons();
        });

        // Hide delete button if only 1 row remains
        function updateRemoveButtons() {
            let totalRows = $('.file-row').length;
            if (totalRows === 1) {
                $('.remove-row-btn').hide();
            } else {
                $('.remove-row-btn').show();
            }
        }

        // Reset modal fields when closed
        $('#uploadDocumentModal').on('hidden.bs.modal', function() {
            $('#documentForm')[0].reset();
            $('#fileRowsContainer').html(`
                <div class="file-row card border bg-light p-3 mb-3 position-relative">
                    <div class="row g-2 align-items-center">
                        <div class="col-md-5">
                            <label class="form-label text-muted small fw-bold">Document Name / Title</label>
                            <input type="text" name="names[]" class="form-control" placeholder="e.g. Signed Service Agreement" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label text-muted small fw-bold">Select File</label>
                            <input type="file" name="files[]" class="form-control" required>
                        </div>
                        <div class="col-md-1 text-end d-flex align-items-end">
                            <button type="button" class="btn btn-outline-danger btn-sm remove-row-btn mt-4" style="display: none;"><i class="bi bi-trash"></i></button>
                        </div>
                    </div>
                </div>
            `);
        });
    });
});