@php
$title = 'Rotas do Transporte';
@endphp

<div>
    <nav aria-label="breadcrumb" class="mb-2" style="margin-top: 10px;">
        <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('transportes.list') }}`)" class="text-decoration-none text-secondary">Transportes</a></li>
            <li class="breadcrumb-item active text-dark" aria-current="page">Rotas - {{ $transporte->nome_fantasia }}</li>
        </ol>
    </nav>
    
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="fw-bold mb-0" style="font-size:2.1rem; letter-spacing:1px;">
                <i class="bi bi-signpost-2 me-2 text-primary"></i>Rotas
            </h1>
            <span class="text-muted small">Gerencie as rotas do transporte <strong>{{ $transporte->nome_fantasia }}</strong></span>
        </div>
        <div>
            <button type="button" class="btn btn-sm btn-outline-secondary me-2" onclick="carregarConteudo(`{{ route('transportes.list') }}`)">
                <i class="bi bi-arrow-left me-2"></i>Voltar
            </button>
        </div>
    </div>

    <div class="card shadow border-0">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center flex-wrap gap-3 mb-3">
                <div class="d-flex align-items-center gap-2">
                    <div class="d-flex align-items-center">
                        <span class="fw-bold">Rotas</span>
                        @if($rotas && $rotas->count() > 0)
                            <span class="badge bg-primary ms-2" id="total-rotas-badge">{{ $rotas->total() }}</span>
                        @endif
                    </div>
                    @if($rotas && $rotas->count() > 0)
                        <div class="ms-3" style="max-width:500px;">
                            <div class="input-group input-group-sm">
                                <span class="input-group-text bg-white">
                                    <i class="bi bi-search"></i>
                                </span>
                                <input type="text" class="form-control" id="buscar-rotas-input" data-transporte-id="{{ $transporte->id }}" placeholder="Digite no mínimo 4 caracteres para buscar..." autocomplete="off" style="width:340px;">
                            </div>
                        </div>
                        <div class="rotas-search-loading" id="rotas-search-loading">
                            <div class="rotas-search-spinner"></div>
                        </div>
                    @endif
                </div>

                <div class="d-flex align-items-center gap-2">
                    <button type="button" class="btn btn-primary btn-sm" onclick="abrirModalCarregarRotas(`{{ $transporte->id }}`)">
                        <i class="bi bi-upload me-1"></i>Carregar Rotas
                    </button>
                    @if($rotas && $rotas->count() > 0)
                        <button type="button" class="btn btn-outline-primary btn-sm" onclick="solicitarAtualizacaoRotasViaUrl(`{{ route('transportes.rotas.solicitar-atualizacao', $transporte->id) }}`)">
                            <i class="bi bi-envelope me-1"></i>Solicitar Atualização
                        </button>
                    @endif
                    <button type="button" class="btn btn-success btn-sm" onclick="abrirModalNovaRota(`{{ $transporte->id }}`)">
                        <i class="bi bi-plus-circle me-1"></i>Adicionar
                    </button>
                </div>
            </div>

            @if($rotas && $rotas->count() > 0)
                <div class="table-responsive">
                    <table class="table table-hover" id="tabela-rotas">
                        <thead>
                            <tr>
                                <th width="50">#</th>
                                <th>Origem</th>
                                <th>Destino</th>
                                <th>Tipo Veículo</th>
                                <th>Valor</th>
                                <th>Criado em</th>
                                <th>Ações</th>
                            </tr>
                        </thead>
                        <tbody id="tbody-rotas">
                            @foreach($rotas as $index => $rota)
                                <tr>
                                    <td class="text-center align-middle">
                                        <span class="fw-bold text-muted">{{ ($rotas->currentPage() - 1) * $rotas->perPage() + $index + 1 }}</span>
                                    </td>
                                    <td>{{ $rota->origem ?? 'Não informado' }}</td>
                                    <td>{{ $rota->destino ?? 'Não informado' }}</td>
                                    <td>{{ $rota->tipoVeiculo->nome ?? 'Não informado' }}</td>
                                    <td>
                                        @if($rota->valor)
                                            R$ {{ number_format($rota->valor, 2, ',', '.') }}
                                        @else
                                            Não informado
                                        @endif
                                    </td>
                                    <td>{{ $rota->created_at ? $rota->created_at->format('d/m/Y H:i') : 'Não informado' }}</td>
                                    <td>
                                        <button type="button" class="btn btn-link p-0 align-baseline text-warning me-2" title="Editar" onclick="abrirModalEditarRota(`{{ $transporte->id }}`, `{{ $rota->id }}`, `{{ $rota->origem }}`, `{{ $rota->destino }}`, `{{ $rota->tipo_veiculo_id }}`, `{{ number_format($rota->valor, 2, ',', '.') }}`)">
                                            <i class="bi bi-pencil-square icon-action edit"></i>
                                        </button>
                                        <button type="button" class="btn btn-link p-0 align-baseline text-danger" title="Excluir" onclick="excluirRota(`{{ $transporte->id }}`, `{{ $rota->id }}`)">
                                            <i class="bi bi-trash icon-action delete"></i>
                                        </button>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <div id="paginacao-rotas">
                    {{-- Paginação Profissional --}}
                    <x-pagination :items="$rotas" :baseUrl="route('transportes.rotas.list', $transporte->id)" />
                </div>
            @else
                <p class="text-muted mb-0">Nenhuma rota cadastrada para este transporte.</p>
            @endif
        </div>
    </div>

    <!-- Modal Carregar Rotas -->
    <div class="modal fade" id="modalCarregarRotas" tabindex="-1" aria-labelledby="modalCarregarRotasLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalCarregarRotasLabel">
                        <i class="bi bi-upload me-2"></i>Carregar Rotas via Planilha
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="formCarregarRotas" enctype="multipart/form-data">
                        <div class="alert alert-info">
                            <i class="bi bi-info-circle me-2"></i>
                            <strong>Instruções:</strong> Selecione uma planilha Excel (.xlsx ou .xls) contendo as rotas. 
                            A planilha deve ter as colunas: Origem, Destino, Tipo de Veículo e Valor.
                        </div>
                        
                        <div class="mb-3">
                            <label for="arquivoRotas" class="form-label required-field">Arquivo da Planilha</label>
                            <input type="file" 
                                   class="form-control" 
                                   id="arquivoRotas" 
                                   name="arquivo" 
                                   accept=".xlsx,.xls"
                                   required>
                            <div class="form-text">
                                Formatos aceitos: .xlsx, .xls (máximo 10MB)
                            </div>
                        </div>

                        <input type="hidden" id="transporteIdCarregar" name="transporte_id">
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="bi bi-x-circle me-1"></i>Cancelar
                    </button>
                    <button type="button" class="btn btn-primary" onclick="enviarPlanilhaRotas()">
                        <i class="bi bi-upload me-1"></i>Carregar Rotas
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
<link rel="stylesheet" href="{{ asset('css/rotas-autocomplete-loading.css') }}">

    <!-- Modal Nova Rota -->
    <div class="modal fade" id="modalNovaRota" tabindex="-1" aria-labelledby="modalNovaRotaLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalNovaRotaLabel">Nova Rota</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="formNovaRota">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="nova_origem" class="form-label">Origem <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="nova_origem" name="origem" required>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="nova_destino" class="form-label">Destino <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="nova_destino" name="destino" required>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="nova_tipo_veiculo_id" class="form-label">Tipo de Veículo <span class="text-danger">*</span></label>
                                <select class="form-select" id="nova_tipo_veiculo_id" name="tipo_veiculo_id" required>
                                    <option value="">Selecione...</option>
                                    @foreach($tiposVeiculos as $tipo)
                                        <option value="{{ $tipo->id }}">{{ $tipo->nome }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="nova_valor" class="form-label">Valor (R$) <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="nova_valor" name="valor" data-mask="money" placeholder="0,00" required>
                            </div>
                        </div>
                    </form>
                </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="salvarRota({{ $transporte->id }})">Salvar</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Editar Rota -->
    <div class="modal fade" id="modalEditarRota" tabindex="-1" aria-labelledby="modalEditarRotaLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalEditarRotaLabel">Editar Rota</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="formEditarRota">
                        <input type="hidden" id="editar_rota_id">
                        <input type="hidden" id="editar_transporte_id">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="editar_origem" class="form-label">Origem <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="editar_origem" name="origem" required>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="editar_destino" class="form-label">Destino <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="editar_destino" name="destino" required>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="editar_tipo_veiculo_id" class="form-label">Tipo de Veículo <span class="text-danger">*</span></label>
                                <select class="form-select" id="editar_tipo_veiculo_id" name="tipo_veiculo_id" required>
                                    <option value="">Selecione...</option>
                                    @foreach($tiposVeiculos as $tipo)
                                        <option value="{{ $tipo->id }}">{{ $tipo->nome }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="editar_valor" class="form-label">Valor (R$) <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="editar_valor" name="valor" data-mask="money" placeholder="0,00" required>
                            </div>
                        </div>
                    </form>
                </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="atualizarRota()">Atualizar</button>
                </div>
            </div>
        </div>
    </div>