@extends('layouts.app')


@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="w-100">
                <div class="card">
                    <div class="card-header d-100">{{ __('Nova movimentação') }} </div>
                    <form action="{{ route('movement.store') }}" class="d-flex flex-wrap w-100" method="post">
                        <div class="card-body">
                            @csrf
                            <div class="w-100 flex-column flex-md-row  d-flex gap-3 p-2">
                                <div class="w-100">

                                    <label for="recipient_id" class="form-label">Beneficiário</label>
                                    <select type="text" name="recipient_id"
                                        class="form-control w-100 @error('recipient_id') border-danger @endif"
                                        id="recipient_id">
                                        <option value="">Selecione um beneficiário</option>
                                        @foreach ($users as $recipient)
                                            <option @if (old('recipient_id') === "$recipient->id") selected @endif
                                                value="{{ $recipient->id }}">{{ $recipient->name }}
                                        </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="w-100">

                                    <label for="type_action" class="form-label">Tipo de Ação</label>
                                    <select type="text" name="type_action"
                                        class="form-control w-100 @error('type_action') border-danger @endif"
                                        id="type_action">
                                        <option value="">Selecione um tipo</option>
                                        <option
                                            @if (old('type_action') === 'input') selected @endif
                                            value="input">
                                            Entrada
                                        </option>
                                        <option @if (old('type_action') === 'output') selected @endif value="output">Saída</option>
                                        <option @if (old('type_action') === 'maintenance') selected @endif value="output">Manutenção</option>
                                        <option @if (old('type_action') === 'return') selected @endif value="return">Devolução</option>
                                        <option @if (old('type_action') === 'drop') selected @endif value="drop">Baixa
                                        </option>

                                    </select>
                                </div>
                                <div class="w-100">
                                    <label for="location_id" class="form-label">Local</label>
                                    <select type="text" name="location_id"
                                        class="form-control w-100 @error('location_id') border-danger @endif"
                                        id="location_id">
                                        <option value="">Selecione um Local</option>
                                        <option @if (old('location_id') === 'create') selected @endif value="create">Criar
                                            Local</option>
                                        @foreach ($locations as $location)
                                            <option @if (old('location_id') === "$location->id") selected @endif
                                                value="{{ $location->id }}">{{ $location->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="w-0 opacity-0 transitions-hidden" id="location-create">
                                    <label for="new_location" class="form-label d-none">Criar
                                        Local</label>
                                        <input type="text" name="new_location" class="form-control w-100 d-none @error('new_location') border-danger @enderror"
                                        id="new_location" value="{{ old('new_location') }}" />
                                </div>
                            </div>

                        </div>



                        <div class="w-100 flex-column  d-flex gap-3 p-2" id="products_section">
                            <h3 class="text-center w-100">Adicione Produtos para continuar</h3>
                        </div>

                        <div class="d-flex w-100 flex-column flex-md-row justify-content-end mt-5">
                            <button type="button" class="btn btn-success m-2" title="Adicionar produto" id="add_product">
                                Adicionar Produto
                            </button>
                        </div>



                        <div class="d-flex w-100 flex-column flex-md-row justify-content-end mt-5">
                            <button type="submit" class="btn btn-success m-2" style="float: center;" title="Salvar">
                                Criar
                            </button>
                            <a class="btn btn-primary m-2" href="{{ url()->previous() }}" type="button">
                                Voltar
                            </a>
                        </div>

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

    </div>
    </div>
    <script async>
        const products = {!! json_encode($products->toArray(), JSON_HEX_TAG) !!};
        let id = 0

        const verifySize = (event, selectedId) => {
            event.preventDefault()
            const typeSelect = document.getElementById("type_action")
            const quantityType = document.getElementById(`quantity_${selectedId}`)
            const currentProduct = document.getElementById(`product_${selectedId}`)

            if (typeSelect[typeSelect.selectedIndex].value === 'output') {
                const selectedProduct = currentProduct[currentProduct.selectedIndex]
                if (isNaN(selectedProduct.value)) {
                    return
                }

                const product = products.find(product => product.id === parseInt(selectedProduct.value))

                if (!product) return

                if (product.patrimonies) {

                    if (quantityType.value === "0") return quantityType.value = ""

                    const count = `${quantityType.value}`.split(",")
                    count.forEach((value) => {
                        if (!product.patrimonies.includes(value)) {
                            alert(`Patrimônio inválido ${value}`)
                            quantityType.value = quantityType.value.replace("value", "")
                        }
                    })
                    if (product.quantity < count.length) {
                        alert(`A quantidade máxima é ${product.quantity}`)
                    }
                    return
                }
                if (product.quantity < parseInt(quantityType.value)) {
                    quantityType.value = product.quantity
                    alert(`A quantidade máxima é ${product.quantity}`)
                }
            }

        }


        const updateQuantity = (event, selectedId) => {
            const currentProduct = document.getElementById(`product_${selectedId}`)
            const selectedProduct = currentProduct[currentProduct.selectedIndex]
            const product = products.find(product => product.id === parseInt(selectedProduct.value))
            document.getElementById(`show_quantity_${selectedId}`).value = product.quantity
        }

        const isPatrimony = (event, selectedId) => {
            const currentProduct = document.getElementById(`product_${selectedId}`)
            const selectedProduct = currentProduct[currentProduct.selectedIndex]
            const product = products.find(product => product.id === parseInt(selectedProduct.value))
            const input = document.getElementById(`quantity_${selectedId}`)
            if (product.patrimonies) {
                input.type = "text"
                input.value = ""
                input.placeholder = "Ex: 001,002"
                const label = document.getElementById(`label_quantity_${selectedId}`)
                label.innerText = "Patrimônios"
                label.title = product.patrimonies.join(", ")
                return
            }
            input.type = "number"
            input.value = 0
            input.min = 0
            document.getElementById(`label_quantity_${selectedId}`).innerText = "Quantidade"
        }

        const createQuantity = (element, selectedId) => {
            const quantity = document.createElement("input")
            quantity.classList = "form-control remove-input remove-input-number-appearance"
            quantity.type = "number"
            quantity.disabled = true
            quantity.id = `show_quantity_${selectedId}`
            quantity.value = null
            quantity.style = " max-width: 150px; text-align: center; padding: 0.375rem 0 !important;"

            const label = document.createElement("label")
            label.classList = "form-label"
            label.innerText = "Estoque"

            const div = document.createElement("div")
            div.classList = "flex-column d-flex gap-1"
            div.style = ""

            div.appendChild(label)
            div.appendChild(quantity)
            element.appendChild(div)

        }
        const appendSelect = (id, text, title, element) => {
            const product = document.createElement('option')
            product.value = `${id}`
            product.innerText = text
            product.title = title

            element.appendChild(product)
        }

        const addDeleteButton = (element, id) => {
            const button = document.createElement('div')
            button.classList = "badge text-bg-danger  d-flex align-items-center justify-content-center"
            button.style.cursor = "pointer"
            button.style.height = "40px"
            button.innerHTML = '<i class="bi bi-trash3 p-x-4 p-y-1" style="font-size: 14px;"></i>'
            button.title = "Remover Produto"

            button.addEventListener(("click"), () => {
                element.remove()
            })
            element.appendChild(button)
        }

        function addProduct() {
            const currentId = id
            const productsDiv = document.createElement('div')
            productsDiv.classList = "w-100 flex-column flex-md-row  d-flex gap-3 p-2 align-items-end"

            const div = document.createElement('div')
            div.classList = "w-100 flex-column d-flex gap-1"
            div.style = ""

            const label = document.createElement('label')
            label.classList = "form-label"
            label.innerText = "Produto"

            const select = document.createElement('select')
            select.classList = "form-control w-100"
            select.id = `product_${currentId}`
            select.name = "product_id[]"
            appendSelect(
                "",
                "Selecione o Produto",
                "Selecione o Produto",
                select
            )

            for (let i = 0; i < products.length; i++) {

                appendSelect(products[i].id,
                    `${products[i].type.name} - ${products[i].brand.name} - ${products[i].model}`,
                    `${products[i].code_type}: ${products[i].product_code}`,
                    select)
            }

            div.appendChild(label)
            div.appendChild(select)
            productsDiv.appendChild(div)
            createQuantity(productsDiv, currentId)
            select.addEventListener("change", (event) => {
                verifySize(event, currentId)
                updateQuantity(event, currentId)
                isPatrimony(event, currentId)
            })

            const quantity = document.createElement("input")
            quantity.classList = "form-control w-100"
            quantity.style = "max-width: 150px; text-align: center;"
            quantity.type = "number"
            quantity.name = `quantity[]`
            quantity.id = `quantity_${id}`
            quantity.value = 0
            quantity.min = 0



            const divQuantity = document.createElement('div')
            divQuantity.classList = "flex-column d-flex gap-1"


            const labelQuantity = document.createElement('label')
            labelQuantity.classList = "form-label"
            labelQuantity.innerText = "Quantidade"
            labelQuantity.id = `label_quantity_${id}`

            quantity.addEventListener("change", () => verifySize(event, currentId))
            divQuantity.appendChild(labelQuantity)
            divQuantity.appendChild(quantity)
            productsDiv.appendChild(divQuantity)
            addDeleteButton(productsDiv)
            document.getElementById("products_section").appendChild(productsDiv)
            id++
        }

        document.getElementById("add_product").addEventListener("click",
            addProduct
        )

        function setValue(select_id, product_id, product_quantity) {
            const options = document.getElementById(`product_${select_id}`).options
            Array.from(options).forEach((product) => {
                if (product.value == product_id) product.selected = true
            })
            const product = products.find((product) => product.id === product_id)


            document.getElementById(`show_quantity_${select_id}`).value = product.quantity
            const quantity = document.getElementById(`quantity_${select_id}`)

            if (product.patrimonies.length === 0) {
                quantity.value = parseInt(product_quantity)
                return
            }

            quantity.type = "text"
            quantity.value = product_quantity
            const label = document.getElementById(`label_quantity_${select_id}`)
            label.innerText = "Patrimônios"
            label.title = product.patrimonies.join(", ")

        }
        @if (old('product_id'))
            @foreach (old('product_id') as $key => $product_id)
                addProduct()
                setValue({{ $key }}, {{ $product_id }}, "{{ old('quantity')[$key] }}")
            @endforeach
        @endif

        /* // Seleção para criação de Local
        document.getElementById('location_id').addEventListener('change', function() {
            const selectedOption = this.value;
            const createLocationDiv = document.getElementById('location-create');
            const newLocationInput = document.getElementById('new_location');

            if (selectedOption === 'create') {
                createLocationDiv.classList.remove('d-none');
                newLocationInput.classList.remove('d-none');
            } else {
                createLocationDiv.classList.add('d-none');
                newLocationInput.classList.add('d-none');
            }
        }); */

        // Seleção para criação de Local
        const selects = ["location_id"]

        function showInputElement(id) {
            const element = document.getElementById(id)
            const input = element.getElementsByTagName("input")[0]
            const label = element.getElementsByTagName("label")[0]
            input.disabled = false
            label.classList.remove("d-none")
            input.classList.remove("d-none")
            element.classList.remove("w-0")
            element.classList.add("w-100")
            element.classList.remove("opacity-0")
            element.classList.add("opacity-100")
        }

        function hideInputElement(id) {
            const element = document.getElementById(id)
            const input = element.getElementsByTagName("input")[0]
            const label = element.getElementsByTagName("label")[0]

            input.disabled = true
            label.classList.add("d-none")
            input.classList.add("d-none")
            element.classList.remove("w-100")
            element.classList.remove("opacity-100")
            element.classList.add("w-0")
            element.classList.add("opacity-0")
        }

        function showHiddenContent(id, event) {
            const element = document.getElementById(id)
            if (event.target.value === "create") {
                showInputElement(id)
                return
            }
            if (!element.disabled) {
                hideInputElement(id)
                return
            }
        }

        selects.forEach((select) => {
            document.getElementById(`location_id`).addEventListener("change", (e) => {
                showHiddenContent(`location-create`, e)

                if (select === "new_location") {
                    element = document.getElementById(`location-create`)
                    clearSelect()
                    if (!!e.target.value) {
                        if (e.target.value !== "create") {
                            element
                                .getElementsByTagName("input")[0].disabled = false
                        }
                        if (e.target.value !== "create") {
                            element
                                .getElementsByTagName("input")[0].disabled = true
                            fetchType(e.target.value)
                        }
                        return
                    }
                    element
                        .getElementsByTagName("input")[0].disabled = true
                }
            })
        })
    </script>
@endsection