@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>Produtos</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">Produtos</li>
                    <li class="breadcrumb-item active">Visualizar</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">
                    <div class="row g-3">
                        <div class="col-md-6 mb-3">
                            <div class="common-flex mix-hover-btn">
                                <a href="" class="btn btn-bg-slide button-light-primary">{{ __('Voltar') }}</a>
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <div>
                                <a href="{{ route('produtos.new-produtos') }}" class="btn btn-primary">{{ __('Incluir Produto') }}</a>
                            </div>
                        </div>
                    </div>


                </div>

                <div class="card-body order-details-product pt-0">
                    <div class="table-responsive custom-scrollbar">
                        <table class="table" id="tabelaProdutos">
                            <thead>
                                <tr>
                                    <th></th>
                                    <th>Produto</th>
                                    <th>Nome</th>
                                    <th>Código (SKU)</th>
                                    <th>Unidade</th>
                                    <th>Preço</th>
                                    <th>Status</th>
                                    <th>Estoque</th>
                                    <th>Ações</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($produtos as $produto)

                                <tr data-id="{{ $produto->id }}">
                                    <td class="details"><a href="javascript:void(0);" class="btn-details"
                                            data-id="{{ $produto->id }}"
                                            data-preco="{{ ($produto->preco/100) }}"
                                            data-ncm="{{ $produto->ncm }}"
                                            data-obs_anp="{{ $produto->obs_anp }}"
                                            data-unidade="{{ $produto->unidade_descricao }}"
                                            data-tipo="{{ $produto->tipo_descricao }}"
                                            data-item="{{ $produto->tipo_item_descricao }}"
                                            data-volumes="{{ $produto->volumes }}"
                                            data-peso_bruto="{{ $produto->peso_bruto }}"
                                            data-peso_liquido="{{ $produto->peso_liquido }}"
                                            data-estoque_minimo="{{ $produto->estoque_minimo }}"
                                            data-custo_variavel="{{ $produto->custo_variavel }}"
                                            data-cest="{{ $produto->cest }}"
                                            data-origem="{{ $produto->origem }}"
                                            data-ean="{{ $produto->ean }}"
                                            data-anexo="{{ asset('storage/produtos/' . $produto->anexo) }}">
                                            <i class="fa fa-plus" style="font-size:25px;"></i>
                                        </a></td>

                                    <td>
                                        <div class="light-product-box"><img class="img-fluid"
                                                src="{{ asset('storage/produtos/' . $produto->anexo) }}"
                                                alt="headphone"></div>
                                    </td>
                                    <td>{{ $produto->nome }}</td>
                                    <td>{{ $produto->codigo_sku }}</td>
                                    <td>{{ $produto->unidade_descricao }}</td>
                                    <td>{{ ($produto->preco/100) }}</td>
                                    @if($produto->id_status =='1')
                                    <td><span class="badge f-14 f-w-400 txt-success">Ativo</span></td>
                                    @else
                                    <td><span class="badge f-14 f-w-400 txt-danger">Inativo</span></td>
                                    @endif
                                    <td>{{$produto->saldoAtual}}</td>
                                    <td>
                                        <ul class="action">
                                            <li class="edit" style="margin-top: 5px !important; ">
                                                <a href="{{ route('produtos.lanc-produtos', ['id' => $produto->id]) }}" title="">
                                                    <i class="icon-package" style="font-size:25px;color: #7366ff;"></i>
                                                </a>
                                            </li>
                                            <li class="edit" style="margin-top: 5px !important; ">
                                                <a href="{{ route('produtos.edit-produtos', ['id' => $produto->id]) }}" title="">
                                                    <i class="icon-pencil-alt" 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-{{ $produto->id }}"
                                                        data-url="{{ route('produtos.update-status', $produto->id) }}"
                                                        data-id="{{ $produto->id }}"
                                                        data-nome="{{ $produto->nome }}"
                                                        data-status=" {{ $produto->id_status == 1 ? '2' : '1'  }}"
                                                        {{ $produto->id_status == 2 ? 'checked' : '' }}>
                                                    <label class="form-check-label" for="status-switch-{{ $produto->id }}"></label>
                                                </div>
                                            </li>
                                            <!--<li class="delete">
                                                        <a href="javascript:void(0);" class="btn-delete"
                                                            data-url="{{ route('produtos.update-status', $produto->id) }}"
                                                            data-id="{{ $produto->id }}" data-nome="{{ $produto->nome }}"
                                                            data-status="2">
                                                            <i class="fa fa-archive" style="font-size:25px;"></i>
                                                        </a>
                                                    </li>-->

                                        </ul>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

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

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

@section('scripts')

<script>
    $(document).ready(function() {
        var table = $('#tabelaProdutos').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 produtoId = $(this).data('id');
            var preco = $(this).data('preco');
            var ncm = $(this).data('ncm');
            var obsAnp = $(this).data('obs_anp');
            var anexo = $(this).data('anexo');
            var unidade = $(this).data('unidade');
            var item = $(this).data('item');
            var tipo = $(this).data('tipo');
            var volumes = $(this).data('volumes');
            var peso_bruto = $(this).data('peso_bruto');
            var peso_liquido = $(this).data('peso_liquido');
            var estoque_minimo = $(this).data('estoque_minimo');
            var custo_variavel = $(this).data('custo_variavel');
            var origem = $(this).data('origem');
            var ean = $(this).data('ean');
            var cest = $(this).data('cest');
            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>NCM:</strong> ${ncm} <br>
                                <strong>Observação ANP:</strong> ${obsAnp} <br>                                
                                <strong>Tipo de Produto:</strong> ${tipo}  <br>
                                <strong>Tipo de Item:</strong> ${item}  <br>                                
                                <strong>Peso Bruto:</strong> ${peso_bruto} <br>
                                <strong>Peso Líquido:</strong> ${peso_liquido} <br>
                                <strong>Estoque Mínimo:</strong> ${estoque_minimo} <br>
                                <strong>Custo Variáveis:</strong> ${custo_variavel} <br>
                                <strong>CEST:</strong> ${cest} <br>
                                <strong>Origem:</strong> ${origem} <br>
                                <strong>EAN:</strong> ${ean} <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 produtoId = this.getAttribute('data-id');
                const produtoNome = 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 produto "${produtoNome}" será inativado.`,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Sim, atualizar!',
                    cancelButtonText: 'Cancelar'
                }).then((result) => {
                    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({
                                    id_status: novoStatus
                                }) // Envia o novo status
                            })
                            .then(response => {
                                if (response.ok) {
                                    Swal.fire(
                                        'Atualizado!',
                                        `O status do produto "${produtoNome}" 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