@extends('adminlte::page')

@section('title', " $title ")

@section('content')
<div class="container-fluid">
    <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: #f0f5ff; /* 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;
        }
        
        .custom-width {
            width: 700px !important;
        }


    </style>
    <div class="row pt-4">
        <div class="col-md-12">
            <div class="callout callout-info">
                <h5><i class="fas fa-info"></i> Cadastrar Setor <i class="fa fa-map"></i></h5>
            </div>
        </div>
    </div>
    
    <div class="card shadow">
        <div class="card-body">
            <form id="formBairro" action="{{ route('sectors.store') }}" class="form" method="POST">
                @csrf
                <div class="row mt-2">
                    <div class="col-md-1">
                        <label class="control-label"> Código</label>
                        <input name="code" class="form-control" value="" placeholder="Digite o cód..." type="text" required>
                    </div>

                    <div class="col-md-4">
                        <label class="control-label"> Nome do Setor</label>
                        <input type="text" name="name" class="form-control" placeholder="Informe apenas o nome do setor..."  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="0">-- Selecione a Região para o setor --</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="modal-footer">
                    <button id="save-button" type="submit" class="btn btn-primary">Cadastrar</button>
                </div>
            </form>
        </div>
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", () => {
            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

            regionSelect.addEventListener("change", async () => {
                const selectedRegionId = regionSelect.value;

                if (selectedRegionId !== "0") {
                    try {
                        const 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;

                            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
                }
            });

            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>
    
    <div class="card">
        <div class="card-body shadow">
            
            <label>Filtro Setores:</label>
            
            @include('app.includes.alerts')
            
            <form action="{{ route('sectors.search') }}" method="get">
                @csrf
                <div class="row">
                    <div class="col-md-4">
                        <input type='text' name='name' class='form-control' placeholder='Informe o nome do Setor para pesquisa...'>
                    </div>

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

                <div class="modal-footer">
                    <button id="save-button" type="submit" class="btn btn-primary"><i class="fas fa-search"></i></button>
                </div>
            </form>
        </div>
    </div>

    <div class="row mt-5">
        <div class="col-md-12">
            <h5>
                Setore(s) cadastrado(s) <span class="badge badge-secondary shadow">{!! $count !!}</span> 
            </h5>
        </div>
    </div>    

    <div class="row mt-3">    
        <div class="col-md-12">
            <div class="table-responsive">
                <table class="table table-striped">
                    <thead class="bg-secondary text-white">
                        <tr>
                            <th><b>Região</b></th>
                            <th><b>Cód</b></th>
                            <th><b>Setor</b></th>
                            <th><b>Bairros</b></th>
                            <th><b>EDIT.</b></th>
                            <th><b>EXC.</b></th>
                        </tr>
                    </thead>
                    
                    <tbody>
                        @foreach($sectors as $sector)
                            <tr>
                                <td>
                                    @if($sector->region)
                                        {{ $sector->region->name }}
                                    @else
                                        Região não informada
                                    @endif
                                </td>
                                <td>{{ str_pad($sector->code, 2, '0', STR_PAD_LEFT) }}</td>
                                <td>{{ $sector->name }}</td>
                                <td>
                                    <ul class="list-group">
                                        @foreach($sector->sectorNeighborhoods as $sectorNeighborhood)
                                        <li class="list-group-item">
                                            {{ $sectorNeighborhood->neighborhood->acronym->acronym }} {{ str_pad($sectorNeighborhood->neighborhood->code, 2, '0', STR_PAD_LEFT) }} {{ $sectorNeighborhood->neighborhood->abbreviation->abbreviation }} - {{ $sectorNeighborhood->neighborhood->name }}
                                        </li>
                                        @endforeach
                                    </ul>
                                </td>
                                <td><a href="{{ route('sectors.edit', $sector->id) }}" class="btn btn-success"><i class="fa fa-edit"></i></a></td>
                                <td>
                                    <form action="{{ route('sectors.destroy', $sector->id) }}" method="POST" onsubmit="return confirm('Tem certeza que deseja deletar?')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-danger shadow"><i class="fas fa-trash"></i></button>
                                    </form>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!--MODAL UPDATE-->
    <div class="modal fade" id="update" tabindex="-1" role="dialog" aria-labelledby="formUpdate">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="formUpdate">Editar</h4>
                </div>
                <div class="modal-body">

                    <form action="" method="post" > 
                        <input type="hidden" name="id" id="id" value=""/>
                        <div class="form-group">
                            <div class="col-sm-4">
                                <label class="control-label"><i class="glyphicon glyphicon-check"></i> Codigo</label>
                                <input name="codigo" id="codigo" class="form-control inputstl" value=""  type="text">
                                <div class="help-block with-errors"></div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-8">
                                <label class="control-label"><i class="glyphicon glyphicon-check"></i> Nome</label>
                                <input name="nome" id="nome" class="form-control inputstl" value="" type="text">
                                <div class="help-block with-errors"></div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-6">
                                <label class="control-label"><i class="glyphicon glyphicon-check"></i> Sigla</label>
                                <select name="id_sigla" id="id_sigla" class="form-control id_sigla">
                                    <option value="0">SELECIONE A SIGLA</option>

                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-6">
                                <label class="control-label"><i class="glyphicon glyphicon-check"></i> Região</label>
                                <select name="id_regiao" id="id_regiao" class="form-control id_regiao">
                                    <option value="0">SELECIONE A REGIÃO</option>

                                </select>
                                <div class="help-block with-errors"></div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-12">
                                <label class="control-label"><i class="glyphicon glyphicon-check"></i> Reclamação</label>
                                <input name="reclamacao" id="reclamacao" class="form-control inputstl" value="" type="text">
                                <div class="help-block with-errors"></div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-danger" data-dismiss="modal">Fechar</button>
                            <input type="submit" class="btn btn-success" value="Atualizar" name="SendPostForm"/>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!--MODAL UPDATE-MAPA-->
    <div class="modal fade" id="update-mapa" tabindex="-1" role="dialog" aria-labelledby="formUpdate">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="formUpdate">Editar</h4>
                </div>
                <div class="modal-body">

                    <form name="PostForm" action="" method="post" enctype="multipart/form-data">
                        <input type="hidden" name="id" id="id" value=""/>
                        <div class="form-group">
                            <div class="col-sm-12">
                                <label class="control-label"><i class="glyphicon glyphicon-camera"></i> Mapa do Setor</label>
                                <input type="file" name="foto" class="form-control" required />
                                <div class="help-block with-errors"></div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-danger" data-dismiss="modal">Fechar</button>
                            <input type="submit" class="btn btn-success" value="Atualizar" name="SendPostForm" />
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="card-header">
        {!! $sectors->links() !!}
    </div>
</div>
@stop