@extends("profesor.layout.layout")

@section("styles")
    @php
        $titulo = "Tutoriales";
        $modulo = "Tutoriales";
        $vista   = "Tutoriales Profesor";
    @endphp
    <title>{{ getenv("APP_NAME") }} | {{ $titulo }}</title>

    <style>
        /* Estilos personalizados para la tarjeta de tutorial */
        .card-tutorial {
            border-radius: 1rem;
            overflow: hidden;
            box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
        }
        .card-tutorial .card-header {
            background: linear-gradient(135deg, #4e73df 0%, #224abe 100%);
            color: #fff;
            border-bottom: none;
            padding-top: 10px;

        }
    </style>
@endsection

@section("contenido")
    @php
        $videos=[
           [ "titulo"=>"1-Conociendo ColeManager",
             "descripcion"=>"En este tutorial recorreremos las principales funcionalidades de ColeManager para que aproveches al máximo la plataforma.",
             "src"=> "https://drive.google.com/file/d/1YC7mWoiYlMLDmOy55lRpAjYd9DsMJrvZ/preview"
           ],
           [ "titulo"=>"2-Búsqueda y ver estudiante",
             "descripcion"=>"En este tutorial aprenderás a buscar estudiantes y ver sus datos personales, académicos y mas.",
             "src"=> "https://drive.google.com/file/d/1kkzBV5PtgXpb7oWHAZw60CjG1sShrzTv/preview"
           ],
           [ "titulo"=>"3-Manejo de notas con instrumentos",
             "descripcion"=>"Ingreso de notas con instrumentos de evaluación, como exámenes, trabajos cotidianos y más.",
             "src"=> "https://drive.google.com/file/d/1OZijCPsCHF6O9b4F17MUZU0Sg4TLyU0V/preview"
           ],
           [ "titulo"=>"4-Pasar lista asistencia",
             "descripcion"=>"En este tutorial aprenderás a pasar lista de asistencia a tus estudiantes de forma rápida y sencilla.",
             "src"=> "https://drive.google.com/file/d/17B0vacSLsu72-xBfThOFIE4DKYMBQrC1/preview"
           ],
           [ "titulo"=>"5-Reporte de asistencia",
             "descripcion"=>"Como generar un reporte de asistencia de tus estudiantes.",
             "src"=> "https://drive.google.com/file/d/1AWUiTndr_abFoE9aXOrgozKv7RVIxiXk/preview"
           ],
           [ "titulo"=>"6-Maestro de Notas y Cierre de notas",
             "descripcion"=>"Ingreso de notas con el maestro de notas, una herramienta que te permite ingresar notas de forma masiva",
             "src"=> "https://drive.google.com/file/d/1nVmSk6eCID9rp1H_-F9hBtFD4f6Fvxeq/preview"
           ],

           [ "titulo"=>"7-Reporte por condición y actas",
             "descripcion"=>"Generación de reportes por condición de estudiantes y actas de notas.",
             "src"=> "https://drive.google.com/file/d/1OumVDScwlwR9vrcME0j9O9hla_3oDbwS/preview"
           ],
             [ "titulo"=>"8-Bitacoras",
             "descripcion"=>"Generación de bitácoras, listar y exportar",
             "src"=> "https://drive.google.com/file/d/1zcmK85LgmvFlcwo1ZDvwYniz8l80n3eF/preview"
           ],
             [ "titulo"=>"9-Reporte sección e individual",
             "descripcion"=>"Generación de reportes por sección e individual de estudiantes con sus notas y asistencia en los periodos.",
             "src"=> "https://drive.google.com/file/d/10BOjwmZkc0PKc71zlMpmHE213Qpp8ZOd/preview"
           ],
             [ "titulo"=>"10-Otros detalles",
             "descripcion"=>"Tema claro y oscuro, sobre el soporte y más.",
             "src"=> "https://drive.google.com/file/d/1B7Ws56o7sSItSCjVWkwVjAFPtUz3BCe8/preview"
           ],
        ];
    @endphp
    <div class="row my-5">
        @foreach($videos as $video)
            <div class="col-md-6 col-sm-12 mb-4">
                <div class="card card-tutorial h-100">
                    <div class="card-header ">
                        <h4 class="text-white card-title py-2 my-2">{{ $video['titulo'] }}</h4>
                    </div>
                    <div class="card-body p-4">
                        <p class="mb-0 text-dark small card-text">{{ $video['descripcion'] }}</p>
                        <div class="ratio ratio-16x9">
                            <iframe src="{{ $video['src'] }}" allow="encrypted-media" allowfullscreen></iframe>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
@endsection