@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">{{ __('Editar Movimentação') }}</div>
                    <div class="card-body">
                        <form action="{{ route('movement.update', $movement->id) }}" class="d-flex flex-wrap w-100"
                            method="post">
                            @csrf
                            @method('PUT')
                            <div class="w-100">
                                <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">Autor</label>
                                        <input type="text" name="product_id" class="form-control" id="validationCustom01"
                                            value="{{ $movement->author->name }}" disabled>
                                    </div>
                                    <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="{{ $movement->recipient_id }}">{{ $movement->recipient->name ?? '' }}</option>
                                        <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" disabled>
                                        <option value="">Selecione um tipo</option>
                                            @foreach ($types as $key => $type)
                                            <option @if (old('type_action') === $key) selected @elseif ($movement->type == $key) selected @endif
                                                value="{{ $key }}">{{ $type }}</option>
                                            @endforeach
                                    </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="{{ $movement->location_id }}">{{ $movement->location->name ?? '' }}</option>
                                        <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 class="w-100 flex-column d-flex gap-3 p-2" id="products_section">

                                </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>


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

                    </div>
                </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.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 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)
            })

            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"

            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
            })

            document.getElementById(`quantity_${select_id}`).value = product_quantity
            const storage = products.find((product) => product.id === product_id).quantity
            document.getElementById(`show_quantity_${select_id}`).value = storage

        }
        @if (old('product_id'))
            @foreach (old('product_id') as $key => $product_id)
                addProduct()
                setValue({{ $key }}, {{ $product_id }}, {{ old('quantity')[$key] }})
            @endforeach
        @else
            @foreach ($movement->movement_products as $key => $movementDetail)
                addProduct()
                setValue({{ $key }}, {{ $movementDetail->product->id }}, {{ $movementDetail->quantity }})
            @endforeach
        @endif

        // 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 === "create") {
                    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