@include('app.includes.alerts')
    <style>
        /* CSS */
        .setor-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 */
        }

        .setor-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 */
        }

        .setor-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;
        }

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

        .setor-name {
            flex-grow: 1;
        }
        
        /* Estilo para campos desabilitados (vermelho) */
        .disabled-field {
            background-color: #ff9999 !important; /* Vermelho claro */
        }

        /* Estilo para campos habilitados (verde) */
        .enabled-field {
            background-color: #66ffff; /* Verde claro */
        }

    </style>

<form id="formUpdate" action="{{ route('customers.update', $customer->id) }}" method="POST">
    @csrf
    @method('PUT')
    <div class="row mt-2">

        <div class="col-md-2">
            <label class="control-label">Código</label>
            <input name="code" class="form-control" value="{{ str_pad($customer->code, 3, '0', STR_PAD_LEFT) }}" readonly=""/>
        </div>

        <div class="col-md-4">
            <label class="control-label">Categoria</label>
            <select name="category_id" class="form-control">
                @foreach($categories as $category)
                <option value="{{ $category->id }}" {{ $category->category_id == $category->id || old('category_id') == $category->id ? 'selected' : '' }}>{{ $category->category }}</option>
                @endforeach
            </select>
        </div>

        <div class="col-md-3">
            <label class="control-label">Tipo</label>
            <select name="type_form" class="form-control">
                <option value="0"> -- Selecione --</option>
                <option value="Fisica" {{ (isset($customer) && $customer->type_form == 'Fisica' || old('type_form') == 'Fisica') ? 'selected' : '' }}>Pessoa Fisica</option>
                <option value="Juridica" {{ (isset($customer) && $customer->type_form == 'Juridica' || old('type_form') == 'Juridica') ? 'selected' : '' }}>Pessoa Juridica</option>
            </select>
        </div>

        <div class="col-md-3">
            <label class="control-label">Status</label>
            <select name="status" class="form-control">
                <option value="1" {{ (isset($customer) && $customer->status == 1 || old('status') == '1') ? 'selected' : '' }}>Ativa</option>
                <option value="0" {{ (isset($customer) && $customer->status == 0 || old('status') == '0') ? 'selected' : '' }}>Inativa</option>
            </select>
        </div>
    </div>

    <div class="row mt-2">
        <div class="col-md-6">
            <label class="control-label">Razão Social</label>
            <input name="corporate_name" class="form-control" value="{{ $customer->corporate_name ?? old('corporate_name') }}" placeholder="Digite s Razão social..." type="text">
        </div>

        <div class="col-md-6">
            <label class="control-label">Fanatasia</label>
            <input name="fantasy_name" class="form-control" value="{{ $customer->fantasy_name ?? old('fantasy_name') }}" placeholder="Digite a fantasia..." type="text">
        </div>
    </div>

    <div class="row mt-2">
        <div class="col-md-2">
            <label class="control-label">C.N.P.J</label>
            <input name="cnpj" id="cnpj" class="form-control" value="{{ $customer->cnpj ?? old('cnpj') }}" placeholder="Digite o C.N.P.J..." type="text">
        </div>

        <div class="col-md-2">
            <label class="control-label">C.P.F</label>
            <input name="cpf" id="cpf" class="form-control" value="{{ $customer->cpf ?? old('cpf') }}" placeholder="Digite o C.P.F..." type="text">
        </div>

        <div class="col-md-2">
            <label class="control-label">INSC</label>
            <input name="insc" id="insc" class="form-control" value="{{ $customer->insc ?? old('insc') }}" placeholder="Digite o INSC..." type="text">
        </div>

        <div class="col-md-2">
            <label class="control-label">INSCM</label>
            <input name="inscm" id="inscm" class="form-control" value="{{ $customer->inscm ?? old('inscm') }}" placeholder="Digite o INSCM..." type="text">
        </div>

        <div class="col-md-2">
            <label class="control-label">Controle</label>
            <input name="control" class="form-control" value="{{ $customer->control ?? old('control') }}" placeholder="Digite apenas numeros..." type="text">
        </div>

        <div class="col-md-2">
            <label class="control-label">Faturar</label>
            <input name="invoice" id="invoice" class="form-control" value="{{ $customer->invoice ?? old('invoice') }}" placeholder="Digite o faturar..." type="text">
        </div>
    </div>

    <div class="row mt-2">
        <div class="col-md-4">
            <label class="control-label">Telefone</label>
            <input name="telephone" id="telephone" class="form-control" value="{{ $customer->telephone ?? old('telephone') }}" placeholder="Digite o telefone..." type="text">
        </div>

        <div class="col-md-8">
            <label class="control-label">Site</label>
            <input name="site" class="form-control" value="{{ $customer->site ?? old('site') }}" placeholder="Digite o Site..." type="text">
        </div>
    </div>

    <div class="row mt-2">
        <div class="col-md-2">
            <label class="control-label">C.E.P</label>
            <input name="cep" id="cep" class="form-control" value="{{ $customer->cep ?? old('cep') }}" placeholder="Digite o C.E.P..." type="text">
        </div>

        <div class="col-md-6">
            <label class="control-label">Endereço</label>
            <input name="adress" id="adress" class="form-control" value="{{ $customer->adress ?? old('adress') }}" placeholder="Digite o endereço..." type="text">
        </div>
        <div class="col-md-4">
            <label class="control-label">Nº</label>
            <input name="number" class="form-control" value="{{ $customer->number ?? old('number') }}" placeholder="Nº..." type="text">
        </div>
    </div>

    <div class="row mt-2">
        <div class="col-md-4">
            <label class="control-label">Bairro</label>
            <input name="neighborhood" id="neighborhood" class="form-control" value="{{ $customer->neighborhood ?? old('neighborhood') }}" placeholder="Digite o Bairro..." type="text">
        </div>
        <div class="col-md-3">
            <label class="control-label">Complemento</label>
            <input name="complement" id="complement" class="form-control" value="{{ $customer->complement ?? old('neighborhood') }}" placeholder="Digite o complemento..." type="text">
        </div>
        <div class="col-sm-3">
            <label class="control-label">Cidade</label>
            <input name="city" id="city" class="form-control" value="{{ $customer->city ?? old('city') }}" placeholder="Digite a Cidade..." type="text">
        </div>
        <div class="col-sm-2">
            <label class="control-label">UF</label>
            <input name="uf" id="uf" class="form-control" value="{{ $customer->uf ?? old('uf') }}" placeholder="UF..." type="text">
        </div>

    </div>

    <div class="modal-footer mt-4">
        <div class="col-sm-12">
            <button type="submit" id="submitForm1" class="btn btn-success">Atualizar</button>
            <a href="" class="btn btn-outline-primary me-1" data-bs-toggle="modal" data-bs-target="#contacts"> Inserir Contatos</a>
            <a href="" class="btn btn-outline-secondary me-1" data-bs-toggle="modal" data-bs-target="#material"> Inserir Material</a>
            <a href="" class="btn btn-outline-info me-1" data-bs-toggle="modal" data-bs-target="#sectors"> Inserir Setores</a>
            <a href="" class="btn btn-outline-warning me-1" data-bs-toggle="modal" data-bs-target="#"> Distribuição</a>
        </div>
    </div>
</form>

<!-- Contato(s) -->
<div class="row mt-4">
    <div class="col-md-12">
        <p><i class="fa fa-user"></i><strong> Contato(s)</strong></p>
        <table class="table table-condensed">
            <tr>
                <th style="width:15%;" class="bg-dark text-white">Nome</th>
                <th class="bg-dark text-white">Setor</th>
                <th class="bg-dark text-white">E-mail 1</th>
                <th class="bg-dark text-white">E-mail 2</th>
                <th class="bg-dark text-white">Telefone 1</th>
                <th class="bg-dark text-white">Telefone 2</th>
                <th class="bg-dark text-white text-center">Editar</th>
                <th class="bg-dark text-white text-center">Excluir</th>
            </tr>
            @foreach($customer->contacts as $contact)
            <tr>
                <td>{{ $contact->name }}</td>
                <td>{{ $contact->sector }}</td>
                <td>{{ $contact->email }}</td>
                <td>{{ $contact->secondary_email }}</td>
                <td>{{ $contact->phone_one }}</td>
                <td>{{ $contact->phone_two }}</td>
                <td class="text-center">
                    <a href="#" class="btn btn-outline-success me-1 edit-contact-btn"
                       data-bs-toggle="modal" data-bs-target="#editContactModal"
                       data-id="{{ $contact->id }}"><i class="fas fa-edit"></i>
                    </a>
                </td>
                <td class="text-center"> 
                    <form action="{{ route('contacts.destroy', $contact->id)}}" method="post" onsubmit="return confirm('Tem certeza que deseja deletar?')">
                        @method('DELETE')
                        @csrf
                        <button type="submit" class="btn btn-outline-danger me-1"><i class="fas fa-trash"></i></button>
                    </form>
                </td>
            </tr>
            @endforeach

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

<!-- Material -->
<div class="row mt-4">
    <div class="col-md-12">
        <p><i class="fa fa-check"></i><strong> Material</strong></p>
        <table class="table table-condensed">
            <tr>
                <th class="bg-dark text-white">Data</th>
                <th class="bg-dark text-white">Material</th>
                <th class="bg-dark text-white">Milheiro</th>
                <th class="bg-dark text-white text-center">Editar</th>
                <th class="bg-dark text-white text-center">Excluir</th>
            </tr>
            @foreach($customer->materialcustomers as $materialcustomer)
            <tr>
                <td>{{ date('d/m/Y', strtotime($materialcustomer->created_at)) }}</td>
                <td style="width:62%">{{ $materialcustomer->material }}</td>
                <td>R$ {{ number_format($materialcustomer->value_granted, 2, ',', '.') }}</td>
                <td class="text-center">
                    <a href="#" class="btn btn-outline-success me-1 edit-material-btn"
                       data-bs-toggle="modal" data-bs-target="#editMaterialModal"
                       data-id="{{ $materialcustomer->id }}"><i class="fas fa-edit"></i>
                    </a>
                </td>
                <td class="text-center"> 
                    <form action="{{ route('material_customer.destroy', $materialcustomer->id)}}" method="post" onsubmit="return confirm('Tem certeza que deseja deletar?')">
                        @method('DELETE')
                        @csrf
                        <button type="submit" class="btn btn-outline-danger me-1"><i class="fas fa-trash"></i></button>
                    </form>
                </td>            
            </tr>
            @endforeach
        </table>
    </div>
</div>


<!-- Setores -->
<div class="row mt-4">
    <div class="col-md-12">
         <form action="{{ route('distributions.store') }}" method="post">
            
            @csrf
             
            <p><i class="fa fa-check"></i><strong> Setores para distribuição - total a ser distribuido nos setores: </strong> <span id="remaining_quantity" class="badge badge-primary shadow" style="font-size:20px !important;"></span></p>
             
            <!--Qtd a ser dstribuida para calculo-->
            @if(isset($autorization) && $autorization->status == "Autorizado")
                <input type="hidden" name="quantity_total" id="quantity_total" class="form-control" value="{{ isset($prospect->qtd) ? $prospect->qtd : '' }}" required>
            @else
                <p class="text-center text-danger"><strong><i class="fa fa-exclamation"></i> Distribuição ainda não autorizada</strong></p>
            @endif
            <input type="hidden" name="customer_id" class="form-control" value="{{ $customer->id }}" required="">
 
            <table class="table">
                <tr>
                    <th class="bg-dark text-white">Setor</th>
                    <th class="bg-dark text-white">Região</th>
                    <th class="bg-dark text-white">Data de distribuição</th>
                    <th class="bg-dark text-white">Quantidade</th>
                    <th class="bg-dark text-white">Supervisor</th>
                    <th class="bg-dark text-white"><a href="" class="btn btn-success"><i class="fa fa-edit"></i></a></th>
                </tr>
                @foreach($customer->sectors as $sector)
                <tr>
                     @php
                        $distribution = $sector->distributions->where('status', 'Em distribuição')->first();
                    @endphp
                    <td><input type="checkbox" name="sector_id[]" class="checkbox-control" value="{{ $sector->id }}" {{ $distribution && $distribution->status == 'Em distribuição' ? 'checked' : '' }}>
                        {{ $sector->code }} {{ $sector->name }}
                    </td>
                    <td>
                        @if ($sector->region)
                            {{ $sector->region->name }}
                        @else
                            Nenhuma região associada
                        @endif
                    </td> 

                    <td>
                        @if ($distribution)
                            <input type="text" name="distribution_date[]" class="form-control datepicker" id="distribution_date_{{ $sector->name }}" placeholder="Insira a data de distribuição" value="{{ $distribution->distribution_date }}">
                        @else
                            <input type="text" name="distribution_date[]" class="form-control datepicker" id="distribution_date_{{ $sector->name }}" placeholder="Insira a data de distribuição" value="">
                        @endif
                    </td>
                    <td>
                        @if ($distribution)
                            <input type="text" name="quantity_sector[]" class="form-control" placeholder="Insira a qtd a ser distribuída" value="{{ $distribution->quantity_sector }}">
                            @else
                            <input type="text" name="quantity_sector[]" class="form-control" placeholder="Insira a qtd a ser distribuída" value="">
                        @endif
                    </td>
                    <td>
                        @if ($distribution)
                            <select name="collaborator_id[]" class="form-control">
                                <option value="">--Selecione--</option>
                                @foreach($collaborators as $collaborator)
                                    <option value="{{ $collaborator->id }}" {{ $distribution->collaborator_id == $collaborator->id ? 'selected' : '' }}>{{ $collaborator->name }}</option>
                                
                                @endforeach
                                
                            </select>
        
                        @endif
                    </td>
                </tr>
                @endforeach
            </table>

            <div class="modal-footer">
                <button type="submit" class="btn btn-outline-primary me-1 btn-save-distribution" ><i class="fas fa-check"></i> Salvar distribuição</button>
            </div>
            
        </form>
    </div>
</div>


<script>
    document.addEventListener("DOMContentLoaded", function () {
        const quantityTotalInput = document.getElementById("quantity_total");
        const quantitySectorInputs = document.querySelectorAll("input[name='quantity_sector[]']");
        const remainingQuantityDisplay = document.getElementById("remaining_quantity");
        const sectorCheckboxes = document.querySelectorAll("input[name='sector_id[]']");
        const distributionDateInputs = document.querySelectorAll("input[name='distribution_date[]']");
        const collaboratorSelects = document.querySelectorAll("select[name='collaborator_id[]']");

        function updateFieldStatus() {
            let atLeastOneChecked = false; // Variável para verificar se pelo menos um checkbox está marcado

            sectorCheckboxes.forEach(function (checkbox, index) {
                const isChecked = checkbox.checked;
                distributionDateInputs[index].disabled = !isChecked;
                quantitySectorInputs[index].disabled = !isChecked;
                collaboratorSelects[index].disabled = !isChecked;

                // Adicione ou remova as classes CSS com base no estado do campo
                distributionDateInputs[index].classList.toggle("enabled-field", isChecked);
                quantitySectorInputs[index].classList.toggle("enabled-field", isChecked);
                collaboratorSelects[index].classList.toggle("enabled-field", isChecked);
                distributionDateInputs[index].classList.toggle("disabled-field", !isChecked);
                quantitySectorInputs[index].classList.toggle("disabled-field", !isChecked);
                collaboratorSelects[index].classList.toggle("disabled-field", !isChecked);

                if (isChecked) {
                    atLeastOneChecked = true;
                }
            });

            // Habilitar ou desabilitar o botão "Salvar Distribuição" com base na variável "atLeastOneChecked"
            const saveButton = document.querySelector(".btn-save-distribution");
            saveButton.disabled = !atLeastOneChecked;
        }

        sectorCheckboxes.forEach(function (checkbox) {
            checkbox.addEventListener("change", function () {
                updateFieldStatus();
                updateRemainingQuantity();
            });
        });

        function updateRemainingQuantity() {
            const totalQuantity = parseFloat(quantityTotalInput.value.replace(/\./g, '').replace(',', '.'));
            let usedQuantity = parseFloat(0);
            let exceededInput = null;

            quantitySectorInputs.forEach(function (input) {
                const quantity = parseFloat(input.value.replace(/\./g, '').replace(',', '.'));
                if (!isNaN(quantity)) {
                    usedQuantity += quantity;

                    if (usedQuantity > totalQuantity && !exceededInput) {
                        exceededInput = input;
                    }
                }
            });

            let remainingQuantity = totalQuantity - usedQuantity;
            remainingQuantity = Math.max(0, remainingQuantity);
            remainingQuantityDisplay.innerText = remainingQuantity.toLocaleString('pt-BR');

            
            if (exceededInput) {
                // Limpar o campo que excedeu
                //exceededInput.value = "";
                // Exibir a mensagem de excedeu abaixo do campo
                const messageElement = document.createElement("div");
                messageElement.innerText = "Você excedeu a quantidade permitida.";
                messageElement.style.color = "red"; // Opcional: ajustar o estilo da mensagem
                exceededInput.parentNode.appendChild(messageElement);

                // Remover a mensagem após um certo período de tempo (por exemplo, 3 segundos)
                setTimeout(function () {
                    exceededInput.parentNode.removeChild(messageElement);
                }, 3000); // 3000 milissegundos = 3 segundos
            }
        }

        quantityTotalInput.addEventListener("input", function () {
            updateRemainingQuantity();
        });

        quantitySectorInputs.forEach(function (input) {
            input.addEventListener("input", function () {
                updateRemainingQuantity();
            });
        });

        // Validação das datas, quantidades e supervisores no momento do clique em "Salvar distribuição"
        const saveButton = document.querySelector(".btn-save-distribution");
        saveButton.addEventListener("click", function (e) {
            const missingData = [];
            const missingQuantity = [];
            const missingSupervisor = [];

            distributionDateInputs.forEach(function (input, index) {
                if (sectorCheckboxes[index].checked && !input.value) {
                    const sectorName = document.querySelector("input[name='sector_id[]'][value='" + sectorCheckboxes[index].value + "']").parentNode.innerText;
                    missingData.push(sectorName.trim());
                }

                const quantityInput = quantitySectorInputs[index];
                if (sectorCheckboxes[index].checked && (!quantityInput.value || parseFloat(quantityInput.value) <= 0)) {
                    const sectorName = document.querySelector("input[name='sector_id[]'][value='" + sectorCheckboxes[index].value + "']").parentNode.innerText;
                    missingQuantity.push(sectorName.trim());
                }

                const supervisorSelect = collaboratorSelects[index];
                if (sectorCheckboxes[index].checked && supervisorSelect.selectedIndex === 0) {
                    const sectorName = document.querySelector("input[name='sector_id[]'][value='" + sectorCheckboxes[index].value + "']").parentNode.innerText;
                    missingSupervisor.push(sectorName.trim());
                }
            });

            let errorMessage = "";
            if (missingData.length > 0) {
                errorMessage += "Datas não inseridas para os seguintes setores:\n" + missingData.join(", ") + "\n\n";
            }

            if (missingQuantity.length > 0) {
                errorMessage += "Quantidade não inserida ou inválida para os seguintes setores:\n" + missingQuantity.join(", ") + "\n\n";
            }

            if (missingSupervisor.length > 0) {
                errorMessage += "Supervisor não selecionado para os seguintes setores:\n" + missingSupervisor.join(", ");
            }

            if (errorMessage !== "") {
                e.preventDefault();
                alert(errorMessage);
            }
        });


        // Inicialize o estado dos campos com base nas seleções iniciais
        updateFieldStatus();
        updateRemainingQuantity();
    });
</script>

<!-- Modal Contatos -->
<div class="modal" id="contacts">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header bg-primary">
                <h4 class="modal-title"><i class="fa fa-check"></i> Adicionar Contato</h4>
            </div>

            <form id="formContact" action="{{ route('contacts.store', [$customer->id]) }}" method="post">
                @csrf

                <!-- Modal body -->
                <div class="modal-body">
                    <div class="row mt-2">
                        <div class="col-md-8 mb-2">
                            <label for="name">Nome</label>
                            <input type="text" id="name" name="name" class="form-control " value="" placeholder="">
                        </div>
                        <div class="col-md-4 mb-2">
                            <label for="name">Setor</label>
                            <input type="text" id="sector" name="sector" class="form-control " value="" placeholder="">
                        </div>
                    </div>

                    <div class="row mt-2">
                        <div class="col-md-6 mb-2">
                            <label for="email">E-mail</label>
                            <input type="email" id="email" name="email" class="form-control " value="" placeholder="">
                        </div>
                        <div class="col-md-6 mb-2">
                            <label for="secondary_email">E-mail 2</label>
                            <input type="email" id="secondary_email" name="secondary_email" class="form-control " value="" placeholder="">
                        </div>
                    </div>
                    <div class="row mt-2">

                        <div class="col-md-6 mb-2">
                            <label for="main_phone">Telefone 1</label>
                            <input type="text" id="modal_phone" name="phone_one" class="form-control " value="" placeholder="">
                        </div>

                        <div class="col-md-6 mb-2">
                            <label for="phone_two">Telefone 2</label>
                            <input type="text" id="modal_phone_two" name="phone_two" class="form-control " value="" placeholder="">
                        </div>
                    </div>
                </div>

                <!-- Modal footer -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Fechar</button>
                    <button type="submit" id="submitFormContact" class="btn btn-success">Salvar</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Edit Contatos -->
<div class="modal fade" id="editContactModal" tabindex="-1" aria-labelledby="editContactModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header bg-primary">
                <h5 class="modal-title" id="editContactModalLabel">Editar Contato</h5>
            </div>

            <div class="modal-body">
                <!-- Formulário de edição aqui -->

                <form id="editContactForm" action="{{ route('contacts.update', $customer->id) }}" method="POST">

                    @method('PUT')
                    @csrf

                    <!--usado para edição, pois estou usando modal-->
                    <input type="hidden" id="contact_id" name="contact_id" class="form-control" value=""> 

                    <div class="row mt-2">
                        <div class="col-md-8 mb-2">
                            <label for="name">Nome</label>
                            <input type="text" id="contact_name" name="name" class="form-control" value="" placeholder="">
                        </div>
                        <div class="col-md-4 mb-2">
                            <label for="name">Setor</label>
                            <input type="text" id="contact_sector" name="sector" class="form-control " value="" placeholder="">
                        </div>
                    </div>

                    <div class="row mt-2">
                        <div class="col-md-6 mb-2">
                            <label for="email">E-mail</label>
                            <input type="email" id="contact_email" name="email" class="form-control " value="" placeholder="">
                        </div>
                        <div class="col-md-6 mb-2">
                            <label for="secondary_email">E-mail 2</label>
                            <input type="email" id="contact_secondary_email" name="secondary_email" class="form-control " value="" placeholder="">
                        </div>
                    </div>
                    <div class="row mt-2">

                        <div class="col-md-6 mb-2">
                            <label for="main_phone">Telefone 1</label>
                            <input type="text" id="contact_phone_one" name="phone_one" class="form-control " value="" placeholder="">
                        </div>

                        <div class="col-md-6 mb-2">
                            <label for="phone_two">Telefone 2</label>
                            <input type="text" id="contact_phone_two" name="phone_two" class="form-control " value="" placeholder="">
                        </div>
                    </div>
                </form>

            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
                <button type="button" id="saveChangesBtn" class="btn btn-success">Salvar Mudanças</button>
            </div>
        </div>
    </div>
</div>


<script>
    document.addEventListener('DOMContentLoaded', function () {
        let editContactButtons = document.querySelectorAll('.edit-contact-btn');
        let editContactForm = document.getElementById('editContactForm');

        let contact_id = document.getElementById('contact_id');
        let contact_name = document.getElementById('contact_name');
        let contact_sector = document.getElementById('contact_sector');
        let contact_email = document.getElementById('contact_email');
        let contact_secondary_email = document.getElementById('contact_secondary_email');
        let contact_phone_one = document.getElementById('contact_phone_one');
        let contact_phone_two = document.getElementById('contact_phone_two');
        let editContactModal = new bootstrap.Modal(document.getElementById('editContactModal'));

        editContactButtons.forEach(function (button) {
            button.addEventListener('click', async function () {
                let contactId = this.getAttribute('data-id');
                let response = await fetch('https://siglv.acessohost.com.br/app/contacts/' + contactId + '/edit');

                if (response.ok) {
                    var data = await response.json();
                    contact_id.value = contactId;
                    contact_name.value = data.name;
                    contact_sector.value = data.sector;
                    contact_email.value = data.email;
                    contact_secondary_email.value = data.secondary_email;
                    contact_phone_one.value = data.phone_one;
                    contact_phone_two.value = data.phone_two;
                    //editContactForm.setAttribute('action', 'https://siglv.acessohost.com.br/app/contacts/' + contactId);
                    editContactModal.show();
                } else {
                    console.error('Erro ao buscar os detalhes do contato.');
                }
            });
        });

        let saveChangesButton = document.getElementById('saveChangesBtn');
        saveChangesButton.addEventListener('click', function () {
            editContactForm.submit();
            editContactModal.hide();
        });
    });
</script>

<!-- Modal Material -->
<div class="modal fade" id="material" tabindex="-1" role="dialog" aria-labelledby="formCreate">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header bg-primary">
                <h5 class="modal-title"><i class="fa fa-check"></i> Adicionar Material</h5>
            </div>
            <div class="modal-body">

                <form id="form_material_customer" action="{{ route('material_customers.store') }}" method="post">
                    @csrf

                    <input type="hidden" name="customer_id" value="{{ $customer->id }}">

                    <div class="row mt-2">
                        <div class="col-md-12">
                            <label class="control-label"> Material</label>
                            <input name="material" class="form-control" value=""  type="text"/>
                        </div>
                    </div>

                    <div class="row mt-2">

                        <div class="col-md-3">
                            <label class="control-label">Custo / Milheiro (R$)</label>
                            <input id="thousand" name="thousand" class="form-control money" value="" type="text" />
                        </div>
                        <div class="col-md-3">
                            <label class="control-label">Reajuste (%)</label>
                            <input id="readjustment" name="readjustment" class="form-control" value="" type="text" />
                        </div>

                        <div class="col-md-3">
                            <label class="control-label">Bonificação (R$) <code>ex: 10,00</code></label>
                            <input id="bonus" name="bonus" class="form-control" value="0.00" type="text" />
                        </div>

                        <div class="col-md-3">
                            <label class="control-label">Valor Concedido (R$)</label>
                            <input id="value_granted" name="value_granted" class="form-control" value="" type="text" readonly="" />
                        </div>

                        <script>
                            const thousandInput = document.getElementById('thousand');
                            const readjustmentInput = document.getElementById('readjustment');
                            const bonusInput = document.getElementById('bonus');
                            const valueGrantedInput = document.getElementById('value_granted');

                            // Atualizar "value_granted" imediatamente quando algo for digitado em "thousand"
                            thousandInput.addEventListener('keyup', () => {
                                const formattedValue = formatNumber(thousandInput.value);
                                valueGrantedInput.value = formattedValue;
                                calculateValueGranted();
                            });

                            readjustmentInput.addEventListener('input', calculateValueGranted);
                            bonusInput.addEventListener('input', calculateValueGranted);

                            function calculateValueGranted() {
                                const thousand = parseFloat(thousandInput.value.replace(',', '.')) || 0;
                                const readjustment = parseFloat(readjustmentInput.value) || 0;
                                const bonus = bonusInput.value.replace(',', '.');

                                const calculatedValue = thousand + (thousand * readjustment / 100) - bonus;

                                // Exibir o valor calculado em "value_granted" com ponto como separador decimal
                                valueGrantedInput.value = calculatedValue.toFixed(2);
                            }

                            function formatNumber(value) {
                                return value.replace(',', '.');
                            }
                        </script>

                    </div>

                    <div class="row mt-2">
                        <div class="col-md-6">
                            <label class="control-label"> Forma de Pagamento</label>
                            <select name="payment_form" class="form-control">
                                <option value="0">Selecione a Forma</option>
                                <option value="Boleto">Boleto</option>
                                <option value="Cred em c/c">Cred em c/c</option>
                                <option value="Cheque">Cheque</option>
                                <option value="Dinheiro">Dinheiro</option> 
                                <option value="Permuta">Permuta</option>
                                <option value="pix">PIX</option>
                            </select>
                        </div>

                        <div class="col-md-6">
                            <label class="control-label">Condição de Pagamento</label>
                            <select name="condition_payment" class="form-control">
                                <option value="0">Selecione a Condição</option>
                                <option value="A vista">A vista</option>
                                <option value="08/16">08/16</option>
                                <option value="15 dias">15 dias</option>
                                <option value="28 dias">28 dias</option>
                                <option value="30/60">30/60</option>
                                <option value="30/60/90">30/60/90</option>
                                <option value="30/60/90/120">30/60/90/120</option>
                            </select>
                        </div>
                    </div>
                    <div class="row mt-2">
                        <div class="col-md-12">
                            <label class="control-label">**Observação</label>
                            <textarea name="notes" class="form-group"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <div class="col-sm-12">
                            <button type="submit" id="btnMaterial" class="btn btn-success">Salvar</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Modal Edit Material -->
<div class="modal fade" id="editMaterialModal" tabindex="-1" aria-labelledby="editMaterialModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header bg-primary">
                <h5 class="modal-title" id="editMaterialModalLabel">Editar Material</h5>
            </div>

            <div class="modal-body">
                <!-- Formulário de edição aqui -->

                <form id="editMaterialForm" action="{{ route('material_customer.update', $customer->id) }}" method="POST">

                    @method('PUT')
                    @csrf
                    
                    <!--usado para edição, pois estou usando modal-->
                    <input type="hidden" id="material_id" name="material_id" class="form-control" value=""> 
                    
                    <div class="row mt-2">
                        <div class="col-md-12">
                            <label class="control-label"> Material</label>
                            <input name="material" class="form-control" id="material_update" value=""  type="text"/>
                        </div>
                    </div>
                    
                    <div class="row mt-2">

                        <div class="col-md-3">
                            <label class="control-label">Custo / Milheiro (R$)</label>
                            <input id="thousand_update" name="thousand" class="form-control money" value="" type="text" />
                        </div>
                        <div class="col-md-3">
                            <label class="control-label">Reajuste (%)</label>
                            <input id="readjustment_update" name="readjustment" class="form-control" value="" type="text" />
                        </div>

                        <div class="col-md-3">
                            <label class="control-label">Bonificação (R$) <code>ex: 10,00</code></label>
                            <input id="bonus_update" name="bonus" class="form-control" value="0.00" type="text" />
                        </div>

                        <div class="col-md-3">
                            <label class="control-label">Valor Concedido (R$)</label>
                            <input id="value_granted_update" name="value_granted" class="form-control" value="" type="text" readonly="" />
                        </div>
                    </div>
                        
                        <div class="row mt-2">
                            <div class="col-md-6">
                                <label class="control-label"> Forma de Pagamento</label>
                                <select name="payment_form" class="form-control" id="payment_form_update">
                                    <option value="0">Selecione a Forma</option>
                                    <option value="Boleto">Boleto</option>
                                    <option value="Cred em c/c">Cred em c/c</option>
                                    <option value="Cheque">Cheque</option>
                                    <option value="Dinheiro">Dinheiro</option> 
                                    <option value="Permuta">Permuta</option>
                                    <option value="pix">PIX</option>
                                </select>
                            </div>

                            <div class="col-md-6">
                                <label class="control-label">Condição de Pagamento</label>
                                <select name="condition_payment" class="form-control" id="condition_payment_update">
                                    <option value="0">Selecione a Condição</option>
                                    <option value="A vista">A vista</option>
                                    <option value="08/16">08/16</option>
                                    <option value="15 dias">15 dias</option>
                                    <option value="28 dias">28 dias</option>
                                    <option value="30/60">30/60</option>
                                    <option value="30/60/90">30/60/90</option>
                                    <option value="30/60/90/120">30/60/90/120</option>
                                </select>
                            </div>
                        </div>
                        <div class="row mt-2">
                            <div class="col-md-12">
                                <label class="control-label">**Observação</label>
                                <textarea name="notes" class="form-group" id="notes_update"></textarea>
                            </div>
                        </div>

                        <script>
                            const thousandInputUp = document.getElementById('thousand_update');
                            const readjustmentInputUp = document.getElementById('readjustment_update');
                            const bonusInputUp = document.getElementById('bonus_update');
                            const valueGrantedInputUp = document.getElementById('value_granted_update');

                            // Atualizar "value_granted" imediatamente quando algo for digitado em "thousand"
                            thousandInputUp.addEventListener('keyup', () => {
                                const formattedValueUp = formatNumber(thousandInputUp.value);
                                valueGrantedInputUp.value = formattedValueUp;
                                calculateValueGrantedUp();
                            });

                            readjustmentInputUp.addEventListener('input', calculateValueGrantedUp);
                            bonusInputUp.addEventListener('input', calculateValueGrantedUp);

                            function calculateValueGrantedUp() {
                                const thousandUp = parseFloat(thousandInputUp.value.replace(',', '.')) || 0;
                                const readjustmentUp = parseFloat(readjustmentInputUp.value) || 0;
                                const bonusUp = bonusInputUp.value.replace(',', '.');

                                const calculatedValueUp = thousandUp + (thousandUp * readjustmentUp / 100) - bonusUp;

                                // Exibir o valor calculado em "value_granted" com ponto como separador decimal
                                valueGrantedInputUp.value = calculatedValueUp.toFixed(2);
                            }

                            function formatNumber(value) {
                                return value.replace(',', '.');
                            }
                        </script>

                </form>

            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
                <button type="button" id="saveChangesBtnM" class="btn btn-success">Salvar Mudanças</button>
            </div>
        </div>
    </div>
</div>


<script>
    document.addEventListener('DOMContentLoaded', function () {
        let editMaterialButtons = document.querySelectorAll('.edit-material-btn');
        let editMaterialForm = document.getElementById('editMaterialForm');
        let material_id = document.getElementById('material_id');
        let material = document.getElementById('material_update');
        let thousand = document.getElementById('thousand_update');
        let readjustment = document.getElementById('readjustment_update');
        let bonus = document.getElementById('bonus_update');
        let value_granted = document.getElementById('value_granted_update');
        let payment_form = document.getElementById('payment_form_update');
        let condition_payment = document.getElementById('condition_payment_update');
        let notes = document.getElementById('notes_update');

        let editMaterialModal = new bootstrap.Modal(document.getElementById('editMaterialModal'));

        editMaterialButtons.forEach(function (button) {
            button.addEventListener('click', async function () {
                var materialId = this.getAttribute('data-id');
                let response = await fetch('https://siglv.acessohost.com.br/app/material_customers/' + materialId + '/edit');

                if (response.ok) {
                    let data = await response.json();
                    material_id.value = data.id;
                    material.value = data.material;
                    thousand.value = data.thousand.replace('.',',');
                    readjustment.value = data.readjustment;
                    bonus.value = data.bonus.replace('.',',');
                    value_granted.value = data.value_granted;
                    payment_form.value = data.payment_form;
                    condition_payment.value = data.condition_payment;
                    notes.value = data.notes;
     
                    editMaterialModal.show();
                } else {
                    console.error('Erro ao buscar os detalhes do material.');
                }
            });
        });

        let saveChangesButtonM = document.getElementById('saveChangesBtnM');
        saveChangesButtonM.addEventListener('click', function () {
            editMaterialForm.submit();
            editMaterialModal.hide();
        });
    });
</script>


<!-- Modal Setores -->
<div class="modal" id="sectors">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header bg-primary">
                <h4 class="modal-title"><i class="fa fa-check"></i> Adicionar Setores</h4>
            </div>
            <form id="formSectors" action="{{ route('sector_customers.store') }}" method="post">
                @csrf
                
                <input type="hidden" name="customer_id" value="{{ $customer->id }}">
                <!-- Modal body -->
                <div class="modal-body">
                    <div class="row mt-4">
                        <div class="col-md-12">
                            <label class="control-label">Região</label>
                            <select name="region_id" class="form-control" id="region-select">
                                <option value="0"> -- Selecione a Região --</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="setor-list" id="setores-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-primary">Cadastrar</button>
                    </div>

                    <script>
                        document.addEventListener("DOMContentLoaded", () => {
                            const regionSelect = document.getElementById("region-select");
                            const setoresContainer = document.getElementById("setores-container");
                            const saveButton = document.getElementById("save-button");
                            const selectedSectors = []; // Array para armazenar bairros selecionados

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

                                if (selectedRegionId !== "0") {
                                    try {
                                        const response = await fetch(`https://siglv.acessohost.com.br/app/customers/getSectors/${selectedRegionId}`);
                                        const setores = await response.json();

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

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

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

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

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

                                            const setorName = document.createElement("span");
                                            setorName.textContent = setor.name;
                                            listItem.appendChild(setorName);

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

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

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

                </div>

                <!-- Modal footer -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Fechar</button>
                </div>
            </form>
        </div>
    </div>
</div>