@extends('web.home.layout.master')

@section('content')
    @php
        $user = Auth::user();
        $userData = App\Models\User::where('id', $user->id)->first();
        $userimage = $userData->image ?? null;
        $address = $userData->address ?? 'Not Updated';
    @endphp

    <section class="modern-profile-section">
        <div class="profile-dashboard-container">
            <div class="dashboard-grid">
                
                <!-- Sidebar Layout (Left Column) -->
                <div class="dashboard-sidebar">
                    <!-- User Info Details Card -->
                    <div class="user-info-card text-center">
                        <div class="avatar-upload-container">
                            @if ($userimage == null)
                                <form id="profilepic_form" action="{{ route('american.plastic.user.upload.profile.pic') }}" method="post" enctype="multipart/form-data">
                                    @csrf
                                    <div class="avatar-preview-wrapper">
                                        <img id="profile-image" src="https://images.macrumors.com/article-new/2019/04/guest-user-250x250.jpg" alt="Profile" />
                                        <div class="avatar-overlay">
                                            <input type="file" id="upload-input" name="profile_img" accept="image/*" onchange="previewImage(event)" />
                                            <label for="upload-input" class="mb-0"><i class="fas fa-camera"></i></label>
                                        </div>
                                    </div>
                                </form>
                            @else
                                <form id="updated_profilepicform" action="{{ route('american.plastic.user.remove.profile.pic') }}" method="post">
                                    @csrf
                                    <div class="avatar-preview-wrapper">
                                        <img id="profile-image" src="{{ asset('assets/images/userpic/' . $userimage) }}" alt="Profile" />
                                        <input type="hidden" value="{{ $user->id }}" name="userid">
                                        <button type="submit" class="avatar-delete-btn" title="Remove Photo">
                                            <i class="fas fa-trash-alt"></i>
                                        </button>
                                    </div>
                                </form>
                            @endif
                        </div>
                        <h3 class="user-display-name mb-1">{{ auth()->user()->name }}</h3>
                        <p class="user-display-email mb-0">{{ auth()->user()->email }}</p>
                    </div>

                    <!-- Points Card -->
                    <div class="recycling-points-card">
                        <div class="points-bg-glow"></div>
                        <div class="points-inner-content">
                            <span class="points-label"><i class="fas fa-leaf me-1"></i> Recycling Points</span>
                            <h2 class="points-balance-val">{{ number_format($user->recycling_points ?? 0, 2) }}</h2>
                            <p class="points-description mb-0">Earn points by returning clean plastic waste!</p>
                        </div>
                    </div>

                    <!-- Sidebar Navigation Tabs -->
                    <div class="sidebar-nav-container">
                        <ul class="nav-menu-list mb-0">
                            <li class="nav-item nav-menu-item active" data-tab="order">
                                <i class="fas fa-shopping-bag"></i>
                                <span>Orders</span>
                            </li>
                            <li class="nav-item nav-menu-item" data-tab="account">
                                <i class="fas fa-user-circle"></i>
                                <span>Account Details</span>
                            </li>
                            <li class="nav-item nav-menu-item" data-tab="reward">
                                <i class="fas fa-tags"></i>
                                <span>My Rewards</span>
                                @if($hasNewVoucher)
                                    <span class="reward-new-indicator">New</span>
                                @endif
                            </li>
                            <li class="nav-item nav-menu-item logout-menu-item" id="logout">
                                <i class="fas fa-sign-out-alt"></i>
                                <span>Logout</span>
                            </li>
                        </ul>
                    </div>
                </div>

                <!-- Main Content Panel (Right Column) -->
                <div class="dashboard-content-panel">
                    @if (session('message'))
                        <div class="custom-alert-banner alert-success mb-4">
                            <div class="d-flex align-items-center">
                                <i class="fas fa-check-circle me-2"></i>
                                <span>{{ session('message') }}</span>
                            </div>
                        </div>
                    @endif

                    <!-- Orders Content Tab -->
                    <div class="tab-content" id="order" style="display: none;">
                        <div class="tab-header-block mb-4">
                            <h2 class="tab-content-title">Orders History</h2>
                            <p class="tab-content-subtitle">View and search through your past and current plastic transactions.</p>
                        </div>

                        <div class="orders-search-card mb-4">
                            <div class="search-input-group">
                                <i class="fas fa-search search-icon"></i>
                                <input type="text" id="ordersSearchInput" class="form-control-custom" placeholder="Search by Order ID or product name..." value="{{ request()->input('search') }}">
                                <div id="searchLoading" class="spinner-border text-primary spinner-border-sm" role="status" style="display: none; width: 1rem; height: 1rem; position: absolute; right: 15px; top: 15px;"></div>
                            </div>
                        </div>

                        <div class="orders-list-wrapper">
                            <div id="ordersListContainer">
                                @include('web.home.partials.orders_list', ['orderdata' => $orderdata])
                            </div>
                        </div>
                    </div>

                    <!-- Account Details Tab -->
                    <div class="tab-content" id="account" style="display: none;">
                        <div class="tab-header-block mb-4">
                            <h2 class="tab-content-title">Account Information</h2>
                            <p class="tab-content-subtitle">Review your account registration metadata and points statistics.</p>
                        </div>

                        <div class="account-details-grid">
                            <div class="detail-card">
                                <div class="detail-card-icon user-icon">
                                    <i class="fas fa-user"></i>
                                </div>
                                <div class="detail-card-info">
                                    <span class="detail-card-label">Username</span>
                                    <h4 class="detail-card-value">{{ $user->name ?? 'Not set' }}</h4>
                                </div>
                            </div>

                            <div class="detail-card">
                                <div class="detail-card-icon email-icon">
                                    <i class="fas fa-envelope"></i>
                                </div>
                                <div class="detail-card-info">
                                    <span class="detail-card-label">Email Address</span>
                                    <h4 class="detail-card-value">{{ $user->email ?? 'Not set' }}</h4>
                                </div>
                            </div>

                            <div class="detail-card">
                                <div class="detail-card-icon points-icon">
                                    <i class="fas fa-coins"></i>
                                </div>
                                <div class="detail-card-info">
                                    <span class="detail-card-label">Recycling Points</span>
                                    <h4 class="detail-card-value text-emerald">{{ number_format($user->recycling_points ?? 0, 2) }}</h4>
                                </div>
                            </div>

                            <div class="detail-card">
                                <div class="detail-card-icon date-icon">
                                    <i class="fas fa-calendar-check"></i>
                                </div>
                                <div class="detail-card-info">
                                    <span class="detail-card-label">Member Since</span>
                                    <h4 class="detail-card-value">
                                        @php
                                            $created_at = $user->created_at ?? null;
                                            $formatted_date = $created_at ? date('M d, Y', strtotime($created_at)) : 'N/A';
                                        @endphp
                                        {{ $formatted_date }}
                                    </h4>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- My Rewards Tab -->
                    <div class="tab-content" id="reward" style="display: none;">
                        <div class="tab-header-block mb-4">
                            <h2 class="tab-content-title">My Rewards & Vouchers</h2>
                            <p class="tab-content-subtitle">Redeem your codes during checkout to receive special discounts on your order.</p>
                        </div>

                        <div class="row g-4" style="display: flex; flex-wrap: wrap; margin: -10px;">
                            @forelse($activeVouchers as $voucher)
                                <div class="col-md-6 mb-3" style="flex: 0 0 50%; max-width: 50%; padding: 10px; box-sizing: border-box;">
                                    <div class="reward-coupon-ticket">
                                        <div class="ticket-header-gradient">
                                            <div class="d-flex justify-content-between align-items-center w-100" style="display: flex !important; justify-content: space-between !important; align-items: center !important;">
                                                <h3 class="ticket-discount-amount mb-0">
                                                    {{ $voucher->type === 'fixed' ? 'LKR ' . number_format($voucher->value, 0) . ' OFF' : floatval($voucher->value) . '% OFF' }}
                                                </h3>
                                                <span class="ticket-status-pill">Active</span>
                                            </div>
                                        </div>
                                        <div class="ticket-divider-strip">
                                            <div class="ticket-notch notch-left"></div>
                                            <div class="ticket-notch notch-right"></div>
                                            <div class="ticket-dash-border"></div>
                                        </div>
                                        <div class="ticket-body-content">
                                            <div class="ticket-code-row mb-3" style="display: flex !important; align-items: center !important; gap: 10px !important;">
                                                <code class="ticket-code-text">{{ $voucher->code }}</code>
                                                <button class="ticket-copy-action-btn" onclick="copyVoucherCode('{{ $voucher->code }}', this)">
                                                    <i class="far fa-copy me-1"></i>Copy
                                                </button>
                                            </div>
                                            <div class="ticket-terms-footer" style="display: flex !important; justify-content: space-between !important; font-size: 0.825rem; color: #64748b;">
                                                <span>Min Spend: <strong>LKR {{ number_format($voucher->min_spend, 0) }}</strong></span>
                                                <span>Expires: <strong>{{ $voucher->expiry_date->format('M d, Y') }}</strong></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @empty
                                @php $shownFromNotification = false; @endphp
                                @foreach($voucherNotifications as $noti)
                                    @php
                                        preg_match('/code:\s*(.*?)\s*\(/i', $noti->message, $matches);
                                        $voucherCode = isset($matches[1]) ? trim($matches[1]) : null;
                                        if (!$voucherCode) {
                                            preg_match('/code:\s*([^\s\.]+)/i', $noti->message, $matches);
                                            $voucherCode = isset($matches[1]) ? trim($matches[1]) : null;
                                        }
                                    @endphp
                                    @if($voucherCode)
                                        @php
                                            $shownFromNotification = true;
                                            $actualVoucher = \App\Models\Voucher::where('code', $voucherCode)->first();
                                        @endphp
                                        <div class="col-md-6 mb-3" style="flex: 0 0 50%; max-width: 50%; padding: 10px; box-sizing: border-box;">
                                            <div class="reward-coupon-ticket">
                                                <div class="ticket-header-gradient">
                                                    <div class="d-flex justify-content-between align-items-center w-100" style="display: flex !important; justify-content: space-between !important; align-items: center !important;">
                                                        <h3 class="ticket-discount-amount mb-0">
                                                            @if($actualVoucher)
                                                                {{ $actualVoucher->type === 'fixed' ? 'LKR ' . number_format($actualVoucher->value, 0) . ' OFF' : floatval($actualVoucher->value) . '% OFF' }}
                                                            @else
                                                                Special Discount
                                                            @endif
                                                        </h3>
                                                        <span class="ticket-status-pill {{ ($actualVoucher && $actualVoucher->status == 'active') ? '' : 'inactive' }}">
                                                            @if($actualVoucher)
                                                                {{ ucfirst($actualVoucher->status) }}
                                                            @else
                                                                Received
                                                            @endif
                                                        </span>
                                                    </div>
                                                </div>
                                                <div class="ticket-divider-strip">
                                                    <div class="ticket-notch notch-left"></div>
                                                    <div class="ticket-notch notch-right"></div>
                                                    <div class="ticket-dash-border"></div>
                                                </div>
                                                <div class="ticket-body-content">
                                                    <div class="ticket-code-row mb-3" style="display: flex !important; align-items: center !important; gap: 10px !important;">
                                                        <code class="ticket-code-text">{{ $voucherCode }}</code>
                                                        <button class="ticket-copy-action-btn" onclick="copyVoucherCode('{{ $voucherCode }}', this)">
                                                            <i class="far fa-copy me-1"></i>Copy
                                                        </button>
                                                    </div>
                                                    @if($noti->message)
                                                        <p class="mb-0 text-muted small" style="line-height: 1.4; font-size: 0.8rem; border-top: 1px dashed #e2e8f0; padding-top: 8px; margin-top: 8px;">
                                                            {{ $noti->message }}
                                                        </p>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                @endforeach

                                @if(!$shownFromNotification)
                                    <div class="col-12 py-5 text-center w-100">
                                        <div class="empty-vouchers-box">
                                            <i class="fas fa-gift mb-3"></i>
                                            <h4 class="mb-1">No Active Vouchers</h4>
                                            <p class="text-muted mb-0">Vouchers will appear here when you earn recycling rewards.</p>
                                        </div>
                                    </div>
                                @endif
                            @endforelse
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>

    <style>
        @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

        /* Design Aesthetics Variables */
        :root {
            --dashboard-font: 'Plus Jakarta Sans', sans-serif;
            --bg-body-color: #f8fafc;
            --card-bg-color: #ffffff;
            --primary-accent: #ffffffff;
            --primary-accent-dark: #1d4ed8;
            --success-accent: #10b981;
            --text-heading: #0f172a;
            --text-body: #475569;
            --text-light: #94a3b8;
            --border-tint: #f1f5f9;
            --border-hard: #e2e8f0;
            --shadow-subtle: 0 4px 20px rgba(0, 0, 0, 0.03);
            --shadow-strong: 0 10px 30px rgba(0, 0, 0, 0.05);
        }

        .modern-profile-section {
            font-family: var(--dashboard-font);
            background-color: var(--bg-body-color);
            background-image: radial-gradient(var(--border-hard) 1px, transparent 1px);
            background-size: 24px 24px;
            padding: 3rem 0;
            min-height: 80vh;
        }

        .profile-dashboard-container {
            max-width: auto;
            margin: 0 auto;
            padding: 0 5.5rem;
        }

        .dashboard-grid {
            display: grid;
            grid-template-columns: 300px 1fr;
            gap: 2rem;
            align-items: start;
        }

        /* Sidebar Styling */
        .dashboard-sidebar {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        .user-info-card {
            background-color: var(--card-bg-color);
            border-radius: 20px;
            box-shadow: var(--shadow-subtle);
            border: 1px solid var(--border-tint);
            padding: 2rem 1.5rem;
        }

        .avatar-upload-container {
            margin-bottom: 1.25rem;
        }

        .avatar-preview-wrapper {
            position: relative;
            width: 110px;
            height: 110px;
            margin: 0 auto;
            border-radius: 50%;
            overflow: hidden;
            border: 4px solid var(--card-bg-color);
            box-shadow: 0 8px 20px rgba(0,0,0,0.06);
            transition: transform 0.3s ease;
        }

        .avatar-preview-wrapper:hover {
            transform: scale(1.02);
        }

        .avatar-preview-wrapper img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .avatar-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(15, 23, 42, 0.6);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.25s ease;
        }

        .avatar-preview-wrapper:hover .avatar-overlay {
            opacity: 1;
        }

        .avatar-overlay input {
            display: none;
        }

        .avatar-overlay label {
            color: #ffffff;
            font-size: 1.25rem;
            cursor: pointer;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .avatar-delete-btn {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            background-color: rgba(239, 68, 68, 0.9);
            color: #ffffff;
            border: none;
            padding: 4px 0;
            font-size: 0.8rem;
            cursor: pointer;
            transition: background-color 0.2s ease;
        }

        .avatar-delete-btn:hover {
            background-color: rgb(220, 38, 38);
        }

        .user-display-name {
            font-size: 1.15rem;
            font-weight: 700;
            color: var(--text-heading);
            letter-spacing: -0.2px;
        }

        .user-display-email {
            font-size: 0.85rem;
            color: var(--text-body);
        }

        /* Points Card */
        .recycling-points-card {
            background: linear-gradient(135deg, #85c226 0%, #85c226 100%);
            border-radius: 20px;
            padding: 1.75rem 1.5rem;
            position: relative;
            overflow: hidden;
            box-shadow: 0 10px 25px rgba(16, 185, 129, 0.15);
            color: #ffffff;
        }

        .points-bg-glow {
            position: absolute;
            top: -20px;
            right: -20px;
            width: 90px;
            height: 90px;
            background: rgba(255, 255, 255, 0.15);
            border-radius: 50%;
            filter: blur(20px);
        }

        .points-inner-content {
            position: relative;
            z-index: 2;
        }

        .points-label {
            font-size: 0.825rem;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            opacity: 0.9;
            font-weight: 600;
        }

        .points-balance-val {
            font-size: 2.25rem;
            font-weight: 800;
            margin: 0.5rem 0;
            letter-spacing: -1px;
            text-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }

        .points-description {
            font-size: 0.775rem;
            opacity: 0.8;
            line-height: 1.35;
        }

        /* Sidebar Navigation Menu */
        .sidebar-nav-container {
            background-color: var(--card-bg-color);
            border-radius: 20px;
            padding: 0.75rem;
            box-shadow: var(--shadow-subtle);
            border: 1px solid var(--border-tint);
        }

        .nav-menu-list {
            list-style: none;
            padding-left: 0;
        }

        .nav-menu-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 16px;
            border-radius: 12px;
            color: var(--text-body);
            font-weight: 600;
            font-size: 0.925rem;
            cursor: pointer;
            transition: all 0.2s ease;
            margin-bottom: 4px;
        }

        .nav-menu-item:last-child {
            margin-bottom: 0;
        }

        .nav-menu-item i {
            font-size: 1.1rem;
            color: var(--text-light);
            transition: color 0.2s ease;
        }

        .nav-menu-item:hover {
            background-color: var(--border-tint);
            color: var(--text-heading);
        }

        .nav-menu-item:hover i {
            color: var(--text-body);
        }

        .nav-menu-item.active {
               background-color: #85c226;
    color: #ffffff;
        }

        .nav-menu-item.active i {
            color: var(--primary-accent);
        }

        .logout-menu-item {
            color: #ef4444 !important;
        }

        .logout-menu-item i {
            color: #f87171 !important;
        }

        .logout-menu-item:hover {
            background-color: #fef2f2 !important;
        }

        .reward-new-indicator {
            background-color: #ef4444;
            color: #ffffff;
            font-size: 0.7rem;
            padding: 2px 8px;
            border-radius: 50px;
            font-weight: 700;
            margin-left: auto;
            text-transform: uppercase;
            animation: pulse-reward 2s infinite;
        }

        @keyframes pulse-reward {
            0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
            70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
            100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
        }

        /* Right Content Panel Styling */
        .dashboard-content-panel {
            background-color: var(--card-bg-color);
            border-radius: 20px;
            box-shadow: var(--shadow-subtle);
            border: 1px solid var(--border-tint);
            padding: 2.5rem;
            min-height: 500px;
        }

        .tab-header-block {
            border-bottom: 1px solid var(--border-tint);
            padding-bottom: 1.25rem;
        }

        .tab-content-title {
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--text-heading);
            letter-spacing: -0.4px;
            margin-bottom: 0.25rem;
        }

        .tab-content-subtitle {
            font-size: 0.9rem;
            color: var(--text-body);
            margin-bottom: 0;
        }

        /* Custom Alerts */
        .custom-alert-banner {
            border-radius: 12px;
            padding: 1rem 1.25rem;
            font-size: 0.9rem;
            font-weight: 500;
            border: 1px solid transparent;
        }

        .custom-alert-banner.alert-success {
            background-color: #ecfdf5;
            border-color: #a7f3d0;
            color: #065f46;
        }

        /* Orders Search styling */
        .orders-search-card {
            position: relative;
        }

        .search-input-group {
            position: relative;
        }

        .search-input-group .search-icon {
            position: absolute;
            left: 16px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-light);
            font-size: 0.95rem;
        }

        .form-control-custom {
            display: block;
            width: 100%;
            padding: 0.85rem 1rem 0.85rem 2.85rem;
            font-size: 0.925rem;
            font-weight: 500;
            line-height: 1.5;
            color: var(--text-heading);
            background-color: #f8fafc;
            border: 1px solid var(--border-hard);
            border-radius: 12px;
            transition: all 0.2s ease-in-out;
        }

        .form-control-custom:focus {
            background-color: var(--card-bg-color);
            border-color: var(--primary-accent);
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.08);
            outline: none;
        }

        /* Modern Orders Card List */
        .orders-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1.25rem;
        }

        .order-card-modern {
            background: var(--card-bg-color);
            border: 1px solid var(--border-hard);
            border-radius: 16px;
            overflow: hidden;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .order-card-modern:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-strong);
            border-color: var(--text-light);
        }

        .order-card-header {
            background-color: #fafbfc;
            padding: 1rem 1.5rem;
            border-bottom: 1px solid var(--border-tint);
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 10px;
        }

        .order-id-badge {
            font-size: 0.825rem;
            font-weight: 700;
            color: var(--text-heading);
            background-color: #e2e8f0;
            padding: 4px 10px;
            border-radius: 6px;
            font-family: monospace;
        }

        .order-date-badge {
            font-size: 0.825rem;
            color: var(--text-body);
            font-weight: 500;
        }

        .order-card-body {
            padding: 1.5rem;
            display: flex;
            gap: 1.5rem;
            align-items: center;
        }

        .product-thumb {
            width: 70px;
            height: 70px;
            border-radius: 12px;
            overflow: hidden;
            background-color: var(--border-tint);
            flex-shrink: 0;
            border: 1px solid var(--border-tint);
        }

        .product-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .order-summary-details {
            flex-grow: 1;
        }

        .product-name-title {
            font-size: 1.05rem;
            font-weight: 700;
            color: var(--text-heading);
            margin-bottom: 0.25rem;
        }

        .product-meta-row {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.825rem;
            color: var(--text-body);
        }

        .meta-separator {
            color: var(--text-light);
        }

        .order-price-val {
            font-size: 1.15rem;
            font-weight: 800;
            color: #85c226;
        }

        .order-card-footer {
            padding: 0.75rem 1.5rem;
            background-color: #fafbfc;
            border-top: 1px solid var(--border-tint);
            display: flex;
            justify-content: flex-end;
        }

        .order-action-btn {
            display: inline-flex;
            align-items: center;
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--text-heading);
            text-decoration: none;
            background-color: var(--card-bg-color);
            border: 1px solid var(--border-hard);
            padding: 6px 14px;
            border-radius: 8px;
            transition: all 0.2s ease;
        }

        .order-action-btn:hover {
            background-color: var(--text-heading);
            color: #ffffff;
            border-color: var(--text-heading);
        }

        .no-orders-state, .empty-vouchers-box {
            padding: 3rem 1.5rem;
            text-align: center;
        }

        .empty-icon-box i, .empty-vouchers-box i {
            font-size: 3rem;
            color: var(--text-light);
            opacity: 0.5;
        }

        .no-orders-state h4, .empty-vouchers-box h4 {
            font-size: 1.15rem;
            font-weight: 700;
            color: var(--text-heading);
            margin-top: 1rem;
        }

        .no-orders-state p, .empty-vouchers-box p {
            font-size: 0.9rem;
            color: var(--text-body);
        }

        /* Account Details layout */
        .account-details-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1.25rem;
        }

        .detail-card {
            background-color: #fafbfc;
            border: 1px solid var(--border-hard);
            border-radius: 16px;
            padding: 1.25rem 1.5rem;
            display: flex;
            align-items: center;
            gap: 15px;
            transition: border-color 0.2s ease;
        }

        .detail-card:hover {
            border-color: var(--text-light);
        }

        .detail-card-icon {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.25rem;
            flex-shrink: 0;
        }

        .detail-card-icon.user-icon {
            background-color: #eff6ff;
            color: #3b82f6;
        }

        .detail-card-icon.email-icon {
            background-color: #f5f3ff;
            color: #8b5cf6;
        }

        .detail-card-icon.points-icon {
            background-color: #ecfdf5;
            color: #10b981;
        }

        .detail-card-icon.date-icon {
            background-color: #fffbeb;
            color: #f59e0b;
        }

        .detail-card-info {
            flex-grow: 1;
        }

        .detail-card-label {
            font-size: 0.775rem;
            text-transform: uppercase;
            font-weight: 700;
            color: var(--text-light);
            letter-spacing: 0.5px;
            display: block;
            margin-bottom: 2px;
        }

        .detail-card-value {
            font-size: 1.05rem;
            font-weight: 700;
            color: var(--text-heading);
            margin-bottom: 0;
            word-break: break-all;
        }

        .text-emerald {
            color: #10b981 !important;
        }

        /* Rewards Vouchers & Coupons Styles */
        .reward-coupon-ticket {
            background-color: var(--card-bg-color);
            border: 1px solid var(--border-hard);
            border-radius: 18px;
            overflow: visible;
            position: relative;
            box-shadow: var(--shadow-subtle);
            transition: all 0.3s ease;
        }

        .reward-coupon-ticket:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-strong);
            border-color: var(--text-light);
        }

        .ticket-header-gradient {
            padding: 1.25rem 1.5rem;
            background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
            border-top-left-radius: 17px;
            border-top-right-radius: 17px;
            display: flex;
        }

        .ticket-discount-amount {
            font-size: 1.25rem;
            font-weight: 800;
            color: #1e40af;
            letter-spacing: -0.4px;
        }

        .ticket-status-pill {
            font-size: 0.725rem;
            font-weight: 700;
            text-transform: uppercase;
            background-color: #dcfce7;
            color: #15803d;
            padding: 4px 10px;
            border-radius: 50px;
            letter-spacing: 0.3px;
        }

        .ticket-status-pill.inactive {
            background-color: #f1f5f9;
            color: #475569;
        }

        .ticket-divider-strip {
            position: relative;
            height: 16px;
            background-color: transparent;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .ticket-notch {
            position: absolute;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background-color: var(--bg-body-color);
            top: 0;
            z-index: 2;
        }

        .ticket-notch.notch-left {
            left: -9px;
            border-right: 1px solid var(--border-hard);
        }

        .ticket-notch.notch-right {
            right: -9px;
            border-left: 1px solid var(--border-hard);
        }

        .ticket-dash-border {
            width: 90%;
            border-top: 2px dashed var(--border-hard);
        }

        .ticket-body-content {
            padding: 1.25rem 1.5rem;
        }

        .ticket-code-text {
            display: block;
            flex-grow: 1;
            font-family: monospace;
            font-size: 1.15rem;
            font-weight: 800;
            color: var(--text-heading);
            background-color: #f8fafc;
            padding: 8px 12px;
            border-radius: 8px;
            border: 1px dashed var(--border-hard);
            text-align: center;
            letter-spacing: 0.8px;
        }

        .ticket-copy-action-btn {
            flex-shrink: 0;
            background-color: var(--primary-accent);
            color: #ffffff;
            border: none;
            font-weight: 700;
            font-size: 0.85rem;
            padding: 9px 18px;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.2s ease;
        }

        .ticket-copy-action-btn:hover {
            background-color: var(--primary-accent-dark);
        }

        /* Pagination overrides */
        .pagination-wrapper {
            display: flex;
            justify-content: center;
        }

        .pagination-wrapper .pagination {
            display: flex;
            padding-left: 0;
            list-style: none;
            border-radius: 0.25rem;
            gap: 6px;
        }

        .pagination-wrapper .pagination li a,
        .pagination-wrapper .pagination li span {
            position: relative;
            display: block;
            padding: 8px 14px;
            margin-left: -1px;
            line-height: 1.25;
            color: var(--text-body);
            background-color: var(--card-bg-color);
            border: 1px solid var(--border-hard);
            text-decoration: none;
            border-radius: 8px;
            font-weight: 600;
            font-size: 0.875rem;
            transition: all 0.2s ease;
        }

        .pagination-wrapper .pagination li.active span {
            background-color: var(--primary-accent);
            color: #ffffff;
            border-color: var(--primary-accent);
        }

        .pagination-wrapper .pagination li a:hover {
            background-color: var(--border-tint);
            color: var(--text-heading);
        }

        /* Responsive styling */
        @media (max-width: 991px) {
            .dashboard-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 767px) {
            .account-details-grid {
                grid-template-columns: 1fr;
            }
            .order-card-body {
                flex-direction: column;
                align-items: flex-start;
                gap: 12px;
            }
            .product-thumb {
                width: 60px;
                height: 60px;
            }
            .col-md-6 {
                flex: 0 0 100% !important;
                max-width: 100% !important;
            }
        }
    </style>

    <script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs" type="module"></script>

    <script>
        // Copy voucher code function (defined globally so inline onclick works)
        window.copyVoucherCode = function(code, buttonElement) {
            if (!code) return;
            
            function showSuccess() {
                const originalText = buttonElement.innerHTML;
                buttonElement.innerHTML = '<i class="fas fa-check me-1"></i>Copied!';
                buttonElement.style.backgroundColor = '#10b981';
                buttonElement.style.borderColor = '#10b981';
                
                setTimeout(function() {
                    buttonElement.innerHTML = originalText;
                    buttonElement.style.backgroundColor = 'var(--primary-accent)';
                    buttonElement.style.borderColor = 'var(--primary-accent)';
                }, 2000);
            }

            if (navigator.clipboard && window.isSecureContext) {
                navigator.clipboard.writeText(code).then(showSuccess).catch(function(err) {
                    fallbackCopy(code);
                });
            } else {
                fallbackCopy(code);
            }

            function fallbackCopy(text) {
                const textArea = document.createElement("textarea");
                textArea.value = text;
                textArea.style.top = "0";
                textArea.style.left = "0";
                textArea.style.position = "fixed";
                document.body.appendChild(textArea);
                textArea.focus();
                textArea.select();
                try {
                    const successful = document.execCommand('copy');
                    if (successful) {
                        showSuccess();
                    } else {
                        console.error('Fallback copy was unsuccessful');
                    }
                } catch (err) {
                    console.error('Fallback copy failed', err);
                }
                document.body.removeChild(textArea);
            }
        };

        document.addEventListener('DOMContentLoaded', function() {
            // Tab switching functionality
            const navItems = document.querySelectorAll('.nav-item');
            const tabContents = document.querySelectorAll('.tab-content');

            navItems.forEach(item => {
                item.addEventListener('click', function() {
                    if (this.id === 'logout') {
                        window.location.href = "{{ route('american.plastic.web.user.logout') }}";
                        return;
                    }

                    // Remove active class from all nav items and tab contents
                    navItems.forEach(nav => nav.classList.remove('active'));
                    tabContents.forEach(content => {
                        content.classList.remove('active');
                        content.style.display = 'none'; // Ensure display none is toggled properly
                    });

                    // Add active class to clicked nav item
                    this.classList.add('active');

                    // Show corresponding tab content
                    const dataTab = this.getAttribute('data-tab');
                    const tabId = dataTab + '-tab';
                    const targetContent = document.getElementById(tabId) || document.getElementById(dataTab);
                    if (targetContent) {
                        targetContent.classList.add('active');
                        targetContent.style.display = 'block'; // Ensure it becomes visible
                    }
                });
            });

            // Initialize default active tab or URL parameterized tab
            const urlParams = new URLSearchParams(window.location.search);
            const tabParam = urlParams.get('tab');
            if (tabParam) {
                const targetTab = document.querySelector(`.nav-item[data-tab="${tabParam}"]`);
                if (targetTab) {
                    targetTab.click();
                } else {
                    const defaultTab = document.querySelector('.nav-item[data-tab="order"]');
                    if (defaultTab) defaultTab.click();
                }
            } else {
                const defaultTab = document.querySelector('.nav-item[data-tab="order"]');
                if (defaultTab) defaultTab.click();
            }

            // Image preview function
            window.previewImage = function(event) {
                const input = event.target;
                if (input.files && input.files[0]) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        const img = document.getElementById('profile-image');
                        img.src = e.target.result;

                        // Upload image data to the server
                        document.getElementById('profilepic_form').submit();
                    }
                    reader.readAsDataURL(input.files[0]);
                }
            };
        });
    </script>
@endsection