@extends('layouts.app')

@push('css')
<link rel="stylesheet" href="{{ asset('assets/css/member.css') }}">
@endpush

@section('content')

<div class="ht__bradcaump__area mb-5" style="background: rgba(0, 0, 0, 0) url({{ asset('assets/images/bg/2.jpg') }}) no-repeat scroll center center / cover ;">
    <div class="ht__bradcaump__wrap_very_small">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="bradcaump__inner text-center">
                        <h2 class="bradcaump-title"></h2>
                        <!-- <small class="">{{ __('member.customer_access') }}</small> -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container mt-2 h-100 mb-10 dashboard-modern">
    @if(request()->query('verified') == '1')
    <div class="alert alert-success">
        Votre email a été vérifié avec succès !
        Vous pouvez désormais avoir accès à votre compte.
    </div>
    @endif

    <section class="welcome-card mb-4">
        <div class="d-flex flex-column flex-md-row align-items-md-center justify-content-between gap-3">
            <div>
                <div class="fs-6 text-muted">{{ __('member.good_morning') }} 👋</div>
                <h3 class="mb-1">{{ __('member.glad_to_see_you') }}, <span class="fw-bold">{{ Auth::user()->firstname }}</span></h3>
                <div class="text-muted">{{ __('member.last_login') }} : <strong>{{ Auth::user()->last_login->diffForHumans() }}</strong></div>
            </div>
            <div class="quick-links d-flex flex-wrap gap-2">
                <a href="{{ route('member.profile') }}" class="btn btn-outline-primary btn-sm"><i class="ri-dashboard-2-line me-1"></i>Aperçu</a>
                <a href="{{ route('member.orders') }}" class="btn btn-outline-secondary btn-sm"><i class="ri-shopping-bag-3-line me-1"></i>Commandes</a>
                <a href="{{ route('member.addresses') }}" class="btn btn-outline-secondary btn-sm"><i class="ri-map-pin-line me-1"></i>Adresses</a>
                <a href="{{ route('member.security') }}" class="btn btn-outline-secondary btn-sm"><i class="ri-shield-keyhole-line me-1"></i>Sécurité</a>
            </div>
        </div>
    </section>

    <div class="row">
        <!-- Barre latérale -->
        <div class="col-md-3 mb-4">
            <div class="sidebar-wrap">
                <div class="sidebar">
                    <div class="profile-box">
                        <div class="avatar-ring">
                            <img class="avatar" src="{{ Auth::user()->profile_image }}" alt="Avatar" />
                        </div>
                        <h5>{{ Auth::user()->firstname }} {{ Auth::user()->lastname }}</h5>
                        <div class="email">{{ Auth::user()->email }}</div>
                    </div>

                    <nav class="menu" aria-label="Menu du compte">
                        <a class="menu-link {{ request()->routeIs('member.profile') ? 'active' : '' }}" href="{{ route('member.profile') }}" data-target="profil">
                            <span class="ic"><i class="ri-user-line"></i></span><span>{{ __('member.profile') }}</span>
                        </a>
                        <a class="menu-link {{ (request()->routeIs('member.orders') || request()->routeIs('member.order-view')) ? 'active' : '' }}" href="{{ route('member.orders') }}" data-target="commandes">
                            <span class="ic"><i class="ri-shopping-bag-3-line"></i></span><span>{{ __('member.orders') }}</span>
                        </a>
                        <a class="menu-link {{ request()->routeIs('member.addresses') ? 'active' : '' }}" href="{{ route('member.addresses') }}" data-target="adresses">
                            <span class="ic"><i class="ri-map-pin-line"></i></span><span>{{ __('member.addresses') }}</span>
                        </a>
                        <a class="menu-link {{ request()->routeIs('member.security') ? 'active' : '' }}" href="{{ route('member.security') }}" data-target="securite">
                            <span class="ic"><i class="ri-shield-keyhole-line"></i></span><span>{{ __('member.security') }}</span>
                        </a>
                        <div class="divider" role="separator" aria-hidden="true"></div>
                        <form action="{{ route('logout') }}" method="post" class="m-0">
                            @csrf
                            <button type="submit" class="menu-link logout w-100">
                                <span class="ic"><i class="ri-logout-circle-r-line"></i></span><span>{{ __('member.logout') }}</span>
                            </button>
                        </form>
                    </nav>
                </div>
            </div>
        </div>

        <!-- Contenu principal -->
        <div class="col-md-9">
            @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            @endif

            @yield('member-content')
        </div>
    </div>
</div>

</div>
@endsection