@extends('layouts.admin')

@section('content')
<div class="d-flex flex-wrap justify-content-between align-items-center mb-3">
    <div>
        <h3 class="font-weight-bold text-dark mb-0">
            <i class="bi bi-person-gear text-primary mr-2"></i>
            Mi Perfil de SuperAdmin SaaS
        </h3>
        <p class="text-muted small mb-0">Administre su fotografía de perfil, correo electrónico de acceso y contraseña de forma independiente.</p>
    </div>
    <a href="{{ route('admin.saas.dashboard') }}" class="btn btn-outline-primary btn-sm font-weight-bold">
        <i class="bi bi-arrow-left mr-1"></i> Volver al Panel SaaS
    </a>
</div>

<div class="row">
    <!-- Tarjeta Resumen de Cuenta SuperAdmin -->
    <div class="col-lg-4 mb-4">
        <div class="card border-0 shadow-sm h-100" style="border-radius: 16px; overflow: hidden;">
            <div class="card-body text-center p-4" style="background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%); color: #fff;">
                <div class="position-relative d-inline-block mb-3">
                    <img id="previewAvatarCard"
                         src="{{ $user->getAvatarUrl() }}"
                         class="img-circle elevation-3"
                         style="width: 110px; height: 110px; object-fit: cover; border: 3px solid rgba(255,255,255,0.4);"
                         alt="SuperAdmin">
                    <label for="inputFotoSuperAdmin"
                           class="btn btn-sm btn-warning rounded-circle shadow position-absolute"
                           style="bottom: 0; right: 0; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; cursor: pointer;"
                           title="Cambiar fotografía">
                        <i class="bi bi-camera-fill text-dark"></i>
                    </label>
                </div>
                <h5 class="font-weight-bold text-white mb-1">{{ $user->name }}</h5>
                <p class="text-white-50 small mb-3">{{ $user->email }}</p>

                <span class="badge badge-warning text-dark font-weight-bold px-3 py-2 mb-3" style="border-radius: 8px; font-size: 0.8rem;">
                    <i class="bi bi-shield-lock-fill mr-1"></i> SUPERADMIN GLOBAL SAAS
                </span>

                <hr style="border-color: rgba(255,255,255,0.15);">

                <div class="text-left small text-white-50">
                    <div class="d-flex justify-content-between py-1">
                        <span>Nivel de Acceso:</span>
                        <b class="text-white">Administrador SaaS</b>
                    </div>
                    <div class="d-flex justify-content-between py-1">
                        <span>Ámbito:</span>
                        <b class="text-success">Independiente de Clínicas</b>
                    </div>
                    <div class="d-flex justify-content-between py-1">
                        <span>Última actualización:</span>
                        <b class="text-white">{{ $user->updated_at ? $user->updated_at->format('d/m/Y H:i') : 'Reciente' }}</b>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Formulario para Cambiar Foto, Correo y Contraseña -->
    <div class="col-lg-8 mb-4">
        <div class="card card-outline card-primary shadow-sm h-100" style="border-radius: 16px;">
            <div class="card-header">
                <h5 class="card-title font-weight-bold mb-0">
                    <i class="bi bi-key-fill text-primary mr-1"></i> Actualizar Foto, Correo y Contraseña de SuperAdmin
                </h5>
            </div>
            <form action="{{ route('admin.saas.perfil.update') }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                <div class="card-body">
                    @if($errors->any())
                        <div class="alert alert-danger">
                            <ul class="mb-0 pl-3">
                                @foreach($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <h6 class="text-uppercase font-weight-bold text-primary small mb-3">
                        <i class="bi bi-person-badge mr-1"></i> 1. Fotografía, Nombre y Correo de Acceso
                    </h6>
                    <div class="row align-items-center">
                        <div class="col-md-12 form-group">
                            <label class="font-weight-bold">Fotografía de Perfil</label>
                            <div class="d-flex align-items-center p-2 border rounded bg-light">
                                <img id="previewAvatarMini"
                                     src="{{ $user->getAvatarUrl() }}"
                                     class="img-circle mr-3 border"
                                     style="width: 52px; height: 52px; object-fit: cover;"
                                     alt="Vista previa">
                                <div class="flex-grow-1">
                                    <input type="file"
                                           name="foto"
                                           id="inputFotoSuperAdmin"
                                           class="form-control-file"
                                           accept="image/jpeg,image/png,image/jpg,image/webp,image/gif"
                                           onchange="previsualizarFotoSuperAdmin(this)">
                                    <small class="text-muted d-block mt-1">Formatos permitidos: JPG, PNG, WEBP (Máx. 3 MB).</small>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6 form-group">
                            <label class="font-weight-bold">Nombre del SuperAdmin *</label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="bi bi-person-fill"></i></span>
                                </div>
                                <input type="text" name="name" class="form-control" value="{{ old('name', $user->name) }}" required>
                            </div>
                        </div>

                        <div class="col-md-6 form-group">
                            <label class="font-weight-bold">Correo Electrónico (Login) *</label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="bi bi-envelope-fill"></i></span>
                                </div>
                                <input type="email" name="email" class="form-control" value="{{ old('email', $user->email) }}" required>
                            </div>
                            <small class="text-muted">Con este correo iniciará sesión en el panel SuperAdmin SaaS.</small>
                        </div>
                    </div>

                    <hr class="my-3">

                    <h6 class="text-uppercase font-weight-bold text-primary small mb-2">
                        <i class="bi bi-shield-lock mr-1"></i> 2. Cambiar Contraseña
                    </h6>
                    <p class="text-muted small mb-3">
                        Complete los siguientes campos únicamente si desea cambiar su contraseña actual. Si solo desea actualizar su foto, correo o nombre, puede dejarlos en blanco.
                    </p>

                    <div class="row">
                        <div class="col-md-4 form-group">
                            <label class="font-weight-bold">Contraseña Actual</label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="bi bi-unlock-fill"></i></span>
                                </div>
                                <input type="password" name="password_actual" class="form-control" placeholder="••••••••" autocomplete="current-password">
                            </div>
                        </div>

                        <div class="col-md-4 form-group">
                            <label class="font-weight-bold">Nueva Contraseña</label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="bi bi-lock-fill text-primary"></i></span>
                                </div>
                                <input type="password" name="password" class="form-control" placeholder="Mínimo 6 caracteres" autocomplete="new-password">
                            </div>
                        </div>

                        <div class="col-md-4 form-group">
                            <label class="font-weight-bold">Confirmar Nueva Contraseña</label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="bi bi-check2-circle text-success"></i></span>
                                </div>
                                <input type="password" name="password_confirmation" class="form-control" placeholder="Repita la contraseña" autocomplete="new-password">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card-footer bg-white d-flex justify-content-end" style="border-radius: 0 0 16px 16px;">
                    <button type="submit" class="btn btn-primary font-weight-bold px-4 shadow-sm">
                        <i class="bi bi-save mr-1"></i> Guardar Cambios del Perfil
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    function previsualizarFotoSuperAdmin(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
                var imgCard = document.getElementById('previewAvatarCard');
                var imgMini = document.getElementById('previewAvatarMini');
                if (imgCard) imgCard.src = e.target.result;
                if (imgMini) imgMini.src = e.target.result;
            };
            reader.readAsDataURL(input.files[0]);
        }
    }
</script>
@endsection