@extends('adminlte::page')

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

@section('css')
<style>
    /* Contenedor del avatar compacto */
    .avatar-container {
        position: relative;
        width: 120px; /* Reducido de 160px a 120px para pantallas pequeñas */
        height: 120px;
        margin: 0 auto;
        border-radius: 50%;
        overflow: hidden;
        cursor: pointer;
        border: 3px solid #3c8dbc;
        box-shadow: 0px 3px 8px rgba(0,0,0,0.15);
    }
    .avatar-container img { width: 100%; height: 100%; object-fit: cover; }
    .avatar-overlay {
        position: absolute; top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0,0,0,0.4); display: flex; align-items: center;
        justify-content: center; color: #fff; opacity: 0; transition: 0.3s;
    }
    .avatar-container:hover .avatar-overlay { opacity: 1; }

    /* Ajuste para que el cuadro no sea tan alto */
    .profile-card {
        margin-top: 2rem;
        margin-bottom: 2rem;
    }

    /* Reducir padding interno en móviles */
    @media (max-width: 576px) {
        .card-body { padding: 1rem; }
        .avatar-container { width: 100px; height: 100px; }
    }
</style>
@stop

@section('content')
<div class="container-fluid">
    {{-- Mensaje de Éxito --}}
    @if (session('success'))
        <div class="alert alert-success alert-dismissible fade show shadow-sm" role="alert">
            <i class="icon fas fa-check-circle mr-2"></i>
            {{ session('success') }}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    @endif

    {{-- Mensaje de Error --}}
    @if (session('error'))
        <div class="alert alert-danger alert-dismissible fade show shadow-sm" role="alert">
            <i class="icon fas fa-exclamation-triangle mr-2"></i>
            {{ session('error') }}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    @endif
    {{-- justify-content-center centra horizontalmente --}}
    <div class="row justify-content-center">

        <div class="col-12 col-sm-8 col-md-6 col-lg-4 profile-card">
            
            <div class="card card-primary card-outline shadow">
                <div class="card-body box-profile">
                    
                    {{-- Formulario de Imagen --}}
                    <form id="avatarForm" action="{{ route('profile.update') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')
                        <input type="file" name="avatar" id="avatarInput" style="display:none;" onchange="this.form.submit()">
                        <input type="hidden" name="name" value="{{ $user->name }}">
                        <input type="hidden" name="email" value="{{ $user->email }}">
                    </form>

                    {{-- Avatar --}}
                    <div class="avatar-container" onclick="document.getElementById('avatarInput').click()">
                        <img src="{{ asset('storage/avatars/' . ($user->avatar ?? 'default.png')) }}" alt="Foto de perfil">
                        <div class="avatar-overlay">
                            <i class="fas fa-camera"></i>
                        </div>
                    </div>

                    <h3 class="profile-username text-center mt-2" style="font-size: 1.25rem;">{{ $user->name }}</h3>
                    <p class="text-muted text-center mb-2">
                        <span class="badge badge-info">{{ strtoupper($user->role) }}</span>
                    </p>

                    @if($user->avatar !== 'default.png')
                        <form action="{{ route('profile.avatar.destroy') }}" method="POST" class="text-center mb-3">
                            @csrf @method('DELETE')
                            <button type="submit" class="btn btn-link btn-xs text-danger p-0">Restablecer foto</button>
                        </form>
                    @endif

                    <hr class="my-3">

                    {{-- Formulario de Datos --}}
                    <form action="{{ route('profile.update') }}" method="POST">
                        @csrf
                        @method('PUT')

                        <div class="form-group mb-2">
                            <label class="small font-weight-bold">Nombre</label>
                            <input type="text" name="name" class="form-control form-control-sm @error('name') is-invalid @enderror" value="{{ old('name', $user->name) }}">
                            @error('name') <span class="invalid-feedback small">{{ $message }}</span> @enderror
                        </div>

                        <div class="form-group mb-3">
                            <label class="small font-weight-bold">Correo Electrónico</label>
                            <input type="email" name="email" class="form-control form-control-sm @error('email') is-invalid @enderror" value="{{ old('email', $user->email) }}">
                            @error('email') <span class="invalid-feedback small">{{ $message }}</span> @enderror
                        </div>

                        <button type="submit" class="btn btn-primary btn-block btn-sm">
                            <i class="fas fa-save mr-1"></i> Guardar Cambios
                        </button>
                    </form>

                </div>
            </div>

            {{-- Alertas compactas --}}
            @if(session('success'))
                <div class="alert alert-success alert-dismissible fade show p-2 small">
                    {{ session('success') }}
                    <button type="button" class="close p-2" data-dismiss="alert" aria-hidden="true">×</button>
                </div>
            @endif

        </div>
    </div>
</div>
@stop