@extends('layouts.base')

@section('content')
@section('breadcrumb')
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb mb-0">
            <li class="breadcrumb-item"><a href="{{ route('front.index') }}">Tableau de bord</a></li>
            <li class="breadcrumb-item active" aria-current="page">Mes clients</li>
        </ol>
    </nav>
@endsection

<div class="container-fluid py-4">
    <!-- Header Section -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h3 mb-1 text-primary">
                        <i class="fas fa-user-friends me-2"></i>Mes clients - {{ $application->name }}
                    </h1>
                    <p class="text-muted mb-0">Liste de vos clients pour cette application</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Filtres -->
    <div class="card shadow-sm mb-4">
        <div class="card-header bg-light">
            <h6 class="mb-0">
                <i class="fas fa-filter me-2"></i>Filtres
            </h6>
        </div>
        <div class="card-body">
            <form method="GET" action="{{ route('account.clients.list') }}" class="row g-3">
                <input type="hidden" name="application" value="{{ $application->id }}">
                <div class="col-md-4">
                    <label for="program_id" class="form-label">Programme</label>
                    <select name="program_id" id="program_id" class="form-select">
                        <option value="">Tous les programmes</option>
                        @foreach($programs as $program)
                            <option value="{{ $program->id }}" {{ request('program_id') == $program->id ? 'selected' : '' }}>
                                {{ $program->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-4">
                    <label for="status" class="form-label">Statut</label>
                    <select name="status" id="status" class="form-select">
                        <option value="">Tous les statuts</option>
                        <option value="option_en_cours" {{ request('status') == 'option_en_cours' ? 'selected' : '' }}>Option en cours</option>
                        <option value="resa_en_cours" {{ request('status') == 'resa_en_cours' ? 'selected' : '' }}>Résa en cours</option>
                        <option value="vente_cloturee" {{ request('status') == 'vente_cloturee' ? 'selected' : '' }}>Vente clôturée</option>
                    </select>
                </div>
                <div class="col-md-4 d-flex align-items-end">
                    <button type="submit" class="btn btn-primary w-100">
                        <i class="fas fa-search me-2"></i>Filtrer
                    </button>
                </div>
            </form>
        </div>
    </div>

    @if($clients->isEmpty())
        <div class="text-center py-5">
            <i class="fas fa-user-friends fa-5x text-primary mb-3"></i>
            <h5 class="mb-1">Aucun client disponible</h5>
            <p class="text-muted mb-0">Vos clients apparaîtront ici une fois qu'ils seront associés à vos dossiers.</p>
        </div>
    @else
        <!-- Clients Table -->
        <div class="card shadow mb-4">
            <div class="card-header py-3 d-flex justify-content-between align-items-center">
                <h6 class="m-0 font-weight-bold text-primary">
                    <i class="fas fa-table me-2"></i>Liste de mes clients ({{ $clients->total() }})
                </h6>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered table-hover">
                        <thead class="table-light">
                            <tr>
                                <th>
                                    <a href="{{ route('account.clients.list', array_merge(request()->all(), ['sort_by' => 'lastname', 'sort_dir' => ($sortBy === 'lastname' && $sortDir === 'asc') ? 'desc' : 'asc'])) }}" class="text-decoration-none text-dark">
                                        Nom
                                        @if($sortBy === 'lastname')
                                            <i class="fas fa-sort-{{ $sortDir === 'asc' ? 'up' : 'down' }}"></i>
                                        @endif
                                    </a>
                                </th>
                                <th>
                                    <a href="{{ route('account.clients.list', array_merge(request()->all(), ['sort_by' => 'firstname', 'sort_dir' => ($sortBy === 'firstname' && $sortDir === 'asc') ? 'desc' : 'asc'])) }}" class="text-decoration-none text-dark">
                                        Prénom
                                        @if($sortBy === 'firstname')
                                            <i class="fas fa-sort-{{ $sortDir === 'asc' ? 'up' : 'down' }}"></i>
                                        @endif
                                    </a>
                                </th>
                                <th>
                                    <a href="{{ route('account.clients.list', array_merge(request()->all(), ['sort_by' => 'email', 'sort_dir' => ($sortBy === 'email' && $sortDir === 'asc') ? 'desc' : 'asc'])) }}" class="text-decoration-none text-dark">
                                        Email
                                        @if($sortBy === 'email')
                                            <i class="fas fa-sort-{{ $sortDir === 'asc' ? 'up' : 'down' }}"></i>
                                        @endif
                                    </a>
                                </th>
                                <th class="text-center">Nombre de dossiers actifs</th>
                                <th class="text-center">Nombre de ventes signées</th>
                                <th>
                                    <a href="{{ route('account.clients.list', array_merge(request()->all(), ['sort_by' => 'created_at', 'sort_dir' => ($sortBy === 'created_at' && $sortDir === 'asc') ? 'desc' : 'asc'])) }}" class="text-decoration-none text-dark">
                                        Date de création
                                        @if($sortBy === 'created_at')
                                            <i class="fas fa-sort-{{ $sortDir === 'asc' ? 'up' : 'down' }}"></i>
                                        @endif
                                    </a>
                                </th>
                                <th class="text-center">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($clients as $client)
                            <tr class="cursor-pointer client-row" data-href="{{ route('account.clients.show', ['client' => $client]) }}">
                                <td>{{ $client->lastname ?? '-' }}</td>
                                <td>{{ $client->firstname ?? '-' }}</td>
                                <td>
                                    <a href="mailto:{{ $client->email }}" class="text-decoration-none">
                                        {{ $client->email }}
                                    </a>
                                </td>
                                <td class="text-center">
                                    <span class="badge bg-info">{{ $client->active_dossiers_count ?? 0 }}</span>
                                </td>
                                <td class="text-center">
                                    <span class="badge bg-success">{{ $client->ventes_count ?? 0 }}</span>
                                </td>
                                <td>{{ $client->created_at->format('d/m/Y') }}</td>
                                <td class="text-center">
                                    <div class="btn-group" role="group">
                                        <a href="{{ route('account.clients.show', ['client' => $client]) }}" class="btn btn-sm btn-outline-primary" title="Voir">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                        {{-- <a href="{{ route('account.clients.edit', ['client' => $client]) }}" class="btn btn-sm btn-outline-secondary" title="Modifier">
                                            <i class="fas fa-edit"></i>
                                        </a> --}}
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                <div class="d-flex justify-content-center mt-4">
                    {{ $clients->appends(request()->all())->links() }}
                </div>
            </div>
        </div>
    @endif
</div>

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        document.querySelectorAll('tr.client-row[data-href]').forEach(function (row) {
            row.addEventListener('click', function (event) {
                if (event.target.closest('a, button')) {
                    return;
                }
                const href = this.getAttribute('data-href');
                if (href) {
                    window.location.href = href;
                }
            });
        });
    });
</script>
@endpush

@endsection