@extends('layouts.app')

@section('title', 'Crear Asignación')

@section('content')
<div class="container-fluid">
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h4 class="mb-0">Asignar Curso: {{ $curso->nombre }}</h4>
            <a href="{{ route('cursos-virtuales.index') }}" class="btn btn-secondary btn-sm">
                <i class="fa-solid fa-arrow-left"></i> Volver
            </a>
        </div>
        <div class="card-body">
            <form id="formAsignarCurso" method="POST">
                @csrf
                <input type="hidden" name="curso_virtual_id" value="{{ $curso->id }}">
                <div class="row">
                    <div class="col-md-4 mb-3">
                        <label for="colaboradores" class="form-label">Seleccionar Colaboradores *</label>
                        <select name="colaboradores[]" id="colaboradores" class="form-select" multiple required>
                            @foreach($colaboradores as $colaborador)
                                <option value="{{ $colaborador->id }}">
                                    {{ $colaborador->paterno }} {{ $colaborador->nombres }}
                                </option>
                            @endforeach
                        </select>
                        <small class="text-muted">Puedes seleccionar múltiples colaboradores</small>
                        <div id="listaSeleccionados" class="mt-3"></div>
                    </div>

                    <div class="col-md-2 mb-3">
                        <label for="fecha_programada" class="form-label">Fecha Programada *</label>
                        <input type="date" name="fecha_programada" id="fecha_programada" class="form-control" required>
                    </div>

                    <div class="col-md-2 mb-3">
                        <label for="duracion_horas" class="form-label">Duración (Horas) *</label>
                        <input type="number" name="duracion_horas" id="duracion_horas" class="form-control"
                            min="0" max="10" step="0.5" placeholder="Ej: 1.5" required>
                    </div>

                    <div class="col-md-2 mb-3">
                        <label for="fecha_inicio" class="form-label">Fecha Inicio (Opcional)</label>
                        <input type="date" name="fecha_inicio" id="fecha_inicio" class="form-control">
                        <small class="text-muted">Cuándo puede empezar el curso</small>
                    </div>

                    <div class="col-md-2 mb-3">
                        <label for="fecha_fin" class="form-label">Fecha Límite (Opcional)</label>
                        <input type="date" name="fecha_fin" id="fecha_fin" class="form-control">
                        <small class="text-muted">Fecha máxima para completar</small>
                    </div>

                </div>


                <div class="text-end">
                    <button type="submit" class="btn btn-primary">
                        <i class="fa-solid fa-save"></i> Asignar Curso
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('js')
<script>
    $(document).ready(function() {
        $('#colaboradores').select2({
            placeholder: 'Buscar y seleccionar colaboradores...',
            allowClear: true,
            width: '100%'
        });

        //Mostrar los colaboradores seleccionados
        $('#colaboradores').on('change', function() {
            let seleccionados = $(this).select2('data');
            let html = '';
            if (seleccionados.length > 0) {
                html = '<strong>Colaboradores seleccionados (' + seleccionados.length + '):</strong><br>';
                seleccionados.forEach(function(item) {
                    html += '<span class="badge bg-success mb-2" style="display: inline-block;">' + item.text + '</span><br>';
                });
            }
            $('#listaSeleccionados').html(html);
        });
    });

    //Funcion para registrar
    $('#formAsignarCurso').on('submit', function(e) {
        e.preventDefault();
        let formData = $(this).serialize();
        $.ajax({
            url: '{{ route("cursos-asignaciones.store") }}',
            type: 'POST',
            data: formData,
            success: function(response) {
                if (response.success) {
                    Swal.fire({
                        icon: 'success',
                        title: '¡Éxito!',
                        text: response.message,
                        confirmButtonText: 'OK'
                    }).then(() => {
                        window.location.href = '{{ route("cursos-virtuales.index") }}';
                    });
                }
            },
            error: function(xhr) {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Ocurrió un error al asignar el curso',
                });
            }
        });
    });
</script>
@endsection