@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 */
        color:white;
    }

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

</style>

<!-- Setores -->
<form action="{{ route('distributions.store') }}" method="post">
    
    @csrf
    <input type="hidden" name="customer_id" class="form-control" value="{{ $customer->id }}" required="">
    
    <div class="row mt-4">
        <div class="col-md-8">

            <p><i class="fa fa-check"></i><strong> Setores para distribuição - total a ser distribuído nos setores: </strong> <span id="remaining_quantity" class="badge badge-primary shadow" style="font-size:20px !important;"></span></p>
            
            <!-- Qtd a ser distribuída para cálculo -->
            @if(isset($autorizations))
                @foreach($autorizations as $autorization)
                    @if($autorization->level === null)
                        @foreach($prospects as $prospect)
                            @if($prospect->id === $autorization->prospect_id)
                                <input type="hidden" name="quantity_total" id="quantity_total" class="form-control" value="{{ isset($prospect->qtd) ? $prospect->qtd : '' }}" required readonly="">
                            @endif
                        @endforeach
                    @endif
                @endforeach

                <p>Você está distribuindo uma autorização com a O.S Nº <span class="badge badge-secondary">{{ $autorization->autorization }}</span></p>
                <p><strong>Material:</strong>
                    @php
                        $uniqueMaterials = [];
                        $materialCustomerId = null; // Adicionando uma variável para armazenar o ID do material_customer
                    @endphp

                    @foreach($prospects as $prospect)
                        @if($prospect->id == $autorization->prospect_id)
                            @php
                                $material_customer_id = $prospect->material_customer_id;
                                $materialCustomer = \App\Models\MaterialCustomer::find($material_customer_id);
                            @endphp

                            @if($materialCustomer && !in_array($materialCustomer->material, $uniqueMaterials))
                                {{ $materialCustomer->material }}
                                @php
                                    $uniqueMaterials[] = $materialCustomer->material;
                                    $materialCustomerId = $materialCustomer->id; // Armazenando o ID do material_customer
                                @endphp
                            @endif
                        @endif
                    @endforeach
                - 
                <strong>Promoção:</strong> {{ $autorization->promotion->name }} - <strong>Validade:</strong> {{ $autorization->validate }}
                </p>
            @endif

            @if(isset($autorization->id))
                <input type="hidden" name="autorization_id" class="form-control" value="{{ $autorization->id }}" required="">
            @endif
        </div> 
        
        <!--imagem do folheto-->
        <div class='col-md-4'>
            @if( !isset($autorization->image) ) 
                <img src="{{ url("images/sem-imagem.png") }}" class="img-fluid" alt="Sem Imagem definida" style="max-width: 89px;">       
            @else
                <img src="{{ url("storage/{$autorization->image}") }}" class="img-thumbnail img-fluid shadow" alt="{{ $autorization->autorization }}" style="max-width: 150px;">
            @endif 
        </div>
    </div> 
    
    <div class="row mt-4">
        <div class='col-md-12'>
            <div class='table-responsive'>
                <table class="table">
                    <tr>
                        <th class="bg-secondary text-white">Distribuir</th>
                        <th class="bg-secondary text-white">Setor</th>
                        <th class="bg-secondary text-white">Região</th>
                        <th class="bg-secondary text-white">Data de distribuição</th>
                        <th class="bg-secondary text-white">Quantidade</th>
                        <th class="bg-secondary text-white">Coordenador</th>
                        <th class="bg-secondary text-white">Status</th>
                    </tr>
                    @foreach($customer->sectors as $sector)

                        @php
                            $distribution = $sector->distributions->filter(function ($item) use ($autorization) {
                                return ($item->status === 'Em distribuição' || $item->status === 'Distribuido') && $item->level === null && $item->autorization_id === $autorization->id;
                            })->first();
                        @endphp

                        <tr>
                            <td>

                                @if ($distSectorCustomers->contains(function ($item) use ($sector, $customer, $material_customer_id) {
                                    return $item->sector_id === $sector->id &&
                                           $item->customer_id === $customer->id &&
                                           $item->material_customer_id === $material_customer_id;     
                                }))

                                    <span class="badge badge-warning">x</span>
                                @endif

                            </td>
                            <td><input type="checkbox" name="sector_id[]" class="checkbox-control" value="{{ $sector->id }}"> {{ $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" placeholder="Insira a data de distribuição" value="{{ date('d/m/Y', strtotime($distribution->distribution_date)) }}">
                                @else
                                    <input type="text" name="distribution_date[]" class="form-control datepicker" placeholder="Insira a data de distribuição" value="">
                                @endif
                            </td>
                            <td>
                                @if ($distribution)
                                    <input type="text" name="quantity_sector[]" class="quantity-sector-input form-control" placeholder="Insira a qtd a ser distribuída" value="{{ number_format($distribution->quantity_sector, 0, ',', '.') }}">
                                @else
                                    <input type="text" name="quantity_sector[]" class="quantity-sector-input 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>
                                @else
                                    <!-- Se não houver uma distribuição, mostre as opções de colaboradores -->
                                    <select name="collaborator_id[]" class="form-control">
                                        <option value="">--Selecione--</option>
                                        @foreach($collaborators as $collaborator)
                                            <option value="{{ $collaborator->id }}">{{ $collaborator->name }}</option>
                                        @endforeach
                                    </select>
                                @endif
                            </td>
                            <td>
                                @if ($distribution)
                                    <select name="status[]" class="form-control">
                                        <option value="{{ $distribution->status }}" {{ $distribution->status == $distribution->status ? 'selected' : '' }}>{{ $distribution->status }}</option>
                                        <option value="Distribuido">Distribuido</option>
                                    </select>
                                @else
                                    <select name="status[]" class="form-control">
                                        <option value="Em distribuição">Em distribuição</option>
                                    </select>
                                @endif
                            </td>
                        </tr>
                    @endforeach
                </table>
            </div>
            <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>
        </div>
        
    </div>
</form>

<!-- Finalizar distribuição -->
<form action="{{ isset($autorization) ? route('autorization.update', $autorization->id) : route('autorization.store') }}" method="post">
    @csrf
    @method('PUT')

    <div class='row'>
        <div class='col-md-12'>
            <div class="modal-footer">
                <button type="submit" class="btn btn-outline-success btn-save-final"><i class="fas fa-check"></i> Finalizar distribuição</button>
            </div>
        </div>
    </div>
</form>

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

        });
        
        const saveButtonFinal = document.querySelector(".btn-save-final");
        saveButtonFinal.addEventListener("click", function (e) {
            // Verifique se a quantidade restante é maior que zero
                const remainingQuantity = parseFloat(remainingQuantityDisplay.innerText.replace(/\./g, '').replace(',', '.'));

                if (remainingQuantity > 0) {
                    alert("Por favor, faça toda a distribuição por setores para prosseguir antes de salvar!");
                    e.preventDefault();
                }
        });

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