@extends('layouts.app')

@section('content')
<!-- <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">{{ __('Dashboard') }}</div>

                    <div class="card-body">
                        @if (session('status'))
                            <div class="alert alert-success" role="alert">
                                {{ session('status') }}
                            </div>
                        @endif

                        {{ __('You are logged in!') }}
                    </div>
                </div>
            </div>
        </div>
    </div> -->

<div class="ht__bradcaump__area" 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">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="bradcaump__inner text-center">
                        <h2 class="bradcaump-title">{{ __('member.my_account') }}</h2>
                        <nav class="bradcaump-inner">
                            <a class="breadcrumb-item" href="{{ url('/') }}">{{ __('member.home') }}</a>
                            <span class="brd-separetor">/</span>
                            <span class="breadcrumb-item active">{{ __('member.my_account') }}</span>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container mt-5 h-100">
    <div class="row">
        <!-- Menu latéral -->
        <div class="col-md-3">
            <div class="list-group">
                <a href="#" class="list-group-item list-group-item-action active" data-bs-toggle="tab" data-bs-target="#dashboard">
                    Tableau de bord
                </a>
                <a href="#" class="list-group-item list-group-item-action" data-bs-toggle="tab" data-bs-target="#profile">
                    Informations personnelles
                </a>
                <a href="#" class="list-group-item list-group-item-action" data-bs-toggle="tab" data-bs-target="#orders">
                    Mes commandes
                </a>
                <a href="#" class="list-group-item list-group-item-action" data-bs-toggle="tab" data-bs-target="#addresses">
                    Mes adresses
                </a>
                <a href="#" class="list-group-item list-group-item-action" data-bs-toggle="tab" data-bs-target="#payment">
                    Moyens de paiement
                </a>
                <a href="#" class="list-group-item list-group-item-action text-danger">
                    Déconnexion
                </a>
            </div>
        </div>

        <!-- Contenu principal -->
        <div class="col-md-9">
            <div class="tab-content">

                <!-- Tableau de bord -->
                <div class="tab-pane fade show active" id="dashboard">
                    <h3>Bienvenue, [Nom de l'utilisateur]</h3>
                    <p>Depuis votre compte, vous pouvez gérer vos informations personnelles, vos commandes, vos adresses et vos moyens de paiement.</p>
                </div>

                <!-- Informations personnelles -->
                <div class="tab-pane fade" id="profile">
                    <h3>Informations personnelles</h3>
                    <form>
                        <div class="mb-3">
                            <label class="form-label">Nom</label>
                            <input type="text" class="form-control" value="Doe">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Prénom</label>
                            <input type="text" class="form-control" value="John">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Email</label>
                            <input type="email" class="form-control" value="john.doe@example.com" disabled>
                        </div>
                        <button type="submit" class="btn btn-primary">Mettre à jour</button>
                    </form>
                </div>

                <!-- Commandes -->
                <div class="tab-pane fade" id="orders">
                    <h3>Mes commandes</h3>
                    <table class="table">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Date</th>
                                <th>Montant</th>
                                <th>Statut</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>12345</td>
                                <td>01/02/2024</td>
                                <td>89,99€</td>
                                <td><span class="badge bg-success">Livrée</span></td>
                                <td><a href="#" class="btn btn-sm btn-info">Voir</a></td>
                            </tr>
                            <tr>
                                <td>12346</td>
                                <td>15/01/2024</td>
                                <td>45,00€</td>
                                <td><span class="badge bg-warning">En cours</span></td>
                                <td><a href="#" class="btn btn-sm btn-info">Voir</a></td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <!-- Adresses -->
                <div class="tab-pane fade" id="addresses">
                    <h3>Mes adresses</h3>
                    <div class="card">
                        <div class="card-body">
                            <h5>Adresse de facturation</h5>
                            <p>John Doe<br>12 Rue des Fleurs<br>75001 Paris<br>France</p>
                            <a href="#" class="btn btn-sm btn-warning">Modifier</a>
                        </div>
                    </div>
                </div>

                <!-- Paiements -->
                <div class="tab-pane fade" id="payment">
                    <h3>Moyens de paiement</h3>
                    <p>Carte Visa se terminant par **6789</p>
                    <a href="#" class="btn btn-sm btn-primary">Ajouter un moyen de paiement</a>
                </div>

            </div>
        </div>
    </div>
</div>
@endsection