@extends('layouts.app')

@section('content')
<div class="container">
    <h1 class="mb-4">Gerir Armazém: {{ $armazem->nome }}</h1>

    <div class="row">
        @foreach ($armazem->setores as $setor)
            <div class="col-md-6">
                <div class="card mb-3">
                    <div class="card-header">
                        <h5 class="card-title">Setor: {{ $setor->nome }}</h5>
                    </div>
                    <div class="card-body">
                        <h6>Produtos no Setor:</h6>
                        <ul data-setor-id="{{ $setor->id }}">
                            @foreach ($setor->inventario as $inventario)
                                <li data-id="{{ $inventario->produto->id }}" data-quantity="{{ $inventario->quantidade }}">
                                    {{ $inventario->produto->name }} - {{ $inventario->quantidade }}
                                </li>
                            @endforeach
                        </ul>
                        <div class="mt-3 d-flex justify-content-between">
                            <button class="btn btn-success btn-sm add-product" data-setor-id="{{ $setor->id }}">
                                Adicionar Produto
                            </button>
                            <button class="btn btn-danger btn-sm remove-product" data-setor-id="{{ $setor->id }}">
                                Remover Produto
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
</div>


<!-- Modal Adicionar Produto -->
<div class="modal fade" id="addProductModal" tabindex="-1" aria-labelledby="addProductModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Adicionar Produto ao Setor</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label for="produto" class="form-label">Selecione o Produto</label>
                    <select id="produto" class="form-select">
                        @foreach ($produtos as $produto)
                            <option value="{{ $produto->id }}">{{ $produto->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="mb-3">
                    <label for="quantidade" class="form-label">Quantidade</label>
                    <input type="number" id="quantidade" class="form-control" placeholder="Digite a quantidade">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>

                <button type="button" class="btn btn-success" id="saveAddProduct">Adicionar</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal Remover Produto -->
<div class="modal fade" id="removeProductModal" tabindex="-1" aria-labelledby="removeProductModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Remover Produto do Setor</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
            </div>
            <div class="modal-body">
                <div id="removeProductList"></div>
                <div class="mb-3">
                    <label for="removerQuantidade" class="form-label">Quantidade a Remover</label>
                    <input type="number" id="removerQuantidade" class="form-control" placeholder="Digite a quantidade">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>

                <button type="button" class="btn btn-danger" id="saveRemoveProduct">Remover</button>
            </div>
        </div>
    </div>
</div>

@endsection
@push('scripts')
<script>
document.querySelector('#addProductModal .btn-secondary').addEventListener('click', function () {
        $('#addProductModal').modal('hide');
    });

    // Cancelar do Modal Remover Produto
    document.querySelector('#removeProductModal .btn-secondary').addEventListener('click', function () {
        $('#removeProductModal').modal('hide');
    });
    
document.addEventListener('DOMContentLoaded', function () {
    const setoresProdutos = {}; // Armazena todos os produtos de cada setor

    // Inicializar os produtos no carregamento da página
    document.querySelectorAll('.card').forEach(card => {
        const setorId = card.querySelector('.add-product').getAttribute('data-setor-id');
        setoresProdutos[setorId] = {}; // Inicializa o setor no objeto

        card.querySelectorAll('ul li').forEach(item => {
            const produtoId = item.getAttribute('data-id');
            const quantidade = parseInt(item.getAttribute('data-quantity'), 10);
            const nome = item.textContent.split(' - ')[0];

            setoresProdutos[setorId][produtoId] = {
                nome: nome.trim(),
                quantidade: quantidade,
            };
        });
    });

    // Abrir Modal de Adicionar Produto
    document.body.addEventListener('click', function (e) {
        if (e.target.classList.contains('add-product')) {
            const setorId = e.target.getAttribute('data-setor-id');
            document.getElementById('saveAddProduct').setAttribute('data-setor-id', setorId);
            $('#addProductModal').modal('show');
        }
    });

    // Adicionar Produto ao Setor
    document.getElementById('saveAddProduct').addEventListener('click', function () {
        const setorId = this.getAttribute('data-setor-id');
        const produtoId = document.getElementById('produto').value;
        const quantidade = parseInt(document.getElementById('quantidade').value, 10);

        if (!produtoId || !quantidade || quantidade <= 0) {
            Swal.fire('Erro', 'Selecione um produto e insira uma quantidade válida.', 'error');
            return;
        }

        fetch(`{{ route('setor.adicionarProduto', ':id') }}`.replace(':id', setorId), {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ produto_id: produtoId, quantidade }),
        })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    Swal.fire('Sucesso', data.message, 'success');
                    $('#addProductModal').modal('hide');

                    // Atualiza a lista local
                    if (setoresProdutos[setorId][produtoId]) {
                        // Produto já existe, atualiza a quantidade
                        setoresProdutos[setorId][produtoId].quantidade += quantidade;
                    } else {
                        // Novo produto, adiciona ao estado
                        setoresProdutos[setorId][produtoId] = {
                            nome: data.produto.nome,
                            quantidade: data.produto.quantidade,
                        };
                    }

                    // Atualiza o DOM
                    const setorCard = document.querySelector(`[data-setor-id="${setorId}"]`).closest('.card');
                    const productList = setorCard.querySelector('ul');
                    let productItem = productList.querySelector(`li[data-id="${produtoId}"]`);

                    if (productItem) {
                        // Produto já existe, atualiza a quantidade
                        productItem.textContent = `${setoresProdutos[setorId][produtoId].nome} -  ${setoresProdutos[setorId][produtoId].quantidade}`;
                        productItem.setAttribute('data-quantity', setoresProdutos[setorId][produtoId].quantidade);
                    } else {
                        // Produto não existe, adiciona ao DOM
                        productList.insertAdjacentHTML(
                            'beforeend',
                            `<li data-id="${produtoId}" data-quantity="${setoresProdutos[setorId][produtoId].quantidade}">${setoresProdutos[setorId][produtoId].nome} -  ${setoresProdutos[setorId][produtoId].quantidade}</li>`
                        );
                    }
                } else {
                    Swal.fire('Erro', data.message, 'error');
                }
            })
            .catch(error => {
                Swal.fire('Erro', 'Não foi possível adicionar o produto.', 'error');
                console.error(error);
            });
    });


 document.body.addEventListener('click', function (e) {
        if (e.target.classList.contains('remove-product')) {
            const setorId = e.target.getAttribute('data-setor-id');
            document.getElementById('saveRemoveProduct').setAttribute('data-setor-id', setorId);

            // Preencher a lista de produtos no modal
            const removeProductList = document.getElementById('removeProductList');
            removeProductList.innerHTML = ''; // Limpar a lista

            const produtosDoSetor = setoresProdutos[setorId];
            Object.keys(produtosDoSetor).forEach(produtoId => {
                const produto = produtosDoSetor[produtoId];
                removeProductList.insertAdjacentHTML(
                    'beforeend',
                    `<div class="d-flex justify-content-between align-items-center mb-3 select-product" data-id="${produtoId}" data-nome="${produto.nome}">
                        <span>${produto.nome} - ${produto.quantidade}</span>
                        <button class="btn btn-primary btn-sm select-product-btn" data-id="${produtoId}" data-nome="${produto.nome}">Selecionar</button>
                    </div>`
                );
            });

            const quantidadeInput = document.getElementById('removerQuantidade');
            quantidadeInput.value = '';
            quantidadeInput.disabled = true;

            $('#removeProductModal').modal('show');
        }
    });

    // Selecionar Produto para Remover
    document.body.addEventListener('click', function (e) {
        if (e.target.classList.contains('select-product-btn')) {
            const produtoId = e.target.getAttribute('data-id');
            const produtoNome = e.target.getAttribute('data-nome');
            // Atribui o produto selecionado ao botão de remover
            document.getElementById('saveRemoveProduct').setAttribute('data-produto-id', produtoId);

            const quantidadeInput = document.getElementById('removerQuantidade');
            quantidadeInput.disabled = false;

            Swal.fire('Selecionado', `Produto "${produtoNome}" foi selecionado.`, 'success');
        }
    });

    // Remover Produto do Setor
    document.getElementById('saveRemoveProduct').addEventListener('click', function () {
        const setorId = this.getAttribute('data-setor-id');
        const produtoId = this.getAttribute('data-produto-id');
        const quantidade = parseInt(document.getElementById('removerQuantidade').value, 10);

        if (!produtoId || !quantidade || quantidade <= 0) {
            Swal.fire('Erro', 'Selecione um produto e insira uma quantidade válida.', 'error');
            return;
        }

        fetch(`{{ route('setor.removerProduto', [':setorId', ':produtoId']) }}`
            .replace(':setorId', setorId)
            .replace(':produtoId', produtoId), {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ quantidade }),
        })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    Swal.fire('Sucesso', data.message, 'success');
                    $('#removeProductModal').modal('hide');

                    // Atualiza o estado local
                    const produto = setoresProdutos[setorId][produtoId];
                    produto.quantidade -= quantidade;

                    if (produto.quantidade <= 0) {
                        // Remove o produto do estado e do DOM
                        delete setoresProdutos[setorId][produtoId];
                        document.querySelector(`ul[data-setor-id="${setorId}"] li[data-id="${produtoId}"]`).remove();
                    } else {
                        // Atualiza a quantidade no DOM
                        const productItem = document.querySelector(`ul[data-setor-id="${setorId}"] li[data-id="${produtoId}"]`);
                        productItem.textContent = `${produto.nome} - ${produto.quantidade}`;
                        productItem.setAttribute('data-quantity', produto.quantidade);
                    }
                } else {
                    Swal.fire('Erro', data.message, 'error');
                }
            })
            .catch(error => {
                Swal.fire('Erro', 'Não foi possível remover o produto.', 'error');
                console.error(error);
            });
    });
});

</script>
@endpush