@extends('layouts.app')

@section('title', $branch->name . ' — TI Manager')

@section('content')
<div class="animate-fadeIn">
    {{-- Encabezado --}}
    <div class="page-header">
        <div class="page-header-top">
            <div class="d-flex align-center gap-md">
                <a href="{{ route('companies.branches.index', $company) }}" class="btn btn-ghost btn-icon" title="Volver a sedes">
                    <i class="ph ph-arrow-left"></i>
                </a>
                <div>
                    <h1 class="page-title" style="margin-bottom: 2px;">{{ $branch->name }}</h1>
                    <div class="d-flex gap-xs flex-wrap">
                        @if($branch->is_main)
                            <span class="badge badge-primary">Principal</span>
                        @endif
                        <span class="badge {{ $branch->is_active ? 'badge-success' : 'badge-danger' }}">
                            {{ $branch->is_active ? 'Activa' : 'Inactiva' }}
                        </span>
                    </div>
                </div>
            </div>
            @if(Auth::user()->isAdmin())
                <div class="d-flex gap-sm">
                    <a href="{{ route('companies.branches.edit', [$company, $branch]) }}" class="btn btn-outline btn-sm">
                        <i class="ph ph-pencil"></i> Editar
                    </a>
                    <form method="POST" action="{{ route('companies.branches.destroy', [$company, $branch]) }}"
                          onsubmit="confirmDelete(event, '¿Estás seguro de eliminar esta sede? Esta acción no se puede deshacer.')">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-danger btn-sm">
                            <i class="ph ph-trash"></i> Eliminar
                        </button>
                    </form>
                </div>
            @endif
        </div>
    </div>

    {{-- Flash Messages --}}
    @if(session('success'))
        <div class="alert alert-success">
            <i class="ph ph-check-circle"></i>
            {{ session('success') }}
            <button class="alert-close" onclick="this.parentElement.remove()">
                <i class="ph ph-x"></i>
            </button>
        </div>
    @endif

    {{-- Empresa --}}
    <div class="d-flex align-center gap-sm mb-lg">
        <i class="ph ph-buildings" style="color: var(--text-muted);"></i>
        <span class="text-secondary text-sm">Empresa:</span>
        <a href="{{ route('companies.show', $company) }}" style="color: var(--secondary); font-weight: 500;">{{ $company->name }}</a>
    </div>

    <div style="display: grid; grid-template-columns: 1fr; gap: var(--space-lg);">
        {{-- Dirección --}}
        <div class="card">
            <div class="info-group">
                <div class="info-group-title">
                    <i class="ph ph-map-pin"></i> Dirección
                </div>
                @if($branch->address)
                    <div class="info-row">
                        <span class="info-label">Dirección</span>
                        <span class="info-value">{{ $branch->address }}</span>
                    </div>
                @endif
                @if($branch->city)
                    <div class="info-row">
                        <span class="info-label">Ciudad</span>
                        <span class="info-value">{{ $branch->city }}</span>
                    </div>
                @endif
                @if($branch->department)
                    <div class="info-row">
                        <span class="info-label">Departamento</span>
                        <span class="info-value">{{ $branch->department }}</span>
                    </div>
                @endif
                @if(!$branch->address && !$branch->city && !$branch->department)
                    <p class="text-muted text-sm">No se ha registrado dirección.</p>
                @endif
            </div>
        </div>

        {{-- Contacto --}}
        <div class="card">
            <div class="info-group">
                <div class="info-group-title">
                    <i class="ph ph-phone"></i> Contacto
                </div>
                @if($branch->phone)
                    <div class="info-row">
                        <span class="info-label">Teléfono</span>
                        <span class="info-value">
                            <a href="tel:{{ $branch->phone }}" style="color: var(--secondary);">{{ $branch->phone }}</a>
                        </span>
                    </div>
                @endif
                @if($branch->contact_person)
                    <div class="info-row">
                        <span class="info-label">Persona de contacto</span>
                        <span class="info-value">{{ $branch->contact_person }}</span>
                    </div>
                @endif
                @if(!$branch->phone && !$branch->contact_person)
                    <p class="text-muted text-sm">No se ha registrado información de contacto.</p>
                @endif
            </div>
        </div>

        {{-- GPS --}}
        @if($branch->hasGps())
            <a href="{{ $branch->google_maps_url }}" target="_blank" class="btn btn-primary btn-lg btn-block" style="gap: var(--space-md);">
                <i class="ph ph-navigation-arrow" style="font-size: 1.3rem;"></i>
                Abrir en Google Maps
            </a>
        @endif

        {{-- Notas --}}
        @if($branch->notes)
            <div class="card">
                <div class="info-group">
                    <div class="info-group-title">
                        <i class="ph ph-note"></i> Notas
                    </div>
                    <p style="color: var(--text-secondary); font-size: 0.9rem; line-height: 1.6;">{{ $branch->notes }}</p>
                </div>
            </div>
        @endif

        {{-- Inventario de esta sede --}}
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="ph ph-package" style="color: var(--primary);"></i>
                    Inventario de esta sede
                    @if($branch->inventoryItems->count() > 0)
                        <span class="count">({{ $branch->inventoryItems->count() }})</span>
                    @endif
                </h3>
                <a href="{{ route('inventory.create', ['company_id' => $company->id, 'branch_id' => $branch->id]) }}" class="btn btn-primary btn-sm">
                    <i class="ph ph-plus"></i> Agregar equipo
                </a>
            </div>

            @if($branch->inventoryItems->count() > 0)
                {{-- Vista móvil --}}
                <div class="mobile-only">
                    @foreach($branch->inventoryItems as $item)
                        <div class="list-item" style="flex-direction: column; align-items: flex-start; gap: var(--space-sm);">
                            <div class="d-flex align-center justify-between w-full">
                                <div class="list-item-title">{{ $item->name }}</div>
                                <span class="badge badge-{{ $item->status_color }}">{{ $item->status_label }}</span>
                            </div>
                            <div class="d-flex flex-wrap gap-sm" style="font-size: 0.82rem; color: var(--text-muted);">
                                @if($item->brand || $item->model)
                                    <span>{{ $item->brand }} {{ $item->model }}</span>
                                @endif
                                @if($item->serial_number)
                                    <span>· S/N: {{ $item->serial_number }}</span>
                                @endif
                            </div>
                            @if($item->assigned_to)
                                <div class="text-sm text-secondary">
                                    <i class="ph ph-user" style="font-size: 0.85rem;"></i> {{ $item->assigned_to }}
                                </div>
                            @endif
                        </div>
                    @endforeach
                </div>

                {{-- Vista desktop --}}
                <div class="desktop-only">
                    <div class="table-responsive">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>Nombre</th>
                                    <th>Marca / Modelo</th>
                                    <th>Serial</th>
                                    <th>Estado</th>
                                    <th>Asignado a</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($branch->inventoryItems as $item)
                                    <tr>
                                        <td style="font-weight: 600; color: var(--text-primary);">{{ $item->name }}</td>
                                        <td>{{ $item->brand }} {{ $item->model }}</td>
                                        <td>{{ $item->serial_number ?? '—' }}</td>
                                        <td>
                                            <span class="badge badge-{{ $item->status_color }}">{{ $item->status_label }}</span>
                                        </td>
                                        <td>{{ $item->assigned_to ?? '—' }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            @else
                <div class="empty-state" style="padding: var(--space-lg);">
                    <i class="ph ph-package" style="font-size: 2.5rem;"></i>
                    <h3>Sin equipos en esta sede</h3>
                    <p>Agrega equipos de inventario a esta sede.</p>
                    <a href="{{ route('inventory.create', ['company_id' => $company->id, 'branch_id' => $branch->id]) }}" class="btn btn-primary btn-sm">
                        <i class="ph ph-plus"></i> Agregar equipo
                    </a>
                </div>
            @endif
        </div>
    </div>
</div>
@endsection