@extends('index')

@section('content')
    <main>
        @component('pages.inventarios.components.header', ['inventario' => $inventario])
        @endcomponent

        @component('pages.inventarios.components.table', ['inventario' => $inventario, 'showActions' => true])
        @endcomponent
    </main>
    <div class="w-100 d-flex items-center justify-content-center">
        <div class="position-sticky" style="max-width: 500px; width: 100vw;" style="top-0 rignt-0" id="reader"></div>
    </div>
    <form action="{{ route('inventarios.ajax_insert') }}" method="post"> @csrf</form>
    <script src="{{ asset('js/html5-qrcode.min.js') }}"></script>

    <script>
        const leitor = document.getElementById('reader')
        const inventario_setor_id = "{{ $inventario->setor->id }}";
        let awaitResponse = false

        const unlock = () => setTimeout(() => {
            awaitResponse = false
        }, "1000");

        function trColor(tr, color) {

            [...tr.getElementsByTagName("td")].map((item) => {
                item.className = color
            })
        }

        function onScanSuccess(decodedText, decodedResult) {
            if (awaitResponse) return
            awaitResponse = true
            const tombamento = decodedText

            const response = $.ajax({
                url: "{{ route('inventarios.ajax_insert') }}",
                method: 'POST',
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                data: {
                    tombamento: tombamento,
                    inventario_id: '{{ $inventario->id }}'
                },
                success: function(response) {

                    [...document.getElementById('bens').children].map((item) => {
                        if (item.getElementsByTagName("td")[1]
                            .innerText === "Nenhum bem cadastrado") document.getElementById('bens')
                            .removeChild(item)
                    })

                    const bens = document.getElementById('bens')
                    const tr = document.createElement("tr")
                    const tombamento = document.createElement("td")
                    tombamento.innerText = response.tombamento
                    const descricao = document.createElement("td")
                    descricao.innerText = response.descricao
                    const setor = document.createElement("td")
                    setor.innerText = `${response.setor.sigla}: ${response.setor.descricao}`

                    const deleteTd = document.createElement("td")
                    const deleteButton = document.createElement("button")
                    deleteButton.className = "btn btn-danger btn-sm"
                    deleteButton.innerText = "Remover"
                    deleteButton.onclick = () => deleteBem(response.id)
                    deleteTd.appendChild(deleteButton)

                    tr.appendChild(tombamento)
                    tr.appendChild(descricao)
                    tr.appendChild(setor)
                    tr.appendChild(deleteTd)

                    tr.id = response.id

                    if (`${response.setor_id}` === inventario_setor_id) {
                        trColor(tr, 'text-success')
                    } else {
                        trColor(tr, 'text-danger')
                    }
                    bens.appendChild(tr)
                    toastr.success('Item adicionado com sucesso!')
                    unlock()
                }
            }).fail(function(request, status, error) {
                toastr.error(request.responseJSON.error);
                unlock()
            })

        }

        const html5QrcodeScanner = new Html5QrcodeScanner(
            "reader", {
                fps: 10,
                qrbox: 250
            });
        html5QrcodeScanner.render(onScanSuccess);


        function deleteBem(id) {

            if (!confirm("Deseja realmente remover este item?")) return
            $.ajax({
                url: "{{ route('cadastroBem.destroy') }}",
                method: 'POST',
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                data: {
                    id
                },
                success: function(response) {
                    toastr.success("Item deletado")
                    document.getElementById("bens").removeChild(document.getElementById(id))

                }
            }).fail(function(request, status, error) {
                toastr.error("Não foi possível remover o item no momento");

            })
        }
    </script>
@endsection