@extends('adminlte::page')

@section('title', 'Produtos')

@section('content_header')
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center gap-2 w-100">
        <div class="d-flex w-100 justify-content-between align-items-center">
            <h3>Produtos</h3>
            <a href="{{ route('products.create') }}" class="btn btn-primary">
                Nova Produto
            </a>
        </div>
    </div>
@stop

@section('content')
    @if(Session::has('success'))
        @php
            $data = Session::get('success');
        @endphp

        @if (is_array($data))
            @foreach ($data as $msg)
                <div class="alert alert-success auto-dismiss" role="alert">
                    <i class="fa fa-check"></i>
                    {{ $msg }}
                </div>
            @endforeach
        @else
            <div class="alert alert-success auto-dismiss" role="alert">
                <i class="fa fa-check"></i>
                {{ $data }}
            </div>
        @endif
    @endif

    @if(Session::has('error'))
        @php
            $data = Session::get('error');
        @endphp

        @if (is_array($data))
            @foreach ($data as $msg)
                <div class="alert alert-danger auto-dismiss" role="alert">
                    <i class="fa fa-times"></i>
                    {{ $msg }}
                </div>
            @endforeach
        @else
            <div class="alert alert-danger auto-dismiss" role="alert">
                <i class="fa fa-times"></i>
                {{ $data }}
            </div>
        @endif
    @endif
    <div class="mb-3">
        <form method="get" action="products" class="form-inline">
            <div class="input-group w-50">
                <input id="pesquisa" type="text" class="form-control" name="pesquisa"
                    placeholder="Pesquise pelo Produto"
                    value="{{ $filtros['pesquisa'] ?? '' }}">
                <div class="input-group-append">
                    <button class="btn btn-primary" type="submit">Buscar</button>
                </div>
            </div>
            <div class="ml-3 form-check">
                <input class="form-check-input" type="checkbox" name="inativo_produto" id="inativo_produto"
                    @if(!empty($filtros['inativo_produto'])) checked @endif>
                <label class="form-check-label" for="inativo_produto">Mostrar Inativos</label>
            </div>
        </form>
    </div>

    <div id="detalhes-produto" class="card mt-3" style="display:none;">
    
        <div class="card-header detalhes-header">
            <h5 class="mb-0">Detalhes do Produto</h5>

            <div class="acoes-header">
                <button id="btn-editar-produto" class="btn btn-primary btn-sm" title="Editar Produto">
                    <i class="fa fa-pencil-alt"></i>
                </button>
                <button id="btn-fechar-detalhes" class="btn btn-danger btn-sm" title="Fechar">
                    <i class="fa fa-times"></i>
                </button>
            </div>
        </div>

        <div class="card-body">
            <p><strong>Código:</strong> <span id="det-codigo"></span></p>
            <p><strong>Nome:</strong> <span id="det-nome"></span></p>

            <div id="container-edicoes">
                <h6>Edições</h6>

                <div style="max-height: 200px; overflow-y: auto;">
                    <table class="table table-striped table-sm mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>Edição</th>
                                <th>Código de Barras</th>
                                <th>Saldo</th>
                            </tr>
                        </thead>
                        <tbody id="det-edicoes">
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="card table-responsive">
        <table class="table table-hover table-bordered" id="tabela-produtos">
            <thead>
                <tr>
                    <th scope="col">Código</th>
                    <th scope="col">Referencia</th>
                    <th scope="col">Cód. de Barra</th>
                    <th scope="col">Nome</th>
                    <th scope="col">Vlr. Custo</th>
                    <th scope="col">Vlr. Venda</th>
                    <th scope="col">Saldo</th>
                    <th scope="col">Ação</th>
                </tr>
            </thead>
            <tbody>
                @forelse($produtos as $produto)
                    <tr class="linha-produto"
                        data-id="{{ $produto->id }}"
                        data-codigo="{{ $produto->codigo }}"
                        data-nome="{{ $produto->nome_produto }}"
                        data-fornecedor="{{ $produto->razao_social_nome }}"
                        data-custo="{{ number_format($produto->valor_custo_produto, 2, ',', '.') }}"
                        data-venda="{{ number_format($produto->valor_venda_produto, 2, ',', '.') }}"
                        data-saldo="{{ number_format($produto->saldo, 2, ',', '.') }}"
                    >
                        <td>{{ $produto->codigo }}</td>
                        <td>{{ $produto->referencia_produto }}</td>
                        <td>{{ $produto->codigo_de_barras_produto }}</td>
                        <td>{{ $produto->nome_produto }}</td>
                        <td>{{ number_format($produto->valor_custo_produto, 2, ',', '.') }}</td>
                        <td>{{ number_format($produto->valor_venda_produto, 2, ',', '.') }}</td>
                        <td>{{ number_format($produto->saldo, 2, ',', '.') }}</td>
                        <td>
                            <a href="{{ route('products.edit', $produto->id) }}" class="btn btn-primary btn-sm">
                                <i class="fa fa-pencil-alt"></i>
                            </a>
                            <button type="button" class="btn btn-danger btn-sm delete-button" title="Excluir" data-id="{{ $produto->id }}" data-toggle="modal" data-target="#ModalDelete">
                                <i class="fa fa-trash"></i>
                            </button>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="8" class="text-center">Nenhum registro encontrado</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
        {{ $produtos->onEachSide(4)->links() }}
    </div>

  
    <form id="ModalDeleteForm" method="POST" action="">
        @method('DELETE')
        @csrf
        <div class="modal fade" id="ModalDelete" tabindex="-1" aria-labelledby="DeleteModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="DeleteModalLabel">Deletar Registro</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        Deseja Realmente Excluir este Produto?
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                        <button type="submit" class="btn btn-danger">Excluir</button>
                    </div>
                </div>
            </div>
        </div>
    </form>

    <style>
        .detalhes-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
        }

        .detalhes-header .acoes-header {
            display: flex;
            gap: 8px;
            margin-left: auto;
        }
    </style>
   
@stop

@section('js')
    <script>    
        document.addEventListener("DOMContentLoaded", function () {
            let produtoAtualId = null;

            document.querySelectorAll(".linha-produto").forEach(function (linha) {
                linha.addEventListener("click", function () {
                    const produtoId = this.dataset.id;
                    produtoAtualId = produtoId;

                    fetch(`/products/${produtoId}/detalhes`)
                        .then(res => res.json())
                        .then(data => {
                            const detalhesCard = document.getElementById("detalhes-produto");
                            detalhesCard.style.display = "block";

                            document.getElementById("det-nome").textContent = data.produto.nome_produto;
                            document.getElementById("det-codigo").textContent = data.produto.codigo;

                            const edicoesList = document.getElementById("det-edicoes");
                            edicoesList.innerHTML = "";

                            if (!data.edicoes || data.edicoes.length === 0) {
                                edicoesList.innerHTML = `
                                    <tr>
                                        <td colspan="3" class="text-center text-muted">
                                            Nenhuma edição registrada
                                        </td>
                                    </tr>
                                `;
                            } else {
                                data.edicoes.forEach(e => {
                                    edicoesList.innerHTML += `
                                        <tr>
                                            <td>${e.edicao ?? '-'}</td>
                                            <td>${e.codigo_de_barras ?? '-'}</td>
                                            <td>${e.saldo ?? '0'}</td>
                                        </tr>
                                    `;
                                });
                            }

                            window.scrollTo({ top: 0, behavior: 'smooth' });
                        });
                });
            });

            document.getElementById("btn-fechar-detalhes").addEventListener("click", function () {
                document.getElementById("detalhes-produto").style.display = "none";
            });

            document.getElementById("btn-editar-produto").addEventListener("click", function () {
                if (produtoAtualId) {
                    window.location.href = `/products/${produtoAtualId}/edit`;
                }
            });
        });

        $(document).ready(function () {
            $('.delete-button').on('click', function () {
                const id = $(this).data('id');
                const actionUrl = "{{ url('products') }}/" + id;
                $('#ModalDeleteForm').attr('action', actionUrl);
            });
        });

        setTimeout(() => {
            document.querySelectorAll('.auto-dismiss').forEach(el => {
                el.style.transition = 'opacity 0.5s ease';
                el.style.opacity = '0';
                setTimeout(() => el.remove(), 500); 
            });
        }, 3000); 

    </script>
@stop