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

@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-toolbox" style="color:#b45309;"></i> Matériels</h1>
        <p class="page-subtitle">Catalogue des équipements et matériels</p>
    </div>
    <button @click="tab = 'catalogue'; showForm = !showForm" class="btn btn-primary">
        <i class="fas fa-plus"></i> Nouveau matériel
    </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:#b45309;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 orange"><i class="fas fa-toolbox"></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 blue"><i class="fas fa-boxes-stacked"></i></div>
            <div><div class="stat-value">{{ $stats['qte_totale'] }}</div><div class="stat-label">Unités déployées</div></div>
        </div>
        <div class="stat-card">
            <div class="stat-icon cyan"><i class="fas fa-file-contract"></i></div>
            <div><div class="stat-value">{{ number_format($stats['cout_loc_total'],3,","," ") }}</div><div class="stat-label">Coût location/j TND</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_loue'] + $stats['nb_usure']; @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>
                                Propriété — 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:#2563eb;display:inline-block;"></span>
                                Location
                            </span>
                            <span style="font-weight:600;">{{ $stats['nb_loue'] }} affectation{{ $stats['nb_loue'] > 1 ? 's' : '' }}</span>
                        </div>
                        <div style="background:#e2e8f0;border-radius:99px;height:8px;">
                            <div style="width:{{ round($stats['nb_loue']/$nbEtat*100) }}%;background:#2563eb;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:#ea580c;display:inline-block;"></span>
                                Propriété — Usure
                            </span>
                            <span style="font-weight:600;">{{ $stats['nb_usure'] }} affectation{{ $stats['nb_usure'] > 1 ? 's' : '' }}</span>
                        </div>
                        <div style="background:#e2e8f0;border-radius:99px;height:8px;">
                            <div style="width:{{ round($stats['nb_usure']/$nbEtat*100) }}%;background:#ea580c;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_loue'] > 0)
                        <div style="width:{{ round($stats['nb_loue']/$nbEtat*100) }}%;background:#2563eb;" title="Location"></div>
                        @endif
                        @if($stats['nb_usure'] > 0)
                        <div style="width:{{ round($stats['nb_usure']/$nbEtat*100) }}%;background:#ea580c;" title="Usure"></div>
                        @endif
                    </div>
                </div>
                @else
                <div style="text-align:center;color:#94a3b8;padding:20px 0;font-size:13px;">Aucune affectation</div>
                @endif
            </div>
        </div>

        {{-- Résumé catalogue --}}
        <div class="card">
            <div class="card-header"><h3 class="card-title">État du catalogue</h3></div>
            <div class="card-body">
                <div style="display:flex;flex-direction:column;gap:16px;">
                    <div style="display:flex;justify-content:space-between;align-items:center;padding:12px;background:#f8fafc;border-radius:8px;">
                        <span style="font-size:13px;color:#64748b;">Total références catalogue</span>
                        <span style="font-size:20px;font-weight:700;color:#b45309;">{{ $stats['total'] }}</span>
                    </div>
                    <div style="display:flex;justify-content:space-between;align-items:center;padding:12px;background:#f8fafc;border-radius:8px;">
                        <span style="font-size:13px;color:#64748b;">Références utilisées</span>
                        <span style="font-size:20px;font-weight:700;color:#16a34a;">{{ $stats['utilises'] }}</span>
                    </div>
                    <div style="display:flex;justify-content:space-between;align-items:center;padding:12px;background:#f8fafc;border-radius:8px;">
                        <span style="font-size:13px;color:#64748b;">Références non utilisées</span>
                        <span style="font-size:20px;font-weight:700;color:#94a3b8;">{{ $stats['total'] - $stats['utilises'] }}</span>
                    </div>
                    @if($stats['cout_loc_total'] > 0)
                    <div style="display:flex;justify-content:space-between;align-items:center;padding:12px;background:#dbeafe;border-radius:8px;">
                        <span style="font-size:13px;color:#1e40af;">Coût location journalier</span>
                        <span style="font-size:18px;font-weight:700;color:#1e40af;">{{ number_format($stats['cout_loc_total'],3,',',' ') }} TND</span>
                    </div>
                    @endif
                </div>
            </div>
        </div>

    </div>

    {{-- Top matériels --}}
    @if($topMateriels->count())
    <div class="card">
        <div class="card-header"><h3 class="card-title">Top matériels par utilisation</h3></div>
        <div class="table-wrap">
            <table>
                <thead><tr>
                    <th>#</th>
                    <th>Désignation</th>
                    <th>Référence</th>
                    <th style="text-align:center;">Nb chantiers</th>
                    <th style="text-align:center;">Qté totale déployée</th>
                </tr></thead>
                <tbody>
                @foreach($topMateriels as $i => $mat)
                <tr>
                    <td style="color:#64748b;font-size:13px;">{{ $i + 1 }}</td>
                    <td style="font-weight:600;">{{ $mat->nom }}</td>
                    <td><code>{{ $mat->ref ?: '—' }}</code></td>
                    <td style="text-align:center;">
                        <span class="badge-pill badge-info">{{ $mat->chantier_materiels_count }}</span>
                    </td>
                    <td style="text-align:center;font-weight:600;color:#b45309;">
                        {{ $mat->chantier_materiels_sum_qte ?? 0 }} unités
                    </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-toolbox" style="font-size:36px;margin-bottom:10px;display:block;"></i>
        <p>Aucun matériel 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:#b45309;"></i> Nouveau matériel</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('materiels.store') }}">
                    @csrf
                    <div class="form-grid form-grid-2">
                        <div class="form-group">
                            <label class="form-label">Désignation <span style="color:#dc2626;">*</span></label>
                            <input type="text" name="nom" class="form-control" value="{{ old('nom') }}" required placeholder="Nom de l'équipement ou du matériel">
                            @error('nom')<div style="color:#dc2626;font-size:12px;margin-top:4px;">{{ $message }}</div>@enderror
                        </div>
                        <div class="form-group">
                            <label class="form-label">Référence</label>
                            <input type="text" name="ref" class="form-control" value="{{ old('ref') }}" placeholder="REF-001">
                        </div>
                        <div class="form-group" style="grid-column:1/-1;">
                            <label class="form-label">Notes</label>
                            <textarea name="notes" class="form-control" rows="2" placeholder="Description, caractéristiques...">{{ old('notes') }}</textarea>
                        </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="Désignation, référence..." style="max-width:260px;">
                <button type="submit" class="btn btn-primary"><i class="fas fa-filter"></i> Filtrer</button>
                <a href="{{ route('materiels.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>Désignation</th>
                    <th>Référence</th>
                    <th style="text-align:center;">Chantiers</th>
                    <th style="text-align:center;">Qté totale</th>
                    <th>Notes</th>
                    <th>Actions</th>
                </tr></thead>
                <tbody>
                @forelse($materiels as $mat)
                <tr x-data="{ editing: false }">
                    <td x-show="!editing" style="font-weight:600;">{{ $mat->nom }}</td>
                    <td x-show="!editing"><code>{{ $mat->ref ?: '—' }}</code></td>
                    <td x-show="!editing" style="text-align:center;">
                        @if($mat->chantier_materiels_count > 0)
                            <span class="badge-pill badge-info">{{ $mat->chantier_materiels_count }}</span>
                        @else
                            <span style="color:#94a3b8;font-size:12px;">—</span>
                        @endif
                    </td>
                    <td x-show="!editing" style="text-align:center;font-weight:600;color:#b45309;">
                        {{ ($mat->chantier_materiels_sum_qte ?? 0) > 0 ? $mat->chantier_materiels_sum_qte.' u.' : '—' }}
                    </td>
                    <td x-show="!editing" style="font-size:12px;color:#64748b;max-width:180px;">{{ $mat->notes ? Str::limit($mat->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('materiels.destroy', $mat) }}"
                                  onsubmit="return confirm('Supprimer ce matériel 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('materiels.update', $mat) }}">
                            @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;">Désignation *</label>
                                    <input type="text" name="nom" class="form-control form-control-sm" value="{{ $mat->nom }}" required>
                                </div>
                                <div class="form-group">
                                    <label class="form-label" style="font-size:12px;">Référence</label>
                                    <input type="text" name="ref" class="form-control form-control-sm" value="{{ $mat->ref }}">
                                </div>
                                <div class="form-group" style="grid-column:1/-1;">
                                    <label class="form-label" style="font-size:12px;">Notes</label>
                                    <textarea name="notes" class="form-control form-control-sm" rows="2">{{ $mat->notes }}</textarea>
                                </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-toolbox"></i>
                    <h4>Catalogue vide</h4>
                    <p>Cliquez sur « Nouveau matériel » pour en ajouter un.</p>
                </td></tr>
                @endforelse
                </tbody>
            </table>
        </div>
        @if($materiels->hasPages())
        <div style="padding:12px 16px;border-top:1px solid var(--border);">
            {{ $materiels->links() }}
        </div>
        @endif
    </div>

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

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