@extends('mobile.template.app')

@section('content')

    <!-- SAFELIST TAILWIND RED COLORS (WAJIB UNTUK CDN) -->
    <div class="hidden">
        bg-red-50 bg-red-100 bg-red-200 bg-red-300 bg-red-400
        bg-red-500 bg-red-600 bg-red-700 bg-red-800 bg-red-900
        text-red-50 text-red-100 text-red-200 text-red-300
        text-red-400 text-red-500 text-red-600 text-red-700 text-red-800 text-red-900
        border-red-50 border-red-100 border-red-200 border-red-300
        border-red-400 border-red-500 border-red-600 border-red-700 border-red-800 border-red-900
    </div>

    <div class="p-4 space-y-5 bg-red-50 min-h-screen">

        <div class="flex items-center justify-between">
            <h2 class="text-lg font-bold text-red-800 tracking-tight">Input Order Marketplace</h2>

            <button id="open-format"
                class="flex items-center gap-1 text-xs text-red-700 font-medium hover:text-red-800 transition">
                <i class="ri-information-line text-base"></i> Lihat Format
            </button>
        </div>

        <div class="bg-white rounded-2xl shadow-sm border border-red-100 overflow-hidden">
            <textarea id="order-text" rows="10"
                class="w-full border-0 p-4 text-sm focus:ring-0 focus:outline-none resize-none placeholder-gray-400"
                placeholder="Tempel teks order dari marketplace di sini..."></textarea>
        </div>

        <button id="parse-btn"
            class="w-full bg-red-600 text-white py-3 rounded-xl font-semibold text-sm tracking-wide shadow-md hover:bg-red-700 transition-all duration-150 flex items-center justify-center gap-2">
            <i class="ri-magic-line text-base"></i> Parse Order
        </button>

        <div id="preview"
            class="hidden mt-4 bg-white rounded-2xl shadow-sm border border-red-100 p-4 space-y-4 animate__animated animate__fadeInUp">
        </div>

        <div id="upload-section" class="hidden bg-white border border-red-100 rounded-2xl p-4 shadow-sm space-y-3">
            <h3 class="text-sm font-semibold text-red-800 flex items-center gap-1">
                <i class="ri-image-add-line text-red-600"></i> Upload Bukti Order
            </h3>

            <input type="file" id="proof-file" accept="image/*"
                class="w-full text-sm text-gray-600 file:mr-3 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-medium file:bg-red-50 file:text-red-700 hover:file:bg-red-100">

            <div id="preview-image" class="hidden">
                <img src="" alt="Preview Bukti"
                    class="w-full rounded-xl mt-2 border object-cover max-h-64 shadow-sm hover:shadow-md transition-all duration-300">
            </div>
        </div>

        <button id="save-btn"
            class="hidden w-full bg-red-700 text-white py-3 rounded-xl font-semibold text-sm tracking-wide shadow-md hover:bg-red-800 transition-all duration-150 flex items-center justify-center gap-2">
            <i class="ri-save-line"></i> Simpan Order
        </button>

        <div id="toast"
            class="hidden fixed bottom-24 left-1/2 transform -translate-x-1/2 text-white text-sm px-5 py-2 rounded-xl shadow-lg backdrop-blur-md z-[60] opacity-0 transition-all duration-300">
        </div>

        <div id="format-modal"
            class="fixed inset-0 z-50 hidden bg-black/60 backdrop-blur-sm flex flex-col justify-end transition-all duration-300">
            <div
                class="bg-white rounded-t-3xl p-5 pb-8 shadow-lg transform translate-y-full transition-all duration-300 max-h-[85vh] overflow-y-auto">

                <div class="flex items-center justify-between mb-3">
                    <h3 class="text-lg font-semibold text-red-800 flex items-center gap-1">
                        <i class="ri-article-line text-red-600 text-xl"></i> Format Contoh
                    </h3>
                    <button id="close-format" class="text-red-600 hover:text-red-800 transition text-lg">
                        <i class="ri-close-line"></i>
                    </button>
                </div>

                <p class="text-sm text-gray-600 mb-3">Gunakan format ini untuk input order marketplace.</p>

                <pre id="format-text"
                    class="bg-red-50 rounded-xl p-3 border border-red-100 text-xs text-gray-700 font-mono leading-relaxed whitespace-pre-wrap select-text overflow-x-auto">
SHOPEE
251124M73Y2TBP

Doorasi: 3 Box - Rp510.000
SKU: DRSBOX-03
Ongkir: Rp19.000
Ekspedisi: SPX - COD
Total Pembayaran: Rp529.000

Dikirim ke Alamat Berikut:
Nama: Yano Oranje
No HP: +6281212560083

Alamat Jalan: Desa MKCM, Rumah Pas Depan Gereja GKTDI
Desa/Kelurahan: MKCM
Kecamatan: Tobelo
Kab/Kota: Halmahera Utara
Kode Pos: 97762

MT-09
                </pre>

                <button id="copy-format"
                    class="mt-4 w-full bg-red-600 text-white py-2 rounded-xl text-sm font-medium hover:bg-red-700 active:scale-[0.98] transition-all duration-150 flex items-center justify-center gap-2">
                    <i class="ri-file-copy-line"></i> Salin Format
                </button>

            </div>
        </div>
    </div>

    @push('scripts')
        <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
        <link href="https://cdn.jsdelivr.net/npm/remixicon/fonts/remixicon.css" rel="stylesheet">

        <script>
            let parsedData = null;
            let uploadedFile = null;

            const preview = document.getElementById('preview');
            const parseBtn = document.getElementById('parse-btn');
            const saveBtn = document.getElementById('save-btn');
            const proofInput = document.getElementById('proof-file');
            const previewImage = document.getElementById('preview-image');
            const uploadSection = document.getElementById('upload-section');
            const toast = document.getElementById('toast');
            const modal = document.getElementById('format-modal');
            const modalCard = modal.querySelector('div');
            const openFormat = document.getElementById('open-format');
            const closeFormat = document.getElementById('close-format');
            const copyBtn = document.getElementById('copy-format');

            function showToast(message, type = "success") {
                toast.innerHTML = `
                    <div class="flex items-center gap-2">
                        <i class="${type === 'success' ? 'ri-checkbox-circle-fill' : 'ri-error-warning-fill'} text-lg"></i>
                        <span>${message}</span>
                    </div>
                `;

                toast.style.backgroundColor = type === "success" ? "#f87171" : "#b91c1c";
                toast.classList.remove("hidden");
                toast.classList.remove("opacity-0");

                setTimeout(() => {
                    toast.classList.add("opacity-0");
                    setTimeout(() => toast.classList.add("hidden"), 300);
                }, 2200);
            }

            openFormat.addEventListener('click', () => {
                modal.classList.remove('hidden');
                setTimeout(() => modalCard.classList.remove('translate-y-full'), 10);
                document.body.style.overflow = 'hidden';
            });

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

            function closeModal() {
                modalCard.classList.add('translate-y-full');
                document.body.style.overflow = '';
                setTimeout(() => modal.classList.add('hidden'), 250);
            }

            copyBtn.addEventListener('click', async () => {
                const formatText = document.getElementById('format-text').innerText.trim();
                await navigator.clipboard.writeText(formatText);

                copyBtn.innerHTML = '<i class="ri-check-double-line"></i> Disalin!';
                copyBtn.classList.replace('bg-red-600', 'bg-red-700');

                showToast('Format berhasil disalin!', "success");

                setTimeout(() => {
                    copyBtn.innerHTML = '<i class="ri-file-copy-line"></i> Salin Format';
                    copyBtn.classList.replace('bg-red-700', 'bg-red-600');
                }, 2000);
            });

            parseBtn.addEventListener('click', async () => {
                const text = document.getElementById('order-text').value.trim();
                if (!text) return showToast('Masukkan teks order terlebih dahulu', "error");

                parseBtn.innerHTML = '<i class="ri-loader-4-line mr-2 animate-spin"></i> Memproses...';
                parseBtn.disabled = true;

                try {
                    const res = await axios.post('/orders/marketplace/parse', { order_text: text });
                    parsedData = res.data.parsed;

                    if (!parsedData.reference_no) throw new Error();

                    preview.classList.remove('hidden');
                    saveBtn.classList.remove('hidden');
                    uploadSection.classList.remove('hidden');

                    preview.innerHTML = `
                        <div class="flex justify-between items-center">
                            <div>
                                <h3 class="font-bold text-gray-800 flex items-center gap-1">
                                    <i class="ri-store-3-line text-red-600"></i> ${parsedData.platform}
                                </h3>
                                <p class="text-xs text-gray-500">${parsedData.reference_no}</p>
                            </div>
                            <span class="text-xs bg-red-50 text-red-700 px-3 py-1 rounded-full font-medium">Marketplace</span>
                        </div>

                        <div class="mt-3 text-sm text-gray-700 space-y-1">
                            <p><b>Produk:</b> ${parsedData.product_name}</p>
                            <p><b>SKU:</b> ${parsedData.sku}</p>
                            <p><b>Harga:</b> Rp${parsedData.price}</p>
                            <p><b>Ongkir:</b> Rp${parsedData.shipping_cost}</p>
                            <p><b>Total Pembayaran:</b> 
                            <span class="text-red-700 font-semibold">Rp${parsedData.total_payment}</span></p>

                            <hr class="my-2 border-dashed border-gray-300">

                            <p><b>Penerima:</b> ${parsedData.receiver.name}</p>
                            <p><b>No HP:</b> ${parsedData.receiver.phone}</p>
                            <p><b>Alamat:</b> ${parsedData.receiver.address}</p>
                            <p><b>Desa:</b> ${parsedData.receiver.village}</p>
                            <p><b>Kecamatan:</b> ${parsedData.receiver.district}</p>
                            <p><b>Kota:</b> ${parsedData.receiver.city}</p>
                            <p><b>Provinsi:</b> ${parsedData.receiver.province}</p>
                            <p><b>Kode Pos:</b> ${parsedData.receiver.postal_code}</p>

                            <hr class="my-2 border-dashed border-gray-300">

                            <p><b>Toko:</b> ${parsedData.shop_name}</p>
                            <p><b>Kode Mitra:</b> ${parsedData.actor_code} (${parsedData.actor_label})</p>
                        </div>
                    `;
                } catch (error) {
                    showToast(error.response?.data?.message ?? "Gagal parsing data!", "error");
                } finally {
                    parseBtn.innerHTML = '<i class="ri-magic-line mr-1"></i> Parse Order';
                    parseBtn.disabled = false;
                }
            });

            proofInput.addEventListener('change', e => {
                const file = e.target.files[0];
                if (!file || !file.type.startsWith('image/')) {
                    proofInput.value = '';
                    previewImage.classList.add('hidden');
                    return showToast('Hanya file gambar yang diperbolehkan!', "error");
                }

                uploadedFile = file;
                const reader = new FileReader();
                reader.onload = ev => {
                    previewImage.querySelector('img').src = ev.target.result;
                    previewImage.classList.remove('hidden');
                };
                reader.readAsDataURL(file);
            });

            saveBtn.addEventListener('click', async () => {
                if (!parsedData) return showToast('Data belum lengkap', "error");
                if (!uploadedFile) return showToast('Wajib upload bukti order!', "error");

                saveBtn.innerHTML = '<i class="ri-loader-4-line animate-spin"></i> Menyimpan...';
                saveBtn.disabled = true;

                const formData = new FormData();
                formData.append('platform', parsedData.platform);
                formData.append('reference_no', parsedData.reference_no);
                formData.append('product_name', parsedData.product_name);
                formData.append('sku', parsedData.sku);
                formData.append('price', parsedData.price);
                formData.append('shipping_cost', parsedData.shipping_cost);
                formData.append('total_payment', parsedData.total_payment);

                formData.append('receiver_name', parsedData.receiver.name);
                formData.append('receiver_phone', parsedData.receiver.phone);
                formData.append('receiver_address', parsedData.receiver.address);
                formData.append('receiver_village', parsedData.receiver.village);
                formData.append('receiver_district', parsedData.receiver.district);
                formData.append('receiver_city', parsedData.receiver.city);
                formData.append('receiver_province', parsedData.receiver.province);
                formData.append('receiver_postal_code', parsedData.receiver.postal_code);

                formData.append('shop_name', parsedData.shop_name);
                formData.append('actor_code', parsedData.actor_code);
                formData.append('actor_label', parsedData.actor_label);

                formData.append('proof', uploadedFile);

                try {
                    const res = await axios.post('/orders/marketplace', formData, {
                        headers: { 'Content-Type': 'multipart/form-data' }
                    });

                    showToast(res.data?.message ?? "Order berhasil disimpan!", "success");

                    document.getElementById('order-text').value = '';
                    preview.classList.add('hidden');
                    saveBtn.classList.add('hidden');
                    uploadSection.classList.add('hidden');
                    previewImage.classList.add('hidden');
                    proofInput.value = '';
                    uploadedFile = null;

                } catch (error) {
                    showToast(error.response?.data?.message ?? "Gagal menyimpan order!", "error");
                } finally {
                    saveBtn.innerHTML = '<i class="ri-save-line"></i> Simpan Order';
                    saveBtn.disabled = false;
                }
            });
        </script>
    @endpush

@endsection