@extends('admin.layouts.app')

@push('styles')
@endpush

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

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

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

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

                        <hr class="my-4">

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

                        <div id="itens-container">
                            @forelse($requisicao->itens as $index => $requisicaoItem)
                                <div class="item-row mb-3" data-index="{{ $index }}">
                                    <div class="row">
                                        <div class="col-md-5">
                                            <label class="form-label">Item <span class="text-danger">*</span></label>
                                            <select name="itens[{{ $index }}][item_id]" class="form-select" required>
                                                <option value="">Selecione um artigo ...</option>
                                                @foreach(\App\Models\Item::orderBy('nome')->get() as $item)
                                                    <option value="{{ $item->id }}" {{ $requisicaoItem->item_id == $item->id ? 'selected' : '' }}>
                                                        {{ $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[{{ $index }}][quantidade_solicitada]" class="form-control" min="1" value="{{ $requisicaoItem->quantidade_solicitada }}" required>
                                        </div>
                                        <div class="col-md-3">
                                            <label class="form-label">Observações</label>
                                            <input type="text" name="itens[{{ $index }}][observacoes]" class="form-control" value="{{ $requisicaoItem->observacoes }}" placeholder="Opcional">
                                        </div>
                                        <div class="col-md-1 d-flex align-items-end">
                                            <button type="button" class="btn btn-danger btn-sm remove-item" {{ $index == 0 ? 'style=display:none;' : '' }}>
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            @empty
                                <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::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>
                            @endforelse
                        </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> Atualizar
                            </button>
                            <a href="{{ route('requisicoes.show', Crypt::encryptString($requisicao->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 requisições internas.
            </div>
        @endcan
    </main>
@endsection

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

        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" 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++;
            updateRemoveButtons();
        });

        container.addEventListener('click', function(e) {
            if (e.target.closest('.remove-item')) {
                e.target.closest('.item-row').remove();
                updateRemoveButtons();
            }
        });

        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