@extends('layouts.app')

@section('meta')
    <meta name="description" content="Exportar cotações de transportadora - Sistema CoteFrete">
    <meta name="author" content="Cote Frete">
    <link rel="canonical" href="{{ url('/exportar-cotacao-transportadora') }}" />
@endsection

@section('title', 'Exportar Cotações - Transportadora')

@section('content')
@include('botao-whatsapp')

<div class="container mt120">
    <div class="row">
        <div class="col-lg-12">
            <h1 class="fs36 fs24m fwb black">Exportar Cotações - Transportadora</h1>
        </div>
    </div>
</div>

<div class="container mb50">
    <div class="row">
        <div class="col-lg-8 mx-auto">
            <div class="card">
                <div class="card-header">
                    <h3>Configuração de Exportação</h3>
                </div>
                <div class="card-body">
                    <form id="exportForm">
                        @csrf
                        <div class="form-group mb-3">
                            <label for="id_transportadora">ID da Transportadora:</label>
                            <input type="number" class="form-control" id="id_transportadora" name="id_transportadora" value="244" required>
                        </div>
                        
                        <div class="form-group mb-3">
                            <label for="limit">Limite de Registros:</label>
                            <input type="number" class="form-control" id="limit" name="limit" value="1000" min="1" max="100000">
                            <small class="form-text text-muted">Máximo de 100.000 registros por vez</small>
                        </div>
                        
                        <div class="form-group mb-3">
                            <label for="offset">Offset (Pular registros):</label>
                            <input type="number" class="form-control" id="offset" name="offset" value="0" min="0">
                            <small class="form-text text-muted">Use para processar grandes volumes em lotes</small>
                        </div>
                        
                        <div class="form-check mb-3">
                            <input class="form-check-input" type="checkbox" id="use_trava" name="use_trava" checked>
                            <label class="form-check-label" for="use_trava">
                                Usar trava de data/hora (continuar de onde parou)
                            </label>
                        </div>
                        
                        <button type="submit" class="btn btn-primary" id="exportBtn">
                            <span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
                            Iniciar Exportação
                        </button>
                    </form>
                </div>
            </div>
            
            <div class="card mt-4 d-none" id="progressCard">
                <div class="card-header">
                    <h4>Progresso da Exportação</h4>
                </div>
                <div class="card-body">
                    <div class="progress mb-3">
                        <div class="progress-bar" role="progressbar" style="width: 0%" id="progressBar">0%</div>
                    </div>
                    <div id="statusMessage">Aguardando início...</div>
                    <div id="processedCount">Registros processados: 0</div>
                </div>
            </div>
            
            <div class="card mt-4 d-none" id="resultsCard">
                <div class="card-header">
                    <h4>Resultados da Exportação</h4>
                </div>
                <div class="card-body">
                    <div id="resultsContent"></div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
$(document).ready(function() {
    $('#exportForm').on('submit', function(e) {
        e.preventDefault();
        
        const formData = new FormData(this);
        const exportBtn = $('#exportBtn');
        const spinner = exportBtn.find('.spinner-border');
        const progressCard = $('#progressCard');
        const resultsCard = $('#resultsCard');
        
        // Mostrar loading
        exportBtn.prop('disabled', true);
        spinner.removeClass('d-none');
        progressCard.removeClass('d-none');
        resultsCard.addClass('d-none');
        
        // Reset progress
        $('#progressBar').css('width', '0%').text('0%');
        $('#statusMessage').text('Iniciando exportação...');
        $('#processedCount').text('Registros processados: 0');
        
        $.ajax({
            url: '{{ route("exportar.cotacao.transportadora") }}',
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            xhr: function() {
                const xhr = new window.XMLHttpRequest();
                xhr.upload.addEventListener('progress', function(evt) {
                    if (evt.lengthComputable) {
                        const percentComplete = evt.loaded / evt.total;
                        $('#progressBar').css('width', percentComplete * 100 + '%').text(Math.round(percentComplete * 100) + '%');
                    }
                }, false);
                return xhr;
            },
            success: function(response) {
                if (response.status === 'success') {
                    $('#statusMessage').text('Exportação concluída com sucesso!');
                    $('#progressBar').css('width', '100%').text('100%');
                    
                    // Mostrar resultados
                    resultsCard.removeClass('d-none');
                    $('#resultsContent').html(`
                        <div class="alert alert-success">
                            <strong>Sucesso!</strong> ${response.message}
                        </div>
                        <p><strong>Total de registros processados:</strong> ${response.total || 'N/A'}</p>
                        <p><strong>Tempo de execução:</strong> ${response.execution_time || 'N/A'}</p>
                    `);
                } else {
                    $('#statusMessage').text('Erro na exportação: ' + response.message);
                    $('#progressBar').addClass('bg-danger');
                }
            },
            error: function(xhr, status, error) {
                $('#statusMessage').text('Erro na requisição: ' + error);
                $('#progressBar').addClass('bg-danger');
                
                // Mostrar erro nos resultados
                resultsCard.removeClass('d-none');
                $('#resultsContent').html(`
                    <div class="alert alert-danger">
                        <strong>Erro!</strong> Ocorreu um problema durante a exportação.
                    </div>
                    <p><strong>Detalhes:</strong> ${error}</p>
                `);
            },
            complete: function() {
                // Restaurar botão
                exportBtn.prop('disabled', false);
                spinner.addClass('d-none');
            }
        });
    });
    
    // Validação do formulário
    $('#limit').on('input', function() {
        const value = parseInt($(this).val());
        if (value > 100000) {
            $(this).val(100000);
        }
    });
    
    $('#offset').on('input', function() {
        const value = parseInt($(this).val());
        if (value < 0) {
            $(this).val(0);
        }
    });
});
</script>
@endpush