@extends('layouts.site')

@section('title', 'Adicionar Novo Endereço')

@section('content')
    <div class="container">
        {{-- Título Principal da Página --}}
        <div class="row">
            <div class="col-12">
                <h1 class="display-5 mb-4">Minha Conta</h1>
                <hr>
            </div>
        </div>

        {{-- Layout do Painel do Cliente --}}
        <div class="row">
            {{-- Coluna do Menu Lateral --}}
            <div class="col-md-3">
                <div class="list-group">
                    <a href="{{ route('site.account.index') }}" class="list-group-item list-group-item-action">
                        <i class="fas fa-shopping-basket fa-fw me-2"></i> Meus Pedidos
                    </a>
                    <a href="{{ route('site.address.index') }}" class="list-group-item list-group-item-action active">
                        <i class="fas fa-map-marker-alt fa-fw me-2"></i> Meus Endereços
                    </a>
                    <a href="{{ route('site.account.edit') }}" class="list-group-item list-group-item-action">
                        <i class="fas fa-user-edit fa-fw me-2"></i> Meus Dados
                    </a>
                    <a href="#" class="list-group-item list-group-item-action" 
                       onclick="event.preventDefault(); document.getElementById('logout-form-sidebar').submit();">
                       <i class="fas fa-sign-out-alt fa-fw me-2"></i> Sair
                    </a>
                    <form id="logout-form-sidebar" action="{{ route('logout') }}" method="POST" class="d-none">
                        @csrf
                    </form>
                </div>
            </div>

            {{-- Coluna do Conteúdo Principal --}}
            <div class="col-md-9">
                <div class="card shadow-sm">
                    <div class="card-header bg-dark text-white">
                        <h5 class="mb-0">Adicionar Novo Endereço</h5>
                    </div>
                    <div class="card-body">
                        @if ($errors->any())
                            <div class="alert alert-danger">
                                <strong>Ops!</strong> Verifique os erros abaixo.<br><br>
                                <ul>
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        <form action="{{ route('site.address.store') }}" method="POST">
                            @csrf
                            <div class="mb-3">
                                <label for="titulo" class="form-label">Apelido do Endereço</label>
                                <input type="text" name="titulo" id="titulo" class="form-control" value="{{ old('titulo') }}" placeholder="Ex: Casa, Trabalho" required>
                            </div>

                            <div class="row">
                                <div class="col-md-4 mb-3">
                                    <label for="cep" class="form-label">CEP</label>
                                    <input type="text" name="cep" id="cep" class="form-control" value="{{ old('cep') }}" required>
                                </div>
                                <div class="col-md-8 mb-3">
                                    <label for="logradouro" class="form-label">Endereço (Rua, Av.)</label>
                                    <input type="text" name="logradouro" id="logradouro" class="form-control" value="{{ old('logradouro') }}" required>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-4 mb-3">
                                    <label for="numero" class="form-label">Número</label>
                                    <input type="text" name="numero" id="numero" class="form-control" value="{{ old('numero') }}" required>
                                </div>
                                <div class="col-md-8 mb-3">
                                    <label for="complemento" class="form-label">Complemento (Opcional)</label>
                                    <input type="text" name="complemento" id="complemento" class="form-control" value="{{ old('complemento') }}">
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-5 mb-3">
                                    <label for="bairro" class="form-label">Bairro</label>
                                    <input type="text" name="bairro" id="bairro" class="form-control" value="{{ old('bairro') }}" required>
                                </div>
                                <div class="col-md-5 mb-3">
                                    <label for="cidade" class="form-label">Cidade</label>
                                    <input type="text" name="cidade" id="cidade" class="form-control" value="{{ old('cidade') }}" required>
                                </div>
                                <div class="col-md-2 mb-3">
                                    <label for="estado" class="form-label">Estado</label>
                                    <input type="text" name="estado" id="estado" class="form-control" value="{{ old('estado') }}" required maxlength="2" placeholder="Ex: PA">
                                </div>
                            </div>

                            <button type="submit" class="btn btn-danger">Salvar Endereço</button>
                            <a href="{{ route('site.address.index') }}" class="btn btn-secondary">Cancelar</a>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

{{-- ======================================================= --}}
{{--         SCRIPT DO VIACEP ADICIONADO AQUI                --}}
{{-- ======================================================= --}}
@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const cepInput = document.getElementById('cep');
        const logradouroInput = document.getElementById('logradouro');
        const bairroInput = document.getElementById('bairro');
        const cidadeInput = document.getElementById('cidade');
        const estadoInput = document.getElementById('estado');

        cepInput.addEventListener('blur', function () {
            const cep = this.value.replace(/\D/g, ''); // Remove caracteres não numéricos

            if (cep.length === 8) {
                fetch(`https://viacep.com.br/ws/${cep}/json/`)
                    .then(response => response.json())
                    .then(data => {
                        if (!data.erro) {
                            logradouroInput.value = data.logradouro;
                            bairroInput.value = data.bairro;
                            cidadeInput.value = data.localidade;
                            estadoInput.value = data.uf;
                        }
                    })
                    .catch(error => console.error('Erro ao buscar CEP:', error));
            }
        });
    });
</script>
@endpush