@extends('layouts.dashboard')

@section('title', __('Mi perfil'))

@push('head')
    <style>
        .rt-profile-avatar-wrap {
            position: relative;
            width: 140px;
            height: 140px;
            margin: 0 auto;
        }
        .rt-profile-avatar {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
            border: 4px solid #ffffff;
            box-shadow: 0 8px 24px rgba(0,0,0,0.12);
        }
        .rt-profile-avatar-placeholder {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: linear-gradient(135deg, #f2f2f7 0%, #e5e5ea 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3.5rem;
            color: #c7c7cc;
            border: 4px solid #ffffff;
            box-shadow: 0 8px 24px rgba(0,0,0,0.08);
        }
        .rt-avatar-upload-btn {
            position: absolute;
            bottom: 5px;
            right: 5px;
            width: 38px;
            height: 38px;
            background: #1c1c1e;
            color: #ffffff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            border: 3px solid #ffffff;
            transition: all 0.2s;
        }
        .rt-avatar-upload-btn:hover { background: var(--rt-cherry); transform: scale(1.1); }
        
        .rt-ios-input-icon {
            position: absolute;
            left: 1rem;
            color: #8e8e93;
            font-size: 1rem;
            z-index: 10;
        }
        .rt-password-toggle-btn {
            position: absolute;
            right: 0.75rem;
            background: transparent;
            border: none;
            color: #8e8e93;
            cursor: pointer;
            z-index: 10;
            padding: 0.5rem;
            transition: color 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .rt-password-toggle-btn:hover { color: var(--rt-cherry); }

        /* Ajuste de padding para inputs con icono */
        .rt-ios-input-with-icon {
            padding-left: 2.8rem !important;
        }
    </style>
@endpush

@section('content')
    <div class="container-fluid px-0">
        {{-- Header --}}
        <div class="mb-5 mt-2">
            <h1 class="h2 fw-bold text-dark mb-1">{{ __('Ajustes de Cuenta') }}</h1>
            <p class="text-muted small">{{ __('Gestiona tu identidad personal y seguridad en Regiticket.') }}</p>
        </div>

        <div class="row">
            {{-- Perfil e Información --}}
            <div class="col-lg-7 mb-4">
                <div class="card border-0 shadow-sm" style="border-radius: 24px;">
                    <div class="card-header bg-transparent border-0 px-4 pt-4">
                        <h6 class="fw-bold text-dark mb-0">{{ __('Información Personal') }}</h6>
                    </div>
                    <div class="card-body p-4">
                        {{-- Avatar Section --}}
                        <div class="text-center mb-5">
                            <div class="rt-profile-avatar-wrap mb-3">
                                @if ($user->avatarPublicUrl())
                                    <img src="{{ $user->avatarPublicUrl() }}" alt="" class="rt-profile-avatar">
                                @else
                                    <div class="rt-profile-avatar-placeholder">
                                        <i class="bi bi-person-fill"></i>
                                    </div>
                                @endif
                                <label for="avatar" class="rt-avatar-upload-btn shadow-sm" title="{{ __('Cambiar foto') }}">
                                    <i class="fas fa-camera fa-xs"></i>
                                </label>
                            </div>
                            
                            <form id="avatar-form" method="post" action="{{ route('dashboard.account.profile.avatar') }}" enctype="multipart/form-data" class="d-none">
                                @csrf
                                <input type="file" name="avatar" id="avatar" accept="image/*" onchange="document.getElementById('avatar-form').submit()">
                            </form>

                            @if ($user->avatar_path)
                                <form method="post" action="{{ route('dashboard.account.profile.avatar.destroy') }}" onsubmit="return confirm(@json(__('¿Quitar la foto de perfil?')));">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-link text-danger btn-sm text-decoration-none fw-bold">
                                        <i class="fas fa-trash-alt mr-1"></i> {{ __('Eliminar foto') }}
                                    </button>
                                </form>
                            @endif
                        </div>

                        <form method="post" action="{{ route('dashboard.account.profile.update') }}">
                            @csrf
                            @method('PUT')

                            <div class="row">
                                <div class="col-md-12 mb-4">
                                    <label class="rt-label" for="name">{{ __('Nombre Completo') }}</label>
                                    <div class="rt-ios-input-group">
                                        <i class="fas fa-user rt-ios-input-icon"></i>
                                        <input type="text" name="name" id="name" value="{{ old('name', $user->name) }}" 
                                               class="form-control rt-ios-input rt-ios-input-with-icon @error('name') is-invalid @enderror" required>
                                    </div>
                                    @error('name')<span class="invalid-feedback d-block">{{ $message }}</span>@enderror
                                </div>

                                <div class="col-md-6 mb-4">
                                    <label class="rt-label" for="email">{{ __('Correo Electrónico') }}</label>
                                    <div class="rt-ios-input-group">
                                        <i class="fas fa-envelope rt-ios-input-icon"></i>
                                        <input type="email" id="email" value="{{ $user->email }}" class="form-control rt-ios-input rt-ios-input-with-icon" disabled>
                                    </div>
                                    <div class="text-muted mt-1" style="font-size: 0.65rem;">{{ __('Protegido (No editable)') }}</div>
                                </div>

                                <div class="col-md-6 mb-4">
                                    <label class="rt-label" for="phone">{{ __('Teléfono Móvil') }}</label>
                                    <div class="rt-ios-input-group">
                                        <i class="fas fa-phone rt-ios-input-icon"></i>
                                        <input type="text" name="phone" id="phone" value="{{ old('phone', $user->phone) }}" 
                                               class="form-control rt-ios-input rt-ios-input-with-icon @error('phone') is-invalid @enderror" placeholder="+1 787...">
                                    </div>
                                    @error('phone')<span class="invalid-feedback d-block">{{ $message }}</span>@enderror
                                </div>
                            </div>

                            <div class="mt-2 pt-3 border-top d-flex justify-content-end">
                                <button type="submit" class="btn btn-primary px-4 py-2 fw-bold" style="border-radius: 12px;">
                                    {{ __('Guardar Cambios') }}
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            {{-- Seguridad --}}
            <div class="col-lg-5 mb-4">
                <div class="card border-0 shadow-sm mb-4" style="border-radius: 24px;">
                    <div class="card-header bg-transparent border-0 px-4 pt-4">
                        <div class="d-flex align-items-center">
                            <div class="rounded-3 d-flex align-items-center justify-content-center mr-2" style="width: 32px; height: 32px; background: rgba(185, 24, 48, 0.1); color: var(--rt-cherry);">
                                <i class="fas fa-lock fa-xs"></i>
                            </div>
                            <h6 class="fw-bold text-dark mb-0">{{ __('Cambiar Contraseña') }}</h6>
                        </div>
                    </div>
                    <div class="card-body p-4">
                        <p class="text-muted mb-4" style="font-size: 0.85rem;">{{ __('Usa al menos 8 caracteres para tu seguridad.') }}</p>
                        
                        <form method="post" action="{{ route('dashboard.account.profile.password') }}">
                            @csrf
                            @method('PUT')

                            <div class="mb-4">
                                <label class="rt-label" for="password">{{ __('Nueva Contraseña') }}</label>
                                <div class="rt-ios-input-group">
                                    <i class="fas fa-key rt-ios-input-icon"></i>
                                    <input type="password" name="password" id="password" class="form-control rt-ios-input rt-ios-input-with-icon @error('password') is-invalid @enderror" placeholder="••••••••" required minlength="8">
                                    <button type="button" class="rt-password-toggle-btn" data-target="password">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                </div>
                                @error('password')<span class="invalid-feedback d-block">{{ $message }}</span>@enderror
                            </div>

                            <div class="mb-4">
                                <label class="rt-label" for="password_confirmation">{{ __('Confirmar Contraseña') }}</label>
                                <div class="rt-ios-input-group">
                                    <i class="fas fa-shield-alt rt-ios-input-icon"></i>
                                    <input type="password" name="password_confirmation" id="password_confirmation" class="form-control rt-ios-input rt-ios-input-with-icon" placeholder="••••••••" required minlength="8">
                                    <button type="button" class="rt-password-toggle-btn" data-target="password_confirmation">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                </div>
                            </div>

                            <button type="submit" class="btn btn-dark w-100 py-2 fw-bold shadow-sm" style="border-radius: 12px;">
                                {{ __('Actualizar Contraseña') }}
                            </button>
                        </form>
                    </div>
                </div>

                {{-- Status Badge --}}
                <div class="card border-0 shadow-sm" style="border-radius: 24px; background: #ffffff;">
                    <div class="card-body p-4 d-flex align-items-center">
                        <div class="flex-grow-1">
                            <div class="rt-label mb-1">{{ __('Rol de Acceso') }}</div>
                            <div class="h6 fw-bold text-dark mb-0">{{ $user->role?->name ?? 'Usuario' }}</div>
                        </div>
                        <div class="flex-shrink-0">
                            <span class="badge badge-success rounded-pill px-3 py-2" style="font-size: 0.65rem; font-weight: 800;">ACTIVO</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            document.querySelectorAll('.rt-password-toggle-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    const targetId = this.getAttribute('data-target');
                    const input = document.getElementById(targetId);
                    const icon = this.querySelector('i');
                    
                    if (input.type === 'password') {
                        input.type = 'text';
                        icon.classList.remove('fa-eye');
                        icon.classList.add('fa-eye-slash');
                    } else {
                        input.type = 'password';
                        icon.classList.remove('fa-eye-slash');
                        icon.classList.add('fa-eye');
                    }
                });
            });
        });
    </script>
@endpush
