@extends('adm-embarcador.layout')

@section('title', 'Nova Cotação - Adm do Embarcados')

@section('extra_css')
<link rel="stylesheet" href="{{ asset('assets/css/adm-embarcador/nova-cotacao.css') }}">
@endsection

@section('content')
    <!-- Content Wrapper START -->
    <div class="card-body">
        <!-- Título no mesmo padrão do programa-indicacao -->
        <div class="page-title">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <div class="breadcrumb-content">
                            <h2 class="breadcrumb-content__title">Nova Solicitação de Cotação</h2>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Site content wrapper como na indicação -->
        <div class="site-content">
            <div class="container-fluid">
                <!-- Subtítulo e ações -->
                <div class="row mb-4">
                    <div class="col-12 d-flex justify-content-between align-items-center">
                        <p class="text-muted mb-0">Preencha os dados da sua solicitação</p>
                        <div class="d-flex gap-2">
                            <a href="{{ route('adm-embarcador.cotacoes') }}" class="btn btn-outline-secondary btn-sm">
                                <i class="fas fa-arrow-left me-1"></i>
                                Voltar
                            </a>
                            <button class="btn btn-primary btn-sm" onclick="salvarRascunho()">
                                <i class="fas fa-save me-1"></i>
                                Salvar Rascunho
                            </button>
                        </div>
                    </div>
                </div>

                <form id="formCotacao" class="needs-validation" novalidate>
                    <div class="row">
                        <!-- Coluna Principal -->
                        <div class="col-lg-8">
                            <!-- Dados da Carga -->
                            <div class="card shadow mb-4">
                                <div class="card-header py-3">
                                    <h6 class="m-0 font-weight-bold text-primary">
                                        <i class="fas fa-box me-2"></i>
                                        Dados da Carga
                                    </h6>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-6 mb-3">
                                            <label for="tipoCarga" class="form-label">Tipo de Carga *</label>
                                            <select class="form-select" id="tipoCarga" required>
                                                <option value="">Selecione o tipo</option>
                                                <option value="eletronicos">Eletrônicos</option>
                                                <option value="moveis">Móveis</option>
                                                <option value="roupas">Roupas</option>
                                                <option value="alimentos">Alimentos</option>
                                                <option value="materiais">Materiais de Construção</option>
                                                <option value="outros">Outros</option>
                                            </select>
                                            <div class="invalid-feedback">
                                                Por favor, selecione o tipo de carga.
                                            </div>
                                        </div>
                                        <div class="col-md-6 mb-3">
                                            <label for="peso" class="form-label">Peso (kg) *</label>
                                            <input type="number" class="form-control" id="peso" placeholder="0.00" step="0.01" required>
                                            <div class="invalid-feedback">
                                                Por favor, informe o peso.
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-4 mb-3">
                                            <label for="comprimento" class="form-label">Comprimento (cm)</label>
                                            <input type="number" class="form-control" id="comprimento" placeholder="0" step="0.1">
                                        </div>
                                        <div class="col-md-4 mb-3">
                                            <label for="largura" class="form-label">Largura (cm)</label>
                                            <input type="number" class="form-control" id="largura" placeholder="0" step="0.1">
                                        </div>
                                        <div class="col-md-4 mb-3">
                                            <label for="altura" class="form-label">Altura (cm)</label>
                                            <input type="number" class="form-control" id="altura" placeholder="0" step="0.1">
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6 mb-3">
                                            <label for="volume" class="form-label">Volume (m³)</label>
                                            <input type="number" class="form-control" id="volume" placeholder="0.00" step="0.01" readonly>
                                            <small class="form-text text-muted">Calculado automaticamente</small>
                                        </div>
                                        <div class="col-md-6 mb-3">
                                            <label for="valorNota" class="form-label">Valor da Nota Fiscal (R$)</label>
                                            <input type="number" class="form-control" id="valorNota" placeholder="0.00" step="0.01">
                                        </div>
                                    </div>
                                    <div class="mb-3">
                                        <label for="descricao" class="form-label">Descrição da Carga</label>
                                        <textarea class="form-control" id="descricao" rows="3" placeholder="Descreva detalhes sobre a carga..."></textarea>
                                    </div>
                                </div>
                            </div>

                            <!-- Origem e Destino -->
                            <div class="card shadow mb-4">
                                <div class="card-header py-3">
                                    <h6 class="m-0 font-weight-bold text-primary">
                                        <i class="fas fa-route me-2"></i>
                                        Origem e Destino
                                    </h6>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-6 mb-3">
                                            <label for="cepOrigem" class="form-label">CEP de Origem *</label>
                                            <input type="text" class="form-control" id="cepOrigem" placeholder="00000-000" required>
                                            <div class="invalid-feedback">
                                                Por favor, informe o CEP de origem.
                                            </div>
                                        </div>
                                        <div class="col-md-6 mb-3">
                                            <label for="cepDestino" class="form-label">CEP de Destino *</label>
                                            <input type="text" class="form-control" id="cepDestino" placeholder="00000-000" required>
                                            <div class="invalid-feedback">
                                                Por favor, informe o CEP de destino.
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6 mb-3">
                                            <label for="enderecoOrigem" class="form-label">Endereço de Origem *</label>
                                            <input type="text" class="form-control" id="enderecoOrigem" placeholder="Rua, número, bairro" required>
                                            <div class="invalid-feedback">
                                                Por favor, informe o endereço de origem.
                                            </div>
                                        </div>
                                        <div class="col-md-6 mb-3">
                                            <label for="enderecoDestino" class="form-label">Endereço de Destino *</label>
                                            <input type="text" class="form-control" id="enderecoDestino" placeholder="Rua, número, bairro" required>
                                            <div class="invalid-feedback">
                                                Por favor, informe o endereço de destino.
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-4 mb-3">
                                            <label for="cidadeOrigem" class="form-label">Cidade de Origem *</label>
                                            <input type="text" class="form-control" id="cidadeOrigem" required>
                                            <div class="invalid-feedback">
                                                Por favor, informe a cidade de origem.
                                            </div>
                                        </div>
                                        <div class="col-md-4 mb-3">
                                            <label for="estadoOrigem" class="form-label">Estado de Origem *</label>
                                            <select class="form-select" id="estadoOrigem" required>
                                                <option value="">Selecione</option>
                                                <option value="AC">Acre</option>
                                                <option value="AL">Alagoas</option>
                                                <option value="AP">Amapá</option>
                                                <option value="AM">Amazonas</option>
                                                <option value="BA">Bahia</option>
                                                <option value="CE">Ceará</option>
                                                <option value="DF">Distrito Federal</option>
                                                <option value="ES">Espírito Santo</option>
                                                <option value="GO">Goiás</option>
                                                <option value="MA">Maranhão</option>
                                                <option value="MT">Mato Grosso</option>
                                                <option value="MS">Mato Grosso do Sul</option>
                                                <option value="MG">Minas Gerais</option>
                                                <option value="PA">Pará</option>
                                                <option value="PB">Paraíba</option>
                                                <option value="PR">Paraná</option>
                                                <option value="PE">Pernambuco</option>
                                                <option value="PI">Piauí</option>
                                                <option value="RJ">Rio de Janeiro</option>
                                                <option value="RN">Rio Grande do Norte</option>
                                                <option value="RS">Rio Grande do Sul</option>
                                                <option value="RO">Rondônia</option>
                                                <option value="RR">Roraima</option>
                                                <option value="SC">Santa Catarina</option>
                                                <option value="SP">São Paulo</option>
                                                <option value="SE">Sergipe</option>
                                                <option value="TO">Tocantins</option>
                                            </select>
                                            <div class="invalid-feedback">
                                                Por favor, selecione o estado de origem.
                                            </div>
                                        </div>
                                        <div class="col-md-4 mb-3">
                                            <label for="cidadeDestino" class="form-label">Cidade de Destino *</label>
                                            <input type="text" class="form-control" id="cidadeDestino" required>
                                            <div class="invalid-feedback">
                                                Por favor, informe a cidade de destino.
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-4 mb-3">
                                            <label for="estadoDestino" class="form-label">Estado de Destino *</label>
                                            <select class="form-select" id="estadoDestino" required>
                                                <option value="">Selecione</option>
                                                <option value="AC">Acre</option>
                                                <option value="AL">Alagoas</option>
                                                <option value="AP">Amapá</option>
                                                <option value="AM">Amazonas</option>
                                                <option value="BA">Bahia</option>
                                                <option value="CE">Ceará</option>
                                                <option value="DF">Distrito Federal</option>
                                                <option value="ES">Espírito Santo</option>
                                                <option value="GO">Goiás</option>
                                                <option value="MA">Maranhão</option>
                                                <option value="MT">Mato Grosso</option>
                                                <option value="MS">Mato Grosso do Sul</option>
                                                <option value="MG">Minas Gerais</option>
                                                <option value="PA">Pará</option>
                                                <option value="PB">Paraíba</option>
                                                <option value="PR">Paraná</option>
                                                <option value="PE">Pernambuco</option>
                                                <option value="PI">Piauí</option>
                                                <option value="RJ">Rio de Janeiro</option>
                                                <option value="RN">Rio Grande do Norte</option>
                                                <option value="RS">Rio Grande do Sul</option>
                                                <option value="RO">Rondônia</option>
                                                <option value="RR">Roraima</option>
                                                <option value="SC">Santa Catarina</option>
                                                <option value="SP">São Paulo</option>
                                                <option value="SE">Sergipe</option>
                                                <option value="TO">Tocantins</option>
                                            </select>
                                            <div class="invalid-feedback">
                                                Por favor, selecione o estado de destino.
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Configurações Adicionais -->
                            <div class="card shadow mb-4">
                                <div class="card-header py-3">
                                    <h6 class="m-0 font-weight-bold text-primary">
                                        <i class="fas fa-cog me-2"></i>
                                        Configurações Adicionais
                                    </h6>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-6 mb-3">
                                            <label for="prazoEntrega" class="form-label">Prazo de Entrega Desejado</label>
                                            <select class="form-select" id="prazoEntrega">
                                                <option value="">Sem preferência</option>
                                                <option value="1">1 dia útil</option>
                                                <option value="2">2 dias úteis</option>
                                                <option value="3">3 dias úteis</option>
                                                <option value="5">5 dias úteis</option>
                                                <option value="7">7 dias úteis</option>
                                                <option value="10">10 dias úteis</option>
                                            </select>
                                        </div>
                                        <div class="col-md-6 mb-3">
                                            <label for="prioridade" class="form-label">Prioridade</label>
                                            <select class="form-select" id="prioridade">
                                                <option value="normal">Normal</option>
                                                <option value="alta">Alta</option>
                                                <option value="urgente">Urgente</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6 mb-3">
                                            <label for="dataColeta" class="form-label">Data de Coleta Desejada</label>
                                            <input type="date" class="form-control" id="dataColeta">
                                        </div>
                                        <div class="col-md-6 mb-3">
                                            <label for="horarioColeta" class="form-label">Horário de Coleta</label>
                                            <select class="form-select" id="horarioColeta">
                                                <option value="">Qualquer horário</option>
                                                <option value="manha">Manhã (8h - 12h)</option>
                                                <option value="tarde">Tarde (13h - 17h)</option>
                                                <option value="noite">Noite (18h - 22h)</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="mb-3">
                                        <label for="observacoes" class="form-label">Observações Adicionais</label>
                                        <textarea class="form-control" id="observacoes" rows="3" placeholder="Informações adicionais sobre a coleta ou entrega..."></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Coluna Lateral -->
                        <div class="col-lg-4">
                            <!-- Resumo da Cotação -->
                            <div class="card shadow mb-4">
                                <div class="card-header py-3">
                                    <h6 class="m-0 font-weight-bold text-primary">
                                        <i class="fas fa-calculator me-2"></i>
                                        Resumo da Cotação
                                    </h6>
                                </div>
                                <div class="card-body">
                                    <div class="mb-3">
                                        <strong>Distância Estimada:</strong>
                                        <span id="distanciaEstimada">--</span>
                                    </div>
                                    <div class="mb-3">
                                        <strong>Tempo Estimado:</strong>
                                        <span id="tempoEstimado">--</span>
                                    </div>
                                    <div class="mb-3">
                                        <strong>Volume Total:</strong>
                                        <span id="volumeTotal">--</span>
                                    </div>
                                    <div class="mb-3">
                                        <strong>Peso Total:</strong>
                                        <span id="pesoTotal">--</span>
                                    </div>
                                    <hr>
                                    <div class="alert alert-info">
                                        <small>
                                            <i class="fas fa-info-circle me-1"></i>
                                            Esta cotação será enviada para todas as transportadoras disponíveis na rota.
                                        </small>
                                    </div>
                                </div>
                            </div>

                            <!-- Documentos -->
                            <div class="card shadow mb-4">
                                <div class="card-header py-3">
                                    <h6 class="m-0 font-weight-bold text-primary">
                                        <i class="fas fa-file-upload me-2"></i>
                                        Documentos (Opcional)
                                    </h6>
                                </div>
                                <div class="card-body">
                                    <div class="mb-3">
                                        <label for="notaFiscal" class="form-label">Nota Fiscal</label>
                                        <input type="file" class="form-control" id="notaFiscal" accept=".pdf,.jpg,.jpeg,.png">
                                        <small class="form-text text-muted">PDF, JPG ou PNG (máx. 5MB)</small>
                                    </div>
                                    <div class="mb-3">
                                        <label for="documentosAdicionais" class="form-label">Documentos Adicionais</label>
                                        <input type="file" class="form-control" id="documentosAdicionais" multiple accept=".pdf,.jpg,.jpeg,.png">
                                        <small class="form-text text-muted">Múltiplos arquivos permitidos</small>
                                    </div>
                                </div>
                            </div>

                            <!-- Ações -->
                            <div class="card shadow">
                                <div class="card-body">
                                    <button type="submit" class="btn btn-primary w-100 mb-2">
                                        <i class="fas fa-paper-plane me-2"></i>
                                        Enviar Cotação
                                    </button>
                                    <button type="button" class="btn btn-outline-secondary w-100 mb-2" onclick="salvarRascunho()">
                                        <i class="fas fa-save me-2"></i>
                                        Salvar Rascunho
                                    </button>
                                    <button type="button" class="btn btn-outline-info w-100" onclick="limparFormulario()">
                                        <i class="fas fa-eraser me-2"></i>
                                        Limpar Formulário
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- Content Wrapper END -->

    <!-- Modal de Confirmação -->
    <div class="modal fade" id="confirmacaoModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Confirmar Envio</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p>Tem certeza que deseja enviar esta cotação?</p>
                    <p><strong>Origem:</strong> <span id="modalOrigem"></span></p>
                    <p><strong>Destino:</strong> <span id="modalDestino"></span></p>
                    <p><strong>Peso:</strong> <span id="modalPeso"></span></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="button" class="btn btn-primary" onclick="confirmarEnvio()">Confirmar</button>
                </div>
            </div>
        </div>
    </div>
@endsection