@extends('layouts.default')
@section('title', 'Cronogramas')
@section('plugins.Sweetalert2', true)

@section('content')

<div class="card">
    <div class="card-header d-flex justify-content-between align-items-end">
		<h3>Cronogramas</h3>
    </div>

    <div class="card-body">
        @if(auth()->user()->can('administrador') && $associados)
            <div class="row mb-3">
                <div class="col-md-6">
                    <form method="GET" action="{{ route('cronogramas') }}" class="form-inline">
                        <div class="form-group">
                            <label for="associado_filter" class="mr-2">Filtrar por Associado:</label>
                            <select name="associado_filter" id="associado_filter" class="form-control selectpicker mr-2" data-live-search="true" data-selected-text-format="count > 2" onchange="this.form.submit()">
                                <option value="">Todos os Associados Ativos</option>
                                @foreach($associados as $id => $nome)
                                    <option value="{{ $id }}" {{ $selectedAssociado == $id ? 'selected' : '' }}>
                                        {{ $nome }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </form>
                </div>
            </div>
        @endif

    	<div class='table-responsive'>
			<table class='table table-striped table-bordered table-hover table-sm'>
				<thead>
					<th width="25px">Cod</th>
					@if(auth()->user()->can('administrador'))
						<th>Associado</th>
					@endif
					<th>Nome</th>
					<th width="40px">Ações</th>
				</thead>
				<tbody>
					@foreach($cronogramas as $cronograma)
						<tr>
							<td>{{ $cronograma->id }}</td>
							@if(auth()->user()->can('administrador'))
								<td>{{ $cronograma->associado->nome_completo ?? 'N/A' }}</td>
							@endif
							<td>{{ $cronograma->nome_cronograma }}</td>
							<td>
								<div class='btn-group btn-group-sm'>
									@php
										$associadoIdToUse = $associado_id ?? \Crypt::encrypt($cronograma->associado_id);
									@endphp
									<a href="{{ route('cronogramas.edit', ['id'=>\Crypt::encrypt($cronograma->id), 'associado_id'=>$associadoIdToUse]) }}" class='btn-default btn btn-xs' title='Editar'><i class="fas fa-pencil-alt text-muted"></i> </a>
								</div>
							</td>
						</tr>
					@endforeach
				</tbody>
			</table>
    	</div>
    </div>
</div>
<style type="text/css">
    /* Estilos para o SweetAlert de confirmação */
    .swal-wide {
        width: 500px !important;
        max-width: 90vw !important;
    }

    .swal-title-success {
        color: #28a745 !important;
        font-weight: 700 !important;
    }

    @media only screen and (max-width: 600px) {
        .swal-wide {
            width: 95vw !important;
            margin: 10px !important;
        }
    }
</style>
<script>
    // Aguardar o carregamento completo da página
    window.addEventListener('load', function() {
        // Aguardar um pouco mais para garantir que tudo foi carregado
        setTimeout(function() {
            // Inicializar selectpicker se disponível
            if (typeof $ !== 'undefined' && typeof $.fn.selectpicker !== 'undefined') {
                $('.selectpicker').selectpicker();
            }

            // Verificar se há mensagem flash para mostrar SweetAlert
            @if(session('mensagem'))
                @if(session('mensagem.type') == 'success')
                    Swal.fire({
                        title: '✅ {{ session("mensagem.title") }}',
                        html: `
                            <div style="text-align: left; margin: 20px 0;">
                                <p style="font-size: 16px; margin-bottom: 15px; color: #333;">
                                    <strong>{{ session("mensagem.text") }}</strong>
                                </p>
                                <div style="background: #fff3cd; border: 1px solid #ffeaa7; border-radius: 8px; padding: 15px; margin: 15px 0;">
                                    <p style="font-size: 14px; color: #856404; margin: 0;">
                                        <strong>⚠️ ATENÇÃO:</strong> É sua <strong>obrigação</strong> acessar novamente a tela e verificar se todos os dados estão corretos antes de confirmar o cronograma.
                                    </p>
                                </div>
                                <p style="font-size: 14px; color: #666; margin-top: 15px;">
                                    Recomendamos revisar cuidadosamente todas as viagens marcadas e as paradas selecionadas.
                                </p>
                            </div>
                        `,
                        icon: 'success',
                        confirmButtonText: 'Entendi, vou verificar!',
                        confirmButtonColor: '#28a745',
                        showCancelButton: false,
                        allowOutsideClick: false,
                        customClass: {
                            popup: 'swal-wide',
                            title: 'swal-title-success'
                        }
                    });
                @else
                    Swal.fire({
                        title: '❌ {{ session("mensagem.title") }}',
                        text: '{{ session("mensagem.text") }}',
                        icon: 'error',
                        confirmButtonText: 'OK',
                        confirmButtonColor: '#dc3545'
                    });
                @endif
            @endif
        }, 200);
    });
</script>
@stop

@section('table-delete')
"cronograma"
@stop