@extends('layouts.app')

@section('content')
<div class="container">
    <h1 class="mb-4">Criar Armazéns e Sub-Armazéns</h1>

    <!-- FORMULÁRIO PARA CRIAR ARMAZÉM -->
    <form id="formArmazem" class="mb-4">
        <div class="form-group">
            <label for="nome">Nome do Armazém</label>
            <input type="text" name="nome" id="nome" class="form-control" placeholder="Digite o nome do armazém" required>
        </div>
        <button type="button" class="btn btn-primary" id="createArmazem">Criar Armazém</button>
    </form>

    <!-- LISTA DE ARMAZÉNS -->
    <div id="armazens-list">
        <!-- Armazéns dinâmicos serão adicionados aqui -->
    </div>

    <!-- BOTÃO FINAL PARA SALVAR TUDO -->
    <div class="mt-4">
        <button type="button" class="btn btn-success" id="saveAll">Guardar Tudo</button>
        
    </div>
    
</div>

<!-- MODAL PARA ADICIONAR SETORES -->
<div class="modal fade" id="modalSetor" tabindex="-1" role="dialog" aria-labelledby="modalSetorLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalSetorLabel">Adicionar Setor</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="formSetor">
                    <div class="form-group">
                        <label for="setor_nome">Nome do Setor</label>
                        <input type="text" id="setor_nome" class="form-control" placeholder="Digite o nome do setor" required>
                    </div>
                    <button type="button" id="saveSetor" class="btn btn-primary">Salvar</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- MODAL PARA GERIR INVENTÁRIO -->
<div class="modal fade" id="modalInventario" tabindex="-1" role="dialog" aria-labelledby="modalInventarioLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalInventarioLabel">Adicionar Inventário</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="formInventario">
                    <div class="form-group">
                        <label for="produto">Selecionar Produto</label>
                        <select id="produto" class="form-control custom-select2" required>
                            @foreach($produtos as $produto)
                                <option value="{{ $produto->id }}" data-imagem="{{ asset('storage/products/' . $produto->default_image) }}">
                                    {{ $produto->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="quantidade">Quantidade</label>
                        <input type="number" id="quantidade" class="form-control" min="1" placeholder="Digite a quantidade" required>
                    </div>
                    <button type="button" id="saveInventario" class="btn btn-primary">Adicionar</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection
@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>document.addEventListener('DOMContentLoaded', function () {
    let armazens = [];
    let setores = {};
    let armazemId = 1;

    const armazensList = document.getElementById('armazens-list');
    const nomeInput = document.getElementById('nome');
    const createArmazemButton = document.getElementById('createArmazem');

    // Criar Armazém
    createArmazemButton.addEventListener('click', function () {
        const nome = nomeInput.value.trim();
        if (!nome) {
            Swal.fire('Erro', 'Por favor, insira o nome do armazém!', 'warning');
            return;
        }

        const armazem = { id: armazemId, nome, setores: [] };
        armazens.push(armazem);
        setores[armazemId] = [];
        armazemId++;

        renderArmazens();
        nomeInput.value = '';
        nomeInput.placeholder = 'Digite o nome de outro armazém';
        Swal.fire('Sucesso', `Armazém "${nome}" criado com sucesso!`, 'success');
    });

    // Renderizar Armazéns
    function renderArmazens() {
        armazensList.innerHTML = '';
        armazens.forEach(armazem => {
            const armazemHtml = `
                <div class="card mb-3">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <strong>Armazém ${armazem.nome}</strong>
                        <button class="btn btn-danger btn-sm remove-armazem" data-id="${armazem.id}">Remover</button>
                    </div>
                    <div class="card-body">
                        <h5>Setores</h5>
                        <div id="setores-${armazem.id}"></div>
                        <button class="btn btn-secondary mt-2 add-setor" data-id="${armazem.id}">Adicionar Setor</button>
                    </div>
                </div>`;
            armazensList.insertAdjacentHTML('beforeend', armazemHtml);
            renderSetores(armazem.id);
        });
    }

    // Renderizar Setores
    function renderSetores(armazemId) {
        const setoresContainer = document.getElementById(`setores-${armazemId}`);
        setoresContainer.innerHTML = '';
        setores[armazemId].forEach((setor, index) => {
            let inventarioHtml = '';
            if (setor.inventario.length > 0) {
                inventarioHtml = `
                    <ul class="mt-2">
                        ${setor.inventario.map(item => `<li>${item.produtoNome} - ${item.quantidade}</li>`).join('')}
                    </ul>
                `;
            }

            const setorHtml = `
                <div class="d-flex justify-content-between align-items-center mt-2">
                    <div>
                        <strong>${setor.nome}</strong>
                        ${inventarioHtml}
                    </div>
                    <div>
                        <button class="btn btn-primary btn-sm manage-inventario" data-id="${index}" data-armazem-id="${armazemId}">Adicionar Inventário</button>
                        <button class="btn btn-danger btn-sm remove-setor" data-id="${index}" data-armazem-id="${armazemId}">Remover</button>
                    </div>
                </div>`;
            setoresContainer.insertAdjacentHTML('beforeend', setorHtml);
        });
    }

    // Adicionar Setor
    armazensList.addEventListener('click', function (e) {
        if (e.target.classList.contains('add-setor')) {
            const armazemId = e.target.getAttribute('data-id');
            document.getElementById('saveSetor').setAttribute('data-armazem-id', armazemId);
            $('#modalSetor').modal('show');
        }
    });

    // Salvar Setor
    document.getElementById('saveSetor').addEventListener('click', function () {
        const setorNome = document.getElementById('setor_nome').value.trim();
        const armazemId = this.getAttribute('data-armazem-id');
        if (!setorNome) {
            Swal.fire('Erro', 'Por favor, insira o nome do setor!', 'warning');
            return;
        }

        setores[armazemId].push({ nome: setorNome, inventario: [] });
        renderSetores(armazemId);
        $('#modalSetor').modal('hide');
        Swal.fire('Sucesso', `Setor "${setorNome}" adicionado com sucesso!`, 'success');
    });

    // Gerir Inventário
    armazensList.addEventListener('click', function (e) {
        if (e.target.classList.contains('manage-inventario')) {
            const setorIndex = e.target.getAttribute('data-id');
            const armazemId = e.target.getAttribute('data-armazem-id');
            document.getElementById('saveInventario').setAttribute('data-setor-id', setorIndex);
            document.getElementById('saveInventario').setAttribute('data-armazem-id', armazemId);

            // Limpar o modal antes de mostrar
            document.getElementById('produto').selectedIndex = 0;
            document.getElementById('quantidade').value = '';
            $('#modalInventario').modal('show');
        }
    });

    // Salvar Inventário
    document.getElementById('saveInventario').addEventListener('click', function () {
        const setorIndex = this.getAttribute('data-setor-id');
        const armazemId = this.getAttribute('data-armazem-id');
        const produtoSelect = document.getElementById('produto');
        const produtoId = produtoSelect.value;
        const produtoNome = produtoSelect.options[produtoSelect.selectedIndex].text;
        const quantidade = document.getElementById('quantidade').value;

        if (!produtoId || !quantidade) {
            Swal.fire('Erro', 'Selecione um produto e insira a quantidade!', 'warning');
            return;
        }

        setores[armazemId][setorIndex].inventario.push({ produtoId, produtoNome, quantidade });
        renderSetores(armazemId);
        $('#modalInventario').modal('hide');
        Swal.fire('Sucesso', 'Inventário atualizado com sucesso!', 'success');
    });

    // Remover Armazém ou Setor
    armazensList.addEventListener('click', function (e) {
        if (e.target.classList.contains('remove-armazem')) {
            const armazemId = e.target.getAttribute('data-id');
            armazens = armazens.filter(a => a.id != armazemId);
            delete setores[armazemId];
            renderArmazens();
            Swal.fire('Sucesso', 'Armazém removido com sucesso!', 'success');
        }

        if (e.target.classList.contains('remove-setor')) {
            const setorIndex = e.target.getAttribute('data-id');
            const armazemId = e.target.getAttribute('data-armazem-id');
            setores[armazemId].splice(setorIndex, 1);
            renderSetores(armazemId);
            Swal.fire('Sucesso', 'Setor removido com sucesso!', 'success');
        }
    });
    document.getElementById('saveAll').addEventListener('click', function () {
    const payload = armazens.map(armazem => ({
        nome: armazem.nome,
        setores: setores[armazem.id].map(setor => ({
            nome: setor.nome,
            inventario: setor.inventario.map(item => ({
                produtoId: item.produtoId,
                quantidade: item.quantidade,
            })),
        })),
    }));

   fetch('{{ route("armazens.storeAll") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
        },
        body: JSON.stringify({ armazens: payload }),
    })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                Swal.fire('Sucesso', data.message, 'success');
                armazens = [];
                setores = {};
                armazemId = 1;
                renderArmazens();
            } else {
                Swal.fire('Erro', data.message, 'error');
            }
        })
        .catch(error => {
            Swal.fire('Erro', 'Ocorreu um erro ao salvar os dados.', 'error');
        });
});
});


</script>
@endpush