@extends('layouts.app')

@section('title', 'Pagamento')

@section('content')
<style>
    /* Remover underline dos botões de ação */
    .btn-acao {
        text-decoration: none !important;
    }

    /* Badge Pago */
    .badge-pago {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        background-color: #d1fae5;
        color: #065f46;
        border: 1px solid #6ee7b7;
        border-radius: 20px;
        padding: 4px 10px;
        font-size: 0.75rem;
        font-weight: 600;
        white-space: nowrap;
    }

    /* Linha/card de aluno pago */
    .aluno-row.aluno-pago td,
    .aluno-grid-card.aluno-pago {
        opacity: 0.55;
    }

    .aluno-grid-card.aluno-pago {
        border-left: 4px solid #6ee7b7;
        background-color: #f0fdf4;
    }

    /* Botão Pagar */
    .btn-pagar {
        background-color: #0047AB;
        color: #fff;
        border: none;
        border-radius: 6px;
        padding: 5px 14px;
        font-size: 0.8125rem;
        font-weight: 500;
        cursor: pointer;
        white-space: nowrap;
    }

    .btn-pagar:hover {
        background-color: #003580;
    }
    
    /* Box informativo layout */
    #box-info-pagamento {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
    }
    
    /* Ajustes Mobile - Componentes mais compactos */
    @media (max-width: 767px) {
        /* 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;
        }
        
        /* Cards de alunos */
        .aluno-grid-card {
            padding: 10px !important;
        }
        
        /* Box informativo mobile - layout vertical */
        #box-info-pagamento {
            flex-direction: column;
            align-items: stretch !important;
            gap: 12px !important;
        }
        
        #box-info-pagamento > div:first-child {
            width: 100%;
        }
        
        #box-info-pagamento .btn {
            width: 100% !important;
        }
    }
</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 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 Alunos -->
        <div class="inscricao-card">
            <h2 class="inscricao-card-titulo">PAGAMENTO</h2>
            
            <!-- Box Informativo: Navegação e Instruções -->
            <div class="alert {{ $todosPagos ? '' : 'alert-info' }} mb-3" id="box-info-pagamento"
                 style="border-left: 4px solid {{ $todosPagos ? '#065f46' : '#0066cc' }}; {{ $todosPagos ? 'background-color: #f0fdf4;' : '' }}">
                <div class="d-flex align-items-center" style="flex: 0 1 auto;">
                    @if($todosPagos)
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#065f46" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 12px; flex-shrink: 0;">
                            <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>
                        <span style="color: #065f46; font-weight: 600;">Todos os pagamentos estão confirmados!</span>
                    @else
                        <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" style="margin-right: 12px; flex-shrink: 0;">
                            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                            <circle cx="12" cy="7" r="4"></circle>
                        </svg>
                        <span>Clique em "<b>Pagamento</b>" ao lado de cada aluno e escolha a melhor forma de pagar.</span>
                    @endif
                </div>
                <div style="flex: 0 0 auto;">
                    <a href="{{ route('inscricao.step2-aluno', ['codigoViagem' => $codigoViagem]) }}"
                       class="btn btn-sm btn-outline-primary"
                       data-ajax="true"
                       data-loading-message="Carregando..."
                       style="white-space: nowrap;">
                        @if($todosPagos)
                            Adicionar Aluno
                        @else
                            Voltar
                        @endif
                    </a>
                </div>
            </div>
            
            @if(count($alunosSelecionados) > 0 || count($alunosJaPagos) > 0)
                <!-- Grid Desktop / Cards Mobile -->
                <div class="alunos-grid-container">
                    <!-- Desktop: Tabela -->
                    <table class="alunos-grid-table">
                        <thead>
                            <tr>
                                <th style="width: 50px;">Participar</th>
                                <th>Nome</th>
                                <th>Data de Nascimento</th>
                                <th>Turma</th>
                                <th class="acoes-col">Ações</th>
                            </tr>
                        </thead>
                        <tbody>
                            {{-- Alunos já pagos (desabilitados com badge) --}}
                            @foreach($alunosJaPagos as $aluno)
                            <tr class="aluno-row aluno-selecionado aluno-pago">
                                <td style="text-align: center;">
                                    <input type="checkbox" class="aluno-checkbox" value="{{ $aluno->id }}" checked disabled>
                                </td>
                                <td data-label="Nome">{{ $aluno->nome }}</td>
                                <td data-label="Data Nasc.">{{ \Carbon\Carbon::parse($aluno->data_nascimento)->format('d/m/Y') }}</td>
                                <td data-label="Turma">{{ $aluno->turma ?: '-' }}</td>
                                <td data-label="Ações" class="acoes-col">
                                    <div class="acoes-buttons">
                                        <span class="badge-pago">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" 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>
                                            Pago
                                        </span>
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                            {{-- Alunos selecionados (pendentes de pagamento) --}}
                            @foreach($alunosSelecionados as $aluno)
                            <tr class="aluno-row aluno-selecionado">
                                <td style="text-align: center;">
                                    <input type="checkbox" class="aluno-checkbox" value="{{ $aluno->id }}" checked disabled>
                                </td>
                                <td data-label="Nome">{{ $aluno->nome }}</td>
                                <td data-label="Data Nasc.">{{ \Carbon\Carbon::parse($aluno->data_nascimento)->format('d/m/Y') }}</td>
                                <td data-label="Turma">{{ $aluno->turma ?: '-' }}</td>
                                <td data-label="Ações" class="acoes-col">
                                    <div class="acoes-buttons">
                                        <a href="{{ route('inscricao.contrato', ['codigoViagem' => $codigoViagem, 'aluno_id' => $aluno->id]) }}"
                                           class="btn-acao btn-editar"
                                           title="Pagamento"
                                           data-ajax="true"
                                           data-loading-message="Carregando contrato...">
                                            Pagamento
                                        </a>
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>

                    <!-- Mobile: Cards -->
                    <div class="alunos-grid-cards">
                        {{-- Alunos já pagos --}}
                        @foreach($alunosJaPagos as $aluno)
                        <div class="aluno-grid-card aluno-selecionado aluno-pago">
                            <div class="aluno-grid-card-header" style="display: flex; align-items: center; gap: 10px;">
                                <input type="checkbox" class="aluno-checkbox" value="{{ $aluno->id }}" checked disabled>
                                <h3 class="aluno-grid-card-nome" style="margin: 0; flex: 1;">{{ $aluno->nome }}</h3>
                            </div>
                            <div class="aluno-grid-card-body">
                                <div class="aluno-grid-card-info">
                                    <span class="info-label">Data Nasc:</span>
                                    <span class="info-valor">{{ \Carbon\Carbon::parse($aluno->data_nascimento)->format('d/m/Y') }}</span>
                                </div>
                                <div class="aluno-grid-card-info">
                                    <span class="info-label">Turma:</span>
                                    <span class="info-valor">{{ $aluno->turma ?: '-' }}</span>
                                </div>
                            </div>
                            <div class="aluno-grid-card-acoes">
                                <span class="badge-pago">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" 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>
                                    Pago
                                </span>
                            </div>
                        </div>
                        @endforeach
                        {{-- Alunos selecionados (pendentes) --}}
                        @foreach($alunosSelecionados as $aluno)
                        <div class="aluno-grid-card aluno-selecionado">
                            <div class="aluno-grid-card-header" style="display: flex; align-items: center; gap: 10px;">
                                <input type="checkbox" class="aluno-checkbox" value="{{ $aluno->id }}" checked disabled>
                                <h3 class="aluno-grid-card-nome" style="margin: 0; flex: 1;">{{ $aluno->nome }}</h3>
                            </div>
                            <div class="aluno-grid-card-body">
                                <div class="aluno-grid-card-info">
                                    <span class="info-label">Data Nasc:</span>
                                    <span class="info-valor">{{ \Carbon\Carbon::parse($aluno->data_nascimento)->format('d/m/Y') }}</span>
                                </div>
                                <div class="aluno-grid-card-info">
                                    <span class="info-label">Turma:</span>
                                    <span class="info-valor">{{ $aluno->turma ?: '-' }}</span>
                                </div>
                            </div>
                            <div class="aluno-grid-card-acoes">
                                <a href="{{ route('inscricao.contrato', ['codigoViagem' => $codigoViagem, 'aluno_id' => $aluno->id]) }}"
                                   class="btn-acao btn-editar"
                                   data-ajax="true"
                                   data-loading-message="Carregando contrato...">
                                    Pagamento
                                </a>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            @else
                <div class="alert alert-warning">
                    Nenhum aluno foi selecionado para esta viagem.
                </div>
            @endif
        </div>

        @if($todosPagos)
        <hr class="divisor">
        <div class="form-acoes">
            <a href="{{ route('sair') }}" class="btn btn-outline-cinza" onclick="showLoading('Saindo...'); return true;">
                Sair
            </a>
        </div>
        @endif
    </div>
</div>
@endsection