@extends('admin.layouts.app')

@push('styles')
@endpush

@section('title', 'Nova Requisição Interna')

@section('content')
    <main class="page-content">
        @can('escrever-requisicoes-internas')
            <!--breadcrumb-->
            <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
                <div class="breadcrumb-title pe-3">Requisições Internas</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('requisicoes.index') }}">Requisições Internas</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Nova Requisição</li>
                        </ol>
                    </nav>
                </div>
            </div>
            <!--end breadcrumb-->

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

                        <x-admin.components.form-group
                            label="Motivo"
                            name="motivo"
                            type="textarea"
                            rows="3"
                            placeholder="Digite o motivo da requisição"
                        />

                        <x-admin.components.form-group
                            label="Observações"
                            name="observacoes"
                            type="textarea"
                            rows="3"
                            placeholder="Digite as observações"
                        />

                        <hr class="my-4">

                        <h5 class="mb-3">Artigos da Requisição</h5>

                        <div id="itens-container">
                            <div class="item-row mb-3" data-index="0">
                                <div class="row">
                                    <div class="col-md-5">
                                        <label class="form-label">Item <span class="text-danger">*</span></label>
                                        <select name="itens[0][item_id]" class="form-select" required>
                                            <option value="">Selecione um artigo ...</option>
                                            @foreach(\App\Models\Item::where('estado', 'activo')->orderBy('nome')->get() as $item)
                                                <option value="{{ $item->id }}">{{ $item->nome }} ({{ $item->numero_item }})</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label">Quantidade Solicitada <span class="text-danger">*</span></label>
                                        <input type="number" name="itens[0][quantidade_solicitada]" class="form-control" min="1" required>
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label">Observações</label>
                                        <input type="text" name="itens[0][observacoes]" class="form-control" placeholder="Opcional">
                                    </div>
                                    <div class="col-md-1 d-flex align-items-end">
                                        <button type="button" class="btn btn-danger btn-sm remove-item" style="display: none;">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <button type="button" id="add-item" class="btn btn-success btn-sm mb-3">
                            <i class="bi bi-plus-circle"></i> Adicionar Artigo
                        </button>

                        <div class="d-flex gap-2">
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-save"></i> Salvar
                            </button>
                            <a href="{{ route('requisicoes.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 requisições internas.
            </div>
        @endcan
    </main>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        let artigo Index = 1;
        const container = document.getElementById('itens-container');
        const addButton = document.getElementById('add-item');

        // Inicializar select2 no select inicial
        initializeSelect2();

        addButton.addEventListener('click', function() {
            const newRow = document.createElement('div');
            newRow.className = 'item-row mb-3';
            newRow.setAttribute('data-index', artigo Index);
            newRow.innerHTML = `
                <div class="row">
                    <div class="col-md-5">
                        <label class="form-label">Item <span class="text-danger">*</span></label>
                        <select name="itens[${itemIndex}][item_id]" class="form-select artigo -select" required>
                            <option value="">Selecione um artigo ...</option>
                            @foreach(\App\Models\Item::orderBy('nome')->get() as $item)
                                <option value="{{ $item->id }}">{{ $item->nome }} ({{ $item->numero_item }})</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Quantidade Solicitada <span class="text-danger">*</span></label>
                        <input type="number" name="itens[${itemIndex}][quantidade_solicitada]" class="form-control" min="1" required>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Observações</label>
                        <input type="text" name="itens[${itemIndex}][observacoes]" class="form-control" placeholder="Opcional">
                    </div>
                    <div class="col-md-1 d-flex align-items-end">
                        <button type="button" class="btn btn-danger btn-sm remove-item">
                            <i class="bi bi-trash"></i>
                        </button>
                    </div>
                </div>
            `;
            container.appendChild(newRow);
            artigo Index++;

            // Inicializar select2 no novo select adicionado
            initializeSelect2();
            updateRemoveButtons();
        });

        container.addEventListener('click', function(e) {
            if (e.target.closest('.remove-item')) {
                const row = e.target.closest('.item-row');
                const select = row.querySelector('select');

                // Destruir a instância do select2 antes de remover
                if ($(select).data('select2')) {
                    $(select).select2('destroy');
                }

                row.remove();
                updateRemoveButtons();
            }
        });

        function initializeSelect2() {
            $('.item-select, select[name^="itens"][name$="[item_id]"]').each(function() {
                if (!$(this).data('select2')) {
                    $(this).select2({
                        theme: 'bootstrap-5',
                        width: '100%',
                        placeholder: 'Selecione um artigo ...',
                        allowClear: true,
                        language: {
                            noResults: function() {
                                return "Nenhum artigo encontrado";
                            },
                            searching: function() {
                                return "Pesquisando...";
                            }
                        }
                    });
                }
            });
        }

        function updateRemoveButtons() {
            const rows = container.querySelectorAll('.item-row');
            rows.forEach((row, index) => {
                const removeBtn = row.querySelector('.remove-item');
                if (removeBtn) {
                    removeBtn.style.display = rows.length > 1 ? 'block' : 'none';
                }
            });
        }

        updateRemoveButtons();
    });
</script>
@endpush