@extends('layouts.app')
@section('title', 'Agregar unidades — Sistema TIC')

@section('content')

<div class="page-header">
    <div class="d-flex align-items-center gap-3">
        <a href="{{ route('items.show', $item) }}" class="btn-secondary-custom">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>
            Volver
        </a>
        <h1 class="page-title">Agregar unidades</h1>
    </div>
</div>

{{-- Info del item --}}
<div class="card mb-3">
    <div class="row g-3">
        <div class="col-6 col-md-3">
            <div style="font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:3px;">Código</div>
            <div style="font-weight:600;">{{ $item->code }}</div>
        </div>
        <div class="col-6 col-md-3">
            <div style="font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:3px;">Nombre</div>
            <div style="font-weight:600;">{{ $item->name }}</div>
        </div>
        <div class="col-6 col-md-3">
            <div style="font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:3px;">Tipo</div>
            <div>{{ $item->itemType->name }}</div>
        </div>
        <div class="col-6 col-md-3">
            <div style="font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:3px;">Stock actual</div>
            <div style="font-weight:600;">{{ $item->quantity }} {{ $item->unit_measurement }}</div>
        </div>
    </div>
</div>

<form method="POST" action="{{ route('items.units.store', $item) }}" id="mainForm">
    @csrf

    {{-- Cantidad --}}
    <div class="card mb-3">
        <p class="section-title">¿Cuántas unidades agregar?</p>
        <div style="max-width:200px;">
            <label class="form-label-custom">Cantidad</label>
            <input type="number" id="unitCount" name="_unit_count"
                class="form-control-custom"
                min="1" max="50" value="1"
                oninput="renderUnits()">
        </div>
    </div>

    {{-- Contenedor dinámico --}}
    <div id="unitsContainer"></div>

    {{-- Acciones --}}
    <div class="d-flex gap-2 mt-3">
        <button type="submit" class="btn-primary-custom">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg>
            Guardar unidades
        </button>
        <a href="{{ route('items.show', $item) }}" class="btn-secondary-custom">Cancelar</a>
    </div>
</form>

@endsection

@push('scripts')
<script>
// Statuses pasados desde el controller para el select
const statuses = @json($statuses->map(fn($s) => ['id' => $s->id, 'name' => $s->name]));

const category = '{{ $item->itemType->category }}';

function renderUnits() {
    const count     = Math.min(parseInt(document.getElementById('unitCount').value) || 1, 50);
    const container = document.getElementById('unitsContainer');
    container.innerHTML = '';

    for (let i = 0; i < count; i++) {
        container.appendChild(buildUnitCard(i));
    }
}

function buildUnitCard(i) {
    const card = document.createElement('div');
    card.className = 'card mb-3';
    card.style.borderLeft = '3px solid var(--primary)';

    const title = `<div style="font-weight:700;font-size:14px;margin-bottom:1.25rem;color:var(--primary);">Unidad #${i + 1}</div>`;

    const statusOptions = statuses.map(s =>
        `<option value="${s.id}">${s.name}</option>`
    ).join('');

    let fields = '';

    if (category === 'electronic') {
        fields = `
        <div class="row g-3">
            <div class="col-12 col-md-6">
                <label class="form-label-custom">Número de serie *</label>
                <input type="text" name="units[${i}][serial_number]" class="form-control-custom" required placeholder="Ej: SN-0001234">
            </div>
            <div class="col-12 col-md-6">
                <label class="form-label-custom">N° inventario</label>
                <input type="text" name="units[${i}][inventory_number]" class="form-control-custom" placeholder="Ej: INV-001">
            </div>
            <div class="col-12 col-md-6">
                <label class="form-label-custom">Modelo</label>
                <input type="text" name="units[${i}][model]" class="form-control-custom" placeholder="Ej: ThinkPad E14">
            </div>
            <div class="col-12 col-md-6">
                <label class="form-label-custom">Marca</label>
                <input type="text" name="units[${i}][brand]" class="form-control-custom" placeholder="Ej: Lenovo">
            </div>
            <div class="col-12 col-md-6">
                <label class="form-label-custom">Ubicación</label>
                <input type="text" name="units[${i}][location]" class="form-control-custom" placeholder="Ej: Oficina A, Estante 2">
            </div>
            <div class="col-12 col-md-6">
                <label class="form-label-custom">Estado *</label>
                <select name="units[${i}][item_status_id]" class="form-control-custom" required>${statusOptions}</select>
            </div>
            <div class="col-12 col-md-4">
                <label class="form-label-custom">Fecha adquisición</label>
                <input type="date" name="units[${i}][acquisition_date]" class="form-control-custom">
            </div>
            <div class="col-12 col-md-4">
                <label class="form-label-custom">Garantía (meses)</label>
                <input type="number" name="units[${i}][warranty_months]" class="form-control-custom" min="0" placeholder="Ej: 12">
            </div>
            <div class="col-12 col-md-4">
                <label class="form-label-custom">Vida útil (meses)</label>
                <input type="number" name="units[${i}][useful_life_months]" class="form-control-custom" min="0" placeholder="Ej: 60">
            </div>
        </div>`;

    } else if (category === 'measurable') {
        fields = `
        <div class="row g-3">
            <div class="col-12 col-md-6">
                <label class="form-label-custom">Cantidad del lote *</label>
                <input type="number" step="0.01" name="units[${i}][lot_quantity]" class="form-control-custom" required placeholder="Ej: 2.500">
            </div>
            <div class="col-12 col-md-6">
                <label class="form-label-custom">Número de lote</label>
                <input type="text" name="units[${i}][lot_number]" class="form-control-custom" placeholder="Ej: LOTE-2024-01">
            </div>
            <div class="col-12 col-md-6">
                <label class="form-label-custom">Ubicación</label>
                <input type="text" name="units[${i}][location]" class="form-control-custom" placeholder="Ej: Bodega central">
            </div>
            <div class="col-12 col-md-6">
                <label class="form-label-custom">Estado *</label>
                <select name="units[${i}][item_status_id]" class="form-control-custom" required>${statusOptions}</select>
            </div>
            <div class="col-12 col-md-6">
                <label class="form-label-custom">Fecha adquisición</label>
                <input type="date" name="units[${i}][acquisition_date]" class="form-control-custom">
            </div>
        </div>`;

    } else {
        // material
        fields = `
        <div class="row g-3">
            <div class="col-12 col-md-6">
                <label class="form-label-custom">N° inventario</label>
                <input type="text" name="units[${i}][inventory_number]" class="form-control-custom" placeholder="Ej: INV-001">
            </div>
            <div class="col-12 col-md-6">
                <label class="form-label-custom">Ubicación</label>
                <input type="text" name="units[${i}][location]" class="form-control-custom" placeholder="Ej: Armario 3">
            </div>
            <div class="col-12 col-md-6">
                <label class="form-label-custom">Estado *</label>
                <select name="units[${i}][item_status_id]" class="form-control-custom" required>${statusOptions}</select>
            </div>
        </div>`;
    }

    card.innerHTML = title + fields;
    return card;
}

// Render inicial
renderUnits();
</script>
@endpush