@extends('layouts.content')

@section('content')
    <main class="user-profile">
        <header class="profile-page-header">
            <div class="profile-header-content">
                <h1><i class="bi bi-person-circle me-2"></i>Profil Pengguna</h1>
                <p class="mb-0 mt-1">
                    Kelola data diri, alamat pengiriman, dan pantau status pesanan Anda di Tanjoeng Farm
                </p>
            </div>
        </header>

        <div class="profile-container">

            <!-- ==================== BOX PERINGATAN / ALERT VALIDASI ERROR ==================== -->
            @if ($errors->any())
                <div class="alert alert-danger alert-dismissible fade show border-0 mb-4 shadow-sm" role="alert" style="border-radius: 10px; background-color: #f8d7da; color: #842029;">
                    <div class="d-flex align-items-center">
                        <i class="bi bi-exclamation-triangle-fill fs-5 me-2"></i>
                        <ul class="mb-0 ps-3">
                            @foreach ($errors->all() as $error)
                                <li class="small fw-medium">{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif

            @if (session('success'))
                <div class="alert alert-success alert-dismissible fade show border-0 mb-4 shadow-sm" role="alert" style="border-radius: 10px; background-color: #d1e7dd; color: #0f5132;">
                    <div class="d-flex align-items-center">
                        <i class="bi bi-check-circle-fill fs-5 me-2"></i>
                        <span class="small fw-medium">{{ session('success') }}</span>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif

            @if (session('error'))
                <div class="alert alert-danger alert-dismissible fade show border-0 mb-4 shadow-sm" role="alert" style="border-radius: 10px; background-color: #f8d7da; color: #842029;">
                    <div class="d-flex align-items-center">
                        <i class="bi bi-exclamation-octagon-fill fs-5 me-2"></i>
                        <span class="small fw-medium">{{ session('error') }}</span>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif
            <!-- =============================================================================== -->

            <div class="profile-mobile-header">
                <!-- Avatar Mobile yang Interaktif -->
                <div style="position: relative; width: 55px; height: 55px; flex-shrink: 0;">
                    @if ($profile && $profile->avatar_url)
                        {{-- Sudah ada avatar: klik buka modal Ganti/Hapus --}}
                        <img src="{{ $profile->avatar_url }}" alt="Avatar"
                            style="width: 55px; height: 55px; border-radius: 50%; object-fit: cover; display: block;">
                        <button type="button"
                            data-bs-toggle="modal" data-bs-target="#avatarOptionsModal"
                            style="position: absolute; bottom: 0; right: 0; background: #cccccc; border: 2px solid white; border-radius: 50%; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; padding: 0; box-shadow: 0 2px 4px rgba(0,0,0,0.2);">
                            <i class="bi bi-pencil-fill" style="font-size: 9px; color: white;"></i>
                        </button>
                    @else
                        {{-- Belum ada avatar: klik buka file picker langsung --}}
                        <div class="rounded-circle d-flex align-items-center justify-content-center"
                             style="width: 55px; height: 55px; background-color: #e9ecef; color: #6c757d;">
                            <i class="bi bi-person-fill" style="font-size: 26px;"></i>
                        </div>
                        <form action="{{ route('profile.avatar') }}" method="POST" enctype="multipart/form-data" class="m-0">
                            @csrf
                            <label for="avatarMobileInput"
                                style="position: absolute; bottom: 0; right: 0; background: #c1c2c2; border: 2px solid white; border-radius: 50%; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; margin: 0; box-shadow: 0 2px 4px rgba(0,0,0,0.2);">
                                <i class="bi bi-pencil-fill" style="font-size: 9px; color: white;"></i>
                            </label>
                            <input type="file" name="avatar" id="avatarMobileInput"
                                accept="image/jpeg,image/png,image/jpg,image/gif"
                                style="display: none;" onchange="this.form.submit()">
                        </form>
                    @endif
                </div>
                <div style="min-width: 0; flex: 1 1 0;">
                    <h6 class="fw-bold mb-0 text-truncate">{{ $profile->full_name ?? ($user->username ?? 'Pengguna') }}</h6>
                    <p class="text-on-surface-variant small mb-0 text-truncate">{{ $user->email }}</p>
                </div>

                {{-- Tombol Logout Mobile --}}
                <form action="{{ route('logout') }}" method="POST" class="m-0" style="flex-shrink: 0;">
                    @csrf
                    <button type="submit"
                        onclick="return confirm('Yakin ingin keluar?')"
                        style="background: transparent; border: 1.5px solid #dc3545; color: #dc3545; border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;"
                        title="Keluar">
                        <i class="bi bi-box-arrow-right" style="font-size: 15px;"></i>
                    </button>
                </form>
            </div>

            <div class="profile-grid">
                <aside class="profile-sidebar-card">
                    <div class="text-center mb-4 position-relative">

                        <!-- WADAH LINGKARAN AVATAR (UKURAN TETAP 90x90) -->
                        <div class="profile-avatar position-relative d-inline-block" style="width: 100px; height: 100px;">
                            @if ($profile && $profile->avatar_url)
                                <img src="{{ $profile->avatar_url }}" alt="Avatar" class="rounded-circle"
                                    style="width: 100%; height: 100%; object-fit: cover;">

                                <!-- JIKA SUDAH ADA AVATAR: Klik pensil memicu Modal Pilihan (Ganti/Hapus) via Bootstrap -->
                                <button type="button" class="btn-edit-avatar" data-bs-toggle="modal" data-bs-target="#avatarOptionsModal"
                                    style="position: absolute; bottom: 0; right: 0; background: #edf0ef; border: 2px solid white; border-radius: 50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; color: white; cursor: pointer; z-index: 10; box-shadow: 0px 2px 4px rgba(0,0,0,0.15);">
                                    <i class="bi bi-pencil-fill" style="font-size: 11px;"></i>
                                </button>
                            @else
                                <div class="rounded-circle d-flex align-items-center justify-content-center"
                                     style="width: 100%; height: 100%; background-color: #e9ecef; color: #6c757d;">
                                    <i class="bi bi-person-fill" style="font-size: 50px; line-height: 1;"></i>
                                </div>

                                <!-- JIKA BELUM ADA AVATAR: Form HTML murni langsung submit otomatis saat gambar dipilih -->
                                <form action="{{ route('profile.avatar') }}" method="POST" enctype="multipart/form-data" class="m-0">
                                    @csrf
                                    <label for="avatarDirectInput" class="btn-edit-avatar"
                                        style="position: absolute; bottom: 0; right: 0; background: #b0b1b1; border: 2px solid white; border-radius: 50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; color: white; cursor: pointer; z-index: 10; box-shadow: 0px 2px 4px rgba(0,0,0,0.15); margin: 0;">
                                        <i class="bi bi-pencil-fill" style="font-size: 11px;"></i>
                                    </label>
                                    <input type="file" name="avatar" id="avatarDirectInput" accept="image/jpeg,image/png,image/jpg,image/gif" style="display: none;" onchange="this.form.submit()">
                                </form>
                            @endif
                        </div>

                        <h5 class="fw-bold mb-1 mt-2">{{ $profile->full_name ?? ($user->username ?? 'Pengguna') }}</h5>
                        <p class="text-on-surface-variant small mb-3">{{ $user->email }}</p>
                        <span class="badge bg-primary-container text-on-secondary-container px-3 py-2 rounded-pill small fw-medium">
                            <i class="bi bi-calendar3 me-1"></i> Bergabung
                            {{ $user->created_at->translatedFormat('d M Y') }}
                        </span>
                    </div>

                    <div class="profile-nav-menu">
                        <button class="profile-nav-item active" data-tab="data">
                            <i class="bi bi-person-vcard"></i> Data Diri
                        </button>
                        <button class="profile-nav-item" data-tab="address">
                            <i class="bi bi-geo-alt"></i> Alamat Saya
                        </button>
                        <button class="profile-nav-item" data-tab="orders">
                            <i class="bi bi-box-seam"></i> Pesanan Saya
                        </button>

                        <div class="profile-logout-wrapper">
                            <form id="logoutForm" action="{{ route('logout') }}" method="POST" style="display: none;">
                                @csrf
                            </form>
                            <button type="button" class="profile-btn-logout" id="logoutBtn" onclick="document.getElementById('logoutForm').submit();">
                                <i class="bi bi-box-arrow-right"></i> Keluar
                            </button>
                        </div>
                    </div>
                </aside>

                <main class="profile-content-card">
                    <!-- TAB DATA DIRI -->
                    <div id="tabData">
                        <div class="profile-section-header">
                            <div class="profile-section-title">Informasi Akun</div>
                            <button class="btn btn-sm profile-btn-pill-custom bg-primary-custom" data-bs-toggle="modal"
                                data-bs-target="#editProfileModal">
                                <i class="bi bi-pencil-square me-1"></i> Perbarui
                            </button>
                        </div>

                        <div class="profile-data-list">
                            <div class="profile-data-row">
                                <div class="profile-data-label"><i class="bi bi-person"></i> Username</div>
                                <div class="profile-data-value">{{ $user->username }}</div>
                            </div>
                            <div class="profile-data-row">
                                <div class="profile-data-label"><i class="bi bi-envelope"></i> Email</div>
                                <div class="profile-data-value">{{ $user->email }}</div>
                            </div>
                            <div class="profile-data-row">
                                <div class="profile-data-label"><i class="bi bi-person-badge"></i> Nama Lengkap</div>
                                <div class="profile-data-value">{{ $profile->full_name ?? '-' }}</div>
                            </div>
                            <div class="profile-data-row">
                                <div class="profile-data-label"><i class="bi bi-telephone"></i> Nomor Telepon</div>
                                <div class="profile-data-value">{{ $user->phone_number ?? '-' }}</div>
                            </div>
                            <div class="profile-data-row">
                                <div class="profile-data-label"><i class="bi bi-gender-ambiguous"></i> Jenis Kelamin</div>
                                <div class="profile-data-value">
                                    @if ($profile && $profile->gender)
                                        {{ $profile->gender == 'male' ? 'Laki-laki' : 'Perempuan' }}
                                    @else
                                        -
                                    @endif
                                </div>
                            </div>
                            <div class="profile-data-row">
                                <div class="profile-data-label"><i class="bi bi-calendar-heart"></i> Tanggal Lahir</div>
                                <div class="profile-data-value">
                                    {{ $profile && $profile->birth_date ? \Carbon\Carbon::parse($profile->birth_date)->translatedFormat('d M Y') : '-' }}
                                </div>
                            </div>
                            <div class="profile-data-row">
                                <div class="profile-data-label"><i class="bi bi-chat-text"></i> Bio</div>
                                <div class="profile-data-value">{{ $profile->bio ?? '-' }}</div>
                            </div>
                            <div class="profile-data-row">
                                <div class="profile-data-label"><i class="bi bi-calendar-check"></i> Tanggal Registrasi</div>
                                <div class="profile-data-value">{{ $user->created_at->translatedFormat('d M Y') }}</div>
                            </div>
                        </div>
                    </div>

                    <!-- TAB ALAMAT -->
                    <div id="tabAddress" style="display: none;">
                        <div class="profile-section-header">
                            <div class="profile-section-title">Daftar Alamat</div>
                            <a href="{{ route('addresses.create') }}" class="btn btn-sm profile-btn-pill-custom bg-primary-custom px-3" id="btnAddAddress">
                                <i class="bi bi-plus-lg me-1"></i> Tambah Baru
                            </a>
                        </div>

                        <div id="addressListContainer">
                            @if($addresses->isEmpty())
                                <div class="text-center py-5 text-secondary">
                                    <i class="bi bi-geo-alt fs-1 opacity-50"></i>
                                    <p class="mt-2">Belum ada alamat terdaftar.</p>
                                </div>
                            @else
                                @foreach($addresses as $addr)
                                    <div class="profile-address-item {{ $addr->is_primary ? 'default' : '' }}">
                                        <div class="d-flex justify-content-between align-items-start gap-2">
                                            <!-- Konten Teks: diberi min-width:0 agar bisa menyusut dan tidak mendorong tombol -->
                                            <div style="min-width: 0; flex: 1 1 0;">
                                                <div class="d-flex gap-2 align-items-center flex-wrap">
                                                    <h6 class="fw-bold mb-0">{{ $addr->address_label }}</h6>
                                                    @if($addr->is_primary)
                                                        <span class="badge bg-primary-custom rounded-pill text-white profile-btn-pill-custom px-2 py-1" style="font-size:10px">Utama</span>
                                                    @endif
                                                </div>
                                                <p class="small mb-1 mt-2 text-dark fw-medium" style="word-break: break-word; overflow-wrap: break-word;">{{ $addr->full_address }}</p>
                                                <p class="small mb-1 text-secondary">{{ $addr->village ? $addr->village . ', ' : '' }}{{ $addr->city }}, {{ $addr->postal_code }}</p>
                                                <p class="small text-secondary mb-0"><i class="bi bi-telephone me-1"></i> {{ $addr->recipient_phone }}</p>
                                            </div>

                                            <!-- Tombol Aksi: flex-shrink:0 agar tidak ikut menyusut -->
                                            <div class="profile-address-actions" style="flex-shrink: 0;">
                                                <a href="{{ route('addresses.edit', $addr->address_id) }}" class="profile-icon-btn edit-address" data-id="{{ $addr->address_id }}">
                                                    <i class="bi bi-pencil"></i>
                                                </a>

                                                <form action="{{ route('addresses.destroy', $addr->address_id) }}" method="POST" class="d-inline">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="profile-icon-btn text-danger delete-address" data-id="{{ $addr->address_id }}" onclick="return confirm('Apakah Anda yakin ingin menghapus alamat ini?')">
                                                        <i class="bi bi-trash3"></i>
                                                    </button>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            @endif
                        </div>
                    </div>

                    <!-- TAB RIWAYAT PESANAN -->
                    <div id="tabOrders" style="display: none;">
                        <div class="profile-section-header">
                            <div class="profile-section-title">Riwayat Pesanan</div>
                        </div>
                        <div id="orderFiltersContainer" class="profile-order-filters"></div>
                        <div id="ordersListContainer"></div>
                    </div>
                </main>
            </div>
        </div>

        <!-- MODAL EDIT PROFIL -->
        <div class="modal fade modal-modern" id="editProfileModal" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered m-3 m-sm-auto">
                <form action="{{ route('profile.update') }}" method="POST" class="modal-content">
                    @csrf
                    @method('PUT')
                    <div class="modal-header">
                        <h5 class="modal-title fw-bold">Ubah Profil</h5>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body p-4">
                        <div class="mb-3">
                            <label class="form-label fw-semibold small text-secondary">Username</label>
                            <input type="text" name="username" class="form-control-custom"
                                value="{{ old('username', $user->username) }}" required>
                            <small class="text-muted">Username dapat diubah</small>
                        </div>

                        <div class="mb-3">
                            <label class="form-label fw-semibold small text-secondary">Email</label>
                            <input type="email" class="form-control-custom" value="{{ $user->email }}" disabled readonly>
                            <small class="text-muted">Email tidak dapat diubah</small>
                        </div>

                        <div class="mb-3">
                            <label class="form-label fw-semibold small text-secondary">Nama Lengkap</label>
                            <input type="text" name="full_name" class="form-control-custom"
                                value="{{ old('full_name', $profile->full_name ?? '') }}">
                        </div>

                        <div class="mb-3">
                            <label class="form-label fw-semibold small text-secondary">Nomor Telepon</label>
                            <input type="tel" name="phone_number" class="form-control-custom"
                                value="{{ old('phone_number', $user->phone_number) }}" required
                                data-validate="phone" placeholder="08xxxxxxxxxx">
                            <div class="form-text text-muted small">11–13 digit angka.</div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label fw-semibold small text-secondary">Jenis Kelamin</label>
                            <select name="gender" class="form-control-custom">
                                <option value="">Pilih</option>
                                <option value="male" {{ old('gender', $profile->gender ?? '') == 'male' ? 'selected' : '' }}>Laki-laki</option>
                                <option value="female" {{ old('gender', $profile->gender ?? '') == 'female' ? 'selected' : '' }}>Perempuan</option>
                            </select>
                        </div>

                        <div class="mb-3">
                            <label class="form-label fw-semibold small text-secondary">Tanggal Lahir</label>
                            <input type="date" name="birth_date" class="form-control-custom"
    value="{{ old('birth_date', $profile && $profile->birth_date ? \Carbon\Carbon::parse($profile->birth_date)->format('Y-m-d') : '') }}">
                        </div>

                        <div class="mb-3">
                            <label class="form-label fw-semibold small text-secondary">Bio</label>
                            <textarea name="bio" class="form-control-custom" rows="3">{{ old('bio', $profile->bio ?? '') }}</textarea>
                        </div>
                    </div>
                    <div class="modal-footer border-0 pt-0 pb-4 pe-4">
                        <button type="submit" class="btn profile-btn-pill-custom bg-primary-custom px-4">Simpan</button>
                    </div>
                </form>
            </div>
        </div>

        <!-- MODAL AKSI PILIHAN AVATAR (MUNCUL HANYA SAAT FOTO PROFIL SUDAH ADA) -->
        <div class="modal fade" id="avatarOptionsModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-sm">
                <div class="modal-content" style="border-radius: 15px; border: none;">
                    <div class="modal-header border-0 pb-0">
                        <h6 class="modal-title fw-bold text-center w-100">Atur Foto Profil</h6>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body p-3 text-center">
                        <p class="small text-muted mb-3">Silakan pilih tindakan untuk foto profil Anda saat ini.</p>
                        <div class="d-grid gap-2">

                            <!-- PILIHAN 1: GANTI FOTO BARU -->
                            <form action="{{ route('profile.avatar') }}" method="POST" enctype="multipart/form-data" class="w-100">
                                @csrf
                                <label for="avatarChangeInput" class="btn btn-outline-success w-100 py-2 fw-medium mb-0" style="border: 1.5px solid #004d3d; color: #004d3d; background: transparent; border-radius: 8px; cursor: pointer;">
                                    <i class="bi bi-image me-2"></i>Ganti Foto Baru
                                </label>
                                <input type="file" name="avatar" id="avatarChangeInput" accept="image/jpeg,image/png,image/jpg,image/gif" style="display: none;" onchange="this.form.submit()">
                            </form>

                            <!-- PILIHAN 2: HAPUS FOTO SEKARANG -->
                            <form action="{{ route('profile.avatar.delete') }}" method="POST" class="w-100">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-danger w-100 py-2 fw-medium" style="border-radius: 8px; background-color: #dc3545; border: none;" onclick="return confirm('Apakah Anda yakin ingin menghapus foto profil ini?')">
                                    <i class="bi bi-trash3 me-2"></i>Hapus Foto Sekarang
                                </button>
                            </form>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    @php
        $formattedOrders = $orders->map(function($order) {
            $statusColor = '#f59e0b';
            $statusLabel = 'Menunggu';
            if ($order->order_status === 'processing') {
                $statusLabel = 'Dikemas';
                $statusColor = '#f59e0b';
            } elseif ($order->order_status === 'shipped') {
                $statusLabel = 'Dikirim';
                $statusColor = '#3b82f6';
            } elseif ($order->order_status === 'completed') {
                $statusLabel = 'Selesai';
                $statusColor = '#10b981';
            } elseif ($order->order_status === 'cancelled') {
                $statusLabel = 'Dibatalkan';
                $statusColor = '#ef4444';
            }

            return [
                'id' => $order->order_id,
                'invoice' => $order->invoice_number,
                'date' => $order->created_at->format('Y-m-d'),
                'total' => (int) $order->total_payment,
                'statusKey' => $order->order_status === 'pending' || $order->order_status === 'processing' ? 'dikemas' : ($order->order_status === 'shipped' ? 'dikirim' : ($order->order_status === 'completed' ? 'selesai' : 'dibatalkan')),
                'statusLabel' => $statusLabel,
                'statusColor' => $statusColor,
                'estimated' => (!empty($order->tracking_number) && trim($order->tracking_number) !== '') ? 'Resi: ' . $order->tracking_number : ($order->order_status === 'completed' ? 'Tiba di tujuan' : 'Diproses'),
                'items' => $order->details->sum('quantity'),
            ];
        });
    @endphp

    <script>
        // ==================== DATA DINAMIS UNTUK PESANAN ====================

        const ordersData = @json($formattedOrders);

        // Helper functions
        function formatNumber(n) {
            return n.toLocaleString("id-ID");
        }

        function formatDate(d) {
            return new Date(d).toLocaleDateString("id-ID", {
                day: "numeric",
                month: "long",
                year: "numeric"
            });
        }

        function escapeHtml(s) {
            if (!s) return "";
            return s.replace(/[&<>]/g, (m) => ({
                "&": "&amp;",
                "<": "&lt;",
                ">": "&gt;"
            } [m]));
        }



        // Render Pesanan
        let currentOrderFilter = "all";

        function renderOrders() {
            const counts = {
                all: ordersData.length,
                dikemas: ordersData.filter(o => o.statusKey === "dikemas").length,
                dikirim: ordersData.filter(o => o.statusKey === "dikirim").length,
                selesai: ordersData.filter(o => o.statusKey === "selesai").length,
                dibatalkan: ordersData.filter(o => o.statusKey === "dibatalkan").length,
            };
            document.getElementById("orderFiltersContainer").innerHTML = `
            <button class="profile-filter-chip ${currentOrderFilter === "all" ? "active" : ""}" data-filter="all">Semua <span class="count">${counts.all}</span></button>
            <button class="profile-filter-chip ${currentOrderFilter === "dikemas" ? "active" : ""}" data-filter="dikemas">Dikemas <span class="count">${counts.dikemas}</span></button>
            <button class="profile-filter-chip ${currentOrderFilter === "dikirim" ? "active" : ""}" data-filter="dikirim">Dikirim <span class="count">${counts.dikirim}</span></button>
            <button class="profile-filter-chip ${currentOrderFilter === "selesai" ? "active" : ""}" data-filter="selesai">Selesai <span class="count">${counts.selesai}</span></button>
            <button class="profile-filter-chip ${currentOrderFilter === "dibatalkan" ? "active" : ""}" data-filter="dibatalkan">Dibatalkan <span class="count">${counts.dibatalkan}</span></button>
        `;
            document.querySelectorAll(".profile-filter-chip").forEach(btn => {
                btn.addEventListener("click", () => {
                    currentOrderFilter = btn.dataset.filter;
                    renderOrders();
                });
            });
            let filtered = ordersData;
            if (currentOrderFilter !== "all") filtered = ordersData.filter(o => o.statusKey === currentOrderFilter);
            const container = document.getElementById("ordersListContainer");
            if (!filtered.length) {
                container.innerHTML =
                    '<div class="text-center py-5 text-secondary"><i class="bi bi-inbox fs-1 opacity-50"></i><p class="mt-2">Tidak ditemukan transaksi.</p></div>';
                return;
            }
            let html = "";
            filtered.forEach(order => {
                const reviewBtn = order.statusKey === "selesai" ?
                    `<button class="profile-btn-outline-sm review-btn ms-1" style="border:1.5px solid var(--primary); color:var(--primary); background:transparent; padding: 0.4rem 0.85rem;" data-id="${order.id}"><i class="bi bi-star"></i> Ulasan</button>` :
                    "";
                html += `
                <div class="profile-order-item">
                    <div class="profile-order-row-top">
                        <div>
                            <span class="fw-bold text-dark d-block d-sm-inline">${escapeHtml(order.invoice)}</span>
                            <span class="profile-order-status-badge ms-sm-1" style="background: ${order.statusColor}15; color: ${order.statusColor};">${order.statusLabel}</span>
                            <div class="small text-secondary mt-1"><i class="bi bi-calendar3 me-1"></i> ${formatDate(order.date)}</div>
                        </div>
                        <div class="text-end">
                            <span class="fw-bold text-primary-custom fs-6 mb-2 mb-sm-0 d-block">Rp ${formatNumber(order.total)}</span>
                            <div class="d-flex gap-1 justify-content-end">
                                <button class="profile-btn-outline-sm order-detail" data-id="${order.id}">Detail</button>
                                ${reviewBtn}
                            </div>
                        </div>
                    </div>
                    <div class="small text-secondary mt-3 pt-2" style="border-top: none !important;">
                        <i class="bi bi-truck me-1"></i> Estimasi: <span class="text-dark fw-medium">${order.estimated}</span>
                    </div>
                </div>
            `;
            });
            container.innerHTML = html;
            document.querySelectorAll(".order-detail").forEach(btn => btn.addEventListener("click", () => {
                const orderId = btn.dataset.id;
                window.location.href = "{{ route('order-history.show', ':id') }}".replace(':id', orderId);
            }));
            document.querySelectorAll(".review-btn").forEach(btn => btn.addEventListener("click", function() {
                const orderId = this.dataset.id;
                window.location.href = "{{ route('review.create', ':id') }}".replace(':id', orderId);
            }));
        }

        const tabs = document.querySelectorAll(".profile-nav-item");
        const panes = {
            data: document.getElementById("tabData"),
            address: document.getElementById("tabAddress"),
            orders: document.getElementById("tabOrders"),
        };
        tabs.forEach(tab => {
            tab.addEventListener("click", () => {
                tabs.forEach(t => t.classList.remove("active"));
                tab.classList.add("active");
                const target = tab.dataset.tab;
                Object.keys(panes).forEach(k => panes[k].style.display = "none");
                if (target === "data") panes.data.style.display = "block";
                else if (target === "address") {
                    panes.address.style.display = "block";
                } else if (target === "orders") {
                    panes.orders.style.display = "block";
                    renderOrders();
                }
                if (window.innerWidth <= 992) window.scrollTo({
                    top: document.querySelector(".profile-sidebar-card").offsetTop - 10,
                    behavior: "smooth"
                });
            });
        });

        // Inisialisasi tampilan awal
        panes.data.style.display = "block";
        panes.address.style.display = "none";
        panes.orders.style.display = "none";

        // Auto-select tab dari parameter URL
        const urlParams = new URLSearchParams(window.location.search);
        const urlTab = urlParams.get('tab');
        if (urlTab && panes[urlTab]) {
            const navItem = document.querySelector(`.profile-nav-item[data-tab="${urlTab}"]`);
            if (navItem) {
                navItem.click();
            }
        }
    </script>
@endsection