@extends('layouts.app')
@section('title_header')
    Category Order Part
@endsection
@section('breadcrumbs')
    <x-breadcrumbs :items="[
        ['label' => 'Dashboard', 'url' => '/'],
        ['label' => 'Category Order Part', 'url' => '/category-order-part'],
    ]" />
@endsection

@push('style')
    <link href="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.css" rel="stylesheet" />
@endpush

@section('content')
    <section class="flex lg:flex-row flex-col gap-4">
        <div class="card card-border bg-white lg:max-w-md w-full h-[420px]">
            <div class="card-body">
                <form id="form-category">
                    <div class="mb-3">
                        <label for="name" class="label">Nama Kategori</label>
                        <input id="name" type="text" class="input w-full mt-2" name="name" required>
                    </div>
                    <div class="mb-3">
                        <label for="description" class="label">Deskripsi</label>
                        <textarea id="description" class="input w-full mt-2" name="description" rows="3"
                            placeholder="Deskripsi kategori (opsional)"></textarea>
                    </div>
                    <div class="mb-3">
                        <label for="status" class="label">Status</label>
                        <select id="status" name="status" class="select w-full mt-2">
                            <option value="ENABLE">ENABLE</option>
                            <option value="DISABLED">DISABLED</option>
                        </select>
                    </div>
                    <div>
                        <button type="submit" class="btn btn-info text-white">
                            <i data-lucide="check"></i> Simpan
                        </button>
                        <button type="button" id="btn-clear" class="btn btn-error text-white">
                            <i data-lucide="x"></i> Batal
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <div class="card card-border bg-white w-full h-auto">
            <div class="card-body">
                <table id="default-table"></table>
            </div>
        </div>
    </section>
@endsection

@push('script')
    <script src="https://cdn.jsdelivr.net/npm/simple-datatables@9.0.3"></script>
    <script src="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.js"></script>
    <script>
        let dataTable;
        let editingId = null;

        $(document).ready(function() {
            fetchCategories();

            $('#form-category').submit(function(e) {
                e.preventDefault();

                const method = editingId ? "PUT" : "POST";
                const url = editingId ? `/api/category-order-part/${editingId}` :
                "/api/category-order-part";

                $.ajax({
                    type: method,
                    url: url,
                    data: {
                        name: $("#name").val(),
                        description: $("#description").val(),
                        status: $("#status").val()
                    },
                    dataType: "JSON",
                    success: function(res) {
                        toastr.success("Kategori berhasil disimpan.");
                        $('#form-category')[0].reset();
                        editingId = null;
                        fetchCategories();
                    },
                    error: function(xhr) {
                        toastr.error("Gagal menyimpan kategori: " + (xhr.responseJSON
                            ?.message || "Terjadi kesalahan."));
                    }
                });
            });

            $('#btn-clear').click(function() {
                $('#form-category')[0].reset();
                editingId = null;
            });

            $(document).on('click', '.btn-edit', function() {
                const id = $(this).data('id');

                $.ajax({
                    type: "GET",
                    url: `/api/category-order-part/${id}`,
                    dataType: "JSON",
                    success: function(res) {
                        const cat = res.data;
                        $('#name').val(cat.name);
                        $('#description').val(cat.description);
                        $('#status').val(cat.status);
                        editingId = cat.id;
                    },
                    error: function() {
                        toastr.error("Gagal mengambil data kategori.");
                    }
                });
            });

            $(document).on('click', '.btn-delete', function() {
                const id = $(this).data('id');
                if (!confirm("Yakin ingin menghapus kategori ini?")) return;

                $.ajax({
                    type: "DELETE",
                    url: `/api/category-order-part/${id}`,
                    success: function() {
                        toastr.success("Kategori berhasil dihapus.");
                        fetchCategories();
                    },
                    error: function() {
                        toastr.error("Gagal menghapus kategori.");
                    }
                });
            });
        });

        function fetchCategories() {
            $.ajax({
                type: "GET",
                url: "/api/category-order-part",
                dataType: "JSON",
                success: function(res) {
                    const categories = res.data || [];
                    const headings = ['Nama', 'Deskripsi', 'Status', 'Aksi'];
                    const data = categories.map(cat => [
                        cat.name,
                        cat.description || '-',
                        `<span class="badge ${cat.status === 'ENABLE' ? 'badge-success' : 'badge-error'}">${cat.status}</span>`,
                        `
                        <button class="btn btn-sm btn-ghost btn-edit" data-id="${cat.id}">
                            <i data-lucide="pencil" class="w-4 h-4"></i> Edit
                        </button>
                        <button class="btn btn-sm btn-ghost btn-delete" data-id="${cat.id}">
                            <i data-lucide="trash" class="w-4 h-4"></i> Delete
                        </button>
                        `
                    ]);

                    if (dataTable) dataTable.destroy();

                    dataTable = new simpleDatatables.DataTable("#default-table", {
                        data: {
                            headings,
                            data
                        },
                        searchable: true,
                        perPageSelect: false
                    });

                    if (typeof window.createLucideIcons === 'function') {
                        window.createLucideIcons();
                    }
                },
                error: function() {
                    toastr.error("Gagal memuat data kategori.");
                }
            });
        }
    </script>
@endpush