@extends('layouts.admin')

@section('title', 'Produk')

@section('content')
    <div
        id="productCrudRoot"
        data-csrf="{{ csrf_token() }}"
        data-index-url="{{ route('admin.products.index') }}"
        data-store-url="{{ route('admin.products.store') }}"
        data-show-url-template="{{ route('admin.products.show', ['product' => '__ID__']) }}"
        data-update-url-template="{{ route('admin.products.update', ['product' => '__ID__']) }}"
        data-destroy-url-template="{{ route('admin.products.destroy', ['product' => '__ID__']) }}"
    >
        <div class="admin-toolbar">
            <h1 style="margin: 0;">Kelola Produk</h1>
            <button id="productCreateBtn" class="btn btn-primary" type="button">Tambah Produk</button>
        </div>

        <div id="productsTableContainer">
            @include('admin.products.partials.table', ['products' => $products])
        </div>
    </div>

    <div id="productModal" class="modal-backdrop" aria-hidden="true">
        <div class="modal-card">
            <div class="modal-head">
                <h3 id="productModalTitle" style="margin: 0;">Tambah Produk</h3>
                <button id="productModalCloseBtn" type="button" class="btn btn-outline">Tutup</button>
            </div>

            <div id="productFormErrors" class="alert alert-error" style="display: none;"></div>

            <form id="productForm" class="modal-form">
                @csrf
                <input type="hidden" id="productMethodField" name="_method" value="">

                <div class="modal-grid">
                    <div class="form-group">
                        <label for="product_slug">Slug *</label>
                        <input id="product_slug" type="text" name="slug" required>
                    </div>
                    <div class="form-group">
                        <label for="product_name">Nama *</label>
                        <input id="product_name" type="text" name="name" required>
                    </div>
                    <div class="form-group">
                        <label for="product_tagline">Tagline</label>
                        <input id="product_tagline" type="text" name="tagline">
                    </div>
                    <div class="form-group">
                        <label for="product_category">Kategori *</label>
                        <select id="product_category" name="category" required>
                            @foreach ($categories as $category)
                                <option value="{{ $category }}">{{ $category }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="product_image_url">Image URL</label>
                        <input id="product_image_url" type="url" name="image_url">
                    </div>
                    <div class="form-group">
                        <label for="product_emoji">Emoji/Text Icon</label>
                        <input id="product_emoji" type="text" name="emoji">
                    </div>
                    <div class="form-group form-group-full">
                        <label for="product_description">Description *</label>
                        <textarea id="product_description" name="description" required></textarea>
                    </div>
                    <div class="form-group form-group-full">
                        <label for="product_benefits_text">Benefits (1 baris 1 item)</label>
                        <textarea id="product_benefits_text" name="benefits_text"></textarea>
                    </div>
                    <div class="form-group form-group-full">
                        <label for="product_variants_json">Variants JSON [{"name":"Variant","image":"https://..."}]</label>
                        <textarea id="product_variants_json" name="variants_json"></textarea>
                    </div>
                    <div class="form-group form-group-full">
                        <label for="product_ingredients_json">Ingredients JSON [{"name":"Bahan","image":"https://..."}]</label>
                        <textarea id="product_ingredients_json" name="ingredients_json"></textarea>
                    </div>
                </div>

                <div class="modal-footer">
                    <button id="productSaveBtn" class="btn btn-primary" type="submit">Simpan</button>
                    <button id="productCancelBtn" class="btn btn-outline" type="button">Batal</button>
                </div>
            </form>
        </div>
    </div>

    <script>
        (() => {
            const root = document.getElementById('productCrudRoot');
            if (!root) {
                return;
            }

            const csrfToken = root.dataset.csrf;
            const indexUrl = root.dataset.indexUrl;
            const storeUrl = root.dataset.storeUrl;
            const showUrlTemplate = root.dataset.showUrlTemplate;
            const updateUrlTemplate = root.dataset.updateUrlTemplate;
            const destroyUrlTemplate = root.dataset.destroyUrlTemplate;

            const tableContainer = document.getElementById('productsTableContainer');
            const createBtn = document.getElementById('productCreateBtn');
            const modal = document.getElementById('productModal');
            const modalTitle = document.getElementById('productModalTitle');
            const modalCloseBtn = document.getElementById('productModalCloseBtn');
            const cancelBtn = document.getElementById('productCancelBtn');
            const form = document.getElementById('productForm');
            const methodField = document.getElementById('productMethodField');
            const errorBox = document.getElementById('productFormErrors');
            const saveBtn = document.getElementById('productSaveBtn');

            const ajaxHeaders = {
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': csrfToken,
            };

            let currentSubmitUrl = storeUrl;

            const fields = [
                'slug', 'name', 'tagline', 'category', 'description', 'image_url',
                'emoji', 'benefits_text', 'variants_json', 'ingredients_json',
            ];

            const buildUrl = (template, id) => template.replace('__ID__', String(id));

            const setBusy = (busy) => {
                saveBtn.disabled = busy;
                saveBtn.textContent = busy ? 'Menyimpan...' : 'Simpan';
            };

            const showFeedback = (message, type = 'success') => {
                if (type === 'error') {
                    window.toastError?.(message);
                    return;
                }

                window.toastSuccess?.(message);
            };

            const showErrors = (errors) => {
                if (!errors || Object.keys(errors).length === 0) {
                    errorBox.style.display = 'none';
                    errorBox.innerHTML = '';
                    return;
                }

                const items = Object.values(errors)
                    .flat()
                    .map((message) => `<li>${message}</li>`)
                    .join('');

                errorBox.innerHTML = `<ul style="margin: 0; padding-left: 20px;">${items}</ul>`;
                errorBox.style.display = 'block';
                window.toastError?.('Validasi gagal. Periksa input form.');
            };

            const openModal = () => {
                modal.classList.add('show');
                modal.setAttribute('aria-hidden', 'false');
            };

            const closeModal = () => {
                modal.classList.remove('show');
                modal.setAttribute('aria-hidden', 'true');
                showErrors({});
            };

            const fillForm = (product) => {
                fields.forEach((field) => {
                    const input = form.elements.namedItem(field);
                    if (!input) {
                        return;
                    }
                    input.value = product[field] ?? '';
                });
            };

            const resetCreate = () => {
                form.reset();
                methodField.value = '';
                currentSubmitUrl = storeUrl;
                modalTitle.textContent = 'Tambah Produk';
            };

            const loadTable = async () => {
                const response = await fetch(indexUrl, { headers: ajaxHeaders });
                if (!response.ok) {
                    throw new Error('Gagal memuat data produk.');
                }

                const data = await response.json();
                tableContainer.innerHTML = data.table_html;
            };

            createBtn.addEventListener('click', () => {
                resetCreate();
                openModal();
            });

            modalCloseBtn.addEventListener('click', closeModal);
            cancelBtn.addEventListener('click', closeModal);

            modal.addEventListener('click', (event) => {
                if (event.target === modal) {
                    closeModal();
                }
            });

            tableContainer.addEventListener('click', async (event) => {
                const editBtn = event.target.closest('.js-product-edit');
                if (editBtn) {
                    event.preventDefault();
                    try {
                        const response = await fetch(buildUrl(showUrlTemplate, editBtn.dataset.id), { headers: ajaxHeaders });
                        if (!response.ok) {
                            throw new Error('Gagal memuat detail produk.');
                        }

                        const payload = await response.json();
                        fillForm(payload.product);
                        methodField.value = 'PATCH';
                        currentSubmitUrl = buildUrl(updateUrlTemplate, editBtn.dataset.id);
                        modalTitle.textContent = 'Edit Produk';
                        openModal();
                    } catch (error) {
                        showFeedback(error.message, 'error');
                    }
                    return;
                }

                const deleteBtn = event.target.closest('.js-product-delete');
                if (!deleteBtn) {
                    return;
                }

                event.preventDefault();
                if (!window.confirm('Hapus produk ini?')) {
                    return;
                }

                try {
                    const body = new FormData();
                    body.append('_method', 'DELETE');
                    const response = await fetch(buildUrl(destroyUrlTemplate, deleteBtn.dataset.id), {
                        method: 'POST',
                        headers: ajaxHeaders,
                        body,
                    });

                    if (!response.ok) {
                        throw new Error('Gagal menghapus produk.');
                    }

                    const payload = await response.json();
                    await loadTable();
                    showFeedback(payload.message || 'Produk berhasil dihapus.');
                } catch (error) {
                    showFeedback(error.message, 'error');
                }
            });

            form.addEventListener('submit', async (event) => {
                event.preventDefault();
                showErrors({});
                setBusy(true);

                try {
                    const body = new FormData(form);
                    if (!methodField.value) {
                        body.delete('_method');
                    }

                    const response = await fetch(currentSubmitUrl, {
                        method: 'POST',
                        headers: ajaxHeaders,
                        body,
                    });

                    if (response.status === 422) {
                        const payload = await response.json();
                        showErrors(payload.errors || {});
                        return;
                    }

                    if (!response.ok) {
                        throw new Error('Gagal menyimpan produk.');
                    }

                    const payload = await response.json();
                    closeModal();
                    await loadTable();
                    showFeedback(payload.message || 'Perubahan disimpan.');
                } catch (error) {
                    showFeedback(error.message, 'error');
                } finally {
                    setBusy(false);
                }
            });
        })();
    </script>
@endsection