@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">{{ __('Criar Produto') }} </div>
                    <div class="card-body">
                        <form action="{{ route('product.store') }}" class="d-flex flex-wrap w-100" method="post"
                            enctype="multipart/form-data">
                            @csrf
                            <div class="d-flex flex-wrap w-100">
                                <div class="w-lg-50 w-100 flex-column flex-md-row  d-flex gap-3 p-2">
                                    <div class="w-100 ">
                                        <label for="picture" class="w-100 h-100">
                                            <p class="pb-2 m-0">Foto</p>
                                            <div
                                                class="position-relative  w-100 h-50  form-control @error('photo') border-danger @enderror">
                                                <p class="text-center position-relative w-100"
                                                    style="z-index: 0; top: 50%; transform: translateY(-50%);"
                                                    id="select-photo">
                                                    Selecione
                                                    uma Foto </p>
                                                <img src="#" id="img-preview" alt="Foto do produto"
                                                    class="d-none w-100 h-100"
                                                    style="width: 50px; height: 50px; z-index: 10;" />
                                            </div>
                                        </label>
                                        <div class="input-group  d-none">
                                            <input type="file" name="photo" id="picture"
                                                accept="image/png, image/jpeg" value="{{ old('photo') }}" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="w-lg-50 w-100 flex-column flex-md-row  d-flex gap-3 p-2">
                                <div class="w-100">

                                    <label for="product_category_id" class="form-label">Categoria</label>
                                    <select type="text" name="product_category_id"
                                        class="form-control w-100 @error('product_category_id') border-danger @endif"
                                        id="product_category_id">
                                        <option value="">Selecione uma Categoria</option>
                                        <option @if (old('product_category_id') === 'create') selected @endif value="create">Criar
                                            Categoria</option>
                                        @foreach ($categories as $category)
                                            <option @if (old('product_category_id') === "$category->id") selected @endif
                                                value="{{ $category->id }}">{{ $category->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="w-0 opacity-0 transitions-hidden" id="category-create">
                                    <label for="category" class="form-label d-none ">Criar
                                        Categoria</label>
                                        <input type="text" name="category" class="form-control w-100  d-none @error('category') border-danger @enderror"
                                        id="category" value="{{ old('category') }}" disabled />
                                </div>
                            </div>
                            <div class="w-lg-50 w-100 d-flex flex-column flex-md-row gap-3 p-2">
                                <div class="w-100 ">
                                    <label for="product_type_id" class="form-label">Tipo</label>
                                    <select name="product_type_id"
                                        class="form-control w-100 @error('product_type_id') border-danger @enderror"
                                        id="product_type_id">
                                        <option value="">Selecione um tipo</option>
                                        <option @if (old('product_type_id') === 'create') selected @endif value="create" disabled>
                                            Criar um
                                            novo</option>
                                    </select>
                                </div>
                                <div class="w-0 opacity-0 transitions-hidden" id="type-create">
                                    <label for="type" class="form-label d-none">Criar
                                        Tipo</label>
                                    <input type="text" name="type"
                                        class="form-control w-100  d-none @error('type') border-danger @enderror"
                                        id="type" value="{{ old('type') }}" disabled />
                                </div>
                            </div>
                            <div class="w-lg-50 w-100 flex-column flex-md-row d-flex gap-3 p-2">
                                <div class="w-100">
                                    <label for="product_brand_id" class="form-label">Marca</label>
                                    <select type="text" name="product_brand_id"
                                        class="form-control w-100 @error('product_brand_id') border-danger @enderror"
                                        id="product_brand_id">
                                        <option value="">Selecione uma Marca</option>
                                        <option @if (old('product_brand_id') === 'create') selected  @endif value="create">Criar Marca
                                        </option>
                                        @foreach ($brands as $brand)
                                            <option @if (old('product_brand_id') === "$brand->id")  selected @elseif($brand->name === 'Sem marca') selected @endif
                                                value="{{ $brand->id }}">{{ $brand->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="w-0 opacity-0 transitions-hidden" id="brand-create">
                                    <label for="brand"
                                        class="form-label  d-none @error('brand') border-danger @enderror">Criar
                                        Marca</label>
                                    <input type="text" name="brand" class="form-control w-100  d-none" id="brand"
                                        value="{{ old('brand') }}" disabled />
                                </div>
                            </div>
                            <div class="w-lg-50 w-100 d-flex flex-column flex-md-row gap-3 p-2">
                                <div class="w-100 ">
                                    <label for="product_supplier_id" class="form-label">Fornecedor</label>
                                    <select name="product_supplier_id"
                                        class="form-control w-100 @error('product_supplier_id') border-danger @enderror"
                                        id="product_supplier_id">
                                        <option value="">Selecione um fornecedor</option>
                                        <option @if (old('product_supplier_id') === 'create') selected @endif value="create">Criar um
                                            fornecedor</option>
                                        @foreach ($suppliers as $supplier)
                                            <option @if (old('product_supplier_id') === "$supplier->id") selected  @elseif($supplier->name === "Sem fornecedor") selected @endif
                                                value="{{ $supplier->id }}">{{ $supplier->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="w-0 opacity-0 transitions-hidden" id="supplier-create">
                                    <label for="supplier"
                                        class="form-label  d-none @error('supplier') border-danger @enderror">Criar
                                        fornecedor</label>
                                    <input type="text" name="supplier" class="form-control w-100  d-none" id="supplier"
                                        value="{{ old('supplier') }}" disabled />
                                </div>
                            </div>

                            <div class="w-lg-50 w-100 d-flex flex-column flex-md-row gap-3 p-2">
                                <div class="w-100">
                                    <label for="model" class="form-label">Modelo</label>
                                    <input type="text" name="model"
                                        class="form-control w-100 @error('model') border-danger @enderror" id="model"
                                        value="{{ old('model') }}" placeholder="Modelo 00-00" />
                                </div>
                            </div>
                            <div class="w-lg-50 w-100 d-flex flex-column flex-md-row gap-3 p-2">
                                <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 class="w-100 d-flex flex-column flex-md-row  gap-3 p-2">
                                <div class="w-25 d-flex flex-column gap-3">
                                    <label class="form-label">Patrimônio</label>
                                    <div class="d-flex gap-3">
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="code_type"
                                                id="hasPatrimony" value="patrimonio" checked>
                                            <label class="form-check-label" for="hasPatrimony">Sim</label>
                                        </div>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="code_type"
                                                id="dontHavePatrimony" value="controle">
                                            <label class="form-check-label" for="dontHavePatrimony">Não</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="w-100" id="product-code-container">
                                    <label for="product-code" class="form-label" id="product-code-label">Número do
                                        Patrimônio</label>
                                    <input type="text" name="product_code"
                                        class="form-control w-100 @error('product_code') border-danger @enderror"
                                        value="{{ old('product_code') }}" placeholder="Exemplos: 0001,0002,0003"
                                        title="Digite os patrimônios separados por vírgula para adicionar mais de multiplos itens"
                                        id="product-code" />
                                </div>


                            </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">
                                    Salvar
                                </button>
                                <a class="btn btn-primary m-2" href="{{ url()->previous() }}" type="button">
                                    Voltar
                                </a>
                            </div>

                            <div class="w-100 d-flex flex-column flex-md-row  gap-3 p-2" id="quantity-container"
                                style="opacity: 0">
                                <div class="w-25 d-flex flex-column gap-3">
                                    <label class="form-label">Quantidade</label>
                                    <div class="d-flex gap-3">
                                        <input type="number" name="quantity"
                                            class="form-control w-100 @error('quantity') border-danger @enderror"
                                            min="1" value="{{ old('quantity') ?? 1 }}" id="quantity" />
                                    </div>
                                </div>
                            </div>
                            <div class="w-100 d-flex flex-column p-2">
                                <label for="description" class="form-label">Condição</label>
                                <textarea type="text" name="condition" class="form-control no-resize @error('condition') border-danger @enderror"
                                    placeholder="" rows="5" id="condition"></textarea>
                            </div>
                            <div class="w-100 d-flex flex-column p-2">
                                <label for="description" class="form-label">Descrição</label>
                                <textarea type="text" name="description"
                                    class="form-control no-resize @error('description') border-danger @enderror" placeholder="" rows="5"
                                    id="description"></textarea>
                            </div>
                            <div class="w-100 d-flex flex-column p-2">
                                <label for="comments" class="form-label">Observação</label>
                                <textarea type="text" name="comments" class="form-control no-resize @error('comments') border-danger @enderror"
                                    placeholder="" rows="10" id="comments"></textarea>
                            </div>
                            
                        </form>

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

        </div>
    </div>
    <script async>
        function clearSelect() {
            const select = document.getElementById("product_type_id")
            select.options[select.selectedIndex].value === "create" ? select.options[1].disabled = true : select.options[1]
                .disabled = false
            Array.from(select).forEach((item) => {
                if (item.innerText.includes("Selecione")) {

                    return
                }
                if (item.value === 'create') {
                    return
                }
                item.remove()
            })

        }

        function fetchType(id, selected) {
            clearSelect()
            const select = document.getElementById("product_type_id")

            fetch(`{{ route('ajax.types-category') }}?id=${id}`, {
                    method: "get",
                    mode: 'cors',
                    cache: "no-cache",
                })
                .then(data => data.json())
                .then(data => {
                    data.map((item) => {
                        select.options[1].disabled = false
                        const element = document.createElement("option")
                        if (selected === item.id) element.selected = true
                        element.value = item.id
                        element.innerText = item.name
                        select.appendChild(element)
                    })
                });
        }

        const radioInputs = document.getElementsByName("code_type")
        const values = {
            patrimonio: "Patrimônio",
            controle: "Controle"
        }
        radioInputs.forEach((radio) => {
            radio.addEventListener('change', (e) => {
                document.getElementById("product-code-label").innerText =
                    `Número do ${values[e.target.value]}`
                const input = document.getElementById("product-code")

                if (e.target.value === Object.keys(values)[0]) {
                    document.getElementById("quantity-container").style.opacity = 0
                    input.placeholder = "Exemplos: 0001,0002,0003"
                    title =
                        "Digite os patrimônios separados por vírgula para adicionar mais de multiplos itens"
                    input.title =
                        "Digite os patrimônios separados por vírgula para adicionar mais de multiplos itens"
                } else {
                    input.placeholder = "000001"
                    input.title = ""
                    document.getElementById("quantity-container").style.opacity = 1
                }
            })
        })

        // Seleção para criação
        const selects = ["category", "type", "brand", "supplier"]

        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(`product_${select}_id`).addEventListener("change", (e) => {
                showHiddenContent(`${select}-create`, e)

                if (select === "category") {
                    element = document.getElementById(`${select}-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
                }
            })
        })

        // Prévia da foto

        function previewImage() {
            const [file] = document.getElementById("picture").files
            const img = document.getElementById("img-preview")
            const selectPhoto = document.getElementById("select-photo")

            if (file) {
                const size = Math.round((file.size / 1024))

                img.src = URL.createObjectURL(file)
                img.classList.remove("d-none")
                selectPhoto.classList.add("d-none")
                return
            }
            img.src = "#"
            img.classList.add("d-none")
            selectPhoto.classList.remove("d-none")
        }
        document.getElementById("picture").addEventListener("change", (e) => {
            previewImage()
        })
        @foreach (old() as $key => $old)
            @if ($old === 'create')
                showInputElement('{{ $id = explode('_', $key)[1] }}-create')
            @endif
        @endforeach
        @if (old('product_category_id'))
            clearSelect()
            fetchType({{ old('product_category_id') }}, {{ old('product_type_id') }})
        @endif
        {{ old('photo') }}

        // Seleção para criação de Local
        const locationSelect = ["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
            }
        }

        locationSelect.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