@extends('layouts.app')

@section('title', 'Administración SaaS - Ojo de Águila')
@section('header_title', 'Administración SaaS')

@section('content')
<div class="dashboard-grid">
    <!-- Formulario para Crear Recinto -->
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">🏢 Registrar Nuevo Recinto</h3>
        </div>
        <div class="card-body">
            <form action="{{ route('admin.accounts.store') }}" method="POST">
                @csrf
                <div class="form-group">
                    <label for="name" class="form-label required">Nombre del Recinto / Condominio</label>
                    <input type="text" name="name" id="name" class="form-control" placeholder="Ej: Condominio Las Encinas" required>
                </div>

                <div class="form-group">
                    <label for="plan_type" class="form-label required">Plan contratado</label>
                    <select name="plan_type" id="plan_type" class="form-control" required>
                        <option value="mvp">Plan MVP (Control básico)</option>
                        <option value="premium">Plan Premium (Geolocalización + Estacionamientos)</option>
                        <option value="enterprise">Plan Enterprise (Monitoreo avanzado + Integraciones)</option>
                    </select>
                </div>

                <div class="form-group">
                    <label for="address" class="form-label">Dirección</label>
                    <input type="text" name="address" id="address" class="form-control" placeholder="Av. Principal 1234">
                </div>

                <div class="form-group">
                    <label for="city" class="form-label">Ciudad / Comuna</label>
                    <input type="text" name="city" id="city" class="form-control" placeholder="Santiago, Viña del Mar...">
                </div>

                <button type="submit" class="btn btn-primary btn-full" style="height: 44px; margin-top: 8px;">
                    🏢 Registrar Recinto
                </button>
            </form>
        </div>
    </div>

    <!-- Listado de Recintos -->
    <div class="card" style="margin-bottom: 0;">
        <div class="card-header">
            <h3 class="card-title">🏢 Recintos Activos en la Plataforma</h3>
        </div>
        <div class="table-responsive">
            <table class="table">
                <thead>
                    <tr>
                        <th>Nombre</th>
                        <th>Detalles</th>
                        <th>Guardias / Zonas</th>
                        <th>Plan</th>
                        <th>Estado</th>
                        <th>Acción</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($accounts as $acc)
                        <tr>
                            <td style="font-weight: 700; color: var(--text-primary);">
                                {{ $acc->name }}
                            </td>
                            <td style="font-size: 12px; color: var(--text-secondary);">
                                {{ $acc->address ?? 'Sin dirección' }}<br>
                                {{ $acc->city ?? 'Sin ciudad' }}
                            </td>
                            <td style="font-weight: 600; font-size: 13px;">
                                👮 {{ $acc->users_count ?? 0 }} guardias<br>
                                📍 {{ $acc->zones_count ?? 0 }} zonas
                            </td>
                            <td>
                                <span class="badge {{ $acc->plan_type === 'enterprise' ? 'badge-danger' : ($acc->plan_type === 'premium' ? 'badge-info' : 'badge-warning') }}" style="font-size: 11px;">
                                    {{ $acc->plan_type }}
                                </span>
                            </td>
                            <td>
                                <span class="badge {{ $acc->is_active ? 'badge-success' : 'badge-danger' }}">
                                    {{ $acc->is_active ? 'Activo' : 'Inactivo' }}
                                </span>
                            </td>
                            <td>
                                <form action="{{ route('admin.accounts.toggle', $acc->id) }}" method="POST">
                                    @csrf
                                    <button type="submit" class="btn {{ $acc->is_active ? 'btn-danger' : 'btn-primary' }}" style="font-size: 11px; padding: 6px 10px;">
                                        {{ $acc->is_active ? 'Desactivar' : 'Activar' }}
                                    </button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" style="text-align: center; color: var(--text-light); padding: 40px;">
                                No hay recintos creados.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection