@extends('layouts.app')

@section('title', 'Alunos - Inscrição')

@section('content')
<style>
    /* Container Adicionar Aluno - Responsividade */
    #container-adicionar-aluno {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
    }
    
    @media (max-width: 576px) {
        #container-adicionar-aluno {
            flex-direction: column;
            align-items: flex-start;
        }
        
        #container-adicionar-aluno > div:last-child {
            align-self: flex-end;
            width: 100%;
        }
        
        #container-adicionar-aluno .btn {
            width: 100%;
        }
    }
    
/* 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 12px;
        font-size: 0.8125rem;
        font-weight: 500;
        cursor: pointer;
        white-space: nowrap;
    }

    .btn-pagar:hover {
        background-color: #003580;
    }
    
    /* Ajustes Mobile - Componentes mais compactos */
    @media (max-width: 767px) {
        /* Cards de aluno mais compactos */
        .aluno-grid-card {
            padding: 10px !important;
        }
        
        .aluno-grid-card-header {
            margin-bottom: 8px !important;
            padding-bottom: 6px !important;
        }
        
        .aluno-grid-card-nome,
        .aluno-grid-nome {
            font-size: 0.95rem !important;
            font-weight: 600;
        }
        
        .aluno-grid-card-body,
        .aluno-grid-body {
            gap: 5px !important;
            margin-bottom: 8px !important;
        }
        
        .aluno-grid-card-info,
        .aluno-grid-info {
            font-size: 0.8125rem !important;
        }
        
        .aluno-grid-info .label {
            font-size: 0.8125rem !important;
        }
        
        .aluno-grid-info .valor {
            font-size: 0.8125rem !important;
        }
        
        /* Botões mais compactos */
        .btn,
        .btn-azul,
        .btn-secondary,
        .btn-acao {
            padding: 10px 14px !important;
            font-size: 0.8125rem !important;
            min-height: 38px !important;
        }
        
        .aluno-grid-card-acoes .btn-acao {
            padding: 7px 10px !important;
            font-size: 0.8125rem !important;
            min-width: 75px !important;
        }
        
        /* Títulos (não sobrescrever inscricao-header/inscricao-titulo) */
        .form-titulo,
        h1.form-titulo {
            font-size: 1.25rem !important;
            margin-bottom: 8px !important;
        }
        
        .form-subtitulo {
            font-size: 0.8125rem !important;
            margin-bottom: 16px !important;
        }
        
        /* Headers de seção */
        .secao-titulo h2 {
            font-size: 1rem !important;
            margin-bottom: 12px !important;
        }
        
        /* Card body mais compacto */
        .card-body {
            padding: 14px !important;
        }
        
        /* Divisor e espaçamentos */
        .divisor,
        hr.divisor {
            margin: 12px 0 !important;
        }
        
        /* Ações do formulário */
        .form-acoes {
            margin-top: 16px !important;
            gap: 10px !important;
        }
        
        /* Checkbox menor */
        .aluno-checkbox {
            width: 18px;
            height: 18px;
        }
        
        /* Espaçamento entre cards */
        .aluno-grid {
            gap: 8px !important;
        }
        
        /* Alerta de seleção compacto */
        #alerta-selecao {
            font-size: 0.8125rem !important;
            padding: 10px 12px !important;
            margin-top: 12px !important;
        }
        
        #alerta-selecao strong {
            font-size: 0.8125rem !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 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">
                            <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>
                    </div>
                    <span class="step-label">Aluno</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">
                            <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">ALUNOS PARA ESTA VIAGEM</h2>
            
            <!-- Container: Mensagem + Botão Adicionar -->
            <div class="alert alert-info mb-3" id="container-adicionar-aluno" style="border-left: 4px solid #0066cc;">
                <div class="d-flex align-items-center" style="flex: 0 1 auto;">
                    <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>
                        @if(count($alunos) > 0)
                            Adicione somente alunos que pertençam a turma <b>{{ $ordemServico->turmas }}</b>.
                        @else
                            <strong>Nenhum aluno cadastrado.</strong> Adicione o primeiro aluno para continuar.
                        @endif
                    </span>
                </div>
                <div style="flex: 0 0 auto;">
                    <a 
                        href="{{ route('inscricao.cadastrar-aluno', ['codigoViagem' => $codigoViagem]) }}" 
                        class="btn btn-sm btn-outline-primary"
                        style="white-space: nowrap;"
                        onclick="if(typeof showLoading === 'function') showLoading('Carregando formulário...'); return true;"
                    >
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align: middle; margin-right: 5px;">
                            <line x1="12" y1="5" x2="12" y2="19"></line>
                            <line x1="5" y1="12" x2="19" y2="12"></line>
                        </svg>
                        Adicionar Aluno
                    </a>
                </div>
            </div>
            
            @if(count($alunos) > 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>
                            @foreach($alunos as $aluno)
                            @php $isPago = in_array($aluno['id'], $alunosPagosIds); @endphp
                            <tr class="aluno-row{{ $isPago ? ' aluno-pago' : '' }}" data-aluno-id="{{ $aluno['id'] }}">
                                <td style="text-align: center;">
                                    @if($isPago)
                                    <input type="checkbox" class="aluno-checkbox" value="{{ $aluno['id'] }}" checked disabled>
                                    @else
                                    <input type="checkbox" class="aluno-checkbox" value="{{ $aluno['id'] }}" onchange="selecionarAluno(this)">
                                    @endif
                                </td>
                                <td data-label="Nome">{{ $aluno['nome'] }}</td>
                                <td data-label="Data Nasc.">{{ $aluno['data_nascimento'] }}</td>
                                <td data-label="Turma">{{ $aluno['turma'] ?: '-' }}</td>
                                <td data-label="Ações" class="acoes-col">
                                    <div class="acoes-buttons">
                                        <a href="{{ route('inscricao.editar-aluno', ['codigoViagem' => $codigoViagem, 'alunoId' => $aluno['id']]) }}" class="btn-acao btn-editar" title="Editar" onclick="if(typeof showLoading === 'function') showLoading('Carregando dados...'); return true;">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                                <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
                                                <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
                                            </svg>
                                        </a>
                                        @if(!$isPago)@endif
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>

                    <!-- Mobile: Cards -->
                    <div class="alunos-grid-cards">
                        @foreach($alunos as $aluno)
                        @php $isPago = in_array($aluno['id'], $alunosPagosIds); @endphp
                        <div class="aluno-grid-card{{ $isPago ? ' aluno-pago' : '' }}" data-aluno-id="{{ $aluno['id'] }}">
                            <div class="aluno-grid-card-header" style="display: flex; align-items: center; gap: 10px;">
                                @if($isPago)
                                <input type="checkbox" class="aluno-checkbox" value="{{ $aluno['id'] }}" checked disabled>
                                @else
                                <input type="checkbox" class="aluno-checkbox" value="{{ $aluno['id'] }}" onchange="selecionarAluno(this)">
                                @endif
                                <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">{{ $aluno['data_nascimento'] }}</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" style="display: flex; gap: 8px; align-items: center;">
                                <a href="{{ route('inscricao.editar-aluno', ['codigoViagem' => $codigoViagem, 'alunoId' => $aluno['id']]) }}" class="btn-acao btn-editar" onclick="if(typeof showLoading === 'function') showLoading('Carregando dados...'); return true;">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                        <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
                                        <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
                                    </svg>
                                    Editar
                                </a>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            @endif

            @if(count($alunos) > 0)
            <!-- Alerta: Nenhum aluno selecionado -->
            <div id="alerta-selecao" class="alert alert-warning" style="margin-top: 20px;">
                <strong>Atenção:</strong> Selecione pelo menos um aluno para continuar.
            </div>
            @endif

            <!-- Botões de Navegação -->
            <div class="form-acoes">
                <a href="{{ route('inscricao.step1-responsavel', ['codigoViagem' => $codigoViagem]) }}" 
                   class="btn btn-outline-cinza"
                   data-ajax="true"
                   data-loading-message="Carregando...">
                    Voltar
                </a>
                
                <button type="button" 
                        id="btn-proximo" 
                        class="btn btn-azul"
                        onclick="validarSelecaoAlunos('{{ route('inscricao.step3-pagamento', ['codigoViagem' => $codigoViagem]) }}'); return false;"
                        disabled>
                    Próximo
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Loading Overlay -->
<div id="loading-overlay" class="loading-overlay" style="display: none;">
    <div class="loading-spinner"></div>
    <p class="loading-text">Processando...</p>
</div>

@endsection