@extends('layouts.app')
@section('title', 'Stock')
@section('breadcrumb', 'Catalogue / Stock & Inventaire')
@section('content')

<div x-data="{
    activeTab: '{{ request('tab', 'st_stock') }}',
    modal: { open: false, isEdit: false, id: null, code: '', label: '', parentId: '' },
    openAdd() {
        this.modal = { open: true, isEdit: false, id: null, code: '', label: '', parentId: '' };
    },
    openEdit(id, code, label, parentId) {
        this.modal = { open: true, isEdit: true, id: id, code: code, label: label, parentId: parentId };
    },
    closeModal() { this.modal.open = false; }
}">

{{-- PAGE HEADER --}}
<div class="page-header">
    <div>
        <h1 class="page-title"><i class="fas fa-warehouse" style="color:var(--primary)"></i> Stock & Inventaire</h1>
        <p class="page-subtitle">Valeur totale : {{ number_format($valeurStock, 3, ',', ' ') }} TND</p>
    </div>
    <div class="page-actions">
        <a href="{{ route('stock.transferts') }}" class="btn btn-info"><i class="fas fa-exchange-alt"></i> Transferts</a>
        <a href="{{ route('stock.inventaires') }}" class="btn btn-warning"><i class="fas fa-clipboard-list"></i> Inventaires</a>
        <a href="{{ route('stock.inventaires.create') }}" class="btn btn-success"><i class="fas fa-plus"></i> Nouvel inventaire</a>
    </div>
</div>

{{-- TABS --}}
<div class="tabs" style="margin-bottom:20px;">
    <button class="tab-btn" :class="{ active: activeTab === 'st_stock' }" @click="activeTab = 'st_stock'">
        <i class="fas fa-boxes"></i> État du stock
    </button>
    <button class="tab-btn" :class="{ active: activeTab === 'st_emplacements' }" @click="activeTab = 'st_emplacements'">
        <i class="fas fa-map-marker-alt"></i> Emplacements
    </button>
</div>

{{-- ════════════════════════════════════════════
     TAB : ÉTAT DU STOCK
════════════════════════════════════════════ --}}
<div id="tab_st_stock" x-show="activeTab === 'st_stock'" x-cloak>

    <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="st_stock">
                <input type="text" name="search" value="{{ request('search') }}" class="form-control" placeholder="Nom ou code..." style="max-width:200px;">
                <select name="famille_id" class="form-control" style="max-width:150px;">
                    <option value="">Toutes familles</option>
                    @foreach($familles as $f)
                        <option value="{{ $f->id }}" {{ request('famille_id') == $f->id ? 'selected' : '' }}>{{ $f->label }}</option>
                    @endforeach
                </select>
                <select name="emplacement_id" class="form-control" style="max-width:160px;">
                    <option value="">Tous emplacements</option>
                    @foreach($emplacements as $e)
                        <option value="{{ $e->id }}" {{ request('emplacement_id') == $e->id ? 'selected' : '' }}>
                            {{ $e->parent_id ? '└ ' : '' }}{{ $e->label }}
                        </option>
                    @endforeach
                </select>
                <select name="stock_alert" class="form-control" style="max-width:160px;">
                    <option value="">Stock : tous</option>
                    <option value="rupture" {{ request('stock_alert') === 'rupture' ? 'selected' : '' }}>Rupture (≤ 0)</option>
                    <option value="faible" {{ request('stock_alert') === 'faible' ? 'selected' : '' }}>Stock faible (≤ 5)</option>
                </select>
                <button type="submit" class="btn btn-primary"><i class="fas fa-filter"></i> Filtrer</button>
                <a href="{{ route('stock.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">
                @php
                    $empLabel = $empId
                        ? ($emplacements->firstWhere('id', $empId)?->label ?? '')
                        : null;
                @endphp
                <thead>
                    <tr>
                        <th>Code</th>
                        <th>Produit</th>
                        <th>Famille</th>
                        <th>Emplacement(s)</th>
                        <th>
                            @if($empLabel)
                                <i class="fas fa-map-marker-alt" style="color:var(--primary);font-size:11px;"></i>
                                Qté — {{ $empLabel }}
                            @else
                                Qté totale (empl.)
                            @endif
                        </th>
                        <th>Qté réservée</th>
                        <th>Q. Disponible</th>
                        <th>Q. Attente</th>
                        <th>Valeur HT</th>
                    </tr>
                </thead>
                <tbody>
                @forelse($produits as $p)
                    @php
                        $qteEmp   = $empId
                            ? (float) ($p->emplacements->firstWhere('id', $empId)?->pivot->qte ?? 0)
                            : $p->emplacements->sum(fn($e) => (float) $e->pivot->qte);
                        $qteReservee = (float) ($qteReserveeMap[$p->id] ?? 0);
                        $qteDispo    = $qteEmp - $qteReservee;
                    @endphp
                    <tr>
                        <td><code>{{ $p->code_article }}</code></td>
                        <td>{{ $p->nom }}</td>
                        <td>{{ $p->famille?->label ?? '-' }}</td>
                        <td style="font-size:12px;color:var(--text-muted);">
                            @if($empId)
                                {{ $p->emplacements->firstWhere('id', $empId)?->label ?? '-' }}
                            @else
                                {{ $p->emplacements->pluck('label')->join(', ') ?: '-' }}
                            @endif
                        </td>
                        <td>
                            <span class="badge-pill {{ $qteEmp <= 0 ? 'badge-danger' : ($qteEmp <= 5 ? 'badge-warning' : 'badge-success') }}">
                                {{ number_format($qteEmp, 3, ',', ' ') }}
                            </span>
                        </td>
                        <td>{{ number_format((float) ($qteReserveeMap[$p->id] ?? 0), 3, ',', ' ') }}</td>
                        <td>
                            <span class="badge-pill {{ $qteDispo < 0 ? 'badge-danger' : ($qteDispo < 3 ? 'badge-warning' : 'badge-success') }}">
                                {{ number_format($qteDispo, 3, ',', ' ') }}
                            </span>
                        </td>
                        <td style="color:var(--info)">{{ number_format((float) ($qteAttenteMap[$p->id] ?? 0), 3, ',', ' ') }}</td>
                        <td>{{ number_format($qteEmp * $p->prix_achat_ht, 3, ',', ' ') }}</td>
                    </tr>
                @empty
                    <tr><td colspan="9" class="empty-state">Aucun produit</td></tr>
                @endforelse
                </tbody>
            </table>
        </div>
        @if($produits->hasPages())
            <div style="padding:12px 16px;border-top:1px solid var(--border);">{{ $produits->links() }}</div>
        @endif
    </div>

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

{{-- ════════════════════════════════════════════
     TAB : EMPLACEMENTS
════════════════════════════════════════════ --}}
<div id="tab_st_emplacements" x-show="activeTab === 'st_emplacements'" x-cloak>

    <div class="card">
        <div class="card-header">
            <span class="card-title"><i class="fas fa-map-marker-alt" style="color:var(--primary);margin-right:6px;"></i>Emplacements & sous-emplacements</span>
            <button class="btn btn-primary btn-sm" @click="openAdd()">
                <i class="fas fa-plus"></i> Ajouter
            </button>
        </div>
        <div class="table-wrap">
            <table class="table">
                <thead>
                    <tr>
                        <th>Code</th>
                        <th>Libellé</th>
                        <th>Parent</th>
                        <th style="text-align:center;">Nb produits</th>
                        <th style="text-align:right;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                @forelse($emplacements as $e)
                    <tr>
                        <td><code>{{ $e->code }}</code></td>
                        <td>
                            @if($e->parent_id)
                                <span style="color:var(--text-muted);margin-right:4px;">└</span>
                            @else
                                <strong>
                            @endif
                            {{ $e->label }}
                            @if(!$e->parent_id)</strong>@endif
                        </td>
                        <td>{{ $e->parent?->label ?? '—' }}</td>
                        <td style="text-align:center;">
                            <span class="badge-pill {{ $e->produits_count > 0 ? 'badge-primary' : 'badge-secondary' }}">
                                {{ $e->produits_count }}
                            </span>
                        </td>
                        <td>
                            <div class="table-actions">
                                <button type="button" class="action-btn" title="Modifier"
                                    @click="$parent.openEdit({{ $e->id }}, '{{ addslashes($e->code) }}', '{{ addslashes($e->label) }}', '{{ $e->parent_id ?? '' }}')">
                                    <i class="fas fa-pen"></i>
                                </button>
                                <form method="POST" action="{{ route('stock.emplacements.destroy', $e) }}" onsubmit="return confirm('Supprimer cet emplacement ?')">
                                    @csrf @method('DELETE')
                                    <button type="submit" class="action-btn danger" title="Supprimer"><i class="fas fa-trash"></i></button>
                                </form>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="5" class="empty-state">Aucun emplacement — cliquez sur Ajouter</td></tr>
                @endforelse
                </tbody>
            </table>
        </div>
    </div>

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

{{-- ════════════════════════════════════════════
     MODAL AJOUT / ÉDITION EMPLACEMENT
════════════════════════════════════════════ --}}
<div class="modal-overlay" :class="{ open: modal.open }" @click.self="closeModal()"></div>

<div class="modal modal-sm" :class="{ open: modal.open }">
    <div class="modal-header">
        <h3 x-text="modal.isEdit ? 'Modifier emplacement' : 'Nouvel emplacement'"></h3>
        <button @click="closeModal()"><i class="fas fa-times"></i></button>
    </div>

    <form :action="modal.isEdit ? '/stock/emplacements/' + modal.id : '/stock/emplacements'"
          method="POST" @submit="modal.open = false">
        @csrf
        <input type="hidden" name="_method" x-bind:value="modal.isEdit ? 'PUT' : 'POST'">

        <div class="modal-body">
            <div class="form-group" style="margin-bottom:14px;">
                <label class="form-label">Code <span style="color:var(--danger)">*</span></label>
                <input type="text" name="code" class="form-control" placeholder="ex: MAG1, MAG1-A"
                       x-model="modal.code" required maxlength="50">
            </div>
            <div class="form-group" style="margin-bottom:14px;">
                <label class="form-label">Libellé <span style="color:var(--danger)">*</span></label>
                <input type="text" name="label" class="form-control" placeholder="ex: Magasin Principal"
                       x-model="modal.label" required maxlength="150">
            </div>
            <div class="form-group">
                <label class="form-label">Parent <span style="color:var(--text-muted);font-weight:400;">(sous-emplacement de)</span></label>
                <select name="parent_id" class="form-control" x-model="modal.parentId">
                    <option value="">— Emplacement racine —</option>
                    @foreach($emplacements->whereNull('parent_id') as $root)
                        <option value="{{ $root->id }}">{{ $root->label }}</option>
                    @endforeach
                </select>
            </div>
        </div>

        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" @click="closeModal()">Annuler</button>
            <button type="submit" class="btn btn-primary">
                <i class="fas fa-save"></i>
                <span x-text="modal.isEdit ? 'Enregistrer' : 'Créer'"></span>
            </button>
        </div>
    </form>
</div>

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