@include('menu')
@include('perfilMenu')

<!-- ##### Breadcumb Area Start ##### -->
<div class="breadcumb_area bg-img" style="background-image: url({{ asset('img/banner/01_cms_P.jpg') }});">
    <div class="container h-100">
        <div class="row h-100 align-items-center">
            <div class="col-12">
                <div class="page-title text-center">
                    <h2>PREPARAMOS TUDO EM SÓ LUGAR</h2>
                    <SPan style="color:#ffe400">crie a conta mais adequado com as suas necessidades</SPan>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- ##### Breadcumb Area End ##### -->

<div class="contact-area d-flex align-items-center" style="background-color:#f2f6fa; padding:30px">




    <div class="container text-center">

        <!--<i class="fa-solid fa-car-on" style="font-size:100px"></i>-->
        <img src="img/banner/01_cms_P7.png" />
        <br /> <br /> <br /> <br />
        <h1 style="color:#016eb7"><b>#QueroAlugar</b> os meus carros</h1>
        <br />

        <p style="font-size:30px;">
            aqui poderás criar uma conta como Proprietário, e através dela podes disponibilizar
            as tuas viaturas para serem alugadas na plataforma.
        </p>
    </div>



    <div class="contact-info">

        <div class="col-12">
            <div class="order-details-confirmation" style="background-color:#ffffff">

                <div class="cart-page-heading">
                    <h5 style="color:#016eb7"> <i class="fa-solid fa-user-tie"></i>&ensp;Criar uma <b
                            style="color:#016eb7">Conta Proprietária</b></h5>
                    <p>Negociamos os melhores preços para os seus carros nos nossos clientes.</p>
                </div>
                <hr />


                <form action="{{ route('guardar_proprietario') }}" id="formProprietario" name="formProprietario"
                    method="post" enctype="multipart/form-data">
                    @csrf
                    <div class="row">

                        <div class="col-12  mb-3">



                            <div class="input-group-text">
                                <label>Natureza da Conta a ser Criada: </label>

                                <div class="form-check form-check-inline" style="margin-left:30px">
                                    <input class="form-check-input" type="radio" name="natureza" id="txtIndividual"
                                        value="1" onclick="show1();" checked>
                                    <label class="form-check-label" for="inlineRadio1">Individual</label>
                                </div>

                                <div class="form-check form-check-inline" style="margin-left:30px">
                                    <input class="form-check-input" type="radio" name="natureza" id="txtEmpresarial"
                                        onclick="show2();" value="2">
                                    <label class="form-check-label" for="inlineRadio2">Empresarial</label>
                                </div>





                            </div>


                        </div>

                        <div class="col-md-6 mb-3  hide2" id="divNomeEmpresa">
                            <label>Nome da Empresa<span>*</span></label>
                            <input type="text" class="form-control mb-3" id="txtnomeempresa" name="txtnomeempresa">

                        </div>
                        <div class="col-md-6 mb-3  hide2" id="divNIFEmpresa">
                            <label>NIF da Empresa<span>*</span></label>
                            <input type="text" class="form-control mb-3" id="txtnifempresa" name="txtnifempresa">

                        </div>

                        <div class="col-md-6 mb-3 hide" id="divNome">
                            <label for="last_name" value>Nome<span>*</span></label>

                            <input type="text" class="form-control" id="first_name" name="first_name">
                        </div>

                        <div class="col-md-6 mb-3 hide" id="divSobrenome">
                            <label for="last_name">Sobrenome<span>*</span></label>
                            <input type="text" class="form-control" id="last_name" name="last_name">
                        </div>

                        <div class="col-md-6 mb-3 hide" id="divTipoDocumento">
                            <label for="Provincia">Tipo de Documento <span>*</span></label>
                            <select class="form-control" id="cmbtipodocumento" name="cmbtipodocumento">
                                <option value="n">selecionar...</option>
                                @foreach ($listartipodocumentos as $tipodocumento)
                                    <option value="{{ $tipodocumento->id }}">
                                        {{ $tipodocumento->descricao_tipodocumento }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6 mb-3 hide" id="divNumeroDocumento">
                            <label for="Ndc">Nº do Documento<span>*</span></label>
                            <input type="text" class="form-control" id="Ndoc" name="Ndoc">
                        </div>


                        <div class="col-12 mb-4">
                            <label for="email_address">Email<span>*</span></label>
                            <input type="email" class="form-control" id="email_address" name="email_address">
                        </div>

                        <div class="col-6 mb-3">
                            <label for="phone_number">Telemóvel (Whatsapp)<span>*</span></label>
                            <input type="number" class="form-control" id="phone_number" name="phone_number"
                                min="0" required>
                        </div>

                        <div class="col-6 mb-3">
                            <label for="phone_alternativo">Telemóvel Alternativo<span>*</span></label>
                            <input type="number" class="form-control" id="phone_alternativo"
                                name="phone_alternativo" min="0" required>
                        </div>
                        <div class="col-md-12 mb-3">
                            <label for="Pais">Pais em vives <span>*</span></label>
                            <select class="form-control" name="cmbpais" id="cmbpais">
                                <option>Angola</option>
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="Provincia">Vives em que Província <span>*</span></label>
                            <select class="form-control" id="cmbprovincia" name="cmbprovincia">
                                <option value="n">selecionar...</option>
                                @foreach ($listaprovincias as $provincia)
                                    <option value="{{ $provincia->id }}">
                                        {{ $provincia->descricao_provincia }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="Municipio">Em que Municipio <span>*</span></label>
                            <select class="form-control" name="cmbmunicipio" id="cmbmunicipio">

                            </select>
                        </div>
                        <div class="col-12 mb-3">
                            <label for="street_address">Endereço da Rua <span>*</span></label>
                            <input type="text" class="form-control mb-3" id="street_address"
                                name="street_address">

                        </div>

                        <div class="col-12  mb-3">

                            <label for="iban">IBAN ( é de extrema importância que a coordenada pertença ao
                                Proprietário. ) <span>*</span></label>
                            
                            <div class="input-group">
                                <div class="input-group-text"><b>AO06</b></div>
                               
                                <input type="text" id="txtiban" name="txtiban" maxlength="22" minlength="21"   onkeypress="return event.charCode >= 48 && event.charCode <= 57"   class="form-control form-control-sm" required>

                            </div>


                        </div>


                        <!-- <div class="col-6 mb-3"> AO06.0006.0000.8010.2224.3012.1  // onkeypress="return event.charCode >= 48 && event.charCode <= 57" required>
                            <label for="bip">B.I ou Passaporte(.jpg,.png,.pdf) <span>*</span></label>
                            <input type="file" class="form-control" id="bip" name="bip" required>
                        </div>-->

                        <div class="col-12 mb-3 hide" id="divAnexaDoc">
                            <label for="cc">Anexar documento para validação da sua identidade(.jpg,.png,.pdf)
                                <span>*</span></label>
                            <input type="file" class="form-control" id="cc" name="cc">
                        </div>

                        <hr />


                        <div class="col-4 mb-3">
                            <label for="user"><b>Utilizador</b><span>*</span></label>
                            <input type="text" class="form-control" id="txtuser" name="txtuser">
                        </div>

                        <div class="col-4 mb-3">
                            <label for="senha"><b>Senha</b><span>*</span></label>
                            <input type="password" class="form-control" id="txtsenha" name="txtsenha">
                        </div>
                        <div class="col-4 mb-3">
                            <label for="csenha"><b>Confirma a senha</b><span>*</span></label>
                            <input type="password" class="form-control" id="txtcsenha" name="txtcsenha">
                        </div>

                        <hr />

                        <div class="col-12">
                            <br />
                            <div class="custom-control custom-checkbox d-block mb-2">
                                <input type="checkbox" class="custom-control-input" id="customCheck1">
                                <label class="custom-control-label" for="customCheck1">Aceito os termos e
                                    condições</label>
                            </div>
                            <!-- <div class="custom-control custom-checkbox d-block mb-2">
                                <input type="checkbox" class="custom-control-input" id="customCheck2">
                                <label class="custom-control-label" for="customCheck2">Politica & Segurança</label>
                            </div>
                            <div class="custom-control custom-checkbox d-block">
                                <input type="checkbox" class="custom-control-input" id="customCheck3">
                                <label class="custom-control-label" for="customCheck3">Receber Notificações</label>
                            </div>-->
                        </div>
                    </div>

                    <button class="btn essence-btn" type="submit">
                        Criar Conta Proprietário
                    </button>


                </form>






            </div>
        </div>



    </div>

</div>




<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script type="text/javascript">
    $(document).ready(function() {



        $('select[name="cmbprovincia"]').on('change', function() {
            var idProvincia = $(this).val();

            $.ajax({
                url: 'municipio/' + idProvincia,
                type: 'GET',
                dataType: 'json',
                success: function(data) {
                    $('select[name=cmbmunicipio]').empty();
                    for (var i = 0; data.length > i; i++) {
                        //console.log('<option value="' + data[i].id + '"> ' + data[i].descricao_municipio + '</option>');
                        $('#cmbmunicipio').append('<option value="' + data[i].id + '"> ' +
                            data[i].descricao_municipio + '</option>');
                    }
                }
            });

        });







    });

    document.getElementById('txtiban').addEventListener('input', function(e) {
        e.target.value = e.target.value.replace(/[^\dA-Z]/g, '').replace(/(.{4})/g, '$1 ').trim();
    });



    function show1() {



        document.getElementById('divNome').style.display = 'block';
        document.getElementById('divSobrenome').style.display = 'block';
        document.getElementById('divAnexaDoc').style.display = 'block';

        document.getElementById('divTipoDocumento').style.display = 'block';
        document.getElementById('divNumeroDocumento').style.display = 'block';

        document.getElementById('divNomeEmpresa').style.display = 'none';
        document.getElementById('divNIFEmpresa').style.display = 'none';






    }

    function show2() {




        document.getElementById('divNomeEmpresa').style.display = 'block';
        document.getElementById('divNIFEmpresa').style.display = 'block';

        document.getElementById('divNome').style.display = 'none';
        document.getElementById('divSobrenome').style.display = 'none';
        document.getElementById('divAnexaDoc').style.display = 'none';
        document.getElementById('divTipoDocumento').style.display = 'none';
        document.getElementById('divNumeroDocumento').style.display = 'none';



    }
</script>


@include('rodape')