@include('menu')
@include('perfilMenu')
<!-- ##### Breadcumb Area Start ##### -->
<div class="breadcumb_area bg-img" style="background-image: url({{ asset('img/banner/breadcumb.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 UM 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">

      <img  src="img/banner/01_cms_H1.png" />
        <br /> <br /> <br /> <br />
        <h1 style="color:#016eb7"><b>#QueroAlugarUmCarro</b>, para me deslocar.</h1>

        <p style="font-size:30px;">
            aqui poderás criar uma conta como hospede, e através dela estarás habilitado em alugar
            as viaturas que temos disponível 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:#0070bb"><i class="fa-solid fa-user"></i>  Criar uma <b style="color:#0070bc"> Conta
                            Hospede</b></h5>
                    <p>Lhe oferecemos os melhores preços para os nossos carros.</p>
                </div>
                <hr/>
                {{--  <form action="{{ route('guardar_proprietario') }}" id="formProprietario" name="formProprietario"
                    method="post" enctype="multipart/form-data"> --}}
                <form action="{{ route('guardar_hospede') }}" id="formHospede" name="formHospede" method="post"
                    enctype="multipart/form-data">
                    @csrf
                    <div class="row">


                        <div class="col-md-6 mb-3">
                            <label for="first_name">Nome <span>*</span></label>
                            <input type="text" class="form-control" id="first_name" name="first_name">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="last_name">Sobrenome<span>*</span></label>
                            <input type="text" class="form-control" id="last_name" name="last_name">
                        </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">
                        </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">
                        </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>
                            <input type="text" class="form-control" id="txtiban" name="txtiban">
                        </div>


                        <div class="col-12 mb-3">
                            <label for="cc">Anexar Carta de Condução
                                <span>*</span></label>
                            <input type="file" class="form-control" id="cc" name="cc">
                        </div>

                        <hr />


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

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

                        <hr />

                        <div class="col-12">
                            <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">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 Hospede
                    </button>
                </form>





                <!-- ##### link para chamar a pagina de formProprietario ##### -->
            </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>');
                    }
                }
            });

        });

    });
</script>


@include('rodape')