@extends('layouts.app')

@section('title', 'Resultados de búsqueda — TI Manager')

@section('content')
<div x-data="{ viewMode: localStorage.getItem('viewMode_search') || 'list' }" class="animate-fadeIn">
    <div class="page-header">
        <div class="page-header-top">
            <h1 class="page-title">
                <i class="ph ph-magnifying-glass" style="color: var(--primary);"></i>
                Resultados para "{{ $query }}"
                <span class="count">({{ $companies->count() + $inventory->count() + $users->count() + $customers->count() + $products->count() + $quotes->count() + $tickets->count() + $invoices->count() }} resultados)</span>
            </h1>
            <div class="d-flex gap-sm" style="align-items: center;">
                <div class="view-toggle-group">
                    <button @click="viewMode = 'list'; localStorage.setItem('viewMode_search', '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_search', 'card')"
                            :class="{'active': viewMode === 'card'}"
                            class="view-toggle-btn"
                            title="Vista de Tarjetas">
                        <i class="ph ph-grid-four"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>

    @if($companies->isEmpty() && $inventory->isEmpty() && $users->isEmpty() && $customers->isEmpty() && $products->isEmpty() && $quotes->isEmpty() && $tickets->isEmpty() && $invoices->isEmpty())
        <div class="card">
            <div class="empty-state">
                <i class="ph ph-magnifying-glass"></i>
                <h3>Sin resultados</h3>
                <p>No se encontró ningún resultado con el término "<strong>{{ $query }}</strong>".</p>
                <a href="{{ url()->previous() }}" class="btn btn-outline mt-md">Volver</a>
            </div>
        </div>
    @endif

    {{-- Empresas --}}
    @if($companies->isNotEmpty())
        <h2 style="font-size: 1.1rem; margin: var(--space-xl) 0 var(--space-md) 0; color: var(--text-primary);">
            <i class="ph ph-buildings" style="vertical-align: middle; margin-right: 4px;"></i> Empresas ({{ $companies->count() }})
        </h2>
        
        {{-- VISTA LISTA: Tabla --}}
        <div x-show="viewMode === 'list'" class="card table-responsive" x-cloak>
            <table class="table">
                <thead>
                    <tr>
                        <th>Nombre</th>
                        <th>NIT</th>
                        <th>Ciudad</th>
                        <th>Acción</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($companies as $company)
                        <tr>
                            <td>
                                <div class="d-flex align-center gap-sm">
                                    @if($company->logo)
                                        <img src="{{ Storage::url($company->logo) }}" alt="Logo" style="width: 24px; height: 24px; border-radius: 4px; object-fit: cover;">
                                    @else
                                        <div style="width: 24px; height: 24px; border-radius: 4px; background: var(--surface-hover); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: bold; color: var(--text-muted);">
                                            {{ substr($company->name, 0, 2) }}
                                        </div>
                                    @endif
                                    <span style="font-weight: 500;">{{ $company->name }}</span>
                                </div>
                            </td>
                            <td>{{ $company->nit ?? '—' }}</td>
                            <td>{{ $company->city ?? '—' }}</td>
                            <td>
                                <a href="{{ route('companies.show', $company) }}" class="btn btn-sm btn-outline">Ver Detalle</a>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        {{-- VISTA TARJETAS: Grid responsivo --}}
        <div class="card-grid-container" x-show="viewMode === 'card'" x-cloak>
            @foreach($companies as $company)
                <div class="mobile-card">
                    <div class="mobile-card-header">
                        <div class="d-flex align-center gap-md">
                            <div class="avatar">
                                @if($company->logo)
                                    <img src="{{ Storage::url($company->logo) }}" alt="{{ $company->name }}">
                                @else
                                    {{ strtoupper(substr($company->name, 0, 2)) }}
                                @endif
                            </div>
                            <div>
                                <div class="list-item-title">{{ $company->name }}</div>
                                <div class="list-item-subtitle">{{ $company->city ?? 'Sin ciudad' }}</div>
                            </div>
                        </div>
                        <span class="badge {{ $company->is_active ? 'badge-success' : 'badge-danger' }}">
                            {{ $company->is_active ? 'Activa' : 'Inactiva' }}
                        </span>
                    </div>
                    <div class="mobile-card-body">
                        @if($company->nit)
                            <div class="mobile-card-row">
                                <span class="mobile-card-label">NIT</span>
                                <span class="mobile-card-value">{{ $company->nit }}{{ $company->dv ? '-'.$company->dv : '' }}</span>
                            </div>
                        @endif
                        @if($company->phone)
                            <div class="mobile-card-row">
                                <span class="mobile-card-label">Teléfono</span>
                                <span class="mobile-card-value">{{ $company->phone }}</span>
                            </div>
                        @endif
                    </div>
                    <div class="mobile-card-actions">
                        <a href="{{ route('companies.show', $company) }}" class="btn btn-outline btn-sm">
                            <i class="ph ph-eye"></i> Ver Detalle
                        </a>
                    </div>
                </div>
            @endforeach
        </div>
    @endif

    {{-- Inventario --}}
    @if($inventory->isNotEmpty())
        <h2 style="font-size: 1.1rem; margin: var(--space-xl) 0 var(--space-md) 0; color: var(--text-primary);">
            <i class="ph ph-package" style="vertical-align: middle; margin-right: 4px;"></i> Equipos de Inventario ({{ $inventory->count() }})
        </h2>
        
        {{-- VISTA LISTA: Tabla --}}
        <div x-show="viewMode === 'list'" class="card table-responsive" x-cloak>
            <table class="table">
                <thead>
                    <tr>
                        <th>Equipo</th>
                        <th>Serial</th>
                        <th>Empresa</th>
                        <th>Estado</th>
                        <th>Acción</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($inventory as $item)
                        <tr>
                            <td>
                                <span style="font-weight: 500;">{{ $item->name }}</span>
                                <div class="text-xs text-muted">{{ $item->category->name ?? '—' }}</div>
                            </td>
                            <td style="font-family: monospace;">{{ $item->serial_number ?? '—' }}</td>
                            <td>{{ $item->branch->company->name ?? '—' }}</td>
                            <td>
                                <span class="badge badge-{{ $item->status_color }}">
                                    {{ $item->status_label }}
                                </span>
                            </td>
                            <td>
                                <a href="{{ route('inventory.show', $item) }}" class="btn btn-sm btn-outline">Ver Detalle</a>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        {{-- VISTA TARJETAS: Grid responsivo --}}
        <div class="card-grid-container" x-show="viewMode === 'card'" x-cloak>
            @foreach($inventory as $item)
                <div class="mobile-card">
                    <div class="mobile-card-header">
                        <div class="d-flex align-center gap-sm">
                            <div class="avatar-sm avatar" style="font-size: 1rem;">
                                <i class="ph {{ $item->category->icon ?? 'ph-package' }}"></i>
                            </div>
                            <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->serial_number)
                            <div class="mobile-card-row">
                                <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->brand || $item->model)
                            <div class="mobile-card-row">
                                <span class="mobile-card-label">Marca/Modelo</span>
                                <span class="mobile-card-value">{{ $item->brand }} {{ $item->model }}</span>
                            </div>
                        @endif
                        <div class="mobile-card-row">
                            <span class="mobile-card-label">Empresa</span>
                            <span class="mobile-card-value">{{ $item->branch->company->name ?? '—' }}</span>
                        </div>
                    </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 Detalle
                        </a>
                    </div>
                </div>
            @endforeach
        </div>
    @endif

    {{-- Usuarios --}}
    @if($users->isNotEmpty())
        <h2 style="font-size: 1.1rem; margin: var(--space-xl) 0 var(--space-md) 0; color: var(--text-primary);">
            <i class="ph ph-users" style="vertical-align: middle; margin-right: 4px;"></i> Usuarios ({{ $users->count() }})
        </h2>
        
        {{-- VISTA LISTA: Tabla --}}
        <div x-show="viewMode === 'list'" class="card table-responsive" x-cloak>
            <table class="table">
                <thead>
                    <tr>
                        <th>Usuario</th>
                        <th>Rol</th>
                        <th>Empresa</th>
                        <th>Acción</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($users as $user)
                        <tr>
                            <td>
                                <div class="d-flex align-center gap-md">
                                    <div class="avatar-sm avatar">
                                        @if($user->avatar)
                                            <img src="{{ Storage::url($user->avatar) }}" alt="{{ $user->name }}" style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%;">
                                        @else
                                            {{ strtoupper(substr($user->name, 0, 2)) }}
                                        @endif
                                    </div>
                                    <div>
                                        <div style="font-weight: 600;">{{ $user->name }}</div>
                                        <div class="text-sm text-muted">{{ $user->email }}</div>
                                    </div>
                                </div>
                            </td>
                            <td>
                                @if($user->isAdmin())
                                    <span class="badge badge-success">Admin</span>
                                @elseif($user->isTechnician())
                                    <span class="badge badge-info">Técnico</span>
                                @else
                                    <span class="badge badge-muted">Cliente</span>
                                @endif
                            </td>
                            <td>
                                @if($user->isAdmin())
                                    <span class="text-muted" style="font-size: 0.875rem;">Todas</span>
                                @else
                                    @if($user->companies->count() > 0)
                                        {{ $user->companies->pluck('name')->join(', ') }}
                                    @else
                                        <span class="text-muted">—</span>
                                    @endif
                                @endif
                            </td>
                            <td>
                                <a href="{{ route('users.edit', $user) }}" class="btn btn-sm btn-outline">Editar</a>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        {{-- VISTA TARJETAS: Grid responsivo --}}
        <div class="card-grid-container" x-show="viewMode === 'card'" x-cloak>
            @foreach($users as $user)
                <div class="mobile-card">
                    <div class="mobile-card-header">
                        <div class="d-flex align-center gap-md">
                            <div class="avatar">
                                @if($user->avatar)
                                    <img src="{{ Storage::url($user->avatar) }}" alt="{{ $user->name }}" style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%;">
                                @else
                                    {{ strtoupper(substr($user->name, 0, 2)) }}
                                @endif
                            </div>
                            <div>
                                <div class="list-item-title">{{ $user->name }}</div>
                                <div class="list-item-subtitle">{{ $user->email }}</div>
                            </div>
                        </div>
                        @if($user->isAdmin())
                            <span class="badge badge-success">Admin</span>
                        @elseif($user->isTechnician())
                            <span class="badge badge-info">Técnico</span>
                        @else
                            <span class="badge badge-muted">Cliente</span>
                        @endif
                    </div>
                    <div class="mobile-card-body">
                        <div class="mobile-card-row">
                            <span class="mobile-card-label">Empresa</span>
                            <span class="mobile-card-value">
                                @if($user->isAdmin())
                                    <span class="text-muted">Todas</span>
                                @else
                                    @if($user->companies->count() > 0)
                                        {{ $user->companies->pluck('name')->join(', ') }}
                                    @else
                                        <span class="text-muted">—</span>
                                    @endif
                                @endif
                            </span>
                        </div>
                    </div>
                    <div class="mobile-card-actions">
                        <a href="{{ route('users.edit', $user) }}" class="btn btn-outline btn-sm">
                            <i class="ph ph-pencil-simple"></i> Editar
                        </a>
                    </div>
                </div>
            @endforeach
        </div>
    @endif

    {{-- Clientes Particulares --}}
    @if($customers->isNotEmpty())
        <h2 style="font-size: 1.1rem; margin: var(--space-xl) 0 var(--space-md) 0; color: var(--text-primary);">
            <i class="ph ph-user" style="vertical-align: middle; margin-right: 4px;"></i> Clientes Particulares ({{ $customers->count() }})
        </h2>
        
        <div x-show="viewMode === 'list'" class="card table-responsive" x-cloak>
            <table class="table">
                <thead>
                    <tr>
                        <th>Cliente</th>
                        <th>Documento</th>
                        <th>Email</th>
                        <th>Acción</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($customers as $customer)
                        <tr>
                            <td><span style="font-weight: 500;">{{ $customer->name }}</span></td>
                            <td>{{ $customer->document }}</td>
                            <td>{{ $customer->email ?? '—' }}</td>
                            <td><a href="{{ route('customers.show', $customer) }}" class="btn btn-sm btn-outline">Ver Detalle</a></td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        <div class="card-grid-container" x-show="viewMode === 'card'" x-cloak>
            @foreach($customers as $customer)
                <div class="mobile-card">
                    <div class="mobile-card-header">
                        <div class="d-flex align-center gap-sm">
                            <div class="avatar-sm avatar"><i class="ph ph-user"></i></div>
                            <div class="list-item-title">{{ $customer->name }}</div>
                        </div>
                    </div>
                    <div class="mobile-card-body">
                        <div class="mobile-card-row"><span class="mobile-card-label">Documento</span><span class="mobile-card-value">{{ $customer->document }}</span></div>
                        @if($customer->email)<div class="mobile-card-row"><span class="mobile-card-label">Email</span><span class="mobile-card-value">{{ $customer->email }}</span></div>@endif
                    </div>
                    <div class="mobile-card-actions">
                        <a href="{{ route('customers.show', $customer) }}" class="btn btn-outline btn-sm"><i class="ph ph-eye"></i> Ver Detalle</a>
                    </div>
                </div>
            @endforeach
        </div>
    @endif

    {{-- Productos --}}
    @if($products->isNotEmpty())
        <h2 style="font-size: 1.1rem; margin: var(--space-xl) 0 var(--space-md) 0; color: var(--text-primary);">
            <i class="ph ph-shopping-bag" style="vertical-align: middle; margin-right: 4px;"></i> Productos ({{ $products->count() }})
        </h2>
        
        <div x-show="viewMode === 'list'" class="card table-responsive" x-cloak>
            <table class="table">
                <thead>
                    <tr>
                        <th>Producto</th>
                        <th>Categoría</th>
                        <th>Precio</th>
                        <th>Acción</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($products as $product)
                        <tr>
                            <td><span style="font-weight: 500;">{{ $product->name }}</span></td>
                            <td>{{ $product->category->name ?? '—' }}</td>
                            <td>${{ number_format($product->price, 2) }}</td>
                            <td><a href="{{ route('products.edit', $product) }}" class="btn btn-sm btn-outline">Editar</a></td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        <div class="card-grid-container" x-show="viewMode === 'card'" x-cloak>
            @foreach($products as $product)
                <div class="mobile-card">
                    <div class="mobile-card-header">
                        <div class="d-flex align-center gap-sm">
                            <div class="avatar-sm avatar"><i class="ph ph-shopping-bag"></i></div>
                            <div class="list-item-title">{{ $product->name }}</div>
                        </div>
                    </div>
                    <div class="mobile-card-body">
                        <div class="mobile-card-row"><span class="mobile-card-label">Precio</span><span class="mobile-card-value">${{ number_format($product->price, 2) }}</span></div>
                        <div class="mobile-card-row"><span class="mobile-card-label">Categoría</span><span class="mobile-card-value">{{ $product->category->name ?? '—' }}</span></div>
                    </div>
                    <div class="mobile-card-actions">
                        <a href="{{ route('products.edit', $product) }}" class="btn btn-outline btn-sm"><i class="ph ph-pencil-simple"></i> Editar</a>
                    </div>
                </div>
            @endforeach
        </div>
    @endif

    {{-- Cotizaciones --}}
    @if($quotes->isNotEmpty())
        <h2 style="font-size: 1.1rem; margin: var(--space-xl) 0 var(--space-md) 0; color: var(--text-primary);">
            <i class="ph ph-file-text" style="vertical-align: middle; margin-right: 4px;"></i> Cotizaciones ({{ $quotes->count() }})
        </h2>
        
        <div x-show="viewMode === 'list'" class="card table-responsive" x-cloak>
            <table class="table">
                <thead>
                    <tr>
                        <th>Número</th>
                        <th>Cliente</th>
                        <th>Empresa</th>
                        <th>Total</th>
                        <th>Acción</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($quotes as $quote)
                        <tr>
                            <td><span style="font-weight: 500;">{{ $quote->quote_number }}</span></td>
                            <td>{{ $quote->customer_name }}</td>
                            <td>{{ $quote->company->name ?? '—' }}</td>
                            <td>${{ number_format($quote->total, 2) }}</td>
                            <td><a href="{{ route('quotes.show', $quote) }}" class="btn btn-sm btn-outline">Ver Detalle</a></td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        <div class="card-grid-container" x-show="viewMode === 'card'" x-cloak>
            @foreach($quotes as $quote)
                <div class="mobile-card">
                    <div class="mobile-card-header">
                        <div class="d-flex align-center gap-sm">
                            <div class="avatar-sm avatar"><i class="ph ph-file-text"></i></div>
                            <div class="list-item-title">{{ $quote->quote_number }}</div>
                        </div>
                    </div>
                    <div class="mobile-card-body">
                        <div class="mobile-card-row"><span class="mobile-card-label">Cliente</span><span class="mobile-card-value" style="word-break: break-word;">{{ $quote->customer_name }}</span></div>
                        <div class="mobile-card-row"><span class="mobile-card-label">Empresa</span><span class="mobile-card-value">{{ $quote->company->name ?? '—' }}</span></div>
                        <div class="mobile-card-row"><span class="mobile-card-label">Total</span><span class="mobile-card-value">${{ number_format($quote->total, 2) }}</span></div>
                    </div>
                    <div class="mobile-card-actions">
                        <a href="{{ route('quotes.show', $quote) }}" class="btn btn-outline btn-sm"><i class="ph ph-eye"></i> Ver Detalle</a>
                    </div>
                </div>
            @endforeach
        </div>
    @endif

    {{-- Tickets --}}
    @if($tickets->isNotEmpty())
        <h2 style="font-size: 1.1rem; margin: var(--space-xl) 0 var(--space-md) 0; color: var(--text-primary);">
            <i class="ph ph-ticket" style="vertical-align: middle; margin-right: 4px;"></i> Tickets ({{ $tickets->count() }})
        </h2>
        
        <div x-show="viewMode === 'list'" class="card table-responsive" x-cloak>
            <table class="table">
                <thead>
                    <tr>
                        <th>Número</th>
                        <th>Título</th>
                        <th>Empresa</th>
                        <th>Estado</th>
                        <th>Acción</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($tickets as $ticket)
                        <tr>
                            <td><span style="font-weight: 500;">{{ $ticket->ticket_number }}</span></td>
                            <td>{{ $ticket->title }}</td>
                            <td>{{ $ticket->company->name ?? '—' }}</td>
                            <td><span class="badge {{ $ticket->status === 'open' ? 'badge-danger' : ($ticket->status === 'in_progress' ? 'badge-warning' : 'badge-success') }}">{{ strtoupper($ticket->status) }}</span></td>
                            <td><a href="{{ route('tickets.show', $ticket) }}" class="btn btn-sm btn-outline">Ver Detalle</a></td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        <div class="card-grid-container" x-show="viewMode === 'card'" x-cloak>
            @foreach($tickets as $ticket)
                <div class="mobile-card">
                    <div class="mobile-card-header">
                        <div class="d-flex align-center gap-sm">
                            <div class="avatar-sm avatar"><i class="ph ph-ticket"></i></div>
                            <div class="list-item-title">{{ $ticket->ticket_number }}</div>
                        </div>
                        <span class="badge {{ $ticket->status === 'open' ? 'badge-danger' : ($ticket->status === 'in_progress' ? 'badge-warning' : 'badge-success') }}">{{ strtoupper($ticket->status) }}</span>
                    </div>
                    <div class="mobile-card-body">
                        <div class="mobile-card-row"><span class="mobile-card-label">Título</span><span class="mobile-card-value" style="word-break: break-word;">{{ $ticket->title }}</span></div>
                        <div class="mobile-card-row"><span class="mobile-card-label">Empresa</span><span class="mobile-card-value">{{ $ticket->company->name ?? '—' }}</span></div>
                    </div>
                    <div class="mobile-card-actions">
                        <a href="{{ route('tickets.show', $ticket) }}" class="btn btn-outline btn-sm"><i class="ph ph-eye"></i> Ver Detalle</a>
                    </div>
                </div>
            @endforeach
        </div>
    @endif

    {{-- Facturas --}}
    @if($invoices->isNotEmpty())
        <h2 style="font-size: 1.1rem; margin: var(--space-xl) 0 var(--space-md) 0; color: var(--text-primary);">
            <i class="ph ph-receipt" style="vertical-align: middle; margin-right: 4px;"></i> Facturas ({{ $invoices->count() }})
        </h2>
        
        <div x-show="viewMode === 'list'" class="card table-responsive" x-cloak>
            <table class="table">
                <thead>
                    <tr>
                        <th>Documento</th>
                        <th>Empresa</th>
                        <th>Total</th>
                        <th>Estado</th>
                        <th>Acción</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($invoices as $invoice)
                        <tr>
                            <td><span style="font-weight: 500;">{{ $invoice->document_number }}</span></td>
                            <td>{{ $invoice->company->name ?? '—' }}</td>
                            <td>${{ number_format($invoice->total_amount, 2) }}</td>
                            <td><span class="badge {{ $invoice->status === 'paid' ? 'badge-success' : 'badge-danger' }}">{{ strtoupper($invoice->status) }}</span></td>
                            <td><a href="{{ route('invoices.show', $invoice) }}" class="btn btn-sm btn-outline">Ver Detalle</a></td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        <div class="card-grid-container" x-show="viewMode === 'card'" x-cloak>
            @foreach($invoices as $invoice)
                <div class="mobile-card">
                    <div class="mobile-card-header">
                        <div class="d-flex align-center gap-sm">
                            <div class="avatar-sm avatar"><i class="ph ph-receipt"></i></div>
                            <div class="list-item-title">{{ $invoice->document_number }}</div>
                        </div>
                        <span class="badge {{ $invoice->status === 'paid' ? 'badge-success' : 'badge-danger' }}">{{ strtoupper($invoice->status) }}</span>
                    </div>
                    <div class="mobile-card-body">
                        <div class="mobile-card-row"><span class="mobile-card-label">Empresa</span><span class="mobile-card-value">{{ $invoice->company->name ?? '—' }}</span></div>
                        <div class="mobile-card-row"><span class="mobile-card-label">Total</span><span class="mobile-card-value">${{ number_format($invoice->total_amount, 2) }}</span></div>
                    </div>
                    <div class="mobile-card-actions">
                        <a href="{{ route('invoices.show', $invoice) }}" class="btn btn-outline btn-sm"><i class="ph ph-eye"></i> Ver Detalle</a>
                    </div>
                </div>
            @endforeach
        </div>
    @endif

</div>
@endsection