@extends('layouts.public')
@section('content')
    <!-- Page container -->
    <div class="container py-5 mt-4 mt-lg-5 mb-lg-4 my-xl-5">
        <div class="row pt-sm-2 pt-lg-0">

            <!-- Sidebar (offcanvas on screens < 992px) -->
            <aside class="col-lg-3 pe-lg-4 pe-xl-5 mt-n3">
                <div class="position-lg-sticky top-0">
                    <div class="offcanvas-lg offcanvas-start" id="sidebarAccount">
                        <button class="btn-close position-absolute top-0 end-0 mt-3 me-3 d-lg-none" type="button" data-bs-dismiss="offcanvas" data-bs-target="#sidebarAccount" aria-label="Close"></button>
                        <div class="offcanvas-body">
                            <div class="pb-2 pb-lg-0 mb-4 mb-lg-5">
                                <img class="d-block rounded-circle mb-2" src="/assets/images/ui/default-avatar.png" width="80" alt="{{ Auth::user()->first_name ?? __('alts.user_avatar') }}" onerror="this.src='https://ui-avatars.com/api/?name={{ urlencode(Auth::user()->first_name ?? 'User') }}&background=6366f1&color=fff&size=80'">
                                <h3 class="h5 mb-1">{{ Auth::user()->first_name }} {{ Auth::user()->last_name }}</h3>
                                <p class="fs-sm text-body-secondary mb-0">{{ Auth::user()->email }}</p>
                            </div>
                            <nav class="nav flex-column pb-2 pb-lg-4 mb-3">
                                <h4 class="fs-xs fw-medium text-body-secondary text-uppercase pb-1 mb-2">Account</h4>
                                <a class="nav-link fw-semibold py-2 px-0 active" href="/profile/overview">
                                    <i class="fas fa-user-check fs-5 opacity-60 me-2"></i>
                                    Overview
                                </a>
                                <a class="nav-link fw-semibold py-2 px-0" href="/profile">
                                    <i class="fas fa-cog fs-5 opacity-60 me-2"></i>
                                    Settings
                                </a>
                                <a class="nav-link fw-semibold py-2 px-0" href="/profile/billing">
                                    <i class="fas fa-wallet fs-5 opacity-60 me-2"></i>
                                    Billing
                                </a>
                            </nav>
                            <nav class="nav flex-column pb-2 pb-lg-4 mb-1">
                                <h4 class="fs-xs fw-medium text-body-secondary text-uppercase pb-1 mb-2">Dashboard</h4>
                                <a class="nav-link fw-semibold py-2 px-0" href="/user/orders">
                                    <i class="fas fa-shopping-bag fs-5 opacity-60 me-2"></i>
                                    Orders
                                </a>
                                <a class="nav-link fw-semibold py-2 px-0" href="/user/gift-cards">
                                    <i class="fas fa-gift fs-5 opacity-60 me-2"></i>
                                    My Gifts
                                </a>
                                <a class="nav-link fw-semibold py-2 px-0" href="/user/packages">
                                    <i class="fas fa-box fs-5 opacity-60 me-2"></i>
                                    My Packages
                                </a>
                            </nav>
                            <nav class="nav flex-column">
                                <a class="nav-link fw-semibold py-2 px-0" href="/logout">
                                    <i class="fas fa-sign-out-alt fs-5 opacity-60 me-2"></i>
                                    Sign out
                                </a>
                            </nav>
                        </div>
                    </div>
                </div>
            </aside>

            <!-- Page content -->
            <div class="col-lg-9 pt-4 pb-2 pb-sm-4">
                <h1 class="h2 mb-4">Overview</h1>

                <!-- Basic info -->
                <section class="card border-0 py-1 p-md-2 p-xl-3 p-xxl-4 mb-4">
                    <div class="card-body">
                        <div class="d-flex align-items-center flex-wrap gap-2 mt-sm-n1 pb-4 mb-0 mb-lg-1 mb-xl-3">
                            <i class="fas fa-user text-primary lead pe-1 me-2"></i>
                            <h2 class="h4 mb-0">Basic info</h2>
                            <a class="btn btn-sm btn-secondary ms-auto flex-shrink-0" href="/profile">
                                <i class="fas fa-edit ms-n1 me-2"></i>
                                Edit info
                            </a>
                        </div>
                        <div class="d-md-flex align-items-center">
                            <div class="d-sm-flex align-items-center">
                                <div class="rounded-circle bg-size-cover bg-position-center flex-shrink-0" style="width: 80px; height: 80px; background-image: url('https://ui-avatars.com/api/?name={{ urlencode(Auth::user()->first_name . ' ' . Auth::user()->last_name) }}&background=6366f1&color=fff&size=80');"></div>
                                <div class="pt-3 pt-sm-0 ps-sm-3">
                                    <h3 class="h5 mb-2">{{ Auth::user()->first_name }} {{ Auth::user()->last_name }}<i class="fas fa-check-circle fs-base text-success ms-2"></i></h3>
                                    <div class="text-body-secondary fw-medium d-flex flex-wrap flex-sm-nowrap align-items-center">
                                        <div class="d-flex align-items-center me-3">
                                            <i class="fas fa-envelope me-1"></i>
                                            {{ Auth::user()->email }}
                                        </div>
                                        @if(Auth::user()->phone)
                                        <div class="d-flex align-items-center text-nowrap">
                                            <i class="fas fa-phone me-1"></i>
                                            {{ Auth::user()->phone }}
                                        </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                            <div class="w-100 pt-3 pt-md-0 ms-md-auto" style="max-width: 212px;">
                                <div class="d-flex justify-content-between fs-sm pb-1 mb-2">
                                    Profile completion
                                    <strong class="ms-2">75%</strong>
                                </div>
                                <div class="progress" style="height: 5px;">
                                    <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                            </div>
                        </div>
                        <div class="row py-4 mb-2 mb-sm-3">
                            <div class="col-md-6 mb-4 mb-md-0">
                                <table class="table mb-0">
                                    <tbody>
                                        <tr>
                                            <td class="border-0 text-body-secondary py-1 px-0">Phone</td>
                                            <td class="border-0 text-dark fw-medium py-1 ps-3">{{ Auth::user()->phone ?? 'Not set' }}</td>
                                        </tr>
                                        <tr>
                                            <td class="border-0 text-body-secondary py-1 px-0">Language</td>
                                            <td class="border-0 text-dark fw-medium py-1 ps-3">{{ Auth::user()->language ? (config('profile.languages')[Auth::user()->language] ?? Auth::user()->language) : (config('profile.languages')[app()->getLocale()] ?? app()->getLocale()) }}</td>
                                        </tr>
                                        <tr>
                                            <td class="border-0 text-body-secondary py-1 px-0">Time zone</td>
                                            <td class="border-0 text-dark fw-medium py-1 ps-3">{{ Auth::user()->timezone ? (config('profile.timezones')[Auth::user()->timezone] ?? Auth::user()->timezone) : 'Not set' }}</td>
                                        </tr>
                                        <tr>
                                            <td class="border-0 text-body-secondary py-1 px-0">Currency</td>
                                            <td class="border-0 text-dark fw-medium py-1 ps-3">{{ Auth::user()->currency ? (config('profile.currencies')[Auth::user()->currency] ?? Auth::user()->currency) : 'Not set' }}</td>
                                        </tr>
                                        @if(Auth::user()->gender)
                                        <tr>
                                            <td class="border-0 text-body-secondary py-1 px-0">Gender</td>
                                            <td class="border-0 text-dark fw-medium py-1 ps-3">{{ Auth::user()->gender == 1 ? 'Male' : 'Female' }}</td>
                                        </tr>
                                        @endif
                                        @if(Auth::user()->dob)
                                        <tr>
                                            <td class="border-0 text-body-secondary py-1 px-0">Date of Birth</td>
                                            <td class="border-0 text-dark fw-medium py-1 ps-3">{{ Auth::user()->dob }}</td>
                                        </tr>
                                        @endif
                                    </tbody>
                                </table>
                            </div>
                            <div class="col-md-6 d-md-flex justify-content-end">
                                <div class="w-100 border rounded-3 p-4" style="max-width: 212px;">
                                    <i class="fas fa-gift fs-4 text-primary mb-2"></i>
                                    <h4 class="h5 lh-base mb-0">0 bonuses</h4>
                                    <p class="fs-sm text-body-secondary mb-0">1 bonus = $1</p>
                                </div>
                            </div>
                        </div>
                        <div class="alert alert-info d-flex mb-0" role="alert">
                            <i class="fas fa-info-circle fs-xl"></i>
                            <div class="ps-2">Fill in the information 100% to receive more suitable offers.<a class="alert-link ms-1" href="/profile">Go to settings!</a></div>
                        </div>
                    </div>
                </section>

                <div class="row row-cols-1 row-cols-md-2 g-4 mb-4">
                    <!-- Address -->
                    <section class="col">
                        <div class="card h-100 border-0 py-1 p-md-2 p-xl-3 p-xxl-4">
                            <div class="card-body">
                                <div class="d-flex align-items-center flex-wrap gap-2 mt-sm-n1 pb-4 mb-1 mb-lg-2">
                                    <i class="fas fa-map-marker-alt text-primary lead pe-1 me-2"></i>
                                    <h2 class="h4 mb-0">Address</h2>
                                    <a class="btn btn-sm btn-secondary ms-auto flex-shrink-0" href="/profile">
                                        <i class="fas fa-edit ms-n1 me-2"></i>
                                        Edit info
                                    </a>
                                </div>
                                @if(Auth::user()->address || Auth::user()->city || Auth::user()->country)
                                <div class="d-flex align-items-center pb-1 mb-2">
                                    <h3 class="h6 mb-0 me-3">Shipping address</h3>
                                    <span class="badge bg-primary bg-opacity-10 text-primary">Primary</span>
                                </div>
                                <p class="mb-0">
                                    @if(Auth::user()->address){{ Auth::user()->address }}<br>@endif
                                    @if(Auth::user()->city){{ Auth::user()->city }},@endif
                                    @if(Auth::user()->state) {{ Auth::user()->state }}@endif
                                    @if(Auth::user()->zip) {{ Auth::user()->zip }}@endif<br>
                                    @if(Auth::user()->country){{ Auth::user()->country }}@endif
                                </p>
                                @else
                                <p class="text-body-secondary">No address set</p>
                                @endif
                            </div>
                        </div>
                    </section>

                    <!-- Billing -->
                    <section class="col">
                        <div class="card h-100 border-0 py-1 p-md-2 p-xl-3 p-xxl-4">
                            <div class="card-body">
                                <div class="d-flex align-items-center flex-wrap gap-2 mt-sm-n1 pb-4 mb-1 mb-lg-2">
                                    <i class="fas fa-wallet text-primary lead pe-1 me-2"></i>
                                    <h2 class="h4 mb-0">Billing</h2>
                                    <a class="btn btn-sm btn-secondary ms-auto flex-shrink-0" href="/profile/billing">
                                        <i class="fas fa-edit ms-n1 me-2"></i>
                                        Edit info
                                    </a>
                                </div>
                                <div class="d-flex align-items-center pb-1 mb-2">
                                    <h3 class="h6 mb-0 me-3">{{ Auth::user()->first_name }} {{ Auth::user()->last_name }}</h3>
                                    <span class="badge bg-primary bg-opacity-10 text-primary">Primary</span>
                                </div>
                                <p class="text-body-secondary">No payment methods added yet.</p>
                            </div>
                        </div>
                    </section>
                </div>

                <!-- Orders -->
                <section class="card border-0 py-1 p-md-2 p-xl-3 p-xxl-4">
                    <div class="card-body">
                        <div class="d-flex align-items-center mt-sm-n1 pb-4 mb-0 mb-lg-1 mb-xl-3">
                            <i class="fas fa-shopping-bag text-primary lead pe-1 me-2"></i>
                            <h2 class="h4 mb-0">Recent Orders</h2>
                            <a class="btn btn-sm btn-secondary ms-auto" href="/user/orders">View all</a>
                        </div>
                        <p class="text-body-secondary">No orders yet.</p>
                    </div>
                </section>
            </div>
        </div>
    </div>

    <!-- Mobile sidebar toggle button -->
    <button class="d-lg-none btn btn-sm fs-sm btn-primary w-100 rounded-0 fixed-bottom" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebarAccount">
        <i class="fas fa-bars me-2"></i>
        Account Menu
    </button>
@endsection