@extends('layouts.app')

@section('content')
<div class="container py-4">
    <div class="row">
        <div class="col-md-6">
            <!-- Información del perfil -->
            <div class="card">
                <div class="card-header bg-primary text-white">Información del Perfil</div>
                <div class="card-body">
                    <form id="profile-form" method="post" action="{{ route('profile.update') }}">
                        @csrf
                        @method('patch')

                        <div class="mb-3">
                            <label for="name" class="form-label">Nombre</label>
                            <input type="text" id="name" name="name" class="form-control" value="{{ old('name', $user->name) }}" required>
                            <div class="text-danger error-name"></div>
                        </div>

                        <div class="mb-3">
                            <label for="email" class="form-label">Correo Electrónico</label>
                            <input type="email" id="email" name="email" class="form-control" value="{{ old('email', $user->email) }}" required>
                            <div class="text-danger error-email"></div>
                        </div>

                        <div class="mb-3">
                            <label for="tema" class="form-label">Tema:</label>
                            {{-- Asigna el valor a la variable $tema pero no lo imprime --}}
                            @php
                                $tema = isset($user->aditional_info) ? json_decode($user->aditional_info)->tema : null;
                            @endphp

                            <select class="form-select @error('tema') is-invalid @enderror" id="tema" name="tema">
                            <option value="quartz" {{ $tema == 'quartz' ? 'selected' : '' }}>Quartz</option>
                            <option value="lumen" {{ $tema == 'lumen' ? 'selected' : '' }}>Lumen</option>
                            <option value="minty" {{ $tema == 'minty' ? 'selected' : '' }}>Minty</option>
                            <option value="cerulean" {{ $tema == 'cerulean' ? 'selected' : '' }}>Cerulean</option>
                            <option value="cosmo" {{ $tema == 'cosmo' ? 'selected' : '' }}>Cosmo</option>
                            <option value="cyborg" {{ $tema == 'cyborg' ? 'selected' : '' }}>Cyborg</option>
                            <option value="darkly" {{ $tema == 'darkly' ? 'selected' : '' }}>Darkly</option>
                            <option value="flatly" {{ $tema == 'flatly' ? 'selected' : '' }}>Flatly</option>
                            <option value="journal" {{ $tema == 'journal' ? 'selected' : '' }}>Journal</option>
                            <option value="litera" {{ $tema == 'litera' ? 'selected' : '' }}>Litera</option>
                            <option value="lux" {{ $tema == 'lux' ? 'selected' : '' }}>Lux</option>
                            <option value="materia" {{ $tema == 'materia' ? 'selected' : '' }}>Materia</option>
                            <option value="morph" {{ $tema == 'morph' ? 'selected' : '' }}>Morph</option>
                            <option value="pulse" {{ $tema == 'pulse' ? 'selected' : '' }}>Pulse</option>
                            <option value="sandstone" {{ $tema == 'sandstone' ? 'selected' : '' }}>Sandstone</option>
                            <option value="simplex" {{ $tema == 'simplex' ? 'selected' : '' }}>Simplex</option>
                            <option value="sketchy" {{ $tema == 'sketchy' ? 'selected' : '' }}>Sketchy</option>
                            <option value="slate" {{ $tema == 'slate' ? 'selected' : '' }}>Slate</option>
                            <option value="solar" {{ $tema == 'solar' ? 'selected' : '' }}>Solar</option>
                            <option value="spacelab" {{ $tema == 'spacelab' ? 'selected' : '' }}>Spacelab</option>
                            <option value="superhero" {{ $tema == 'superhero' ? 'selected' : '' }}>Superhero</option>
                            <option value="united" {{ $tema == 'united' ? 'selected' : '' }}>United</option>
                            <option value="vapor" {{ $tema == 'vapor' ? 'selected' : '' }}>Vapor</option>
                            <option value="yeti" {{ $tema == 'yeti' ? 'selected' : '' }}>Yeti</option>
                            <option value="zephyr" {{ $tema == 'zephyr' ? 'selected' : '' }}>Zephyr</option>
                            </select>

                        @error('tema')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                        <button type="submit" class="btn btn-primary">Guardar Cambios</button>
                        <div class="text-success mt-2 profile-message" style="display: none;">¡Perfil actualizado!</div>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <!-- Cambio de contraseña -->
            <div class="card">
                <div class="card-header bg-warning text-dark">Actualizar Contraseña</div>
                <div class="card-body">
                    <form id="password-form" method="post" action="{{ route('password.update') }}">
                        @csrf
                        @method('put')

                        <div class="mb-3">
                            <label for="current_password" class="form-label">Contraseña Actual</label>
                            <input type="password" id="current_password" name="current_password" class="form-control" required>
                            <div class="text-danger error-current-password"></div>
                        </div>

                        <div class="mb-3">
                            <label for="password" class="form-label">Nueva Contraseña</label>
                            <input type="password" id="password" name="password" class="form-control" required>
                            <div class="text-danger error-password"></div>
                        </div>

                        <div class="mb-3">
                            <label for="password_confirmation" class="form-label">Confirmar Nueva Contraseña</label>
                            <input type="password" id="password_confirmation" name="password_confirmation" class="form-control" required>
                        </div>

                        <button type="submit" class="btn btn-warning">Actualizar Contraseña</button>
                        <div class="text-success mt-2 password-message" style="display: none;">¡Contraseña actualizada!</div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- jQuery para manejar las validaciones y respuestas AJAX -->
<script>
    $(document).ready(function() {
    // Envío del formulario de perfil con AJAX
    $('#profile-form').on('submit', function(e) {
        e.preventDefault();
        let form = $(this);
        $.ajax({
            url: form.attr('action'),
            method: 'POST',
            data: form.serialize(),
            success: function(response) {
                location.reload(); // Recarga la página tras la actualización
            },
            error: function(xhr) {
                let errors = xhr.responseJSON.errors;
                $('.error-name').text(errors.name ? errors.name[0] : '');
                $('.error-email').text(errors.email ? errors.email[0] : '');
            }
        });
    });

    // Envío del formulario de contraseña con AJAX (se mantiene igual)
    $('#password-form').on('submit', function(e) {
        e.preventDefault();
        let form = $(this);
        $.ajax({
            url: form.attr('action'),
            method: 'POST',
            data: form.serialize(),
            success: function(response) {
                $('.password-message').fadeIn().delay(2000).fadeOut();
                $('.error-current-password, .error-password').text('');
                form.trigger('reset'); // Limpia los campos
            },
            error: function(xhr) {
                let errors = xhr.responseJSON.errors;
                $('.error-current-password').text(errors.current_password ? errors.current_password[0] : '');
                $('.error-password').text(errors.password ? errors.password[0] : '');
            }
        });
    });
});

</script>
@endsection