@extends(session('staff_logged_in') ? 'Staff.layout' : 'Admin.layout')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">

@section('content')
<div class="row align-items-center justify-content-between mb-3 mt-3">
    <div class="col-auto">
        <h5>Category</h5>
    </div>
    <div class="col-auto">
        <a href="{{ route('add_category') }}" class="btn btn-primary">Add Category</a>
    </div>
</div>


<div class="card p-0">
    <div class="row mb-3 align-items-center p-3 g-2">
        <div class="col-auto">
            <select id="pageLength" class="form-select">
                <option value="10">10</option>
                <option value="25">25</option>
                <option value="50">50</option>
                <option value="100">100</option>
            </select>
        </div>
        <div class="col-auto ms-auto">
            <div class="d-flex align-items-center gap-2">
                <input type="text" id="customSearch" class="form-control" placeholder="Search..." style="width: 180px;">
                <button class="btn btn-label-secondary">Export</button>
            </div>
        </div>
    </div>

    <div class="table-responsive px-3 pb-3">
        <table class="table" id="categoryTable">
            <thead>
                <tr>
                    <th>S.No</th>
                    <th>Category Name</th>
                    <th>Action</th>
                </tr>
            </thead>
        </table>
    </div>
</div>

{{-- Delete Modal --}}
<div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Delete Category</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                Are you sure you want to delete this category?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Cancel</button>
                <form id="deleteForm" method="POST">
                    @csrf
                    <button type="submit" class="btn btn-danger" id="deleteBtn">Delete</button>
                </form>
            </div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script>
const table = $('#categoryTable').DataTable({
    processing: true,
    serverSide: true,
    ajax: "{{ route('category_data') }}",
    pageLength: 10,
    lengthChange: false,
    searching: true, 
    dom: 'rtip',
    columns: [{
            data: null,
            name: 'id',
            render: function(data, type, row, meta) {
                return meta.settings._iDisplayStart + meta.row + 1;
            }
        },
        {
            data: 'category_name',
            name: 'name'
        },

        {
            data: 'action',
            name: 'action',
            orderable: false,
            searchable: false
        }
    ]
});
$('#customSearch').on('keyup', function() {
    table.search(this.value).draw();
});

$('#categoryTable').on('click', '.delete-btn', function () {
    const id = $(this).data('id');
    const deleteUrl = "{{ route('delete_category', ':id') }}".replace(':id', id);
    $('#deleteForm').attr('action', deleteUrl);
});

$('#deleteForm').on('submit', function() {
    $('#deleteBtn')
        .prop('disabled', true)
        .html(`
            <span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>
            Processing...
        `);
});
</script>
@endsection