@extends('layouts.app')
@section('title_header')
    Order
@endsection
@section('breadcrumbs')
    <x-breadcrumbs :items="[['label' => 'Dashboard', 'url' => '/'], ['label' => 'Product', 'url' => '/products']]" />
@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_import_order = session('permissions')['import_order'] ?? null;
        $btn_import = str_contains($btn_import_order, 'actions');

        $btn_delete_all_order = session('permissions')['delete_all_order'] ?? null;
        $btn_delete_all = str_contains($btn_delete_all_order, 'actions');

        $btn_create_order = session('permissions')['create_order'] ?? null;
        $btn_create = str_contains($btn_create_order, 'actions');

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

        $btn_qr_order = session('permissions')['qr_order'] ?? null;
        $btn_qr = str_contains($btn_qr_order, 'actions');

        $btn_delete_order = session('permissions')['delete_order'] ?? null;
        $btn_delete = str_contains($btn_delete_order, 'actions');

        $btn_detail_order = session('permissions')['detail_order'] ?? null;
        $btn_detail = str_contains($btn_detail_order, 'actions');

        $btn_status_order = session('permissions')['filter_status'] ?? null;
        $btn_status = str_contains($btn_status_order, 'actions');

        $btn_refresh_order = session('permissions')['refresh_order'] ?? null;
        $btn_refresh = str_contains($btn_refresh_order, 'actions');
    @endphp
    <section>
        <div class="card card-border bg-white">
            <div class="card-body">
                <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-4">
                    <div class="flex flex-col sm:flex-row items-start sm:items-center gap-2">
                        @if ($btn_import || $btn_delete_all || $btn_status || $btn_refresh)
                            <!-- Mobile Dropdown (visible on <sm) -->
                            <div class="dropdown sm:hidden w-full">
                                <button class="btn btn-sm w-full" tabindex="0">
                                    <i data-lucide="menu" class="w-4 h-4"></i> Actions
                                </button>
                                <ul class="dropdown-content menu w-full rounded-box bg-base-100 shadow-sm z-10">
                                    @if ($btn_import)
                                        <li>
                                            <a class="flex items-center gap-2" onclick="modal_import.showModal()">
                                                <i data-lucide="file-up" class="w-4 h-4"></i> Import
                                            </a>
                                        </li>
                                    @endif
                                    @if ($btn_delete_all)
                                        <li>
                                            <a class="flex items-center gap-2"
                                                onclick="modal_confirm_delete_all.showModal()">
                                                <i data-lucide="trash" class="w-4 h-4"></i> Delete All
                                            </a>
                                        </li>
                                    @endif
                                    @if ($btn_status)
                                        <li>
                                            <a class="flex items-center gap-2" popovertarget="filter-by-status">
                                                <i data-lucide="funnel" class="w-4 h-4"></i> Filter
                                            </a>
                                        </li>
                                    @endif
                                    @if ($btn_refresh)
                                        <li>
                                            <a class="flex items-center gap-2" onclick="window.location.reload()">
                                                <i data-lucide="refresh-ccw" class="w-4 h-4"></i> Refresh
                                            </a>
                                        </li>
                                    @endif
                                </ul>
                            </div>

                            <!-- Desktop Button Group (visible on sm: and above) -->
                            <div class="hidden sm:flex sm:flex-row join">
                                @if ($btn_import)
                                    <button class="btn btn-sm sm:btn-md join-item w-full sm:w-auto"
                                        onclick="modal_import.showModal()">
                                        <i data-lucide="file-up" class="w-4 h-4"></i> Import
                                    </button>
                                @endif
                                @if ($btn_delete_all)
                                    <button class="btn btn-sm sm:btn-md join-item w-full sm:w-auto"
                                        onclick="modal_confirm_delete_all.showModal()">
                                        <i data-lucide="trash" class="w-4 h-4"></i> Delete All
                                    </button>
                                @endif
                                @if ($btn_status)
                                    <button class="btn btn-sm sm:btn-md join-item w-full sm:w-auto"
                                        popovertarget="filter-by-status" style="anchor-name:--anchor-1">
                                        <i data-lucide="funnel" class="w-4 h-4"></i> Filter
                                    </button>
                                @endif
                                @if ($btn_refresh)
                                    <button class="btn btn-sm sm:btn-md join-item w-full sm:w-auto"
                                        onclick="window.location.reload()">
                                        <i data-lucide="refresh-ccw" class="w-4 h-4"></i> Refresh
                                    </button>
                                @endif
                            </div>
                            <ul class="dropdown menu w-full sm:w-52 rounded-box bg-base-100 shadow-sm mt-2 sm:mt-0 z-10"
                                popover id="filter-by-status" style="position-anchor:--anchor-1">
                            </ul>
                        @endif
                    </div>
                    @if ($btn_create)
                        <button onclick="redirectToCreate()"
                            class="btn btn-info btn-sm sm:btn-md text-white mt-2 md:mt-0 w-full md:w-auto">
                            Create
                        </button>
                    @endif
                </div>
                <table id="product-table">
                </table>
            </div>
        </div>
    </section>

    <dialog id="modal_qr" class="modal">
        <div class="modal-box w-[300px]">
            <form method="dialog">
                <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
            </form>
            <div class="mt-5">
                <div id="qr-code" class="flex justify-center"></div>
                <div class="mt-3 ">
                    <h4 class="font-bold text-center">Valid Warranty : <span id="warranty-date"></span></h4>
                </div>
                <div class="grid grid-cols-2 gap-2 mt-4">
                    <button id="btn-download-qr" class="btn btn-sm text-orange-400">
                        <i data-lucide="download" class="w-4 h-4"></i> Unduh QR
                    </button>
                    <button id="btn-copy-link" class="btn btn-sm">
                        <i data-lucide="copy" class="w-4 h-4"></i> Salin Link
                    </button>
                </div>
            </div>
        </div>
    </dialog>
    <dialog id="modal_confirm_delete" class="modal">
        <div class="modal-box">
            <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 text-red-600">Peringatan!</h3>
            <p class="py-4 text-sm">INFORMASI YANG DIHAPUS <strong>TIDAK DAPAT DIKEMBALIKAN</strong>.</p>
            <div class="flex justify-end gap-2 mt-4">
                <button class="btn btn-sm" onclick="modal_confirm_delete.close()">Batal</button>
                <button id="btn-confirm-delete" class="btn btn-sm btn-error text-white">Hapus</button>
            </div>
        </div>
    </dialog>
    <dialog id="modal_import" class="modal">
        <div class="modal-box">
            <form method="dialog">
                <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
            </form>
            <h3 class="text-lg font-bold">Import Excel</h3>
            <div class="py-4">
                <x-dnd-upload-file accept=".xlsx,.xls,.csv" :maxFiles="1" />
            </div>
        </div>
    </dialog>
    <dialog id="modal_confirm_delete_all" class="modal">
        <div class="modal-box">
            <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 text-red-600">Peringatan!</h3>
            <p class="py-4 text-sm">SEMUA DATA YANG DIHAPUS <strong>TIDAK DAPAT DIKEMBALIKAN</strong>.</p>
            <div class="flex justify-ned gap-2 mt-4">
                <button class="btn btn-sm" onclick="modal_confirm_delete_all.close()">Batal</button>
                <button id="btn-confirm-delete-all" class="btn btn-sm btn-error text-white">Hapus</button>
            </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>
        let productTable;
        let selectedDeleteId = null;
        let currentProductId = null;

        $(document).ready(function() {
            const token = getCookie('token');

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

            $('#btn-confirm-delete-all').on('click', function() {
                $.ajax({
                    type: "DELETE",
                    url: "/api/products/delete-all",
                    headers: {
                        Authorization: "Bearer " + getCookie('token')
                    },
                    success: function() {
                        toastr.success("Semua produk berhasil dihapus.");
                        modal_confirm_delete_all.close();
                        fetchProducts();
                    },
                    error: function() {
                        toastr.error("Gagal menghapus semua produk.");
                    }
                });
            });

            function fetchStatusOptions() {
                $.ajax({
                    type: "GET",
                    url: "/api/status-product",
                    headers: {
                        Authorization: "Bearer " + getCookie('token')
                    },
                    success: function(response) {
                        if (response.success && Array.isArray(response.data)) {
                            const statuses = response.data;
                            const $dropdown = $('#filter-by-status');
                            $dropdown.empty(); // Clear dulu

                            statuses.forEach(status => {
                                // Buat <li><a> dengan data-status-id dan tampilkan nama status
                                const $li = $('<li>');
                                const $a = $('<a href="#" class="cursor-pointer"></a>')
                                    .text(status.name)
                                    .attr('data-status-id', status.id);
                                $li.append($a);
                                $dropdown.append($li);
                            });

                            // Attach event click untuk filter produk
                            $('#filter-by-status a[data-status-id]').on('click', function(e) {
                                e.preventDefault();
                                const statusId = $(this).data('status-id');
                                fetchProducts(statusId);
                            });
                        } else {
                            toastr.error("Gagal memuat data status.");
                        }
                    },
                    error: function() {
                        toastr.error("Gagal mengambil data status.");
                    }
                });
            }

            function fetchProducts(statusId = null) {
                $.ajax({
                    type: "GET",
                    url: "/api/products" + (statusId ? `?filter=${encodeURIComponent(statusId)}` : ""),
                    headers: {
                        Authorization: "Bearer " + token
                    },
                    success: function(response) {
                        const products = response.data || [];

                        const headings = [
                            "No", "Order Id", "Nama Pelanggan", "No. Telefon", "Tarikh Order",
                            "Jenama",
                            "Jenis", "Saiz",
                            "No. Model", "Maklumat Kerosakan", "Maklumat Pembaikan",
                            "Diterima Oleh", "Status Progres",
                            "Harga", "Inform Client", "Status Bayaran", "Tarikh Ambil",
                            "Penyerahan Oleh", "Note", "Action"
                        ];

                        const data = products.map((product, index) => [
                            index + 1,
                            product.order_id ?? '-',
                            product.customer_name ?? '-',
                            product.phone_number ?? '-',
                            product.delivery_date ?? '-',
                            product.brand?.name ?? '-',
                            formatProductType(product.product_type),
                            product.size ?? '-',
                            product.model_number ?? '-',
                            product.damage_info ?? '-',
                            product.repair_info ?? '-',
                            product.received?.name ?? '-',
                            getStatusBadge(product.status),
                            product.price ? `RM ${product.price}` : '-',
                            product.client_info ?? '-',
                            getPaymentBadge(product.payment_status),
                            product.pickup_date ?? '-',
                            product.handed?.name ?? '-',
                            truncateTextWithActions(product.receipt_note ?? '-', 50),
                            `
                            @if ($btn_edit || $btn_qr || $btn_delete || $btn_detail)
                                <div class="flex">
                                    @if ($btn_detail)
                                    <button class="btn btn-sm btn-ghost btn-detail" data-id="${product.id}">
                                        <i data-lucide="eye" class="w-4 h-4"></i>
                                    </button>
                                    @endif
                                    @if ($btn_edit)
                                        <button class="btn btn-sm btn-ghost btn-edit" data-id="${product.id}">
                                        <i data-lucide="pencil" class="w-4 h-4"></i>
                                    </button>
                                    @endif
                                    @if ($btn_delete)
                                        <button class="btn btn-sm btn-ghost btn-delete" data-id="${product.id}">
                                        <i data-lucide="trash" class="w-4 h-4"></i>
                                    </button>
                                    @endif
                                    @if ($btn_qr)
                                        <button class="btn btn-sm btn-ghost btn-qr" data-id="${product.id}" onclick="modal_qr.showModal()">
                                        <i data-lucide="qr-code" class="w-4 h-4"></i>
                                    </button>
                                    @endif
                                </div>
                            @else
                                <span>-</span>
                            @endif
                        `
                        ]);

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

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

                        productTable = new simpleDatatables.DataTable("#product-table", {
                            data: customData,
                            searchable: true,
                            perPageSelect: false,
                            columns: [{
                                    select: 0,
                                    sort: "asc"
                                }, // Kolom "No"
                                {
                                    select: 1
                                }, // Nama Pelanggan
                                {
                                    select: 2
                                }, // No. Telefon
                                {
                                    select: 3
                                }, // Tarikh Hantar
                                {
                                    select: 4
                                }, // Jenama
                                {
                                    select: 5
                                }, // Jenis
                                {
                                    select: 6
                                }, // Saiz
                                {
                                    select: 7
                                }, // No. Model
                                {
                                    select: 8
                                }, // Maklumat Kerosakan
                                {
                                    select: 9
                                }, // Maklumat Pembaikan
                                {
                                    select: 10
                                }, // Diterima Oleh
                                {
                                    select: 11
                                }, // Status Progres
                                {
                                    select: 12
                                }, // Harga
                                {
                                    select: 13
                                }, // Inform Client
                                {
                                    select: 14
                                }, // Status Bayaran
                                {
                                    select: 15
                                }, // Tarikh Ambil
                                {
                                    select: 16
                                }, // Penyerahan Oleh
                                {
                                    select: 17,
                                    width: "300px"
                                }, // Note (lebar 300px)
                                {
                                    select: 18
                                }, // Action
                                {
                                    select: 19
                                } // Action
                            ]
                        });

                        if (typeof window.createLucideIcons === 'function') {
                            window.createLucideIcons();
                        }

                        setTimeout(() => {

                            $('#product-table').on('click', '.show-more', function() {
                                const $wrapper = $(this).closest('.truncate-wrapper');
                                $wrapper.find('.truncated-text').addClass('hidden');
                                $wrapper.find('.show-more').addClass('hidden');
                                $wrapper.find('.full-text').removeClass('hidden');
                                $wrapper.find('.show-less').removeClass('hidden');
                            });

                            $('#product-table').on('click', '.show-less', function() {
                                const $wrapper = $(this).closest('.truncate-wrapper');
                                $wrapper.find('.truncated-text').removeClass('hidden');
                                $wrapper.find('.show-more').removeClass('hidden');
                                $wrapper.find('.full-text').addClass('hidden');
                                $wrapper.find('.show-less').addClass('hidden');
                            });

                            $('#product-table').on('click', '.btn-delete', function() {
                                selectedDeleteId = $(this).data('id');
                                modal_confirm_delete.showModal();
                            });

                            $('#btn-confirm-delete').on('click', function() {
                                if (!selectedDeleteId) return;

                                $.ajax({
                                    type: "DELETE",
                                    url: "/api/products/delete/" +
                                        selectedDeleteId,
                                    headers: {
                                        Authorization: "Bearer " + token
                                    },
                                    success: function() {
                                        toastr.success(
                                            "Produk berhasil dihapus.");
                                        modal_confirm_delete.close();
                                        fetchProducts();
                                    },
                                    error: function() {
                                        toastr.error(
                                            "Gagal menghapus produk.");
                                    }
                                });
                            });

                            $('#product-table').on('click', '.btn-edit', function() {
                                const id = $(this).data('id');
                                window.location.href = `/products/edit/${id}`;
                            });

                            $("#product-table").on('click', '.btn-detail', function() {
                                const id = $(this).data('id');
                                window.location.href = `/products/detail/${id}`;
                            });

                            $('#product-table').on('click', '.btn-qr', function() {
                                const id = $(this).data('id');
                                currentProductId = id;
                                const qrContainer = $('#qr-code');
                                qrContainer.html(
                                    '<div class="text-gray-400 text-sm">Loading QR Code...</div>'
                                );
                                modal_qr.showModal();
                                $.ajax({
                                    url: `/api/products/qr-code/${id}`,
                                    method: 'GET',
                                    dataType: 'text',
                                    success: function(response) {
                                        qrContainer.html(response);
                                    },
                                    error: function() {
                                        qrContainer.html(
                                            '<div class="text-red-500 text-sm">Gagal memuat QR Code.</div>'
                                        );
                                        toastr.error(
                                            "Gagal memuat QR Code.");
                                    }
                                });
                            });
                        }, 300);
                    },
                    error: function() {
                        toastr.error('Gagal mengambil data produk.');
                    }
                });
            }

            $('#product-table').on('click', '.btn-qr', function() {
                const id = $(this).data('id');
                currentProductId = id;
                const qrContainer = $('#qr-code');
                const warrantyDateSpan = $('#warranty-date');

                // Set loading states
                qrContainer.html('<div class="text-gray-400 text-sm">Loading QR Code...</div>');
                warrantyDateSpan.text('Loading...');
                modal_qr.showModal();

                // Fetch product details to get warranty_date
                $.ajax({
                    url: `/api/products/edit/${id}`, // Assuming you have an endpoint to get a single product
                    method: 'GET',
                    headers: {
                        Authorization: "Bearer " + token
                    },
                    success: function(response) {
                        if (response.success && response.data) {
                            const product = response.data;
                            // Update QR code
                            $.ajax({
                                url: `/api/products/qr-code/${id}`,
                                method: 'GET',
                                dataType: 'text',
                                success: function(qrResponse) {
                                    qrContainer.html(qrResponse);
                                },
                                error: function() {
                                    qrContainer.html(
                                        '<div class="text-red-500 text-sm">Gagal memuat QR Code.</div>'
                                    );
                                    toastr.error("Gagal memuat QR Code.");
                                }
                            });

                            // Update warranty date
                            if (product.warranty_status === 0) {
                                warrantyDateSpan.text('Expired');
                            } else if (product.warranty_date) {
                                const formattedDate = new Date(product.warranty_date).toLocaleDateString('id-ID', {
                                    day: 'numeric',
                                    month: 'long',
                                    year: 'numeric'
                                });
                                warrantyDateSpan.text(formattedDate);
                            } else {
                                warrantyDateSpan.text('Tiada Warranty');
                            }
                            warrantyDateSpan.text(warrantyDate);
                        } else {
                            warrantyDateSpan.text('Tiada Warranty');
                            toastr.error("Gagal memuat data order.");
                        }
                    },
                    error: function() {
                        qrContainer.html(
                            '<div class="text-red-500 text-sm">Gagal memuat QR Code.</div>');
                        warrantyDateSpan.text('Tiada Warranty');
                        toastr.error("Gagal mengambil data order.");
                    }
                });
            });

            function truncateTextWithActions(text, maxLength = 100) {
                if (!text || text === '-') return '-';
                if (text.length <= maxLength) return text;

                const truncatedText = text.substring(0, maxLength) + '...';
                return `
                <span class="truncate-wrapper">
                    <span class="truncated-text">${truncatedText}</span>
                    <span class="show-more text-blue-500 cursor-pointer underline">Show More</span>
                    <span class="full-text hidden">${text}</span>
                    <span class="show-less text-blue-500 cursor-pointer underline hidden">Show Less</span>
                </span>
            `;
            }

            function formatProductType(str) {
                if (str === '-' || !str) return '-';
                let words = str.split('_');
                return words.map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(' ');
            }

            function getStatusBadge(status) {
                if (!status) {
                    return `<span class="px-2 py-1 rounded-md bg-gray-200 text-gray-800 text-xs font-medium">-</span>`;
                }
                const backgroundColor = status.color || '#a1dcff';
                const textColor = getContrastColor(backgroundColor);
                return `<span class="px-2 py-1 rounded-md text-xs font-medium"
                        style="background-color: ${backgroundColor}; color: ${textColor}">
                    ${status.name}
                </span>`;
            }

            function getContrastColor(hexColor) {
                const r = parseInt(hexColor.substr(1, 2), 16);
                const g = parseInt(hexColor.substr(3, 2), 16);
                const b = parseInt(hexColor.substr(5, 2), 16);
                const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
                return luminance > 0.5 ? '#000000' : '#ffffff';
            }

            function getPaymentBadge(status) {
                switch (status?.toLowerCase()) {
                    case 'cash':
                        return `<span class="px-2 py-1 rounded-md bg-green-200 text-green-800 text-xs font-medium">${status}</span>`;
                    case 'transfer':
                        return `<span class="px-2 py-1 rounded-md bg-blue-200 text-blue-800 text-xs font-medium">${status}</span>`;
                    default:
                        return `<span class="px-2 py-1 rounded-md bg-gray-200 text-gray-800 text-xs font-medium">${status ?? '-'}</span>`;
                }
            }

            window.redirectToCreate = () => {
                window.location.href = "/products/register";
            };

            $('#btn-download-qr').on('click', function() {
                const svg = document.querySelector('#qr-code svg');
                if (!svg) return toastr.warning("QR belum tersedia.");
                const svgData = new XMLSerializer().serializeToString(svg);
                const canvas = document.createElement("canvas");
                const ctx = canvas.getContext("2d");
                const img = new Image();
                const svgBlob = new Blob([svgData], {
                    type: "image/svg+xml;charset=utf-8"
                });
                const url = URL.createObjectURL(svgBlob);

                img.onload = () => {
                    canvas.width = img.width;
                    canvas.height = img.height;
                    ctx.drawImage(img, 0, 0);
                    URL.revokeObjectURL(url);
                    const pngUrl = canvas.toDataURL("image/png");
                    const downloadLink = document.createElement("a");
                    downloadLink.href = pngUrl;
                    downloadLink.download = "qr-code.png";
                    downloadLink.click();
                };
                img.src = url;
            });
            $('#btn-copy-link').on('click', function() {
                if (!currentProductId) {
                    toastr.error("ID produk tidak tersedia.");
                    return;
                }

                const link = `{{ env('APP_URL') }}/detail/services/${currentProductId}`;

                navigator.clipboard.writeText(link)
                    .then(() => {
                        toastr.success("Link berhasil disalin!");
                    })
                    .catch(() => {
                        toastr.error("Gagal menyalin link.");
                    });
            });
            fetchStatusOptions();
            fetchProducts();
        });
    </script>
@endpush