@extends('layouts.app')

@section('title', $teacher->curp . ' - Profesores - 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 stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0"/><path d="M6 21v-2a4 4 0 0 1 4 -4h3.5"/><path d="M17.8 20.817l-2.172 1.138a.392 .392 0 0 1 -.568 -.41l.415 -2.411l-1.757 -1.707a.389 .389 0 0 1 .217 -.665l2.428 -.352l1.086 -2.193a.392 .392 0 0 1 .702 0l1.086 2.193l2.428 .352a.39 .39 0 0 1 .217 .665l-1.757 1.707l.414 2.41a.39 .39 0 0 1 -.567 .411l-2.172 -1.138z"/></svg>
@endsection
@section('page-title')
    <a href="{{ route('teachers.index') }}" class="text-decoration-none text-secondary">Profesores</a>
    <span class="mx-2 text-secondary">/</span>
    {{ $teacher->curp }}
@endsection

@push('styles')
<style>
    .page-body > .container-xl { max-width: 95%; }
    .photo-preview { width: 150px; height: 150px; object-fit: cover; border-radius: 8px; border: 2px solid #e6e7e9; }
    .photo-placeholder { width: 150px; height: 150px; border-radius: 8px; border: 2px dashed #e6e7e9; display: flex; align-items: center; justify-content: center; color: #a0a4a8; }
</style>
@endpush

@section('content')
<div class="row">
    {{-- Columna izquierda: Foto --}}
    <div class="col-md-3 col-lg-2 mb-3">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Fotografia</h3>
            </div>
            <div class="card-body text-center">
                <div class="mb-3" id="photo-container">
                    @if($teacher->photo)
                        <img src="{{ \Illuminate\Support\Facades\Storage::disk('s3')->url($teacher->photo) }}" class="photo-preview" id="photo-img" alt="Foto">
                    @else
                        <div class="photo-placeholder mx-auto" id="photo-placeholder">
                            <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0"/><path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"/></svg>
                        </div>
                    @endif
                </div>
                <input type="file" id="input-photo" accept="image/*" class="d-none">
                <button class="btn btn-sm btn-outline-primary w-100 mb-2" id="btn-upload-photo">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><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 foto
                </button>
                <button class="btn btn-sm btn-outline-danger w-100 {{ $teacher->photo ? '' : 'd-none' }}" id="btn-delete-photo">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7l16 0"/><path d="M10 11l0 6"/><path d="M14 11l0 6"/><path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"/><path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"/></svg>
                    Eliminar
                </button>
            </div>
        </div>
    </div>

    {{-- Columna derecha: Pestanas --}}
    <div class="col-md-9 col-lg-10">
        <div class="card">
            <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs" data-bs-toggle="tabs" role="tablist">
                    <li class="nav-item" role="presentation">
                        <a href="#tab-general" class="nav-link active" data-bs-toggle="tab" role="tab" aria-selected="true">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon me-1"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0"/><path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"/></svg>
                            Datos Generales
                        </a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a href="#tab-fiscal" class="nav-link" data-bs-toggle="tab" role="tab">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon me-1"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><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="M9 7l1 0"/><path d="M9 13l6 0"/><path d="M13 17l2 0"/></svg>
                            Datos Fiscales
                        </a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a href="#tab-bank" class="nav-link" data-bs-toggle="tab" role="tab">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon me-1"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 21l18 0"/><path d="M3 10l18 0"/><path d="M5 6l7 -3l7 3"/><path d="M4 10l0 11"/><path d="M20 10l0 11"/><path d="M8 14l0 3"/><path d="M12 14l0 3"/><path d="M16 14l0 3"/></svg>
                            Datos Bancarios
                        </a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a href="#tab-documents" class="nav-link" data-bs-toggle="tab" role="tab">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon me-1"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><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"/></svg>
                            Documentos
                            @if($teacher->documents->count())
                                <span class="badge bg-blue-lt ms-1">{{ $teacher->documents->count() }}</span>
                            @endif
                        </a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a href="#tab-emails" class="nav-link" data-bs-toggle="tab" role="tab">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon me-1"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10z"/><path d="M3 7l9 6l9 -6"/></svg>
                            Correos
                            @if($teacher->emails->count())
                                <span class="badge bg-cyan-lt ms-1">{{ $teacher->emails->count() }}</span>
                            @endif
                        </a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a href="#tab-moodle" class="nav-link" data-bs-toggle="tab" role="tab">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon me-1"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"/><path d="M3.6 9h16.8"/><path d="M3.6 15h16.8"/><path d="M11.5 3a17 17 0 0 0 0 18"/><path d="M12.5 3a17 17 0 0 1 0 18"/></svg>
                            Moodle
                            @if($teacher->moodleConnections->count())
                                <span class="badge bg-green-lt ms-1">{{ $teacher->moodleConnections->count() }}</span>
                            @endif
                        </a>
                    </li>
                </ul>
            </div>

            <form id="form-teacher">
            <div class="tab-content">
                    {{-- Tab: Datos Generales --}}
                    <div class="tab-pane active show" id="tab-general" role="tabpanel">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-2 mb-3">
                                    <label class="form-label">Prefijo</label>
                                    <select name="prefix" class="form-select">
                                        <option value="">Sin prefijo</option>
                                        @foreach(['Mtro.','Mtra.','Lic.','Ing.','Dr.','Dra.','C.','Prof.'] as $p)
                                            <option value="{{ $p }}" {{ $teacher->prefix === $p ? 'selected' : '' }}>{{ $p }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-2 mb-3">
                                    <label class="form-label">CURP</label>
                                    <input type="text" class="form-control" value="{{ $teacher->curp }}" readonly disabled>
                                </div>
                                <div class="col-md-3 mb-3">
                                    <label class="form-label required">Nombre(s)</label>
                                    <input type="text" name="nombre" class="form-control" value="{{ $teacher->nombre }}" required>
                                    <div class="invalid-feedback"></div>
                                </div>
                                <div class="col-md-3 mb-3">
                                    <label class="form-label required">Apellido Paterno</label>
                                    <input type="text" name="apellido_paterno" class="form-control" value="{{ $teacher->apellido_paterno }}" required>
                                    <div class="invalid-feedback"></div>
                                </div>
                                <div class="col-md-2 mb-3">
                                    <label class="form-label">Apellido Materno</label>
                                    <input type="text" name="apellido_materno" class="form-control" value="{{ $teacher->apellido_materno }}">
                                    <div class="invalid-feedback"></div>
                                </div>
                                <div class="col-md-3 mb-3">
                                    <label class="form-label required">Correo</label>
                                    <input type="email" name="correo" class="form-control" value="{{ $teacher->correo }}" required>
                                    <div class="invalid-feedback"></div>
                                </div>
                                <div class="col-md-2 mb-3">
                                    <label class="form-label required">Telefono</label>
                                    <input type="text" name="telefono" class="form-control" value="{{ $teacher->telefono }}" required maxlength="10">
                                    <div class="invalid-feedback"></div>
                                </div>
                                <div class="col-md-2 mb-3">
                                    <label class="form-label">Nivel</label>
                                    <input type="text" name="nivel" class="form-control" value="{{ $teacher->nivel }}">
                                    <div class="invalid-feedback"></div>
                                </div>
                                <div class="col-md-3 mb-3">
                                    <label class="form-label">Especialidad</label>
                                    <input type="text" name="especialidad" class="form-control" value="{{ $teacher->especialidad }}">
                                    <div class="invalid-feedback"></div>
                                </div>
                                <div class="col-md-2 mb-3">
                                    <label class="form-label">Password Moodle</label>
                                    <input type="text" class="form-control" value="{{ $teacher->moodle_password }}" readonly disabled>
                                </div>
                                <div class="col-md-2 mb-3">
                                    <label class="form-label">Fecha de Nacimiento</label>
                                    <input type="date" name="birth_date" class="form-control" value="{{ $teacher->birth_date ? $teacher->birth_date->format('Y-m-d') : '' }}">
                                    <div class="invalid-feedback"></div>
                                </div>
                                <div class="col-md-2 mb-3">
                                    <label class="form-label">Genero</label>
                                    <select name="gender" class="form-select">
                                        <option value="">—</option>
                                        <option value="M" {{ $teacher->gender === 'M' ? 'selected' : '' }}>Masculino</option>
                                        <option value="F" {{ $teacher->gender === 'F' ? 'selected' : '' }}>Femenino</option>
                                    </select>
                                    <div class="invalid-feedback"></div>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer text-end">
                            <a href="{{ route('teachers.index') }}" class="btn me-2">Volver al listado</a>
                            <button type="submit" class="btn btn-success btn-form-save">
                                <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>
                                Guardar cambios
                            </button>
                        </div>
                    </div>

                    {{-- Tab: Datos Fiscales --}}
                    <div class="tab-pane" id="tab-fiscal" role="tabpanel">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-3 mb-3">
                                    <label class="form-label">RFC</label>
                                    <input type="text" name="rfc" class="form-control" value="{{ $teacher->rfc }}" maxlength="13" style="text-transform:uppercase;">
                                    <div class="invalid-feedback"></div>
                                </div>
                                <div class="col-md-3 mb-3">
                                    <label class="form-label">Razon Social</label>
                                    <input type="text" name="razon_social" class="form-control" value="{{ $teacher->razon_social }}">
                                    <div class="invalid-feedback"></div>
                                </div>
                                <div class="col-md-2 mb-3">
                                    <label class="form-label">Codigo Postal</label>
                                    <input type="text" name="fiscal_cp" class="form-control" value="{{ $teacher->fiscal_cp }}" maxlength="5">
                                    <div class="invalid-feedback"></div>
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label class="form-label">Regimen Fiscal</label>
                                    <input type="text" name="regimen_fiscal" class="form-control" value="{{ $teacher->regimen_fiscal }}">
                                    <div class="invalid-feedback"></div>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer text-end">
                            <a href="{{ route('teachers.index') }}" class="btn me-2">Volver al listado</a>
                            <button type="submit" class="btn btn-success btn-form-save">
                                <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>
                                Guardar cambios
                            </button>
                        </div>
                    </div>

                    {{-- Tab: Datos Bancarios --}}
                    <div class="tab-pane" id="tab-bank" role="tabpanel">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-3 mb-3">
                                    <label class="form-label">Banco</label>
                                    <input type="text" name="banco" class="form-control" value="{{ $teacher->banco }}">
                                    <div class="invalid-feedback"></div>
                                </div>
                                <div class="col-md-3 mb-3">
                                    <label class="form-label">Cuenta</label>
                                    <input type="text" name="cuenta" class="form-control" value="{{ $teacher->cuenta }}" maxlength="20">
                                    <div class="invalid-feedback"></div>
                                </div>
                                <div class="col-md-3 mb-3">
                                    <label class="form-label">CLABE</label>
                                    <input type="text" name="clabe" class="form-control" value="{{ $teacher->clabe }}" maxlength="18">
                                    <div class="invalid-feedback"></div>
                                </div>
                                <div class="col-md-3 mb-3">
                                    <label class="form-label">Tarjeta</label>
                                    <input type="text" name="tarjeta" class="form-control" value="{{ $teacher->tarjeta }}" maxlength="20">
                                    <div class="invalid-feedback"></div>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer text-end">
                            <a href="{{ route('teachers.index') }}" class="btn me-2">Volver al listado</a>
                            <button type="submit" class="btn btn-success btn-form-save">
                                <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>
                                Guardar cambios
                            </button>
                        </div>
                    </div>

                {{-- Tab: Documentos --}}
                <div class="tab-pane" id="tab-documents" role="tabpanel">
                    <div class="card-body">
                        <div class="d-flex justify-content-end mb-3">
                            <button type="button" class="btn btn-sm btn-primary" id="btn-add-document">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 5l0 14"/><path d="M5 12l14 0"/></svg>
                                Agregar documento
                            </button>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-vcenter" id="documents-table">
                                <thead>
                                    <tr>
                                        <th>Tipo</th>
                                        <th>Archivo</th>
                                        <th>Fecha</th>
                                        <th class="w-1"></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($teacher->documents as $doc)
                                    <tr id="doc-row-{{ $doc->id }}">
                                        <td><span class="badge bg-azure-lt">{{ $doc->type }}</span></td>
                                        <td>{{ $doc->original_name }}</td>
                                        <td><small class="text-secondary">{{ $doc->created_at->format('d/m/Y H:i') }}</small></td>
                                        <td>
                                            <div class="btn-list flex-nowrap">
                                                <a href="{{ route('teachers.documents.download', $doc) }}" class="btn btn-sm btn-outline-primary" title="Descargar">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2"/><path d="M7 11l5 5l5 -5"/><path d="M12 4l0 12"/></svg>
                                                </a>
                                                <button type="button" class="btn btn-sm btn-outline-danger btn-delete-doc" data-id="{{ $doc->id }}" title="Eliminar">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7l16 0"/><path d="M10 11l0 6"/><path d="M14 11l0 6"/><path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"/><path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"/></svg>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    @empty
                                    <tr id="docs-empty">
                                        <td colspan="4" class="text-center text-secondary py-3">No hay documentos registrados.</td>
                                    </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                {{-- Tab: Correos adicionales --}}
                <div class="tab-pane" id="tab-emails" role="tabpanel">
                    <div class="card-body">
                        <div class="d-flex justify-content-end mb-3">
                            <button type="button" class="btn btn-sm btn-primary" id="btn-add-email">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 5l0 14"/><path d="M5 12l14 0"/></svg>
                                Agregar correo
                            </button>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-vcenter" id="emails-table">
                                <thead>
                                    <tr>
                                        <th>Correo</th>
                                        <th>Tipo</th>
                                        <th class="w-1"></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($teacher->emails as $em)
                                    <tr id="email-row-{{ $em->id }}">
                                        <td>{{ $em->email }}</td>
                                        <td><span class="badge bg-cyan-lt">{{ $em->type }}</span></td>
                                        <td>
                                            <button type="button" class="btn btn-sm btn-outline-danger btn-delete-email" data-id="{{ $em->id }}" title="Eliminar">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7l16 0"/><path d="M10 11l0 6"/><path d="M14 11l0 6"/><path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"/><path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"/></svg>
                                            </button>
                                        </td>
                                    </tr>
                                    @empty
                                    <tr id="emails-empty">
                                        <td colspan="3" class="text-center text-secondary py-3">No hay correos adicionales.</td>
                                    </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                {{-- Tab: Conexiones Moodle --}}
                <div class="tab-pane" id="tab-moodle" role="tabpanel">
                    <div class="card-body">
                        <div class="d-flex justify-content-end mb-3">
                            <button type="button" class="btn btn-sm btn-success" id="btn-send-moodle">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 12h-12"/><path d="M11 8l-4 4l4 4"/><path d="M20 4v16"/></svg>
                                Enviar a Moodle
                            </button>
                        </div>
                        @if($teacher->moodleConnections->isEmpty())
                            <div class="text-center text-secondary py-4" id="moodle-empty">
                                Este profesor no esta vinculado a ningun Moodle.
                            </div>
                        @else
                            <div class="table-responsive">
                                <table class="table table-vcenter" id="moodle-table">
                                    <thead>
                                        <tr>
                                            <th>Moodle</th>
                                            <th>ID en Moodle</th>
                                            <th>Vinculado</th>
                                            <th class="w-1"></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($teacher->moodleConnections as $tm)
                                            <tr id="row-tm-{{ $tm->id }}">
                                                <td>
                                                    <span class="badge bg-blue-lt">{{ $tm->connection->name ?? 'Desconocido' }}</span>
                                                </td>
                                                <td>{{ $tm->moodle_user_id }}</td>
                                                <td>
                                                    @if($tm->created_at)
                                                        <small class="text-secondary">{{ $tm->created_at->format('d/m/Y H:i') }}</small>
                                                    @else
                                                        <small class="text-secondary">—</small>
                                                    @endif
                                                </td>
                                                <td>
                                                    <button type="button" class="btn btn-sm btn-outline-primary btn-sync" data-id="{{ $tm->id }}" title="Sincronizar con Moodle">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"/><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"/></svg>
                                                    </button>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
            </form>

        </div>
    </div>
</div>

{{-- Modal enviar a Moodle --}}
<div class="modal modal-blur fade" id="modal-send-moodle" tabindex="-1">
    <div class="modal-dialog modal-md modal-fullscreen-sm-down">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Enviar profesor a Moodle</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="form-send-moodle">
                <div class="modal-body">
                    <p class="text-secondary">Profesor: <strong>{{ $teacher->nombre }} {{ $teacher->apellido_paterno }}</strong> ({{ $teacher->curp }})</p>
                    <div class="mb-3">
                        <label class="form-label required">Conexion Moodle</label>
                        <select name="moodle_connection_id" id="send-moodle-select" 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">Curso (opcional)</label>
                        <select name="moodle_course_id" id="send-course-select" class="form-select">
                            <option value="">Sin inscripcion a curso</option>
                        </select>
                        <small class="form-hint">Si seleccionas un curso, el profesor sera inscrito con rol de Profesor (no editor).</small>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn me-2" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-success" id="btn-send-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>
                        Enviar a Moodle
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Modal agregar documento --}}
<div class="modal modal-blur fade" id="modal-document" tabindex="-1">
    <div class="modal-dialog modal-md modal-fullscreen-sm-down">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Agregar documento</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="form-document" enctype="multipart/form-data">
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label required">Tipo de documento</label>
                        <select name="type" class="form-select" required>
                            <option value="">Seleccionar...</option>
                            <option value="Cedula Profesional">Cedula Profesional</option>
                            <option value="Titulo">Titulo</option>
                            <option value="Estado de Cuenta">Estado de Cuenta</option>
                            <option value="INE">INE</option>
                            <option value="CURP">CURP</option>
                        </select>
                        <div class="invalid-feedback"></div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label required">Archivo</label>
                        <input type="file" name="file" class="form-control" required>
                        <div class="invalid-feedback"></div>
                        <small class="form-hint">Maximo 5 MB.</small>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn me-2" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-success" id="btn-save-document">
                        <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>
                        Guardar
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Modal agregar correo --}}
<div class="modal modal-blur fade" id="modal-email" tabindex="-1">
    <div class="modal-dialog modal-md modal-fullscreen-sm-down">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Agregar correo</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="form-email">
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label required">Correo electronico</label>
                        <input type="email" name="email" class="form-control" required>
                        <div class="invalid-feedback"></div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label required">Tipo</label>
                        <select name="type" class="form-select" required>
                            <option value="">Seleccionar...</option>
                            <option value="Trabajo">Trabajo</option>
                            <option value="Profesional">Profesional</option>
                            <option value="Otro">Otro</option>
                        </select>
                        <div class="invalid-feedback"></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn me-2" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-success" id="btn-save-email">
                        <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>
                        Guardar
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    var teacherUpdateUrl = "{{ route('teachers.update', $teacher) }}";
    var teacherSendUrl = "{{ route('teachers.send-moodle', $teacher) }}";
    var teacherSyncBaseUrl = "{{ url('teachers/sync-moodle') }}";
    var teacherCoursesUrl = "{{ route('teachers.moodle-courses') }}";
    var teacherIndexUrl = "{{ route('teachers.index') }}";
    var teacherPhotoUploadUrl = "{{ route('teachers.photo.upload', $teacher) }}";
    var teacherPhotoDeleteUrl = "{{ route('teachers.photo.delete', $teacher) }}";
    var teacherDocumentsUrl = "{{ route('teachers.documents.store', $teacher) }}";
    var teacherDocumentsDeleteBase = "{{ url('teachers/documents') }}";
    var teacherDocumentsDownloadBase = "{{ url('teachers/documents') }}";
    var teacherEmailsUrl = "{{ route('teachers.emails.store', $teacher) }}";
    var teacherEmailsDeleteBase = "{{ url('teachers/emails') }}";
</script>
<script src="{{ asset('js/teachers/show.js') }}?v={{ filemtime(public_path('js/teachers/show.js')) }}"></script>
@endpush