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

@section('content')

<div class="page-header">
    <h1 class="page-title">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
            <polyline points="3.27 6.96 12 12.01 20.73 6.96"/>
            <line x1="12" y1="22.08" x2="12" y2="12"/>
        </svg>
        Inventario
    </h1>
    <div class="d-flex gap-2 flex-wrap">
        <a href="{{ route('export.items') }}" class="btn-secondary-custom">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
            Exportar
        </a>
        @can('manage-items')
        <a href="{{ route('items.create') }}" class="btn-primary-custom">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
            Nuevo item
        </a>
        @endcan
    </div>
</div>

{{-- Filtros --}}
<div class="card mb-3">
    <form method="GET" action="{{ route('items.index') }}">
        <div class="row g-2 align-items-end">
            <div class="col-12 col-md-4">
                <label class="form-label-custom">Buscar</label>
                <input type="text" name="search" value="{{ request('search') }}"
                    class="form-control-custom"
                    placeholder="Código, nombre o N° serie...">
            </div>
            <div class="col-6 col-md-3">
                <label class="form-label-custom">Tipo</label>
                <select name="type" class="form-control-custom">
                    <option value="">Todos los tipos</option>
                    @foreach($types as $type)
                        <option value="{{ $type->id }}" {{ request('type') == $type->id ? 'selected' : '' }}>
                            {{ $type->name }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-6 col-md-2">
                <label class="form-label-custom">Stock</label>
                <select name="low_stock" class="form-control-custom">
                    <option value="">Todos</option>
                    <option value="1" {{ request('low_stock') ? 'selected' : '' }}>Bajo stock</option>
                </select>
            </div>
            <div class="col-12 col-md-3 d-flex gap-2">
                <button type="submit" class="btn-primary-custom flex-fill justify-content-center">Filtrar</button>
                <a href="{{ route('items.index') }}" class="btn-secondary-custom">Limpiar</a>
            </div>
        </div>
    </form>
</div>

{{-- Tabla --}}
<div class="card" style="padding:0;overflow:hidden;">
    <div style="overflow-x:auto;">
        <table class="table-custom">
            <thead>
                <tr>
                    <th>Código</th>
                    <th>Nombre</th>
                    <th>Tipo</th>
                    <th>Cantidad</th>
                    <th>Stock mín.</th>
                    <th>Ubicación</th>
                    <th>Estado</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @forelse($items as $item)
                <tr>
                    <td>
                        <span style="font-family:monospace;font-size:12px;background:rgba(253,185,19,.1);color:var(--primary);padding:2px 7px;border-radius:4px;">
                            {{ $item->code }}
                        </span>
                    </td>
                    <td>
                        <a href="{{ route('items.show', $item) }}" style="color:var(--text);text-decoration:none;font-weight:500;">
                            {{ $item->name }}
                        </a>
                        @if($item->description)
                            <div style="font-size:11px;color:var(--text-muted);">{{ Str::limit($item->description, 50) }}</div>
                        @endif
                    </td>
                    <td>
                        <span class="badge-custom badge-neutral">{{ $item->itemType->name }}</span>
                    </td>
                    <td>
                        @if($item->is_low_stock)
                            <span style="color:var(--danger);font-weight:700;">{{ $item->quantity }}</span>
                        @else
                            <span style="font-weight:600;">{{ $item->quantity }}</span>
                        @endif
                        @if($item->unit_measurement)
                            <span style="font-size:11px;color:var(--text-muted);"> {{ $item->unit_measurement }}</span>
                        @endif
                    </td>
                    <td style="color:var(--text-muted);">{{ $item->minimum_stock }}</td>
                    <td style="color:var(--text-muted);font-size:12px;">{{ $item->location ?? '—' }}</td>
                    <td>
                        <span class="badge-custom {{ $item->itemStatus->name === 'Bueno' ? 'badge-success' : 'badge-neutral' }}">
                            {{ $item->itemStatus->name }}
                        </span>
                    </td>
                    <td>
                        <div class="d-flex gap-1">
                            <a href="{{ route('items.show', $item) }}" class="btn-icon" title="Ver">
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                            </a>
                            @can('manage-items')
                            <a href="{{ route('items.edit', $item) }}" class="btn-icon" title="Editar">
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
                            </a>
                            <form method="POST" action="{{ route('items.destroy', $item) }}"
                                onsubmit="return confirm('¿Desactivar el item {{ addslashes($item->name) }}?')">
                                @csrf @method('DELETE')
                                <button type="submit" class="btn-icon danger" title="Desactivar">
                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14H6L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/></svg>
                                </button>
                            </form>
                            @endcan
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="8" style="text-align:center;padding:3rem;color:var(--text-muted);">
                        No se encontraron items.
                        @can('manage-items')
                            <a href="{{ route('items.create') }}" style="color:var(--primary);">Crear el primero</a>
                        @endcan
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    @if($items->hasPages())
    <div style="padding:.875rem 1.25rem;border-top:1px solid var(--border);">
        {{ $items->links('pagination') }}
    </div>
    @endif
</div>

@endsection