@php
$title = 'Nova Expediçã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">
            <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">Nova Expedição</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-plus-circle me-2 text-success"></i>Nova Expedição
        </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

    <form id="formNovaExpedicao">
        @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 <span class="text-danger">*</span></label>
                            <select name="venda_id" id="venda_id" class="form-select" required>
                                <option value="">Selecione uma venda</option>
                                @foreach($vendas as $venda)
                                    <option value="{{ $venda->id }}" {{ old('venda_id') == $venda->id ? 'selected' : '' }}>
                                        Venda #{{ $venda->id }} - {{ $venda->cliente->nome ?? 'Cliente não informado' }} - R$ {{ number_format($venda->valor_total ?? 0, 2, ',', '.') }}
                                    </option>
                                @endforeach
                            </select>
                        </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', date('Y-m-d')) }}" 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') }}</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">
                            <!-- Itens serão adicionados dinamicamente -->
                        </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="salvar(`{{ route('logistica.expedicoes.store') }}`, 'formNovaExpedicao')">
                <i class="bi bi-save me-2"></i>Salvar Expedição
            </button>
        </div>
    </form>
</div>

<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>