@extends('admin.layouts.app')

@push('styles')
@endpush

@section('title', 'Editar Artigo ')

@section('content')
    <main class="page-content">
        @can('escrever-itens')
            <!--breadcrumb-->
            <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
                <div class="breadcrumb-title pe-3">Artigos</div>
                <div class="ps-3">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb mb-0 p-0">
                            <li class="breadcrumb-item"><a href="{{ route('inicio') }}"><i class="bx bx-home-alt"></i></a></li>
                            <li class="breadcrumb-item"><a href="{{ route('itens.index') }}">Itens</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Editar</li>
                        </ol>
                    </nav>
                </div>
            </div>
            <!--end breadcrumb-->

            <div class="card shadow-sm radius-10 border-0">
                <div class="card-body">
                    <form action="{{ route('itens.update', Crypt::encryptString($item->id)) }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')

                        <div class="row">
                            <div class="col-md-6">
                                <x-admin.components.form-group
                                    label="Nome"
                                    name="nome"
                                    :value="$item->nome"
                                    :required="true"
                                    placeholder="Digite o nome do artigo "
                                />
                            </div>
                            <div class="col-md-6">
                                <x-admin.components.form-group
                                    label="Ponto de Reposição"
                                    name="ponto_reposicao"
                                    type="number"
                                    :value="$item->ponto_reposicao"
                                    placeholder="Quantidade mínima"
                                />
                            </div>
                        </div>

                        @php
                            $categoriasOptions = \App\Models\Categoria::pluck('nome', 'id')->toArray();
                            $estadosOptions = ['activo' => 'Activo', 'inactivo' => 'Inactivo'];
                        @endphp

                        <div class="row">
                            <div class="col-md-6">
                                <x-admin.components.form-group
                                    label="Categoria"
                                    name="categoria_id"
                                    type="select"
                                    :value="$item->categoria_id"
                                    :required="true"
                                    :options="$categoriasOptions"
                                />
                            </div>
                            <div class="col-md-6">
                                <x-admin.components.form-group
                                    label="Modelo"
                                    name="modelo"
                                    :value="$item->modelo"
                                    placeholder="Digite o modelo"
                                />
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <x-admin.components.form-group
                                    label="Marca"
                                    name="marca"
                                    :value="$item->marca"
                                    placeholder="Digite a marca"
                                />
                            </div>
                            <div class="col-md-6">
                                <x-admin.components.form-group
                                    label="Data Limite Desvalorização"
                                    name="data_limite_desvalorizacao"
                                    type="date"
                                    :value="$item->data_limite_desvalorizacao ? $item->data_limite_desvalorizacao->format('Y-m-d') : ''"
                                />
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <x-admin.components.form-group
                                    label="Código de Barras"
                                    name="codigo_barras"
                                    :value="$item->codigo_barras"
                                    placeholder="Digite o código de barras"
                                />
                            </div>
                            <div class="col-md-6">
                                <x-admin.components.form-group
                                    label="Estado"
                                    name="estado"
                                    type="select"
                                    :value="$item->estado"
                                    :required="true"
                                    :options="$estadosOptions"
                                />
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                <x-admin.components.form-group
                                    label="Unidade de Medida"
                                    name="unidade_medida"
                                    :value="$item->unidade_medida"
                                    :required="true"
                                    placeholder="Ex: un, kg, l"
                                />
                            </div>
                        </div>

                        <x-admin.components.form-group
                            label="Descrição"
                            name="descricao"
                            type="textarea"
                            :value="$item->descricao"
                            rows="4"
                            placeholder="Digite a descrição do artigo "
                        />

                        <div class="mb-3">
                            <label class="form-label">Imagem do Artigo  (máx 2MB)</label>
                            <div id="imagem-dropzone" class="border p-3" style="min-height:120px; background:#f8f9fa; border-radius:4px;">
                                <div class="dz-message text-muted">Arraste a imagem para aqui ou clique para escolher</div>
                            </div>
                            <input type="hidden" name="imagem_path" id="imagem-path" value="{{ $item->imagem ?? '' }}">
                            <input type="hidden" name="imagem_remove" id="imagem-remove" value="0">
                        </div>

                        <div class="d-flex gap-2">
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-save"></i> Atualizar
                            </button>
                            <a href="{{ route('itens.show', Crypt::encryptString($item->id)) }}" class="btn btn-secondary">
                                <i class="bi bi-x-circle"></i> Cancelar
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        @else
            <div class="alert alert-danger">
                Não tem permissão para editar itens.
            </div>
        @endcan
    </main>
@endsection

@push('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.js"></script>
    <script>
        Dropzone.autoDiscover = false;
        (function () {
            var dzEl = document.getElementById('imagem-dropzone');
            var imagemPathInput = document.getElementById('imagem-path');
            var imagemRemoveInput = document.getElementById('imagem-remove');

            var dz = new Dropzone(dzEl, {
                url: '{{ route('itens.upload-imagem') }}',
                headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                paramName: 'file',
                maxFiles: 1,
                maxFilesize: 2, // MB
                acceptedFiles: 'image/*',
                addRemoveLinks: true,
                autoProcessQueue: true,
            });

            // exibir imagem existente se houver
            @if($item->imagem)
                (function(){
                    var mockFile = { name: 'imagem_existente', size: 0, accepted: true };
                    dz.emit('addedfile', mockFile);
                    dz.emit('thumbnail', mockFile, '{{ $item->imagem_url }}');
                    dz.files.push(mockFile);
                })();
            @endif

            dz.on('success', function(file, resp) {
                if (resp && resp.path) {
                    imagemPathInput.value = resp.path;
                    imagemRemoveInput.value = 0;
                    file.uploadedPath = resp.path;
                }
            });

            dz.on('removedfile', function(file) {
                // se arquivo tinha sido enviado via AJAX, solicitar remoção imediata
                if (file && file.uploadedPath) {
                    fetch('{{ route('itens.delete-upload') }}', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        body: JSON.stringify({ path: file.uploadedPath })
                    }).then(function(resp){
                        // ignorar resposta
                    }).catch(function(){ /* ignore */ });

                    imagemPathInput.value = '';
                    imagemRemoveInput.value = 1;
                    return;
                }

                // Caso seja mock (imagem existente), apenas marcar remoção; o controller fará a deleção quando atualizar
                imagemPathInput.value = '';
                imagemRemoveInput.value = 1;
            });
        })();
    </script>
@endpush