@extends('layouts.admin')

@section('content')
<style>
    .bed-card {
        border-radius: 12px;
        transition: all 0.25s ease;
        border: 2px solid transparent;
        position: relative;
        overflow: hidden;
    }
    .bed-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(0,0,0,0.12) !important;
    }
    .bed-disponible {
        border-color: #10b981;
        background: linear-gradient(180deg, rgba(16, 185, 129, 0.05) 0%, rgba(255, 255, 255, 1) 100%);
    }
    .bed-ocupada {
        border-color: #ef4444;
        background: linear-gradient(180deg, rgba(239, 68, 68, 0.06) 0%, rgba(255, 255, 255, 1) 100%);
    }
    .bed-limpieza {
        border-color: #f59e0b;
        background: linear-gradient(180deg, rgba(245, 158, 11, 0.06) 0%, rgba(255, 255, 255, 1) 100%);
    }
    .bed-mantenimiento {
        border-color: #6b7280;
        background: linear-gradient(180deg, rgba(107, 114, 128, 0.06) 0%, rgba(255, 255, 255, 1) 100%);
    }
    .bed-reservada {
        border-color: #3b82f6;
        background: linear-gradient(180deg, rgba(59, 130, 246, 0.06) 0%, rgba(255, 255, 255, 1) 100%);
    }
    .pulse-dot {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        margin-right: 6px;
        animation: pulse 1.8s infinite;
    }
    @keyframes pulse {
        0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
        70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
        100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
    }
    .pulse-green {
        background-color: #10b981;
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }
    .pulse-red {
        background-color: #ef4444;
    }
</style>

<div class="row mb-3 align-items-center">
    <div class="col-md-6">
        <h1 class="m-0 font-weight-bold text-dark" style="font-size: 1.8rem;">
            <i class="fas fa-th-large text-info mr-2"></i> Mapa de Camas en Tiempo Real
        </h1>
        <p class="text-muted mb-0">Monitor visual de ocupación hospitalaria y asignación rápida por pabellón</p>
    </div>
    <div class="col-md-6 text-md-right mt-3 mt-md-0">
        <a href="{{ route('admin.hospitalizaciones.create') }}" class="btn btn-primary shadow-sm mr-2 font-weight-bold">
            <i class="fas fa-plus-circle mr-1"></i> Asignar Ingreso
        </a>
        <a href="{{ route('admin.hospitalizaciones.index') }}" class="btn btn-outline-secondary shadow-sm">
            <i class="fas fa-list mr-1"></i> Ver Listado
        </a>
    </div>
</div>

<!-- Leyenda y Filtros Rápidos -->
<div class="card shadow-sm mb-4">
    <div class="card-body py-2">
        <div class="d-flex flex-wrap align-items-center justify-content-between">
            <!-- Leyenda de Estados con Contadores -->
            <div class="d-flex flex-wrap align-items-center my-1">
                <span class="mr-3 font-weight-bold text-dark">
                    <i class="fas fa-circle-notch text-primary mr-1"></i> Estados:
                </span>
                <span class="badge badge-success px-3 py-2 mr-2 mb-1" style="font-size: 0.85rem;">
                    <i class="fas fa-check mr-1"></i> Disponibles: <b>{{ $camasDisponibles }}</b>
                </span>
                <span class="badge badge-danger px-3 py-2 mr-2 mb-1" style="font-size: 0.85rem;">
                    <i class="fas fa-user-injured mr-1"></i> Ocupadas: <b>{{ $camasOcupadas }}</b>
                </span>
                <span class="badge badge-warning text-white px-3 py-2 mr-2 mb-1" style="font-size: 0.85rem;">
                    <i class="fas fa-broom mr-1"></i> Limpieza: <b>{{ $camasLimpieza }}</b>
                </span>
                <span class="badge badge-secondary px-3 py-2 mr-2 mb-1" style="font-size: 0.85rem;">
                    <i class="fas fa-tools mr-1"></i> Mantenimiento: <b>{{ $camasMantenimiento }}</b>
                </span>
            </div>

            <!-- Filtros de Piso y Tipo -->
            <form action="{{ route('admin.hospitalizaciones.mapa') }}" method="GET" class="d-flex align-items-center my-1">
                <select name="piso" class="form-control form-control-sm mr-2" onchange="this.form.submit()">
                    <option value="todos">Todos los Pisos</option>
                    @foreach($pisos as $p)
                        <option value="{{ $p }}" {{ request('piso') == $p ? 'selected' : '' }}>{{ $p }}</option>
                    @endforeach
                </select>
                <select name="tipo" class="form-control form-control-sm mr-2" onchange="this.form.submit()">
                    <option value="todos">Todos los Tipos</option>
                    @foreach($tipos as $t)
                        <option value="{{ $t }}" {{ request('tipo') == $t ? 'selected' : '' }}>{{ $t }}</option>
                    @endforeach
                </select>
                @if(request()->has('piso') || request()->has('tipo'))
                    <a href="{{ route('admin.hospitalizaciones.mapa') }}" class="btn btn-sm btn-outline-secondary">
                        <i class="fas fa-times"></i>
                    </a>
                @endif
            </form>
        </div>
    </div>
</div>

<!-- Salas y Camas Agrupadas -->
@forelse($habitaciones as $hab)
    <div class="card card-outline card-secondary shadow-sm mb-4">
        <div class="card-header bg-light d-flex justify-content-between align-items-center py-2">
            <div>
                <h5 class="card-title font-weight-bold text-dark mb-0">
                    <i class="fas fa-door-open text-primary mr-2"></i>{{ $hab->nombre }}
                    <span class="badge badge-light border ml-2 text-muted" style="font-size: 0.8rem;">
                        {{ $hab->codigo }}
                    </span>
                </h5>
                <span class="small text-muted ml-1">
                    <i class="fas fa-layer-group mr-1"></i>{{ $hab->piso }} 
                    @if($hab->ala_sector) • <i class="fas fa-compass mr-1"></i>{{ $hab->ala_sector }} @endif
                    • <span class="badge badge-info">{{ $hab->tipo }}</span>
                </span>
            </div>
            <div class="card-tools">
                <span class="badge badge-pill badge-light border px-2 py-1">
                    {{ $hab->camas->where('estado', 'Disponible')->count() }} libres de {{ $hab->camas->count() }} camas
                </span>
            </div>
        </div>

        <div class="card-body p-3">
            <div class="row">
                @forelse($hab->camas as $cama)
                    @php
                        $estadoClass = match($cama->estado) {
                            'Disponible' => 'bed-disponible',
                            'Ocupada' => 'bed-ocupada',
                            'Limpieza' => 'bed-limpieza',
                            'Mantenimiento' => 'bed-mantenimiento',
                            'Reservada' => 'bed-reservada',
                            default => 'border-light'
                        };
                        $activa = $cama->hospitalizacionActiva;
                    @endphp

                    <div class="col-xl-3 col-lg-4 col-md-6 mb-3">
                        <div class="card bed-card {{ $estadoClass }} h-100 shadow-sm p-3">
                            <!-- Cabecera de la Cama -->
                            <div class="d-flex justify-content-between align-items-start mb-2">
                                <div>
                                    <h6 class="font-weight-bold mb-0 text-dark">
                                        <i class="fas fa-bed mr-1 text-secondary"></i> {{ $cama->codigo }}
                                    </h6>
                                    <span class="text-muted" style="font-size: 0.75rem;">{{ $cama->tipo }}</span>
                                </div>
                                <div>
                                    <span class="badge {{ $cama->badge_class }} px-2 py-1">
                                        @if($cama->estado === 'Ocupada')
                                            <span class="pulse-dot pulse-red"></span>
                                        @elseif($cama->estado === 'Disponible')
                                            <span class="pulse-dot pulse-green"></span>
                                        @endif
                                        {{ $cama->estado }}
                                    </span>
                                </div>
                            </div>

                            <!-- Contenido según estado -->
                            @if($cama->estado === 'Disponible')
                                <div class="py-2 text-center text-muted my-auto">
                                    <i class="fas fa-check-circle fa-2x text-success mb-2 d-block"></i>
                                    <div class="small font-weight-bold text-success">Cama Lista para Ingreso</div>
                                    <div class="small text-muted">${{ number_format($cama->precio_dia, 2) }} / día</div>
                                </div>

                                <div class="mt-3 pt-2 border-top d-flex justify-content-between align-items-center">
                                    <a href="{{ route('admin.hospitalizaciones.create', ['cama_id' => $cama->id]) }}" class="btn btn-sm btn-success font-weight-bold btn-block mr-1 shadow-sm">
                                        <i class="fas fa-user-plus mr-1"></i> Asignar Paciente
                                    </a>
                                    <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle" data-toggle="dropdown" title="Cambiar Estado">
                                    </button>
                                    <div class="dropdown-menu dropdown-menu-right shadow">
                                        <form action="{{ route('admin.hospitalizaciones.cambiar_estado_cama', $cama->id) }}" method="POST">
                                            @csrf
                                            <button type="submit" name="estado" value="Limpieza" class="dropdown-item">
                                                <i class="fas fa-broom text-warning mr-2"></i> Poner en Limpieza
                                            </button>
                                            <button type="submit" name="estado" value="Mantenimiento" class="dropdown-item">
                                                <i class="fas fa-tools text-secondary mr-2"></i> Poner en Mantenimiento
                                            </button>
                                        </form>
                                    </div>
                                </div>

                            @elseif($cama->estado === 'Ocupada' && $activa)
                                <div class="py-2 my-auto">
                                    <!-- Datos del Paciente Internado -->
                                    <div class="p-2 rounded mb-2" style="background: rgba(239, 68, 68, 0.08); border-left: 3px solid #ef4444;">
                                        <div class="font-weight-bold text-dark text-truncate" title="{{ $activa->paciente->apellidos ?? '' }} {{ $activa->paciente->nombres ?? '' }}">
                                            <i class="fas fa-user-injured text-danger mr-1"></i>
                                            {{ $activa->paciente ? ($activa->paciente->apellidos . ' ' . $activa->paciente->nombres) : 'Paciente' }}
                                        </div>
                                        <div class="small text-muted">
                                            CI: {{ $activa->paciente->cedula ?? 'S/N' }} | {{ $activa->paciente->edad ?? 'N/A' }} años
                                        </div>
                                    </div>

                                    <div class="small text-muted mb-1 text-truncate">
                                        <i class="fas fa-user-md text-primary mr-1"></i> Dr. {{ $activa->doctor->apellidos ?? 'Médico' }}
                                    </div>
                                    <div class="small text-muted mb-1">
                                        <i class="fas fa-clock text-info mr-1"></i> Ingreso: {{ $activa->fecha_ingreso ? $activa->fecha_ingreso->format('d/m/Y') : '-' }} 
                                        <span class="badge badge-danger ml-1">{{ $activa->dias_calculados }}d</span>
                                    </div>
                                    <div class="small text-secondary text-truncate" title="{{ $activa->diagnostico_ingreso }}">
                                        <i class="fas fa-stethoscope mr-1"></i> {{ Str::limit($activa->diagnostico_ingreso, 38) }}
                                    </div>
                                </div>

                                <div class="mt-2 pt-2 border-top d-flex justify-content-between align-items-center">
                                    <a href="{{ route('admin.hospitalizaciones.show', $activa->id) }}" class="btn btn-sm btn-outline-primary font-weight-bold mr-1 flex-grow-1" title="Ver Expediente Completo">
                                        <i class="fas fa-folder-open mr-1"></i> Expediente
                                    </a>
                                    <a href="{{ route('admin.hospitalizaciones.alta', $activa->id) }}" class="btn btn-sm btn-success font-weight-bold shadow-sm" title="Procesar Alta Médica">
                                        <i class="fas fa-sign-out-alt mr-1"></i> Alta
                                    </a>
                                </div>

                            @elseif($cama->estado === 'Limpieza')
                                <div class="py-2 text-center text-muted my-auto">
                                    <i class="fas fa-broom fa-2x text-warning mb-2 d-block"></i>
                                    <div class="small font-weight-bold text-warning">En Desinfección / Limpieza</div>
                                    <div class="small text-muted">Pendiente de habilitar para ingreso</div>
                                </div>

                                <div class="mt-3 pt-2 border-top">
                                    <form action="{{ route('admin.hospitalizaciones.cambiar_estado_cama', $cama->id) }}" method="POST">
                                        @csrf
                                        <input type="hidden" name="estado" value="Disponible">
                                        <button type="submit" class="btn btn-sm btn-outline-success font-weight-bold btn-block shadow-sm">
                                            <i class="fas fa-check-circle mr-1"></i> Marcar como Disponible
                                        </button>
                                    </form>
                                </div>

                            @elseif($cama->estado === 'Mantenimiento')
                                <div class="py-2 text-center text-muted my-auto">
                                    <i class="fas fa-tools fa-2x text-secondary mb-2 d-block"></i>
                                    <div class="small font-weight-bold text-secondary">En Mantenimiento Técnico</div>
                                    <div class="small text-muted">No disponible para internación</div>
                                </div>

                                <div class="mt-3 pt-2 border-top">
                                    <form action="{{ route('admin.hospitalizaciones.cambiar_estado_cama', $cama->id) }}" method="POST">
                                        @csrf
                                        <input type="hidden" name="estado" value="Disponible">
                                        <button type="submit" class="btn btn-sm btn-outline-primary font-weight-bold btn-block shadow-sm">
                                            <i class="fas fa-check-circle mr-1"></i> Habilitar Cama
                                        </button>
                                    </form>
                                </div>
                            @endif
                        </div>
                    </div>
                @empty
                    <div class="col-12 text-center py-3 text-muted">
                        No hay camas registradas en esta habitación.
                        <a href="{{ route('admin.camas.create', ['habitacion_id' => $hab->id]) }}" class="btn btn-xs btn-outline-primary ml-2">
                            <i class="fas fa-plus"></i> Agregar Cama
                        </a>
                    </div>
                @endforelse
            </div>
        </div>
    </div>
@empty
    <div class="card p-5 text-center shadow-sm">
        <i class="fas fa-hospital fa-3x text-muted mb-3"></i>
        <h4>No se encontraron habitaciones registradas.</h4>
        <p class="text-muted">Cree habitaciones y camas hospitalarias para visualizar el mapa en tiempo real.</p>
        <div>
            <a href="{{ route('admin.habitaciones.create') }}" class="btn btn-primary font-weight-bold">
                <i class="fas fa-plus mr-1"></i> Crear Primera Habitación
            </a>
        </div>
    </div>
@endforelse

@endsection