@extends('app')
@section('title_header', 'Kategori Sumbangan')
@section('header')
    Kategori Sumbangan
@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 Kategori</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="name" class="label">Name <span class="text-danger">*</span></label>
                        <input type="text" name="name" id="name" class="form-control" placeholder="Type here..."
                            required>
                        <div class="invalid-feedback" id="name-error"></div>
                    </div>
                    <div class="mb-3">
                        <label for="description" class="label">Description</label>
                        <textarea name="description" id="description" class="form-control" rows="3" placeholder="Type here..."></textarea>
                        <div class="invalid-feedback" id="description-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 Kategori Transaksi</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="category-table" class="table table-bordered" style="width: 100%;">
                        <thead>
                            <tr>
                                <th width="50">No</th>
                                <th>Name</th>
                                <th width="120">Status</th>
                                <th width="130">Created Date</th>
                                <th width="130">Updated Date</th>
                                <th width="150">Action</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            const token = localStorage.getItem('token');
            let categoryTable;
            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) {
                    updateCategory();
                } else {
                    createCategory();
                }
            });

            // 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() {
                categoryTable.ajax.reload();
            });

            // Initialize DataTable
            function initializeDataTable() {
                categoryTable = $('#category-table').DataTable({
                    processing: true,
                    serverSide: true,
                    ajax: {
                        url: '/api/category-transaction',
                        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.');
                                // Redirect to login or handle authentication
                            }
                        }
                    },
                    columns: [{
                            data: 'DT_RowIndex',
                            name: 'DT_RowIndex',
                            orderable: false,
                            searchable: false
                        },
                        {
                            data: 'name',
                            name: 'name'
                        },
                        {
                            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();
                    }
                });
            }

            // Ubah function createCategory() menjadi seperti ini:
            function createCategory() {
                const formData = new FormData($('#form-submit')[0]);

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

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

                $.ajax({
                    url: '/api/category-transaction/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.status === 'success') {
                            showAlert('success', response.message);
                            $('#form-submit')[0].reset();

                            // Reload table immediately
                            window.location.reload();

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

            // Update category function (for future use)
            function updateCategory() {
                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/category-transaction/update/${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.status === 'success') {
                            showAlert('success', response.message);
                            $('#form-submit')[0].reset();

                            // Reload table immediately
                            window.location.reload();

                            // 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', '.editCategoryTransaction').on('click', '.editCategoryTransaction',
                    function() {
                        const id = $(this).data('id');
                        editCategory(id);
                    });

                // Toggle status button handler
                $(document).off('click', '.toggleStatusCategoryTransaction').on('click',
                    '.toggleStatusCategoryTransaction',
                    function() {
                        const id = $(this).data('id');
                        const currentStatus = $(this).data('status');
                        toggleCategoryStatus(id, currentStatus);
                    });

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

            // Edit category function - Fix untuk menampilkan data di form
            function editCategory(id) {
                $.ajax({
                    url: '/api/category-transaction',
                    type: 'GET',
                    data: {
                        id_category: id
                    },
                    headers: {
                        'Authorization': 'Bearer ' + token,
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    success: function(response) {
                        if (response.success ===
                            true) { // Ubah dari response.status ke response.success
                            const data = response.data;

                            // Fill form with data
                            $('#name').val(data.name);
                            $('#description').val(data.description);
                            $('#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 category data');
                    }
                });
            }
            // Toggle category status function
            function toggleCategoryStatus(id, currentStatus) {
                const newStatus = currentStatus === 'active' ? 'INACTIVE' : 'ACTIVE';
                const actionText = newStatus === 'ACTIVE' ? 'activate' : 'deactivate';

                if (confirm(`Are you sure you want to ${actionText} this category?`)) {
                    // Implementation for status toggle will be added when API is ready
                    console.log(`Toggle status for ID: ${id} to ${newStatus}`);
                    showAlert('info', 'Status toggle functionality to be implemented');
                }
            }

            function deleteCategory(id) {
                if (confirm('Are you sure you want to delete this category? This action cannot be undone.')) {
                    $.ajax({
                        url: `/api/category-transaction/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);
                                categoryTable.ajax.reload(null, false);
                            }
                        },
                        error: function(xhr) {
                            const message = xhr.responseJSON?.message || 'Failed to delete category';
                            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