@extends('layouts.app')
@section('title', 'Véhicules')
@section('breadcrumb', 'Opérations / Véhicules')

@section('content')
<div x-data="{
    tab: '{{ $activeTab }}',
    showForm: {{ $errors->any() ? 'true' : 'false' }}
}">

{{-- En-tête --}}
<div class="page-header">
    <div>
        <h1 class="page-title"><i class="fas fa-car-side" style="color:#2563eb;"></i> Véhicules</h1>
        <p class="page-subtitle">Catalogue du parc automobile — sélectionnez-les dans vos chantiers</p>
    </div>
    <button @click="tab = 'catalogue'; showForm = !showForm" class="btn btn-primary">
        <i class="fas fa-plus"></i> Nouveau véhicule
    </button>
</div>

@if(session('success'))
    <div class="alert alert-success" style="margin-bottom:16px;">{{ session('success') }}</div>
@endif

{{-- Tabs --}}
<div class="tabs" style="margin-bottom:20px;">
    <button class="tab-btn" :class="{ active: tab === 'stats' }" @click="tab = 'stats'">
        <i class="fas fa-chart-bar"></i> Statistiques
    </button>
    <button class="tab-btn" :class="{ active: tab === 'catalogue' }" @click="tab = 'catalogue'">
        <i class="fas fa-list"></i> Catalogue
        <span style="background:#2563eb;color:#fff;border-radius:99px;padding:1px 7px;font-size:11px;margin-left:6px;">{{ $stats['total'] }}</span>
    </button>
</div>

{{-- ═══════════════════════════════════
     TAB : STATISTIQUES
═══════════════════════════════════ --}}
<div x-show="tab === 'stats'">

    {{-- KPI Cards --}}
    <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-icon blue"><i class="fas fa-car-side"></i></div>
            <div><div class="stat-value">{{ $stats['total'] }}</div><div class="stat-label">Dans le catalogue</div></div>
        </div>
        <div class="stat-card">
            <div class="stat-icon green"><i class="fas fa-hard-hat"></i></div>
            <div><div class="stat-value">{{ $stats['nb_affectations'] }}</div><div class="stat-label">Affectations chantiers</div></div>
        </div>
        <div class="stat-card">
            <div class="stat-icon orange"><i class="fas fa-triangle-exclamation"></i></div>
            <div><div class="stat-value">{{ $stats['entretiens_retard'] + $stats['entretiens_soon'] }}</div><div class="stat-label">Entretiens à traiter</div></div>
        </div>
        <div class="stat-card">
            <div class="stat-icon red"><i class="fas fa-circle-xmark"></i></div>
            <div><div class="stat-value">{{ $stats['nb_panne'] }}</div><div class="stat-label">En panne</div></div>
        </div>
    </div>

    <div class="grid-2" style="margin-bottom:20px;">

        {{-- Répartition par état --}}
        <div class="card">
            <div class="card-header"><h3 class="card-title">Répartition par état</h3></div>
            <div class="card-body">
                @php $nbEtat = $stats['nb_bon'] + $stats['nb_alerte'] + $stats['nb_panne']; @endphp
                @if($nbEtat > 0)
                <div style="display:flex;flex-direction:column;gap:14px;">
                    <div>
                        <div style="display:flex;justify-content:space-between;font-size:13px;margin-bottom:5px;">
                            <span style="display:flex;align-items:center;gap:6px;">
                                <span style="width:10px;height:10px;border-radius:50%;background:#16a34a;display:inline-block;"></span>
                                Bon état
                            </span>
                            <span style="font-weight:600;">{{ $stats['nb_bon'] }} affectation{{ $stats['nb_bon'] > 1 ? 's' : '' }}</span>
                        </div>
                        <div style="background:#e2e8f0;border-radius:99px;height:8px;">
                            <div style="width:{{ round($stats['nb_bon']/$nbEtat*100) }}%;background:#16a34a;height:8px;border-radius:99px;"></div>
                        </div>
                    </div>
                    <div>
                        <div style="display:flex;justify-content:space-between;font-size:13px;margin-bottom:5px;">
                            <span style="display:flex;align-items:center;gap:6px;">
                                <span style="width:10px;height:10px;border-radius:50%;background:#f59e0b;display:inline-block;"></span>
                                Alerte
                            </span>
                            <span style="font-weight:600;">{{ $stats['nb_alerte'] }} affectation{{ $stats['nb_alerte'] > 1 ? 's' : '' }}</span>
                        </div>
                        <div style="background:#e2e8f0;border-radius:99px;height:8px;">
                            <div style="width:{{ round($stats['nb_alerte']/$nbEtat*100) }}%;background:#f59e0b;height:8px;border-radius:99px;"></div>
                        </div>
                    </div>
                    <div>
                        <div style="display:flex;justify-content:space-between;font-size:13px;margin-bottom:5px;">
                            <span style="display:flex;align-items:center;gap:6px;">
                                <span style="width:10px;height:10px;border-radius:50%;background:#dc2626;display:inline-block;"></span>
                                En panne
                            </span>
                            <span style="font-weight:600;">{{ $stats['nb_panne'] }} affectation{{ $stats['nb_panne'] > 1 ? 's' : '' }}</span>
                        </div>
                        <div style="background:#e2e8f0;border-radius:99px;height:8px;">
                            <div style="width:{{ round($stats['nb_panne']/$nbEtat*100) }}%;background:#dc2626;height:8px;border-radius:99px;"></div>
                        </div>
                    </div>
                </div>
                {{-- Barre composite --}}
                <div style="margin-top:16px;">
                    <div style="display:flex;border-radius:99px;overflow:hidden;height:12px;background:#e2e8f0;">
                        @if($stats['nb_bon'] > 0)
                        <div style="width:{{ round($stats['nb_bon']/$nbEtat*100) }}%;background:#16a34a;" title="Bon état"></div>
                        @endif
                        @if($stats['nb_alerte'] > 0)
                        <div style="width:{{ round($stats['nb_alerte']/$nbEtat*100) }}%;background:#f59e0b;" title="Alerte"></div>
                        @endif
                        @if($stats['nb_panne'] > 0)
                        <div style="width:{{ round($stats['nb_panne']/$nbEtat*100) }}%;background:#dc2626;" title="En panne"></div>
                        @endif
                    </div>
                </div>
                @else
                <div style="text-align:center;color:#94a3b8;padding:20px 0;font-size:13px;">Aucune affectation</div>
                @endif
            </div>
        </div>

        {{-- Entretiens à traiter --}}
        <div class="card">
            <div class="card-header"><h3 class="card-title">Entretiens à traiter</h3></div>
            <div class="card-body" style="padding:0;">
                @if($entretiensAlerte->count())
                <div style="display:flex;flex-direction:column;">
                    @foreach($entretiensAlerte as $aff)
                    @php
                        $vehImmat = $aff->vehicule ? $aff->vehicule->immat : $aff->immat;
                        $isRetard = $aff->prochain_entretien->isPast();
                    @endphp
                    <div style="display:flex;justify-content:space-between;align-items:center;padding:10px 16px;border-bottom:1px solid #f1f5f9;">
                        <div>
                            <div style="font-weight:600;font-size:13px;"><i class="fas fa-car" style="color:#2563eb;"></i> {{ $vehImmat }}</div>
                            @if($aff->chantier)
                            <div style="font-size:11px;color:#64748b;">{{ $aff->chantier->code }} — {{ $aff->chantier->nom }}</div>
                            @endif
                        </div>
                        <div style="text-align:right;">
                            <div style="font-size:12px;font-weight:600;color:{{ $isRetard ? '#dc2626' : '#ca8a04' }};">
                                {{ $aff->prochain_entretien->format('d/m/Y') }}
                            </div>
                            <span class="badge-pill {{ $isRetard ? 'badge-danger' : 'badge-warning' }}" style="font-size:10px;">
                                {{ $isRetard ? 'EN RETARD' : 'Bientôt' }}
                            </span>
                        </div>
                    </div>
                    @endforeach
                </div>
                @else
                <div style="text-align:center;color:#94a3b8;padding:32px 16px;font-size:13px;">
                    <i class="fas fa-check-circle" style="font-size:24px;color:#16a34a;display:block;margin-bottom:8px;"></i>
                    Aucun entretien en retard ou imminent
                </div>
                @endif
            </div>
        </div>

    </div>

    {{-- Top véhicules --}}
    @if($topVehicules->count())
    <div class="card">
        <div class="card-header"><h3 class="card-title">Top véhicules par utilisation</h3></div>
        <div class="table-wrap">
            <table>
                <thead><tr>
                    <th>#</th>
                    <th>Immatriculation</th>
                    <th>Marque / Modèle</th>
                    <th style="text-align:center;">Nb chantiers</th>
                </tr></thead>
                <tbody>
                @foreach($topVehicules as $i => $veh)
                <tr>
                    <td style="color:#64748b;font-size:13px;">{{ $i + 1 }}</td>
                    <td style="font-weight:700;"><i class="fas fa-car" style="color:#2563eb;"></i> {{ $veh->immat }}</td>
                    <td>{{ trim($veh->marque.' '.$veh->modele) ?: '—' }}</td>
                    <td style="text-align:center;">
                        <span class="badge-pill badge-info">{{ $veh->chantier_vehicules_count }}</span>
                    </td>
                </tr>
                @endforeach
                </tbody>
            </table>
        </div>
    </div>
    @else
    <div class="card"><div class="card-body" style="text-align:center;padding:32px;color:#94a3b8;">
        <i class="fas fa-car-side" style="font-size:36px;margin-bottom:10px;display:block;"></i>
        <p>Aucun véhicule affecté à un chantier pour l'instant.</p>
        <button @click="tab = 'catalogue'" class="btn btn-primary btn-sm" style="margin-top:8px;">
            <i class="fas fa-plus"></i> Ajouter au catalogue
        </button>
    </div></div>
    @endif

</div>

{{-- ═══════════════════════════════════
     TAB : CATALOGUE
═══════════════════════════════════ --}}
<div x-show="tab === 'catalogue'">

    {{-- Formulaire d'ajout --}}
    <div x-show="showForm" x-cloak style="margin-bottom:20px;">
        <div class="card">
            <div class="card-header" style="display:flex;justify-content:space-between;align-items:center;">
                <h3 class="card-title"><i class="fas fa-plus-circle" style="color:#2563eb;"></i> Nouveau véhicule</h3>
                <button @click="showForm = false" style="background:none;border:none;color:#64748b;cursor:pointer;font-size:18px;">&times;</button>
            </div>
            <div class="card-body">
                <form method="POST" action="{{ route('vehicules.store') }}">
                    @csrf
                    <div class="form-grid form-grid-2">
                        <div class="form-group">
                            <label class="form-label">Immatriculation <span style="color:#dc2626;">*</span></label>
                            <input type="text" name="immat" class="form-control" value="{{ old('immat') }}" required placeholder="123 TU 4567">
                            @error('immat')<div style="color:#dc2626;font-size:12px;margin-top:4px;">{{ $message }}</div>@enderror
                        </div>
                        <div class="form-group">
                            <label class="form-label">Marque</label>
                            <input type="text" name="marque" class="form-control" value="{{ old('marque') }}" placeholder="Peugeot, Renault, Ford...">
                        </div>
                        <div class="form-group">
                            <label class="form-label">Modèle</label>
                            <input type="text" name="modele" class="form-control" value="{{ old('modele') }}" placeholder="Partner, Master, Transit...">
                        </div>
                        <div class="form-group">
                            <label class="form-label">Notes</label>
                            <input type="text" name="notes" class="form-control" value="{{ old('notes') }}" placeholder="Couleur, particularités...">
                        </div>
                    </div>
                    <div style="display:flex;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid #e2e8f0;">
                        <button type="submit" class="btn btn-primary"><i class="fas fa-save"></i> Enregistrer</button>
                        <button type="button" @click="showForm = false" class="btn btn-secondary">Annuler</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Filtres --}}
    <div class="card" style="margin-bottom:16px;">
        <div class="card-body" style="padding:12px 16px;">
            <form method="GET" style="display:flex;gap:10px;flex-wrap:wrap;align-items:center;">
                <input type="hidden" name="tab" value="catalogue">
                <input type="text" name="search" value="{{ request('search') }}" class="form-control"
                       placeholder="Immat, marque, modèle..." style="max-width:260px;">
                <button type="submit" class="btn btn-primary"><i class="fas fa-filter"></i> Filtrer</button>
                <a href="{{ route('vehicules.index') }}?tab=catalogue" class="btn btn-secondary"><i class="fas fa-times"></i></a>
            </form>
        </div>
    </div>

    {{-- Table --}}
    <div class="card">
        <div class="table-wrap">
            <table>
                <thead><tr>
                    <th>Immatriculation</th>
                    <th>Marque</th>
                    <th>Modèle</th>
                    <th style="text-align:center;">Chantiers</th>
                    <th>Notes</th>
                    <th>Actions</th>
                </tr></thead>
                <tbody>
                @forelse($vehicules as $veh)
                <tr x-data="{ editing: false }">
                    <td x-show="!editing" style="font-weight:700;"><i class="fas fa-car" style="color:#2563eb;margin-right:6px;"></i>{{ $veh->immat }}</td>
                    <td x-show="!editing">{{ $veh->marque ?: '—' }}</td>
                    <td x-show="!editing">{{ $veh->modele ?: '—' }}</td>
                    <td x-show="!editing" style="text-align:center;">
                        @if($veh->chantier_vehicules_count > 0)
                            <span class="badge-pill badge-info">{{ $veh->chantier_vehicules_count }}</span>
                        @else
                            <span style="color:#94a3b8;font-size:12px;">—</span>
                        @endif
                    </td>
                    <td x-show="!editing" style="font-size:12px;color:#64748b;max-width:180px;">{{ $veh->notes ? Str::limit($veh->notes, 55) : '—' }}</td>
                    <td x-show="!editing">
                        <div class="table-actions">
                            <button @click="editing = true" class="action-btn" title="Modifier"><i class="fas fa-pen"></i></button>
                            <form method="POST" action="{{ route('vehicules.destroy', $veh) }}"
                                  onsubmit="return confirm('Supprimer ce véhicule du catalogue ?')" style="display:inline;">
                                @csrf @method('DELETE')
                                <button type="submit" class="action-btn danger"><i class="fas fa-trash"></i></button>
                            </form>
                        </div>
                    </td>
                    <td x-show="editing" x-cloak colspan="6" style="padding:14px 16px;background:#f8fafc;">
                        <form method="POST" action="{{ route('vehicules.update', $veh) }}">
                            @csrf @method('PUT')
                            <div class="form-grid form-grid-2" style="gap:10px;">
                                <div class="form-group">
                                    <label class="form-label" style="font-size:12px;">Immatriculation *</label>
                                    <input type="text" name="immat" class="form-control form-control-sm" value="{{ $veh->immat }}" required>
                                </div>
                                <div class="form-group">
                                    <label class="form-label" style="font-size:12px;">Marque</label>
                                    <input type="text" name="marque" class="form-control form-control-sm" value="{{ $veh->marque }}">
                                </div>
                                <div class="form-group">
                                    <label class="form-label" style="font-size:12px;">Modèle</label>
                                    <input type="text" name="modele" class="form-control form-control-sm" value="{{ $veh->modele }}">
                                </div>
                                <div class="form-group">
                                    <label class="form-label" style="font-size:12px;">Notes</label>
                                    <input type="text" name="notes" class="form-control form-control-sm" value="{{ $veh->notes }}">
                                </div>
                            </div>
                            <div style="display:flex;gap:8px;margin-top:10px;">
                                <button type="submit" class="btn btn-primary btn-sm"><i class="fas fa-save"></i> Enregistrer</button>
                                <button type="button" @click="editing = false" class="btn btn-secondary btn-sm">Annuler</button>
                            </div>
                        </form>
                    </td>
                </tr>
                @empty
                <tr><td colspan="6" class="empty-state">
                    <i class="fas fa-car-side"></i>
                    <h4>Catalogue vide</h4>
                    <p>Cliquez sur « Nouveau véhicule » pour en ajouter un.</p>
                </td></tr>
                @endforelse
                </tbody>
            </table>
        </div>
        @if($vehicules->hasPages())
        <div style="padding:12px 16px;border-top:1px solid var(--border);">
            {{ $vehicules->links() }}
        </div>
        @endif
    </div>

</div>{{-- /tab catalogue --}}

</div>{{-- /x-data --}}
@endsection