@include('app.includes.alerts')

<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="{{ $customer->code ?? old('code') }}" readonly=""/>
        </div>

        <div class="col-md-4">
            <label class="control-label">Categoria</label>
            <select name="category_id" class="form-control">
                <option value="0">-- Selecione --</option>
            </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-5">
            <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-sm-5">
            <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>
        </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 class="bg-dark text-white">Nome</th>
                <th class="bg-dark text-white">E-mail</th>
                <th class="bg-dark text-white">E-mail secundário</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->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-contact-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">Material</th>
                <th class="bg-dark text-white text-center">Editar</th>
                <th class="bg-dark text-white text-center">Excluir</th>
            </tr>
            <tr>
                <td style="width:87%"></td>
                <td class="text-center"><a href="" class="btn btn-outline-success me-1"><i class="fas fa-edit"></i></a></td>
                <td class="text-center"> 
                    <form action="" 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>
        </table>
    </div>
</div>

<!-- Setores -->
<div class="row mt-4">
    <div class="col-md-12">
        <p><i class="fa fa-check"></i><strong> Setores</strong></p>
        <table class="table table-condensed">
            <tr>
                <th class="bg-dark text-white">Setor</th>
                <th class="bg-dark text-white text-center">Editar</th>
                <th class="bg-dark text-white text-center">Excluir</th>
            </tr>
            <tr>
                <td style="width:87%"></td>
                <td class="text-center"><a href="" class="btn btn-outline-success me-1"><i class="fas fa-edit"></i></a></td>
                <td class="text-center"> 
                    <form action="" 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>
        </table>
    </div>
</div>

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

            <!-- Modal Header -->
            <div class="modal-header">
                <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-12 mb-2">
                            <label for="name">Nome</label>
                            <input type="text" id="name" name="name" 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">
                <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="text" id="contact_id" name="contact_id" class="form-control" value=""> 
                    
                    <div class="row mt-2">
                        <div class="col-md-12 mb-2">
                            <label for="name">Nome</label>
                            <input type="text" id="contact_name" name="name" 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_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-contact-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_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" role="document">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title"><i class="fa fa-check"></i> Adicionar Material</h4>
            </div>
            <div class="modal-body">

                <form id="formMaterial" action="" method="post">

                    <div class="row">
                        <div class="col-sm-12">
                            <label class="control-label">Nome</label>
                            <input name="nome" class="form-control" value="" placeholder="Digite o nome..." type="text" required>
                        </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="submitFormMaterial" class="btn btn-success">Salvar</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>


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

            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title"><i class="fa fa-check"></i> Adicionar Setores</h4>
            </div>
            <form id="formSectors" action="" method="post">
                <!-- Modal body -->
                <div class="modal-body">
                    <div class="row mt-2">
                        <div class="col-md-12 mb-2">
                            <label for="name">Nome</label>
                            <input type="text" id="name" name="name" 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="main_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="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="submitFormSector" class="btn btn-success">Salvar</button>
                </div>
            </form>
        </div>
    </div>
</div>