@extends('mobile.template.app')

@section('content')
    <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">

    <div class="min-h-300 bg-gray-50 font-sans p-2">
        <div class="max-w-lg mx-auto space-y-6">

            @include('mobile.draft_orders.components.toggle')

            <div id="alert-box" class="hidden p-4 rounded-lg border text-sm font-medium"></div>

            <div class="bg-white p-4 rounded-2xl shadow space-y-3">
                <label class="block font-semibold text-gray-700">Tempel Data Orderan</label>
                <textarea id="paste-data" rows="4"
                    class="w-full border border-gray-300 rounded-lg p-3 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                    placeholder="Masukkan data order sesuai format di atas"></textarea>
                <button id="validate-btn"
                    class="w-full mt-2 bg-blue-600 text-white font-bold py-2 rounded-lg hover:bg-blue-700 transition">
                    Tampilkan Preview
                </button>
                <p id="validation-status" class="text-sm mt-2 text-center text-red-600 hidden"></p>
            </div>

            {{-- Preview section dengan animasi show/hide --}}
            <div id="preview-section" class="space-y-4 max-h-0 overflow-hidden transition-all duration-500 ease-in-out">

                {{-- Detail Pesanan --}}
                <div class="bg-white rounded-2xl border border-gray-200 p-4 space-y-2 shadow-sm">
                    <h3 class="font-semibold text-gray-700 mb-2">Detail Pesanan</h3>
                    <div class="flex justify-between text-sm border-b border-gray-100 py-1">
                        <span><i class="bx bx-package text-blue-600 mr-2"></i>Produk</span>
                        <span id="preview-product"></span>
                    </div>
                    <div class="flex justify-between text-sm border-b border-gray-100 py-1">
                        <span><i class="bx bx-money text-green-600 mr-2"></i>Ongkir</span>
                        <span id="preview-shipping_cost"></span>
                    </div>
                    <div class="flex justify-between text-sm border-b border-gray-100 py-1">
                        <span><i class="bx bx-car text-orange-600 mr-2"></i>Ekspedisi</span>
                        <span id="preview-courier"></span>
                    </div>
                    <div class="flex justify-between text-sm border-b border-gray-100 py-1">
                        <span><i class="bx bx-transfer text-pink-600 mr-2"></i>Tipe Pengiriman</span>
                        <span id="preview-shipping_type"></span>
                    </div>
                    <div class="flex justify-between text-sm border-b border-gray-100 py-1">
                        <span><i class="bx bx-wallet text-red-600 mr-2"></i>Total Pembayaran</span>
                        <span id="preview-total_payment"></span>
                    </div>
                    <div class="flex justify-between text-sm py-1">
                        <span><i class="bx bx-barcode text-gray-600 mr-2"></i>Kode</span>
                        <span id="preview-code"></span>
                    </div>
                </div>

                {{-- Alamat Penerima --}}
                <div class="bg-white rounded-2xl border border-gray-200 p-4 space-y-2 shadow-sm">
                    <h3 class="font-semibold text-gray-700 mb-2">Alamat Penerima</h3>
                    <div class="flex justify-between text-sm border-b border-gray-100 py-1">
                        <span><i class="bx bx-user text-gray-600 mr-2"></i>Nama</span>
                        <span id="preview-name"></span>
                    </div>
                    <div class="flex justify-between text-sm border-b border-gray-100 py-1">
                        <span><i class="bx bx-phone text-green-600 mr-2"></i>No HP</span>
                        <span id="preview-phone"></span>
                    </div>
                    <div class="flex justify-between text-sm border-b border-gray-100 py-1">
                        <span><i class="bx bxl-whatsapp text-green-600 mr-2"></i>WhatsApp</span>
                        <span id="preview-wa"></span>
                    </div>
                    <div class="pt-1">
                        <span class="text-sm text-gray-500"><i class="bx bx-home text-gray-600 mr-2"></i>Alamat Jalan</span>
                        <p id="preview-address" class="text-sm font-semibold text-gray-800 mt-1"></p>
                        <p class="text-sm font-semibold text-gray-800 mt-1"><i
                                class="bx bx-map text-blue-600 mr-2"></i>Kelurahan: <span id="preview-subdistrict"></span>
                        </p>
                        <p class="text-sm font-semibold text-gray-800 mt-1"><i
                                class="bx bx-map text-blue-600 mr-2"></i>Kecamatan: <span id="preview-district"></span></p>
                        <p class="text-sm font-semibold text-gray-800 mt-1"><i
                                class="bx bx-map text-blue-600 mr-2"></i>Kab/Kota: <span id="preview-city"></span></p>
                        <p class="text-sm font-semibold text-gray-800 mt-1"><i
                                class="bx bx-map text-blue-600 mr-2"></i>Provinsi: <span id="preview-province"></span></p>
                    </div>
                </div>

                {{-- Upload Bukti Transfer --}}
                <div id="upload-bukti-wrapper"
                    class="bg-white rounded-2xl border border-gray-200 p-4 space-y-2 shadow-sm hidden">
                    <label class="block font-semibold text-gray-700"><i class="bx bx-upload text-indigo-600 mr-2"></i>Upload
                        Bukti Transfer</label>
                    <input type="file" id="bukti-transfer-file"
                        class="w-full border border-gray-300 rounded-lg p-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                </div>
            </div>

            <button id="save-btn"
                class="w-full bg-green-600 text-white font-bold py-2 rounded-lg shadow hover:bg-green-700 transition mt-2 hidden">
                <i class="bx bx-save mr-2"></i>Simpan Orderan
            </button>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        const validateBtn = document.getElementById('validate-btn');
        const previewSection = document.getElementById('preview-section');
        const statusMessage = document.getElementById('validation-status');
        const uploadProofWrapper = document.getElementById('upload-bukti-wrapper');
        const saveBtn = document.getElementById('save-btn');

        const fieldMap = {
            'Produk': 'product',
            'Ongkir': 'shipping_cost',
            'Ekspedisi': 'courier',
            'Tipe Pengiriman': 'shipping_type',
            'Total Pembayaran': 'total_payment',
            'Kode': 'code',
            'Nama': 'name',
            'No HP': 'phone',
            'Alamat Jalan': 'address',

            'Kelurahan': 'subdistrict',
            'Kecamatan': 'district',
            'Kab/Kota': 'city',
            'Provinsi': 'province',

            'Subdistrict': 'subdistrict',
            'District': 'district',
            'City': 'city',
            'Province': 'province',

            'Rate Name': 'rate_name',
        };

        const requiredFields = ['Produk', 'Nama', 'No HP', 'Kode'];

        function showAlert(messages, type = 'error') {
            const alertBox = document.getElementById('alert-box');
            alertBox.classList.remove(
                'hidden',
                'bg-red-100', 'text-red-800', 'border-red-300',
                'bg-green-100', 'text-green-800', 'border-green-300'
            );

            if (type === 'error') {
                alertBox.classList.add('bg-red-100', 'text-red-800', 'border-red-300');
                alertBox.innerHTML =
                    '<i class="bx bx-error-circle text-red-600 mr-1"></i>' +
                    (Array.isArray(messages) ? messages.join('<br>') : messages);
            } else {
                alertBox.classList.add('bg-green-100', 'text-green-800', 'border-green-300');
                alertBox.innerHTML =
                    '<i class="bx bx-check-circle text-green-600 mr-1"></i>' +
                    messages;
            }

            setTimeout(() => alertBox.classList.add('hidden'), 5000);
        }

        function setButtonState(btn, disabled, text) {
            btn.disabled = disabled;
            btn.classList.toggle('opacity-50', disabled);
            if (text) btn.textContent = text;
        }

        validateBtn.addEventListener('click', async () => {
            previewSection.classList.remove('max-h-[2000px]');
            previewSection.classList.add('max-h-0');
            saveBtn.classList.add('hidden');
            uploadProofWrapper.classList.add('hidden');

            const text = document.getElementById('paste-data').value.trim();
            if (!text) return showAlert('Data order wajib diisi!', 'error');

            const data = {};
            const errors = [];
            const foundFields = new Set();

            text.split('\n').forEach((line, idx) => {
                const [key, ...val] = line.split(':');
                if (!key || !val.length) return;
                const cleanKey = key.trim();
                const cleanVal = val.join(':').trim();

                if (!fieldMap[cleanKey]) {
                    errors.push(`Baris ${idx + 1}: Label "${cleanKey}" tidak dikenali.`);
                } else {
                    if (foundFields.has(cleanKey)) {
                        errors.push(`Baris ${idx + 1}: Label "${cleanKey}" duplikat.`);
                    }
                    foundFields.add(cleanKey);
                    data[fieldMap[cleanKey]] = cleanVal;
                }
            });

            requiredFields.forEach(field => {
                if (!data[fieldMap[field]]) {
                    errors.push(`Field "${field}" wajib diisi.`);
                }
            });

            if (errors.length > 0) {
                return showAlert(errors, 'error');
            }

            try {
                setButtonState(validateBtn, true, 'Memvalidasi...');
                const res = await axios.post('{{ route('order.validate') }}', data);

                if (res.data.success === false) {
                    return showAlert(res.data.message || 'Validasi gagal.', 'error');
                }

                const {
                    order,
                    customer,
                    location
                } = res.data.data;

                document.getElementById('preview-product').textContent = order.product || '';
                document.getElementById('preview-shipping_cost').textContent = order.shipping_cost || '';
                document.getElementById('preview-courier').textContent = order.courier || '';
                document.getElementById('preview-shipping_type').textContent = order.shipping_type || '';
                document.getElementById('preview-total_payment').textContent = order.total_payment || '';
                document.getElementById('preview-code').textContent = order.code || '';

                document.getElementById('preview-name').textContent = customer.name || '';
                document.getElementById('preview-phone').textContent = customer.phone || '';
                document.getElementById('preview-address').textContent = customer.address || '';

                document.getElementById('preview-subdistrict').textContent = location.subdistrict || '';
                document.getElementById('preview-district').textContent = location.district || '';
                document.getElementById('preview-city').textContent = location.city || '';
                document.getElementById('preview-province').textContent = location.province || '';

                document.getElementById('preview-wa').textContent = res.data.waDetected ? 'terhubung' :
                    'tidak terhubung';

                uploadProofWrapper.classList.toggle('hidden', !res.data.mustTransfer);

                previewSection.classList.remove('max-h-0');
                previewSection.classList.add('max-h-[2000px]');
                saveBtn.classList.remove('hidden');
                statusMessage.classList.add('hidden');

                showAlert('Validasi berhasil', 'success');
            } catch (err) {
                if (err.response && err.response.status === 422) {
                    const errs = err.response.data.errors;
                    showAlert(Object.values(errs).flat(), 'error');
                } else if (err.response && err.response.data && err.response.data.message) {
                    showAlert(err.response.data.message, 'error');
                } else {
                    showAlert('Permintaan validasi gagal.', 'error');
                }
            } finally {
                setButtonState(validateBtn, false, 'Tampilkan Preview');
            }
        });

        saveBtn.addEventListener('click', async () => {
            const formData = new FormData();
            const fields = [
                'product', 'shipping_cost', 'courier', 'shipping_type',
                'total_payment', 'code', 'name', 'phone', 'address',
                'subdistrict', 'district', 'city', 'province'
            ];

            fields.forEach(f => {
                formData.append(f, document.getElementById('preview-' + f)?.textContent || '');
            });

            const fileInput = document.getElementById('bukti-transfer-file');
            if (!uploadProofWrapper.classList.contains('hidden') && !fileInput.files.length) {
                return showAlert('Silakan upload bukti transfer terlebih dahulu!', 'error');
            }
            if (fileInput?.files.length) formData.append('transfer_proof', fileInput.files[0]);

            try {
                setButtonState(saveBtn, true, 'Menyimpan...');
                const res = await axios.post('{{ route('order.save') }}', formData, {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                });

                if (res.data.success === false) {
                    return showAlert(res.data.message || 'Gagal menyimpan order.', 'error');
                }

                showAlert('Order berhasil disimpan!', 'success');
                resetForm();
            } catch (e) {
                if (e.response && e.response.data && e.response.data.message) {
                    showAlert(e.response.data.message, 'error');
                } else {
                    showAlert('Gagal menyimpan order.', 'error');
                }
            } finally {
                setButtonState(saveBtn, false, 'Simpan Orderan');
            }
        });

        function resetForm() {
            document.getElementById('paste-data').value = '';
            previewSection.classList.remove('max-h-[2000px]');
            previewSection.classList.add('max-h-0');
            saveBtn.classList.add('hidden');
            uploadProofWrapper.classList.add('hidden');
        }
    </script>
@endsection