@extends('layouts.app')

@section('title', 'Importar Usuarios - SICA')
@section('page-icon')
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 3v4a1 1 0 0 0 1 1h4"/><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"/><path d="M12 11v6"/><path d="M9 14l3 -3l3 3"/></svg>
@endsection
@section('page-title', 'Importar Usuarios')

@push('styles')
<style>
    .page-body > .container-xl { max-width: 95%; }
</style>
@endpush

@section('page-actions')
<div class="d-flex gap-2 flex-wrap">
    <input type="date" class="form-control" id="filter-date" style="width: 160px;" title="Filtrar por fecha">
    <select class="form-select" id="select-import" style="min-width: 280px;">
        <option value="">Seleccionar importacion...</option>
    </select>
    <button class="btn btn-primary" id="btn-upload">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2"/><path d="M7 9l5 -5l5 5"/><path d="M12 4l0 12"/></svg>
        Subir archivo
    </button>
    <button class="btn btn-success d-none" id="btn-process">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M5 12l5 5l10 -10"/></svg>
        Procesar validos
    </button>
    <span class="badge bg-green-lt fs-5 d-none align-self-center" id="badge-processed"></span>
    <input type="file" id="file-input" accept=".xlsx,.xls,.csv" class="d-none">
</div>
@endsection

@section('content')
{{-- Stats --}}
<div class="row mb-3" id="import-stats" style="display: none;">
    <div class="col-6 col-md-4 col-lg-2">
        <div class="card card-sm">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <span class="bg-primary text-white stamp me-3">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 3v4a1 1 0 0 0 1 1h4"/><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"/><path d="M12 11v6"/><path d="M9 14l3 -3l3 3"/></svg>
                    </span>
                    <div>
                        <div class="text-secondary">Total</div>
                        <div class="h3 m-0" id="stat-total">0</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-4 col-lg-2">
        <div class="card card-sm">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <span class="bg-success text-white stamp me-3">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M5 12l5 5l10 -10"/></svg>
                    </span>
                    <div>
                        <div class="text-secondary">Validos</div>
                        <div class="h3 m-0 text-success" id="stat-valid">0</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-4 col-lg-2">
        <div class="card card-sm">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <span class="bg-danger text-white stamp me-3">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 6l-12 12"/><path d="M6 6l12 12"/></svg>
                    </span>
                    <div>
                        <div class="text-secondary">Invalidos</div>
                        <div class="h3 m-0 text-danger" id="stat-invalid">0</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- DataTable --}}
<div class="card">
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-vcenter card-table" id="import-table" style="width:100%">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>CURP</th>
                        <th>Nombre(s)</th>
                        <th>Ap. Paterno</th>
                        <th>Ap. Materno</th>
                        <th>Correo</th>
                        <th>Telefono</th>
                        <th>Nivel</th>
                        <th>Estado</th>
                        <th>Usuario en Moodle</th>
                        <th>Inscripcion</th>
                        <th>Grupo</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>
{{-- Modal procesar y enviar a Moodle --}}
<div class="modal modal-blur fade" id="modal-process" tabindex="-1">
    <div class="modal-dialog modal-lg modal-fullscreen-sm-down">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Procesar y enviar a Moodle</h5>
                <button type="button" class="btn-close" id="btn-close-process" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                {{-- Seccion: Formulario de opciones --}}
                <div id="process-form-section">
                    <p class="text-secondary">
                        Se procesaran <strong id="modal-valid-count">0</strong> registros validos.
                        Los CURP existentes se actualizaran. Los nuevos se enviaran a Moodle.
                    </p>
                    <div class="mb-3">
                        <label class="form-label required">Conexion Moodle</label>
                        <select name="moodle_connection_id" id="select-moodle" class="form-select" required>
                            <option value="">Seleccionar conexion...</option>
                            @foreach($connections as $conn)
                                <option value="{{ $conn->id }}">{{ $conn->name }}</option>
                            @endforeach
                        </select>
                        <div class="invalid-feedback"></div>
                    </div>
                    <div class="mb-3" id="course-container" style="display:none;">
                        <label class="form-label">Inscribir en curso (opcional)</label>
                        <select name="moodle_course_id" id="select-course" class="form-select">
                            <option value="">Sin inscripcion a curso</option>
                        </select>
                    </div>
                    <div id="groups-section" style="display:none;">
                        <div class="mb-2">
                            <label class="form-check">
                                <input type="checkbox" class="form-check-input" id="check-use-groups">
                                <span class="form-check-label">Inscribir por grupos <span class="text-secondary small">(basado en Nivel)</span></span>
                            </label>
                        </div>
                        <div id="groups-container" style="display:none;">
                            <div class="table-responsive">
                                <table class="table table-vcenter" id="groups-table">
                                    <thead>
                                        <tr>
                                            <th>Nivel</th>
                                            <th>Total alumnos</th>
                                            <th>Alumnos por grupo</th>
                                            <th>Grupos a crear</th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                            <small class="form-hint">Se crearan grupos "{Nivel} - Grupo N" en Moodle y se asignaran los alumnos segun su nivel.</small>
                        </div>
                        <div class="mb-2 mt-2">
                            <label class="form-check">
                                <input type="checkbox" class="form-check-input" id="check-use-general-groups">
                                <span class="form-check-label">Generar grupos generales <span class="text-secondary small">(sin distincion de nivel)</span></span>
                            </label>
                        </div>
                        <div id="general-groups-container" style="display:none;">
                            <div class="d-flex align-items-end gap-3 mb-1">
                                <div>
                                    <label class="form-label mb-1 small">Alumnos por grupo</label>
                                    <input type="number" class="form-control form-control-sm" id="input-general-group-size" min="1" value="30" style="width:100px;">
                                </div>
                                <div class="text-secondary small pb-2">
                                    → <strong id="general-groups-count">0</strong> grupo(s)
                                </div>
                            </div>
                            <small class="form-hint">Se crearan grupos "Grupo 1", "Grupo 2", etc. con todos los alumnos independientemente del nivel.</small>
                        </div>
                    </div>
                </div>

                {{-- Seccion: Progreso (oculta inicialmente) --}}
                <div id="process-progress-section" style="display:none;">
                    <div class="mb-3">
                        <div class="d-flex justify-content-between mb-1">
                            <span id="progress-label">Procesando...</span>
                            <span id="progress-counter">0 / 0</span>
                        </div>
                        <div class="progress">
                            <div class="progress-bar" id="progress-bar" role="progressbar" style="width: 0%"></div>
                        </div>
                    </div>
                    <div class="mb-2">
                        <small class="text-secondary" id="progress-current"></small>
                    </div>
                    <div id="progress-log" class="border rounded p-2" style="max-height:250px;overflow-y:auto;font-size:0.85em;background:#f8f9fa;">
                    </div>
                </div>

                {{-- Seccion: Resultado (oculta inicialmente) --}}
                <div id="process-result-section" style="display:none;">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn me-2" id="btn-cancel-process" data-bs-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-success" id="btn-process-confirm">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M5 12l5 5l10 -10"/></svg>
                    Procesar y enviar
                </button>
                <button type="button" class="btn btn-primary d-none" id="btn-close-result" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    var importsDataUrl = "{{ route('imports.users.data') }}";
    var importsListUrl = "{{ route('imports.users.list') }}";
    var importsUploadUrl = "{{ route('imports.users.upload') }}";
    var importsProcessBaseUrl = "{{ url('imports/users') }}";
    var moodleCoursesUrl = "{{ route('imports.users.moodle-courses') }}";
    var importsNivelStatsBaseUrl = "{{ url('imports/users') }}";
</script>
<script src="{{ asset('js/imports/users.js') }}?v={{ filemtime(public_path('js/imports/users.js')) }}"></script>
@endpush