@extends('template.desktop.app')

@push('styles')
    <script src="https://cdn.tailwindcss.com"></script>
    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
@endpush

@section('content')
    <div class="min-h-screen bg-gradient-to-br from-white via-white to-softred/10 py-4">
        <div class="mx-auto w-full">

            {{-- HEADER --}}
            <div
                class="relative mb-10 flex flex-col gap-4 md:flex-row md:items-center md:justify-between
            rounded-xl p-8 bg-white/95 backdrop-blur-md border border-white/80
            shadow-[0_1px_2px_rgba(0,0,0,0.03)] overflow-hidden">

                <div
                    class="absolute inset-0 bg-gradient-to-br 
                from-softred/15 via-white/60 to-white/90 pointer-events-none">
                </div>

                <div class="absolute inset-x-0 top-0 h-1/4 
                bg-gradient-to-b from-white/95 to-transparent">
                </div>

                <div class="relative z-10">
                    <div class="flex items-center gap-3">
                        <i class='bx bx-edit text-4xl text-[#D9A5A5]'></i>
                        <h1 class="text-3xl font-semibold text-gray-800">
                            Edit Order #{{ $order['reference_no'] }}
                        </h1>
                    </div>
                </div>

                <div class="relative z-10 flex gap-3">
                    <a href="{{ route('draft-orders.detail', $order['order_id']) }}"
                        class="px-5 py-3 text-sm font-medium rounded-md bg-white border border-gray-300 
                    hover:bg-gray-50 transition">
                        <i class='bx bx-arrow-back'></i> Kembali
                    </a>
                </div>
            </div>

            <form action="{{ route('draft-orders.update', $order['order_id']) }}" method="POST"
                enctype="multipart/form-data">
                @csrf
                @method('PUT')

                @php
                    function glossy_start()
                    {
                        return '
                <div class="relative rounded-xl bg-white/95 backdrop-blur-md p-8
                    border border-white/80 shadow-[0_1px_2px_rgba(0,0,0,0.03)] overflow-hidden">

                    <div class="absolute inset-0 bg-gradient-to-br 
                        from-[#FCECEC]/15 via-white/70 to-white/95"></div>

                    <div class="absolute inset-x-0 top-0 h-1/4 
                        bg-gradient-to-b from-white/95 to-transparent"></div>

                    <div class="relative z-10">
                ';
                    }
                    function glossy_end()
                    {
                        return '</div></div>';
                    }

                    $defaultSku = '';
                    if (!empty($items) && isset($items[0]['sku'])) {
                        $defaultSku = $items[0]['sku'];
                    }
                @endphp

                <div class="grid lg:grid-cols-5 gap-8">

                    {{-- LEFT COLUMN --}}
                    <div class="space-y-8 lg:col-span-2">

                        {!! glossy_start() !!}
                        <h2 class="text-xl font-semibold text-gray-800 flex items-center gap-2 mb-6">
                            <i class="bx bx-user-pin text-3xl text-[#D9A5A5]"></i>
                            Data Penerima & Lokasi
                        </h2>

                        <div class="space-y-5">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Nama Penerima</label>
                                <input type="text" name="name" value="{{ $receiver['name'] ?? '' }}"
                                    class="w-full text-base px-4 py-3 border-gray-300 rounded-lg shadow-sm focus:border-red-300 focus:ring focus:ring-red-200 focus:ring-opacity-50"
                                    required>
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">No HP</label>
                                <input type="text" name="phone" value="{{ $receiver['phone_number'] ?? '' }}"
                                    class="w-full text-base px-4 py-3 border-gray-300 rounded-lg shadow-sm focus:border-red-300 focus:ring focus:ring-red-200 focus:ring-opacity-50"
                                    required>
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Alamat Lengkap (Jalan, RT/RW,
                                    dll)</label>
                                <textarea name="address" rows="5"
                                    class="w-full text-base px-4 py-3 border-gray-300 rounded-lg shadow-sm focus:border-red-300 focus:ring focus:ring-red-200 focus:ring-opacity-50"
                                    required>{{ $receiver['address'] ?? '' }}</textarea>
                            </div>

                            {{-- Destination Search --}}
                            <div class="relative">
                                <label class="block text-sm font-medium text-gray-700 mb-2">
                                    <i class='bx bx-search-alt text-red-400'></i> Cari Destinasi (Kelurahan/Kecamatan/Kota)
                                </label>
                                <input type="text" id="search-destinasi"
                                    placeholder="Ketik nama kelurahan/kecamatan/kota untuk mencari..."
                                    class="w-full text-base px-4 py-3 border-gray-300 rounded-lg shadow-sm focus:border-red-300 focus:ring focus:ring-red-200 focus:ring-opacity-50">
                                <div id="destinasi-result"
                                    class="absolute z-20 w-full bg-white border rounded-lg shadow-lg max-h-64 overflow-y-auto hidden mt-1">
                                </div>
                            </div>

                            {{-- Area Display --}}
                            <input type="hidden" name="area_id" id="area_id" value="{{ $receiver['area_id'] ?? '' }}">
                            <div class="grid grid-cols-2 gap-4 p-4 bg-gray-50 rounded-lg border border-gray-200">
                                <div>
                                    <label class="block text-sm font-medium text-gray-500 mb-2">Kelurahan</label>
                                    <input type="text" name="subdistrict" id="subdistrict"
                                        value="{{ $receiver['sub_district'] ?? '' }}"
                                        class="w-full text-base px-4 py-3 bg-white border-gray-300 rounded-lg shadow-sm focus:border-red-300 focus:ring focus:ring-red-200 focus:ring-opacity-50"
                                        required>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-500 mb-2">Kecamatan</label>
                                    <input type="text" name="district" id="district"
                                        value="{{ $receiver['district'] ?? '' }}"
                                        class="w-full text-base px-4 py-3 bg-white border-gray-300 rounded-lg shadow-sm focus:border-red-300 focus:ring focus:ring-red-200 focus:ring-opacity-50"
                                        required>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-500 mb-2">Kota/Kab</label>
                                    <input type="text" name="city" id="city"
                                        value="{{ $receiver['city'] ?? '' }}"
                                        class="w-full text-base px-4 py-3 bg-white border-gray-300 rounded-lg shadow-sm focus:border-red-300 focus:ring focus:ring-red-200 focus:ring-opacity-50"
                                        required>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-500 mb-2">Provinsi</label>
                                    <input type="text" name="province" id="province"
                                        value="{{ $receiver['province_name'] ?? '' }}" placeholder="Provinsi"
                                        class="w-full text-base px-4 py-3 bg-white border-gray-300 rounded-lg shadow-sm focus:border-red-300 focus:ring focus:ring-red-200 focus:ring-opacity-50"
                                        required>
                                </div>
                            </div>
                            <p class="text-sm text-gray-500 italic">
                                <i class='bx bx-info-circle'></i> Gunakan "Cari Destinasi" untuk memilih area atau edit
                                manual field di atas.
                            </p>
                        </div>
                        {!! glossy_end() !!}

                    </div>

                    {{-- RIGHT COLUMN --}}
                    <div class="space-y-8 lg:col-span-3">

                        {{-- INFO TAMBAHAN (MOVED HERE) --}}
                        {!! glossy_start() !!}
                        <h2 class="text-xl font-semibold text-gray-800 flex items-center gap-2 mb-6">
                            <i class="bx bx-note text-3xl text-[#D9A5A5]"></i>
                            Info Tambahan
                        </h2>

                        <div class="space-y-5">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Catatan</label>
                                <textarea name="notes" rows="3"
                                    class="w-full text-base px-4 py-3 border-gray-300 rounded-lg shadow-sm focus:border-red-300 focus:ring focus:ring-red-200 focus:ring-opacity-50">{{ $order['notes'] ?? '' }}</textarea>
                            </div>

                            @if ($order['payment_method'] !== 'COD')
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Bukti Transfer (Jika ada
                                        perubahan)</label>
                                    <input type="file" name="transfer_proof" class="w-full text-base py-2">
                                    @if ($order['transfer_proof'])
                                        <div class="mt-3">
                                            <a href="{{ asset($order['transfer_proof']) }}" target="_blank"
                                                class="text-sm text-blue-600 underline">Lihat Bukti Saat Ini</a>
                                        </div>
                                    @endif
                                </div>
                            @endif
                        </div>
                        {!! glossy_end() !!}

                        {{-- DETAIL PRODUK & PENGIRIMAN --}}
                        {!! glossy_start() !!}
                        <h2 class="text-xl font-semibold text-gray-800 flex items-center gap-2 mb-6">
                            <i class="bx bx-package text-3xl text-[#D9A5A5]"></i>
                            Detail Produk & Pengiriman
                        </h2>

                        <div class="grid md:grid-cols-2 gap-6">
                            <div class="space-y-5">
                                {{-- Mitra/Actor Search --}}
                                <div class="relative">
                                    <label class="block text-sm font-medium text-gray-700 mb-2">
                                        <i class='bx bx-search-alt text-red-400'></i> Cari Distributor/Mitra
                                    </label>
                                    <input type="text" id="search-mitra" placeholder="Ketik kode atau nama mitra..."
                                        value="{{ $actor['code'] ?? '' }} - {{ $actor['name'] ?? '' }}"
                                        class="w-full text-base px-4 py-3 border-gray-300 rounded-lg shadow-sm focus:border-red-300 focus:ring focus:ring-red-200 focus:ring-opacity-50">
                                    <div id="mitra-result"
                                        class="absolute z-20 w-full bg-white border rounded-lg shadow-lg max-h-64 overflow-y-auto hidden mt-1">
                                    </div>
                                    <input type="hidden" name="code" id="mitra-code"
                                        value="{{ $actor['code'] ?? '' }}" required>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Produk (SKU)</label>
                                    <input type="text" name="product" value="{{ $defaultSku }}"
                                        class="w-full text-base px-4 py-3 border-gray-300 rounded-lg shadow-sm focus:border-red-300 focus:ring focus:ring-red-200 focus:ring-opacity-50"
                                        required>
                                </div>
                            </div>

                            <div class="space-y-5">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Metode Pembayaran</label>
                                    <select name="shipping_type"
                                        class="w-full text-base px-4 py-3 border-gray-300 rounded-lg shadow-sm focus:border-red-300 focus:ring focus:ring-red-200 focus:ring-opacity-50">
                                        <option value="COD"
                                            {{ ($order['payment_method'] ?? '') == 'COD' ? 'selected' : '' }}>COD</option>
                                        <option value="TRANSFER"
                                            {{ ($order['payment_method'] ?? '') == 'TRANSFER' ? 'selected' : '' }}>TRANSFER
                                        </option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="grid md:grid-cols-2 gap-6 mt-6">
                            <div class="space-y-5">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Kurir (Ekspedisi)</label>
                                    <div class="flex gap-2">
                                        <input type="text" name="courier" id="courier"
                                            value="{{ $shipment['logistic_name'] ?? ($generate['logistic_name'] ?? '') }}"
                                            class="w-full text-base px-4 py-3 border-gray-300 rounded-lg shadow-sm focus:border-red-300 focus:ring focus:ring-red-200 focus:ring-opacity-50"
                                            placeholder="Contoh: J&T Express" required>
                                        <button type="button" onclick="checkOngkir()" id="btn-cek-ongkir"
                                            class="px-4 py-2 bg-red-50 text-red-600 border border-red-200 rounded-lg font-medium hover:bg-red-100 transition whitespace-nowrap">
                                            <i class='bx bx-calculator'></i> Cek Ongkir
                                        </button>
                                    </div>
                                </div>
                                <div id="rates-container"
                                    class="hidden mt-4 p-4 bg-gray-50 rounded-xl border border-gray-200">
                                    <h3 class="text-sm font-bold text-gray-700 mb-3 flex items-center gap-2">
                                        <i class='bx bx-list-ul'></i> Pilih Layanan Kurir
                                    </h3>
                                    <div id="rates-list" class="space-y-2 max-h-48 overflow-y-auto pr-2">
                                        <!-- Rates will be injected here -->
                                    </div>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Ongkos Kirim
                                        (Input)</label>
                                    <input type="text" name="shipping_cost" id="shipping_cost"
                                        value="{{ $shipment['shipment_cost'] ?? '' }}"
                                        class="w-full text-base px-4 py-3 border-gray-300 rounded-lg shadow-sm focus:border-red-300 focus:ring focus:ring-red-200 focus:ring-opacity-50"
                                        required>
                                </div>
                            </div>

                            <div class="space-y-5">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Rate Name</label>
                                    <input type="text" name="rate_name" id="rate_name"
                                        value="{{ $generate['rate_name'] ?? '' }}"
                                        class="w-full text-base px-4 py-3 border-gray-300 rounded-lg shadow-sm focus:border-red-300 focus:ring focus:ring-red-200 focus:ring-opacity-50">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Total Pembayaran (Termasuk
                                        Ongkir)</label>
                                    <input type="text" name="total_payment" id="total_payment"
                                        value="{{ $order['total_payment'] ?? '' }}"
                                        class="w-full text-base px-4 py-3 border-gray-300 rounded-lg shadow-sm focus:border-red-300 focus:ring focus:ring-red-200 focus:ring-opacity-50"
                                        required>
                                    <input type="hidden" id="product_price" value="{{ $items[0]['price'] ?? 0 }}">
                                </div>
                            </div>
                        </div>

                        <div class="flex items-center justify-end gap-4 mt-8">
                            <button type="button" onclick="history.back()"
                                class="px-6 py-3 rounded-xl bg-gray-100 text-gray-600 font-semibold text-base hover:bg-gray-200 transition">
                                Batal
                            </button>
                            <button type="submit" id="submit-btn"
                                class="px-6 py-3 rounded-xl bg-gradient-to-r from-red-500 to-red-600 text-white font-semibold text-base hover:opacity-90 shadow-lg shadow-red-200 transition flex items-center gap-2">
                                <i class='bx bx-save text-xl'></i>
                                <span>Simpan Perubahan</span>
                            </button>
                        </div>

                        {!! glossy_end() !!}
                    </div>

                </div>
            </form>

        </div>
    </div>

    {{-- Error Toast --}}
    @if ($errors->any())
        <div id="toast-error"
            class="fixed bottom-5 right-5 z-50 max-w-md p-5 text-red-800 rounded-xl bg-red-50 border border-red-200 shadow-lg"
            role="alert">
            <div class="flex items-start">
                <i class='bx bx-error-circle text-2xl mr-3 mt-0.5'></i>
                <div>
                    <p class="font-semibold text-base mb-2">Terjadi Kesalahan</p>
                    <ul class="text-sm list-disc list-inside space-y-1">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
                <button type="button" onclick="document.getElementById('toast-error').remove()"
                    class="ml-4 text-red-500 hover:text-red-700">
                    <i class='bx bx-x text-2xl'></i>
                </button>
            </div>
        </div>
        <script>
            setTimeout(() => {
                const toast = document.getElementById('toast-error');
                if (toast) toast.remove();
            }, 10000);
        </script>
    @endif

    <script>
        // Destination Search
        const searchDest = document.getElementById('search-destinasi');
        const destResult = document.getElementById('destinasi-result');
        let searchTimeout;

        searchDest.addEventListener('input', function() {
            const q = this.value.trim();
            clearTimeout(searchTimeout);

            if (q.length < 3) {
                destResult.classList.add('hidden');
                return;
            }

            searchTimeout = setTimeout(async () => {
                try {
                    const res = await fetch('/areas/search?q=' + encodeURIComponent(q));
                    const data = await res.json();

                    if (!data || !data.length) {
                        destResult.innerHTML =
                            '<div class="p-4 text-gray-500 text-base">Tidak ditemukan</div>';
                        destResult.classList.remove('hidden');
                        return;
                    }

                    destResult.innerHTML = data.map(e => `
                        <div class="p-3 hover:bg-red-50 cursor-pointer border-b text-base"
                             onclick="selectDest('${e.id}', '${e.sub_district_name}', '${e.district_name}', '${e.city_name}', '${e.province_name}')">
                            <span class="font-medium">${e.sub_district_name}</span>, ${e.district_name}, ${e.city_name}
                            <span class="text-gray-400">(${e.zip_code})</span>
                        </div>
                    `).join('');
                    destResult.classList.remove('hidden');
                } catch (err) {
                    console.error('Search error:', err);
                }
            }, 300);
        });

        function selectDest(id, kel, kec, kota, prov) {
            document.getElementById('area_id').value = id;
            document.getElementById('subdistrict').value = kel;
            document.getElementById('district').value = kec;
            document.getElementById('city').value = kota;
            document.getElementById('province').value = prov;
            searchDest.value = `${kel}, ${kec}, ${kota}`;
            destResult.classList.add('hidden');
        }

        // Close dropdown when clicking outside
        document.addEventListener('click', function(e) {
            if (!e.target.closest('#search-destinasi') && !e.target.closest('#destinasi-result')) {
                destResult.classList.add('hidden');
            }
            if (!e.target.closest('#search-mitra') && !e.target.closest('#mitra-result')) {
                document.getElementById('mitra-result').classList.add('hidden');
            }
        });
    </script>

    <script>
        // Mitra/Actor Search
        const searchMitra = document.getElementById('search-mitra');
        const mitraResult = document.getElementById('mitra-result');
        const mitraCodeInput = document.getElementById('mitra-code');
        let mitraTimeout;

        searchMitra.addEventListener('input', function() {
            const q = this.value.trim();
            clearTimeout(mitraTimeout);

            if (q.length < 2) {
                mitraResult.classList.add('hidden');
                return;
            }

            mitraTimeout = setTimeout(async () => {
                try {
                    const res = await fetch('/draft-orders/actors/search?q=' + encodeURIComponent(q));
                    const data = await res.json();

                    if (!data || !data.length) {
                        mitraResult.innerHTML =
                            '<div class="p-4 text-gray-500 text-base">Tidak ditemukan</div>';
                        mitraResult.classList.remove('hidden');
                        return;
                    }

                    mitraResult.innerHTML = data.map(m => `
                        <div class="p-3 hover:bg-red-50 cursor-pointer border-b text-base"
                             onclick="selectMitra('${m.code}', '${m.name}')">
                            <span class="font-semibold text-red-600">${m.code}</span> - ${m.name}
                            <span class="text-sm text-gray-400">(${m.type})</span>
                        </div>
                    `).join('');
                    mitraResult.classList.remove('hidden');
                } catch (err) {
                    console.error('Mitra search error:', err);
                }
            }, 300);
        });

        function selectMitra(code, name) {
            searchMitra.value = `${code} - ${name}`;
            mitraCodeInput.value = code;
            mitraResult.classList.add('hidden');
        }
    </script>

    <script>
        // Form submit loading state
        document.querySelector('form').addEventListener('submit', function(e) {
            const btn = document.getElementById('submit-btn');
            btn.disabled = true;
            btn.innerHTML = '<i class="bx bx-loader-alt animate-spin text-xl"></i> <span>Menyimpan...</span>';
        });

        // Auto-format currency inputs
        function formatCurrency(input) {
            let value = input.value.replace(/[^0-9]/g, '');
            if (value) {
                input.value = parseInt(value).toLocaleString('id-ID');
            }
        }

        // Apply to shipping_cost and total_payment inputs if they contain formatted values
        document.querySelectorAll('input[name="shipping_cost"], input[name="total_payment"]').forEach(input => {
            // Format initial value if numeric
            let val = input.value.replace(/[^0-9]/g, '');
            if (val) {
                input.value = parseInt(val).toLocaleString('id-ID');
            }

            input.addEventListener('blur', function() {
                formatCurrency(this);
            });
        });

        async function checkOngkir() {
            const btn = document.getElementById('btn-cek-ongkir');
            const actorCode = document.getElementById('mitra-code').value;
            const areaId = document.getElementById('area_id').value;
            const productSku = document.querySelector('input[name="product"]').value;
            const isCod = document.querySelector('select[name="shipping_type"]').value === 'COD';

            const ratesContainer = document.getElementById('rates-container');
            const ratesList = document.getElementById('rates-list');

            if (!actorCode || !areaId) {
                alert('Pilih Distributor dan Destinasi terlebih dahulu!');
                return;
            }

            btn.disabled = true;
            btn.innerHTML = '<i class="bx bx-loader-alt animate-spin"></i> Loading...';
            ratesContainer.classList.add('hidden');

            try {
                const response = await fetch('{{ route('draft-orders.check-rates') }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({
                        actor_code: actorCode,
                        area_id: areaId,
                        product_sku: productSku,
                        is_cod: isCod
                    })
                });

                const result = await response.json();

                if (!result.success) {
                    alert(result.message || 'Gagal mengambil tarif');
                    return;
                }

                ratesList.innerHTML = result.data.map(rate => `
                    <div class="flex items-center justify-between p-3 bg-white border border-gray-100 rounded-lg hover:border-red-200 cursor-pointer transition"
                         onclick="selectRate('${rate.logistic_name}', '${rate.rate_name}', ${rate.price})">
                        <div class="flex items-center gap-3">
                            <img src="${rate.logistic_logo_url}" class="h-6 w-auto grayscale group-hover:grayscale-0" alt="${rate.logistic_name}">
                            <div>
                                <div class="text-sm font-bold text-gray-800">${rate.logistic_name}</div>
                                <div class="text-xs text-gray-500">${rate.rate_name} (${rate.min_duration}-${rate.max_duration} Hari)</div>
                            </div>
                        </div>
                        <div class="text-sm font-bold text-red-600">
                            Rp ${rate.price.toLocaleString('id-ID')}
                        </div>
                    </div>
                `).join('');

                ratesContainer.classList.remove('hidden');

            } catch (err) {
                console.error(err);
                alert('Terjadi kesalahan sistem');
            } finally {
                btn.disabled = false;
                btn.innerHTML = '<i class="bx bx-calculator"></i> Cek Ongkir';
            }
        }

        function selectRate(logistic, rateName, price) {
            document.getElementById('courier').value = logistic;
            document.getElementById('rate_name').value = rateName;

            const shippingInput = document.getElementById('shipping_cost');
            shippingInput.value = price.toLocaleString('id-ID');

            // Update total payment
            const productPrice = parseInt(document.getElementById('product_price').value) || 0;
            const total = productPrice + price;

            const totalInput = document.getElementById('total_payment');
            totalInput.value = total.toLocaleString('id-ID');

            // Hide rates
            document.getElementById('rates-container').classList.add('hidden');
        }
    </script>
@endsection