@extends('academia.dashboard')

@section('content')

<div class="row justify-content-center mt-4">
    <div class="col-12 col-xl-12">
        <div class="card border-0 shadow-sm rounded-4 overflow-hidden">

            
            <div class="card-header bg-white border-0 text-center pt-4 pb-3">
                <img src="{{ asset('academia/recursos/logo_academia.png') }}" alt="Sinergia" class="logo-sm mb-3">
                <h3 class="fw-bold mb-1">Registro de Mentor</h3>
                <p class="text-muted mb-0">Complete la información para crear su cuenta</p>
            </div>

            <div class="card-body p-4 p-md-5">

                <form method="POST" action="{{ route('mentores-save') }}" enctype="multipart/form-data">
                    {{ csrf_field() }}

                    <div class="row g-4">

                       
                        <div class="col-lg-6">

                            <div class="d-flex align-items-center mb-3">
                                <div class="bg-primary bg-opacity-10 text-primary rounded-circle d-flex align-items-center justify-content-center me-2" style="width: 36px; height: 36px;">
                                    <i class="bi bi-person-fill"></i>
                                </div>
                                <h5 class="mb-0 fw-semibold">Información Personal</h5>
                            </div>
                            <hr class="mt-2 mb-4">

                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label for="primer_nombre" class="form-label fw-semibold text-secondary small mb-1">PRIMER NOMBRE <span class="text-danger">*</span></label>
                                    <input type="text" name="primer_nombre" class="form-control" id="primer_nombre" placeholder="Ingrese su primer nombre" required value="{{ old('primer_nombre') }}">
                                </div>

                                <div class="col-md-6">
                                    <label for="segundo_nombre" class="form-label fw-semibold text-secondary small mb-1">SEGUNDO NOMBRE <span class="text-danger">*</span></label>
                                    <input type="text" name="segundo_nombre" class="form-control" id="segundo_nombre" placeholder="Ingrese su segundo nombre" required value="{{ old('segundo_nombre') }}">
                                </div>

                                <div class="col-md-6">
                                    <label for="primer_apellido" class="form-label fw-semibold text-secondary small mb-1">PRIMER APELLIDO <span class="text-danger">*</span></label>
                                    <input type="text" name="primer_apellido" class="form-control" id="primer_apellido" placeholder="Ingrese su primer apellido" required value="{{ old('primer_apellido') }}">
                                </div>

                                <div class="col-md-6">
                                    <label for="segundo_apellido" class="form-label fw-semibold text-secondary small mb-1">SEGUNDO APELLIDO <span class="text-danger">*</span></label>
                                    <input type="text" name="segundo_apellido" class="form-control" id="segundo_apellido" placeholder="Ingrese su segundo apellido" required value="{{ old('segundo_apellido') }}">
                                </div>
                            </div>

                            {{-- Subida de avatar --}}
                            <div class="mt-4">
                                <label for="formFileMultiple" class="form-label fw-semibold text-secondary small mb-1">
                                    <i class="bi bi-image me-1"></i>
                                    FOTOGRAFÍA DE PERFIL <span class="text-danger">*</span>
                                </label>

                                <div class="alert alert-primary border-0 d-flex align-items-center py-2 small mb-2" role="alert">
                                    <i class="bi bi-info-circle-fill me-2"></i>
                                    <div>Dimensión 300 x 300 px · Formatos: PNG, JPG, JPEG</div>
                                </div>

                                <input class="form-control" type="file" name="avatar" id="formFileMultiple" accept="image/png,image/jpg,image/jpeg" required>
                            </div>

                        </div>

                        
                        <div class="col-lg-6">

                            <div class="d-flex align-items-center mb-3">
                                <div class="bg-info bg-opacity-10 text-info rounded-circle d-flex align-items-center justify-content-center me-2" style="width: 36px; height: 36px;">
                                    <i class="bi bi-shield-lock-fill"></i>
                                </div>
                                <h5 class="mb-0 fw-semibold">Datos de la Cuenta</h5>
                            </div>
                            <hr class="mt-2 mb-4">

                            <div class="mb-3">
                                <label for="descripcion" class="form-label fw-semibold text-secondary small mb-1">DESCRIPCIÓN <span class="text-danger">*</span></label>
                                <input type="text" name="descripcion" class="form-control" id="descripcion" placeholder="Breve descripción profesional" required value="{{ old('descripcion') }}">
                            </div>

                            <div class="mb-3">
                                <label for="biografia" class="form-label fw-semibold text-secondary small mb-1">BIOGRAFÍA <span class="text-danger">*</span></label>
                                <textarea class="form-control" name="biografia" rows="3" id="biografia" placeholder="Cuéntenos sobre su experiencia y trayectoria" required>{{ old('biografia') }}</textarea>
                            </div>

                            <div class="mb-3">
                                <label for="correo" class="form-label fw-semibold text-secondary small mb-1">CORREO ELECTRÓNICO <span class="text-danger">*</span></label>
                                <input type="email" name="user_email" class="form-control" id="correo" placeholder="nombre@ejemplo.com" required value="{{ old('user_email') }}">
                            </div>

                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label for="password" class="form-label fw-semibold text-secondary small mb-1">CONTRASEÑA <span class="text-danger">*</span></label>
                                    <div class="input-group input-group-merge">
                                        <input type="password" id="password" name="password" class="form-control border-end-0 password" placeholder="******" required>
                                        <div class="input-group-text bg-transparent border-start-0" data-password="false" style="cursor: pointer;">
                                            <span class="password-eye text-muted"></span>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <label for="passwordconfir" class="form-label fw-semibold text-secondary small mb-1">CONFIRMAR CONTRASEÑA <span class="text-danger">*</span></label>
                                    <div class="input-group input-group-merge">
                                        <input type="password" id="passwordconfir" name="password_confirmation" class="form-control border-end-0 password" placeholder="******" required>
                                        <div class="input-group-text bg-transparent border-start-0" data-password="false" style="cursor: pointer;">
                                            <span class="password-eye text-muted"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>

                    
                        <div class="col-12">
                            <hr class="my-4">
                            <div class="row g-3">
                                <div class="col-md-6 order-md-1 order-2">
                                    <a href="{{ route('academia-home') }}" class="btn btn-light border w-100 py-2 fw-semibold">
                                        <i class="bi bi-arrow-left me-1"></i> Regresar
                                    </a>
                                </div>
                                <div class="col-md-6 order-md-2 order-1">
                                    <button class="btn btn-primary w-100 py-2 fw-semibold" type="submit">
                                        <i class="bi bi-person-plus-fill me-1"></i> Registrarme
                                    </button>
                                </div>
                            </div>
                        </div>

                    </div>
                </form>

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

@endsection