@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>Maneira rápida e fácil de alugar um carro</h2>
                </div>
            </div>
        </div>
    </div>
</div>


<section class="single_product_details_area d-flex align-items-center" style="background-color:#f2f6fa">

    <div class="container">
        <!-- Stack the columns on mobile by making one full-width and the other half-width -->
        <div class="row" style=" padding:10px">
            <div class="col-md-4">
                <div class="product_thumbnail_slides owl-carousel">
                    <img src="img/viaturas/{{ $veiculo->foto1 }}" alt="">
                    <img src="img/viaturas/{{ $veiculo->foto2 }}" alt="">
                    <img src="img/viaturas/{{ $veiculo->foto3 }}" alt="">
                    <img src="img/viaturas/{{ $veiculo->foto4 }}" alt="">
                    <img src="img/viaturas/{{ $veiculo->foto5 }}" alt="">
                </div>
            </div>
            <div class="col-6 col-md-8">

                <h1><i class="fa-solid fa-car"></i> {{ $veiculo->descricao_marca }}</h1>
                <span><i class="fa-solid fa-car-tunnel"></i> {{ $veiculo->modelo }}</span>
                                <p class="product-price" label="dias"><i class="fa-solid fa-money-bill"></i> AOA
                    0,00 / dia
                </p>
                <input type="text" id="txtValorDiaria" name="txtValorDiaria"
                    value="{{ $veiculo->preco_aluguel_dia }}" hidden />
                <table class="table table-hover">

                    <tbody>

                        <tr>
                            <th scope="row">Marca:</th>
                            <td>{{ $veiculo->descricao_marca }}</td>
                        </tr>

                        <tr>
                            <th scope="row">Modelo</th>
                            <td>{{ $veiculo->modelo }}</td>
                        </tr>

                        <tr>
                            <th scope="row">Transmissão</th>
                            <td colspan="2">{{ $veiculo->descricao }}</td>
                        </tr>

                        <tr>
                            <th scope="row">Quantidade de Lugar</th>
                            <td colspan="2">{{ $veiculo->numero_assentos }}</td>
                        </tr>

                        <tr>
                            <th scope="row">Cor</th>
                            <td colspan="2">{{ $veiculo->cor }}</td>
                        </tr>

                    </tbody>
                </table>
            </div>
        </div>

        <div class="row">
            <div class="col-12">



                <form class="cart-form clearfix" action="{{ route('cofirmar_solicitacao_aluguel') }}" method="post">
                    @csrf
                    <input type="text" id="txtIdViatura" name="txtIdViatura" value="{{ $veiculo->numeroVeiculo }}"
                        hidden />

                    <input type="text" id="txtMarcaModelo" name="txtMarcaModelo"
                        value="{{ $veiculo->descricao_marca }} {{ $veiculo->modelo }}" hidden />


                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title" style="color:#0e78a4">Definir o Local que pretendes receber a
                                viatura
                            </h5>

                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="radio_localreceber"
                                    id="radio_localreceber_el" value="Sim" onclick="showLocalEntregaSIM();"
                                    checked />
                                <label class="form-check-label" for="inlineRadio1"> Escolher o Local (<b>é adicionado
                                        uma taxa de AOA 2000 </b> )
                                </label>
                            </div>

                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="radio_localreceber"
                                    id="radio_localreceber_qb" value="Nao" onclick="showLocalEntregaNAO();">
                                <label class="form-check-label" for="inlineRadio2">Quero ir buscar em vosso
                                    escritório</label>
                            </div>


                            <div class="col-12">



                                <br />

                                <div id="areaLocalEntrega">


                                    <label><b>Município</b></label>


                                    <label><b>Município</b></label>
                                    <select class="form-control form-control-sm" id="cmbmunicipio_receber"
                                        name="cmbmunicipio_receber">
                                        <option selected disabled>Selecionar o municipio para receber a viatura..
                                        </option>

                                        @foreach ($municipio_da_provincia_viatura as $municipio)
                                            <option value="{{ $municipio->id }}">
                                                {{ $municipio->descricao_municipio }} </option>
                                        @endforeach
                                    </select>

                                    <label><b>Local Turis</b></label>
                                    <select class="form-control form-control-sm" id="cmblocalidadeturis_receber"
                                        name="cmblocalidadeturis_receber" required>

                                    </select>




                                </div>
                            </div>

                        </div>
                    </div>
                    <br />
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title" style="color:#0b6388">Definir o Local que pretendes entregar
                                a
                                viatura</h5>

                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="radio_localentregar"
                                    id="radio_localentregar_el" value="Sim" onclick="showAreaLocalReceberSIM2();"
                                    checked />
                                <label class="form-check-label" for="inlineRadio1"
                                    alt="é adicionado uma taxa de AOA 2000"> Escolher o Local (<b>é adicionado uma taxa
                                        de AOA 2000 </b> )
                                </label>
                            </div>

                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="radio_localentregar"
                                    id="radio_localentregar_qe" value="Nao" onclick="showAreaLocalReceberNAO2();">
                                <label class="form-check-label" for="inlineRadio2">Vou entregar em vosso
                                    escritório</label>
                            </div>
                            <div class="col-12">



                                <br />
                                <div id="areaLocalReceber">


                                    <label><b>Município</b></label>
                                    <select class="form-control form-control-sm" id="cmbmunicipio_entregar"
                                        name="cmbmunicipio_entregar">
                                        <option selected disabled>Selecionar o municipio para entregar a viatura..
                                        </option>

                                        @foreach ($municipio_da_provincia_viatura as $municipio)
                                            <option value="{{ $municipio->id }}">
                                                {{ $municipio->descricao_municipio }} </option>
                                        @endforeach
                                    </select>

                                    <label><b>Local Turis</b></label>
                                    <select class="form-control form-control-sm" id="cmblocalidadeturis_entregar"
                                        name="cmblocalidadeturis_entregar" required>

                                    </select>



                                </div>
                            </div>


                        </div>
                    </div>






                    <br />


                    <div class="card">
                        <div class="card-header">

                            <label style="font-size:15px; color:blue"> <b>Cálcular a Diária para Aluguel</b></label>
                        </div>
                        <div class="card-body">
                            <blockquote class="blockquote mb-0">

                                <div class="row g-3">
                                    <div class="col-sm">
                                        <label style="font-size:14px"> <b>Data de Início:</b></label> <input
                                            type="date" name="dataInicio" id="dataInicio"
                                            class="form-control form-control-sm" value="2025-06-23">
                                    </div>
                                    <div class="col-sm">
                                        <label style="font-size:14px"> <b>Data de Fim:</b></label>
                                        <input type="date" name="dataFim" id="dataFim"
                                            class="form-control form-control-sm" value="2025-06-23">
                                    </div>
                                    <div class="col-sm">
                                        <label style="font-size:14px"> <b>Nº Dias:</b></label>
                                        <input type="text" id="txtNumeroDias" name="txtNumeroDias"
                                            class="form-control form-control-sm"readonly />
                                    </div>
                                    <!--<div class="col-sm">
                                        <br />
                                        <a href="#" class="btn btn-secondary btn-sm"
                                            onclick="calcularValorPagoAluguel();"><i
                                                class="fa-solid fa-calculator"></i>
                                            Calcular</a>
                                    </div>-->

                                </div>





                                <hr />



                                <label style="font-size:14px"> &nbsp;&nbsp;<b>Total a Pagar(AOA): </b></label>
                                &nbsp;&nbsp;
                                <input type="text" id="txtValorApagar" placeholder="00.000.000,00"
                                    name="txtValorApagar" class="form-control form-control-sm" readonly />


                                <br />




                            </blockquote>
                        </div>
                    </div>



                    <p class="product-desc">

                    </p>

                    <footer class="blockquote-footer" style="color:red">
                        Informações sobre o Aluguel
                    </footer>
                    <footer class="blockquote-footer">Lorem Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum
                        <cite title="Source Title">
                            Ipsum Ipsum Ipsum</cite>
                    </footer>
                    <br />
                    <div class="cart-fav-box d-flex align-items-center">


                        <button type="submit" name="addtocart" value="5" class="btn essence-btn">Solicitar o
                            Aluguer
                            da Viatura</button>

                    </div>
                    <br />
                </form>
            </div>

        </div>

    </div>

    {{-- <div class="single_product_thumb clearfix" style="background:red">
        <div class="product_thumbnail_slides owl-carousel">
            <img src="img/viaturas/{{ $veiculo->foto1 }}" alt="">
            <img src="img/viaturas/{{ $veiculo->foto2 }}" alt="">
            <img src="img/viaturas/{{ $veiculo->foto3 }}" alt="">
            <img src="img/viaturas/{{ $veiculo->foto4 }}" alt="">
            <img src="img/viaturas/{{ $veiculo->foto5 }}" alt="">
        </div>

    </div> --}}

    {{-- <div class="single_product_desc clearfix" style="background:blue">


        
     <h1><i class="fa-solid fa-car"></i> {{ $veiculo->descricao_marca }}</h1>
        <span><i class="fa-solid fa-car-tunnel"></i> {{ $veiculo->modelo }}</span>
                <p class="product-price" label="dias"><i class="fa-solid fa-money-bill"></i> AOA
            0,00 / dia
        </p>
        <input type="text" id="txtValorDiaria" name="txtValorDiaria" value="{{ $veiculo->preco_aluguel_dia }}"
            hidden />
        <table class="table table-hover">

            <tbody>

                <tr>
                    <th scope="row">Marca:</th>
                    <td>{{ $veiculo->descricao_marca }}</td>
                </tr>

                <tr>
                    <th scope="row">Modelo</th>
                    <td>{{ $veiculo->modelo }}</td>
                </tr>

                <tr>
                    <th scope="row">Transmissão</th>
                    <td colspan="2">{{ $veiculo->descricao }}</td>
                </tr>

                <tr>
                    <th scope="row">Quantidade de Lugar</th>
                    <td colspan="2">{{ $veiculo->numero_assentos }}</td>
                </tr>

                <tr>
                    <th scope="row">Cor</th>
                    <td colspan="2">{{ $veiculo->cor }}</td>
                </tr>

            </tbody>
        </table>









        <br />
        <form class="cart-form clearfix" action="{{ route('cofirmar_solicitacao_aluguel') }}" method="post">
            @csrf
            <input type="text" id="txtIdViatura" name="txtIdViatura" value="{{ $veiculo->numeroVeiculo }}" hidden />

            <input type="text" id="txtMarcaModelo" name="txtMarcaModelo"
                value="{{ $veiculo->descricao_marca }} {{ $veiculo->modelo }}" hidden />

            <div class="row">
                <div class="col-sm-6">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title" style="color:#0e78a4">Definir o Local que pretendes receber a
                                viatura
                            </h5>

                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="CNE" id="CNESIM"
                                    value="Sim" onclick="showCNESIM();" checked />
                                <label class="form-check-label" for="inlineRadio1"> Escolher o Local
                                </label>
                            </div>

                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="CNE" id="CNENAO"
                                    value="Nao" onclick="showCNENAO();">
                                <label class="form-check-label" for="inlineRadio2">Quero ir buscar</label>
                            </div>


                            <div class="col-12">



                                <br />

                                <div id="areaLocalEntrega">


                                    <label><b>Município</b></label>

                                    <select class="form-control form-control-sm">
                                        <option>Selecionar</option>

                                        @foreach ($municipio_da_provincia_viatura as $municipio)
                                            <option value="{{ $municipio->id }}">
                                                {{ $municipio->descricao_municipio }}</option>
                                        @endforeach
                                    </select>

                                    <label><b>Local Turis</b></label>
                                    <select class="form-control form-control-sm">
                                        <option>Selecionar</option>
                                    </select>



                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title" style="color:#0b6388">Definir o Local que pretendes entregar a
                                viatura</h5>

                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="CNE2" id="CNESIM2"
                                    value="Sim" onclick="showCNESIM2();" checked />
                                <label class="form-check-label" for="inlineRadio1"> Escolher o Local
                                </label>
                            </div>

                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="CNE2" id="CNENAO2"
                                    value="Nao" onclick="showCNENAO2();">
                                <label class="form-check-label" for="inlineRadio2">Quero que venham ao meu
                                    encontro</label>
                            </div>
                            <div class="col-12">



                                <br />
                                <div id="areaLocalReceber">


                                    <label><b>Município</b></label>
                                    <select class="form-control form-control-sm">
                                        <option>Selecionar</option>

                                        @foreach ($municipio_da_provincia_viatura as $municipio)
                                            <option value="{{ $municipio->id }}">
                                                {{ $municipio->descricao_municipio }}</option>
                                        @endforeach
                                    </select>

                                    <label><b>Local Turis</b></label>
                                    <select class="form-control form-control-sm">
                                        <option>Selecionar</option>
                                    </select>



                                </div>
                            </div>


                        </div>
                    </div>
                </div>

            </div>




            <br />


            <div class="card">
                <div class="card-header">

                    <label style="font-size:15px; color:blue"> <b>Cálcular a Diária para Aluguel</b></label>
                </div>
                <div class="card-body">
                    <blockquote class="blockquote mb-0">

                        <div class="row g-3">
                            <div class="col-sm">
                                <label style="font-size:14px"> <b>Data de Início:</b></label> <input type="date"
                                    name="dataInicio" id="dataInicio" class="form-control form-control-sm"
                                    value="2025-06-23">
                            </div>
                            <div class="col-sm">
                                <label style="font-size:14px"> <b>Data de Fim:</b></label>
                                <input type="date" name="dataFim" id="dataFim"
                                    class="form-control form-control-sm" value="2025-06-23">
                            </div>
                            <div class="col-sm">
                                <label style="font-size:14px"> <b>Nº Dias:</b></label>
                                <input type="text" id="txtNumeroDias" name="txtNumeroDias"
                                    class="form-control form-control-sm"readonly />
                            </div>
                            <div class="col-sm">
                                <br />
                                <a href="#" class="btn btn-secondary btn-sm"
                                    onclick="calcularValorPagoAluguel();"><i class="fa-solid fa-calculator"></i>
                                    Calcular</a>
                            </div>

                        </div>





                        <hr />



                        <label style="font-size:14px"> &nbsp;&nbsp;<b>Total a Pagar(AOA): </b></label> &nbsp;&nbsp;
                        <input type="text" id="txtValorApagar" placeholder="00.000.000,00" name="txtValorApagar"
                            class="form-control form-control-sm" readonly />


                        <br />




                    </blockquote>
                </div>
            </div>



            <p class="product-desc">

            </p>

            <footer class="blockquote-footer" style="color:red">
                Informações sobre o Aluguel
            </footer>
            <footer class="blockquote-footer">Lorem Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum
                <cite title="Source Title">
                    Ipsum Ipsum Ipsum</cite>
            </footer>
             <br />
            <div class="cart-fav-box d-flex align-items-center">
             

                <button type="submit" name="addtocart" value="5" class="btn essence-btn">Solicitar o
                    Aluguer
                    da Viatura</button>

            </div>

        </form>
        

    </div> --}}

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('[data-toggle="tooltip"]').tooltip();
            calcularValorPagoAluguel();
            $('select[name="cmbmunicipio_receber"]').on('change', function() {
                var idmunicipio = $(this).val();
                console.log(idmunicipio);
                $.ajax({
                    url: 'localidade/' + idmunicipio,
                    type: 'GET',
                    dataType: 'json',
                    success: function(data) {
                        $('select[name=cmblocalidadeturis_receber]').empty();
                        for (var i = 0; data.length > i; i++) {
                            $('#cmblocalidadeturis_receber').append('<option value="' + data[i]
                                .id +
                                '">' + data[i].descricao + '</option>');
                        }
                    }
                });

            });




            $('select[name="cmbmunicipio_entregar"]').on('change', function() {
                var idmunicipio = $(this).val();
                console.log(idmunicipio);
                $.ajax({
                    url: 'localidade/' + idmunicipio,
                    type: 'GET',
                    dataType: 'json',
                    success: function(data) {
                        $('select[name=cmblocalidadeturis_entregar]').empty();
                        for (var i = 0; data.length > i; i++) {
                            $('#cmblocalidadeturis_entregar').append('<option value="' + data[i]
                                .id +
                                '">' + data[i].descricao + '</option>');
                        }
                    }
                });

            });

        });

        function calcularValorPagoAluguel() {



            var elementodataInicio = document.getElementById('dataInicio');
            var elementodataFim = document.getElementById('dataFim');
            var elementotxtValorApagar = document.getElementById('txtValorApagar');
            var elementotxtValorDiaria = document.getElementById('txtValorDiaria');
            var elementoNumeroDias = document.getElementById('txtNumeroDias');

            //var escolherLocalEL = document.getElementById('radio_localreceber_el');
            // var escolherEntregarEL = document.getElementById('radio_localentregar_el');

            //  var escolherLocalEL2 = document.getElementById('radio_localreceber_qb');
            // var escolherEntregarEL2 = document.getElementById('radio_localentregar_qe');

            var dataInicio = elementodataInicio.value;
            var dataFim = elementodataFim.value;
            var ValorDiaria = elementotxtValorDiaria.value;

            var taxa_local = 0;
            var taxa_local2 = 0;

            if (document.getElementById('radio_localreceber_el').checked) {
                taxa_local = 2000;

            }
            if (document.getElementById('radio_localentregar_el').checked) {
                taxa_local2 = 2000;
            }

            if (document.getElementById('radio_localreceber_qb').checked) {
                taxa_local = 0;


            }
            if (document.getElementById('radio_localentregar_qe').checked) {
                taxa_local2 = 0;
            }

            var date1 = new Date(dataInicio);
            var date2 = new Date(dataFim);

            var Difference_In_Time = date2.getTime() - date1.getTime();
            var Difference_In_Days = Difference_In_Time / (1000 * 3600 * 24);

            if (Difference_In_Days == 0) {
                Difference_In_Days = 1;
            }

            if (Difference_In_Days < 0) {

                alert("A data de início não deve ser superior que a data de fim!")

            } else {
                elementoNumeroDias.value = Difference_In_Days;
                elementotxtValorApagar.value = (parseFloat(ValorDiaria) * parseFloat(Difference_In_Days)) + parseFloat(
                    taxa_local) + parseFloat(taxa_local2);

            }





        }

        var date_input2 = document.getElementById('dataFim');
        date_input2.valueAsDate = new Date();

        date_input2.onchange = function() {
            calcularValorPagoAluguel();
        }

        var date_input1 = document.getElementById('dataInicio');
        date_input1.valueAsDate = new Date();

        date_input1.onchange = function() {
            calcularValorPagoAluguel();
        }




        function showLocalEntregaSIM() {
            // document.getElementById('div1').style.display = 'none';
            document.getElementById('areaLocalEntrega').style.display = 'block';
            calcularValorPagoAluguel();


        }

        function showLocalEntregaNAO() {
            //document.getElementById('div1').style.display = 'block';
            document.getElementById('areaLocalEntrega').style.display = 'none';
            calcularValorPagoAluguel();

        }


        function showAreaLocalReceberSIM2() {
            // document.getElementById('div1').style.display = 'none';
            document.getElementById('areaLocalReceber').style.display = 'block';
            calcularValorPagoAluguel();


        }

        function showAreaLocalReceberNAO2() {
            //document.getElementById('div1').style.display = 'block';
            document.getElementById('areaLocalReceber').style.display = 'none';
            calcularValorPagoAluguel();

        }
    </script>
</section>
<!-- ##### Single Product Details Area End ##### -->






@include('rodape')