@extends('backend.layouts.app')
@section('title', 'Category')

@section('content')
<div class="content container-fluid">
    <div class="card">
        <div class="card-header">
            <button class="btn btn-primary" onclick="showModal()">Add Category</button>
        </div>

        <div class="card-body table-responsive">
            <table id="datatable" class="table table-bordered">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>

<!-- Category Modal -->
<div class="modal fade" id="categoryModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="categoryForm">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title">Category Form</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="category_id">
                    <div class="form-group mb-3">
                        <label>Name</label>
                        <input type="text" id="name" class="form-control" required>
                    </div>
                    <div class="form-group mb-3">
                        <label>Status</label>
                        <select id="status" name="status" class="form-control form-select   ">
                            <option value="1">Active</option>
                            <option value="0">Inactive</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" id="submitBtn" class="btn btn-success">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
    <script>
        function showModal() {
            $('#categoryForm')[0].reset();
            $('#category_id').val('');
            $('#categoryModal').modal('show');
        }

        $(document).ready(function () {
            function loadDataTable() {
                if ($.fn.DataTable.isDataTable('#datatable')) {
                    $('#datatable').DataTable().destroy();
                }

                $('#datatable').DataTable({
                    processing: true,
                    serverSide: true,
                    ajax: '{{ route("categories.index") }}',
                    columns: [
                        { data: 'id' },
                        { data: 'name' },
                        { data: 'status' },
                        { data: 'action' }
                    ]
                });
            }

            loadDataTable();

            // Save (Create/Update) Category
            $('#categoryForm').on('submit', function (e) {
                e.preventDefault();
                let formData = {
                    name: $('#name').val(),
                    status: $('#status').val(),
                    _token: $('meta[name="csrf-token"]').attr('content')
                };

                let categoryId = $('#category_id').val();
                let url = categoryId ? `/admin/categories/update/${categoryId}` : '/admin/categories/store';
                $('#submitBtn').attr('disabled', true).text('Saving...');

                $.ajax({
                    url: url,
                    type: 'POST',
                    data: formData,
                    success: function (response) {
                        iziToast.success({ title: 'Success', message: response.success, position: 'topRight' });
                        $('#categoryModal').modal('hide');
                        $('#categoryForm')[0].reset();
                        $('#submitBtn').attr('disabled', false).text('Save');
                        loadDataTable();
                    },
                    error: function (xhr) {
                        let errors = xhr.responseJSON.errors;
                        if (errors) {
                            $.each(errors, function (key, value) {
                                iziToast.error({
                                    title: 'Error',
                                    message: value,
                                    position: 'topRight',
                                    theme: 'light', // dark
                                });
                            });
                        }
                        $('#submitBtn').attr('disabled', false).text('Save');
                    }
                });
            });

            // Edit Category
            $('body').on('click', '.edit', function () {
                let id = $(this).data('id');

                $.get(`/admin/categories/edit/${id}`, function (data) {
                    console.log(data.status);

                    $('#category_id').val(data.id);
                    $('#name').val(data.name);
                    $('#status').val(data.status ? "1" : "0");
                    $('#categoryModal').modal('show');
                });
            });

            // Delete Category
            $('body').on('click', '.delete', function () {
                let id = $(this).data('id');
                if (!confirm("Are you sure you want to delete this category?")) {
                    return;
                }

                $.ajax({
                    url: `/admin/categories/delete/${id}`,
                    type: 'DELETE',
                    data: { _token: $('meta[name="csrf-token"]').attr('content') },
                    success: function (response) {
                        iziToast.success({ title: 'Deleted', message: response.success, position: 'topRight' });
                        loadDataTable();
                    },
                    error: function () {
                        iziToast.error({ title: 'Error', message: 'Failed to delete the category' });
                    }
                });
            });
        });
    </script>
@endpush