@extends('layouts.app')
@section('title_header')
    Status Product
@endsection
@section('breadcrumbs')
    <x-breadcrumbs :items="[['label' => 'Dashboard', 'url' => '/'], ['label' => 'Status Product', 'url' => '/status-product']]" />
@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_status_product = session('permissions')['create_status_product'] ?? null;
        $btn_create = str_contains($btn_create_status_product, 'actions');

        $btn_edit_status_product = session('permissions')['edit_status_product'] ?? null;
        $btn_edit = str_contains($btn_edit_status_product, 'actions');

        $btn_delete_status_product = session('permissions')['delete_status_product'] ?? null;
        $btn_delete = str_contains($btn_delete_status_product, '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-status-product">
                        <div class="mb-3">
                            <label for="name" class="label">
                                Name Status
                            </label>
                            <input id="name" type="text" class="input w-full mt-2" placeholder="Baru dihantar"
                                name="name" required>
                        </div>
                        <div class="mb-3 flex items-center gap-4">
                            <div class="w-full">
                                <label for="color" class="label">
                                    Color Status
                                </label>
                                <div class="flex items-center gap-2 mt-2">
                                    <input id="color" type="text" class="input w-full" placeholder="#a1dcff"
                                        name="color" required>
                                    <input id="color-picker" type="color" class="h-10 w-10 cursor-pointer">
                                </div>
                            </div>
                        </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;
            }

            $('#color').on('input', function() {
                const colorValue = $(this).val();
                if (/^#[0-9A-F]{6}$/i.test(colorValue)) {
                    $('#color-picker').val(colorValue);
                }
            });

            $('#color-picker').on('input', function() {
                const colorValue = $(this).val();
                $('#color').val(colorValue);
            });

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

                        const headings = ['Name', 'Color', 'Preview', 'Action'];
                        const data = statusProduct.map(status => [
                            status.name,
                            status.color ?? '-',
                            `<div class="h-6 w-6 rounded border" style="background-color: ${status.color || '#ffffff'}"></div>`,
                            `
                        @if ($btn_edit || $btn_delete)
                            @if ($btn_delete)
                            <button class="btn btn-sm btn-ghost btn-delete" data-id="${status.id}">
                            <i data-lucide="trash" class="w-4 h-4"></i> Delete
                        </button>
                        @endif
                        @if ($btn_edit)
                            <button class="btn btn-sm btn-ghost btn-edit" data-id="${status.id}">
                            <i data-lucide="pencil" class="w-4 h-4"></i> Edit
                        </button>
                        @endif
                        @else
                        <span>-</span>
                        @endif
                        `
                        ]);

                        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('Failed to fetch status data.');
                    }
                });
            }

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

                const method = editingId ? "PUT" : "POST";
                const url = editingId ? `/api/status-product/update/${editingId}` :
                    "/api/status-product/store";

                $.ajax({
                    type: method,
                    url: url,
                    headers: {
                        Authorization: "Bearer " + token
                    },
                    data: {
                        name: $("#name").val(),
                        color: $("#color").val(),
                    },
                    dataType: "JSON",
                    success: function(response) {
                        toastr.success(response.message || (editingId ? "Status updated!" :
                            "Status added!"));
                        $('#form-status-product')[0].reset();
                        $('#preview-color').css('background-color', '#a1dcff');
                        editingId = null;
                        fetchStatus();
                    },
                    error: function(xhr) {
                        toastr.error("Failed to save status: " + (xhr.responseJSON.message ||
                            "An error occurred."));
                    }
                });
            });

            $('#btn-clear').on('click', function() {
                $('#form-status-product')[0].reset();
                $('#preview-color').css('background-color', '#a1dcff');
                editingId = null;
            });

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

                $.ajax({
                    type: "GET",
                    url: `/api/status-product/${id}`,
                    headers: {
                        Authorization: "Bearer " + token
                    },
                    success: function(response) {
                        const status = response.data;
                        $('#name').val(status.name);
                        $('#color').val(status.color);
                        $('#color-picker').val(status.color);
                        $('#preview-color').css('background-color', status.color);
                        editingId = status.id;
                    },
                    error: function() {
                        toastr.error("Failed to get status data.");
                    }
                });
            });

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

                if (!confirm("Are you sure you want to delete this status?")) return;

                $.ajax({
                    type: "DELETE",
                    url: `/api/status-product/${id}`,
                    headers: {
                        Authorization: "Bearer " + token
                    },
                    success: function(response) {
                        toastr.success(response.message || "Status deleted!");
                        fetchStatus();
                    },
                    error: function() {
                        toastr.error("Failed to delete status.");
                    }
                });
            });

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