@extends('mobile.template.app')

@section('content')
    <style>
        /* Optional: biar tulisan lebih smooth */
        body {
            font-family: 'Inter', sans-serif;
        }
    </style>

    <div class="p-5 space-y-7 bg-gray-100 min-h-screen">

        <!-- HEADER -->
        <div class="flex items-center justify-between mb-1">
            <button onclick="history.back()" class="text-gray-700 text-xl active:scale-90 transition">
                <i class="ri-arrow-left-line"></i>
            </button>

            <h2 class="text-lg font-extrabold text-gray-800">Edit Order Marketplace</h2>

            <div class="w-6"></div>
        </div>


        <!-- FORM -->
        <form id="edit-form" class="space-y-7">


            <!-- CARD – INFORMASI ORDER -->
            <div class="bg-white rounded-2xl p-5 border border-gray-200 shadow-sm space-y-5">

                <p class="text-sm font-semibold text-gray-800">Informasi Order</p>

                <div class="space-y-4">

                    <!-- PLATFORM -->
                    <div>
                        <label class="block text-[13px] font-medium text-gray-700 mb-1">Platform</label>
                        <input type="text" name="platform"
                            class="w-full px-4 py-2.5 bg-white border border-gray-300 rounded-xl text-[14px] text-gray-900 
                               focus:ring-2 focus:ring-red-500 focus:border-red-500 outline-none"
                            value="{{ $order->marketplace->platform ?? '' }}">
                    </div>

                    <!-- NOMOR ORDER -->
                    <div>
                        <label class="block text-[13px] font-medium text-gray-700 mb-1">Nomor Order / Referensi</label>
                        <input type="text" name="reference_no"
                            class="w-full px-4 py-2.5 bg-white border border-gray-300 rounded-xl text-[14px] text-gray-900 
                               focus:ring-2 focus:ring-red-500 focus:border-red-500 outline-none"
                            value="{{ $order->reference_no }}">
                    </div>

                    <!-- NAMA PRODUK -->
                    <div>
                        <label class="block text-[13px] font-medium text-gray-700 mb-1">Nama Produk</label>
                        <input type="text" name="product_name"
                            class="w-full px-4 py-2.5 bg-white border border-gray-300 rounded-xl text-[14px] text-gray-900 
                               focus:ring-2 focus:ring-red-500 focus:border-red-500 outline-none"
                            value="{{ $order->details[0]->product_name }}">
                    </div>

                    <!-- SKU -->
                    <div>
                        <label class="block text-[13px] font-medium text-gray-700 mb-1">SKU</label>
                        <input type="text" name="sku"
                            class="w-full px-4 py-2.5 bg-white border border-gray-300 rounded-xl text-[14px] text-gray-900 
                               focus:ring-2 focus:ring-red-500 focus:border-red-500 outline-none"
                            value="{{ $order->details[0]->sku }}">
                    </div>

                    <!-- GRID: HARGA & ONGKIR -->
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-[13px] font-medium text-gray-700 mb-1">Harga Produk</label>
                            <input type="number" name="price"
                                class="w-full px-4 py-2.5 bg-white border border-gray-300 rounded-xl text-[14px] text-gray-900 
                                   focus:ring-2 focus:ring-red-500 focus:border-red-500 outline-none"
                                value="{{ $order->details[0]->price }}">
                        </div>

                        <div>
                            <label class="block text-[13px] font-medium text-gray-700 mb-1">Ongkir</label>
                            <input type="number" name="shipping_cost"
                                class="w-full px-4 py-2.5 bg-white border border-gray-300 rounded-xl text-[14px] text-gray-900 
                                   focus:ring-2 focus:ring-red-500 focus:border-red-500 outline-none"
                                value="{{ $order->marketplace->shipping_cost ?? 0 }}">
                        </div>
                    </div>

                    <!-- TOTAL PEMBAYARAN -->
                    <div>
                        <label class="block text-[13px] font-medium text-gray-700 mb-1">Total Pembayaran</label>
                        <input type="number" name="total_payment"
                            class="w-full px-4 py-2.5 bg-white border border-gray-300 rounded-xl text-[14px] text-gray-900 
                               focus:ring-2 focus:ring-red-500 focus:border-red-500 outline-none"
                            value="{{ $order->total_payment }}">
                    </div>

                </div>
            </div>



            <!-- CARD – INFORMASI PENERIMA -->
            <div class="bg-white rounded-2xl p-5 border border-gray-200 shadow-sm space-y-5">

                <p class="text-sm font-semibold text-gray-800">Informasi Penerima</p>

                <div class="space-y-4">

                    <!-- NAMA -->
                    <div>
                        <label class="block text-[13px] font-medium text-gray-700 mb-1">Nama Penerima</label>
                        <input type="text" name="receiver_name"
                            class="w-full px-4 py-2.5 bg-white border border-gray-300 rounded-xl text-[14px] text-gray-900 
                               focus:ring-2 focus:ring-red-500 focus:border-red-500 outline-none"
                            value="{{ $order->receiver->name }}">
                    </div>

                    <!-- HP -->
                    <div>
                        <label class="block text-[13px] font-medium text-gray-700 mb-1">Nomor HP</label>
                        <input type="text" name="receiver_phone"
                            class="w-full px-4 py-2.5 bg-white border border-gray-300 rounded-xl text-[14px] text-gray-900 
                               focus:ring-2 focus:ring-red-500 focus:border-red-500 outline-none"
                            value="{{ $order->receiver->phone_number }}">
                    </div>

                    <!-- ALAMAT -->
                    <div>
                        <label class="block text-[13px] font-medium text-gray-700 mb-1">Alamat Lengkap</label>

                        <!-- TEXTAREA PURE TAILWIND (VERSI NOMOR 5) -->
                        <textarea name="receiver_address" rows="4"
                            class="w-full px-4 py-2.5 bg-white
                               border border-gray-300 rounded-xl 
                               text-[14px] text-gray-900 leading-relaxed
                               focus:ring-2 focus:ring-red-500 focus:border-red-500
                               resize-none outline-none">{{ $order->receiver->address }}</textarea>
                    </div>

                    <!-- GRID DESA / KECAMATAN -->
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-[13px] font-medium text-gray-700 mb-1">Desa</label>
                            <input type="text" name="receiver_village"
                                class="w-full px-4 py-2.5 bg-white border border-gray-300 rounded-xl text-[14px] text-gray-900 
                                   focus:ring-2 focus:ring-red-500 focus:border-red-500 outline-none"
                                value="{{ $order->receiver->sub_district }}">
                        </div>

                        <div>
                            <label class="block text-[13px] font-medium text-gray-700 mb-1">Kecamatan</label>
                            <input type="text" name="receiver_district"
                                class="w-full px-4 py-2.5 bg-white border border-gray-300 rounded-xl text-[14px] text-gray-900 
                                   focus:ring-2 focus:ring-red-500 focus:border-red-500 outline-none"
                                value="{{ $order->receiver->district }}">
                        </div>
                    </div>

                    <!-- GRID KOTA / PROVINSI -->
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-[13px] font-medium text-gray-700 mb-1">Kota / Kabupaten</label>
                            <input type="text" name="receiver_city"
                                class="w-full px-4 py-2.5 bg-white border border-gray-300 rounded-xl text-[14px] text-gray-900 
                                   focus:ring-2 focus:ring-red-500 focus:border-red-500 outline-none"
                                value="{{ $order->receiver->city }}">
                        </div>

                        <div>
                            <label class="block text-[13px] font-medium text-gray-700 mb-1">Provinsi</label>
                            <input type="text" name="receiver_province"
                                class="w-full px-4 py-2.5 bg-white border border-gray-300 rounded-xl text-[14px] text-gray-900 
                                   focus:ring-2 focus:ring-red-500 focus:border-red-500 outline-none"
                                value="{{ $order->receiver->province }}">
                        </div>
                    </div>

                    <!-- KODE POS -->
                    <div>
                        <label class="block text-[13px] font-medium text-gray-700 mb-1">Kode Pos</label>
                        <input type="text" name="receiver_postal_code"
                            class="w-full px-4 py-2.5 bg-white border border-gray-300 rounded-xl text-[14px] text-gray-900 
                               focus:ring-2 focus:ring-red-500 focus:border-red-500 outline-none"
                            value="{{ $order->receiver->postal_code }}">
                    </div>

                </div>
            </div>



            <!-- CARD – INFORMASI TOKO -->
            <div class="bg-white rounded-2xl p-5 border border-gray-200 shadow-sm space-y-5">

                <p class="text-sm font-semibold text-gray-800">Informasi Toko</p>

                <div class="space-y-4">

                    <div>
                        <label class="block text-[13px] font-medium text-gray-700 mb-1">Nama Toko</label>
                        <input type="text" name="shop_name"
                            class="w-full px-4 py-2.5 bg-white border border-gray-300 rounded-xl text-[14px] text-gray-900 
                               focus:ring-2 focus:ring-red-500 focus:border-red-500 outline-none"
                            value="{{ $order->marketplace->shop_name }}">
                    </div>

                    <div>
                        <label class="block text-[13px] font-medium text-gray-700 mb-1">Kode Mitra</label>
                        <input type="text" name="actor_code"
                            class="w-full px-4 py-2.5 bg-white border border-gray-300 rounded-xl text-[14px] text-gray-900 
                               focus:ring-2 focus:ring-red-500 focus:border-red-500 outline-none"
                            value="{{ $order->csBonus->actor_code ?? '' }}">
                    </div>

                </div>
            </div>



            <!-- CARD – BUKTI ORDER -->
            <div class="bg-white rounded-2xl p-5 border border-gray-200 shadow-sm space-y-5">

                <p class="text-sm font-semibold text-gray-800">Bukti Order</p>

                @if ($order->order_proof)
                    <img src="{{ $order->order_proof }}"
                        class="rounded-xl border border-gray-200 shadow-sm max-h-56 w-full object-cover">
                @endif

                <input type="file" name="proof" accept="image/*" class="text-sm text-gray-700">
            </div>



            <!-- BUTTON -->
            <button type="submit"
                class="w-full bg-red-600 text-white py-3.5 rounded-xl font-semibold text-[15px]
                   shadow-md hover:bg-red-700 active:scale-95 transition">
                Simpan Perubahan
            </button>

        </form>

    </div>
@endsection
@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

    <script>
        const editForm = document.getElementById("edit-form");
        const toast = document.createElement("div");

        // ======== TOAST COMPONENT (PURE TAILWIND) =========
        toast.className =
            "fixed bottom-24 left-1/2 -translate-x-1/2 px-5 py-2 rounded-xl text-white shadow-lg " +
            "backdrop-blur-md opacity-0 transition-all duration-300 z-[999] hidden";

        document.body.appendChild(toast);

        function showToast(message, success = true) {
            toast.innerText = message;
            toast.style.backgroundColor = success ? "#16a34a" : "#dc2626";
            toast.classList.remove("hidden");

            setTimeout(() => {
                toast.classList.remove("opacity-0");

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

            }, 30);
        }

        // ======== HANDLE SUBMIT =========
        editForm.addEventListener("submit", async function(e) {
            e.preventDefault();

            const id = "{{ $order->id }}";
            const url = `/orders/marketplace/${id}`;
            const formData = new FormData(editForm);

            try {
                const response = await axios.post(url, formData, {
                    headers: {
                        "Content-Type": "multipart/form-data",
                        "X-HTTP-Method-Override": "PUT",
                    },
                });

                showToast("Order berhasil diperbarui!", true);

                setTimeout(() => {
                    window.location.href = "/orders/marketplace";
                }, 800);

            } catch (error) {
                const msg = error.response?.data?.message ?? "Gagal menyimpan data!";
                showToast(msg, false);
            }
        });
    </script>
@endpush