@extends('adminlte::page')

@section('content')

<style>
    /* CSS */
    .bairro-list {
        list-style: none;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        margin: 0 -5px; /* Para compensar o espaçamento entre os itens */
    }

    .bairro-item {
        flex: 0 0 calc(10% - 20px); /* 10% de largura para cada item, menos o espaçamento */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
        margin-right: 10px;
        padding: 15px;
        box-sizing: border-box;
        border: 1px solid #ccc; /* Adicionando borda */
        background-color: #ecffdf; /* Tom de azul suave como plano de fundo */
        text-align: center; /* Centraliza o texto horizontalmente */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Adicionando sombra */
    }

    .bairro-checkbox {
        margin-bottom: 10px; /* Espaçamento entre o checkbox e o nome do bairro */
    }

    .custom-checkbox {
        width: 20px;
        height: 20px;
        background-color: #fff;
        border: 2px solid #ccc;
        border-radius: 3px;
        cursor: pointer;
        display: inline-block;
        position: relative;
    }

    .custom-checkbox::after {
        content: "";
        position: absolute;
        top: 4px;
        left: 4px;
        width: 10px;
        height: 10px;
        background-color: #007bff;
        border-radius: 2px;
        opacity: 0;
    }

    .bairro-checkbox input[type="checkbox"]:checked + .custom-checkbox::after {
        opacity: 1;
    }

    .bairro-name {
        flex-grow: 1;
    }

</style>
    
<div class="row pt-4">
    <div class="col-md-12">
        <h4>Editando Setor <i class="fa fa-map"></i></h4>
    </div>
</div>
    
<div class="card mt-4">
    @include('app.includes.alerts')
    <div class="card-body">

        <h4>Editando Setor</h4>

        <div class="col-md-12">
            <form id="formBairro" action="{{ route('sectors.update', $sector->id) }}" class="form" method="POST">
                @csrf
                @method('PUT')
                <div class="row mt-2">
                    <div class="col-md-1">
                        <label class="control-label"> Código</label>
                        <input type="text" name="code" class="form-control" value="{{ $sector->code }}" required>
                    </div>

                    <div class="col-md-4">
                        <label class="control-label"> Nome do Setor</label>
                        <input type="text" name="name" class="form-control" value="{{ $sector->name }}" required>
                    </div>

                    <div class="col-md-3">
                        <label class="control-label">Região</label>
                        <select name="region_id" class="form-control" id="region-select">
                            <option value="{{ $sector->region_id }}">{{ $sector->region->name }}</option>
                            @foreach($regions as $region)
                                <option value="{{ $region->id }}">{{ $region->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <!-- Mostra os bairros a serem vinculados-->
                <div class="row mt-4">
                    <div class="col-md-12">
                        <ul class="bairro-list" id="bairros-container">
                            <!-- Bairros serão adicionados aqui via JavaScript -->
                        </ul>
                    </div>
                </div> 

                <div class="row mt-4">
                    <button id="save-button" type="submit" class="btn btn-success">Atualizar setor</button>
                </div>
            </form>
        </div>

    </div>
</div>

<script>
    document.addEventListener("DOMContentLoaded", async () => {
        const regionSelect = document.getElementById("region-select");
        const bairrosContainer = document.getElementById("bairros-container");
        const saveButton = document.getElementById("save-button");
        const selectedNeighborhoods = []; // Array para armazenar bairros selecionados
        let sectorNeighborhoods = new Set(); // Conjunto para armazenar IDs dos bairros associados ao setor

        async function loadNeighborhoods(selectedRegionId, selectedSectorId) {
            if (selectedRegionId !== "0") {
                try {
                    let response;

                    if (selectedSectorId) {
                        // Obter os IDs dos bairros associados ao setor
                        const sectorNeighborhoodsResponse = await fetch(`/app/sectors/getSectorNeighborhoods/${selectedSectorId}`);
                        const sectorNeighborhoodsData = await sectorNeighborhoodsResponse.json();
                        sectorNeighborhoods = new Set(sectorNeighborhoodsData.map(item => item.neighborhood_id));

                        // Obter todos os bairros da região
                        response = await fetch(`/app/sectors/getNeighborhoods/${selectedRegionId}`);
                    } else {
                        response = await fetch(`/app/sectors/getNeighborhoods/${selectedRegionId}`);
                    }

                    const bairros = await response.json();

                    bairrosContainer.innerHTML = ""; // Limpa as opções existentes

                    bairros.forEach(bairro => {
                        const listItem = document.createElement("li");
                        listItem.className = "bairro-item";

                        const checkboxDiv = document.createElement("div");
                        checkboxDiv.className = "bairro-checkbox";

                        const checkbox = document.createElement("input");
                        checkbox.type = "checkbox";
                        checkbox.name = "neighborhood_id[]";
                        checkbox.value = bairro.id;

                        // Verifica se o ID do bairro está no conjunto de IDs associados ao setor e marca o checkbox, se necessário
                        checkbox.checked = sectorNeighborhoods.has(bairro.id);

                        checkboxDiv.appendChild(checkbox);
                        listItem.appendChild(checkboxDiv);

                        const bairroName = document.createElement("span");
                        bairroName.textContent = bairro.name;
                        listItem.appendChild(bairroName);

                        bairrosContainer.appendChild(listItem);
                    });
                } catch (error) {
                    console.error("Erro ao obter bairros:", error);
                }
            } else {
                bairrosContainer.innerHTML = ""; // Limpa as opções quando nenhuma região estiver selecionada
            }
        }

        // Carregar bairros quando a página é carregada
        const selectedRegionId = regionSelect.value;
        const selectedSectorId = '{{ $sector->id }}'; // Substitua pelo valor do setor selecionado do Laravel
        loadNeighborhoods(selectedRegionId, selectedSectorId);

        regionSelect.addEventListener("change", () => {
            const selectedRegionId = regionSelect.value;
            loadNeighborhoods(selectedRegionId, selectedSectorId);
        });

        saveButton.addEventListener("click", () => {
            selectedNeighborhoods.length = 0; // Limpa o array antes de cada salvamento
            const checkboxes = document.querySelectorAll('input[type="checkbox"][name="neighborhood_id[]"]:checked');
            checkboxes.forEach(checkbox => {
                selectedNeighborhoods.push(checkbox.value);
            });

            // Aqui você pode enviar o array 'selectedNeighborhoods' para o servidor para salvar no banco de dados
            console.log("Bairros selecionados para salvar:", selectedNeighborhoods);
        });
    });
</script>

@endsection