@extends('layouts.simple.master')

@section('title', 'Ex. Data Tables')

@section('css')
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/jquery.dataTables.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/dataTables.bootstrap5.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/autoFill.bootstrap5.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/keyTable.bootstrap5.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/buttons.bootstrap5.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/fixedHeader.bootstrap5.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/responsive.bootstrap5.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/rowReorder.bootstrap5.css') }}">
@endsection

@section('main_content')
<div class="container-fluid">
    <div class="page-title">
        <div class="row">
            <div class="col-sm-6">
                <h3>Visualizar Fornecedores</h3>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href=""> <svg class="stroke-icon">
                                <use href="{{ asset('assets/svg/icon-sprite.svg#stroke-home') }}"></use>
                            </svg></a></li>
                    <li class="breadcrumb-item">Visualizar</li>
                    <li class="breadcrumb-item active">Fornecedores</li>
                </ol>
            </div>
        </div>
    </div>
</div><!-- Container-fluid starts-->
<div class="container-fluid autofill-data-tables">
    <div class="row">
        <div class="col-sm-12">
            <div class="card">
                <div class="card-header text-end">
                    <a href="{{ route('fornecedores.new-fornecedores') }}" class="btn btn-primary">{{ __('Cadastrar') }}</a>
                </div>

                <div class="card-body">
                    <div class="dt-ext table-responsive custom-scrollbar">
                        <table class="display table-striped keytable-table" id="keytable">
                            <thead>
                                <tr>
                                    <th></th>
                                    <th>Código</th>
                                    <th>Nome</th>
                                    <th>Ações</th>

                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($fornecedores as $f )
                                <tr data-id="{{ $f->id_fornecedor }}">
                                    <td class="details"><a href="javascript:void(0);" class="btn-details"
                                            data-atua_cliente="{{ $f->atua_cliente }}"
                                            data-atua_forn="{{ $f->atua_forn }}"
                                            data-atua_transp="{{ $f->atua_transp }}"
                                            data-nome="{{ $f->nome }}"
                                            data-fantasia="{{ $f->nome_fantasia }}"
                                            data-tipo_fornecedor="{{ $f->tipo_fornecedor }}"
                                            data-cpf="{{ $f->cpf }}"
                                            data-cnpj="{{ $f->cnpj }}"
                                            data-indicadorie="{{ $f->indicadorie }}"
                                            data-Iestadual="{{ $f->inscricao_estadual}}"
                                            data-rg="{{ $f->rg }}"
                                            data-orgao_emissor="{{ $f->orgao_emissor }}"
                                            data-cep="{{ $f->cep }}"
                                            data-uf="{{ $f->uf }}"
                                            data-cidade="{{ $f->cidade }}"
                                            data-bairro="{{ $f->bairro }}"
                                            data-endereco="{{ $f->endereco }}"
                                            data-numero="{{ $f->numero }}"
                                            data-complemento="{{ $f->complemento }}"
                                            data-InfoContato="{{ $f->informacao_contato }}"
                                            data-telefone="{{ $f->telefone }}"
                                            data-celular="{{ $f->celular }}"
                                            data-email="{{ $f->email }}"
                                            data-nomead="{{ $f->nomead }}"
                                            data-emailad="{{ $f->emailad }}"
                                            data-celularad="{{ $f->celularad }}"
                                            data-obs="{{ $f->obs }}">
                                            <i class="fa fa-plus" style="font-size:25px;"></i>
                                        </a></td>
                                    <td>{{ $f->id_fornecedor }}</td>
                                    <td>{{ $f->nome }}</td>
                                    <td>
                                        <ul class="action">
                                            <li class="edit"><a href="{{ route('fornecedores.edit-fornecedores',['id' => $f->id_fornecedor]) }}"><i class="icon-pencil-alt" style="font-size:25px;"></i></a></li>
                                            <li class="history"><a href="{{ route('fornecedores.historico-fornecedores',['id' => $f->id_fornecedor]) }}"><i class="icon-write" style="font-size:25px;"></i></a></li>
                                            <li class="status-switch">
                                                <div class="form-check form-switch">
                                                    <input class="form-check-input btn-delete" type="checkbox" style="width: 4em; height:2em !important;"
                                                        id="status-switch-{{ $f->id_fornecedor }}"
                                                        data-url="{{ route('fornecedores.delete-fornecedores-confirm', $f->id_fornecedor) }}"
                                                        data-id="{{ $f->id_fornecedor }}"
                                                        data-nome="{{ $f->nome }}"
                                                        data-status="{{ $f->status == 1 ? '2' : '1' }}"
                                                        {{ $f->status == 2 ? 'checked' : '' }}>
                                                    <label class="form-check-label" for="status-switch-{{ $f->id_fornecedor }}"></label>
                                                </div>
                                            </li>

                                        </ul>
                                    </td>


                                    @endforeach
                            </tbody>
                        </table>
                    </div>

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

    </div>
</div><!-- Container-fluid Ends-->
@endsection

@section('scripts')
<script>
    $(document).ready(function() {
        var table = $('#tabelaFornecedor').DataTable({
            language: {
                url: "https://cdn.datatables.net/plug-ins/1.13.5/i18n/pt-BR.json"
            },
            order: [
                [1, 'asc']
            ],
            dom: 'Bfrtip',
            buttons: [{
                    extend: 'excelHtml5',
                    text: 'Exportar para Excel',
                    title: 'Relatório'
                },
                {
                    extend: 'print',
                    text: 'Imprimir',
                    title: 'Relatório'
                }
            ]
        });

        // Exibe os detalhes quando o botão "Detalhes" é clicado
        $('.btn-details').on('click', function() {
            var fornecedorId = $(this).data('id');
            var atuacliente = $(this).data('atua_cliente');
            var atuaFornecedor = $(this).data('atua_forn');
            var atua_transp = $(this).data('atua_transp');
            var nome  = (!$(this).data('nome') ? 'Nada Consta' : $(this).data('nome'));
            var Fantasia = (!$(this).data('fantasia') ? 'Nada Consta' : $(this).data('fantasia'));
            var tipo_fornecedor = (!$(this).data('tipo_fornecedor') ? 'Nada Consta' : $(this).data('tipo_fornecedor')); 
            var cnpj = $(this).data('cnpj');
            var cpf = $(this).data('cpf');

            var documento;
            if (!cnpj) {
                documento = cpf;
                //console.log(cpf);
            } else {
                documento = cnpj;
                //console.log(documento);
            }

            var indicadorie = (!$(this).data('indicadorie') ? 'Nada Consta' : $(this).data('indicadorie'));
            var Iestadual = (!$(this).data('Iestadual') ? 'Nada Consta' : $(this).data('Iestadual'));
            var rg = (!$(this).data('rg') ? 'Nada Consta' : $(this).data('rg'));
            var orgao_emissor = (!$(this).data('orgao_emissor') ? 'Nada Consta' : $(this).data('orgao_emissor'));
            var cep = (!$(this).data('cep') ? 'Nada Consta' : $(this).data('cep'));
            var uf = (!$(this).data('uf') ? 'Nada Consta' : $(this).data('uf'));
            var cidade = (!$(this).data('cidade') ? 'Nada Consta' : $(this).data('cidade'));
            var bairro = (!$(this).data('bairro') ? 'Nada Consta' : $(this).data('bairro'));
            var endereco = (!$(this).data('endereco') ? 'Nada Consta' : $(this).data('endereco'));
            var numero =  (!$(this).data('numero') ? 'Nada Consta' : $(this).data('numero'));
            var complemento = (!$(this).data('complemento') ? 'Nada Consta' : $(this).data('complemento'));
            var informacao_contato = (!$(this).data('InfoContato') ? 'Nada Consta' : $(this).data('InfoContato'));
            var telefone = (!$(this).data('telefone') ? 'Nada Consta' : $(this).data('telefone'));
            var celular = (!$(this).data('celular') ? 'Nada Consta' : $(this).data('celular'));
            var email = (!$(this).data('email') ? 'Nada Consta' : $(this).data('email'));
            var nomead = (!$(this).data('nomead') ? 'Nada Consta' : $(this).data('nomead'));
            var emailad = (!$(this).data('emailad') ? 'Nada Consta' : $(this).data('emailad'));
            var celularad = (!$(this).data('celularad') ? 'Nada Consta' : $(this).data('celularad'));
            var obs = (!$(this).data('obs') ? 'Nada Consta' : $(this).data('obs'));
            var row = $(this).closest('tr');
            var icon = $(this).find('i');

            if (row.hasClass('shown')) {
                // Remove os detalhes
                table.row(row).child.hide();
                row.removeClass('shown');
                // Troca o ícone para fa-plus
                icon.removeClass('fa-minus').addClass('fa-plus');
            } else {
                // Adiciona os detalhes
                var details = `
                        <tr class="details-row">
                            <td colspan="4">
                                <strong>Atua Como</strong><br>
                                <strong>Cliente:</strong>  ${atuacliente}  <br>
                                <strong>Fornecedor:</strong>  ${atuaFornecedor}  <br>
                                <strong>Transportador:</strong> ${atua_transp}  <br>
                                <strong>Nome:</strong> ${nome} <br>
                                <strong>Nome Fantasia:</strong> ${Fantasia} <br>
                                <strong>Tipo_Pessoa:</strong> ${tipo_fornecedor} <br>
                                <strong>Cnpj/Cpf:</strong> ${documento} <br>
                                <strong>Contribuinte:</strong> ${indicadorie} <br>
                                <strong>Inscrição estadual:</strong> ${Iestadual} <br>
                                <strong>RG:</strong> ${rg} <br>
                                <strong>Órgão Emissor:</strong> ${orgao_emissor} <br>
                                <strong>Endereço</strong><br>
                                <strong>Cep:</strong> ${cep} <br>
                                <strong>UF:</strong> ${uf} <br>
                                <strong>Cidade:</strong> ${cidade} <br>
                                <strong>Bairro:</strong> ${bairro}<br>
                                <strong>Endereço:</strong> ${endereco} <br>
                                <strong>Número:</strong>${numero} <br>
                                <strong>Complemento:</strong> ${complemento} <br>
                                 <strong>Contato</strong><br>
                                <strong>Informações do Contato:</strong> ${informacao_contato}<br>
                                <strong>Telefone:</strong> ${telefone}<br>
                                <strong>Celular:</strong> ${celular}<br>
                                <strong>E-mail:</strong> ${email}<br>
                                <strong>Contatos Adicionais</strong><br>
                                <strong>Nome:</strong> ${nomead}<br>
                                <strong>E-mail:</strong> ${emailad}<br>
                                <strong>Celular:</strong> ${celularad}<br>
                                <strong>Observações:</strong> ${obs}<br>                               
                                <br><br>
                            </td>
                        </tr>
                    `;
                table.row(row).child(details).show();
                row.addClass('shown');
                // Troca o ícone para fa-minus
                icon.removeClass('fa-plus').addClass('fa-minus');
            }
        });
    });

    // Espera a página carregar
    document.addEventListener("DOMContentLoaded", function() {
        // Seleciona todas as mensagens com a classe fade-message
        const messages = document.querySelectorAll('.fade-message');

        // Define o tempo para desaparecer (5000ms = 5 segundos)
        setTimeout(() => {
            messages.forEach(message => {
                // Adiciona uma classe para iniciar a transição (caso use CSS)
                message.style.transition = 'opacity 0.5s';
                message.style.opacity = '0';

                // Remove completamente do DOM após a transição
                setTimeout(() => {
                    message.remove();
                }, 500); // Tempo da transição (0.5s)
            });
        }, 5000); // Tempo inicial antes de desaparecer (5s)
    });


    document.addEventListener('DOMContentLoaded', function() {
        const updateButtons = document.querySelectorAll('.btn-delete');

        updateButtons.forEach(button => {
            button.addEventListener('click', function() {
                const fornecedorId = this.getAttribute('data-id');
                const fornecedorNome = this.getAttribute('data-nome');
                const updateUrl = this.getAttribute('data-url'); // URL para update
                const novoStatus = this.getAttribute('data-status'); // Novo status vindo do botão
                const csrfToken = document.querySelector('meta[name="csrf-token"]')
                    .getAttribute('content');

                Swal.fire({
                    title: 'Você tem certeza?',
                    text: `O status do Fornecedor "${fornecedorNome}" será Inativado.`,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Sim, atualizar!',
                    cancelButtonText: 'Cancelar'
                }).then((result) => {
                    //alert(novoStatus);
                    if (result.isConfirmed) {
                        fetch(updateUrl, {
                                method: 'PATCH', // PATCH para atualizações tem q ser o mesmo na rota web.php
                                headers: {
                                    'X-CSRF-TOKEN': csrfToken,
                                    'Content-Type': 'application/json',
                                },
                                body: JSON.stringify({
                                    status: novoStatus
                                }) // Envia o novo status
                            })
                            .then(response => {
                                if (response.ok) {
                                    Swal.fire(
                                        'Atualizado!',
                                        `O status do Fornecedor "${fornecedorNome}" foi Inativado.`,
                                        'success'
                                    ).then(() => {
                                        location
                                            .reload(); // Recarrega a página
                                    });
                                } else {
                                    Swal.fire(
                                        'Erro!',
                                        'Não foi possível atualizar o status. Tente novamente.',
                                        'error'
                                    );
                                }
                            })
                            .catch(error => {
                                console.error('Erro:', error);
                                Swal.fire(
                                    'Erro!',
                                    'Ocorreu um problema ao processar a solicitação.',
                                    'error'
                                );
                            });
                    }
                });
            });
        });
    });
</script>


<script src="{{ asset('assets/js/datatable/datatables/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('assets/js/datatable/datatables/dataTables1.js') }}"></script>
<script src="{{ asset('assets/js/datatable/datatables/dataTables.bootstrap5.js') }}"></script>
<script src="{{ asset('assets/js/datatable/datatable-extension/dataTables.autoFill.js') }}"></script>
<script src="{{ asset('assets/js/datatable/datatable-extension/autoFill.bootstrap5.js') }}"></script>
<script src="{{ asset('assets/js/datatable/datatable-extension/dataTables.keyTable.js') }}"></script>
<script src="{{ asset('assets/js/datatable/datatable-extension/keyTable.bootstrap5.js') }}"></script>
<script src="{{ asset('assets/js/datatable/datatable-extension/dataTables.buttons.js') }}"></script>
<script src="{{ asset('assets/js/datatable/datatable-extension/buttons.bootstrap5.js') }}"></script>
<script src="{{ asset('assets/js/datatable/datatable-extension/buttons.colVis.min.js') }}"></script>
<script src="{{ asset('assets/js/datatable/datatable-extension/dataTables.fixedHeader.js') }}"></script>
<script src="{{ asset('assets/js/datatable/datatable-extension/fixedHeader.bootstrap5.js') }}"></script>
<script src="{{ asset('assets/js/datatable/datatable-extension/jszip.min.js') }}"></script>
<script src="{{ asset('assets/js/datatable/datatable-extension/pdfmake.min.js') }}"></script>
<script src="{{ asset('assets/js/datatable/datatable-extension/vfs_fonts.js') }}"></script>
<script src="{{ asset('assets/js/datatable/datatable-extension/buttons.html5.min.js') }}"></script>
<script src="{{ asset('assets/js/datatable/datatable-extension/buttons.print.min.js') }}"></script>
<script src="{{ asset('assets/js/datatable/datatable-extension/dataTables.responsive.js') }}"></script>
<script src="{{ asset('assets/js/datatable/datatable-extension/responsive.bootstrap5.js') }}"></script>
<script src="{{ asset('assets/js/datatable/datatable-extension/dataTables.rowReorder.js') }}"></script>
<script src="{{ asset('assets/js/datatable/datatable-extension/rowReorder.bootstrap5.js') }}"></script>
<script src="{{ asset('assets/js/datatable/datatable-extension/custom.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
@endsection