@extends('layouts.app')

@section('title', 'Opções de Pagamento')

@section('content')
<style>
    #cartao-salvo-instrucao {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
    }

    @media (max-width: 576px) {
        #cartao-salvo-instrucao {
            flex-direction: column;
            align-items: flex-start;
        }

        #cartao-salvo-instrucao > div:last-child {
            align-self: flex-end;
            width: 100%;
        }

        #cartao-salvo-instrucao .btn {
            width: 100%;
        }
    }
</style>
<div class="card">
    <div class="card-body">
        <!-- Cabeçalho com informações da viagem -->
        <div class="inscricao-header">
            <h1 class="inscricao-titulo">
                @php
                    $destinosNomes = $ordemServico->proposta->destinos->pluck('nome_fantasia')->filter();
                    $destinosExibicao = $destinosNomes->count() > 0 
                        ? $destinosNomes->implode(', ') 
                        : $ordemServico->proposta->destinos->pluck('razao_social')->implode(', ');
                @endphp
                {{ $destinosExibicao }} - 
                {{ $ordemServico->proposta->cliente->nome_fantasia ?? $ordemServico->proposta->cliente->razao_social }} - 
                R$ {{ number_format($ordemServico->valor_contrato, 2, ',', '.') }}
            </h1>
        </div>

        <!-- Stepper -->
        <div class="stepper-container">
            <div class="stepper">
                <div class="step completed">
                    <div class="step-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <polyline points="20 6 9 17 4 12"></polyline>
                        </svg>
                    </div>
                    <span class="step-label">Responsável</span>
                </div>
                
                <div class="step completed">
                    <div class="step-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <polyline points="20 6 9 17 4 12"></polyline>
                        </svg>
                    </div>
                    <span class="step-label">Aluno</span>
                </div>
                
                <div class="step active">
                    <div class="step-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <rect x="1" y="4" width="22" height="16" rx="2" ry="2"></rect>
                            <line x1="1" y1="10" x2="23" y2="10"></line>
                        </svg>
                    </div>
                    <span class="step-label">Pagamento</span>
                </div>
                
                <div class="step">
                    <div class="step-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <polyline points="20 6 9 17 4 12"></polyline>
                        </svg>
                    </div>
                    <span class="step-label">Confirmação</span>
                </div>
            </div>
        </div>

        <hr class="divisor">

        <!-- Card de Opções de Pagamento -->
        <div class="inscricao-card">
            <h2 class="inscricao-card-titulo">OPÇÕES DE PAGAMENTO</h2>
            
            <!-- Cards de Seleção -->
            <div class="row g-3 mb-4">
                <!-- Card PIX -->
                <div class="col-md-6">
                    <div class="payment-option-card" id="card-pix" onclick="selecionarFormaPagamento('pix')">
                        <div class="payment-icon">
                            <img src="{{ asset('img/pix_logo.png') }}" alt="PIX" style="height: 60px; width: auto;">
                        </div>
                        <div class="payment-check">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
                                <polyline points="20 6 9 17 4 12"></polyline>
                            </svg>
                        </div>
                    </div>
                </div>

                <!-- Card Cartão de Crédito -->
                <div class="col-md-6">
                    <div class="payment-option-card" id="card-cartao" onclick="selecionarFormaPagamento('cartao')">
                        <div class="payment-icon">
                            <img src="{{ asset('img/visa_logo.png') }}" alt="Visa" style="height: 40px; width: auto; margin-right: 15px;">
                            <img src="{{ asset('img/mastercard_logo.png') }}" alt="Mastercard" style="height: 40px; width: auto;">
                        </div>
                        <div class="payment-check">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
                                <polyline points="20 6 9 17 4 12"></polyline>
                            </svg>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Área Dinâmica de Pagamento -->
            <div id="payment-area" style="display: none;"
                 data-pix-url="{{ route('pix.gerar', ['codigoViagem' => $codigoViagem]) }}"
                 data-pix-inscricao-id="{{ $inscricaoId }}"
                 data-pix-valor="{{ $valor }}"
                 data-pix-status-url="{{ route('pix.status', ['inscricaoId' => $inscricaoId]) }}"
                 data-pix-confirmacao-url="{{ route('inscricao.step4-confirmacao', ['codigoViagem' => $codigoViagem]) }}"
                 data-cartao-url="{{ route('cartao.cobrar', ['codigoViagem' => $codigoViagem]) }}"
                 data-cartao-inscricao-id="{{ $inscricaoId }}"
                 data-cartao-cartoes-url="{{ route('cartao.cartoes-salvos', ['responsavelId' => $responsavelId]) }}"
                 data-cartao-responsavel-id="{{ $responsavelId }}"
                 data-cartao-qtd-parcelas="{{ $ordemServico->qtd_parcelas }}"
                 data-cartao-valor="{{ $ordemServico->valor_contrato }}"
                 data-cartao-codigo-viagem="{{ $codigoViagem }}">
                <!-- Componente PIX -->
                <div id="component-pix" class="payment-component" style="display: none;">
                    <div class="alert alert-info mb-4 text-start">
                        <strong>Instruções:</strong> Copie o código PIX abaixo para efetuar o pagamento.
                    </div>
                    
                    <!-- Área do Código PIX Ativo -->
                    <div id="pix-ativo" class="row align-items-center">
                        <!-- Área do Código PIX -->
                        <div class="col-12 col-lg-8 mb-3 mb-lg-0">
                            <div class="pix-code-section">
                                <label class="form-label fw-bold">Código PIX Copia e Cola</label>
                                <div class="input-group input-group-lg">
                                    <input type="text" class="form-control pix-code-input" id="pix-code" value="" placeholder="Aguardando geração do código PIX..." readonly>
                                    <button class="btn btn-azul" type="button" onclick="copiarCodigoPix()">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                            <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                                            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
                                        </svg>
                                        <span class="d-none d-sm-inline ms-2">Copiar</span>
                                    </button>
                                </div>
                                <small class="text-muted d-block mt-2">
                                    Cole este código no aplicativo do seu banco para realizar o pagamento.
                                </small>
                            </div>
                        </div>
                        
                        <!-- Cronômetro Circular -->
                        <div class="col-12 col-lg-4 text-center">
                            <div class="cronometro-circular">
                                <svg class="cronometro-svg" viewBox="0 0 120 120">
                                    <circle class="cronometro-bg" cx="60" cy="60" r="54"></circle>
                                    <circle class="cronometro-progress" cx="60" cy="60" r="54" id="cronometro-circle"></circle>
                                </svg>
                                <div class="cronometro-content">
                                    <div class="cronometro-label">Expira em</div>
                                    <div class="cronometro-time" id="cronometro">02:00</div>
                                </div>
                            </div>
                            <p class="text-muted small mt-3 mb-0">
                                Após a confirmação do pagamento, você será redirecionado automaticamente.
                            </p>
                        </div>
                    </div>
                    
                    <!-- Área do Código PIX Expirado -->
                    <div id="pix-expirado" style="display: none;">
                        <div class="text-center py-5">
                            <div class="mb-4">
                                <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#dc3545" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <circle cx="12" cy="12" r="10"></circle>
                                    <line x1="12" y1="8" x2="12" y2="12"></line>
                                    <line x1="12" y1="16" x2="12.01" y2="16"></line>
                                </svg>
                            </div>
                            <h4 class="text-danger mb-3">Código PIX Expirado</h4>
                            <p class="text-muted mb-4">O tempo limite de 2 minutos foi atingido.<br>Clique no botão abaixo para gerar um novo código PIX.</p>
                            <button class="btn btn-azul btn-lg px-5" onclick="gerarNovoCodigoPix()" id="btn-gerar-novo">
                                <i class="fas fa-sync-alt me-2"></i>
                                Gerar Novo Código PIX
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Componente Cartão de Crédito — Lista de cartões salvos -->
                <div id="component-cartao-salvo" class="payment-component" style="display: none;">
                    <div id="cartao-salvo-instrucao" class="alert alert-info mb-3" style="font-size:0.9rem; border-left: 4px solid #0066cc;">
                        <div style="flex: 0 1 auto;">
                            Selecione um cartão salvo ou adicione um novo.
                        </div>
                        <div style="flex: 0 0 auto; margin-left: auto; padding-left: 12px; display: flex; gap: 8px;">
                            <a href="{{ route('inscricao.step3-pagamento', ['codigoViagem' => $codigoViagem]) }}"
                               class="btn btn-sm btn-outline-primary"
                               data-ajax="true"
                               data-loading-message="Carregando..."
                               style="white-space: nowrap;">
                                Voltar
                            </a>
                            <button type="button" class="btn btn-sm btn-outline-primary" style="white-space: nowrap;" onclick="showLoading('Saindo...'); window.location.href='{{ route('sair') }}'">
                                Sair
                            </button>
                        </div>
                    </div>

                    <div id="cartao-salvo-erro" class="alert alert-danger" style="display: none;"></div>

                    <div id="lista-cartoes-salvos" class="mb-3"></div>

                    <button type="button" class="btn-acao btn-adicionar-cartao" onclick="exibirFormularioNovoCartao()">
                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="margin-right:6px;">
                            <line x1="12" y1="5" x2="12" y2="19"></line>
                            <line x1="5" y1="12" x2="19" y2="12"></line>
                        </svg>
                        Adicionar novo cartão
                    </button>
                </div>

                <!-- Componente Cartão de Crédito -->
                <div id="component-cartao" class="payment-component" style="display: none;">
                    <div id="cartao-instrucao" class="alert alert-info mb-3" style="border-left: 4px solid #0066cc;">
                        <div style="flex: 0 1 auto;">
                            <strong>Pagamento com cartão de crédito</strong> — sem juros em até {{ $ordemServico->qtd_parcelas }}x.
                        </div>
                        <div style="flex: 0 0 auto; margin-left: auto; padding-left: 12px; display: flex; gap: 8px;">
                            <button type="button" class="btn btn-sm btn-outline-primary" style="white-space: nowrap;" onclick="voltarParaListaCartoes()">Voltar</button>
                            <button type="button" class="btn btn-sm btn-outline-primary" style="white-space: nowrap;" onclick="showLoading('Saindo...'); window.location.href='{{ route('sair') }}'">Sair</button>
                        </div>
                    </div>

                    <div id="cartao-erro" class="alert alert-danger" style="display: none;"></div>

                    <form id="form-cartao" autocomplete="off">
                        <div class="row">
                            <div class="col-md-8 mb-3">
                                <label for="numero-cartao" class="form-label">Número do Cartão</label>
                                <div class="input-group">
                                    <input type="text" class="form-control" id="numero-cartao"
                                           placeholder="0000 0000 0000 0000" maxlength="19" inputmode="numeric" autocomplete="cc-number">
                                    <span id="bandeira-container" class="input-group-text" style="background: #fff; padding: 4px 8px; display: none;">
                                        <img id="bandeira-icon" src="" alt="" style="height: 28px;">
                                    </span>
                                </div>
                                <div class="invalid-feedback" id="numero-cartao-error"></div>
                            </div>
                            <div class="col-md-4 mb-3">
                                <label for="cvv" class="form-label">CVV</label>
                                <input type="text" class="form-control" id="cvv"
                                       placeholder="000" maxlength="4" inputmode="numeric" autocomplete="cc-csc">
                                <div class="invalid-feedback" id="cvv-error"></div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12 mb-3">
                                <label for="nome-titular" class="form-label">Nome do Titular</label>
                                <input type="text" class="form-control" id="nome-titular"
                                       placeholder="Nome como está no cartão" autocomplete="cc-name">
                                <div class="invalid-feedback" id="nome-titular-error"></div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="validade" class="form-label">Validade</label>
                                <input type="text" class="form-control" id="validade"
                                       placeholder="MM/AAAA" maxlength="7" inputmode="numeric" autocomplete="cc-exp">
                                <div class="invalid-feedback" id="validade-error"></div>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="parcelas" class="form-label">Parcelas</label>
                                <select class="form-select" id="parcelas">
                                    @for ($i = 1; $i <= $ordemServico->qtd_parcelas; $i++)
                                        <option value="{{ $i }}">
                                            {{ $i }}x de R$ {{ number_format($ordemServico->valor_contrato / $i, 2, ',', '.') }} sem juros
                                        </option>
                                    @endfor
                                </select>
                            </div>
                        </div>

                        <!-- Opção de salvar cartão — exibida dinamicamente apenas para Visa/MC -->
                        <div class="row d-none" id="row-salvar-cartao">
                            <div class="col-12 mb-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="salvar-cartao" checked>
                                    <label class="form-check-label" for="salvar-cartao">
                                        Salvar cartão para futuras compras
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="row mt-3">
                            <div class="col-12">
                                <button type="button" id="btn-pagar-cartao" class="btn btn-azul w-100" onclick="processarCartao()">
                                    Finalizar Pagamento
                                </button>
                            </div>
                        </div>
                    </form>
                </div>

                <!-- Componente Cartão Processando (polling síncrono) -->
                <div id="component-cartao-processando" class="payment-component" style="display: none;">
                    <div class="text-center py-5">
                        <div class="mb-4">
                            <div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
                                <span class="visually-hidden">Carregando...</span>
                            </div>
                        </div>
                        <h4 class="mb-2">Validando seu cartão...</h4>
                        <p class="text-muted">Aguarde, estamos confirmando com a operadora.</p>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

@endsection