@extends('layouts.master')

@section('title', 'Detalle del Curso')

@section('content')
<style>
    .recurso-item {
        transition: all 0.2s ease;
        background: #fff;
        border-radius: 10px;
    }

    .recurso-item:hover {
        background: #f5f7fa;
    }

    .recurso-icon {
        width: 26px;
        text-align: center;
        font-size: 16px;
    }

    .btn-aula {
        font-size: 11px;
        padding: 3px 10px;
        border-radius: 15px;
    }

    .titulo-seccion {
        font-size: 13px;
        color: #6c757d;
        font-weight: 600;
    }
    .d-flex>.btn {
    flex: 0;
}
</style>

<div class="container mt-4">

    <h3 class="fw-bold text-primary mb-4">
        <i class="bi bi-journal-text me-2"></i>
        {{ $curso->nombre }}
    </h3>

    @forelse($sesiones as $sesion)

    <div class="card shadow-sm border-0 rounded-4 mb-4">

        <!-- HEADER -->
        <div class="card-body border-bottom d-flex justify-content-between align-items-center">

            <div>
                <h5 class="mb-1 fw-semibold">{{ $sesion->nombre }}</h5>
                <small class="text-muted">
                    <i class="bi bi-calendar me-1"></i>
                    {{ \Carbon\Carbon::parse($sesion->fecha)->format('d/m/Y') }}
                </small>
            </div>

            <span class="badge {{ $sesion->activo ? 'bg-success' : 'bg-secondary' }}">
                {{ $sesion->activo ? 'Activa' : 'Inactiva' }}
            </span>

        </div>

        <div class="card-body">

            <!-- 🎥 VIDEOS -->
            <div class="mb-4">

                <div class="titulo-seccion mb-2">
                    <i class="bi bi-play-circle me-1"></i> Videos de la sesión
                </div>

                @if($sesion->archivos->where('tipo','video')->isEmpty())
                    <p class="text-muted small">No hay videos disponibles.</p>
                @else

                    @foreach($sesion->archivos->where('tipo','video') as $video)

                    <div class="d-flex justify-content-between align-items-center px-3 py-2 mb-2 border recurso-item">

                        <!-- IZQUIERDA -->
                        <div class="d-flex align-items-center gap-2">
                            <div class="recurso-icon">
                                <i class="bi bi-play-btn-fill text-danger"></i>
                            </div>
                            <span class="small">{{ $video->nombre }}</span>
                        </div>

                        <!-- BOTÓN PEQUEÑO -->
                        <a href="{{ $video->ruta }}"
                           target="_blank"
                           class="btn btn-outline-primary btn-aula">
                            Abrir
                        </a>

                    </div>

                    @endforeach

                @endif

            </div>

            <!-- 📂 ARCHIVOS -->
            <div>

                <div class="titulo-seccion mb-2">
                    <i class="bi bi-folder me-1"></i> Material de la sesión
                </div>

                @if($sesion->archivos->where('tipo','archivo')->isEmpty())
                    <p class="text-muted small">No hay archivos disponibles.</p>
                @else

                    @foreach($sesion->archivos->where('tipo','archivo') as $archivo)

                    <div class="d-flex justify-content-between align-items-center px-3 py-2 mb-2 border recurso-item">

                        <!-- IZQUIERDA -->
                        <div class="d-flex align-items-center gap-2">
                            <div class="recurso-icon">
                                <i class="bi bi-file-earmark-pdf text-danger"></i>
                            </div>
                            <span class="small">{{ $archivo->nombre }}</span>
                        </div>

                        <!-- BOTÓN PEQUEÑO -->
                       <a href="{{ asset($archivo->ruta) }}"
                        target="_blank"
                        class="btn btn-outline-secondary btn-aula">
                            Descargar
                        </a>

                    </div>

                    @endforeach

                @endif

            </div>

        </div>

    </div>

    @empty
    <div class="alert alert-info">
        No hay sesiones registradas aún.
    </div>
    @endforelse

</div>
@endsection