@extends('layouts.app')

@section('title', 'Inventario — TI Manager')

@section('content')
<div x-data="{ viewMode: localStorage.getItem('viewMode_inventory') || 'list' }" class="animate-fadeIn">
    {{-- Encabezado --}}
    <div class="page-header">
        <div class="page-header-top">
            <h1 class="page-title">
                <i class="ph ph-package" style="color: var(--primary);"></i>
                Inventario
                <span class="count">({{ $items->total() }} equipos)</span>
            </h1>
            <div class="d-flex gap-sm" style="align-items: center;">
                <div class="view-toggle-group">
                    <button @click="viewMode = 'list'; localStorage.setItem('viewMode_inventory', 'list')"
                            :class="{'active': viewMode === 'list'}"
                            class="view-toggle-btn"
                            title="Vista de Lista">
                        <i class="ph ph-list"></i>
                    </button>
                    <button @click="viewMode = 'card'; localStorage.setItem('viewMode_inventory', 'card')"
                            :class="{'active': viewMode === 'card'}"
                            class="view-toggle-btn"
                            title="Vista de Tarjetas">
                        <i class="ph ph-grid-four"></i>
                    </button>
                </div>
                <form id="form-inventory-bulk" method="POST" action="{{ route('reports.inventory.bulk-pdf', request()->query()) }}" target="_blank" style="display: none;">
                    @csrf
                </form>
                @if(Auth::user()->isAdmin() || Auth::user()->isTechnician())
                    <button type="button" class="btn btn-outline btn-sm" onclick="openSignatureModal()">
                        <i class="ph ph-file-pdf"></i>
                        <span class="desktop-only">Exportar PDFs</span>
                    </button>
                @endif
                <a href="{{ route('reports.inventory.export', request()->query()) }}" class="btn btn-outline btn-sm">
                    <i class="ph ph-download-simple"></i>
                    <span class="desktop-only">Exportar CSV</span>
                </a>
                <a href="{{ route('inventory.create') }}" class="btn btn-primary btn-sm">
                    <i class="ph ph-plus"></i>
                    <span class="desktop-only">Nuevo Equipo</span>
                </a>
            </div>
        </div>

    {{-- Estadísticas --}}
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--space-md); margin-bottom: var(--space-xl);">
        <div class="card" style="padding: var(--space-md); border-left: 4px solid var(--primary);">
            <div class="text-muted" style="font-size: 0.9rem; margin-bottom: var(--space-xs);">Total de Equipos</div>
            <div class="h2" style="margin: 0; color: var(--text-primary);">{{ $totalItems ?? 0 }}</div>
        </div>
        <div class="card" style="padding: var(--space-md); border-left: 4px solid var(--success);">
            <div class="text-muted" style="font-size: 0.9rem; margin-bottom: var(--space-xs);">Equipos Activos</div>
            <div class="h2" style="margin: 0; color: var(--text-primary);">{{ $activeItems ?? 0 }}</div>
        </div>
        <div class="card" style="padding: var(--space-md); border-left: 4px solid var(--warning);">
            <div class="text-muted" style="font-size: 0.9rem; margin-bottom: var(--space-xs);">En Mantenimiento</div>
            <div class="h2" style="margin: 0; color: var(--text-primary);">{{ $maintenanceItems ?? 0 }}</div>
        </div>
        <div class="card" style="padding: var(--space-md); border-left: 4px solid var(--danger);">
            <div class="text-muted" style="font-size: 0.9rem; margin-bottom: var(--space-xs);">Equipos Dañados</div>
            <div class="h2" style="margin: 0; color: var(--text-primary);">{{ $damagedItems ?? 0 }}</div>
        </div>
    </div>

        {{-- Filtros --}}
        <form method="GET" action="{{ route('inventory.index') }}">
            <div class="card" style="padding: var(--space-md);">
                <div style="display: flex; flex-direction: column; gap: var(--space-sm);">
                    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-sm);">
                        <div class="form-group" style="margin-bottom: 0;">
                            <select name="company_id" id="filter-company" class="form-control" style="min-height: 42px;">
                                <option value="">Todas las empresas</option>
                                @foreach($companies as $comp)
                                    <option value="{{ $comp->id }}" {{ request('company_id') == $comp->id ? 'selected' : '' }}>{{ $comp->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group" style="margin-bottom: 0;">
                            <select name="branch_id" id="filter-branch" class="form-control" style="min-height: 42px;">
                                <option value="">Todas las sedes</option>
                                @if(isset($branches))
                                    @foreach($branches as $br)
                                        <option value="{{ $br->id }}" {{ request('branch_id') == $br->id ? 'selected' : '' }}>
                                            {{ $br->name }}{{ $br->is_main ? ' (Principal)' : '' }}
                                        </option>
                                    @endforeach
                                @endif
                            </select>
                        </div>
                        <div class="form-group" style="margin-bottom: 0;">
                            <select name="category_id" class="form-control" style="min-height: 42px;">
                                <option value="">Todas las categorías</option>
                                @foreach($categories as $cat)
                                    <option value="{{ $cat->id }}" {{ request('category_id') == $cat->id ? 'selected' : '' }}>{{ $cat->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group" style="margin-bottom: 0;">
                            <select name="status" class="form-control" style="min-height: 42px;">
                                <option value="">Todos los estados</option>
                                <option value="activo" {{ request('status') == 'activo' ? 'selected' : '' }}>Activo</option>
                                <option value="mantenimiento" {{ request('status') == 'mantenimiento' ? 'selected' : '' }}>En Mantenimiento</option>
                                <option value="dañado" {{ request('status') == 'dañado' ? 'selected' : '' }}>Dañado</option>
                                <option value="retirado" {{ request('status') == 'retirado' ? 'selected' : '' }}>Retirado</option>
                            </select>
                        </div>
                    </div>
                    <div class="d-flex gap-sm">
                        <div class="form-control-icon" style="flex: 1;">
                            <i class="ph ph-magnifying-glass"></i>
                            <input type="text" name="search" class="form-control" style="min-height: 42px;"
                                   placeholder="Buscar por nombre, serial, marca..." value="{{ request('search') }}">
                        </div>
                        <button type="submit" class="btn btn-outline btn-icon" style="min-height: 42px;">
                            <i class="ph ph-funnel"></i>
                        </button>
                        @if(request()->anyFilled(['company_id', 'branch_id', 'category_id', 'status', 'search']))
                            <a href="{{ route('inventory.index') }}" class="btn btn-ghost btn-icon" title="Limpiar filtros" style="min-height: 42px;">
                                <i class="ph ph-x"></i>
                            </a>
                        @endif
                    </div>
                </div>
            </div>
        </form>
    </div>



    @if($items->count() > 0)

        {{-- VISTA MÓVIL: Cards --}}
        <div class="card-grid-container" x-show="viewMode === 'card'" x-cloak>
            @foreach($items as $item)
                <div class="mobile-card">
                    <div class="mobile-card-header">
                        <div class="d-flex align-center gap-sm">
                            @if($item->category)
                                <div class="avatar-sm avatar" style="font-size: 1rem;">
                                    <i class="ph {{ $item->category->icon ?? 'ph-package' }}"></i>
                                </div>
                            @endif
                            <div class="list-item-title">{{ $item->name }}</div>
                        </div>
                        <span class="badge badge-{{ $item->status_color }}">{{ $item->status_label }}</span>
                    </div>

                    <div class="mobile-card-body">
                        @if($item->brand || $item->model)
                            <div class="mobile-card-row" style="flex-direction: row; justify-content: space-between; align-items: center;">
                                <span class="mobile-card-label">Marca / Modelo</span>
                                <span class="mobile-card-value">{{ $item->brand }} {{ $item->model }}</span>
                            </div>
                        @endif
                        @if($item->serial_number)
                            <div class="mobile-card-row" style="flex-direction: row; justify-content: space-between; align-items: center;">
                                <span class="mobile-card-label">Serial</span>
                                <span class="mobile-card-value" style="font-family: monospace; font-size: 0.82rem;">{{ $item->serial_number }}</span>
                            </div>
                        @endif
                        @if($item->branch)
                            <div class="mobile-card-row" style="flex-direction: row; justify-content: space-between; align-items: center;">
                                <span class="mobile-card-label">Ubicación</span>
                                <span class="mobile-card-value">{{ $item->branch->company->name }} › {{ $item->branch->name }}</span>
                            </div>
                        @endif
                        @if($item->assigned_to)
                            <div class="mobile-card-row" style="flex-direction: row; justify-content: space-between; align-items: center;">
                                <span class="mobile-card-label">Asignado a</span>
                                <span class="mobile-card-value">
                                    <i class="ph ph-user" style="font-size: 0.8rem;"></i> {{ $item->assigned_to }}
                                </span>
                            </div>
                        @endif
                    </div>

                    <div class="mobile-card-actions">
                        <a href="{{ route('inventory.show', $item) }}" class="btn btn-outline btn-sm">
                            <i class="ph ph-eye"></i> Ver
                        </a>
                        @if(Auth::user()->isAdmin())
                            <a href="{{ route('inventory.edit', $item) }}" class="btn btn-outline btn-sm">
                                <i class="ph ph-pencil"></i> Editar
                            </a>
                            <form method="POST" action="{{ route('inventory.destroy', $item) }}"
                                  onsubmit="confirmDelete(event, '¿Estás seguro de eliminar este equipo?')">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-danger btn-sm">
                                    <i class="ph ph-trash"></i>
                                </button>
                            </form>
                        @endif
                    </div>
                </div>
            @endforeach
        </div>

        {{-- VISTA DESKTOP: Tabla --}}
        <div x-show="viewMode === 'list'" class="card" x-cloak>
            <div class="table-responsive">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Equipo</th>
                            <th>Serial</th>
                            <th>Empresa › Sede</th>
                            <th>Categoría</th>
                            <th>Estado</th>
                            <th>Asignado a</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($items as $item)
                            <tr>
                                <td>
                                    <div style="font-weight: 600; color: var(--text-primary);">{{ $item->name }}</div>
                                    @if($item->brand || $item->model)
                                        <div style="font-size: 0.78rem; color: var(--text-muted);">{{ $item->brand }} {{ $item->model }}</div>
                                    @endif
                                </td>
                                <td>
                                    @if($item->serial_number)
                                        <span style="font-family: monospace; font-size: 0.82rem;">{{ $item->serial_number }}</span>
                                    @else
                                        <span class="text-muted">—</span>
                                    @endif
                                </td>
                                <td>
                                    @if($item->branch)
                                        <div style="font-size: 0.85rem;">{{ $item->branch->company->name }}</div>
                                        <div style="font-size: 0.78rem; color: var(--text-muted);">{{ $item->branch->name }}</div>
                                    @else
                                        <span class="text-muted">—</span>
                                    @endif
                                </td>
                                <td>
                                    @if($item->category)
                                        <span class="d-flex align-center gap-xs">
                                            <i class="ph {{ $item->category->icon ?? 'ph-package' }}" style="color: var(--secondary);"></i>
                                            {{ $item->category->name }}
                                        </span>
                                    @else
                                        <span class="text-muted">—</span>
                                    @endif
                                </td>
                                <td>
                                    <span class="badge badge-{{ $item->status_color }}">{{ $item->status_label }}</span>
                                </td>
                                <td>{{ $item->assigned_to ?? '—' }}</td>
                                <td>
                                    <div class="table-actions">
                                        <a href="{{ route('inventory.show', $item) }}" class="btn btn-ghost btn-icon" title="Ver">
                                            <i class="ph ph-eye"></i>
                                        </a>
                                        @if(Auth::user()->isAdmin())
                                            <a href="{{ route('inventory.edit', $item) }}" class="btn btn-ghost btn-icon" title="Editar">
                                                <i class="ph ph-pencil"></i>
                                            </a>
                                            <form method="POST" action="{{ route('inventory.destroy', $item) }}"
                                                  onsubmit="confirmDelete(event, '¿Estás seguro de eliminar este equipo?')"
                                                  style="display: inline;">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-ghost btn-icon" title="Eliminar" style="color: var(--danger);">
                                                    <i class="ph ph-trash"></i>
                                                </button>
                                            </form>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

        {{-- Paginación --}}
        <div class="pagination-wrapper">
            {{ $items->withQueryString()->links() }}
        </div>

    @else
        {{-- Estado vacío --}}
        <div class="empty-state">
            <i class="ph ph-package"></i>
            <h3>No se encontraron equipos</h3>
            <p>
                @if(request()->anyFilled(['company_id', 'branch_id', 'category_id', 'status', 'search']))
                    No hay equipos que coincidan con los filtros aplicados.
                @else
                    Comienza agregando el primer equipo al inventario.
                @endif
            </p>
            <div class="d-flex gap-sm">
                @if(request()->anyFilled(['company_id', 'branch_id', 'category_id', 'status', 'search']))
                    <a href="{{ route('inventory.index') }}" class="btn btn-outline">
                        <i class="ph ph-x"></i> Limpiar filtros
                    </a>
                @endif
                <a href="{{ route('inventory.create') }}" class="btn btn-primary">
                    <i class="ph ph-plus"></i> Nuevo Equipo
                </a>
            </div>
        </div>
    @endif
</div>
<x-signature-modal formId="form-inventory-bulk" />
@endsection

@push('scripts')
<script>
    // Select encadenado: cuando cambie empresa, cargar sedes
    document.getElementById('filter-company')?.addEventListener('change', function() {
        const branchSelect = document.getElementById('filter-branch');
        branchSelect.innerHTML = '<option value="">Todas las sedes</option>';
        if (this.value) {
            fetch('/api/branches?company_id=' + this.value)
                .then(r => r.json())
                .then(branches => {
                    branches.forEach(b => {
                        const opt = document.createElement('option');
                        opt.value = b.id;
                        opt.textContent = b.name + (b.is_main ? ' (Principal)' : '');
                        branchSelect.appendChild(opt);
                    });
                });
        }
    });
</script>
@endpush