@extends('layouts.app')
@section('title', 'Nouveau transfert de stock')
@section('breadcrumb', 'Catalogue / Stock / Transferts / Nouveau')

@section('content')

@php
    $rootEmps = $emplacements->whereNull('parent_id');
    $childEmps = $emplacements->whereNotNull('parent_id')->groupBy('parent_id');
    $produitsJson = $produits->map(fn($p) => [
        'id'         => $p->id,
        'code'       => $p->code_article ?? '',
        'nom'        => $p->nom,
        'unite'      => $p->unite?->code ?? '',
        'stock'      => (float) $p->qte_stock,
        'emp_stocks' => $p->emplacements->mapWithKeys(
            fn($e) => [(string) $e->id => (float) $e->pivot->qte]
        )->toArray(),
    ])->values();
@endphp

<script>window.__tProduits = {!! json_encode($produitsJson, JSON_HEX_TAG | JSON_UNESCAPED_UNICODE) !!};</script>

<div x-data="transfertFormData()">

<div class="page-header">
    <div>
        <h1 class="page-title"><i class="fas fa-arrow-right-arrow-left" style="color:var(--info)"></i> Nouveau bon de transfert</h1>
        <p class="page-subtitle">Déplacement de produits entre emplacements</p>
    </div>
    <div class="page-actions">
        <a href="{{ route('stock.transferts') }}" class="btn btn-secondary"><i class="fas fa-arrow-left"></i> Retour</a>
    </div>
</div>

<form method="POST" action="{{ route('stock.transferts.store') }}">
    @csrf

    {{-- HEADER --}}
    <div class="card" style="margin-bottom:16px;">
        <div class="card-header"><span class="card-title">Informations du transfert</span></div>
        <div class="card-body" style="padding:16px;">
            <div class="grid-3">

                <div class="form-group">
                    <label class="form-label">Date <span style="color:var(--danger)">*</span></label>
                    <input type="date" name="date" class="form-control" value="{{ old('date', date('Y-m-d')) }}" required>
                    @error('date')<div class="form-error">{{ $message }}</div>@enderror
                </div>

                <div class="form-group">
                    <label class="form-label">Emplacement source <span style="color:var(--danger)">*</span></label>
                    <select name="emplacement_source_id" x-model="sourceId" @change="onSourceChange()" class="form-control" required>
                        <option value="">— Choisir la source —</option>
                        @foreach($rootEmps as $root)
                            <option value="{{ $root->id }}" {{ old('emplacement_source_id') == $root->id ? 'selected' : '' }} style="font-weight:600;">
                                {{ $root->label }}
                            </option>
                            @foreach($childEmps->get($root->id, collect()) as $child)
                                <option value="{{ $child->id }}" {{ old('emplacement_source_id') == $child->id ? 'selected' : '' }}>
                                    &nbsp;&nbsp;└ {{ $child->label }}
                                </option>
                            @endforeach
                        @endforeach
                        @foreach($childEmps->keys() as $pid)
                            @if(!$rootEmps->contains('id', $pid))
                                @foreach($childEmps->get($pid, collect()) as $orphan)
                                    <option value="{{ $orphan->id }}" {{ old('emplacement_source_id') == $orphan->id ? 'selected' : '' }}>{{ $orphan->label }}</option>
                                @endforeach
                            @endif
                        @endforeach
                    </select>
                    @error('emplacement_source_id')<div class="form-error">{{ $message }}</div>@enderror
                </div>

                <div class="form-group">
                    <label class="form-label">Emplacement destination <span style="color:var(--danger)">*</span></label>
                    <select name="emplacement_destination_id" class="form-control" required>
                        <option value="">— Choisir la destination —</option>
                        @foreach($rootEmps as $root)
                            <option value="{{ $root->id }}" {{ old('emplacement_destination_id') == $root->id ? 'selected' : '' }} style="font-weight:600;">
                                {{ $root->label }}
                            </option>
                            @foreach($childEmps->get($root->id, collect()) as $child)
                                <option value="{{ $child->id }}" {{ old('emplacement_destination_id') == $child->id ? 'selected' : '' }}>
                                    &nbsp;&nbsp;└ {{ $child->label }}
                                </option>
                            @endforeach
                        @endforeach
                    </select>
                    @error('emplacement_destination_id')<div class="form-error">{{ $message }}</div>@enderror
                </div>

            </div>

            <div class="form-group" style="margin-top:8px;margin-bottom:0;">
                <label class="form-label">Notes</label>
                <textarea name="notes" class="form-control" rows="2" placeholder="Motif du transfert...">{{ old('notes') }}</textarea>
            </div>
        </div>
    </div>

    {{-- LIGNES PRODUITS --}}
    <div class="card">
        <div class="card-header">
            <span class="card-title"><i class="fas fa-boxes" style="color:var(--primary);margin-right:6px;"></i>Produits à transférer</span>
            <div style="display:flex;align-items:center;gap:10px;">
                <template x-if="sourceId">
                    <span style="font-size:12px;color:var(--text-muted);">
                        <i class="fas fa-info-circle"></i>
                        Affiche uniquement les produits présents dans l'emplacement source
                    </span>
                </template>
                <button type="button" class="btn btn-sm btn-primary" @click="addLigne()">
                    <i class="fas fa-plus"></i> Ajouter produit
                </button>
            </div>
        </div>
        <div class="table-wrap" style="overflow:visible;">
            <table class="table">
                <thead>
                    <tr>
                        <th style="width:40px;">#</th>
                        <th>Produit <span style="color:var(--danger)">*</span></th>
                        <th style="width:150px;">Quantité <span style="color:var(--danger)">*</span></th>
                        <th style="width:80px;">Unité</th>
                        <th style="width:140px;">Stock (source)</th>
                        <th style="width:50px;"></th>
                    </tr>
                </thead>
                <tbody>
                    <template x-for="(ligne, i) in lignes" :key="i">
                        <tr>
                            <td x-text="i + 1" style="color:var(--text-muted);font-size:12px;"></td>
                            <td>
                                <div style="position:relative;">
                                    <input type="text"
                                           x-model="ligne.search"
                                           @input="onSearchInput(i)"
                                           @focus="if (ligne.search.length >= 1) ligne.showDropdown = true"
                                           @blur="setTimeout(() => { ligne.showDropdown = false }, 150)"
                                           @keydown.escape="ligne.showDropdown = false"
                                           @keydown.enter.prevent=""
                                           class="form-control"
                                           placeholder="Code ou désignation..."
                                           autocomplete="off">
                                    <input type="hidden" :name="'lignes[' + i + '][produit_id]'" :value="ligne.produit_id">

                                    {{-- Dropdown suggestions --}}
                                    <div x-show="ligne.showDropdown && ligne.search.length >= 1"
                                         style="position:absolute;top:calc(100% + 2px);left:0;right:0;z-index:1000;
                                                background:white;border:1px solid var(--border);border-radius:6px;
                                                box-shadow:0 6px 16px rgba(0,0,0,.12);max-height:220px;overflow-y:auto;">

                                        <template x-for="p in ligne.filteredProduits" :key="p.id">
                                            <div @mousedown.prevent="selectProduit(i, p)"
                                                 style="padding:8px 12px;cursor:pointer;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border);font-size:13px;"
                                                 @mouseover="$el.style.background='var(--primary-light)'"
                                                 @mouseout="$el.style.background=''">
                                                <code style="font-size:11px;color:var(--primary);min-width:80px;flex-shrink:0;" x-text="p.code || '—'"></code>
                                                <span x-text="p.nom" style="flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"></span>
                                                <span x-text="stockLabel(p)" style="font-size:11px;flex-shrink:0;"
                                                      :style="p.stock <= 0 ? 'color:#ef4444;font-weight:600;' : 'color:#10b981;font-weight:600;'"></span>
                                            </div>
                                        </template>

                                        <div x-show="ligne.filteredProduits.length === 0"
                                             style="padding:10px 12px;color:var(--text-muted);font-size:13px;text-align:center;">
                                            <i class="fas fa-search" style="margin-right:5px;"></i>
                                            <span x-text="sourceId ? 'Aucun produit dans cet emplacement' : 'Aucun produit trouvé'"></span>
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <input type="number" :name="'lignes[' + i + '][qte]'" x-model.number="ligne.qte"
                                       class="form-control" min="0.001" step="0.001" required
                                       style="text-align:right;">
                            </td>
                            <td style="color:var(--text-muted);font-size:13px;" x-text="getProduit(ligne.produit_id)?.unite || '—'"></td>
                            <td>
                                <template x-if="getProduit(ligne.produit_id)">
                                    <span :class="getStockInSource(ligne.produit_id) <= 0 ? 'badge-pill badge-danger' : 'badge-pill badge-success'"
                                          x-text="getStockInSource(ligne.produit_id).toFixed(3).replace('.',',')"></span>
                                </template>
                            </td>
                            <td>
                                <button type="button" @click="removeLigne(i)"
                                        class="btn btn-sm" style="color:var(--danger);padding:4px 8px;"
                                        x-show="lignes.length > 1"
                                        title="Supprimer cette ligne">
                                    <i class="fas fa-times"></i>
                                </button>
                            </td>
                        </tr>
                    </template>
                </tbody>
            </table>
        </div>

        <div style="padding:16px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--border);">
            <div style="font-size:13px;color:var(--text-muted);">
                <span x-text="lignes.length"></span> produit(s) dans ce bon de transfert
            </div>
            <div style="display:flex;gap:10px;">
                <a href="{{ route('stock.transferts') }}" class="btn btn-secondary">Annuler</a>
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-save"></i> Enregistrer le bon de transfert
                </button>
            </div>
        </div>
    </div>

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

@push('scripts')
<script>
function transfertFormData() {
    return {
        produits: window.__tProduits || [],
        sourceId: '{{ old('emplacement_source_id', '') }}',
        lignes: [{ produit_id: '', qte: 1, search: '', showDropdown: false, filteredProduits: [] }],

        addLigne() {
            this.lignes.push({ produit_id: '', qte: 1, search: '', showDropdown: false, filteredProduits: [] });
        },
        removeLigne(i) {
            if (this.lignes.length > 1) this.lignes.splice(i, 1);
        },
        getProduit(id) {
            if (!id) return null;
            return this.produits.find(p => p.id == id) || null;
        },
        getStockInSource(produitId) {
            const p = this.getProduit(produitId);
            if (!p) return 0;
            if (!this.sourceId) return p.stock;
            return p.emp_stocks[this.sourceId] ?? 0;
        },
        stockLabel(p) {
            const s = this.sourceId ? (p.emp_stocks[this.sourceId] ?? 0) : p.stock;
            return s.toFixed(3).replace('.', ',') + (p.unite ? ' ' + p.unite : '');
        },
        computeFilter(search) {
            if (!search || search.length < 1) return [];
            const q = search.toLowerCase();
            let list = this.produits;
            if (this.sourceId) {
                list = list.filter(p => this.sourceId in p.emp_stocks);
            }
            return list.filter(p =>
                p.nom.toLowerCase().includes(q) ||
                (p.code && p.code.toLowerCase().includes(q))
            ).slice(0, 12);
        },
        onSearchInput(i) {
            this.lignes[i].produit_id      = '';
            this.lignes[i].filteredProduits = this.computeFilter(this.lignes[i].search);
            this.lignes[i].showDropdown    = this.lignes[i].search.length >= 1;
        },
        selectProduit(i, p) {
            this.lignes[i].produit_id      = p.id;
            this.lignes[i].search          = (p.code ? p.code + ' — ' : '') + p.nom;
            this.lignes[i].showDropdown    = false;
            this.lignes[i].filteredProduits = [];
        },
        onSourceChange() {
            this.lignes = this.lignes.map(() => ({
                produit_id: '', qte: 1, search: '', showDropdown: false, filteredProduits: [],
            }));
        },
    };
}
</script>
@endpush