@extends('layouts.index', ['subHeader' => 'Editar Usuario'])

@section('header')
    <a href="{{ route('home') }}" class="text-decoration-none text-dark">Dashboard</a>
    <a href="#" class="text-decoration-none text-dark"> / Perfil</a>
@endsection

@section('content')
    <style>
        .perfil-card {
            border-radius: 10px;
        }

        .perfil-rounded-circle {
            border-radius: 50%;
        }

        input {
            border-radius: 5px;
        }

        .btn-enviar {
            background-color: #8912ff;
            border-color: #8912ff;
            color: #ffffff;
        }

        .btn-enviar:hover {
            background-color: #6f0ccf;
            border-color: #6f0ccf;
        }

        .perfil-page {
            padding-top: 20px;
        }

        .perfil-form-control {
            border-radius: 5px;
        }

        .perfil-form-control-file {
            display: none;
        }

        .camera-icon {
            font-size: 24px;
            cursor: pointer;
            color: #6f0ccf;
        }

        .camera-icon:hover {
            color: #8912ff;
        }

        .form-group .col-form-label {
            font-weight: bold;
        }
    </style>
    <div class="container perfil-page">
        <div class="card perfil-card shadow-sm mb-4">
            <div class="card-header p-4 bg-icon cardh text-white">
                <span class="fs-1 fw-bolder text-white p-2">Perfil de Usuario</span>
            </div>
            <div class="card-body">
                @if (session('success'))
                    <div class="alert alert-success fs-5">
                        {{ session('success') }}
                    </div>
                @endif

                @if ($errors->any())
                    <div class="alert alert-danger fs-5">
                        <ul class="mb-0">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <form action="{{ route('perfil.update') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="card mb-4">
                        <div class="card-body">
                            <div class="d-flex flex-wrap align-items-center justify-content-between mb-4">
                                <div class="d-flex align-items-center">
                                    <img src="{{ $user->avatar ? $user->avatar : asset('img/iconos/icon-perfil.svg') }}" alt="Avatar" class="perfil-rounded-circle shadow-sm" width="120" height="120">
                                    <div class="ms-4">
                                        <h3 class="mb-1">{{ $user->name }} {{ $user->last_name }}</h3>
                                        <p class="text-muted mb-0">Roles: 
                                            @foreach($roles as $role)
                                                <span>{{ $role }}</span>@if(!$loop->last), @endif
                                            @endforeach
                                        </p>
                                        <label for="avatar" class="camera-icon">
                                            <i class="bi bi-camera"></i>
                                        </label>
                                        <input type="file" name="avatar" id="avatar" class="perfil-form-control-file mt-3" accept="image/*">
                                        <p id="image-selected-message" class="text-success fs-5" style="display: none;">Imagen seleccionada. Haga clic en "Guardar Cambios" para actualizar el avatar.</p>
                                    </div>
                                </div>
                                <div class="qr-code mt-3 pt-3">
                                    {!! $qrCode !!}
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    

                    <div class="card mb-4">
                        <div class="card-body">
                            <div class="row mb-5">
                                <div class="col-lg-4">
                                    <div class="form-group mb-2">
                                        <label for="name" class="form-label fw-bolder">Nombre</label>
                                        <input type="text" class="form-control perfil-form-control" id="name"
                                            name="name" value="{{ old('name', $user->name) }}" required>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="form-group mb-2">
                                        <label for="last_name" class="form-label fw-bolder">Apellido</label>
                                        <input type="text" class="form-control perfil-form-control" id="last_name"
                                            name="last_name" value="{{ old('last_name', $user->last_name) }}" required>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="form-group mb-2">
                                        <label for="identificacion" class="form-label fw-bolder">Identificación</label>
                                        <input type="text" class="form-control perfil-form-control" id="identificacion"
                                            name="identificacion"
                                            value="{{ old('identificacion', $user->identificacion) }}" required>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="form-group mb-2">
                                        <label for="email" class="form-label fw-bolder">Correo Electrónico</label>
                                        <input type="email" class="form-control perfil-form-control" id="email"
                                            name="email" value="{{ old('email', $user->email) }}" required>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group mb-2">
                                        <label for="numero_interno" class="form-label fw-bolder">Número Interno</label>
                                        <input type="text" class="form-control perfil-form-control" id="numero_interno"
                                            name="numero_interno"
                                            value="{{ old('numero_interno', $user->numero_interno) }}">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card mb-4">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="form-group mb-2">
                                        <label for="password" class="form-label fw-bolder">Nueva Contraseña</label>
                                        <input type="password" class="form-control perfil-form-control" id="password"
                                            name="password">
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group mb-2">
                                        <label for="password_confirmation" class="form-label fw-bolder">Confirmar Nueva Contraseña</label>
                                        <input type="password" class="form-control perfil-form-control"
                                            id="password_confirmation" name="password_confirmation">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <button type="submit" class="btn btn-enviar btn-lg btn-block">Guardar Cambios</button>
                </form>
            </div>
        </div>
    </div>
    <script>
        document.getElementById('avatar').addEventListener('change', function() {
            var messageElement = document.getElementById('image-selected-message');
            if (this.files && this.files[0]) {
                messageElement.style.display = 'block';
            } else {
                messageElement.style.display = 'none';
            }
        });
    </script>
@endsection