@extends('layouts.app')
@section('title_header')
    Log Order Part
@endsection
@section('breadcrumbs')
    <x-breadcrumbs :items="[['label' => 'Dashboard', 'url' => '/'], ['label' => 'Log Order Part', 'url' => '/log-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>
        <div class="card card-border bg-white">
            <div class="card-body">
                <h5 class="text-lg font-semibold mb-4 flex items-center gap-2">
                    <i data-lucide="clipboard-list" class="w-5 h-5 text-gray-700"></i>
                    Log Transaksi Order Part
                </h5>
                <div class="table-responsive">
                    <table id="logOrderPartTable"></table>
                </div>
            </div>
        </div>
    </section>

    <!-- DaisyUI Modal -->
    <dialog id="detailModal" class="modal">
        <div class="modal-box max-w-md">
            <form method="dialog">
                <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
            </form>
            <h3 class="font-bold text-lg flex items-center gap-2 mb-4">
                <i data-lucide="file-text" class="w-5 h-5 text-gray-700"></i>
                Detail Log Order Part
            </h3>
            <div class="space-y-2">
                <p><strong>Part Name:</strong> <span id="detailPartName"></span></p>
                <p><strong>Price:</strong> <span id="detailPrice"></span></p>
                <p><strong>Deposit:</strong> <span id="detailDeposit"></span></p>
                <p><strong>Status:</strong> <span id="detailStatus"></span></p>
                <p><strong>Created At:</strong> <span id="detailCreatedAt"></span></p>
            </div>
            <div class="modal-action">
                <form method="dialog">
                    <button class="btn">Close</button>
                </form>
            </div>
        </div>
    </dialog>
@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>
        $(document).ready(function() {
            const formatMYR = (value) =>
                `RM ${parseFloat(value ?? 0).toLocaleString('en-MY', { minimumFractionDigits: 2 })}`;

            function fetchLogOrderPart() {
                $.ajax({
                    url: "/api/log-order-part",
                    method: "GET",
                    success: function(response) {
                        const logs = response.data || [];

                        const headings = [
                            "#",
                            "Part Name",
                            "Price (RM)",
                            "Deposit (RM)",
                            "Status",
                            "Created At",
                            "Action"
                        ];

                        const rows = logs.map((item, index) => {
                            const detail = item.order_part_detail ?? {};
                            const category = detail.category_part ?? {};

                            return [
                                index + 1,
                                category.name ?? "-",
                                formatMYR(item.price),
                                formatMYR(item.deposit),
                                `<span class="px-2 py-1 rounded-full text-xs font-semibold ${
                                    item.status === "PAID"
                                        ? "bg-green-100 text-green-700"
                                        : "bg-yellow-100 text-yellow-700"
                                }">${item.status}</span>`,
                                new Date(item.created_at).toLocaleString(),
                                `<div class="flex gap-1">
                                    <button data-id="${item.id}" class="btn-detail btn btn-outline btn-sm">
                                        Detail
                                    </button>
                                    ${item.status === "PAID" ? `
                                    <button onclick="window.open('/log-order-part/receipt/${item.id}', '_blank')" class="btn btn-outline btn-sm">
                                        <i data-lucide="receipt" class="w-4 h-4"></i> Resit
                                    </button>` : ''}
                                </div>`
                            ];
                        });

                        if (window.logTable) window.logTable.destroy();

                        window.logTable = new simpleDatatables.DataTable("#logOrderPartTable", {
                            data: {
                                headings,
                                data: rows
                            },
                            searchable: true,
                            perPageSelect: false
                        });

                        lucide.createIcons();
                    },
                    error: function() {
                        alert("Gagal mengambil data log order part.");
                    }
                });
            }

            // 🔹 Detail modal
            $(document).on("click", ".btn-detail", function() {
                const id = $(this).data("id");

                $.ajax({
                    url: `/api/log-order-part/${id}`,
                    method: "GET",
                    success: function(json) {
                        if (json.success) {
                            const d = json.data;
                            const detail = d.order_part_detail ?? {};
                            const category = detail.category_part ?? {};

                            // 🔹 ganti label di modal menjadi Category Name
                            $("#detailPartName").prev("strong").text("Part Name:");
                            $("#detailPartName").text(category.name ?? "-");

                            $("#detailPrice").text(formatMYR(d.price));
                            $("#detailDeposit").text(formatMYR(d.deposit));
                            $("#detailStatus").text(d.status);
                            $("#detailCreatedAt").text(new Date(d.created_at).toLocaleString());

                            document.getElementById("detailModal").showModal();
                            lucide.createIcons();
                        }
                    },
                    error: function() {
                        alert("Gagal mengambil detail log order part.");
                    }
                });
            });

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