@extends('client.layouts.app')

@section('content')
    <!-- Datos del usuario -->
    <div class="card">
        <div class="card-header">
            <h4 class="card-title mb-0">Mi Perfil</h4>
        </div>
        <div class="card-body">
            <form id="profileForm">
                @csrf
                <div class="row">
                    <div class="col-md-4 mb-3">
                        <label for="name" class="form-label">Nombre</label>
                        <input type="text" class="form-control" id="name" name="name" value="{{ $user->name }}" required>
                    </div>
                    <div class="col-md-4 mb-3">
                        <label for="lastname" class="form-label">Apellido</label>
                        <input type="text" class="form-control" id="lastname" name="lastname" value="{{ $user->lastname }}" required>
                    </div>
                    <div class="col-md-4 mb-3">
                        <label for="email" class="form-label">Correo electronico</label>
                        <input type="email" class="form-control" id="email" name="email" value="{{ $user->email }}" required>
                    </div>
                </div>
                <button type="submit" class="btn btn-primary">Guardar cambios</button>
            </form>
        </div>
    </div>

    <!-- Cambio de contrasena -->
    <div class="card mt-4">
        <div class="card-header">
            <h4 class="card-title mb-0">Cambiar Contrasena</h4>
        </div>
        <div class="card-body">
            <form id="passwordForm">
                @csrf
                <div class="row">
                    <div class="col-md-4 mb-3">
                        <label for="current_password" class="form-label">Contrasena actual</label>
                        <input type="password" class="form-control" id="current_password" name="current_password" required>
                    </div>
                    <div class="col-md-4 mb-3">
                        <label for="password" class="form-label">Nueva contrasena</label>
                        <input type="password" class="form-control" id="password" name="password" required minlength="8">
                    </div>
                    <div class="col-md-4 mb-3">
                        <label for="password_confirmation" class="form-label">Confirmar contrasena</label>
                        <input type="password" class="form-control" id="password_confirmation" name="password_confirmation" required minlength="8">
                    </div>
                </div>
                <button type="submit" class="btn btn-primary">Cambiar contrasena</button>
            </form>
        </div>
    </div>

    <!-- Datos del cliente (solo lectura) -->
    @if($cliente)
    <div class="card mt-4">
        <div class="card-header">
            <h4 class="card-title mb-0">Datos del Cliente</h4>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-4 mb-3">
                    <label class="form-label text-muted">Nombre / Razon Social</label>
                    <p class="form-control-plaintext">{{ $cliente->nombre }}</p>
                </div>
                <div class="col-md-4 mb-3">
                    <label class="form-label text-muted">RFC</label>
                    <p class="form-control-plaintext">{{ $cliente->rfc }}</p>
                </div>
                <div class="col-md-4 mb-3">
                    <label class="form-label text-muted">Correo</label>
                    <p class="form-control-plaintext">{{ $cliente->correo }}</p>
                </div>
                <div class="col-md-4 mb-3">
                    <label class="form-label text-muted">Telefono</label>
                    <p class="form-control-plaintext">{{ $cliente->telefono ?? 'No registrado' }}</p>
                </div>
            </div>
        </div>
    </div>
    @endif
@endsection

@push('javascript')
<script>
    $('#profileForm').on('submit', function(e) {
        e.preventDefault();

        $.ajax({
            url: "{{ route('client.profile.update') }}",
            type: 'POST',
            data: $(this).serialize(),
            success: function(data) {
                Swal.fire({
                    title: 'Exito',
                    text: data.message,
                    icon: 'success',
                    timer: 1500
                });
            },
            error: function(xhr) {
                Swal.fire({
                    title: 'Error',
                    text: xhr.responseJSON?.error || 'Error al actualizar el perfil',
                    icon: 'error'
                });
            }
        });
    });

    $('#passwordForm').on('submit', function(e) {
        e.preventDefault();

        $.ajax({
            url: "{{ route('client.profile.password') }}",
            type: 'POST',
            data: $(this).serialize(),
            success: function(data) {
                Swal.fire({
                    title: 'Exito',
                    text: data.message,
                    icon: 'success',
                    timer: 1500
                });
                $('#passwordForm')[0].reset();
            },
            error: function(xhr) {
                Swal.fire({
                    title: 'Error',
                    text: xhr.responseJSON?.error || 'Error al cambiar la contrasena',
                    icon: 'error'
                });
            }
        });
    });
</script>
@endpush