@extends('layouts.dashboard')

@section('header_title', 'Mi Perfil')

@section('content')
<style>
    .exec-container { font-family: 'Inter', 'Segoe UI', sans-serif; background-color: #f1f5f9; min-height: 100vh; margin: -2rem; padding: 50px 20px; }
    .exec-card { max-width: 800px; margin: 0 auto; background: #ffffff; border-radius: 12px; border: 1px solid #e2e8f0; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); padding: 40px; display: flex; gap: 40px; }
    .exec-title { font-size: 20px; font-weight: 700; color: #0f172a; margin-bottom: 20px; border-bottom: 1px solid #f8fafc; padding-bottom: 12px; letter-spacing: -0.01em; }
    .exec-label { display: block; font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
    .exec-input { width: 100%; background: #f8fafc; border: 1px solid #cbd5e1; border-radius: 6px; padding: 10px 14px; font-size: 13px; font-weight: 500; color: #0f172a; outline: none; transition: all 0.2s; box-sizing: border-box; margin-bottom: 16px; }
    .exec-input:focus { background: #ffffff; border-color: #1e293b; box-shadow: 0 0 0 3px rgba(30, 41, 59, 0.1); }
    
    .btn-exec { background: #1e293b; color: #ffffff; padding: 10px 24px; border-radius: 6px; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; border: none; cursor: pointer; transition: background 0.2s; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
    .btn-exec:hover { background: #0f172a; }
    .btn-exec-outline { background: #ffffff; color: #475569; border: 1px solid #cbd5e1; font-size: 11px; padding: 6px 12px; border-radius: 6px; cursor: pointer; transition: all 0.2s; }
    .btn-exec-outline:hover { background: #f8fafc; color: #1e293b; }
    
    /* Layout Perfil */
    .profile-sidebar { width: 200px; display: flex; flex-direction: column; align-items: center; border-right: 1px solid #e2e8f0; padding-right: 40px; }
    .profile-content { flex: 1; }
    
    .profile-avatar { width: 80px; height: 80px; background: #e2e8f0; color: #475569; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 32px; font-weight: 700; margin-bottom: 16px; }
    .profile-role-badge { background: #f1f5f9; color: #475569; padding: 4px 12px; border-radius: 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; border: 1px solid #e2e8f0; margin-bottom: 16px; }

    @media (max-width: 768px) {
        .exec-card { flex-direction: column; padding: 24px; }
        .profile-sidebar { width: 100%; border-right: none; border-bottom: 1px solid #e2e8f0; padding-right: 0; padding-bottom: 24px; margin-bottom: 24px; }
    }
</style>

<div class="exec-container">
    <div class="exec-card">
        
        <div class="profile-sidebar">
            <div class="profile-avatar">
                {{ substr($user->name, 0, 1) }}
            </div>
            <div class="profile-role-badge">{{ $user->role }}</div>
            <button type="button" class="btn-exec-outline" onclick="alert('Funcionalidad de carga de foto en desarrollo.')">
                <i class="bi bi-camera"></i> Cambiar Foto
            </button>
        </div>

        <div class="profile-content">
            <form action="{{ route('profile.update') }}" method="POST">
                @csrf
                @method('PUT')
                
                <div style="margin-bottom: 24px; border-bottom: 1px solid #e2e8f0; padding-bottom: 16px;">
                    <h2 class="exec-title" style="border: none; padding: 0; margin-bottom: 4px;">Configuración de Cuenta</h2>
                    <p style="font-size: 12px; color: #64748b; margin: 0; font-weight: 500;">Mantenga sus datos actualizados y seguros.</p>
                </div>

                <div>
                    <label class="exec-label">Nombre Público</label>
                    <input type="text" name="name" class="exec-input" required value="{{ $user->name }}">
                </div>

                <div>
                    <label class="exec-label">Correo Electrónico</label>
                    <input type="email" name="email" class="exec-input" required value="{{ $user->email }}">
                </div>

                <div style="margin: 30px 0 16px; border-top: 1px solid #e2e8f0; padding-top: 24px;">
                    <h3 style="font-size: 13px; font-weight: 700; color: #1e293b; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 16px;"><i class="bi bi-shield-lock" style="margin-right: 6px; color: #64748b;"></i> Seguridad</h3>
                </div>

                <div>
                    <label class="exec-label">Nueva Contraseña</label>
                    <input type="password" name="password" class="exec-input" placeholder="••••••••">
                </div>

                <div>
                    <label class="exec-label">Confirmar Nueva Contraseña</label>
                    <input type="password" name="password_confirmation" class="exec-input" placeholder="••••••••">
                </div>

                <div style="margin-top: 30px; display: flex; justify-content: flex-end;">
                    <button type="submit" class="btn-exec">
                        Guardar Perfil
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection