@extends('layouts.app')
@section('title', 'Vente')
@section('breadcrumb', 'Commercial / Vente')

@section('content')

@php
    $vTypes    = ['' => 'Tous', 'devis' => 'Devis', 'commande_vente' => 'Commande', 'bl' => 'BL', 'facture_vente' => 'Facture', 'avoir_vente' => 'Avoir'];
    $tabIcons  = ['' => ['fa-th-list','#6b7280'], 'devis' => ['fa-file-alt','#3b82f6'], 'commande_vente' => ['fa-shopping-cart','#f59e0b'], 'bl' => ['fa-truck','#8b5cf6'], 'facture_vente' => ['fa-file-invoice-dollar','#10b981'], 'avoir_vente' => ['fa-undo-alt','#ef4444']];
    $activeTab = request('type', '');
    $tabBase   = request()->except(['type', 'page']);
    $createUrl = fn($t) => route('vente.create') . '?type=' . $t;
@endphp

<div class="page-header">
    <div>
        <h1 class="page-title"><i class="fas fa-file-invoice" style="color:var(--success)"></i> Documents de vente</h1>
        <p class="page-subtitle">{{ $docs->total() }} document(s){{ $activeTab ? ' — ' . ($vTypes[$activeTab] ?? $activeTab) : '' }}</p>
    </div>
    <div class="page-actions">
        <a href="{{ route('vente.export', array_merge(request()->query(), [])) }}" class="btn btn-info">
            <i class="fas fa-download"></i> Export CSV
        </a>
        @php
            $venteColors = ['devis'=>'btn-secondary','commande_vente'=>'btn-primary','bl'=>'btn-success','facture_vente'=>'btn-warning','avoir_vente'=>'btn-danger'];
        @endphp
        @foreach(['devis' => 'Devis', 'commande_vente' => 'Commande', 'bl' => 'BL', 'facture_vente' => 'Facture', 'avoir_vente' => 'Avoir'] as $t => $l)
            <a href="{{ $createUrl($t) }}" class="btn btn-sm {{ $venteColors[$t] }}"><i class="fas fa-plus"></i> {{ $l }}</a>
        @endforeach
    </div>
</div>

{{-- TABS --}}
<div style="display:flex;gap:0;border-bottom:2px solid var(--border);margin-bottom:16px;overflow-x:auto;">
    @foreach($vTypes as $t => $l)
        @php
            $isActive  = $activeTab === $t;
            $href      = $t ? route('vente.index', array_merge($tabBase, ['type' => $t])) : ($tabBase ? route('vente.index', $tabBase) : route('vente.index'));
            $cnt       = $t ? ($typeCounts[$t] ?? 0) : $typeCounts->sum();
            [$ico, $clr] = $tabIcons[$t];
        @endphp
        <a href="{{ $href }}"
           style="display:inline-flex;align-items:center;gap:6px;padding:10px 16px;font-size:13px;text-decoration:none;white-space:nowrap;
                  color:{{ $isActive ? 'var(--primary)' : 'var(--text-muted)' }};
                  font-weight:{{ $isActive ? '600' : '400' }};
                  border-bottom:{{ $isActive ? '2px solid ' . $clr : '2px solid transparent' }};
                  margin-bottom:-2px;">
            <i class="fas {{ $ico }}" style="font-size:13px;color:{{ $clr }};{{ $isActive ? '' : 'opacity:.65;' }}"></i>
            {{ $l }}
            <span style="font-size:11px;padding:1px 7px;border-radius:10px;
                         background:{{ $isActive ? $clr . '22' : 'var(--bg-sidebar)' }};
                         color:{{ $isActive ? $clr : 'var(--text-muted)' }};">{{ $cnt }}</span>
        </a>
    @endforeach
</div>

{{-- FILTERS --}}
<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;">
            @if($activeTab)<input type="hidden" name="type" value="{{ $activeTab }}">@endif
            <select name="statut" class="form-control" style="max-width:130px;">
                <option value="">Tous statuts</option>
                @foreach(['brouillon'=>'Brouillon','confirme'=>'Confirmé','livre'=>'Livré','facture'=>'Facturé','annule'=>'Annulé'] as $s => $l)
                    <option value="{{ $s }}" {{ request('statut') === $s ? 'selected' : '' }}>{{ $l }}</option>
                @endforeach
            </select>
            <select name="client_id" class="form-control" style="max-width:180px;">
                <option value="">Tous les clients</option>
                @foreach($clients as $c)
                    <option value="{{ $c->id }}" {{ request('client_id') == $c->id ? 'selected' : '' }}>{{ $c->nom }}</option>
                @endforeach
            </select>
            <input type="text" name="search" value="{{ request('search') }}" class="form-control" placeholder="N° document..." style="max-width:180px;">
            <input type="date" name="date_from" value="{{ request('date_from') }}" class="form-control" style="max-width:140px;" title="Date début">
            <input type="date" name="date_to" value="{{ request('date_to') }}" class="form-control" style="max-width:140px;" title="Date fin">
            <button type="submit" class="btn btn-primary"><i class="fas fa-filter"></i> Filtrer</button>
            <a href="{{ $activeTab ? route('vente.index', ['type' => $activeTab]) : route('vente.index') }}" class="btn btn-secondary"><i class="fas fa-times"></i></a>
        </form>
    </div>
</div>

<div class="card">
    <div class="table-wrap">
        <table class="table">
            <thead>
                <tr><th>Numéro</th><th>Type</th><th>Client</th><th>Date</th><th>Total TTC</th><th>Statut</th><th>Actions</th></tr>
            </thead>
            <tbody>
            @forelse($docs as $doc)
                <tr>
                    <td><a href="{{ route('vente.show', $doc) }}" style="color:var(--primary);font-weight:500;">{{ $doc->numero }}</a></td>
                    <td><span class="badge-pill badge-info">{{ $doc->type_libelle }}</span></td>
                    <td>{{ $doc->client?->nom ?? '-' }}</td>
                    <td>{{ $doc->date->format('d/m/Y') }}</td>
                    <td style="font-weight:600;">{{ number_format($doc->total_ttc, 3, ',', ' ') }}</td>
                    <td>
                        @php $colors = ['brouillon'=>'badge-muted','confirme'=>'badge-info','livre'=>'badge-warning','facture'=>'badge-success','annule'=>'badge-danger']; @endphp
                        <span class="badge-pill {{ $colors[$doc->statut] ?? 'badge-info' }}">{{ ucfirst($doc->statut) }}</span>
                    </td>
                    <td>
                        <div class="table-actions">
                            <a href="{{ route('vente.show', $doc) }}" class="action-btn" title="Consulter"><i class="fas fa-eye"></i></a>
                            @if(!in_array($doc->statut, ['annule','facture']))
                                <a href="{{ route('vente.edit', $doc) }}" class="action-btn" title="Modifier"><i class="fas fa-pen"></i></a>
                            @endif
                            <form method="POST" action="{{ route('vente.print', $doc) }}">@csrf
                                <button type="submit" class="action-btn" title="Imprimer PDF"><i class="fas fa-file-pdf"></i></button>
                            </form>
                            @php
                                $venteRowAllowed = ['devis'=>['commande_vente'=>'Commande','bl'=>'Bon de Livraison','facture_vente'=>'Facture'],'commande_vente'=>['bl'=>'Bon de Livraison','facture_vente'=>'Facture'],'bl'=>['facture_vente'=>'Facture'],'facture_vente'=>['avoir_vente'=>'Avoir']];
                                $cibles = !$doc->converted ? ($venteRowAllowed[$doc->type] ?? []) : [];
                            @endphp
                            @if(count($cibles) > 0)
                                <button type="button" class="action-btn" title="Convertir"
                                    @click="$dispatch('open-vente-convert', { url: '{{ route('vente.convertir', $doc) }}', numero: '{{ $doc->numero }}', cibles: {{ json_encode($cibles) }}, firstTarget: '{{ array_key_first($cibles) }}', type: '{{ $doc->type }}' })">
                                    <i class="fas fa-exchange-alt"></i>
                                </button>
                            @endif
                        </div>
                    </td>
                </tr>
            @empty
                <tr><td colspan="7" class="empty-state">Aucun document trouvé</td></tr>
            @endforelse
            </tbody>
        </table>
    </div>
    @if($docs->hasPages()) <div style="padding:12px 16px;border-top:1px solid var(--border);">{{ $docs->links() }}</div> @endif
</div>

{{-- ═══════════════════════════════════════════════════════
     MODAL CONVERSION — partagé pour la liste vente
     ═══════════════════════════════════════════════════════ --}}
<div x-data="{
    show: false, url: '', numero: '', cibles: {}, convTarget: '', docType: '',
    open(d) { this.url = d.url; this.numero = d.numero; this.cibles = d.cibles; this.convTarget = d.firstTarget; this.docType = d.type; this.show = true; },
    close() { this.show = false; }
}" @open-vente-convert.window="open($event.detail)">
    <div class="modal-overlay" :class="{ open: show }" @click="close()"></div>
    <div class="modal modal-sm" :class="{ open: show }">
        <div class="modal-header">
            <h3><i class="fas fa-exchange-alt" style="color:var(--success)"></i> Convertir <span x-text="numero"></span></h3>
            <button class="modal-close" @click="close()"><i class="fas fa-times"></i></button>
        </div>
        <div class="modal-body">
            <div class="form-group">
                <label class="form-label">Convertir en :</label>
                <select class="form-control" x-model="convTarget">
                    <template x-for="[t, label] in Object.entries(cibles)" :key="t">
                        <option :value="t" x-text="label"></option>
                    </template>
                </select>
            </div>
            <p x-show="convTarget === 'facture_vente' && docType !== 'bl'" style="font-size:12px;color:#f59e0b;margin-top:8px;">
                <i class="fas fa-info-circle"></i> Un BL sera créé automatiquement avant la facture.
            </p>
            <p style="font-size:12px;color:#64748b;margin-top:6px;">Le document original sera marqué comme traité.</p>
        </div>
        <div class="modal-footer">
            <button type="button" @click="close()" class="btn btn-secondary">Annuler</button>
            <form method="POST" :action="url" style="display:inline;">
                @csrf
                <input type="hidden" name="target" x-bind:value="convTarget">
                <button type="submit" class="btn btn-success"><i class="fas fa-arrow-right"></i> Convertir</button>
            </form>
        </div>
    </div>
</div>

@endsection