<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Busca de Imóveis</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;1,300&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.3/css/bulma.min.css">
    <script type="text/javascript" src="https://gc.kis.v2.scr.kaspersky-labs.com/FD126C42-EBFA-4E12-B309-BB3FDD723AC1/main.js?attr=FJKJwEAsybyTGulFRpzM5fpkrauMNmcp0U46T4x_POiQSBw7oPawr3p_0h3N46JrOelHRNk92FhSOtU8VAnQpz6wHYyD6qqE0rpDQyeT8RKRYg1Qi7ZYPvKQf3XxqG-mXFPvhHUAvIkjhzbG4VFKnyqA923gNPuvHC3Mb3yxFkMdOFiSLMJVMjrFC29LC35MskOp3FqEHgSHKUwa4Hhv4Odvw6vDaYibIR20ZJ-xc-NBKH4vsTOk_Nab-L1MkHyLIdGzMKpd_u4va1MF8qn0_w" charset="UTF-8"></script><style>
        body {
            font-family: 'Arial', sans-serif;
            /* Fonte mais suave */
            background-color: #f5f5f5;
        }

        .form-imovel {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .checkbox-group-item {
            display: flex;
            align-items: center;
            margin: 10px;
            padding: 10px;
            background-color: #f9f9f9;
            /* Fundo claro */
        }

        .checkbox-group-item input[type="checkbox"] {
            accent-color: #0a4137;
            /* Cor do checkbox */
        }

        .checkbox-group-item label {
            margin-left: 8px;
            font-size: 1em;
            /* Tamanho da fonte */
            color: #4a4a4a;
            /* Cor da fonte */
        }

        .select-min,
        .select-max {
            width: 100%;
        }

        .button.is-link {
            background-color: #0a4137;
            border-color: #0a4137;
        }

        .button.is-link:hover {
            background-color: darken(#0a4137, 10%);
        }

        .input,
        .select {
            font-size: 0.9em;
        }

        .field.has-addons .control {
            margin-left: 0.5em;
        }
    </style>
</head>

<body>
    <section class="section">
        <div class="container">
            <div class="form-imovel">
                <form class="form-busca-imovel" method="GET" action="">
                    <div class="columns is-multiline">
                        <div class="column is-one-quarter">
                            <div class="select is-fullwidth">
                                <select id="tipo_imovel" name="tipo_imovel">
                                    <option value="">TIPO IMÓVEL</option>
                                    <option value="casa">CASA</option>
                                    <option value="apartamento">APARTAMENTO</option>
                                    <option value="casa-de-vila">CASA DE VILA</option>
                                    <option value="condominio">CONDOMÍNIO</option>
                                </select>
                            </div>
                        </div>

                        <div class="column is-one-quarter">
                            <div class="select is-fullwidth">
                                <select id="tipo_origem" name="tipo_origem">
                                    <option value="">TIPO ORIGEM</option>
                                    <option value="lancamento">LANÇAMENTO</option>
                                </select>
                            </div>
                        </div>

                        <div class="column is-one-quarter">
                            <div class="select is-fullwidth">
                                <select id="cidade" name="cidade">
                                    <option value="">CIDADE</option>
                                    <option value="sao-paulo">São Paulo</option>
                                    <option value="guaruja">Guarujá</option>
                                    <option value="itupeva">Itupeva</option>
                                    <option value="avare">Avaré</option>
                                </select>
                            </div>
                        </div>

                        <div class="column is-one-quarter">
                            <div class="field has-addons">
                                <div class="control is-expanded">
                                    <input class="input" type="text" placeholder="BUSCAR REFERÊNCIA" name="referencia">
                                </div>
                                <div class="control">
                                    <button type="button" class="button is-link" id="buscarButton">BUSCAR</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="columns is-multiline checkbox-group">
                        <div class="checkbox-group-item">
                            <input type="checkbox" name="regiao[]" value="1" id="1" />
                            <label for="1">Alto de Pinheiros / Vila Madalena</label>
                        </div>

                        <div class="checkbox-group-item">
                            <input type="checkbox" name="regiao[]" value="2" id="2" />
                            <label for="2">Cidade Jardim / Jardim Guedala</label>
                        </div>

                        <div class="checkbox-group-item">
                            <input type="checkbox" name="regiao[]" value="3" id="3" />
                            <label for="3">Higienópolis / Consolação</label>
                        </div>

                        <div class="checkbox-group-item">
                            <input type="checkbox" name="regiao[]" value="4" id="4" />
                            <label for="4">Itaim / Vila Olímpia</label>
                        </div>

                        <div class="checkbox-group-item">
                            <input type="checkbox" name="regiao[]" value="5" id="5" />
                            <label for="5">Jardim América / Jardim Paulista</label>
                        </div>

                        <div class="checkbox-group-item">
                            <input type="checkbox" name="regiao[]" value="6" id="6" />
                            <label for="6">Jardim Europa / Jardim Paulistano</label>
                        </div>

                        <div class="checkbox-group-item">
                            <input type="checkbox" name="regiao[]" value="7" id="7" />
                            <label for="7">Morumbi</label>
                        </div>

                        <div class="checkbox-group-item">
                            <input type="checkbox" name="regiao[]" value="8" id="8" />
                            <label for="8">Pacaembu / Perdizes</label>
                        </div>

                        <div class="checkbox-group-item">
                            <input type="checkbox" name="regiao[]" value="9" id="9" />
                            <label for="9">Vila Mariana / Paraíso</label>
                        </div>

                        <div class="checkbox-group-item">
                            <input type="checkbox" name="regiao[]" value="10" id="10" />
                            <label for="10">Vila Nova Conceição / Moema</label>
                        </div>

                        <div class="checkbox-group-item">
                            <input type="checkbox" name="regiao[]" value="11" id="11" />
                            <label for="11">Outras regiões</label>
                        </div>
                    </div>

                    <div class="columns is-multiline">
                        <!-- Área Útil -->
                        <div class="column">
                            <span>ÁREA ÚTIL</span>
                            <div class="select is-fullwidth">
                                <select id="areaUtilMin" name="area_util_min">
                                    <option value="0">MIN</option>
                                    <option value="90">90</option>
                                    <option value="100">100</option>
                                    <option value="200">200</option>
                                    <option value="300">300</option>
                                    <option value="400">400</option>
                                </select>
                            </div>
                            <div class="select is-fullwidth">
                                <select id="areaUtilMax" name="area_util_max">
                                    <option value="15000">MAX</option>
                                    <option value="500">500</option>
                                    <option value="600">600</option>
                                    <option value="700">700</option>
                                    <option value="800">800</option>
                                    <option value="900">900</option>
                                </select>
                            </div>
                        </div>

                        <!-- Valor -->
                        <div class="column">
                            <span>VALOR</span>
                            <div class="select is-fullwidth">
                                <select id="valorMin" name="valor_min">
                                    <option value="0">MIN</option>
                                    <option value="700000">1.000.000,00</option>
                                    <option value="1400000">2.000.000,00</option>
                                    <option value="2100000">3.000.000,00</option>
                                    <option value="2800000">4.000.000,00</option>
                                    <option value="3500000">5.000.000,00</option>
                                    <option value="4200000">6.000.000,00</option>
                                    <option value="4900000">7.000.000,00</option>
                                    <option value="5600000">8.000.000,00</option>
                                    <option value="6300000">9.000.000,00</option>
                                    <option value="70000000">10.000.000,00</option>
                                    <option value="10500000">15.000.000,00</option>
                                </select>
                            </div>
                            <div class="select is-fullwidth">
                                <select id="valorMax" name="valor_max">
                                    <option value="50000000">MAX</option>
                                    <option value="1300000">1.000.000,00</option>
                                    <option value="2600000">2.000.000,00</option>
                                    <option value="3900000">3.000.000,00</option>
                                    <option value="5200000">4.000.000,00</option>
                                    <option value="6500000">5.000.000,00</option>
                                    <option value="7800000">6.000.000,00</option>
                                    <option value="9100000">7.000.000,00</option>
                                    <option value="10400000">8.000.000,00</option>
                                    <option value="11700000">9.000.000,00</option>
                                    <option value="13000000">10.000.000,00</option>
                                    <option value="19500000">15.000.000,00</option>
                                </select>
                            </div>
                        </div>

                        <!-- Dormitórios -->
                        <div class="column">
                            <span>DORMITÓRIOS</span>
                            <div class="select is-fullwidth">
                                <select id="quartosMin" name="quartos-min">
                                    <option value="0">MIN</option>
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                    <option value="4">4</option>
                                    <option value="5">5</option>
                                </select>
                            </div>
                            <div class="select is-fullwidth">
                                <select id="quartosMax" name="quartos-max">
                                    <option value="100">MAX</option>
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                    <option value="4">4</option>
                                    <option value="5">5</option>
                                </select>
                            </div>
                        </div>

                        <!-- Suítes -->
                        <div class="column">
                            <span>SUÍTES</span>
                            <div class="select is-fullwidth">
                                <select id="suitesMin" name="suites-min">
                                    <option value="0">MIN</option>
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                    <option value="4">4</option>
                                    <option value="5">5</option>
                                </select>
                            </div>
                            <div class="select is-fullwidth">
                                <select id="suitesMax" name="suites-max">
                                    <option value="100">MAX</option>
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                    <option value="4">4</option>
                                    <option value="5">5</option>
                                </select>
                            </div>
                        </div>

                        <!-- Vagas -->
                        <div class="column">
                            <span>VAGAS</span>
                            <div class="select is-fullwidth">
                                <select id="vagasMin" name="vagas-min">
                                    <option value="0">MIN</option>
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                    <option value="4">4</option>
                                    <option value="5">5</option>
                                </select>
                            </div>
                            <div class="select is-fullwidth">
                                <select id="vagasMax" name="vagas-max">
                                    <option value="100">MAX</option>
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                    <option value="4">4</option>
                                    <option value="5">5</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </section>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            var form = document.querySelector('.form-busca-imovel')
            var buscarButton = document.getElementById('buscarButton')

            buscarButton.addEventListener('click', function (e) {
                var referencia = form.querySelector('[name="referencia"]').value
                var tipo_imovel = form.querySelector('[name="tipo_imovel"]').value
                var tipo_origem = form.querySelector('[name="tipo_origem"]').value
                var cidade = form.querySelector('[name="cidade"]').value || 'sao-paulo'
                var area_util_min = form.querySelector('[name="area_util_min"]').value
                var area_util_max = form.querySelector('[name="area_util_max"]').value
                var valor_min = form.querySelector('[name="valor_min"]').value
                var valor_max = form.querySelector('[name="valor_max"]').value
                var quartos_min = form.querySelector('[name="quartos-min"]').value
                var quartos_max = form.querySelector('[name="quartos-max"]').value
                var suites_min = form.querySelector('[name="suites-min"]').value
                var suites_max = form.querySelector('[name="suites-max"]').value
                var vagas_min = form.querySelector('[name="vagas-min"]').value
                var vagas_max = form.querySelector('[name="vagas-max"]').value

                var regioesCheckboxes = Array.from(form.querySelectorAll('input[name="regiao[]"]:checked'))
                var regioesParams = regioesCheckboxes.map(function (el, index) {
                    return `regiao%5B${index}%5D=${el.value}`
                }).join('&')

                var url = `https://anakaneyuki.com.br/web/?referencia=${referencia}&tipo_imovel=${tipo_imovel}&tipo_origem=${tipo_origem}&cidade=${cidade}&${regioesParams}&area_util_min=${area_util_min}&area_util_max=${area_util_max}&valor_min=${valor_min}&valor_max=${valor_max}&quartos-min=${quartos_min}&quartos-max=${quartos_max}&suites-min=${suites_min}&suites-max=${suites_max}&vagas-min=${vagas_min}&vagas-max=${vagas_max}`
                window.open(url, '_blank')
            })
        });
    </script>
</body>

</html>