@extends('app')
@section('title_header', 'Setting Amount')
@section('header')
    Setting Amount
@endsection
@push('styles')
@endpush
@section('content')
    <section>
        <div class="card card-outline card-info collapsed-card">
            <div class="card-header">
                <h6 class="card-title">Form Setting Amount</h6>
                <div class="card-tools">
                    <button type="button" class="btn btn-tool" data-card-widget="collapse">
                        <i class="fas fa-plus"></i>
                    </button>
                </div>
                <!-- /.card-tools -->
            </div>
            <!-- /.card-header -->
            <div class="card-body" style="display: none;">
                <form id="form-submit">
                    <div class="alert alert-danger" id="error-alert" style="display: none;"></div>
                    <div class="alert alert-success" id="success-alert" style="display: none;"></div>

                    <div class="mb-3">
                        <label for="amount" class="label">Amount (RM) <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text">RM</span>
                            </div>
                            <input type="number" name="amount" id="amount" class="form-control" placeholder="0.00" step="0.01" min="0.01" required>
                        </div>
                        <div class="invalid-feedback" id="amount-error"></div>
                    </div>
                    <div class="mb-3">
                        <label for="status" class="label">Status <span class="text-danger">*</span></label>
                        <select name="status" id="status" class="form-control" required>
                            <option value="ACTIVE">Aktif</option>
                            <option value="INACTIVE">Non Aktif</option>
                        </select>
                        <div class="invalid-feedback" id="status-error"></div>
                    </div>
                    <div>
                        <button type="submit" class="btn btn-sm btn-primary" id="submit-btn">
                            <i data-lucide="save" style="width: 14px; height: 14px; margin-right: 5px;"></i>
                            Submit
                        </button>
                        <button type="button" class="btn btn-sm btn-secondary" id="cancel-btn">
                            <i data-lucide="x" style="width: 14px; height: 14px; margin-right: 5px;"></i>
                            Batal
                        </button>
                    </div>
                </form>
            </div>
            <!-- /.card-body -->
        </div>

        <div class="card card-outline card-info">
            <div class="card-header">
                <h6 class="card-title">Data Setting Amount</h6>
                <div class="card-tools">
                    <button type="button" class="btn btn-sm btn-primary" id="refresh-table">
                        <i data-lucide="refresh-cw" style="width: 14px; height: 14px; margin-right: 5px;"></i>
                        Refresh
                    </button>
                </div>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table id="setting-table" class="table table-bordered" style="width: 100%;">
                        <thead>
                            <tr>
                                <th width="50">No</th>
                                <th>Amount</th>
                                <th width="120">Status</th>
                                <th width="130">Created Date</th>
                                <th width="130">Updated Date</th>
                                <th width="120">Action</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            const token = localStorage.getItem('token');
            let settingTable;
            let isEditMode = false;
            let editId = null;

            // Initialize Lucide icons
            lucide.createIcons();

            // Initialize DataTable
            initializeDataTable();

            // Form submit handler
            $('#form-submit').on('submit', function(e) {
                e.preventDefault();

                if (isEditMode) {
                    updateSetting();
                } else {
                    createSetting();
                }
            });

            // Cancel button handler
            $('#cancel-btn').on('click', function() {
                resetForm();
                $('#form-submit')[0].reset();
                $('.card-body').slideUp();
                $('.collapsed-card .card-header .btn-tool i').removeClass('fa-minus').addClass('fa-plus');
                $('.collapsed-card').addClass('collapsed-card');
            });

            // Refresh table button
            $('#refresh-table').on('click', function() {
                settingTable.ajax.reload();
            });

            // Initialize DataTable
            function initializeDataTable() {
                settingTable = $('#setting-table').DataTable({
                    processing: true,
                    serverSide: true,
                    ajax: {
                        url: '/api/setting-amount/',
                        type: 'GET',
                        headers: {
                            'Authorization': 'Bearer ' + token,
                            'X-Requested-With': 'XMLHttpRequest',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        error: function(xhr) {
                            if (xhr.status === 401) {
                                showAlert('error', 'Session expired. Please login again.');
                            }
                        }
                    },
                    columns: [{
                            data: 'DT_RowIndex',
                            name: 'DT_RowIndex',
                            orderable: false,
                            searchable: false
                        },
                        {
                            data: 'amount_formatted',
                            name: 'amount'
                        },
                        {
                            data: 'status',
                            name: 'status',
                            orderable: true
                        },
                        {
                            data: 'created_date',
                            name: 'created_date',
                            orderable: true
                        },
                        {
                            data: 'updated_date',
                            name: 'updated_date',
                            orderable: true
                        },
                        {
                            data: 'action',
                            name: 'action',
                            orderable: false,
                            searchable: false
                        }
                    ],
                    order: [
                        [3, 'desc']
                    ],
                    pageLength: 10,
                    lengthMenu: [
                        [10, 25, 50, 100],
                        [10, 25, 50, 100]
                    ],
                    language: {
                        processing: '<i class="fas fa-spinner fa-spin"></i> Loading...',
                        emptyTable: 'No data available',
                        zeroRecords: 'No matching records found'
                    },
                    drawCallback: function() {
                        // Reinitialize Lucide icons after table draw
                        lucide.createIcons();

                        // Bind event handlers for action buttons
                        bindActionButtons();
                    }
                });
            }

            // Create setting function
            function createSetting() {
                const formData = new FormData($('#form-submit')[0]);

                // Add CSRF token
                formData.append('_token', '{{ csrf_token() }}');

                toggleSubmitButton(true);
                hideAlerts();
                clearValidationErrors();

                $.ajax({
                    url: '/api/setting-amount/store',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    headers: {
                        'Authorization': 'Bearer ' + token,
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        if (response.success === true) {
                            showAlert('success', response.message);
                            $('#form-submit')[0].reset();

                            // Reload table immediately
                            settingTable.ajax.reload(null, false);

                            // Close form after success
                            setTimeout(() => {
                                $('#cancel-btn').click();
                            }, 1500);
                        }
                    },
                    error: function(xhr) {
                        handleFormErrors(xhr);
                    },
                    complete: function() {
                        toggleSubmitButton(false);
                    }
                });
            }

            // Update setting function
            function updateSetting() {
                const formData = new FormData($('#form-submit')[0]);

                // Add CSRF token and method
                formData.append('_token', '{{ csrf_token() }}');
                formData.append('_method', 'PUT');

                toggleSubmitButton(true);
                hideAlerts();
                clearValidationErrors();

                $.ajax({
                    url: `/api/setting-amount/${editId}`,
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    headers: {
                        'Authorization': 'Bearer ' + token,
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        if (response.success === true) {
                            showAlert('success', response.message);
                            $('#form-submit')[0].reset();

                            // Reload table immediately
                            settingTable.ajax.reload(null, false);

                            // Close form and reset edit mode
                            setTimeout(() => {
                                $('#cancel-btn').click();
                            }, 1500);
                        }
                    },
                    error: function(xhr) {
                        handleFormErrors(xhr);
                    },
                    complete: function() {
                        toggleSubmitButton(false);
                    }
                });
            }

            // Bind action buttons
            function bindActionButtons() {
                // Edit button handler
                $(document).off('click', '.editSettingAmount').on('click', '.editSettingAmount',
                    function() {
                        const id = $(this).data('id');
                        editSetting(id);
                    });

                // Delete button handler
                $(document).off('click', '.deleteSettingAmount').on('click', '.deleteSettingAmount',
                    function() {
                        const id = $(this).data('id');
                        deleteSetting(id);
                    });
            }

            // Edit setting function
            function editSetting(id) {
                $.ajax({
                    url: '/api/setting-amount/',
                    type: 'GET',
                    data: {
                        id_setting: id
                    },
                    headers: {
                        'Authorization': 'Bearer ' + token,
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    success: function(response) {
                        if (response.success === true) {
                            const data = response.data;

                            // Fill form with data
                            $('#amount').val(data.amount);
                            $('#status').val(data.status);

                            // Set edit mode
                            isEditMode = true;
                            editId = id;

                            // Change button text
                            $('#submit-btn').html(
                                '<i data-lucide="save" style="width: 14px; height: 14px; margin-right: 5px;"></i> Update'
                            );

                            // Open accordion form
                            $('.collapsed-card').removeClass('collapsed-card');
                            $('.card-body').slideDown();
                            $('.btn-tool i').removeClass('fa-plus').addClass('fa-minus');

                            // Reinitialize icons
                            lucide.createIcons();
                        }
                    },
                    error: function(xhr) {
                        showAlert('error', 'Failed to load setting data');
                    }
                });
            }

            // Delete setting function
            function deleteSetting(id) {
                if (confirm('Are you sure you want to delete this setting amount? This action cannot be undone.')) {
                    $.ajax({
                        url: `/api/setting-amount/destroy/${id}`,
                        type: 'DELETE',
                        headers: {
                            'Authorization': 'Bearer ' + token,
                            'X-Requested-With': 'XMLHttpRequest',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        success: function(response) {
                            if (response.success === true) {
                                showAlert('success', response.message);
                                settingTable.ajax.reload(null, false);
                            }
                        },
                        error: function(xhr) {
                            const message = xhr.responseJSON?.message || 'Failed to delete setting amount';
                            showAlert('error', message);
                        }
                    });
                }
            }

            // Helper functions
            function resetForm() {
                isEditMode = false;
                editId = null;
                $('#submit-btn').html(
                    '<i data-lucide="save" style="width: 14px; height: 14px; margin-right: 5px;"></i> Submit');
                clearValidationErrors();
                hideAlerts();
                lucide.createIcons();
            }

            function toggleSubmitButton(loading) {
                const btn = $('#submit-btn');
                if (loading) {
                    btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Processing...');
                } else {
                    btn.prop('disabled', false);
                    const text = isEditMode ? 'Update' : 'Submit';
                    btn.html(
                        `<i data-lucide="save" style="width: 14px; height: 14px; margin-right: 5px;"></i> ${text}`
                    );
                    lucide.createIcons();
                }
            }

            function showAlert(type, message) {
                const alertClass = type === 'success' ? 'alert-success' : 'alert-danger';
                const alertId = type === 'success' ? '#success-alert' : '#error-alert';

                $(alertId).removeClass('alert-success alert-danger alert-info').addClass(alertClass);
                $(alertId).html(message).show();

                // Hide after 5 seconds
                setTimeout(() => {
                    $(alertId).fadeOut();
                }, 5000);
            }

            function hideAlerts() {
                $('#success-alert, #error-alert').hide();
            }

            function clearValidationErrors() {
                $('.form-control').removeClass('is-invalid');
                $('.invalid-feedback').text('');
            }

            function handleFormErrors(xhr) {
                if (xhr.status === 422) {
                    const errors = xhr.responseJSON.errors;

                    // Clear previous errors
                    clearValidationErrors();

                    // Show validation errors
                    for (const field in errors) {
                        $(`#${field}`).addClass('is-invalid');
                        $(`#${field}-error`).text(errors[field][0]);
                    }
                } else {
                    const message = xhr.responseJSON?.message ||
                        'An error occurred while processing your request.';
                    showAlert('error', message);
                }
            }
        });
    </script>
@endpush