@php
$title = 'Editar Expedição #' . $expedicao->id;
@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">
            <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('logistica.expedicoes') }}`)" class="text-decoration-none text-secondary">Expedições</a></li>
            <li class="breadcrumb-item active text-dark">Editar Expedição #{{ $expedicao->id }}</li>
        </ol>
    </nav>

    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="fw-bold mb-0">
            <i class="bi bi-pencil me-2 text-warning"></i>Editar Expedição #{{ $expedicao->id }}
        </h1>
        <button type="button" class="btn btn-secondary" onclick="carregarConteudo(`{{ route('logistica.expedicoes') }}`)">
            <i class="bi bi-arrow-left me-2"></i>Voltar
        </button>
    </div>

    @if($errors->any())
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <ul class="mb-0">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Fechar"></button>
        </div>
    @endif

    @if($expedicao->status == 'ENTREGUE' || $expedicao->status == 'CANCELADA')
        <div class="alert alert-warning">
            Esta expedição está {{ $expedicao->status == 'ENTREGUE' ? 'concluída' : 'cancelada' }} e não pode ser editada.
        </div>
    @else
        <form id="formEditarExpedicao">
            @csrf
            
            <div class="card mb-3">
                <div class="card-header">
                    <h5 class="card-title mb-0">Dados da Expedição</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="venda_id" class="form-label">Venda</label>
                                <select name="venda_id" id="venda_id" class="form-select" disabled>
                                    @foreach($vendas as $venda)
                                        <option value="{{ $venda->id }}" {{ $expedicao->venda_id == $venda->id ? 'selected' : '' }}>
                                            Venda #{{ $venda->id }} - {{ $venda->cliente->nome ?? 'Cliente não informado' }}
                                        </option>
                                    @endforeach
                                </select>
                                <small class="form-text text-muted">A venda não pode ser alterada após a criação.</small>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="data_previsao" class="form-label">Data de Previsão <span class="text-danger">*</span></label>
                                <input type="date" class="form-control" id="data_previsao" name="data_previsao" value="{{ old('data_previsao', $expedicao->data_previsao) }}" required>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <div class="mb-3">
                                <label for="observacoes" class="form-label">Observações</label>
                                <textarea class="form-control" id="observacoes" name="observacoes" rows="3">{{ old('observacoes', $expedicao->observacoes) }}</textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="card-title mb-0">Itens da Expedição</h5>
                    <button type="button" class="btn btn-sm btn-success" id="btnAdicionarItem">
                        <i class="bi bi-plus-circle me-1"></i>Adicionar Item
                    </button>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered" id="tabelaItens">
                            <thead>
                                <tr>
                                    <th width="50%">Produto</th>
                                    <th width="15%">Quantidade</th>
                                    <th width="30%">Observações</th>
                                    <th width="5%">Ações</th>
                                </tr>
                            </thead>
                            <tbody id="corpoTabelaItens">
                                @foreach($expedicao->itens as $index => $item)
                                    <tr class="item-expedicao">
                                        <td>
                                            <select name="itens[{{ $index }}][produto_id]" class="form-select" required>
                                                <option value="">Selecione um produto</option>
                                                @foreach($produtos as $produto)
                                                    <option value="{{ $produto->id }}" {{ $item->produto_id == $produto->id ? 'selected' : '' }}>
                                                        {{ $produto->nome }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </td>
                                        <td>
                                            <input type="number" name="itens[{{ $index }}][quantidade]" class="form-control" step="0.01" min="0.01" value="{{ $item->quantidade }}" required>
                                        </td>
                                        <td>
                                            <input type="text" name="itens[{{ $index }}][observacoes]" class="form-control" value="{{ $item->observacoes }}">
                                        </td>
                                        <td class="text-center">
                                            <button type="button" class="btn btn-sm btn-danger btnRemoverItem">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="d-flex justify-content-end gap-2 mt-4">
                <button type="button" class="btn btn-secondary" onclick="carregarConteudo(`{{ route('logistica.expedicoes') }}`)">
                    <i class="bi bi-x-circle me-2"></i>Cancelar
                </button>
                <button type="button" class="btn btn-primary" onclick="atualizar(`{{ route('logistica.expedicoes.update', $expedicao->id) }}`, 'formEditarExpedicao')">
                    <i class="bi bi-save me-2"></i>Salvar Alterações
                </button>
            </div>
        </form>

        <template id="templateItemExpedicao">
            <tr class="item-expedicao">
                <td>
                    <select name="itens[INDEX][produto_id]" class="form-select" required>
                        <option value="">Selecione um produto</option>
                        @foreach($produtos as $produto)
                            <option value="{{ $produto->id }}">{{ $produto->nome }}</option>
                        @endforeach
                    </select>
                </td>
                <td>
                    <input type="number" name="itens[INDEX][quantidade]" class="form-control" step="0.01" min="0.01" required>
                </td>
                <td>
                    <input type="text" name="itens[INDEX][observacoes]" class="form-control">
                </td>
                <td class="text-center">
                    <button type="button" class="btn btn-sm btn-danger btnRemoverItem">
                        <i class="bi bi-trash"></i>
                    </button>
                </td>
            </tr>
        </template>
    @endif
</div>