@php
$title = 'Nova Movimentação';
@endphp

<div class="container-fluid pt-1" style="margin-top: -32px;">
    <nav aria-label="breadcrumb" class="mb-2" style="margin-top: -18px;">
        <ol class="breadcrumb bg-transparent px-0 py-1 mb-1" style="font-size: 0.98rem;">
            <li class="breadcrumb-item"><a href="/" class="text-decoration-none text-secondary">Início</a></li>
            <li class="breadcrumb-item"><a href="#" onclick="carregarConteudo(`{{ route('suprimentos.estoque') }}`)" class="text-decoration-none text-secondary">Estoque</a></li>
            <li class="breadcrumb-item"><a href="#" onclick="carregarConteudo(`{{ route('suprimentos.movimentacoes') }}`)" class="text-decoration-none text-secondary">Movimentações</a></li>
            <li class="breadcrumb-item active text-dark" aria-current="page">Nova</li>
        </ol>
    </nav>
    
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="fw-bold mb-0" style="font-size:2.1rem; letter-spacing:1px;">
            <i class="bi bi-plus-circle me-2 text-success"></i>Nova Movimentação
        </h1>
        <button type="button" class="btn btn-sm btn-outline-secondary" onclick="carregarConteudo(`{{ route('suprimentos.movimentacoes') }}`)">
            <i class="bi bi-arrow-left me-2"></i>Voltar
        </button>
    </div>

    <form id="formNovaMovimentacao">
        @csrf
        
        <div class="card shadow border-0 mb-4">
            <div class="card-header bg-white border-0 pb-1">
                <span class="fw-bold">Dados da Movimentação</span>
            </div>
            <div class="card-body">
                <div class="row mb-3">
                    <div class="col-md-3">
                        <label for="tipo_movimentacao" class="form-label">Tipo <span class="text-danger">*</span></label>
                        <select class="form-select" id="tipo_movimentacao" name="dados[tipo_movimentacao]" required>
                            <option value="">Selecione...</option>
                            <option value="ENTRADA">Entrada</option>
                            <option value="SAIDA">Saída</option>
                            <option value="AJUSTE">Ajuste</option>
                            <option value="TRANSFERENCIA">Transferência</option>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label for="produto_id" class="form-label">Produto <span class="text-danger">*</span></label>
                        <select class="form-select produto-select-movimentacao" id="produto_id" name="dados[produto_id]" required>
                            <option value="">Buscar produto...</option>
                            @foreach($produtos as $produto)
                                <option value="{{ $produto->id }}">{{ $produto->nome }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label for="data_movimentacao" class="form-label">Data <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <input type="text" class="form-control datepicker" id="data_movimentacao"
                                style="z-index: 1 !important;"
                                name="dados[data_movimentacao]"
                                data-mask="date"
                                readonly
                                required>
                            <span class="input-group-text"><i class="bi bi-calendar3"></i></span>
                        </div>
                    </div>
                </div>

                <div class="row mb-3">
                    <div class="col-md-4">
                        <label for="localizacao_id" class="form-label">Localização <span class="text-danger">*</span></label>
                        <select class="form-select" id="localizacao_id" name="dados[localizacao_id]" required>
                            <option value="">Selecione...</option>
                            @foreach($localizacoes as $localizacao)
                                <option value="{{ $localizacao->id }}">
                                    {{ $localizacao->nome }} ({{ $localizacao->tipo }})
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label for="quantidade" class="form-label">Quantidade <span class="text-danger">*</span></label>
                        <input type="number" class="form-control" id="quantidade" name="dados[quantidade]" min="1" step="1" placeholder="0" required>
                        <small class="text-muted">Apenas valores inteiros</small>
                    </div>
                    <div class="col-md-6">
                        <label for="origem" class="form-label">Origem da Movimentação</label>
                        <input type="text" class="form-control" id="origem" name="dados[origem]" placeholder="Ex: VD00000001, CP00000001, etc.">
                    </div>
                </div>

                <div class="row mb-3" id="rowTransferencia" style="display: none;">
                    <div class="col-md-6">
                        <label for="localizacao_destino_id" class="form-label">Localização Destino <span class="text-danger destino-required" style="display:none;">*</span></label>
                        <select class="form-select" id="localizacao_destino_id" name="dados[localizacao_destino_id]">
                            <option value="">Selecione...</option>
                            @foreach($localizacoes as $localizacao)
                                <option value="{{ $localizacao->id }}">
                                    {{ $localizacao->nome }} ({{ $localizacao->tipo }})
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="row mb-3">
                    <div class="col-md-12">
                        <label for="observacoes" class="form-label">Observações</label>
                        <textarea class="form-control" id="observacoes" name="dados[observacoes]" rows="3"></textarea>
                    </div>
                </div>
            </div>
        </div>

        <div class="d-flex justify-content-end gap-2">
            <button type="button" class="btn btn-secondary" onclick="carregarConteudo(`{{ route('suprimentos.movimentacoes') }}`)">
                <i class="bi bi-x-circle me-2"></i>Cancelar
            </button>
            <button type="button" class="btn btn-primary" onclick="salvar(`{{ route('suprimentos.movimentacoes.store') }}`, 'formNovaMovimentacao')">
                <i class="bi bi-save me-2"></i>Registrar Movimentação
            </button>
        </div>
    </form>
</div>

<script src="{{ asset('js/movimentacao-estoque.js') }}"></script>