@extends('layouts.admin')
@section('title', 'Dashboard')

@section('content')
@php
    $totalNews = \App\Models\News::count();
    $totalEvents = \App\Models\Event::count();
    $totalTeachers = \App\Models\Teacher::count();
    $pendingAdmissions = \App\Models\Admission::where('status', 'pendiente')->count();
    $unreadContacts = \App\Models\Contact::where('is_read', false)->count();
    $recentNews = \App\Models\News::latest('published_at')->take(5)->get();
    $upcomingEvents = \App\Models\Event::where('event_date', '>=', now()->toDateString())->orderBy('event_date')->take(5)->get();
@endphp

<div class="row g-4 mb-4">
    <div class="col-md-3 col-sm-6">
        <div class="card card-stat p-3">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <p class="text-muted small mb-1">Noticias</p>
                    <h3 class="fw-bold mb-0" style="color: #3b82f6;">{{ $totalNews }}</h3>
                </div>
                <div class="icon-box bg-primary bg-opacity-10 text-primary"><i class="bi bi-newspaper"></i></div>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-sm-6">
        <div class="card card-stat p-3">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <p class="text-muted small mb-1">Eventos</p>
                    <h3 class="fw-bold mb-0" style="color: #22c55e;">{{ $totalEvents }}</h3>
                </div>
                <div class="icon-box bg-success bg-opacity-10 text-success"><i class="bi bi-calendar-event"></i></div>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-sm-6">
        <div class="card card-stat p-3">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <p class="text-muted small mb-1">Docentes</p>
                    <h3 class="fw-bold mb-0" style="color: #8b5cf6;">{{ $totalTeachers }}</h3>
                </div>
                <div class="icon-box bg-warning bg-opacity-10 text-warning"><i class="bi bi-people"></i></div>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-sm-6">
        <div class="card card-stat p-3">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <p class="text-muted small mb-1">Solicitudes Pendientes</p>
                    <h3 class="fw-bold mb-0" style="color: #ef4444;">{{ $pendingAdmissions }}</h3>
                </div>
                <div class="icon-box bg-danger bg-opacity-10 text-danger"><i class="bi bi-person-plus"></i></div>
            </div>
        </div>
    </div>
</div>

@if ($unreadContacts > 0)
    <div class="alert alert-primary d-flex justify-content-between align-items-center" role="alert">
        <span><i class="bi bi-envelope-fill me-1"></i> Tienes {{ $unreadContacts }} mensaje(s) de contacto sin leer.</span>
        <a href="{{ route('contacts.index') }}" class="btn btn-sm btn-primary">Ver mensajes</a>
    </div>
@endif

<div class="row g-4">
    <div class="col-lg-7">
        <div class="card table-card">
            <div class="card-header bg-white border-bottom d-flex justify-content-between align-items-center py-3">
                <h6 class="fw-bold mb-0">Ultimas Noticias</h6>
                <a href="{{ route('news.index') }}" class="btn btn-sm btn-outline-primary">Ver todas</a>
            </div>
            <div class="table-responsive">
                @if($recentNews->isEmpty())
                    <div class="empty-state">
                        <div class="empty-icon mb-3"><i class="bi bi-newspaper"></i></div>
                        <h6 class="text-muted">No hay noticias publicadas</h6>
                        <a href="{{ route('news.create') }}" class="btn btn-primary btn-sm mt-2">Crear noticia</a>
                    </div>
                @else
                    <table class="table">
                        <thead>
                            <tr><th>Titulo</th><th>Fecha</th><th></th></tr>
                        </thead>
                        <tbody>
                            @foreach($recentNews as $item)
                                <tr>
                                    <td class="fw-semibold">{{ $item->title }}</td>
                                    <td class="text-muted small">{{ $item->published_at?->format('d/m/Y') }}</td>
                                    <td class="text-end">
                                        <a href="{{ route('news.edit', $item) }}" class="btn btn-sm btn-light btn-action"><i class="bi bi-pencil"></i></a>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                @endif
            </div>
        </div>
    </div>

    <div class="col-lg-5">
        <div class="card table-card">
            <div class="card-header bg-white border-bottom d-flex justify-content-between align-items-center py-3">
                <h6 class="fw-bold mb-0">Proximos Eventos</h6>
                <a href="{{ route('events.index') }}" class="btn btn-sm btn-outline-primary">Ver todos</a>
            </div>
            <div class="card-body">
                @if($upcomingEvents->isEmpty())
                    <p class="text-muted small mb-0">No hay eventos proximos.</p>
                @else
                    <ul class="list-unstyled mb-0">
                        @foreach($upcomingEvents as $event)
                            <li class="d-flex gap-3 mb-3">
                                <div class="text-center bg-primary bg-opacity-10 text-primary rounded px-2 py-1" style="min-width:52px;">
                                    <div class="fw-bold" style="font-size:1.1rem;">{{ $event->event_date->format('d') }}</div>
                                    <div class="small text-uppercase">{{ $event->event_date->format('M') }}</div>
                                </div>
                                <div>
                                    <div class="fw-semibold">{{ $event->title }}</div>
                                    <small class="text-muted">{{ $event->location ?: '' }}</small>
                                </div>
                            </li>
                        @endforeach
                    </ul>
                @endif
            </div>
        </div>

        <div class="card table-card mt-4">
            <div class="card-header bg-white border-bottom py-3">
                <h6 class="fw-bold mb-0">Accesos Rapidos</h6>
            </div>
            <div class="card-body">
                <a href="{{ route('news.create') }}" class="btn btn-primary w-100 mb-2"><i class="bi bi-plus-lg me-1"></i> Nueva Noticia</a>
                <a href="{{ route('events.create') }}" class="btn btn-outline-secondary w-100 mb-2"><i class="bi bi-plus-lg me-1"></i> Nuevo Evento</a>
                <a href="{{ route('settings.edit') }}" class="btn btn-outline-secondary w-100"><i class="bi bi-gear me-1"></i> Configuracion</a>
            </div>
        </div>
    </div>
</div>
@endsection