@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 }}" {{ $customer->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">CNPJ</label>
            <input type='text' name="cnpj" id="cnpj" class="form-control" value="{{ $customer->cnpj ?? old('cnpj') }}">
        </div>

        <div class="col-md-2">
            <label class="control-label">CPF</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-3">
            <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-3">
            <label class="control-label">Faturar pelo CNPJ: 
                @if($customer->invoice === "30.821.999/0001-09")
                Ricardo ME
                @else
                Camila ME
                @endif
            </label>
            <select name="invoice" class="form-control invoice" id="invoice">
                <option value='{{ $customer->invoice }}'>{{ $customer->invoice  }}</option>
                <option value='30.821.999/0001-09'>Ricardo ME - 30.821.999/0001-09</option>
                <option value='29.205.847/0001-94'>Camila ME - 29.205.847/0001-94</option>
            </select>
            @error('invoice')
            <div class="text-danger">{{ $message }}</div>
            @enderror
        </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">CEP</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 dados do cliente</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-success me-1" data-bs-toggle="modal" data-bs-target="#stores"> Inserir Lojas adicionais</a>
            <a href="" class="btn btn-outline-danger me-1" data-bs-toggle="modal" data-bs-target="#map"> Inserir Mapa - PDF</a>
        </div>
    </div>
</form>
       
<!-- Lojas adicionais -->
<div class="row mt-4">
    <div class="col-md-12">
   
        <p><i class="fa fa-university"></i><strong> Lojas(s) adicionais do cliente: <span class="badge badge-primary" style="font-size:18px;">{{ $customer->fantasy_name }}</span></strong></p>

        <table class="table">
            <thead class="bg-secondary text-white">
                <tr>
                    <th>Fantasia</th>
                    <th class="text-center">Editar</th>
                    <th class="text-center">Excluir</th>
                </tr>
            </thead>
            
            <tbody>
                @foreach($stores as $store)
                    <tr>
                        <td style="width:86%;">{{ $store->fantasy_name }}</td>
                        <td class="text-center"> 
                            <a href="#" class="btn btn-outline-success me-1 edit-loja-btn"
                                data-bs-toggle="modal" data-bs-target="#editLojaModal"
                                data-id="{{ $store->id }}"
                                data-fantasy="{{ $store->fantasy_name }}">
                                <i class="fas fa-edit"></i>
                            </a>
                        </td>
                        <td class="text-center"> 
                            <form action="{{ route('additionalStore.destroy', $store->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
            </tbody>
        </table>

    </div>
</div>

<!-- 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">
            <thead class="bg-secondary text-white">
                <tr>
                    <th style="width:15%;">Nome</th>
                    <th class="text-white">Setor</th>
                    <th style="width:19%;">E-mail 1</th>
                    <th style="width:19%;">E-mail 2</th>
                    <th>Telefone 1</th>
                    <th>Telefone 2</th>
                    <th class="text-center">Editar</th>
                    <th class="text-center">Excluir</th>
                </tr>
            </thead>
            
            <tbody>
                @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
            </tbody>
        </table>
    </div>
</div>

<!-- Material -->
<div class="row mt-4">
    <div class="col-md-12">
        <p><i class="fa fa-check"></i><strong> Material(s)</strong></p>
        <table class="table table-condensed">
            <thead class="bg-secondary text-white">
                <tr>
                    <th>Data</th>
                    <th>Material</th>
                    <th>Milheiro</th>
                    <th class=" text-center">Editar</th>
                    <th class="text-center">Excluir</th>
                </tr>
            </thead>
            
            <tbody>
                @foreach($customer->materialcustomers as $materialcustomer)
                    <tr>
                        <td>{{ date('d/m/Y', strtotime($materialcustomer->created_at)) }}</td>
                        <td style="width:68%">{{ $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
            </tbody>
        </table>
    </div>
</div>

<!-- Mapa -->
<div class="row mt-4">
    <div class="col-md-12">
        <p><i class="fa fa-map-marker"></i> <strong> Mapa(s)</strong></p>
        <table class="table table-condensed">
            <thead class="bg-secondary text-white">
                <tr>
                    <th>Data</th>
                    <th>Nome</th>
                    <th class="text-center">Ver Mapa PDF</th>
                    <th class="text-center">Excluir</th>
                </tr>
            </thead>
            
            <tbody>
                @foreach($maps as $map)
                    <tr>
                        <td>{{ date('d/m/Y', strtotime($map->created_at)) }}</td>
                        <td style="width:68%">{{ $map->name }}</td>
                        <td class="text-center">
                            <a href="{{ url("storage/{$map->pdf}") }}" class="btn btn-warning" target="_blank" title="Ver mapa PDF"><i class="fa fa-file-pdf" aria-hidden="true"></i></a> 
                        </td>
                        <td class="text-center"> 
                            <form action="{{ route('maps.destroy', $map->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
            </tbody>
        </table>
    </div>
</div>

<!-- Setores -->
<div class="row mt-4">
    <div class="col-md-12">
        <p><i class="fa fa-car"></i><strong> Setor(s) para distribuição do cliente: 
            <span class="badge badge-primary" style="font-size:18px;">{{ $customer->fantasy_name }}</span></strong>  
        </p>
        <p class='text-danger'>* Para editar um setor do cliente, primeiro delete o setor que não deseja e clique em <strong>Inserir Setores</strong>, selecione a região e o setor desejado para atualizar!</p>
    </div>
    
    <div class="col-md-12 mt-4">
        <table class="table">
            <thead class="bg-secondary text-white">
                <tr>
                    <th>Setor</th>
                    <th>Região</th>
                    <th>Excluir</th>
                </tr>
            </thead>
            
            <tbody>
                @foreach($customer->sectors->sortBy(function($sector) {
                    return optional($sector->region)->name;
                }) as $sector)
                    <tr>
                        <td>{{ $sector->code }} - {{ $sector->name }}</td>
                        <td style="width:76%">
                            @if ($sector->region)
                                {{ $sector->region->name }}
                            @else
                                Nenhuma região associada
                            @endif
                        </td>
                        <td>
                            <form action="{{ route('sector_customers.destroy', [$customer->id, $sector->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

            </tbody>
        </table>

    </div>
</div>

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

            <!-- Modal Header -->
            <div class="modal-header bg-primary">
                <h5 class="modal-title"><i class="fa fa-check"></i> Adicionar Contato</h5>
            </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>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
            </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-6">
                            <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</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$)</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() {
                                // Função auxiliar para converter valores no formato brasileiro para ponto flutuante
                                function parseBrazilianNumber(value) {
                                    if (!value) return 0; // Retorna 0 se o valor for vazio ou indefinido
                                    return parseFloat(value.replace(/\./g, '').replace(',', '.')); // Remove pontos e troca vírgula por ponto
                                }

                                // Converte os valores de entrada
                                const thousand = parseBrazilianNumber(thousandInput.value);
                                const readjustment = parseBrazilianNumber(readjustmentInput.value);
                                const bonus = parseBrazilianNumber(bonusInput.value);

                                // Calcula o valor concedido
                                const calculatedValue = thousand + (thousand * readjustment / 100) - bonus;

                                // Exibe o valor calculado no formato brasileiro (com vírgula como separador decimal e ponto como separador de milhares)
                                valueGrantedInput.value = calculatedValue.toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 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">
                        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Fechar</button>
                        <button type="submit" id="btnMaterial" class="btn btn-success">Salvar</button>
                    </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 calculateValueGranted() {
                                // Função auxiliar para converter valores no formato brasileiro para ponto flutuante
                                function parseBrazilianNumber(value) {
                                    if (!value) return 0; // Retorna 0 se o valor for vazio ou indefinido
                                    return parseFloat(value.replace(/\./g, '').replace(',', '.')); // Remove pontos e troca vírgula por ponto
                                }

                                // Converte os valores de entrada
                                const thousand = parseBrazilianNumber(thousandInput.value);
                                const readjustment = parseBrazilianNumber(readjustmentInput.value);
                                const bonus = parseBrazilianNumber(bonusInput.value);

                                // Calcula o valor concedido
                                const calculatedValue = thousand + (thousand * readjustment / 100) - bonus;

                                // Exibe o valor calculado no formato brasileiro (com vírgula como separador decimal e ponto como separador de milhares)
                                valueGrantedInput.value = calculatedValue.toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 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 fade" id="sectors">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header bg-primary">
                <h5 class="modal-title"><i class="fa fa-check"></i> Adicionar Setores</h5>
            </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=""> -- 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> 

                    <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>
                    <button id="save-button" type="submit" class="btn btn-primary">Cadastrar</button>
                </div>
            </form>
        </div>
    </div>
</div>   
    
<!-- Modal Lojas adicionais -->
<div class="modal fade" id="stores">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header bg-primary">
                <h5 class="modal-title"><i class="fa fa-check"></i> Adicionar Lojas</h5>
            </div>
            <form id="formStores" action="{{ route('additionalStore.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">Fantasia</label>
                            <input type="text" name="fantasy_name" class="form-control" value="" placeholder="Insira o nome fantasia da loja adicional....">
                        </div>
                    </div>
                </div>

                <!-- Modal footer -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Fechar</button>
                    <button id="save-button" type="submit" class="btn btn-primary">Adicionar Loja</button>
                </div>
            </form>
        </div>
    </div>
    
</div>

<!--MODAL UPDATE-->
<div class="modal fade" id="editLojaModal" tabindex="-1" role="dialog" aria-labelledby="formUpdate">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header bg-success">
                <h5 class="modal-title" id="formUpdate">Editar</h5>
            </div>
            <div class="modal-body">

                <form id="editLojaForm" action="{{ route('additionalStore.update') }}" method="POST">

                    @method('PUT')
                    @csrf

                   <input type="hidden" name="id" id="id_loja" value="">
                
                    <!-- Modal body -->
                    <div class="modal-body">
                        <div class="row mt-4">
                            <div class="col-md-12">
                                <label class="control-label">Fantasia</label>
                                <input type="text" id="fantasy_name" name="fantasy_name" class="form-control" value="">
                            </div>
                        </div>

                        
                        <div class="modal-footer">
                            <div class="col-sm-12">
                                <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Fechar</button>
                                <input type="submit" class="btn btn-success" value="Atualizar" id="saveChangesBtn" />
                            </div>
                        </div>
                    </div>
                </form>
            
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        let editLojaButtons = document.querySelectorAll('.edit-loja-btn');
        let editLojaForm = document.getElementById('editLojaForm');
        let id_loja = document.getElementById('id_loja');
        let fantasy_name = document.getElementById('fantasy_name');
        let editLojaModal = new bootstrap.Modal(document.getElementById('editLojaModal'));

        editLojaButtons.forEach(function (button) {
            button.addEventListener('click', async function () {
                let dataId = this.getAttribute('data-id');

                let response = await fetch('https://siglv.acessohost.com.br/app/additionalStore/' + dataId + '/edit');

                if (response.ok) {
                    let data = await response.json();
                    id_loja.value = data.id;
                    fantasy_name.value = data.fantasy_name;

                    editLojaModal.show();
                } else {
                    console.error('Erro ao buscar os detalhes da loja.');
                }
            });
        });

        let saveChangesButtonL = document.getElementById('saveChangesBtn');
        saveChangesButtonL.addEventListener('click', function () {
            editLojaForm.submit();
            editLojaModal.hide();
        });
    });
</script>

<!-- Modal Mapa -->
<div class="modal fade" id="map">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header bg-primary">
                <h5 class="modal-title"><i class="fa fa-map-marker"></i> Inserir Mapa/Setor</h5>
            </div>
            <form id="formMap" action="{{ route('maps.store') }}" method="post" enctype="multipart/form-data">
                @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">Mapa Setor</label>
                            <input type="text" name="name" class="form-control" value="" required="" placeholder="Informe o nome do mapa...">
                        </div>

                        <div class="col-md-4 mt-2">
                            <div class="form-group">
                                <label for="exampleInputFile">Mapa <code>*selecione o PDF</code></label>
                                <div class="input-group">
                                    <div class="custom-file">
                                        <input type="file" name="pdf" class="custom-file-input" value="" id="exampleInputFile" accept=".pdf"  required="">
                                        <label class="custom-file-label" for="exampleInputFile">Selecione o mapa do setor desse cliente</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Modal footer -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Fechar</button>
                    <button id="save-button" type="submit" class="btn btn-primary">Adicionar mapa</button>
                </div>
            </form>
        </div>
    </div>
    
</div>