@extends('layouts.app')

@section('title', 'Confirmação')

@section('content')
<style>
    /* Ajustes Mobile - Componentes mais compactos */
    @media (max-width: 767px) {
        /* Títulos */
        .form-titulo,
        h1.form-titulo,
        .confirmacao-titulo {
            font-size: 1.25rem !important;
            margin-bottom: 8px !important;
        }
        
        .form-subtitulo,
        .confirmacao-subtitulo {
            font-size: 0.8125rem !important;
            margin-bottom: 16px !important;
        }
        
        /* Botões */
        .btn,
        .btn-azul,
        .btn-outline-cinza {
            padding: 10px 14px !important;
            font-size: 0.8125rem !important;
            min-height: 38px !important;
        }
        
        /* Card body */
        .card-body {
            padding: 14px !important;
        }
        
        /* Divisor */
        .divisor,
        hr.divisor {
            margin: 12px 0 !important;
        }
        
        /* Ações do formulário */
        .form-acoes {
            margin-top: 16px !important;
            gap: 10px !important;
        }
        
        /* Ícone de sucesso */
        .sucesso-icon svg {
            width: 60px !important;
            height: 60px !important;
        }
    }

    /* Override botões: tamanho natural no conteúdo, sem esticar */
    .form-acoes .btn {
        flex: 0 0 auto;
        min-width: 160px;
        max-width: none !important;
        white-space: nowrap;
    }

    /* Mobile: botões ocupam a linha toda */
    @media (max-width: 767px) {
        .form-acoes .btn {
            flex: 1 1 auto;
        }
    }

    /* Card de info: largura limitada e centralizado no desktop */
    .confirmacao-info {
        display: block;
        width: 100%;
        max-width: 480px;
        margin: 0 auto 0 auto;
    }

    @media (max-width: 767px) {
        .confirmacao-info {
            max-width: 100%;
        }
    }

    .confirmacao-info .info-item strong {
        font-size: 0.8rem;
    }

    .confirmacao-info .info-item span {
        font-size: 0.9rem;
    }

    /* Mobile: só reduz fonte */
    @media (max-width: 767px) {
        .confirmacao-info .info-item strong {
            font-size: 0.75rem;
        }

        .confirmacao-info .info-item span {
            font-size: 0.85rem;
        }
    }
</style>

<div class="card">
    <div class="card-body">
        <!-- Cabeçalho com informações da viagem -->
        <div class="inscricao-header">
            <h1 class="inscricao-titulo">
                {{ $ordemServico->proposta->destinos->pluck('nome_fantasia')->filter()->implode(', ') ?: $ordemServico->proposta->destinos->pluck('razao_social')->implode(', ') }} - 
                {{ $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 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">Pagamento</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">Confirmação</span>
                </div>
            </div>
        </div>

        <hr class="divisor">

        <!-- Sucesso -->
        <div class="confirmacao-sucesso">
            <div class="sucesso-icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
                    <polyline points="22 4 12 14.01 9 11.01"></polyline>
                </svg>
            </div>
            
            <h1 class="confirmacao-titulo">Pagamento Confirmado!</h1>
            <p class="confirmacao-subtitulo">O pagamento foi processado com sucesso. Em breve você receberá um e-mail com todos os detalhes.</p>
        </div>

        <!-- Botões -->
        <div class="form-acoes">
            <a href="{{ route('sair') }}" class="btn btn-outline-cinza" onclick="showLoading('Saindo...'); return true;">
                Sair
            </a>
            <a href="{{ route('inscricao.step3-pagamento', ['codigoViagem' => $codigoViagem]) }}"
               class="btn btn-azul"
               data-ajax="true"
               data-loading-message="Carregando...">
                Continuar Pagamento
            </a>
        </div>
    </div>
</div>
@endsection