@extends('mobile.template.app')

@section('content')
    <link href="https://cdn.jsdelivr.net/npm/remixicon@4.3.0/fonts/remixicon.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">

    <style>
        .scroll-active {
            overflow-y: auto;
            height: 100vh;
            scroll-behavior: smooth;
        }

        #format-modal {
            background: rgba(185, 28, 28, 0.15);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            opacity: 0;
            pointer-events: none;
            margin-top: -20px;
            transition: opacity 0.35s cubic-bezier(0.25, 1, 0.5, 1);
        }

        #format-modal.active {
            opacity: 1;
            pointer-events: auto;
        }

        .modal-enter {
            transform: translateY(100%);
            opacity: 0;
        }

        .modal-active {
            transform: translateY(0);
            opacity: 1;
            transition: all 0.45s cubic-bezier(0.25, 1, 0.5, 1);
        }

        .modal-exit {
            transform: translateY(100%);
            opacity: 0;
            transition: all 0.40s cubic-bezier(0.25, 1, 0.5, 1);
        }

        @keyframes toast-bottom {
            0% {
                transform: translate(-50%, 120%);
                opacity: 0;
            }

            10% {
                transform: translate(-50%, 0);
                opacity: 1;
            }

            90% {
                transform: translate(-50%, 0);
                opacity: 1;
            }

            100% {
                transform: translate(-50%, 120%);
                opacity: 0;
            }
        }

        .toast {
            position: fixed;
            bottom: 24px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(220, 38, 38, 0.95);
            backdrop-filter: blur(8px);
            color: white;
            padding: 14px 22px;
            border-radius: 16px;
            font-size: 15px;
            font-weight: 500;
            width: 90%;
            max-width: 400px;
            box-shadow: 0 8px 28px rgba(0, 0, 0, 0.15);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            z-index: 9999;
            animation: toast-bottom 3s ease-in-out;
        }

        .toast.error {
            background: rgba(190, 18, 60, 0.95);
        }

        @keyframes fade-up {
            0% {
                opacity: 0;
                transform: translateY(24px);
            }

            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .fade-up {
            animation: fade-up 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
        }

        .fade-slow {
            animation: fade-up 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
        }

        textarea,
        input[type="file"] {
            border: 1.5px solid #fecaca;
            border-radius: 12px;
            font-size: 14px;
            color: #7f1d1d;
            transition: all 0.25s ease;
        }

        textarea:focus,
        input[type="file"]:focus {
            border-color: #dc2626;
            background: #fff;
            box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18);
            outline: none;
        }

        button {
            transition: all 0.25s ease;
        }

        button:active {
            transform: scale(0.98);
        }

        .preview-card {
            background: #ffffff;
            border-radius: 1.25rem;
            box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
            padding: 1.2rem 1.4rem;
            border: 1px solid #fecaca;
            opacity: 0;
            transform: translateY(20px);
            animation: fade-up 0.6s ease forwards;
        }

        .preview-section-title {
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: #b91c1c;
            margin-bottom: 4px;
        }

        .preview-row {
            display: flex;
            justify-content: space-between;
            padding: 6px 0;
            border-bottom: 1px solid #fee2e2;
        }

        .preview-row:last-child {
            border-bottom: none;
        }

        .preview-key {
            color: #9f1239;
            font-weight: 500;
            font-size: 13px;
        }

        .preview-value {
            color: #7f1d1d;
            font-weight: 600;
            font-size: 13px;
            text-align: right;
            max-width: 60%;
            word-break: break-word;
        }

        .badge {
            display: inline-flex;
            align-items: center;
            padding: 2px 8px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 500;
        }

        .badge-success {
            background: #fee2e2;
            color: #b91c1c;
        }

        .badge-danger {
            background: #fecaca;
            color: #7f1d1d;
        }
    </style>

    <div id="page-wrapper" class="min-h-screen p-4">
        <div class="max-w-lg mx-auto space-y-5">

            <div class="flex justify-between items-center">
                <h2 class="font-semibold text-gray-800 text-lg flex items-center gap-2">
                    <i class="ri-shopping-bag-3-line text-red-500 text-xl"></i>
                    Tambah Pesanan Manual
                </h2>
                <button id="open-format" class="flex items-center text-sm text-red-600 hover:underline font-medium">
                    <i class="ri-file-list-3-line mr-1 text-base"></i>
                    Lihat Format
                </button>
            </div>

            <div class="bg-white p-4 rounded-2xl shadow border border-gray-100">
                <label class="block font-semibold text-gray-700 mb-1 text-sm">
                    Data Pesanan
                </label>
                <p class="text-xs text-gray-500 mb-2">
                    Tempel data pesanan sesuai format COD / Transfer yang tertera di contoh.
                </p>
                <textarea id="order-text" rows="7" class="w-full p-3 text-sm"
                    placeholder="Contoh:

Produk: DRSBOX-01
Ongkir: Rp8.000
Ekspedisi: J&T Express - COD
Rate Name: Regular
Total Pembayaran: Rp177.100
Nama: ...
No HP: ...
Alamat Jalan: ...
Kelurahan: ...
Kecamatan: ...
Kab/Kota: ...
Provinsi: ...
Kode: MT-09"></textarea>

                <button id="btn-parse"
                    class="w-full mt-3 bg-gradient-to-r from-red-400 to-red-600 text-white font-semibold py-2.5 rounded-xl shadow hover:opacity-95 text-sm flex items-center justify-center gap-1">
                    <i class="ri-eye-line text-base"></i>
                    <span>Lihat Hasil Parsing</span>
                </button>
            </div>

            <div id="preview-section" class="hidden space-y-4 pb-8">
                <div class="bg-white p-5 rounded-2xl shadow border border-gray-100 fade-slow">
                    <div class="flex items-center mb-3 border-b pb-2 border-gray-200">
                        <i class="ri-file-text-line text-red-600 text-lg mr-2"></i>
                        <h3 class="text-gray-800 font-semibold text-base">Ringkasan Pesanan</h3>
                    </div>

                    <div id="order-preview" class="space-y-4 text-[15px] font-medium"></div>

                    <div id="upload-section" class="hidden mt-4 fade-up">
                        <label for="bukti-transfer" class="block font-medium text-gray-700 mb-1 text-sm">
                            Bukti Transfer
                        </label>
                        <p class="text-xs text-gray-500 mb-2">
                            Area tujuan berisiko tinggi / tidak terhubung WhatsApp / metode Transfer.
                            Silakan unggah bukti transfer sebelum menyimpan.
                        </p>
                        <input type="file" id="bukti-transfer" accept="image/*" class="block w-full p-2 text-sm">
                    </div>
                </div>

                <button id="btn-save"
                    class="w-full bg-gradient-to-r from-red-500 to-red-700 text-white font-semibold py-3 rounded-full shadow hover:opacity-95 text-sm flex items-center justify-center gap-1">
                    <i class="ri-save-3-line text-lg"></i>
                    <span>Simpan ke Draft</span>
                </button>
            </div>

            <div id="format-modal" class="fixed inset-0 z-50 flex flex-col justify-end hidden">
                <div
                    class="modal-sheet bg-white rounded-t-[32px] shadow-xl border-t border-gray-200 px-5 pt-4 pb-6 max-h-[85vh] overflow-y-auto modal-enter">
                    <div class="flex justify-center mb-3">
                        <div class="w-12 h-1.5 bg-gray-300 rounded-full"></div>
                    </div>

                    <div class="flex items-center justify-between mb-4">
                        <h2 class="text-base font-semibold text-gray-800 flex items-center gap-2">
                            <i class="ri-file-list-2-line text-red-500 text-xl"></i>
                            Contoh Format Pesanan
                        </h2>
                        <button id="close-format"
                            class="text-gray-400 hover:text-gray-700 text-xl rounded-full bg-gray-100 w-8 h-8 flex items-center justify-center">
                            <i class="ri-close-line"></i>
                        </button>
                    </div>

                    <div class="bg-gray-50 p-4 rounded-2xl shadow-sm mb-4 border border-gray-100">
                        <div class="flex justify-between items-center mb-2">
                            <strong class="text-sm flex items-center gap-1 text-gray-700">
                                <i class="ri-cash-line text-red-600"></i> Format COD
                            </strong>
                            <button
                                class="copy-btn flex items-center gap-1 bg-red-600 text-white px-3 py-1 rounded-lg text-xs hover:bg-red-700"
                                data-target="format-cod">
                                <i class="ri-file-copy-line text-sm"></i>
                                Salin
                            </button>
                        </div>
                        <pre id="format-cod" class="overflow-x-auto text-xs font-mono text-gray-700 whitespace-pre-wrap leading-relaxed">
Produk: DRSBOX-01
Ongkir: Rp8.000
Ekspedisi: J&T Express - COD
Rate Name: Regular
Total Pembayaran: Rp177.100
Nama: Kasri Hadi
No HP: 62881036414251
Alamat Jalan: Mulyodadi, Bambang Lipuro, Bantul, DI Yogyakarta, 55764
Kelurahan: Mulyodadi
Kecamatan: Bambang Lipuro
Kab/Kota: Bantul
Provinsi: DI Yogyakarta
Kode: MT-09
</pre>
                    </div>

                    <div class="bg-gray-50 p-4 rounded-2xl shadow-sm border border-gray-100">
                        <div class="flex justify-between items-center mb-2">
                            <strong class="text-sm flex items-center gap-1 text-gray-700">
                                <i class="ri-bank-card-line text-red-500"></i> Format Transfer
                            </strong>
                            <button
                                class="copy-btn flex items-center gap-1 bg-red-600 text-white px-3 py-1 rounded-lg text-xs hover:bg-red-700"
                                data-target="format-transfer">
                                <i class="ri-file-copy-line text-sm"></i>
                                Salin
                            </button>
                        </div>
                        <pre id="format-transfer" class="overflow-x-auto text-xs font-mono text-gray-700 whitespace-pre-wrap leading-relaxed">
Produk: DRSBOX-02
Ongkir: Rp12.000
Ekspedisi: JNE - Transfer
Rate Name: Regular
Total Pembayaran: Rp160.000
Nama: Andi Wijaya
No HP: 628987654321
Alamat Jalan: Jl. Cideng No.5
Kelurahan: Cideng
Kecamatan: Gambir
Kab/Kota: Jakarta Barat
Provinsi: DKI Jakarta
Kode: AG-01
</pre>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

    @include('mobile.draft_orders.manual-scripts')
@endsection