@extends('layouts.admin')

@section('content')
<!-- Hero Banner de Bienvenida del Paciente -->
<div class="welcome-hero-banner mb-4">
    <div class="d-flex align-items-center">
        <div class="rounded-circle d-flex align-items-center justify-content-center text-white mr-3 shadow"
             style="width: 60px; height: 60px; font-size: 1.6rem; font-weight: 700; flex-shrink: 0;
                    background: {{ strtolower($paciente->genero) == 'f' || strtolower($paciente->genero) == 'femenino' ? 'linear-gradient(135deg, #ec4899, #db2777)' : 'linear-gradient(135deg, #2563eb, #0284c7)' }};">
            {{ strtoupper(substr($paciente->nombres, 0, 1)) }}{{ strtoupper(substr($paciente->apellidos, 0, 1)) }}
        </div>
        <div>
            <h2 class="hero-title mb-1">
                ¡Bienvenido(a), {{ $paciente->nombres }} {{ $paciente->apellidos }}!
            </h2>
            <div class="hero-subtitle">
                <span class="badge badge-pill badge-light text-primary font-weight-bold px-3 py-1">
                    <i class="fas fa-folder-open mr-1"></i> Historia Clínica N° {{ $paciente->nro_historia_clinica }}
                </span>
                <span class="d-none d-sm-inline ml-2 text-white-50">
                    <i class="fas fa-id-card mr-1"></i> Cédula: {{ $paciente->cedula }}
                </span>
                <span class="d-none d-md-inline ml-2 text-white-50">
                    <i class="fas fa-heartbeat mr-1"></i> Grupo: {{ $paciente->grupo_sanguineo ?: 'O+' }}
                </span>
            </div>
        </div>
    </div>
    <div class="d-none d-lg-flex align-items-center">
        @if($historiales->count() > 0)
        <a href="{{ route('paciente.portal.historial.pdf', 'completo') }}" target="_blank" class="btn btn-outline-light mr-2 font-weight-bold shadow-sm" style="border-radius: 10px;">
            <i class="fas fa-print mr-1"></i> Imprimir Historial
        </a>
        @endif
        <button type="button" class="btn btn-primary font-weight-bold shadow-sm" data-toggle="modal" data-target="#exampleModal" style="border-radius: 10px;">
            <i class="bi bi-calendar-plus mr-1"></i> Reservar Cita Médica
        </button>
    </div>
</div>

<!-- 4 Tarjetas KPI Principales para el Paciente -->
<div class="row">
    <!-- 1. Mi Historia Clínica -->
    <div class="col-xl-3 col-sm-6 mb-4">
        <div class="card shadow-sm border-0 h-100" style="border-radius: 14px; overflow: hidden; background: var(--dm-bg-card, #ffffff);">
            <div class="card-body p-4">
                <div class="d-flex align-items-center justify-content-between mb-3">
                    <div class="rounded-circle d-flex align-items-center justify-content-center text-primary" style="width: 50px; height: 50px; background: rgba(37, 99, 235, 0.1); font-size: 1.4rem;">
                        <i class="fas fa-clipboard2-pulse"></i>
                    </div>
                    <span class="badge badge-primary px-2 py-1 font-weight-bold">Solo Ver</span>
                </div>
                <h6 class="text-muted text-uppercase small font-weight-bold mb-1">Mi Historia Clínica</h6>
                <h3 class="font-weight-bold mb-0" style="color: var(--dm-text-main, #0f172a);">
                    {{ $historiales->count() }}
                </h3>
                <small class="text-muted">Consultas médicas registradas</small>
            </div>
            <div class="card-footer bg-transparent py-2 border-top d-flex justify-content-between align-items-center">
                <a href="{{ route('paciente.portal.historial') }}" class="font-weight-bold text-primary small">
                    Ver mis consultas <i class="fas fa-arrow-right ml-1"></i>
                </a>
                @if($historiales->count() > 0)
                <a href="{{ route('paciente.portal.historial.pdf', 'completo') }}" target="_blank" class="text-success small font-weight-bold" title="Imprimir PDF">
                    <i class="fas fa-print"></i> PDF
                </a>
                @endif
            </div>
        </div>
    </div>

    <!-- 2. Mis Recetas Médicas -->
    <div class="col-xl-3 col-sm-6 mb-4">
        <div class="card shadow-sm border-0 h-100" style="border-radius: 14px; overflow: hidden; background: var(--dm-bg-card, #ffffff);">
            <div class="card-body p-4">
                <div class="d-flex align-items-center justify-content-between mb-3">
                    <div class="rounded-circle d-flex align-items-center justify-content-center text-success" style="width: 50px; height: 50px; background: rgba(16, 185, 129, 0.1); font-size: 1.4rem;">
                        <i class="fas fa-prescription-bottle-alt"></i>
                    </div>
                    <span class="badge badge-success px-2 py-1 font-weight-bold">Solo Ver</span>
                </div>
                <h6 class="text-muted text-uppercase small font-weight-bold mb-1">Mis Recetas Médicas</h6>
                <h3 class="font-weight-bold mb-0" style="color: var(--dm-text-main, #0f172a);">
                    {{ $recetas->count() }}
                </h3>
                <small class="text-muted">Prescripciones emitidas</small>
            </div>
            <div class="card-footer bg-transparent py-2 border-top d-flex justify-content-between align-items-center">
                <a href="{{ route('paciente.portal.recetas') }}" class="font-weight-bold text-success small">
                    Ver mis recetas <i class="fas fa-arrow-right ml-1"></i>
                </a>
                @if($recetas->count() > 0)
                <a href="{{ route('paciente.portal.recetas.pdf', ['id' => $recetas->first()->id, 'formato' => 'a5']) }}" target="_blank" class="text-success small font-weight-bold" title="Imprimir última receta A5">
                    <i class="fas fa-print"></i> Última
                </a>
                @endif
            </div>
        </div>
    </div>

    <!-- 3. Mis Pagos y Comprobantes -->
    <div class="col-xl-3 col-sm-6 mb-4">
        <div class="card shadow-sm border-0 h-100" style="border-radius: 14px; overflow: hidden; background: var(--dm-bg-card, #ffffff);">
            <div class="card-body p-4">
                <div class="d-flex align-items-center justify-content-between mb-3">
                    <div class="rounded-circle d-flex align-items-center justify-content-center text-warning" style="width: 50px; height: 50px; background: rgba(245, 158, 11, 0.1); font-size: 1.4rem;">
                        <i class="fas fa-receipt"></i>
                    </div>
                    <span class="badge badge-warning px-2 py-1 font-weight-bold text-dark">Solo Ver</span>
                </div>
                <h6 class="text-muted text-uppercase small font-weight-bold mb-1">Mis Pagos Realizados</h6>
                <h3 class="font-weight-bold mb-0 text-success">
                    ${{ number_format($totalPagado, 2) }}
                </h3>
                <small class="text-muted">{{ $pagos->count() }} comprobantes emitidos</small>
            </div>
            <div class="card-footer bg-transparent py-2 border-top d-flex justify-content-between align-items-center">
                <a href="{{ route('paciente.portal.pagos') }}" class="font-weight-bold text-warning small">
                    Ver mis pagos <i class="fas fa-arrow-right ml-1"></i>
                </a>
                @if($pagos->count() > 0)
                <a href="{{ route('paciente.portal.pagos.pdf', $pagos->first()->id) }}" target="_blank" class="text-success small font-weight-bold" title="Imprimir último recibo">
                    <i class="fas fa-print"></i> Último
                </a>
                @endif
            </div>
        </div>
    </div>

    <!-- 4. Mis Citas Médicas -->
    <div class="col-xl-3 col-sm-6 mb-4">
        <div class="card shadow-sm border-0 h-100" style="border-radius: 14px; overflow: hidden; background: var(--dm-bg-card, #ffffff);">
            <div class="card-body p-4">
                <div class="d-flex align-items-center justify-content-between mb-3">
                    <div class="rounded-circle d-flex align-items-center justify-content-center text-info" style="width: 50px; height: 50px; background: rgba(13, 202, 240, 0.1); font-size: 1.4rem;">
                        <i class="fas fa-calendar-check"></i>
                    </div>
                    <span class="badge badge-info px-2 py-1 font-weight-bold">Citas</span>
                </div>
                <h6 class="text-muted text-uppercase small font-weight-bold mb-1">Mis Citas Médicas</h6>
                <h3 class="font-weight-bold mb-0" style="color: var(--dm-text-main, #0f172a);">
                    {{ $eventos->count() }}
                </h3>
                <small class="text-muted">Citas en el sistema</small>
            </div>
            <div class="card-footer bg-transparent py-2 border-top d-flex justify-content-between align-items-center">
                <a href="{{ route('ver_reservas', Auth::user()->id) }}" class="font-weight-bold text-info small">
                    Ver mis citas <i class="fas fa-arrow-right ml-1"></i>
                </a>
                <button type="button" class="btn btn-link p-0 text-primary small font-weight-bold" data-toggle="modal" data-target="#exampleModal">
                    <i class="fas fa-plus-circle"></i> Reservar
                </button>
            </div>
        </div>
    </div>

    <!-- 5. Mis Hospitalizaciones -->
    <div class="col-xl-3 col-sm-6 mb-4">
        <div class="card shadow-sm border-0 h-100" style="border-radius: 14px; overflow: hidden; background: var(--dm-bg-card, #ffffff);">
            <div class="card-body p-4">
                <div class="d-flex align-items-center justify-content-between mb-3">
                    <div class="rounded-circle d-flex align-items-center justify-content-center text-danger" style="width: 50px; height: 50px; background: rgba(239, 68, 68, 0.1); font-size: 1.4rem;">
                        <i class="fas fa-procedures"></i>
                    </div>
                    <span class="badge badge-danger px-2 py-1 font-weight-bold">Solo Ver</span>
                </div>
                <h6 class="text-muted text-uppercase small font-weight-bold mb-1">Mis Hospitalizaciones</h6>
                <h3 class="font-weight-bold mb-0" style="color: var(--dm-text-main, #0f172a);">
                    {{ $hospitalizaciones->count() }}
                </h3>
                <small class="text-muted">Estancias e internamientos</small>
            </div>
            <div class="card-footer bg-transparent py-2 border-top d-flex justify-content-between align-items-center">
                <a href="{{ route('paciente.portal.hospitalizaciones') }}" class="font-weight-bold text-danger small">
                    Ver internamientos <i class="fas fa-arrow-right ml-1"></i>
                </a>
            </div>
        </div>
    </div>
</div>

<!-- Dos Secciones: Últimas Consultas y Últimas Recetas -->
<div class="row">
    <!-- Columna Izquierda: Últimas Consultas Médicas -->
    <div class="col-lg-6 mb-4">
        <div class="card shadow-sm border-0 h-100" style="border-radius: 14px; background: var(--dm-bg-card, #ffffff);">
            <div class="card-header bg-transparent py-3 border-bottom d-flex justify-content-between align-items-center">
                <h6 class="mb-0 font-weight-bold text-primary">
                    <i class="fas fa-clipboard2-pulse mr-2"></i> Últimas Consultas Médicas
                </h6>
                <a href="{{ route('paciente.portal.historial') }}" class="btn btn-sm btn-outline-primary font-weight-bold">
                    Ver todas ({{ $historiales->count() }})
                </a>
            </div>
            <div class="card-body p-3">
                @if($historiales->isEmpty())
                    <div class="text-center py-4 text-muted">
                        <i class="fas fa-notes-medical fa-2x mb-2 text-primary opacity-50"></i>
                        <p class="mb-0">No hay consultas médicas registradas aún.</p>
                    </div>
                @else
                    <div class="list-group list-group-flush">
                        @foreach($historiales->take(3) as $cons)
                        <div class="list-group-item px-2 py-3 border-bottom d-flex justify-content-between align-items-center">
                            <div>
                                <div class="font-weight-bold" style="color: var(--dm-text-main, #1e293b);">
                                    {{ \Carbon\Carbon::parse($cons->fecha_visita)->format('d/m/Y') }} - {{ $cons->motivo_consulta ?: 'Consulta General' }}
                                </div>
                                <small class="text-muted d-block">
                                    <i class="fas fa-user-md text-primary mr-1"></i>
                                    {{ $cons->doctor ? 'Dr(a). '.$cons->doctor->nombres.' '.$cons->doctor->apellidos : 'Personal Médico' }}
                                    @if(!empty($cons->diagnostico_cie))
                                        | CIE-10: <b>{{ $cons->diagnostico_cie }}</b>
                                    @endif
                                </small>
                            </div>
                            <div class="btn-group btn-group-sm">
                                <a href="{{ route('paciente.portal.historial.show', $cons->id) }}" class="btn btn-outline-primary" title="Ver Detalle">
                                    <i class="fas fa-eye"></i>
                                </a>
                                <a href="{{ route('paciente.portal.historial.pdf', $cons->id) }}" target="_blank" class="btn btn-outline-success" title="Imprimir PDF">
                                    <i class="fas fa-print"></i>
                                </a>
                            </div>
                        </div>
                        @endforeach
                    </div>
                @endif
            </div>
        </div>
    </div>

    <!-- Columna Derecha: Últimas Recetas Médicas -->
    <div class="col-lg-6 mb-4">
        <div class="card shadow-sm border-0 h-100" style="border-radius: 14px; background: var(--dm-bg-card, #ffffff);">
            <div class="card-header bg-transparent py-3 border-bottom d-flex justify-content-between align-items-center">
                <h6 class="mb-0 font-weight-bold text-success">
                    <i class="fas fa-prescription-bottle-alt mr-2"></i> Últimas Recetas Médicas
                </h6>
                <a href="{{ route('paciente.portal.recetas') }}" class="btn btn-sm btn-outline-success font-weight-bold">
                    Ver todas ({{ $recetas->count() }})
                </a>
            </div>
            <div class="card-body p-3">
                @if($recetas->isEmpty())
                    <div class="text-center py-4 text-muted">
                        <i class="fas fa-pills fa-2x mb-2 text-success opacity-50"></i>
                        <p class="mb-0">No hay recetas médicas registradas aún.</p>
                    </div>
                @else
                    <div class="list-group list-group-flush">
                        @foreach($recetas->take(3) as $rec)
                        <div class="list-group-item px-2 py-3 border-bottom d-flex justify-content-between align-items-center">
                            <div>
                                <div class="font-weight-bold" style="color: var(--dm-text-main, #1e293b);">
                                    Receta #{{ $rec->numero_receta }} ({{ \Carbon\Carbon::parse($rec->fecha)->format('d/m/Y') }})
                                </div>
                                <small class="text-muted d-block">
                                    <i class="fas fa-user-md text-success mr-1"></i>
                                    {{ $rec->doctor ? 'Dr(a). '.$rec->doctor->nombres.' '.$rec->doctor->apellidos : 'Médico General' }}
                                    @if(!empty($rec->diagnostico_cie))
                                        | Dx: <b>{{ $rec->diagnostico_cie }}</b>
                                    @endif
                                </small>
                            </div>
                            <div class="btn-group btn-group-sm">
                                <a href="{{ route('paciente.portal.recetas.show', $rec->id) }}" class="btn btn-outline-primary" title="Ver Receta">
                                    <i class="fas fa-eye"></i>
                                </a>
                                <a href="{{ route('paciente.portal.recetas.pdf', ['id' => $rec->id, 'formato' => 'a5']) }}" target="_blank" class="btn btn-outline-success" title="Imprimir A5">
                                    <i class="fas fa-print"></i> A5
                                </a>
                            </div>
                        </div>
                        @endforeach
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>

<!-- Modal para Reserva de Cita Médica (si el paciente desea reservar) -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" style="border-radius: 14px; overflow: hidden;">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title font-weight-bold" id="exampleModalLabel">
                    <i class="bi bi-calendar-plus mr-1"></i> Reservar Cita Médica
                </h5>
                <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form action="{{ url('/admin/eventos/create') }}" method="POST">
                @csrf
                <div class="modal-body p-4">
                    <div class="form-group">
                        <label for="doctor" class="font-weight-bold">Doctor / Especialidad:</label>
                        <select name="doctor_id" id="doctor" class="form-control" required>
                            <option value="">-- Seleccionar Doctor --</option>
                            @foreach($doctores as $doc)
                                <option value="{{ $doc->id }}">{{ $doc->nombres }} {{ $doc->apellidos }} ({{ $doc->especialidad }})</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="fecha_reserva" class="font-weight-bold">Fecha de Reserva:</label>
                        <input type="date" name="fecha_reserva" id="fecha_reserva" class="form-control" value="{{ date('Y-m-d') }}" min="{{ date('Y-m-d') }}" required>
                    </div>

                    <div class="form-group">
                        <label for="hora_reserva" class="font-weight-bold">Hora:</label>
                        <input type="time" name="hora_reserva" id="hora_reserva" class="form-control" required>
                    </div>

                    <input type="hidden" name="user_id" value="{{ Auth::id() }}">
                </div>
                <div class="modal-footer bg-light">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary font-weight-bold">Registrar Cita</button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection