@extends('layouts.app')
@section('title_header')
    Brand
@endsection
@section('breadcrumbs')
    <x-breadcrumbs :items="[['label' => 'Dashboard', 'url' => '/'], ['label' => 'Brand', 'url' => '/documents']]" />
@endsection

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

@section('content')
    @php
        $btn_create_brand = session("permissions")['create_brand'] ?? null;
        $btn_create = str_contains($btn_create_brand, 'actions');

        $btn_edit_brand = session("permissions")['edit_brand'] ?? null;
        $btn_edit = str_contains($btn_edit_brand, 'actions');

        $btn_delete_brand = session("permissions")['delete_brand'] ?? null;
        $btn_delete = str_contains($btn_delete_brand, 'actions');
    @endphp
    <section class="flex lg:flex-row flex-col gap-4">
        @if($btn_create)
        <div class="card card-border bg-white lg:max-w-md w-full h-[300px]">
            <div class="card-body">
            <form id="form-brands">
                <div class="mb-3">
                <label for="name" class="label">
                    Name Brand
                </label>
                <input id="name" type="text" class="input w-full mt-2" placeholder="Sharp" name="name"
                    required>
                </div>
                <div class="mb-3">
                <label for="description" class="label">
                    Description (Optional)
                </label>
                <textarea id="description" class="textarea mt-2 w-full resize-none" placeholder="Description" name="description"></textarea>
                </div>
                <div>
                <button type="submit" class="btn btn-info text-white"> <i data-lucide="check"></i> Submit</button>
                <button type="button" id="btn-clear" class="btn btn-error text-white"> <i data-lucide="x"></i>
                    Cancel</button>
                </div>
            </form>
            </div>
        </div>
        @endif
        <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 () {
    const token = getCookie('token');

    function getCookie(name) {
        const match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
        return match ? match[2] : null;
    }

    function fetchBrands() {
        $.ajax({
            type: "GET",
            url: "/api/brands",
            headers: {
                Authorization: "Bearer " + token
            },
            success: function (response) {
                let brands = response.data || [];

                const headings = ['Name', 'Description', 'Action'];

                const data = brands.map(brand => {
                    const actions = `
                        @if ($btn_edit)
                        <button class="btn btn-sm btn-ghost btn-edit" data-id="${brand.id}">
                            <i data-lucide="pencil" class="w-4 h-4"></i> Edit
                        </button>
                        @endif
                        @if ($btn_delete)
                        <button class="btn btn-sm btn-ghost btn-delete" data-id="${brand.id}">
                            <i data-lucide="trash" class="w-4 h-4"></i> Delete
                        </button>
                        @endif
                    `.trim();

                    return [
                        brand.name,
                        brand.description ?? '-',
                        actions || '-'
                    ];
                });

                const customData = {
                    headings: headings,
                    data: data
                };

                if (dataTable) {
                    dataTable.destroy();
                }

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

                if (typeof window.createLucideIcons === 'function') {
                    window.createLucideIcons();
                }
            },
            error: function () {
                toastr.error('Gagal mengambil data brand.');
            }
        });
    }

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

        const method = editingId ? "PUT" : "POST";
        const url = editingId ? `/api/brands/${editingId}` : "/api/brands/store";

        $.ajax({
            type: method,
            url: url,
            headers: {
                Authorization: "Bearer " + token
            },
            data: {
                name: $("#name").val(),
                description: $("#description").val(),
            },
            dataType: "JSON",
            success: function (response) {
                toastr.success(response.message || (editingId ? "Brand diupdate!" : "Brand ditambahkan!"));
                $('#form-brands')[0].reset();
                editingId = null;
                fetchBrands();
            },
            error: function (xhr) {
                toastr.error("Gagal menyimpan brand: " + (xhr.responseJSON.message || "Terjadi kesalahan."));
            }
        });
    });

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

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

        $.ajax({
            type: "GET",
            url: `/api/brands/${id}`,
            headers: {
                Authorization: "Bearer " + token
            },
            success: function (response) {
                const brand = response.data;
                $('#name').val(brand.name);
                $('#description').val(brand.description);
                editingId = brand.id;
            },
            error: function () {
                toastr.error("Gagal mengambil data brand.");
            }
        });
    });

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

        if (!confirm("Yakin ingin menghapus brand ini?")) return;

        $.ajax({
            type: "DELETE",
            url: `/api/brands/${id}`,
            headers: {
                Authorization: "Bearer " + token
            },
            success: function (response) {
                toastr.success(response.message || "Brand dihapus!");
                fetchBrands();
            },
            error: function () {
                toastr.error("Gagal menghapus brand.");
            }
        });
    });

    fetchBrands();
});
</script>
@endpush