@extends('layouts.app')

@section('title', 'Détails Client')

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Tableau de bord</a></li>
    <li class="breadcrumb-item"><a href="{{ route('customers.index') }}">Clients</a></li>
    <li class="breadcrumb-item active">Détails</li>
@endsection

@section('content')
<div class="row">
    <div class="col-md-4 mb-3">
        <div class="card h-100">
            <div class="card-body text-center">
                <div class="display-1 text-secondary mb-3">
                    <i class="bi bi-person-circle"></i>
                </div>
                <h3>{{ $customer->name }}</h3>
                <p class="text-muted"><i class="bi bi-geo-alt"></i> {{ $customer->city ?? 'Ville inconnue' }}</p>
                
                <hr>
                
                <div class="text-start">
                    <p><strong>Email:</strong> {{ $customer->email ?? '-' }}</p>
                    <p><strong>Téléphone:</strong> {{ $customer->phone ?? '-' }}</p>
                    <p><strong>Adresse:</strong> {{ $customer->address ?? '-' }}</p>
                    <p><strong>Pays:</strong> {{ $customer->country ?? '-' }}</p>
                </div>

                @if($customer->notes)
                <div class="alert alert-light text-start mt-3">
                    <strong>Notes:</strong><br>
                    {{ $customer->notes }}
                </div>
                @endif
                
                <div class="d-grid gap-2 mt-4">
                    <a href="{{ route('customers.edit', $customer) }}" class="btn btn-warning">
                        <i class="bi bi-pencil"></i> Modifier
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-8">
        <div class="card">
            <div class="card-header bg-white d-flex justify-content-between align-items-center">
                <h5 class="mb-0">Derniers Achats</h5>
                <a href="{{ route('sales.create') }}?customer_id={{ $customer->id }}" class="btn btn-sm btn-primary">
                    <i class="bi bi-plus-lg"></i> Nouvelle Vente
                </a>
            </div>
            <div class="card-body p-0">
                <table class="table table-hover mb-0">
                    <thead class="table-light">
                        <tr>
                            <th>Date</th>
                            <th>Référence</th>
                            <th>Montant</th>
                            <th>Statut</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($customer->sales as $sale)
                        <tr>
                            <td>{{ $sale->sale_date->format('d/m/Y') }}</td>
                            <td>{{ $sale->reference }}</td>
                            <td>{{ number_format($sale->total_amount, 0, ',', ' ') }} FCFA</td>
                            <td>
                                @if($sale->status === 'completed')
                                    <span class="badge bg-success">Terminé</span>
                                @elseif($sale->status === 'pending')
                                    <span class="badge bg-warning text-dark">En attente</span>
                                @else
                                    <span class="badge bg-danger">Annulé</span>
                                @endif
                            </td>
                            <td>
                                <a href="{{ route('sales.show', $sale) }}" class="btn btn-sm btn-info">
                                    <i class="bi bi-eye"></i>
                                </a>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="5" class="text-center py-4 text-muted">
                                Aucun achat récent.
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection