@extends('layouts.app')

@section('content')
<div class="modern-page-container">
    <!-- Header da página -->
    <div class="page-header">
        <div class="page-header-content">
            <div class="page-title-section">
                <h1 class="page-title">Minha Conta</h1>
                <p class="page-subtitle">Edite seus dados pessoais e de contato</p>
            </div>
            <a href="{{ route('admin.dashboard') }}" class="btn-modern btn-outline">
                <i class="bi bi-arrow-left"></i>
                <span>Voltar</span>
            </a>
        </div>
    </div>

    <!-- Formulário -->
    <div class="form-card">
        <form action="{{ route('profile.update') }}" method="POST" class="modern-form">
            @csrf
            @method('PUT')
            
            <div class="form-grid">
                <div class="form-group">
                    <label for="name" class="form-label required">Nome Completo</label>
                    <input type="text" 
                           id="name" 
                           name="name" 
                           class="form-control @error('name') is-invalid @enderror" 
                           value="{{ old('name', $user->name) }}" 
                           required>
                    @error('name')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="form-group">
                    <label for="email" class="form-label required">E-mail</label>
                    <input type="email" 
                           id="email" 
                           name="email" 
                           class="form-control @error('email') is-invalid @enderror" 
                           value="{{ old('email', $user->email) }}" 
                           required>
                    @error('email')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="form-group">
                    <label for="cpf_cnpj" class="form-label">CPF/CNPJ</label>
                    <input type="text" 
                           id="cpf_cnpj" 
                           name="cpf_cnpj" 
                           class="form-control @error('cpf_cnpj') is-invalid @enderror" 
                           value="{{ old('cpf_cnpj', $user->cpf_cnpj) }}">
                    @error('cpf_cnpj')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="form-group">
                    <label for="celular" class="form-label">Celular</label>
                    <input type="text" 
                           id="celular" 
                           name="celular" 
                           class="form-control @error('celular') is-invalid @enderror" 
                           value="{{ old('celular', $user->celular) }}">
                    @error('celular')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="form-group form-group-full">
                    <label for="endereco" class="form-label">Endereço</label>
                    <input type="text" 
                           id="endereco" 
                           name="endereco" 
                           class="form-control @error('endereco') is-invalid @enderror" 
                           value="{{ old('endereco', $user->endereco) }}">
                    @error('endereco')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="form-group">
                    <label for="complemento" class="form-label">Complemento</label>
                    <input type="text" 
                           id="complemento" 
                           name="complemento" 
                           class="form-control @error('complemento') is-invalid @enderror" 
                           value="{{ old('complemento', $user->complemento) }}">
                    @error('complemento')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="form-group">
                    <label for="bairro" class="form-label">Bairro</label>
                    <input type="text" 
                           id="bairro" 
                           name="bairro" 
                           class="form-control @error('bairro') is-invalid @enderror" 
                           value="{{ old('bairro', $user->bairro) }}">
                    @error('bairro')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="form-group">
                    <label for="cidade" class="form-label">Cidade</label>
                    <input type="text" 
                           id="cidade" 
                           name="cidade" 
                           class="form-control @error('cidade') is-invalid @enderror" 
                           value="{{ old('cidade', $user->cidade) }}">
                    @error('cidade')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="form-group">
                    <label for="uf" class="form-label">UF</label>
                    <select id="uf" 
                            name="uf" 
                            class="form-control @error('uf') is-invalid @enderror">
                        <option value="">Selecione...</option>
                        @foreach(['AC', 'AL', 'AP', 'AM', 'BA', 'CE', 'DF', 'ES', 'GO', 'MA', 'MT', 'MS', 'MG', 'PA', 'PB', 'PR', 'PE', 'PI', 'RJ', 'RN', 'RS', 'RO', 'RR', 'SC', 'SP', 'SE', 'TO'] as $estado)
                            <option value="{{ $estado }}" {{ old('uf', $user->uf) == $estado ? 'selected' : '' }}>
                                {{ $estado }}
                            </option>
                        @endforeach
                    </select>
                    @error('uf')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="form-group">
                    <label for="cep" class="form-label">CEP</label>
                    <input type="text" 
                           id="cep" 
                           name="cep" 
                           class="form-control @error('cep') is-invalid @enderror" 
                           value="{{ old('cep', $user->cep) }}"
                           placeholder="00000-000">
                    @error('cep')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>

            <!-- Botões de ação -->
            <div class="form-actions">
                <button type="submit" class="btn-modern btn-primary">
                    <i class="bi bi-check-lg"></i>
                    <span>Salvar Alterações</span>
                </button>
                <a href="{{ route('admin.dashboard') }}" class="btn-modern btn-outline">
                    <i class="bi bi-x-lg"></i>
                    <span>Cancelar</span>
                </a>
            </div>
        </form>
    </div>
</div>

<style>
/* Estilos básicos da página */
.modern-page-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

.page-header {
    margin-bottom: 32px;
    padding: 32px 0;
}

.page-header-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
}

.page-title-section {
    flex: 1;
}

.page-title {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px 0;
    letter-spacing: -0.025em;
}

.page-subtitle {
    font-size: 16px;
    color: var(--text-secondary);
    margin: 0;
}

.btn-modern {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    border: 1px solid transparent;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.btn-primary {
    background: var(--primary-color);
    color: white;
    box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    color: white;
}

.btn-outline {
    background: transparent;
    border-color: var(--border-color);
    color: var(--text-secondary);
}

.btn-outline:hover {
    background: var(--background-tertiary);
    color: var(--text-primary);
}

.form-card {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 32px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

.modern-form {
    width: 100%;
}

.form-label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.form-label.required::after {
    content: " *";
    color: #ef4444;
}

.form-control {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 14px;
    color: var(--text-primary);
    background: var(--background-secondary);
    transition: all 0.2s ease;
}

.form-control:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.form-control.is-invalid {
    border-color: #ef4444;
}

.invalid-feedback {
    display: block;
    font-size: 12px;
    color: #ef4444;
    margin-top: 4px;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    align-items: start;
}

.form-group-full {
    grid-column: 1 / -1;
}

.form-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    padding-top: 2rem;
    border-top: 1px solid var(--border-subtle);
    margin-top: 2rem;
}
</style>
@endsection