@extends("profesor.layout.layout")
@section("styles")
    @php
        $titulo = "Bitácora nueva";
        $modulo = "Bitácora";
        $vista="Nueva bitácora";
    @endphp
    <title>{{getenv("APP_NAME")}} | {{$titulo}}</title>
@endsection
@section("contenido")
    <div class="row gx-5 gx-xl-10 align-items-stretch">
        @if ($errors->any())
            <div class="alert alert-danger">
                <h5 class="mb-2 fw-bold">Se encontraron los siguientes errores:</h5>
                <ul class="mb-0 ps-3">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif


        <form action="{{ route('profesor::bitacora.store') }}" method="POST" enctype="multipart/form-data" class="p-4 rounded shadow-sm bg-white">
            @csrf
            <div class="row mb-3">
                <div class="col-md-4">
                    <label for="periodo_id" class="form-label fw-semibold required">Periodo</label>
                    <select name="periodo_id" id="periodo_id" class="form-select" required>
                        <option value="">-</option>
                        @foreach($periodos as $periodo)
                            <option value="{{ $periodo->id }}">{{ $periodo->periodo }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-4">
                    <label for="grupo_id" class="form-label fw-semibold">Grupo</label>
                    <select name="grupo_id" id="grupo_id" class="form-select" required>
                        <option value="">Seleccione periodo</option>
                    </select>
                </div>

                <div class="col-md-4">
                    <label for="modulo_id" class="form-label fw-semibold">Modulo</label>
                    <select name="modulo_id" id="modulo_id" class="form-select" required>
                        <option value="">Seleccione grupo</option>
                    </select>
                </div>
            </div>


            <div class="row my-2">
                <div class="col-md-4">
                    <label for="fecha" class="form-label fw-semibold ">Fecha</label>
                    <input type="date" name="fecha" id="fecha" class="form-control" value="{{ date('Y-m-d') }}" required>
                </div>
            </div>

            <div class="mb-3">
                <label for="bitacora" class="form-label fw-semibold">Contenido</label>
                <textarea name="bitacora" id="bitacora" rows="5" class="form-control" maxlength="2000" placeholder="Escriba aquí el contenido de la bitácora..." required></textarea>
                <div class="form-text text-end"><span id="charCount">0</span>/2000 caracteres</div>
            </div>

            <div class="row my-2">
                <div class="col-md-4">
                    <label for="recordatorio" class="form-label fw-semibold">Fecha de recordatorio (opcional)</label>
                    <input type="date" name="recordatorio" id="recordatorio" class="form-control">
                </div>

                <div class="col-md-4">
                    <label for="archivo" class="form-label fw-semibold">Adjuntar archivo (opcional)</label>
                    <input type="file" name="archivo" id="archivo" class="form-control" accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.png,.jpeg">
                    <small class="form-text text-muted">Formatos permitidos: PDF, Word, Excel, Imágenes (Max 10MB)</small>
                </div>
            </div>

            <div class="text-end">
                <button type="submit" class="btn btn-primary">
                    <i class="bi bi-save me-1"></i> Guardar
                </button>
            </div>
        </form>



    </div>


@endsection

@section("scripts")
    <script>
        document.getElementById('bitacora').addEventListener('input', function () {
            document.getElementById('charCount').textContent = this.value.length;
        });


        $(document).ready(function () {
            $('#periodo_id').on('change', function () {
                let periodo = $(this).val();
                let url="{{ route('profesor::periodo.getMisGrupos', ['periodo' => ':periodo']) }}".replace(":periodo", periodo);
                $.ajax({
                    url: url,
                    type: 'GET',
                    success: function (response) {
                        $('#grupo_id').empty();
                        $('#modulo_id').empty();
                        $('#grupo_id').append('<option value="">-</option>');
                        $.each(response, function (index, grupo) {
                            $('#grupo_id').append('<option value="' + grupo.id + '">' + grupo.grupo + '</option>');
                        });
                    },
                    error: function (error) {
                        console.log(error);
                    }
                });

            });
            $('#grupo_id').on('change', function () {
                let grupo_id = $(this).val();
                $('#modulo_id').empty();
                if (grupo_id !== "") {
                    let url = "{{ route('profesor::grupo.getMisAsignaturas', ['grupo' => ':grupo']) }}".replace(":grupo", grupo_id);
                    $.ajax({
                        url: url,
                        type: 'GET',
                        success: function (response) {

                            $.each(response, function (index, modulo) {
                                $('#modulo_id').append('<option value="' + modulo.id + '">' + modulo.modulo + '</option>');
                            });

                        },
                        error: function (error) {
                            console.log(error);
                        }
                    });
                }
            });
        });
    </script>
@endsection