@extends('layouts.admin')  {{-- Este es tu layout intermedio --}}

@section('title', 'Mi Perfil')  {{-- El título para la página --}}

@section('nombre_header', 'Mi Perfil')  {{-- Aquí defines el contenido para nombre_header --}}

@section('content')
<div class="container-fluid">
    <div class="row">
        <!-- Información básica del usuario -->
        <div class="col-md-4">
            <div class="card card-primary card-outline">
                <div class="card-body box-profile">
                    <div class="text-center">
                        <!-- Avatar del usuario - usando Gravatar como fallback -->
                        <img class="profile-user-img img-fluid img-circle"
                             src="https://www.gravatar.com/avatar/{{ md5(strtolower(trim(session('user_info.user.email')))) }}?d=mp"
                             alt="Avatar de usuario">
                    </div>

                    <h3 class="profile-username text-center">{{ session('user_info.user.name') }}</h3>
                    <p class="text-muted text-center">
                        @foreach(session('user_info.user.role_info.roles') as $role)
                            <span class="badge badge-dark">{{ $role }}</span>
                        @endforeach
                    </p>

                    <ul class="list-group list-group-unbordered mb-3">
                        <li class="list-group-item">
                            <b>ID</b> <a class="float-right">{{ session('user_info.user.id') }}</a>
                        </li>
                        <li class="list-group-item">
                            <b>Email</b> <a class="float-right">{{ session('user_info.user.email') }}</a>
                        </li>
                        <li class="list-group-item">
                            <b>Fecha de registro</b>
                            <a class="float-right">{{ date('d/m/y', strtotime(session('user_info.user.created_at'))) ?? 'N/A' }}</a>
                        </li>
                    </ul>

                    <button type="button" class="btn btn-primary btn-block" data-toggle="modal" data-target="#editProfileModal">
                        <i class="fas fa-edit"></i> Editar Perfil
                    </button>
                </div>
            </div>
        </div>

        <!-- Permisos y roles -->
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Permisos del Usuario</h3>
                </div>
                <div class="card-body">
                    <div class="row">
                        @php
                            $permissionsByModule = collect(session('user_info.user.role_info.permissions'))
                                ->groupBy(function($permission) {
                                    return explode('.', $permission)[0];
                                });
                        @endphp

                        @foreach($permissionsByModule as $module => $permissions)
                            <div class="col-md-6 mb-3">
                                <div class="card">
                                    <div class="card-header bg-light">
                                        <h5 class="mb-0">{{ ucfirst($module) }}</h5>
                                    </div>
                                    <div class="card-body">
                                        @foreach($permissions as $permission)
                                            @php
                                                $badgeClass = match($module) {
                                                    'users' => 'badge-primary',
                                                    'roles' => 'badge-success',
                                                    'permissions' => 'badge-info',
                                                    'licenses' => 'badge-warning',
                                                    'payment_methods' => 'badge-danger',
                                                    default => 'badge-secondary'
                                                };
                                            @endphp
                                            <span class="badge {{ $badgeClass }} m-1">{{ $permission }}</span>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal para editar perfil -->
<div class="modal fade" id="editProfileModal" tabindex="-1" role="dialog" aria-labelledby="editProfileModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editProfileModalLabel">Editar Perfil</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="profileForm" action="{{ route('profile.update') }}" method="GET">
                @csrf
                <!-- @method('PUT') -->
                <div class="modal-body">
                    <div class="form-group">
                        <label for="name">Nombre</label>
                        <input type="text" class="form-control" id="name" name="name"
                               value="{{ session('user_info.user.name') }}" required>
                    </div>
                    <div class="form-group">
                        <label for="email">Email</label>
                        <input type="email" class="form-control" id="email" name="email"
                               value="{{ session('user_info.user.email') }}" required>
                    </div>
                    <div class="form-group">
                        <hr>
                        <h6 class="mb-3">Cambiar Contraseña (Opcional)</h6>
                        <label for="current_password">Contraseña Actual</label>
                        <input type="password" class="form-control" id="current_password" name="current_password">
                        <small class="form-text text-muted">Solo si deseas cambiar tu contraseña</small>
                    </div>
                    <div class="form-group password-group" style="display: none;">
                        <label for="new_password">Nueva Contraseña</label>
                        <input type="password" class="form-control" id="new_password" name="new_password">
                        <small class="form-text text-muted">Mínimo 6 caracteres</small>
                    </div>
                    <div class="form-group password-group" style="display: none;">
                        <label for="confirm_password">Confirmar Nueva Contraseña</label>
                        <input type="password" class="form-control" id="confirm_password" name="confirm_password">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary">Guardar Cambios</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('css')
<style>
    .profile-user-img {
        width: 100px;
        height: 100px;
        object-fit: cover;
    }
    .badge {
        font-size: 0.9em;
        padding: 8px;
        margin: 2px;
    }
</style>
@endsection

@section('js')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const profileForm = document.getElementById('profileForm');
    const currentPassword = document.getElementById('current_password');
    const newPassword = document.getElementById('new_password');
    const confirmPassword = document.getElementById('confirm_password');
    const passwordGroups = document.querySelectorAll('.password-group');

    // Mostrar/ocultar campos de nueva contraseña
    currentPassword.addEventListener('input', function() {
        passwordGroups.forEach(group => {
            group.style.display = this.value ? 'block' : 'none';
        });
        if (!this.value) {
            newPassword.value = '';
            confirmPassword.value = '';
        }
    });

    profileForm.addEventListener('submit', function(event) {
        // Solo validar contraseñas si se está intentando cambiarla
        if (currentPassword.value) {
            // Validar longitud mínima
            if (newPassword.value.length < 6) {
                event.preventDefault();
                alert('La nueva contraseña debe tener al menos 6 caracteres');
                return;
            }

            // Validar que las contraseñas coincidan
            if (newPassword.value !== confirmPassword.value) {
                event.preventDefault();
                alert('La nueva contraseña y su confirmación no coinciden');
                return;
            }

            // Validar que la nueva contraseña sea diferente a la actual
            if (newPassword.value === currentPassword.value) {
                event.preventDefault();
                alert('La nueva contraseña debe ser diferente a la contraseña actual');
                return;
            }

            // Validar que se hayan llenado todos los campos de contraseña
            if (!newPassword.value || !confirmPassword.value) {
                event.preventDefault();
                alert('Por favor complete todos los campos de contraseña');
                return;
            }
        } else {
            // Limpiar campos de contraseña si no se está actualizando
            newPassword.value = '';
            confirmPassword.value = '';
        }
    });
});
</script>
@endsection