@extends('admin.layouts.app')

@push('styles')
@endpush

@section('title', 'Novo 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">Novo Artigo </li>
                        </ol>
                    </nav>
                </div>
            </div>
            <!--end breadcrumb-->

            <div class="card shadow-sm radius-10 border-0">
                <div class="card-body">
                    <form action="{{ route('itens.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf

                        <div class="row">
                            <div class="col-md-6">
                                <x-admin.components.form-group label="Nome" name="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"
                                    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"
                                    :required="true" :options="$categoriasOptions" />
                            </div>
                            <div class="col-md-6">
                                <x-admin.components.form-group label="Modelo" name="modelo" placeholder="Digite o modelo" />
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <x-admin.components.form-group label="Marca" name="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" />
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <x-admin.components.form-group label="Código de Barras" name="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" :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" :required="true"
                                    placeholder="Ex: un, kg, l" />
                            </div>
                        </div>

                        <x-admin.components.form-group label="Descrição" name="descricao" type="textarea" 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="">
                            <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> Salvar
                            </button>
                            <a href="{{ route('itens.index') }}" 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 criar 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,
            });

            dz.on('success', function(file, resp) {
                if (resp && resp.path) {
                    imagemPathInput.value = resp.path;
                    imagemRemoveInput.value = 0;
                    // guardar path no objeto file para deletar caso o utilizador remova antes de submeter
                    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; opcionalmente mostrar mensagem
                    }).catch(function() {
                        /* ignore */ });

                    // limpar campo oculto
                    imagemPathInput.value = '';
                    imagemRemoveInput.value = 1;
                    return;
                }

                // fallback: limpar valor oculto
                imagemPathInput.value = '';
                imagemRemoveInput.value = 1;
            });
        })();
    </script>
@endpush