@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">{{ __('Visualizar Produto') }}
                       <div> 
                            <a class="badge text-bg-primary"
                                style="float: right; font-size: 15px; margin-top: -15px; margin-right: 10px;"
                                href="{{ route('product.edit', $product->id) }}" title="Editar">
                                <i class="bi bi-pencil-square"></i>
                            </a>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="col-md-4 mb-3">
                            <label for="validationCustom08" class="form-label">Foto</label>
                            <div class="input-group">
                                <img src="{{ $product->photo ? asset('storage' . $product->photo) : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/w8AAwAB/0AZRRMAAAAASUVORK5CYII=' }}"
                                    id="img-preview" alt="Foto do produto"
                                    class="w-100 h-100 {{ !$product->photo ? 'd-none' : '' }}"
                                    style="width: 100px; height: 100px; z-index: 10;" disabled />
                                <div id="no-photo-placeholder" class="text-center {{ $product->photo ? 'd-none' : '' }}"
                                    style="width: 100px; height: 100px; background-color: #ccc; color: #fff; line-height: 100px;"
                                    disabled>
                                    Sem foto</div>
                            </div>
                            <div class="valid-feedback">
                                Tudo ok!
                            </div>
                        </div>

                        <div class="row g-3">
                            <div class="col-md-4">
                                <label for="validationCustom01" class="form-label">Categoria</label>
                                <input type="text" name="product_category_id" class="form-control"
                                    id="validationCustom01" value="{{ $product->type->category->name }}" disabled>
                                <div class="valid-feedback">
                                    Tudo ok!
                                </div>
                            </div>
                            <div class="col-md-4">
                                <label for="validationCustom02" class="form-label">Tipo</label>
                                <input type="text" name="product_type_id" class="form-control" id="validationCustom02"
                                    value="{{ $product->type->name }}" disabled>
                                <div class="valid-feedback">
                                    Tudo ok!
                                </div>
                            </div>
                            <div class="col-md-4">
                                <label for="validationCustom03" class="form-label">Marca</label>
                                <input type="text" name="product_brand_id" class="form-control" id="validationCustom03"
                                    value="{{ $product->brand->name }}" disabled>
                                <div class="invalid-feedback">
                                    Por favor informe a marca.
                                </div>
                            </div>
                        </div>
                        <div class="row g-3 mt-3">
                            <div class="col-md-4">
                                <label for="validationCustom04" class="form-label">Fornecedor</label>
                                <input type="text" name="product_supplier_id" class="form-control"
                                    id="validationCustom04" value="{{ $product->supplier->name }}" disabled>
                                <div class="valid-feedback">
                                    Tudo ok!
                                </div>
                            </div>
                            <div class="col-md-4">
                                <label for="validationCustom04" class="form-label">Modelo</label>
                                <input type="text" name="model" class="form-control" id="validationCustom04"
                                    value="{{ $product->model }}" disabled>
                                <div class="valid-feedback">
                                    Tudo ok!
                                </div>
                            </div>
                            <div class="col-md-4">
                                <label for="recipient_id" class="form-label">Local</label>
                                <input type="text" name="location_id" class="form-control" id="validationCustom01"
                                    value="{{ $product->location->name }}" disabled>
                                <div class="valid-feedback">
                                    Tudo ok!
                                </div>
                            </div>
                        </div>
                        <div class="row g-3 mt-3">
                            <div class="col-md-4">
                                <div class="col">
                                    <label for="validationCustom07" class="form-label">Patrimônio</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="code_type" id="hasPatrimony"
                                        value="patrimonio" {{ $product->items->count() > 0 ? 'checked' : '' }} disabled>
                                    <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" {{ $product->batch ? 'checked' : '' }}
                                        disabled>
                                    <label class="form-check-label" for="dontHavePatrimony">Não</label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label" id="product-code-label">Número do
                                    {{ $product->items->count() > 0 ? 'Patrimônio' : 'Controle' }}</label>
                                @if ($product->batch)
                                    <input type="text"
                                        name="product_code"class="form-control w-100 @error('product_code') border-danger @enderror"
                                        value="{{ $product->batch }}" id="product-code" disabled />
                                @elseif($product->items->count() > 0)
                                    <div class="w-100 d-flex flex-column">
                                        <textarea type="text" name="product_code"class="form-control w-100 @error('product_code') border-danger @enderror"
                                            rows="5" id="product-code" disabled>
@foreach ($product->items as $item)
Patrimônio: {{ $item->patrimony }} - Adicionado em: {{ $item->created_at->format('d/m/Y') }}
@endforeach
</textarea>
                                    </div>
                                @endif
                            </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">Quantidade</label>
                                <div class="d-flex gap-3">
                                    <input type="number" name="quantity"
                                        class="form-control w-100 @error('quantity') border-danger @enderror"
                                        value="{{ $product->quantity }}" id="quantity" disabled />
                                </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" disabled>{{ $product->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" disabled>{{ $product->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" disabled>{{ $product->comments }}</textarea>
                        </div>
                        <div class="card-body">
                            <h2 class="text-center">Últimas Movimentações</h2>
                            <table class="table table-striped table-hover">
                                <thead class="table-dark">
                                    <tr class="text-center">
                                        <th scope="col"></th>
                                        <th scope="col">Data</th>
                                        <th scope="col">Author</th>
                                        <th scope="col">Beneficiario</th>
                                        <th scope="col">Tipo</th>
                                        <th scope="col">Quantidade</th>
                                        <th scope="col">Local</th>
                                    </tr>
                                </thead>
                                <tbody class="table-group-divider">
                                    @foreach ($movements as $movement)
                                        <tr class="text-center">
                                            <td scope="col" title="Detalhes">
                                                <a href="{{ route('movement.show', $movement->movement->id) }}">
                                                    📒
                                                    {{-- <i class="bi bi-journal-text"></i> --}}
                                                </a>
                                            </td>
                                            <td scope="col">
                                                {{ $movement->movement->created_at->format('d/m/Y') }}
                                            </td>
                                            <td scope="col">{{ $movement->movement->author->name }}</td>
                                            <td scope="col">{{ $movement->movement->recipient->name ?? '-' }}</td>
                                            <td scope="col">{{ __('moviment.' . $movement->movement->type) }}</td>
                                            <td scope="col">{{ $movement->qtd }}
                                            </td>
                                            <td scope="col">{{ $movement->movement->location->name ?? '-' }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        <div class="col-12 col text-center mt-5">
                            <a class="btn btn-primary m-2" style="float: center;" href="{{ url()->previous() }}"
                                type="button">
                                Voltar
                            </a>
                        </div>
                    </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    </div>

    <script async>
        // Prévia da foto

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

            if (file) {
                img.src = URL.createObjectURL(file);
                img.classList.remove("d-none");
                noPhotoPlaceholder.classList.add("d-none");
                selectPhoto.classList.add("d-none");
                return;
            }

            img.src = "#";
            img.classList.add("d-none");
            noPhotoPlaceholder.classList.remove("d-none");
            selectPhoto.classList.remove("d-none");
        }

        document.addEventListener("DOMContentLoaded", function() {
            previewImage();
        });

        document.getElementById("picture").addEventListener("change", () => {
            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') }}
    </script>
@endsection