@extends('layouts.app')
@section('title', 'Perfil')

@section('content')
<div class="profile-container" 
     x-data="profile" 
     data-status="{{ session('status') }}"> 
    
    <div>
        <h1 class="color-primary text-center mb-5">Perfil</h1>

        <form method="POST" action="{{ route('profile.update') }}">
            @csrf
            @method('PATCH')
            
            <h4 class="color-primary mt-4 mb-3">Informações do Perfil</h4>
            <div class="mb-3">
                <label for="name" class="form-label">Nome</label>
                <input type="text" name="name" id="name" class="form-control @error('name') is-invalid @enderror" value="{{ old('name', $user->name) }}" required>
                @error('name') <div class="text-danger">{{ $message }}</div> @enderror
            </div>
            
            <div class="mb-3">
                <label for="email" class="form-label">E-mail</label>
                <input type="email" name="email" id="email" class="form-control @error('email') is-invalid @enderror" value="{{ old('email', $user->email) }}" required>
                @error('email') <div class="text-danger">{{ $message }}</div> @enderror
            </div>

            <div class="d-grid gap-2">
                <button type="submit" class="btn btn-primary btn-block">Salvar</button>
            </div>
        </form>

        <h4 class="color-primary mt-4 mb-3">Segurança</h4>
        <div class="d-grid gap-2">
            <button type="button" 
                    class="btn btn-secondary" 
                    @click="openPasswordModal('{{ route('profile.update.password') }}')">
                Alterar Senha
            </button>
        </div>

        <h4 class="color-primary mt-4 mb-3">Excluir Conta</h4>
        <div class="d-grid gap-2 mb-2">
            <button type="button" 
                    class="btn btn-danger btn-block" 
                    @click="confirmDelete('{{ route('profile.destroy') }}')">
                Excluir Conta
            </button>                
        </div>
        <p style="font-style: italic; font-size: 0.8rem; color: #838383;">Essa ação é permanente e não pode ser desfeita.</p>
    </div>
</div>
@endsection