@extends('layouts.dashboard')

@section('main')

<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header bg-dark text-white d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Daftar Kategori</h5>
                    <button id="createBtn" class="btn btn-success btn-sm" onclick="getModal('createModal')">
                        <i class="bi bi-plus me-2"></i>Tambah
                    </button>
                </div>
                <div class="card-body">
                    <table id="tbl_list" class="table table-striped table-bordered" cellspacing="0" width="100%">
                        <thead>
                            <tr>
                                <th width="5%">No</th>
                                <th>Kategori</th>
                                <th width="15%">Action</th>
                            </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@include('admin.category.create')

@endsection
@push('scripts')

<script>
    $(document).ready(function () {
        datatableCall('tbl_list', '{{ route('categories.index') }}', [{
            data: 'DT_RowIndex',
            name: 'DT_RowIndex'
        },
        {
            data: 'name',
            name: 'name'
        },
        {
            data: 'action',
            name: 'action',
        },
        ]);

        $("#saveData").submit(function(e) {
                setButtonLoadingState("#saveData .btn.btn-primary", true);
                e.preventDefault();
                const kode = $("#saveData #id").val();
                let url = "{{ route('categories.store') }}";
                const data = new FormData(this);

                if (kode !== "") {
                    data.append("_method", "PUT");
                    url = `/dashboard/categories/${kode}`;
                }

                const successCallback = function(response) {
                    // $('#saveData #image').parent().find(".dropify-clear").trigger('click');
                    setButtonLoadingState("#saveData .btn.btn-primary", false);
                    handleSuccess(response, "tbl_list", "createModal");
                };

                const errorCallback = function(error) {
                    setButtonLoadingState("#saveData .btn.btn-primary", false);
                    handleError(error, 'dataTableId', 'modalId');
                    handleValidationErrors(error, "saveData", ["name"]);
                };
                
                ajaxCall(url, "POST", data, successCallback, errorCallback);
            });
    });
</script>
@endpush