@extends('layouts.auth-master')

@section('title', 'Cadastre-se | JVS')

@section('style')
<style>
    .selectpicker + button.is-invalid {
        border-color: #dc3545;
        padding-right: calc(1.5em + 0.75rem);
        background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e) !important;
        background-repeat: no-repeat;
        background-position: right calc(0.375em + 0.1875rem) center;
        background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    }
</style>
@endsection

@section('content')
 <div class="account-pages my-5 pt-sm-5" style="flex: 1 0 auto">
        <div class="container">
            <div class="row justify-content-center">
                <div class="card-login" style="padding: 0px 10px">
                    <div class="card overflow-hidden">
                        <div class="card-body pt-0">

                            <h3 class="text-center mt-4 mb-0">
                                <a href="/" class="logo logo-admin"><img src="{{ URL::asset('/images/logo-soeltech.jpg')}}" height="80" alt="logo" title="SoelX"></a>
                            </h3>

                            <div class="p-3 pt-1">
                                <h4 class="text-muted font-size-18 mb-1 text-center">Cadastre-se</h4>
                                <form class="form-horizontal mt-2 form-register" method="POST" action="{{ route('user.register') }}">

                                    @csrf

                                    <div class="row">
                                        <div class="col tabs">

                                            <!-- Nav tabs -->
                                            <ul class="nav nav-tabs d-none">
                                                <li class="nav-item">
                                                    <button class="nav-link active" data-toggle="tab" data-target="#dados_user" type="button" role="tab" href="#dados_user"><strong>Dados de usuário</strong></button>
                                                </li>
                                                <li class="nav-item">
                                                    <button class="nav-link" data-toggle="tab" data-target="#dados" type="button" role="tab" href="#dados"><strong>Dados pessoais</strong></button>
                                                </li>
                                                <li class="nav-item">
                                                    <button class="nav-link" data-toggle="tab" data-target="#endereco" type="button" role="tab" href="#endereco"><strong>Endereço</strong></button>
                                                </li>
                                                <li class="nav-item">
                                                    <button class="nav-link" data-toggle="tab" data-target="#contato" type="button" role="tab" href="#contato"><strong>Contato</strong></button>
                                                </li>
                                            </ul>

                                            <!-- Tab panes -->
                                            <div class="tab-content">
                                                <div class="tab-pane container active" id="dados_user">
                                                    <h5>Dados de Usuário</h5>
                                                    <hr>
                                                    <div class="row">

                                                        <div class="col-12">
                                                            <div class="form-group mb-3">
                                                                <label for="useremail">E-mail <span class="text-danger">*</span></label>
                                                                <input type="email" name="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" id="useremail" autocomplete="email" required>
                                                                @error('email')
                                                                    <span class="invalid-feedback d-block" role="alert">
                                                                        <strong>{{ $message }}</strong>
                                                                    </span>
                                                                @enderror
                                                            </div>
                                                        </div>
                                                        <div class="col-6">
                                                            <div class="form-group mb-3">
                                                                <label for="userpassword">{{ __('Senha') }} <span class="text-danger">*</span></label>
                                                                <input type="password" class="form-control @error('password') inválida @enderror" name="password" required autocomplete="new-password" id="userpassword">
                                                                @error('password')
                                                                <span class="invalid-feedback d-block" role="alert">
                                                                    <strong>{{ $message }}</strong>
                                                                </span>
                                                                @enderror
                                                            </div>
                                                        </div>
                                                        <div class="col-6">
                                                            <div class="form-group mb-3">
                                                                <label for="userpassword">{{ __('Confirme a sua senha') }} <span class="text-danger">*</span></label>
                                                                <input type="password" name="password_confirmation" class="form-control" id="userconfirmpassword" required>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="d-flex justify-content-end">
                                                        <a class="btn btn-sm btn-primary-soel btnNext">Confirmar</a>
                                                    </div>
                                                </div>

                                                <div class="tab-pane container fade" id="dados">
                                                    <h5>Dados Pessoais</h5>
                                                    <hr>
                                                    <div class="row">
                                                        <div class="col-2">
                                                            <div class="form-group mb-3">
                                                                <label for="tipo">Tipo de Pessoa <span class="text-danger">*</span></label>
                                                                <select class="form-select" id="tipo" name="tipo" required>
                                                                    @foreach ($tipos as $key => $tipo)
                                                                        <option value="{{$key}}" {{ old('tipo') == $key ? 'selected':'' }}>{{$tipo}}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                        </div>

                                                        <div class="col-6">
                                                            <div class="form-group mb-3">
                                                                <label for="username">Nome <span class="text-danger">*</span></label>
                                                                <input type="text" name="name" value="{{ old('name') }}" required autocomplete="name" class="form-control @error('name') is-invalid @enderror" id="name">
                                                                @error('name')
                                                                    <span class="invalid-feedback d-block" role="alert">
                                                                        <strong>{{ $message }}</strong>
                                                                    </span>
                                                                @enderror
                                                            </div>
                                                        </div>

                                                        <div class="col-4">
                                                            <div class="form-group mb-3">
                                                                <label for="cpf_cnpj">CPF <span class="text-danger">*</span></label>
                                                                <input type="text" name="cpf_cnpj" value="{{ old('cpf_cnpj') }}" required autocomplete="off" class="form-control @error('cpf_cnpj') is-invalid @enderror" id="cpf_cnpj">
                                                                @error('cpf_cnpj')
                                                                    <span class="invalid-feedback d-block" role="alert">
                                                                        <strong>{{ $message }}</strong>
                                                                    </span>
                                                                @enderror
                                                            </div>
                                                        </div>

                                                    </div>

                                                    <div class="justify-content-between d-flex">
                                                        <a class="btn btn-sm btn-secondary-soel btnPrevious">Voltar</a>
                                                        <a class="btn btn-sm btn-primary-soel btnNext">Confirmar</a>
                                                    </div>
                                                </div>

                                                <div class="tab-pane container fade" id="endereco">
                                                    <h5>Endereço</h5>
                                                    <hr>
                                                    <div class="row mt-3">
                                                        <div class="col-md-2">
                                                            <div class="form-group">
                                                                <label for="pais">Tipo de Endereço</label>
                                                                <select class="form-select" id="tipo_endereco" name="tipo_endereco">
                                                                    <option selected disabled>Selecione</option>
                                                                    @foreach ($tipoEndereco as $key => $tipo)
                                                                        <option value="{{$key}}" {{ old('tipo_endereco') == $key ? 'selected':'' }}>{{$tipo}}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <label for="pais">País <span class="text-danger"></span></label>
                                                                <select
                                                                    class="selectpicker form-control"
                                                                    id="pais_id"
                                                                    name="pais_id"
                                                                    data-live-search="true"
                                                                    data-width="100%"
                                                                    data-container="body"
                                                                    @if (!old('pais_id')) disabled @endif>

                                                                    <option selected disabled>Selecione</option>
                                                                    @foreach ($paises as $pais)
                                                                        <option value="{{$pais->id}}" data-sigla="{{$pais->sigla_iso}}" {{ old('pais_id') == $pais->id ? 'selected':'' }}>{{$pais->nome}}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-4 cep @if(old('cep')==''||old('zip_code')!='') d-none @endif">
                                                            <div class="form-group">
                                                                <label for="cep">CEP <span class="text-danger">*</span></label>
                                                                <input type="text" name="cep" autocomplete="off" class="form-control {{old('cep')!='' ? 'has-old-value':''}}" id="cep" value="{{ old('cep') }}" @if(old('zip_code')=='') required @endif>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-4 zip_code @if(old('zip_code')==''||old('cep')!='') d-none @endif">
                                                            <div class="form-group">
                                                                <label for="cep">ZIP CODE </label>
                                                                <input type="text" name="zip_code" autocomplete="off" class="form-control" id="zip_code" value="{{ old('zip_code') }}" @if(old('zip_code')==''||old('cep')!='') disabled @endif>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="row">
                                                        <div class="col-md-4 d-flex align-items-end mt-2">
                                                            <div class="form-group w-100">
                                                                <label for="estado_id">Estado <span class="text-danger"></span></label>
                                                                <select class="selectpicker form-control" id="estado_id" name="estado_id" data-live-search="true" data-width="100%" data-container="body" disabled data-old="{{old('estado_id')}}">
                                                                    <option selected disabled>Selecione</option>
                                                                </select>
                                                            </div>

                                                            <!-- Modal novo estado -->
                                                            <div class="d-none">
                                                                <button type="button" class="btn btn-sm btn-outline-success-soel border-0 rounded-circle mb-1 ms-2" data-toggle="modal" data-target="#modal-novo-estado">
                                                                    <i class="fas fa-plus"></i>
                                                                </button>
                                                            </div>
                                                            <div class="modal fade" id="modal-novo-estado" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                                                                <div class="modal-dialog modal-dialog-centered" role="document">
                                                                    <div class="modal-content">
                                                                        <div class="modal-header">
                                                                            <h5 class="modal-title" id="exampleModalCenterTitle">Adicionar Estado</h5>
                                                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                                                <span aria-hidden="true">&times;</span>
                                                                            </button>
                                                                        </div>
                                                                        <div class="modal-body">
                                                                            <div class="form-group mb-3">
                                                                                <label for="nome_estado">Nome do Estado</label>
                                                                                <input type="text" name="nome_estado" autocomplete="off" class="form-control" id="nome_estado" value="{{ old('nome_estado') }}" disabled>
                                                                            </div>
                                                                            <div class="form-group mb-3">
                                                                                <label for="sigla_estado">Sigla do Estado</label>
                                                                                <input type="text" name="sigla_estado" autocomplete="off" class="form-control" id="sigla_estado" value="{{ old('sigla_estado') }}" disabled>
                                                                            </div>
                                                                        </div>
                                                                        <div class="modal-footer">
                                                                            <button type="button" class="btn btn-sm btn-secondary-soel" data-dismiss="modal">Cancelar</button>
                                                                            <button type="button" class="btn btn-sm btn-primary-soel add" data-dismiss="modal">Adicionar</button>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-4 d-flex align-items-end mt-2">
                                                            <div class="form-group w-100">
                                                                <label for="cidade_id">Cidade <span class="text-danger"></span></label>
                                                                <select class="selectpicker form-control" id="cidade_id" name="cidade_id" data-live-search="true" data-width="100%" data-container="body" disabled data-old="{{old('cidade_id')}}">
                                                                    <option selected disabled>Selecione</option>
                                                                </select>
                                                            </div>

                                                            <!-- Modal nova cidade -->
                                                            <div class="d-none">
                                                                <button type="button" class="btn btn-sm btn-outline-success-soel border-0 rounded-circle mb-1 ms-2" data-toggle="modal" data-target="#modal-nova-cidade">
                                                                    <i class="fas fa-plus"></i>
                                                                </button>
                                                            </div>
                                                            <div class="modal fade" id="modal-nova-cidade" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                                                                <div class="modal-dialog modal-dialog-centered" role="document">
                                                                    <div class="modal-content">
                                                                        <div class="modal-header">
                                                                            <h5 class="modal-title" id="exampleModalCenterTitle">Adicionar Cidade</h5>
                                                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                                                <span aria-hidden="true">&times;</span>
                                                                            </button>
                                                                        </div>
                                                                        <div class="modal-body">
                                                                            <div class="form-group mb-3">
                                                                                <label for="nome_cidade">Nome da Cidade</label>
                                                                                <input type="text" name="nome_cidade" autocomplete="off" class="form-control" id="nome_cidade" value="{{ old('nome_cidade') }}" disabled>
                                                                            </div>
                                                                        </div>
                                                                        <div class="modal-footer">
                                                                            <button type="button" class="btn btn-sm btn-secondary-soel" data-dismiss="modal">Cancelar</button>
                                                                            <button type="button" class="btn btn-sm btn-primary-soel add" data-dismiss="modal">Adicionar</button>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-4 d-flex align-items-end mt-2">
                                                            <div class="form-group w-100">
                                                                <label for="bairro_id">Bairro <span class="text-danger"></span></label>
                                                                <select class="selectpicker form-control" id="bairro_id" name="bairro_id" data-live-search="true" data-width="100%" data-container="body" disabled data-old="{{old('bairro_id')}}">
                                                                    <option selected disabled>Selecione</option>
                                                                </select>
                                                            </div>

                                                            <!-- Modal novo bairro -->
                                                            <div class="d-none">
                                                                <button type="button" class="btn btn-sm btn-outline-success-soel border-0 rounded-circle mb-1 ms-2" data-toggle="modal" data-target="#modal-novo-bairro">
                                                                    <i class="fas fa-plus"></i>
                                                                </button>
                                                            </div>
                                                            <div class="modal fade" id="modal-novo-bairro" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                                                                <div class="modal-dialog modal-dialog-centered" role="document">
                                                                    <div class="modal-content">
                                                                        <div class="modal-header">
                                                                            <h5 class="modal-title" id="exampleModalCenterTitle">Adicionar Bairro</h5>
                                                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                                                <span aria-hidden="true">&times;</span>
                                                                            </button>
                                                                        </div>
                                                                        <div class="modal-body">
                                                                            <div class="form-group mb-3">
                                                                                <label for="nome_bairro">Nome do Bairro</label>
                                                                                <input type="text" name="nome_bairro" autocomplete="off" class="form-control" id="nome_bairro" value="{{ old('nome_bairro') }}" disabled>
                                                                            </div>
                                                                        </div>
                                                                        <div class="modal-footer">
                                                                            <button type="button" class="btn btn-sm btn-secondary-soel" data-dismiss="modal">Cancelar</button>
                                                                            <button type="button" class="btn btn-sm btn-primary-soel add" data-dismiss="modal">Adicionar</button>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="row">
                                                        <div class="col-md-4 d-flex align-items-end mt-2">
                                                            <div class="logradouro-text w-100 d-none">
                                                                <div class="row">
                                                                    <div class="col-5">
                                                                        <div class="form-group">
                                                                            <label for="tipo_logradouro_text">Tipo de Logradouro <span class="text-danger">*</span></label>
                                                                            <input type="text" class="form-control" name="tipo_logradouro_text" id="tipo_logradouro_text" value="{{ old('tipo_logradouro_text') }}">
                                                                        </div>
                                                                    </div>

                                                                    <div class="col-7">
                                                                        <div class="form-group">
                                                                            <label for="logradouro">Logradouro <span class="text-danger">*</span></label>
                                                                            <input type="text" class="form-control" name="nome_logradouro" id="logradouro" value="{{ old('nome_logradouro') }}">
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                            <div class="form-group w-100">
                                                                <label for="logradouro_id">Logradouro <span class="text-danger"></span></label>
                                                                <select class="selectpicker form-control" id="logradouro_id" name="logradouro_id" data-live-search="true" data-width="100%" data-container="body" disabled data-old="{{old('logradouro_id')}}">
                                                                    <option selected disabled>Selecione</option>
                                                                </select>
                                                            </div>

                                                            <!-- Modal novo logradouro -->
                                                            <div class="d-none">
                                                                <button type="button" class="btn btn-sm btn-outline-success-soel border-0 rounded-circle mb-1 ms-2" data-toggle="modal" data-target="#modal-novo-logradouro">
                                                                    <i class="fas fa-plus"></i>
                                                                </button>
                                                            </div>
                                                            <div class="modal fade" id="modal-novo-logradouro" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                                                                <div class="modal-dialog modal-dialog-centered" role="document">
                                                                    <div class="modal-content">
                                                                        <div class="modal-header">
                                                                            <h5 class="modal-title" id="exampleModalCenterTitle">Adicionar Logradouro</h5>
                                                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                                                <span aria-hidden="true">&times;</span>
                                                                            </button>
                                                                        </div>
                                                                        <div class="modal-body">
                                                                            <div class="form-group mb-2">
                                                                                <label for="tipo">Tipo de Logradouro <span class="text-danger">*</span></label>
                                                                                <select class="form-select" id="tipo_logradouro" name="tipo_logradouro" disabled>
                                                                                    <option selected disabled>Selecione</option>
                                                                                    @foreach ($tipoLogradouro as $tipo)
                                                                                        <option value="{{$tipo->id}}" {{ old('tipo_logradouro') == $tipo->id ? 'selected':'' }}>{{$tipo->descricao}}</option>
                                                                                    @endforeach
                                                                                </select>
                                                                            </div>
                                                                            <div class="form-group mb-3">
                                                                                <label for="cep">Nome do Logradouro <span class="text-danger">*</span></label>
                                                                                <input type="text" name="nome_logradouro" autocomplete="off" class="form-control" id="nome_logradouro" value="{{ old('nome_logradouro') }}" disabled>
                                                                            </div>
                                                                        </div>
                                                                        <div class="modal-footer">
                                                                            <button type="button" class="btn btn-sm btn-secondary-soel" data-dismiss="modal">Cancelar</button>
                                                                            <button type="button" class="btn btn-sm btn-primary-soel add" data-dismiss="modal">Adicionar</button>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-2 mt-2">
                                                            <div class="form-group">
                                                                <label for="numero">Número</label>
                                                                <input type="text" name="numero" value="{{ old('numero') }}" autocomplete="off" class="form-control" id="numero" @if (old('numero')=='') disabled @endif>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-3 mt-2">
                                                            <div class="form-group">
                                                                <label for="complemento">Complemento</label>
                                                                <input type="text" name="complemento" value="{{ old('complemento') }}" autocomplete="off" class="form-control" id="complemento" @if (old('complemento')=='') disabled @endif>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-3 mt-2">
                                                            <div class="form-group">
                                                                <label for="referencia">Ponto de Referência</label>
                                                                <input type="text" name="referencia" value="{{ old('referencia') }}" autocomplete="off" class="form-control" id="referencia" @if (old('referencia')=='') disabled @endif>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="justify-content-between d-flex mt-3">
                                                        <a class="btn btn-sm btn-secondary-soel btnPrevious">Voltar</a>
                                                        <a class="btn btn-sm btn-primary-soel btnNext">Confirmar</a>
                                                    </div>
                                                </div>

                                                <div class="tab-pane container fade" id="contato">
                                                    <h5>Contato</h5>
                                                    <hr>
                                                    <div class="row mt-3">
                                                        <div class="col-6">
                                                            <div class="form-group mb-3">
                                                                <label for="tipo">Tipo de contato</label>
                                                                <select class="form-select" id="tipo_contato" name="tipo_contato">
                                                                    <option selected disabled>Selecione</option>
                                                                    @foreach ($tipoContato as $key => $tipo)
                                                                        <option value="{{$key}}" {{ old('tipo_contato') == $key ? 'selected':'' }}>{{$tipo}}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <div class="col-6">
                                                            <div class="form-group mb-3">
                                                                <label for="contato">Contato</label>
                                                                <input type="text" name="contato" value="{{ old('contato') }}" autocomplete="off" class="form-control" id="contato">
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="justify-content-between d-flex">
                                                        <a class="btn btn-sm btn-secondary-soel btnPrevious">Voltar</a>
                                                        <button class="btn btn-sm btn-success-soel btn-register" type="submit">Cadastrar</button>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                        <div class="col-12 text-muted mt-4 ms-2 font-size-14">
                                            <p class="mb-0">
                                                Ao se cadastrar na Soeltech você concorda com os
                                                <a href="#" class="text-success-soel">Termos de Uso</a>.
                                            </p>
                                            <p class="mb-0">
                                                Já possui uma conta?
                                                <a href="/login" class="text-success-soel">Acesse</a>.
                                            </p>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

                    <div class="mt-3 text-center">
                        <p class="mb-0">© 2009 - {{  date('Y') }} Soeltech</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script src="{{asset('/js/register.js')}}"></script>
@endsection