@extends('layouts.app')
@section('title', $produit->nom)
@section('breadcrumb', 'Produits / '.$produit->nom)

@push('head')
<style>
/* ── Page-as-modal (lecture seule) ──────────────────────────────── */
#prod-modal-wrap {
  position: fixed; inset: 0;
  background: rgba(15,23,42,0.5);
  backdrop-filter: blur(3px);
  z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
#prod-modal {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%; max-width: 1020px; max-height: 92vh;
  display: flex; flex-direction: column; overflow: hidden;
}
.modal-close-btn {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 6px;
  background: none; border: none;
  color: var(--text-muted); font-size: 18px;
  cursor: pointer; text-decoration: none;
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
.modal-close-btn:hover { background: #fee2e2; color: var(--danger); }
.img-preview-ro { width: 80px; height: 80px; border-radius: 10px; object-fit: cover; }
.marge-indicator {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; border-radius: var(--radius);
  background: var(--bg); border: 1px solid var(--border);
}
.marge-bar-wrap { flex: 1; height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; }
.marge-bar { height: 100%; border-radius: 4px; }
.qte-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(120px,1fr)); gap: 10px; }
.qte-card {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px; text-align: center;
}
.qte-card .qte-val { font-size: 22px; font-weight: 700; }
.qte-card .qte-lbl { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.qte-card.total .qte-val { color: var(--primary); }
.qte-card.reserved .qte-val { color: var(--warning); }
.qte-card.available .qte-val { color: var(--success); }
.qte-card.pending .qte-val { color: var(--info); }
.fourn-card-ro {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border: 2px solid var(--border); border-radius: var(--radius);
  background: var(--bg-card);
}
.form-section-title {
  font-size: 13px; font-weight: 600; color: var(--primary);
  grid-column: 1/-1; padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px;
  margin-top: 4px;
}
.ro-field {
  display: flex; flex-direction: column; gap: 4px;
}
.ro-field .ro-label { font-size: 12px; color: var(--text-muted); }
.ro-field .ro-value { font-size: 13.5px; font-weight: 500; color: var(--text); min-height: 20px; }
.prod-summary-photo {
  width: 64px; height: 64px; border-radius: 14px;
  background: var(--primary-light);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; flex-shrink: 0;
}
.prod-summary-photo img { width: 100%; height: 100%; object-fit: cover; }
</style>
@endpush

@section('content')
<div x-data="{ tab: 'prix' }" @keydown.escape.window="window.location='{{ route('produits.index') }}'">

  <div id="prod-modal-wrap">
    <div id="prod-modal">

      {{-- ── HEADER ───────────────────────────────────────────── --}}
      <div class="modal-header">
        <h3>
          <i class="fas fa-box" style="color:var(--primary);margin-right:10px;"></i>
          Fiche produit — {{ $produit->nom }}
        </h3>
        <a href="{{ route('produits.index') }}" class="modal-close-btn" title="Fermer (Échap)">
          <i class="fas fa-times"></i>
        </a>
      </div>

      {{-- ── CARTE RÉSUMÉ (toujours visible) ─────────────────── --}}
      <div class="card" style="margin:16px 20px 0;padding:16px 20px;display:flex;gap:20px;align-items:flex-start;flex-shrink:0;">
        <div style="text-align:center;">
          <div class="prod-summary-photo">
            @if($produit->image)
              <img src="{{ asset('storage/'.$produit->image) }}" alt="{{ $produit->nom }}">
            @else
              <i class="fas fa-box-open" style="font-size:26px;color:var(--primary);"></i>
            @endif
          </div>
          <div style="margin-top:8px;font-size:10.5px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.3px;">Code Article</div>
          <div style="font-size:12.5px;font-weight:700;">{{ $produit->code_article ?: '—' }}</div>
        </div>

        <div style="flex:1;min-width:0;">
          <h3 style="margin:0 0 8px;font-size:17px;">{{ $produit->nom }}</h3>
          <div style="display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;">
            @if($produit->famille)<span class="badge-pill badge-primary">{{ $produit->famille->label }}</span>@endif
            @if($produit->categorie)<span class="badge-pill badge-info">{{ $produit->categorie->label }}</span>@endif
            @if($produit->unite)<span class="badge-pill badge-muted">{{ $produit->unite->label }}</span>@endif
            @if($produit->gestion_serie)<span class="badge-pill badge-warning">N° Série</span>@endif
            <span class="badge-pill {{ $produit->actif ? 'badge-success' : 'badge-danger' }}">{{ $produit->actif ? 'Actif' : 'Inactif' }}</span>
          </div>

          <div class="grid-2" style="gap:10px 24px;font-size:13px;">
            <div><span style="color:var(--text-muted);">Réf: </span><strong>{{ $produit->ref ?: '—' }}</strong></div>
            <div><span style="color:var(--text-muted);">Code-barre: </span><strong>{{ $produit->code_barre ?: '—' }}</strong></div>
            <div><span style="color:var(--text-muted);">Prix achat HT: </span><strong style="color:var(--danger);">{{ number_format($produit->prix_achat_ht, 3, ',', ' ') }} TND</strong></div>
            <div><span style="color:var(--text-muted);">Prix vente HT: </span><strong style="color:var(--success);">{{ number_format($produit->prix_vente_ht, 3, ',', ' ') }} TND</strong></div>
            <div><span style="color:var(--text-muted);">TVA: </span><strong>{{ $produit->tva?->taux ?? 0 }}%</strong></div>
            <div><span style="color:var(--text-muted);">Marge: </span><strong style="color:var(--success);">{{ number_format($produit->marge, 1) }}%</strong></div>
          </div>

          @if($produit->description)
          <div style="margin-top:12px;font-size:12.5px;color:var(--text-muted);">{{ $produit->description }}</div>
          @endif
        </div>
      </div>

      {{-- ── TABS ─────────────────────────────────────────────── --}}
      <div class="tabs" style="margin:0;padding:0 20px;flex-shrink:0;background:var(--bg-card);">
        <button type="button" class="tab-btn" :class="{ active: tab==='prix' }" @click="tab='prix'">
          <i class="fas fa-tag"></i> Prix &amp; Fiscalité
        </button>
        <button type="button" class="tab-btn" :class="{ active: tab==='stock' }" @click="tab='stock'">
          <i class="fas fa-warehouse"></i> Stock
        </button>
        <button type="button" class="tab-btn" :class="{ active: tab==='fourn' }" @click="tab='fourn'">
          <i class="fas fa-truck"></i> Fournisseurs
        </button>
        <button type="button" class="tab-btn" :class="{ active: tab==='histo' }" @click="tab='histo'">
          <i class="fas fa-history"></i> Historiques
        </button>
      </div>

      {{-- ── BODY (scrollable) ────────────────────────────────── --}}
      <div class="modal-body">

        {{-- ══════════════ TAB : PRIX & FISCALITÉ ═════════════ --}}
        <div x-show="tab==='prix'" x-cloak>
          <div class="form-grid form-grid-2">
            <div class="ro-field">
              <span class="ro-label">TVA Vente</span>
              <span class="ro-value">{{ $produit->tva ? $produit->tva->label.' ('.$produit->tva->taux.'%)' : '—' }}</span>
            </div>
            <div class="ro-field">
              <span class="ro-label">TVA Achat (si différente)</span>
              <span class="ro-value">{{ $produit->tvaAchat ? $produit->tvaAchat->label.' ('.$produit->tvaAchat->taux.'%)' : '—' }}</span>
            </div>

            <div class="form-section-title">
              <i class="fas fa-shopping-cart"></i> Prix d'achat
            </div>
            <div class="ro-field">
              <span class="ro-label">Prix d'achat HT</span>
              <span class="ro-value">{{ number_format($produit->prix_achat_ht, 3, ',', ' ') }}</span>
            </div>
            @php $tauxAchat = (float)(optional($produit->tvaAchat ?? $produit->tva)->taux ?? 0); @endphp
            <div class="ro-field">
              <span class="ro-label">Prix d'achat TTC</span>
              <span class="ro-value">{{ number_format($produit->prix_achat_ht * (1 + $tauxAchat / 100), 3, ',', ' ') }}</span>
            </div>

            <div class="form-section-title">
              <i class="fas fa-tag"></i> Prix de vente
            </div>
            <div class="ro-field">
              <span class="ro-label">Prix de vente HT</span>
              <span class="ro-value">{{ number_format($produit->prix_vente_ht, 3, ',', ' ') }}</span>
            </div>
            <div class="ro-field">
              <span class="ro-label">Prix de vente TTC</span>
              <span class="ro-value">{{ number_format($produit->prix_vente_ttc, 3, ',', ' ') }}</span>
            </div>

            <div class="ro-field">
              <span class="ro-label">Marge (%)</span>
              <span class="ro-value">{{ number_format($produit->marge, 2) }}%</span>
            </div>
            <div class="ro-field">
              <span class="ro-label">Plafond de remise (%)</span>
              <span class="ro-value">{{ number_format($produit->plafond_remise ?? 0, 2) }}%</span>
            </div>

            <div style="grid-column:1/-1;margin-top:4px;">
              <div class="marge-indicator">
                <span style="font-size:12px;color:var(--text-muted);min-width:50px;">Marge</span>
                <div class="marge-bar-wrap">
                  <div class="marge-bar"
                       style="width:{{ min(max((float)$produit->marge, 0), 100) }}%;background:{{ $produit->marge >= 30 ? 'var(--success)' : ($produit->marge >= 15 ? 'var(--warning)' : 'var(--danger)') }};"></div>
                </div>
                <span style="font-size:15px;font-weight:700;min-width:56px;text-align:right;color:{{ $produit->marge >= 30 ? 'var(--success)' : ($produit->marge >= 15 ? 'var(--warning)' : 'var(--danger)') }};">
                  {{ number_format($produit->marge, 1) }}%
                </span>
              </div>
            </div>
          </div>
        </div>{{-- /tab prix --}}

        {{-- ══════════════ TAB : STOCK ═════════════════════════ --}}
        <div x-show="tab==='stock'" x-cloak>
          <div class="form-grid form-grid-2">
            <div class="ro-field">
              <span class="ro-label">Stock d'ouverture</span>
              <span class="ro-value">{{ number_format($produit->stock_ouverture ?? 0, 3, ',', ' ') }}</span>
            </div>
            <div class="ro-field">
              <span class="ro-label">Quantité en stock (actuelle)</span>
              <span class="ro-value">{{ number_format($produit->qte_stock ?? 0, 3, ',', ' ') }}</span>
            </div>
          </div>

          <div style="margin-top:16px;">
            <label class="form-label">Stock par emplacement</label>
            <div class="table-wrap" style="margin-top:6px;">
              <table>
                <thead><tr><th>Emplacement</th><th style="text-align:right;">Quantité</th></tr></thead>
                <tbody>
                  @forelse($produit->emplacements as $e)
                    <tr>
                      <td>{{ $e->label }}</td>
                      <td style="text-align:right;font-weight:600;">{{ number_format($e->pivot->qte ?? 0, 3, ',', ' ') }}</td>
                    </tr>
                  @empty
                    <tr><td colspan="2" class="empty-state">Aucun emplacement associé à ce produit.</td></tr>
                  @endforelse
                </tbody>
              </table>
            </div>
          </div>

          <div class="qte-grid" style="margin-top:16px;">
            <div class="qte-card total">
              <div class="qte-val">{{ number_format($produit->qte_stock, 0) }}</div>
              <div class="qte-lbl">Q. Total</div>
            </div>
            <div class="qte-card reserved">
              <div class="qte-val">{{ number_format($produit->qte_reservee ?? 0, 0) }}</div>
              <div class="qte-lbl">Q. Réservée</div>
            </div>
            <div class="qte-card available">
              @php $dispo = ($produit->qte_stock ?? 0) - ($produit->qte_reservee ?? 0); @endphp
              <div class="qte-val">{{ number_format($dispo, 0) }}</div>
              <div class="qte-lbl">Q. Disponible</div>
            </div>
            <div class="qte-card pending">
              <div class="qte-val">{{ number_format($produit->qte_attente ?? 0, 0) }}</div>
              <div class="qte-lbl">Q. En attente</div>
            </div>
          </div>
        </div>{{-- /tab stock --}}

        {{-- ══════════════ TAB : FOURNISSEURS ═════════════════ --}}
        <div x-show="tab==='fourn'" x-cloak>
          <div class="form-group">
            <label class="form-label">Fournisseurs liés</label>
            <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin-top:8px;max-height:380px;overflow-y:auto;padding-right:2px;">
              @forelse($produit->fournisseurs as $f)
                <div class="fourn-card-ro">
                  <div style="width:36px;height:36px;border-radius:8px;background:var(--bg);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                    <i class="fas fa-truck" style="color:var(--primary);font-size:14px;"></i>
                  </div>
                  <div style="min-width:0;">
                    <div style="font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ $f->nom }}</div>
                    <div style="font-size:11px;color:var(--text-muted);">
                      {{ $f->pivot->ref_fournisseur ?? $f->code ?? '' }}
                      @if($f->pivot->prix_achat)
                        · {{ number_format($f->pivot->prix_achat, 3, ',', ' ') }}
                      @endif
                    </div>
                  </div>
                </div>
              @empty
                <div style="grid-column:1/-1;text-align:center;padding:32px 0;color:var(--text-muted);font-size:13px;">
                  <i class="fas fa-truck" style="font-size:28px;margin-bottom:10px;display:block;opacity:.4;"></i>
                  Aucun fournisseur lié
                </div>
              @endforelse
            </div>
          </div>
        </div>{{-- /tab fourn --}}

        {{-- ══════════════ TAB : HISTORIQUES ══════════════════ --}}
        <div x-show="tab==='histo'" x-cloak x-data="{ histoTab: 'achat' }">
          <div class="tabs" style="margin-bottom:16px;">
            <button type="button" class="tab-btn" :class="{ active: histoTab==='achat' }" @click="histoTab='achat'">
              <i class="fas fa-cart-arrow-down"></i> Historique Achat
            </button>
            <button type="button" class="tab-btn" :class="{ active: histoTab==='vente' }" @click="histoTab='vente'">
              <i class="fas fa-file-invoice"></i> Historique Vente
            </button>
          </div>

          <div x-show="histoTab==='achat'">
            @php
              $achatsDocs = \App\Models\AchatDocument::whereHas('lignes', fn($q) => $q->where('produit_id', $produit->id))
                  ->with(['fournisseur', 'lignes' => fn($q) => $q->where('produit_id', $produit->id)])
                  ->orderByDesc('date')->limit(20)->get();
            @endphp
            @if($achatsDocs->isEmpty())
              <div class="empty-state">
                <i class="fas fa-inbox"></i>
                <p>Aucun achat enregistré pour ce produit.</p>
              </div>
            @else
              <div class="table-wrap">
                <table>
                  <thead><tr>
                    <th>N° Document</th><th>Type</th><th>Fournisseur</th><th>Date</th><th>Qté</th><th>Prix HT</th>
                  </tr></thead>
                  <tbody>
                    @foreach($achatsDocs as $d)
                      @php $lg = $d->lignes->first(); @endphp
                      <tr>
                        <td>
                          <a href="{{ route('achat.show', $d) }}" style="color:var(--primary);font-weight:600;">
                            {{ $d->numero }}
                          </a>
                        </td>
                        <td><span class="badge-pill badge-muted">{{ $d->type }}</span></td>
                        <td>{{ $d->fournisseur?->nom ?? '—' }}</td>
                        <td>{{ $d->date?->format('d/m/Y') ?? '—' }}</td>
                        <td>{{ $lg ? number_format($lg->qte, 3, ',', ' ') : '—' }}</td>
                        <td>{{ $lg ? number_format($lg->prix_unit_ht, 3, ',', ' ') : '—' }}</td>
                      </tr>
                    @endforeach
                  </tbody>
                </table>
              </div>
            @endif
          </div>

          <div x-show="histoTab==='vente'" x-cloak>
            @php
              $ventesDocs = \App\Models\VenteDocument::whereHas('lignes', fn($q) => $q->where('produit_id', $produit->id))
                  ->with(['client', 'lignes' => fn($q) => $q->where('produit_id', $produit->id)])
                  ->orderByDesc('date')->limit(20)->get();
            @endphp
            @if($ventesDocs->isEmpty())
              <div class="empty-state">
                <i class="fas fa-inbox"></i>
                <p>Aucune vente enregistrée pour ce produit.</p>
              </div>
            @else
              <div class="table-wrap">
                <table>
                  <thead><tr>
                    <th>N° Document</th><th>Type</th><th>Client</th><th>Date</th><th>Qté</th><th>Prix HT</th>
                  </tr></thead>
                  <tbody>
                    @foreach($ventesDocs as $d)
                      @php $lg = $d->lignes->first(); @endphp
                      <tr>
                        <td>
                          <a href="{{ route('vente.show', $d) }}" style="color:var(--primary);font-weight:600;">
                            {{ $d->numero }}
                          </a>
                        </td>
                        <td><span class="badge-pill badge-muted">{{ $d->type }}</span></td>
                        <td>{{ $d->client?->nom ?? '—' }}</td>
                        <td>{{ $d->date?->format('d/m/Y') ?? '—' }}</td>
                        <td>{{ $lg ? number_format($lg->qte, 3, ',', ' ') : '—' }}</td>
                        <td>{{ $lg ? number_format($lg->prix_unit_ht, 3, ',', ' ') : '—' }}</td>
                      </tr>
                    @endforeach
                  </tbody>
                </table>
              </div>
            @endif
          </div>
        </div>{{-- /tab histo --}}

      </div>{{-- /modal-body --}}

      {{-- ── FOOTER ───────────────────────────────────────────── --}}
      <div class="modal-footer">
        <a href="{{ route('produits.index') }}" class="btn btn-secondary">
          <i class="fas fa-times"></i> Fermer
        </a>
        <a href="{{ route('produits.edit', $produit) }}" class="btn btn-primary">
          <i class="fas fa-edit"></i> Modifier
        </a>
      </div>

    </div>
  </div>

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