@extends('mobile_layouts.app')

@section('header')
    <div class="header fixed-top">
        <div class="left">
            <a href="{{ route('customer_services.dashboard.index') }}" class="icon">
                <svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6.88986 12.2951L1.60986 7.00008L6.88986 1.70508" stroke="#121927" stroke-width="1.5"
                        stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
            </a>
        </div>
        <h3>Input Order</h3>
    </div>
@endsection
@section('content')
    <style>
        .input-pair {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        @media (min-width: 375px) {
            .input-pair {
                flex-direction: row;
            }

            .input-pair>div {
                flex: 1;
            }
        }
    </style>

    <style>
        .invalid {
            border: 2px solid red;
            background-color: #ffe6e6;
        }

        .form-control {
            border: 1px solid var(--line);
            color: var(--black);
            background-color: var(--white);
            font-size: 14px;
            line-height: 24px;
            color: var(--black);
            font-weight: 600;
            border-radius: 8px;
            /* padding: 14px 16px; */
        }

        .app-content {
            padding: 70px 0px 30px;
        }
    </style>
     <style>
        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        .invalid {
            border-color: red;
        }
    </style>

    <meta name="csrf-token" content="{{ csrf_token() }}">
    <form action="{{ route('customer_services.input_order.store') }}" method="POST" class="mt-10" id="orderForm"
        enctype="multipart/form-data">
        @csrf

        <div class="container">
            <div class="mt-2">
                <label>Input Data (paste format lengkap di sini):</label>
                <textarea id="rawInput" class="form-control" rows="12" placeholder="Paste data di sini..." style="height: 350px"></textarea>
            </div>

            <div style="margin-top: 20px;">
                <button type="button" onclick="parseInput()" class="tf-btn btn-sm secondary">Validasi</button>
            </div>


            <div class="tab-pane fade active show" id="company" role="tabpanel">
                <div class="mt-24">
                    <h6>About this Company</h6>
                    <p class="mt-14 text-dark-4">Google is an American multi-national technology company focusing on
                        search engine technology, computer software, quantum computing, online advertising,
                        e-commerce, cloud computing, artificial intelligence, and consumer electronics. </p>
                </div>
                <ul class="mt-24 list-company">
                    <li class="item-company">
                        <img class="icon" src="https://cdn-icons-png.flaticon.com/128/847/847969.png" alt="">
                        <div class="content">
                            <div class="h7 text-dark">Agen</div>
                            <span class="body-2 text-dark-6" id="agen_text"></span>
                        </div>
                    </li>
                    <li class="item-company">
                        <img class="icon" src="https://cdn-icons-png.flaticon.com/128/2674/2674505.png" alt="">
                        <div class="content">
                            <div class="h7 text-dark">Produk</div>
                            <span class="body-2 text-dark-6" id="product_text"></span>
                        </div>
                    </li>
                    <li class="item-company">
                        <img class="icon" src="images/icon/calendar.svg" alt="">
                        <div class="content">
                            <div class="h7 text-dark">Ongkir & Ekspedisi</div>
                            <span class="body-2 text-dark-6" id="shipping_cost_text"></span>
                            <span class="body-2 text-dark-6" id="expedition_text"></span>
                        </div>
                    </li>
                    <li class="item-company">
                        <img class="icon" src="images/icon/people.svg" alt="">
                        <div class="content">
                            <div class="h7 text-dark">Total & Tipe Pembayaran</div>
                            <span class="body-2 text-dark-6" id="total_payment_text"></span>
                            <span class="body-2 text-dark-6" id="type_payment_text"></span>
                        </div>
                    </li>
                </ul>
            </div>

            <div class="input-pair" style="margin-top: 10px;">
                <div>
                    <label>Agen</label>
                    <input type="text" id="agen" name="distributor" class="form-control" required
                        oninput="checkFormValidity()">
                </div>
                <div>
                    <label>Produk</label>
                    <input type="text" id="produk" name="product_sku" class="form-control" placeholder="Produk"
                        required oninput="checkFormValidity()">
                </div>
            </div>

            <div class="input-pair" style="margin-top: 10px;">
                <div>
                    <label>Jumlah Box</label>
                    <input type="text" id="jumlahBox" name="total_box" class="form-control"
                        oninput="checkFormValidity()">
                </div>
                <div>
                    <label>Jumlah Sachet</label>
                    <input type="text" id="jumlahSachet" name="total_sachet" class="form-control"
                        oninput="checkFormValidity()">
                </div>
            </div>

            <div class="input-pair" style="margin-top: 10px;">
                <div>
                    <label>Ongkir</label>
                    <input type="text" id="ongkir" name="shipping_cost" class="form-control" required
                        oninput="checkFormValidity()">
                </div>
                <div>
                    <label>Ekspedisi</label>
                    <input type="text" id="ekspedisi" name="shipping_method" class="form-control" required
                        oninput="checkFormValidity()">
                </div>
            </div>

            <div class="input-pair" style="margin-top: 10px;">
                <div>
                    <label>Tipe Pembayaran</label>
                    <input type="text" id="tipePembayaran" name="payment_method" class="form-control" required
                        oninput="checkFormValidity()">
                </div>
                <div>
                    <label>Total Pembayaran</label>
                    <input type="text" id="total" name="total_payment" class="form-control" required
                        oninput="checkFormValidity()">
                </div>
            </div>

            <div class="input-pair" style="margin-top: 10px;">
                <div class="form-group">
                    <label>Nama</label>
                    <input type="text" id="nama" name="customer_name" class="form-control" required
                        oninput="checkFormValidity()">
                    <div id="namaFeedback" class="invalid-feedback">Nama tidak boleh kosong.</div>
                </div>
                <div class="form-group">
                    <label>Nomor HP</label>
                    <input type="text" id="nohp" name="phone_number" class="form-control" required
                        oninput="checkFormValidity()">
                    <div id="nohpFeedback" class="invalid-feedback">Nomor HP wajib diisi.</div>
                </div>
            </div>

            <div style="margin-top: 10px;">
                <label>Alamat Jalan</label>
                <input type="text" id="jalan" name="address" class="form-control" required
                    oninput="checkFormValidity()">
            </div>

            <div class="input-pair" style="margin-top: 10px;">
                <div>
                    <label>Kelurahan</label>
                    <input type="text" id="kelurahan" name="subdistrict" class="form-control" required
                        oninput="validateSubDistrict(document.getElementById('kecamatan').value, this.value); checkFormValidity()">

                    <div id="kelurahanFeedback" class="invalid-feedback">Kelurahan tidak valid.</div>
                </div>
                <div>
                    <label>Kecamatan</label>
                    <input type="text" id="kecamatan" name="district" class="form-control" required
                        oninput="validateDistrict(document.getElementById('kabkota').value, this.value); validateSubDistrict(this.value, document.getElementById('kelurahan').value); checkFormValidity()">

                    <div id="kecamatanFeedback" class="invalid-feedback">Kecamatan tidak valid.</div>
                </div>
            </div>

            <div class="input-pair" style="margin-top: 10px;">
                <div>
                    <label>Kab/Kota</label>
                    <input type="text" id="kabkota" name="city" class="form-control" required
                        oninput="validateCity(this.value); validateDistrict(this.value, document.getElementById('kecamatan').value); checkFormValidity()">

                    <div id="kabkotaFeedback" class="invalid-feedback">Kab/Kota tidak valid.</div>
                </div>
                <div>
                    <label>Kode Pos</label>
                    <input type="text" id="kodepos" name="postal_code" class="form-control"
                        oninput="checkFormValidity()">
                </div>
            </div>

            <div id="uploadBuktiContainer" style="margin-top: 20px; display: none;">
                <label>Bukti Transfer</label>
                <input type="file" id="paymentProof" name="payment_proof" class="form-control"
                    oninput="checkFormValidity()">
                <div class="invalid-feedback" style="display: none;">Bukti transfer wajib diunggah untuk pembayaran via
                    Bank Transfer.</div>
            </div>

            <input type="hidden" name="rate_name" id="rateName" value="">

            <div style="margin-top: 20px;">
                <button type="submit" class="tf-btn btn-sm success" id="submitOrderBtn" disabled>
                    <span id="btnText">Simpan</span>
                    <span id="btnSpinner" style="display:none; margin-left: 8px;">
                        <div
                            style="width: 14px; height: 14px; border: 2px solid #fff; border-top: 2px solid #3498db; border-radius: 50%; animation: spin 1s linear infinite;">
                        </div>
                    </span>
                </button>
            </div>
        </div>
    </form>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

    <script>
        // ✅ Debounce function
        function debounce(func, wait = 500) {
            let timeout;
            return function(...args) {
                clearTimeout(timeout);
                timeout = setTimeout(() => func.apply(this, args), wait);
            };
        }

        // ✅ Debounced wrappers
        const debouncedValidateSubDistrict = debounce((district, subdistrict) => {
            validateSubDistrict(district, subdistrict);
        });

        const debouncedValidateDistrict = debounce((city, district) => {
            validateDistrict(city, district);
        });

        const debouncedValidateCity = debounce((city) => {
            validateCity(city);
        });

        function parseInput() {
            const rawText = document.getElementById("rawInput").value.trim();
            if (!rawText) {
                alert("Tolong isi data pada textarea terlebih dahulu!");
                return;
            }

            const lines = rawText.split('\n');
            const data = {};

            lines.forEach(line => {
                let key, value;

                if (line.toLowerCase().startsWith('agen')) {
                    key = 'agen';
                    value = line.substring('agen'.length).trim();
                } else {
                    const splitIndex = line.indexOf(':');
                    if (splitIndex === -1) return;

                    key = line.slice(0, splitIndex).trim().toLowerCase();
                    value = line.slice(splitIndex + 1).trim();
                }

                data[key] = value;
            });

            setValueOrInvalid('nama', data['nama']);
            setValueOrInvalid('nohp', formatPhone(data['no hp']));
            setValueOrInvalid('jalan', data['alamat jalan']);
            setValueOrInvalid('kelurahan', data['desa/kelurahan']);
            setValueOrInvalid('kecamatan', data['kecamatan']);
            setValueOrInvalid('kabkota', data['kab/kota']);
            setValueOrInvalid('kodepos', data['kode pos']);
            setValueOrInvalid('agen', data['agen']);
            setValueOrInvalid('total', cleanCurrency(data['total pembayaran']));
            setValueOrInvalid('ongkir', cleanCurrency(data['ongkir']));

            document.getElementById('agen_text').innerHTML = data['agen'];
            document.getElementById('shipping_cost_test').innerHTML = cleanCurrency(data['ongkir']);
            document.getElementById('total_payment_text').innerHTML = cleanCurrency(data['total pembayaran']));

            if (data['ekspedisi']) {
                const parts = data['ekspedisi'].split('-').map(p => p.trim());
                const formattedEkspedisi = formatEkspedisi(parts[0] || '');
                setValueOrInvalid('ekspedisi', formattedEkspedisi);
                setValueOrInvalid('tipePembayaran', parts[1] || '');

                document.getElementById('type_payment_text').innerHTML = parts[1] || '';
                document.getElementById('expedition_text').innerHTML = formattedEkspedisi;
                
                if ((parts[1] || '').toUpperCase().includes('BANK TRANSFER')) {
                    document.getElementById('uploadBuktiContainer').style.display = 'block';
                } else {
                    document.getElementById('uploadBuktiContainer').style.display = 'none';
                    const proof = document.getElementById('paymentProof');
                    proof.value = '';
                    proof.classList.remove('is-invalid');
                    proof.nextElementSibling.style.display = 'none';
                }
            } else {
                setValueOrInvalid('ekspedisi', '');
                setValueOrInvalid('tipePembayaran', '');
                document.getElementById('uploadBuktiContainer').style.display = 'none';
            }

            const skuLine = lines.find(line => line.toLowerCase().startsWith('sku:'));
            if (skuLine) {
                const skuValue = skuLine.split(':')[1].trim();
                document.getElementById('produk').value = skuValue;

                document.getElementById('product_text').innerHTML = skuValue;
                const numberMatch = skuValue.match(/-(\d{1,3})$/);
                const isBox = skuValue.toLowerCase().includes('box');

                if (numberMatch) {
                    const quantity = parseInt(numberMatch[1]);
                    if (isBox) {
                        document.getElementById('jumlahBox').value = quantity;
                        document.getElementById('jumlahSachet').value = '';
                    } else {
                        document.getElementById('jumlahSachet').value = quantity;
                        document.getElementById('jumlahBox').value = '';
                    }
                } else {
                    document.getElementById('jumlahSachet').value = '';
                    document.getElementById('jumlahBox').value = '';
                }
            } else {
                document.getElementById('produk').value = '';
                document.getElementById('jumlahSachet').value = '';
                document.getElementById('jumlahBox').value = '';
            }


            document.getElementById('jumlahBox').value = '';

            debouncedValidateSubDistrict(data['kecamatan'], data['desa/kelurahan']);
            debouncedValidateDistrict(data['kab/kota'], data['kecamatan']);
            debouncedValidateCity(data['kab/kota']);

            checkFormValidity();
        }

        function formatEkspedisi(raw) {
            const cleaned = raw.trim().toUpperCase();
            if (cleaned === 'J N E' || cleaned === 'JNE') return 'JNE';
            if (['J&T EXPRESS', 'J&T', 'JNT', 'J N T'].includes(cleaned)) return 'J&T Express';
            if (['IDEXPRESS', 'IDX', 'IDE EX', 'ID EXPRESS'].includes(cleaned)) return 'ID Express';
            if (['POS INDONESIA', 'POS'].includes(cleaned)) return 'POS Indonesia';
            return raw;
        }

        function setValueOrInvalid(fieldId, value) {
            const input = document.getElementById(fieldId);
            const feedback = document.getElementById(fieldId + 'Feedback');
            if (!input) return;

            if (!value || value.trim() === '') {
                input.classList.add('is-invalid');
                if (feedback) feedback.style.display = 'block';
            } else {
                input.value = value;
                input.classList.remove('is-invalid');
                if (feedback) feedback.style.display = 'none';
            }
        }

        function formatPhone(raw) {
            if (!raw) return '';
            let cleaned = raw.replace(/[^0-9]/g, '');
            if (cleaned.startsWith('0')) return '62' + cleaned.slice(1);
            if (cleaned.startsWith('8')) return '62' + cleaned;
            return cleaned;
        }

        function cleanCurrency(raw) {
            if (!raw) return '';
            return raw.replace(/[^0-9]/g, '');
        }

        function checkFormValidity() {
            const requiredFields = [
                'nama', 'nohp', 'jalan', 'kelurahan',
                'kecamatan', 'kabkota', 'agen', 'total',
                'ekspedisi', 'tipePembayaran'
            ];

            let allFilled = true;
            let hasInvalid = false;

            requiredFields.forEach(fieldId => {
                const el = document.getElementById(fieldId);
                if (!el || el.value.trim() === '') {
                    allFilled = false;
                }
                if (el.classList.contains('is-invalid')) {
                    hasInvalid = true;
                }
            });

            const paymentMethod = document.getElementById('tipePembayaran').value.toUpperCase();
            const paymentProof = document.getElementById('paymentProof');
            const feedback = paymentProof?.nextElementSibling;

            if (paymentMethod.includes('BANK TRANSFER')) {
                if (!paymentProof || !paymentProof.files || paymentProof.files.length === 0) {
                    allFilled = false;
                    if (paymentProof) {
                        paymentProof.classList.add('is-invalid');
                        if (feedback) feedback.style.display = 'block';
                    }
                } else {
                    paymentProof.classList.remove('is-invalid');
                    if (feedback) feedback.style.display = 'none';
                }
            }

            const simpanBtn = document.getElementById('submitOrderBtn');
            if (simpanBtn) simpanBtn.disabled = !(allFilled && !hasInvalid);
        }

        function validateSubDistrict(district, value) {
            if (!value) {
                document.getElementById('kelurahan').classList.add('is-invalid');
                document.getElementById('kelurahanFeedback').style.display = 'block';
                return;
            }
            fetch("{{ route('validate.subdistrict') }}", {
                    method: "POST",
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                    },
                    body: JSON.stringify({
                        district,
                        sub_district: value
                    })
                })
                .then(res => res.json())
                .then(data => {
                    const input = document.getElementById('kelurahan');
                    const feedback = document.getElementById('kelurahanFeedback');
                    if (!data.valid) {
                        input.classList.add('is-invalid');
                        feedback.style.display = 'block';
                    } else {
                        input.classList.remove('is-invalid');
                        feedback.style.display = 'none';
                    }
                    checkFormValidity();
                });
        }

        function validateDistrict(city, value) {
            if (!value) {
                document.getElementById('kecamatan').classList.add('is-invalid');
                document.getElementById('kecamatanFeedback').style.display = 'block';
                return;
            }
            fetch("{{ route('validate.district') }}", {
                    method: "POST",
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                    },
                    body: JSON.stringify({
                        city,
                        district: value
                    })
                })
                .then(res => res.json())
                .then(data => {
                    const input = document.getElementById('kecamatan');
                    const feedback = document.getElementById('kecamatanFeedback');
                    if (!data.valid) {
                        input.classList.add('is-invalid');
                        feedback.style.display = 'block';
                    } else {
                        input.classList.remove('is-invalid');
                        feedback.style.display = 'none';
                    }
                    checkFormValidity();
                });
        }

        function validateCity(value) {
            if (!value) {
                document.getElementById('kabkota').classList.add('is-invalid');
                document.getElementById('kabkotaFeedback').style.display = 'block';
                return;
            }
            fetch("{{ route('validate.city') }}", {
                    method: "POST",
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                    },
                    body: JSON.stringify({
                        city: value
                    })
                })
                .then(res => res.json())
                .then(data => {
                    const input = document.getElementById('kabkota');
                    const feedback = document.getElementById('kabkotaFeedback');
                    if (!data.valid) {
                        input.classList.add('is-invalid');
                        feedback.style.display = 'block';
                    } else {
                        input.classList.remove('is-invalid');
                        feedback.style.display = 'none';
                    }
                    checkFormValidity();
                });
        }

        function showToast(message, isError = false) {
            const toast = document.getElementById('toast');
            toast.textContent = message;
            toast.style.backgroundColor = isError ? '#e74c3c' : '#27ae60';
            toast.classList.remove('hidden');
            toast.classList.add('show');

            setTimeout(() => {
                toast.classList.remove('show');
                toast.classList.add('hidden');
            }, 3000);
        }

        document.getElementById('submitOrderBtn').addEventListener('click', function() {
            const btn = document.getElementById('submitOrderBtn');
            const btnText = document.getElementById('btnText');
            const btnSpinner = document.getElementById('btnSpinner');

            btn.disabled = true;
            btnText.textContent = 'Menyimpan...';
            btnSpinner.style.display = 'inline-block';

            const form = document.getElementById('orderForm');
            const formData = new FormData(form);

            formData.append('product_sku', document.getElementById('produk').value);
            formData.append('total_box', document.getElementById('jumlahBox').value);
            formData.append('total_sachet', document.getElementById('jumlahSachet').value);
            formData.append('shipping_cost', document.getElementById('ongkir').value);
            formData.append('shipping_method', document.getElementById('ekspedisi').value);
            formData.append('payment_method', document.getElementById('tipePembayaran').value);
            formData.append('total_payment', document.getElementById('total').value);
            formData.append('customer_name', document.getElementById('nama').value);
            formData.append('phone_number', document.getElementById('nohp').value);
            formData.append('address', document.getElementById('jalan').value);
            formData.append('subdistrict', document.getElementById('kelurahan').value);
            formData.append('district', document.getElementById('kecamatan').value);
            formData.append('city', document.getElementById('kabkota').value);
            formData.append('distributor', document.getElementById('agen').value);
            formData.append('rate_name', document.getElementById('rateName')?.value || '');

            axios.post("{{ route('customer_services.input_order.store') }}", formData, {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                })
                .then(function(response) {
                    if (response.data.success) {
                        showToast(response.data.message);
                        document.getElementById("orderForm").reset();
                        document.getElementById('uploadBuktiContainer').style.display = 'none';
                    } else {
                        showToast("Gagal: " + response.data.message, true);
                    }
                })
                .catch(function(error) {
                    if (error.response) {
                        showToast("Terjadi kesalahan: " + (error.response.data.message || "Unknown error"),
                            true);
                    } else {
                        showToast("Terjadi kesalahan jaringan.", true);
                    }
                })
                .finally(function() {
                    btn.disabled = false;
                    btnText.textContent = 'Simpan';
                    btnSpinner.style.display = 'none';
                });
        });
    </script>
@endsection