@extends('layouts.app')

@section('content')
<div class="container-fluid p-0">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('supermercados.index') }}">Supermercados</a></li>
            <li class="breadcrumb-item active" aria-current="page">Cadastrar</li>
        </ol>
    </nav>

    @include('includes.alerts')

    <form class="card shadow-sm" action="{{ route('supermercados.store') }}" method="POST">
        @csrf
        <div class="card-header">
            <h5 class="card-title mb-0">Novo Supermercado</h5>
        </div>
        <div class="card-body">
            <div class="row g-2">
                <div class="col-12 col-lg-5">
                    <label for="ipt-razao-social" class="form-label">Razão social:</label>
                    <input type="text" name="razao_social" value="{{ old('razao_social') }}" class="form-control @error('razao_social') is-invalid @enderror" id="ipt-razao-social" aria-describedby="Razão social">
                    @error('razao_social')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-12 col-lg-4">
                    <label for="ipt-nome-fantasia" class="form-label">Nome fantasia:</label>
                    <input type="text" name="nome_fantasia" value="{{ old('nome_fantasia') }}" class="form-control @error('nome_fantasia') is-invalid @enderror" id="ipt-nome-fantasia" aria-describedby="Nome fantasia">
                    @error('nome_fantasia')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="col-12 col-lg-3">
                    <label for="ipt-id_supermercado_redes" class="form-label">Supermercados Rede:</label>
                    <select class="form-control form-select select-custom  @error('id_supermercado_redes') is-invalid @enderror" name="id_supermercado_redes" aria-describedby="Rede Supermercado">
                        <option value="">Todos</option>
                        @foreach ($supermercado_rede as $redes)
                            <option value="{{$redes->id_supermercado_redes}}">{{ $redes->nome_rede }}</option>
                        @endforeach
                    </select>
                    @error('id_supermercado_redes')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="col-12 col-lg-4">
                    <label for="ipt-email" class="form-label">E-mail:</label>
                    <input type="text" name="email" value="{{ old('email') }}" class="form-control @error('email') is-invalid @enderror" id="ipt-email" aria-describedby="email">
                    @error('email')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-12 col-lg-2">
                    <label for="ipt-telefone" class="form-label">Telefone:</label>
                    <input type="text" name="telefone" value="{{ old('telefone') }}" class="form-control @error('telefone') is-invalid @enderror" id="ipt-telefone" aria-describedby="telefone">
                    @error('telefone')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-12 col-lg-3">
                    <label for="ipt-cnpj" class="form-label">CNPJ:</label>
                    <input type="text" name="cnpj" value="{{ old('cnpj') }}" class="form-control @error('cnpj') is-invalid @enderror" id="ipt-cnpj" aria-describedby="cnpj" v-mask="'##.###.###/####-##'">
                    @error('cnpj')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-12 col-lg-3">
                    <label for="ipt-ie" class="form-label">Inscrição estadual:</label>
                    <input type="text" name="ie" value="{{ old('ie') }}" class="form-control @error('ie') is-invalid @enderror" id="ipt-cnpj" aria-describedby="Inscrição estadual" v-mask="'###.###.###.###'">
                    @error('ie')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-12 col-lg-2">
                    <label for="ipt-cep" class="form-label">CEP:</label>
                    <input type="text" name="cep" value="{{ old('cep') }}" class="form-control @error('cep') is-invalid @enderror" id="ipt-cep" aria-describedby="CEP" v-mask="'#####-###'">
                    @error('cep')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-12 col-lg-5">
                    <label for="ipt-endereco" class="form-label">Endereço:</label>
                    <input type="text" name="endereco" value="{{ old('endereco') }}" class="form-control @error('endereco') is-invalid @enderror" id="ipt-endereco" aria-describedby="Endereço">
                    @error('endereco')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-12 col-lg-3">
                    <label for="ipt-bairro" class="form-label">Bairro:</label>
                    <input type="text" name="bairro" value="{{ old('bairro') }}" class="form-control @error('bairro') is-invalid @enderror" id="ipt-bairro" aria-describedby="Bairro">
                    @error('bairro')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-12 col-lg-2">
                    <label for="ipt-numero" class="form-label">Número:</label>
                    <input type="text" name="numero" value="{{ old('numero') }}" class="form-control @error('numero') is-invalid @enderror" id="ipt-numero" aria-describedby="Número">
                    @error('numero')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-12 col-lg-2">
                    <label for="ipt-uf" class="form-label">UF:</label>
                    <select name="uf" class="form-select @error('uf') is-invalid @enderror" id="ipt-uf" aria-describedby="UF">
                        <option value="">Selecione...</option>
                        <option value="AC">Acre</option>
                        <option value="AL">Alagoas</option>
                        <option value="AP">Amapá</option>
                        <option value="AM">Amazonas</option>
                        <option value="BA">Bahia</option>
                        <option value="CE">Ceará</option>
                        <option value="DF">Distrito Federal</option>
                        <option value="ES">Espírito Santo</option>
                        <option value="GO">Goiás</option>
                        <option value="MA">Maranhão</option>
                        <option value="MT">Mato Grosso</option>
                        <option value="MS">Mato Grosso do Sul</option>
                        <option value="MG">Minas Gerais</option>
                        <option value="PA">Pará</option>
                        <option value="PB">Paraíba</option>
                        <option value="PR">Paraná</option>
                        <option value="PE">Pernambuco</option>
                        <option value="PI">Piauí</option>
                        <option value="RJ">Rio de Janeiro</option>
                        <option value="RN">Rio Grande do Norte</option>
                        <option value="RS">Rio Grande do Sul</option>
                        <option value="RO">Rondônia</option>
                        <option value="RR">Roraima</option>
                        <option value="SC">Santa Catarina</option>
                        <option value="SP">São Paulo</option>
                        <option value="SE">Sergipe</option>
                        <option value="TO">Tocantins</option>
                    </select>
                    @error('uf')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>
        </div>
        <div class="card-footer text-end">
            <button type="submit" class="btn btn-success">Cadastrar</button>
        </div>
    </form>
</div>
@endsection
@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        document.getElementById('ipt-cep').addEventListener('blur', function() {
            const cep = this.value.replace(/\D/g, '');

            fetch('https://viacep.com.br/ws/' + cep + '/json/')
                .then(response => response.json())
                .then(data => {
                    if(data.erro){
                        alert('CEP não encontrado.');
                        return false;
                    }

                    document.getElementById('ipt-endereco').value = data.logradouro;
                    document.getElementById('ipt-bairro').value = data.bairro;
                    document.getElementById('ipt-uf').value = data.uf;
                    
                }).catch(error => console.error('Erro ao buscar CEP:', error));
        });
    });
</script>
@endpush