@extends('layouts.app')

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

    <div class="mb-8 flex items-center justify-between">
        <div>
            <h1 class="text-3xl font-bold text-gray-900">Mon Espace Client</h1>
            <p class="text-gray-500">Ravi de vous revoir, {{ $user->name }} !</p>
        </div>
        <div class="text-right">
            <span class="block text-sm text-gray-500">Votre Solde Client</span>
            <span class="text-3xl font-bold text-primary">{{ number_format($user->balance, 2) }} €</span>
        </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">

        <x-card class="p-6 border-l-4 border-primary hover:shadow-lg transition cursor-pointer relative group">
            <a href="{{ route('client.orders.index') }}" class="absolute inset-0"></a>
            <div class="flex items-center justify-between mb-4">
                <h3 class="font-bold text-lg text-gray-800">Mes Commandes</h3>
                <i class="fas fa-box-open text-3xl text-primary opacity-20 group-hover:opacity-100 transition"></i>
            </div>
            <p class="text-4xl font-bold text-gray-800 mb-2">{{ $totalOrders }}</p>
            <p class="text-sm text-gray-500">Commandes passées</p>
            @if($lastOrder)
                <div class="mt-4 pt-4 border-t text-sm text-gray-600">
                    Dernière le {{ $lastOrder->created_at->format('d/m/Y') }}
                    <span class="font-bold text-primary">({{ $lastOrder->status }})</span>
                </div>
            @endif
        </x-card>

        <x-card class="p-6 border-l-4 border-blue-500 hover:shadow-lg transition">
            <div class="flex items-center justify-between mb-4">
                <h3 class="font-bold text-lg text-gray-800">Mes Coordonnées</h3>
                <a href="{{ route('profile.edit') }}" class="text-sm text-blue-600 hover:underline">Modifier</a>
            </div>

            <div class="space-y-2 text-sm text-gray-600">
                <p><i class="fas fa-user w-6 text-center"></i> {{ $user->name }}</p>
                <p><i class="fas fa-envelope w-6 text-center"></i> {{ $user->email }}</p>
                <p><i class="fas fa-phone w-6 text-center"></i> {{ $user->phone ?? 'Non renseigné' }}</p>
                <div class="flex items-start">
                    <i class="fas fa-map-marker-alt w-6 text-center mt-1"></i>
                    <span>
                        @if($user->address)
                            {{ $user->address }}<br>
                            {{ $user->zip_code }} {{ $user->city }}
                        @else
                            <span class="text-gray-400 italic">Adresse non renseignée</span>
                        @endif
                    </span>
                </div>
            </div>
        </x-card>

        <x-card class="p-6 border-l-4 border-gray-500 hover:shadow-lg transition">
             <div class="flex items-center justify-between mb-4">
                <h3 class="font-bold text-lg text-gray-800">Factures & Aide</h3>
                <i class="fas fa-file-invoice text-3xl text-gray-400"></i>
            </div>
            <div class="space-y-3">
                <a href="{{ route('client.orders.index') }}" class="block p-2 rounded bg-gray-50 hover:bg-gray-100 transition text-sm font-bold text-gray-700">
                    <i class="fas fa-download mr-2 text-gray-400"></i> Voir mes factures
                </a>

                <a href="{{ route('client.tickets.index') }}" class="block p-2 rounded bg-gray-50 hover:bg-gray-100 transition text-sm font-bold text-gray-700">
                    <i class="fas fa-question-circle mr-2 text-gray-400"></i> Contacter le support
                </a>
            </div>
        </x-card>

    </div>
</div>
@endsection