@extends('layouts.app')

@section('title', 'Sedes de ' . $company->name . ' — TI Manager')

@section('content')
<div x-data="{ viewMode: localStorage.getItem('viewMode_branches') || 'list' }" 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.show', $company) }}" class="btn btn-ghost btn-icon" title="Volver">
                    <i class="ph ph-arrow-left"></i>
                </a>
                <h1 class="page-title">
                    <i class="ph ph-buildings" style="color: var(--primary);"></i>
                    Sedes de {{ $company->name }}
                    <span class="count">({{ $branches->count() }})</span>
                </h1>
            </div>
            <div class="d-flex align-center gap-sm">
                <div class="view-toggle-group">
                    <button @click="viewMode = 'list'; localStorage.setItem('viewMode_branches', '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_branches', 'card')"
                            :class="{'active': viewMode === 'card'}"
                            class="view-toggle-btn"
                            title="Vista de Tarjetas">
                        <i class="ph ph-grid-four"></i>
                    </button>
                </div>
                @if(Auth::user()->isAdmin())
                    <a href="{{ route('companies.branches.create', $company) }}" class="btn btn-primary btn-sm">
                        <i class="ph ph-plus"></i>
                        <span class="desktop-only">Nueva Sede</span>
                    </a>
                @endif
            </div>
        </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

    @if($branches->count() > 0)
        {{-- VISTA LISTA: Tabla --}}
        <div x-show="viewMode === 'list'" class="card" x-cloak>
            <div class="table-responsive">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Sede</th>
                            <th>Dirección / GPS</th>
                            <th>Teléfono</th>
                            <th>Contacto Principal</th>
                            <th>Inventario</th>
                            <th>Estado</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($branches as $branch)
                            <tr>
                                <td>
                                    <div class="d-flex align-center gap-xs">
                                        <div style="font-weight: 600; color: var(--text-primary);">{{ $branch->name }}</div>
                                        @if($branch->is_main)
                                            <span class="badge badge-primary">Principal</span>
                                        @endif
                                    </div>
                                </td>
                                <td>
                                    @if($branch->full_address)
                                        <div style="font-size: 0.85rem; display: flex; align-items: center; gap: var(--space-xs);">
                                            <span>{{ $branch->full_address }}</span>
                                            @if($branch->hasGps())
                                                <a href="{{ $branch->google_maps_url }}" target="_blank" class="btn btn-outline btn-icon btn-sm" title="Abrir en GPS" style="width: 24px; height: 24px; min-width: 24px; min-height: 24px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--primary); border-color: var(--primary); margin-left: var(--space-xs);">
                                                    <i class="ph ph-navigation-arrow" style="font-size: 0.75rem;"></i>
                                                </a>
                                            @endif
                                        </div>
                                    @else
                                        <span class="text-muted">—</span>
                                    @endif
                                </td>
                                <td>
                                    @if($branch->phone)
                                        <a href="tel:{{ $branch->phone }}" style="color: var(--secondary); font-size: 0.85rem;">{{ $branch->phone }}</a>
                                    @else
                                        <span class="text-muted">—</span>
                                    @endif
                                </td>
                                <td>{{ $branch->contact_person ?? '—' }}</td>
                                <td>
                                    <span class="badge badge-info">{{ $branch->inventoryItems->count() }} items</span>
                                </td>
                                <td>
                                    <span class="badge {{ $branch->is_active ? 'badge-success' : 'badge-danger' }}">
                                        {{ $branch->is_active ? 'Activa' : 'Inactiva' }}
                                    </span>
                                </td>
                                <td>
                                    <div class="table-actions">
                                        <a href="{{ route('companies.branches.show', [$company, $branch]) }}" class="btn btn-ghost btn-icon" title="Ver inventario">
                                            <i class="ph ph-eye"></i>
                                        </a>
                                        @if(Auth::user()->isAdmin())
                                            <a href="{{ route('companies.branches.edit', [$company, $branch]) }}" class="btn btn-ghost btn-icon" title="Editar">
                                                <i class="ph ph-pencil"></i>
                                            </a>
                                            <form method="POST" action="{{ route('companies.branches.destroy', [$company, $branch]) }}"
                                                  onsubmit="confirmDelete(event, '¿Estás seguro de eliminar esta sede?')"
                                                  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>

        {{-- VISTA TARJETAS: Grid responsivo --}}
        <div class="card-grid-container" x-show="viewMode === 'card'" x-cloak>
            @foreach($branches as $branch)
                <div class="mobile-card">
                    <div class="mobile-card-header">
                        <div class="d-flex align-center gap-sm flex-wrap">
                            <span style="font-weight: 600; color: var(--text-primary); font-size: 1rem;">{{ $branch->name }}</span>
                            @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 class="mobile-card-body">
                        @if($branch->full_address)
                            <div class="mobile-card-row">
                                <span class="mobile-card-label">
                                    <i class="ph ph-map-pin"></i> Dirección
                                </span>
                                <span class="mobile-card-value">{{ $branch->full_address }}</span>
                            </div>
                        @endif

                        @if($branch->phone)
                            <div class="mobile-card-row">
                                <span class="mobile-card-label">
                                    <i class="ph ph-phone"></i> Teléfono
                                </span>
                                <span class="mobile-card-value">
                                    <a href="tel:{{ $branch->phone }}" style="color: var(--secondary);">{{ $branch->phone }}</a>
                                </span>
                            </div>
                        @endif

                        @if($branch->contact_person)
                            <div class="mobile-card-row">
                                <span class="mobile-card-label">
                                    <i class="ph ph-user"></i> Contacto
                                </span>
                                <span class="mobile-card-value">{{ $branch->contact_person }}</span>
                            </div>
                        @endif

                        @if($branch->hasGps())
                            <div class="mobile-card-row" style="align-items: center;">
                                <span class="mobile-card-label">
                                    <i class="ph ph-map-pin" style="color: var(--primary);"></i> GPS
                                </span>
                                <a href="{{ $branch->google_maps_url }}" target="_blank" class="btn btn-outline btn-icon btn-sm" title="Abrir en GPS" style="width: 32px; height: 32px; min-width: 32px; min-height: 32px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--primary); border-color: var(--primary); margin-left: auto;">
                                    <i class="ph ph-navigation-arrow"></i>
                                </a>
                            </div>
                        @endif

                        <div class="mobile-card-row">
                            <span class="mobile-card-label">
                                <i class="ph ph-package"></i> Inventario
                            </span>
                            <span class="mobile-card-value">
                                <span class="badge badge-info">{{ $branch->inventoryItems->count() }} items</span>
                            </span>
                        </div>
                    </div>

                    <div class="mobile-card-actions">
                        <a href="{{ route('companies.branches.show', [$company, $branch]) }}" class="btn btn-outline btn-sm">
                            <i class="ph ph-eye"></i> Ver inventario
                        </a>
                        @if(Auth::user()->isAdmin())
                            <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?')">
                                @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>

    @else
        {{-- Estado vacío --}}
        <div class="empty-state">
            <i class="ph ph-buildings"></i>
            <h3>No hay sedes registradas</h3>
            <p>Comienza agregando la primera sede para {{ $company->name }}.</p>
            @if(Auth::user()->isAdmin())
                <a href="{{ route('companies.branches.create', $company) }}" class="btn btn-primary">
                    <i class="ph ph-plus"></i> Crear Sede
                </a>
            @endif
        </div>
    @endif
</div>
@endsection