@extends('layouts.app')
@section('title', 'Sous-traitants')
@section('breadcrumb', 'Opérations / Sous-traitants')

@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-handshake" style="color:#7c3aed;"></i> Sous-traitants</h1>
        <p class="page-subtitle">Catalogue des entreprises et prestataires</p>
    </div>
    <button @click="tab = 'catalogue'; showForm = !showForm" class="btn btn-primary">
        <i class="fas fa-plus"></i> Nouveau sous-traitant
    </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:#7c3aed;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 purple"><i class="fas fa-handshake"></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['utilises'] }}</div><div class="stat-label">Affectés à des chantiers</div></div>
        </div>
        <div class="stat-card">
            <div class="stat-icon blue"><i class="fas fa-coins"></i></div>
            <div><div class="stat-value">{{ number_format($stats['montant_total'],3,","," ") }}</div><div class="stat-label">Montant total TND</div></div>
        </div>
        <div class="stat-card">
            <div class="stat-icon green"><i class="fas fa-circle-check"></i></div>
            <div><div class="stat-value">{{ number_format($stats['montant_regle'],3,","," ") }}</div><div class="stat-label">Montant réglé TND</div></div>
        </div>
    </div>

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

        {{-- Répartition par statut --}}
        <div class="card">
            <div class="card-header"><h3 class="card-title">Répartition par statut</h3></div>
            <div class="card-body">
                @php
                    $nbTotal = $stats['nb_regle'] + $stats['nb_encours'] + $stats['nb_attente'];
                @endphp
                @if($nbTotal > 0)
                <div style="display:flex;flex-direction:column;gap:14px;">
                    {{-- Réglé --}}
                    <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>
                                Réglé
                            </span>
                            <span style="font-weight:600;">{{ $stats['nb_regle'] }} — {{ number_format($stats['montant_regle'],3,',',' ') }} TND</span>
                        </div>
                        <div style="background:#e2e8f0;border-radius:99px;height:8px;">
                            <div style="width:{{ $nbTotal > 0 ? round($stats['nb_regle']/$nbTotal*100) : 0 }}%;background:#16a34a;height:8px;border-radius:99px;transition:width .4s;"></div>
                        </div>
                    </div>
                    {{-- En cours --}}
                    <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>
                                En cours
                            </span>
                            <span style="font-weight:600;">{{ $stats['nb_encours'] }} — {{ number_format($stats['montant_encours'],3,',',' ') }} TND</span>
                        </div>
                        <div style="background:#e2e8f0;border-radius:99px;height:8px;">
                            <div style="width:{{ $nbTotal > 0 ? round($stats['nb_encours']/$nbTotal*100) : 0 }}%;background:#f59e0b;height:8px;border-radius:99px;transition:width .4s;"></div>
                        </div>
                    </div>
                    {{-- En attente --}}
                    <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:#94a3b8;display:inline-block;"></span>
                                En attente
                            </span>
                            <span style="font-weight:600;">{{ $stats['nb_attente'] }} — {{ number_format($stats['montant_attente'],3,',',' ') }} TND</span>
                        </div>
                        <div style="background:#e2e8f0;border-radius:99px;height:8px;">
                            <div style="width:{{ $nbTotal > 0 ? round($stats['nb_attente']/$nbTotal*100) : 0 }}%;background:#94a3b8;height:8px;border-radius:99px;transition:width .4s;"></div>
                        </div>
                    </div>
                </div>
                @else
                <div style="text-align:center;color:#94a3b8;padding:20px 0;font-size:13px;">Aucune affectation</div>
                @endif
            </div>
        </div>

        {{-- Répartition par corps de métier --}}
        <div class="card">
            <div class="card-header"><h3 class="card-title">Corps de métier</h3></div>
            <div class="card-body">
                @if($prestations->count())
                <div style="display:flex;flex-direction:column;gap:10px;">
                    @foreach($prestations as $p)
                    <div style="display:flex;align-items:center;gap:10px;font-size:13px;">
                        <div style="flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500;">{{ $p->prestation }}</div>
                        <div style="flex:2;background:#e2e8f0;border-radius:99px;height:7px;">
                            <div style="width:{{ $prestations->first()->nb > 0 ? round($p->nb/$prestations->first()->nb*100) : 0 }}%;background:#7c3aed;height:7px;border-radius:99px;"></div>
                        </div>
                        <div style="width:24px;text-align:right;font-weight:700;color:#7c3aed;">{{ $p->nb }}</div>
                    </div>
                    @endforeach
                </div>
                @else
                <div style="text-align:center;color:#94a3b8;padding:20px 0;font-size:13px;">Aucune prestation renseignée</div>
                @endif
            </div>
        </div>

    </div>

    {{-- Top sous-traitants --}}
    @if($topSoustraitants->count())
    <div class="card">
        <div class="card-header"><h3 class="card-title">Top sous-traitants par utilisation</h3></div>
        <div class="table-wrap">
            <table>
                <thead><tr>
                    <th>#</th>
                    <th>Société / Nom</th>
                    <th>Corps de métier</th>
                    <th>Téléphone</th>
                    <th style="text-align:center;">Nb chantiers</th>
                    <th style="text-align:right;">Montant total TND</th>
                </tr></thead>
                <tbody>
                @foreach($topSoustraitants as $i => $sst)
                <tr>
                    <td style="color:#64748b;font-size:13px;">{{ $i + 1 }}</td>
                    <td style="font-weight:600;">{{ $sst->nom }}</td>
                    <td>{{ $sst->prestation ?: '—' }}</td>
                    <td>{{ $sst->tel ?: '—' }}</td>
                    <td style="text-align:center;">
                        <span class="badge-pill badge-info">{{ $sst->chantier_soustraitants_count }}</span>
                    </td>
                    <td style="text-align:right;font-weight:700;color:#7c3aed;">
                        {{ number_format($sst->chantier_soustraitants_sum_montant ?? 0, 3, ',', ' ') }}
                    </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-handshake" style="font-size:36px;margin-bottom:10px;display:block;"></i>
        <p>Aucun sous-traitant 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:#7c3aed;"></i> Nouveau sous-traitant</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('soustraitants.store') }}">
                    @csrf
                    <div class="form-grid form-grid-2">
                        <div class="form-group">
                            <label class="form-label">Société / Nom <span style="color:#dc2626;">*</span></label>
                            <input type="text" name="nom" class="form-control" value="{{ old('nom') }}" required placeholder="Nom de la société ou du prestataire">
                            @error('nom')<div style="color:#dc2626;font-size:12px;margin-top:4px;">{{ $message }}</div>@enderror
                        </div>
                        <div class="form-group">
                            <label class="form-label">Corps de métier / Prestation</label>
                            <input type="text" name="prestation" class="form-control" value="{{ old('prestation') }}" placeholder="Ex: Électricité, Plomberie, Peinture...">
                        </div>
                        <div class="form-group">
                            <label class="form-label">Téléphone</label>
                            <input type="text" name="tel" class="form-control" value="{{ old('tel') }}" placeholder="+216 XX XXX XXX">
                        </div>
                        <div class="form-group">
                            <label class="form-label">Email</label>
                            <input type="email" name="email" class="form-control" value="{{ old('email') }}" placeholder="contact@societe.tn">
                            @error('email')<div style="color:#dc2626;font-size:12px;margin-top:4px;">{{ $message }}</div>@enderror
                        </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="Observations, références...">{{ 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="Nom, prestation..." style="max-width:260px;">
                <button type="submit" class="btn btn-primary"><i class="fas fa-filter"></i> Filtrer</button>
                <a href="{{ route('soustraitants.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>Société / Nom</th>
                    <th>Corps de métier</th>
                    <th>Téléphone</th>
                    <th>Email</th>
                    <th style="text-align:center;">Chantiers</th>
                    <th style="text-align:right;">Montant total</th>
                    <th>Actions</th>
                </tr></thead>
                <tbody>
                @forelse($soustraitants as $sst)
                <tr x-data="{ editing: false }">
                    <td x-show="!editing" style="font-weight:600;">{{ $sst->nom }}</td>
                    <td x-show="!editing">{{ $sst->prestation ?: '—' }}</td>
                    <td x-show="!editing">{{ $sst->tel ?: '—' }}</td>
                    <td x-show="!editing" style="font-size:12px;">{{ $sst->email ?: '—' }}</td>
                    <td x-show="!editing" style="text-align:center;">
                        @if($sst->chantier_soustraitants_count > 0)
                            <span class="badge-pill badge-info">{{ $sst->chantier_soustraitants_count }}</span>
                        @else
                            <span style="color:#94a3b8;font-size:12px;">—</span>
                        @endif
                    </td>
                    <td x-show="!editing" style="text-align:right;font-weight:600;color:#7c3aed;">
                        @if(($sst->chantier_soustraitants_sum_montant ?? 0) > 0)
                            {{ number_format($sst->chantier_soustraitants_sum_montant, 3, ',', ' ') }} TND
                        @else
                            —
                        @endif
                    </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('soustraitants.destroy', $sst) }}"
                                  onsubmit="return confirm('Supprimer ce sous-traitant 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="7" style="padding:14px 16px;background:#f8fafc;">
                        <form method="POST" action="{{ route('soustraitants.update', $sst) }}">
                            @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;">Société / Nom *</label>
                                    <input type="text" name="nom" class="form-control form-control-sm" value="{{ $sst->nom }}" required>
                                </div>
                                <div class="form-group">
                                    <label class="form-label" style="font-size:12px;">Corps de métier</label>
                                    <input type="text" name="prestation" class="form-control form-control-sm" value="{{ $sst->prestation }}">
                                </div>
                                <div class="form-group">
                                    <label class="form-label" style="font-size:12px;">Téléphone</label>
                                    <input type="text" name="tel" class="form-control form-control-sm" value="{{ $sst->tel }}">
                                </div>
                                <div class="form-group">
                                    <label class="form-label" style="font-size:12px;">Email</label>
                                    <input type="email" name="email" class="form-control form-control-sm" value="{{ $sst->email }}">
                                </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">{{ $sst->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="7" class="empty-state">
                    <i class="fas fa-handshake"></i>
                    <h4>Catalogue vide</h4>
                    <p>Cliquez sur « Nouveau sous-traitant » pour en ajouter un.</p>
                </td></tr>
                @endforelse
                </tbody>
            </table>
        </div>
        @if($soustraitants->hasPages())
        <div style="padding:12px 16px;border-top:1px solid var(--border);">
            {{ $soustraitants->links() }}
        </div>
        @endif
    </div>

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

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