@extends('layouts.admin')

@section('content')
<div class="pt-3 pb-2 mb-3 border-bottom d-flex flex-column flex-sm-row justify-content-between align-items-sm-center gap-3">
    <div>
        <h1 class="h2 fw-bold text-dark">Catálogo Académico de Cursos</h1>
        <p class="text-muted mb-0">Crea, edita y administra los programas de especialización y diplomados de la plataforma.</p>
    </div>
    <div>
        <a href="{{ route('admin.courses.create') }}" class="btn btn-primary fw-bold shadow-sm rounded-pill px-4">
            <i class="bi bi-plus-lg me-1"></i> Crear Nuevo Curso
        </a>
    </div>
</div>

<!-- Alertas informativas de Éxito o Error -->
@if(session('success'))
    <div class="alert alert-success border-0 shadow-sm mb-4 d-flex align-items-center">
        <i class="bi bi-check-circle-fill me-2 fs-5"></i>
        <div>{{ session('success') }}</div>
    </div>
@endif

<!-- TARJETAS DE ESTADÍSTICAS RÁPIDAS (ESTILO DASHBOARD) -->
<div class="row g-3 mb-4">
    <div class="col-6 col-lg-3">
        <div class="card border-0 shadow-sm p-3 bg-white rounded-3">
            <div class="d-flex align-items-center justify-content-between">
                <div>
                    <span class="text-muted small fw-semibold d-block">Total Programas</span>
                    <h3 class="fw-bold text-dark mb-0 mt-1">{{ $courses->count() }}</h3>
                </div>
                <div class="p-3 bg-primary-subtle text-primary rounded-3 fs-4">
                    <i class="bi bi-journal-bookmark-fill"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="card border-0 shadow-sm p-3 bg-white rounded-3">
            <div class="d-flex align-items-center justify-content-between">
                <div>
                    <span class="text-muted small fw-semibold d-block">Programas Gratis</span>
                    <h3 class="fw-bold text-success mb-0 mt-1">{{ $courses->where('price_clp', 0)->count() }}</h3>
                </div>
                <div class="p-3 bg-success-subtle text-success rounded-3 fs-4">
                    <i class="bi bi-gift-fill"></i>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- TABLA PRINCIPAL DE CURSOS -->
<div class="card border-0 shadow-sm rounded-3 overflow-hidden">
    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
            <thead class="table-light text-secondary small text-uppercase">
                <tr>
                    <th class="ps-4" style="width: 80px;">Portada</th>
                    <th>Detalles del Programa</th>
                    <th>Categoría</th>
                    <th>Arancel (CLP)</th>
                    <th>Internacional</th>
                    <th class="text-end pe-4" style="width: 180px;">Acciones</th>
                </tr>
            </thead>
            <tbody>
                @forelse($courses as $course)
                    <tr>
                        <!-- Columna: Imagen miniatura -->
                        <td class="ps-4">
                            @if($course->image_path)
                                <img src="{{ asset('storage/' . $course->image_path) }}" alt="{{ $course->title }}" class="rounded border" style="width: 50px; height: 50px; object-fit: cover;">
                            @else
                                <div class="rounded border bg-light d-flex align-items-center justify-content-center text-muted" style="width: 50px; height: 50px;">
                                    <i class="bi bi-image" style="font-size: 1.2rem;"></i>
                                </div>
                            @endif
                        </td>

                        <!-- Columna: Título y sumario -->
                        <td>
                            <div class="fw-bold text-dark mb-1" style="font-size: 0.95rem;">{{ $course->title }}</div>
                            <small class="text-muted text-truncate d-block" style="max-width: 320px;">{{ $course->summary }}</small>
                        </td>

                        <!-- Columna: Tipo de curso -->
                        <td>
                            <span class="badge bg-light text-primary border border-primary-subtle px-2 py-1">
                                {{ $course->type->name ?? 'Sin asignar' }}
                            </span>
                        </td>

                        <!-- Columna: Precio CLP -->
                        <td>
                            @if($course->price_clp == 0)
                                <span class="badge bg-success text-white px-2 py-1 fw-bold">Gratuito ($0)</span>
                            @else
                                <span class="fw-semibold text-dark">${{ number_format($course->price_clp, 0, ',', '.') }}</span>
                            @endif
                        </td>

                        <!-- Columna: Precio USD -->
                        <td>
                            <span class="text-secondary small">${{ number_format($course->price_usd, 2) }} USD</span>
                        </td>

                        <!-- Columna: Botonera de Acciones Integradas -->
                        <td class="text-end pe-4">
                            <div class="btn-group shadow-sm" role="group">
                                
                                <a href="{{ route('admin.courses.contents.index', $course->id) }}" 
                                class="btn btn-primary d-inline-flex align-items-center justify-content-center px-3 fw-bold" 
                                style="min-width: 110px;"
                                title="Administrar Temario / Clases">
                                    <i class="bi bi-folder-plus me-2"></i> <span>Temario</span>
                                </a>

                                <a href="{{ route('admin.courses.edit', $course->id) }}" 
                                class="btn btn-warning d-inline-flex align-items-center justify-content-center px-3 fw-bold text-dark" 
                                style="min-width: 110px;"
                                title="Editar Información">
                                    <i class="bi bi-pencil-square me-2"></i> <span>Editar</span>
                                </a>

                                <form action="{{ route('admin.courses.destroy', $course->id) }}" 
                                    method="POST" 
                                    class="d-inline" 
                                    onsubmit="return confirm('¿Estás completamente seguro de eliminar el curso «{{ $course->title }}»?');">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" 
                                            class="btn btn-danger h-100 d-inline-flex align-items-center justify-content-center px-3 fw-bold" 
                                            style="min-width: 110px; border-top-left-radius: 0; border-bottom-left-radius: 0;" 
                                            title="Eliminar Programa">
                                        <i class="bi bi-trash me-2"></i> <span>Eliminar</span>
                                    </button>
                                </form>
                                
                            </div>
                        </td>             
         </tr>
                @empty
                    <!-- Estado de contingencia si no hay registros -->
                    <tr>
                        <td colspan="6" class="text-center py-5 text-muted">
                            <i class="bi bi-journal-x display-4 text-black-50 mb-3 d-block"></i>
                            <h5 class="fw-bold text-dark">No hay cursos registrados en el catálogo</h5>
                            <p class="small text-secondary mb-3 px-5">Comienza creando tu primer programa académico para que los alumnos puedan visualizarlo en la vitrina comercial.</p>
                            <a href="{{ route('admin.courses.create') }}" class="btn btn-sm btn-primary fw-bold px-3 rounded-pill">
                                <i class="bi bi-plus-lg me-1"></i> Crear mi primer curso
                            </a>
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

<!-- Sistema de Paginación comercial inferior de Laravel -->
<div class="mt-4 d-flex justify-content-center">
    {{ $courses->links() }}
</div>
@endsection