@extends('layouts.publicador.novo_padrao')

@section('content')

    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
    <linK rel="stylesheet" href="{{ asset('css/publicador.css') }}">

    <div class="container">
        <div class="content-wrapper">

            <div class="content-header">
                <h4 class="mb-0">
                    @lang('labels.escola_legislativo') / @lang('labels.parlamento_universitario')
                    <small class="text-muted">{{ empty($model->id) ? __('Adicionar') : __('Alterar') }}</small>
                </h4>
            </div>
            <div class="content-header">
                <a href="{{ route('publicador.escola.parlamento.index') }}" class="btn btn-sm btn-outline-secondary">
                    <i class="bi bi-arrow-left me-1"></i> @lang('labels.acoes.voltar')
                </a>
            </div>


            @if ($errors->any())
                <div class="alert alert-danger shadow-sm">
                    <i class="bi bi-exclamation-triangle me-2"></i> @lang('labels.msg.verifique')
                    <ul class="mb-0 mt-2">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            
            <div class="card shadow-sm border-0 mb-4">
                <div class="card-header bg-primary text-white">
                    <h5 class="card-title mb-0">
                        <i class="bi bi-person me-2"></i>
                        {{ empty($model->id) ? __('Cadastrar') : __('Editar') }} @lang('Participante')
                    </h5>
                </div>
                <div class="card-body">
                    {!! Form::model($model, [
                        'route' => ['publicador.escola.parlamento.salvar'],
                        'method' => 'put',
                        'novalidate' => true,
                        'id' => 'participanteForm',
                    ]) !!}
                    {{ Form::hidden('id') }}

                    <!-- Card: Informações Pessoais -->
                    <div class="form-card mb-4">
                        <div class="card-header bg-light">
                            <h6 class="mb-0 fw-bold text-primary">
                                <i class="bi bi-person-vcard me-2"></i> Informações Pessoais
                            </h6>
                        </div>

                        <div class="card-body">

                            <div class="row">

                                {{-- NOME --}}
                                <div class="col-md-6 mb-3">
                                    <div class="form-group">
                                        {{ Form::label('nome', __('labels.nome'), ['class' => 'form-label fw-bold']) }}
                                        <div class="input-group">
                                            <span class="input-group-text"><i class="bi bi-person"></i></span>
                                            {{ Form::text('nome', null, [
                                                'class' => 'form-control border-left-0' . ($errors->has('nome') ? 'is-invalid' : ''),
                                                'placeholder' => 'Nome completo',
                                                'required' => true,
                                            ]) }}
                                        </div>
                                        @if ($errors->has('nome'))
                                            <div class="invalid-feedback">
                                                <strong>{{ $errors->first('nome') }}</strong>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                                {{-- EMAIL --}}
                                <div class="col-md-6 mb-3">
                                    <div class="form-group">
                                        {{ Form::label('email', __('labels.email'), ['class' => 'form-label fw-bold']) }}
                                        <div class="input-group">
                                            <span class="input-group-text"><i class="bi bi-envelope"></i></span>
                                            {{ Form::email('email', null, [
                                                'class' => 'form-control border-left-0 ' . ($errors->has('email') ? 'is-invalid' : ''),
                                                'placeholder' => 'email@exemplo.com',
                                                'required' => true,
                                            ]) }}
                                        </div>
                                        @if ($errors->has('email'))
                                            <div class="invalid-feedback">
                                                <strong>{{ $errors->first('email') }}</strong>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                                {{-- CPF --}}
                                <div class="col-md-4 mb-3">
                                    <div class="form-group">
                                        {{ Form::label('cpf', 'CPF', ['class' => 'form-label fw-bold']) }}
                                        <div class="input-group">
                                            <span class="input-group-text"><i class="bi bi-card-text"></i></span>
                                            {{ Form::text('cpf', null, [
                                                'class' => 'form-control border-left-0 cpf ' . ($errors->has('cpf') ? 'is-invalid' : ''),
                                                'placeholder' => '000.000.000-00',
                                                'maxlength' => 14,
                                            ]) }}
                                        </div>
                                        @if ($errors->has('cpf'))
                                            <div class="invalid-feedback">
                                                <strong>{{ $errors->first('cpf') }}</strong>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                                {{-- DATA NASCIMENTO --}}
                                <div class="col-md-4 mb-3">
                                    <div class="form-group">
                                        {{ Form::label('data_nascimento', 'Data de Nascimento', ['class' => 'form-label fw-bold']) }}
                                        <div class="input-group">
                                            <span class="input-group-text"><i class="bi bi-calendar-date"></i></span>
                                            {{ Form::date(
                                                'data_nascimento',
                                                isset($model->data_nascimento) ? \Carbon\Carbon::parse($model->data_nascimento) : null,
                                                [
                                                    'class' => 'form-control border-left-0 ' . ($errors->has('data_nascimento') ? 'is-invalid' : ''),
                                                ],
                                            ) }}
                                        </div>
                                        @if ($errors->has('data_nascimento'))
                                            <div class="invalid-feedback">
                                                <strong>{{ $errors->first('data_nascimento') }}</strong>
                                            </div>
                                        @endif
                                    </div>
                                </div>

                                {{-- TELEFONE --}}
                                <div class="col-md-4 mb-3">
                                    <div class="form-group">
                                        {{ Form::label('telefone', __('labels.celular'), ['class' => 'form-label fw-bold']) }}
                                        <div class="input-group">
                                            <span class="input-group-text"><i class="bi bi-phone"></i></span>
                                            {{ Form::text('telefone', null, [
                                                'class' => 'form-control border-left-0 telefone ' . ($errors->has('telefone') ? 'is-invalid' : ''),
                                                'placeholder' => '(99) 99999-9999',
                                                'required' => true,
                                            ]) }}
                                        </div>
                                        @if ($errors->has('telefone'))
                                            <div class="invalid-feedback">
                                                <strong>{{ $errors->first('telefone') }}</strong>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Card: Informações Acadêmicas -->
                    <div class="form-card mb-4">
                        <div class="card-header bg-light">
                            <h6 class="mb-0 fw-bold text-primary">
                                <i class="bi bi-mortarboard me-2"></i> Informações Acadêmicas
                            </h6>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <div class="form-group">
                                        {{ Form::label('instituicao', __('labels.instituicao'), ['class' => 'form-label fw-bold']) }}
                                        <div class="input-group">
                                            <span class="input-group-text"><i class="bi bi-building"></i></span>
                                            {{ Form::text('instituicao', null, [
                                                'class' => 'form-control border-left-0 ' . ($errors->has('instituicao') ? 'is-invalid' : ''),
                                                'placeholder' => 'Nome da instituição de ensino',
                                                'required' => true,
                                            ]) }}
                                        </div>
                                        @if ($errors->has('instituicao'))
                                            <div class="invalid-feedback">
                                                <strong>{{ $errors->first('instituicao') }}</strong>
                                            </div>
                                        @endif
                                    </div>
                                </div>

                                {{-- CIDADE --}}
                                <div class="col-md-6 mb-3">
                                    <div class="form-group">
                                        {{ Form::label('cidade', __('labels.cidade'), ['class' => 'form-label fw-bold']) }}
                                        <div class="input-group">
                                            <span class="input-group-text"><i class="bi bi-geo-alt"></i></span>
                                            {{ Form::select(
                                                'cidade',
                                                isset($model->cidade) ? [$model->cidade => $model->cidade] : [],
                                                $model->cidade ?? null,
                                                [
                                                    'class' => 'form-control border-left-0 cidade-select ' . ($errors->has('cidade') ? 'is-invalid' : ''),
                                                    'required' => true,
                                                    'placeholder' => 'Selecione a cidade',
                                                    'data-dropdown-css-class' => 'select2-dropdown-primary',
                                                ],
                                            ) }}
                                        </div>
                                        @if ($errors->has('cidade'))
                                            <div class="invalid-feedback">
                                                <strong>{{ $errors->first('cidade') }}</strong>
                                            </div>
                                        @endif
                                    </div>
                                </div>

                                {{-- CURSO --}}
                                <div class="col-md-6 mb-3">
                                    <div class="form-group">
                                        {{ Form::label('curso', __('labels.curso'), ['class' => 'form-label fw-bold']) }}
                                        <div class="input-group">
                                            <span class="input-group-text"><i class="bi bi-book"></i></span>
                                            {{ Form::text('curso', null, [
                                                'class' => 'form-control border-left-0 ' . ($errors->has('curso') ? 'is-invalid' : ''),
                                                'placeholder' => 'Curso de graduação',
                                                'required' => true,
                                            ]) }}
                                        </div>
                                        @if ($errors->has('curso'))
                                            <div class="invalid-feedback">
                                                <strong>{{ $errors->first('curso') }}</strong>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                                
                                {{-- PERIODO --}}
                                <div class="col-md-6 mb-3">
                                    <div class="form-group">
                                        {{ Form::label('periodo', __('labels.periodo'), ['class' => 'form-label fw-bold']) }}
                                        <div class="input-group">
                                            <span class="input-group-text"><i class="bi bi-calendar3"></i></span>
                                            {{ Form::text('periodo', null, [
                                                'class' => 'form-control border-left-0 periodo ' . ($errors->has('periodo') ? 'is-invalid' : ''),
                                                'placeholder' => 'Ex: 5º Período',
                                            ]) }}
                                        </div>
                                        @if ($errors->has('periodo'))
                                            <div class="invalid-feedback">
                                                <strong>{{ $errors->first('periodo') }}</strong>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Card: Status e PCD -->
                    <div class="form-card">
                        <div class="card-header bg-light">
                            <h6 class="mb-0 fw-bold text-primary">
                                <i class="bi bi-info-circle me-2"></i> Status e Informações Adicionais
                            </h6>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <div class="form-group">
                                        {{ Form::label('presenca', __('labels.presenca'), ['class' => 'form-label fw-bold']) }}
                                        <div class="mt-2">
                                            <div class="form-check form-check-inline">
                                                {{ Form::radio('presenca_radio', '1', isset($model->presenca) && $model->presenca ? true : false, [
                                                    'class' => 'form-check-input border-left-0 presenca-radio',
                                                    'id' => 'presenca_radio_sim',
                                                ]) }}
                                                <label class="form-check-label" for="presenca_radio_sim">
                                                    <span class="badge bg-success ms-1">
                                                        <i class="bi bi-check-circle-fill me-1"></i> Presente
                                                    </span>
                                                </label>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                {{ Form::radio('presenca_radio', '0', isset($model->presenca) ? !$model->presenca : true, [
                                                    'class' => 'form-check-input border-left-0presenca-radio',
                                                    'id' => 'presenca_radio_nao',
                                                ]) }}
                                                <label class="form-check-label" for="presenca_radio_nao">
                                                    <span class="badge bg-secondary ms-1">
                                                        <i class="bi bi-x-circle-fill me-1"></i> Ausente
                                                    </span>
                                                </label>
                                            </div>

                                            {{ Form::hidden('presenca', isset($model->presenca) ? $model->presenca : 0, ['id' => 'presenca_hidden']) }}
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6 mb-3">
                                    <div class="form-group">
                                        {{ Form::label('pcd', 'Pessoa com Deficiência (PCD)', ['class' => 'form-label fw-bold']) }}
                                        <div class="mt-2">
                                            <div class="form-check form-check-inline">
                                                {{ Form::radio('pcd_radio', '1', isset($model->pcd) && $model->pcd ? true : false, [
                                                    'class' => 'form-check-input border-left-0 pcd-radio',
                                                    'id' => 'pcd_radio_sim',
                                                ]) }}
                                                <label class="form-check-label" for="pcd_radio_sim">
                                                    <span class="badge bg-info ms-1">
                                                        <i class="bi bi-person-wheelchair me-1"></i> Sim
                                                    </span>
                                                </label>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                {{ Form::radio('pcd_radio', '0', isset($model->pcd) ? !$model->pcd : true, [
                                                    'class' => 'form-check-input border-left-0 pcd-radio',
                                                    'id' => 'pcd_radio_nao',
                                                ]) }}
                                                <label class="form-check-label" for="pcd_radio_nao">
                                                    <span class="badge bg-secondary ms-1">
                                                        <i class="bi bi-person me-1"></i> Não
                                                    </span>
                                                </label>
                                            </div>

                                            {{ Form::hidden('pcd', isset($model->pcd) ? $model->pcd : 0, ['id' => 'pcd_hidden']) }}
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-12 mb-3 pcd-tipo-container"
                                    style="{{ isset($model->pcd) && $model->pcd ? '' : 'display:none;' }}">
                                    <div class="form-group">
                                        {{ Form::label('pcd_tipo', 'Tipo de Deficiência', ['class' => 'form-label fw-bold']) }}
                                        <span class="text-danger pcd-required"
                                            style="{{ isset($model->pcd) && $model->pcd ? '' : 'display:none;' }}">*</span>
                                        <div class="input-group">
                                            <span class="input-group-text"><i class="bi bi-tag"></i></span>
                                            {{ Form::text('pcd_tipo', null, [
                                                'class' => 'form-control border-left-0 ' . ($errors->has('pcd_tipo') ? 'is-invalid' : ''),
                                                'placeholder' => 'Especifique o tipo de deficiência',
                                                'required' => isset($model->pcd) && $model->pcd ? true : false,
                                            ]) }}
                                        </div>
                                        @if ($errors->has('pcd_tipo'))
                                            <div class="invalid-feedback">
                                                <strong>{{ $errors->first('pcd_tipo') }}</strong>
                                            </div>
                                        @endif
                                        <div class="form-text text-muted">
                                            <i class="bi bi-info-circle me-1"></i> Ex: Visual, Auditiva, Física,
                                            Intelectual,
                                            etc.
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card-footer bg-white d-flex justify-content-between">
                    <a href="{{ route('publicador.escola.parlamento.index') }}" class="btn btn-outline-secondary">
                        <i class="bi bi-x-circle me-1"></i> @lang('labels.acoes.cancelar')
                    </a>
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-save me-1"></i> @lang('labels.acoes.salvar')
                    </button>
                </div>
                {!! Form::close() !!}
            </div>
        </div>
    </div>

    <style>
        /* Variáveis de cores */
        :root {
            --primary-color: #004071;
            --primary-light: #0056a4;
            --primary-dark: #002c4f;
            --primary-subtle: #d4dfed;
            --secondary-color: #f8f9fa;
            --border-color: #dee2e6;
            --success-color: #28a745;
            --danger-color: #dc3545;
            --info-color: #17a2b8;
            --warning-color: #ffc107;
            --text-color: #333;
            --text-muted: #6c757d;
            --background-color: #f5f6f8;
            --white: #ffffff;
            --card-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            --card-hover-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            --border-radius: 8px;
            --transition-default: all 0.3s ease;
        }

        /* Reset e estrutura geral */
        body {
            background-color: var(--background-color);
            color: var(--text-color);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        }

        .container {
            max-width: 1200px;
        }

        /* Cards e containers */
        .card {
            border-radius: var(--border-radius);
            border: none;
            box-shadow: var(--card-shadow);
            transition: var(--transition-default);
            margin-bottom: 1.5rem;
            overflow: hidden;
        }

        .card:hover {
            box-shadow: var(--card-hover-shadow);
        }

        .card-header {
            border-radius: var(--border-radius) var(--border-radius) 0 0 !important;
            border-bottom: 1px solid var(--border-color);
            padding: 1rem 1.5rem;
            background-color: var(--white);
        }

        .card-header.bg-primary {
            background-color: var(--primary-color) !important;
            color: var(--white);
        }

        .card-header.bg-light {
            background-color: var(--secondary-color) !important;
            border-bottom: 1px solid var(--border-color);
        }

        .card-body {
            padding: 1.25rem;
        }

        .card-footer {
            border-radius: 0 0 var(--border-radius) var(--border-radius) !important;
            border-top: 1px solid var(--border-color);
            padding: 1rem;
            background-color: var(--white);
        }

        /* Formulários e cards específicos */
        .form-card {
            border-radius: var(--border-radius);
            border: 1px solid rgba(0, 0, 0, 0.1);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            margin-bottom: 1.5rem;
            overflow: hidden;
            transition: var(--transition-default);
            background-color: var(--white);
        }

        .form-card:hover {
            box-shadow: 0 4px 8px rgba(0, 64, 128, 0.1);
            transform: translateY(-2px);
        }

        .form-card .card-header {
            padding: 0.75rem 1.25rem;
            background-color: var(--secondary-color);
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        }

        .form-card .card-body {
            padding: 1.25rem;
        }

        /* Elementos de formulário */
        .form-group {
            margin-bottom: 1.5rem;
        }

        .form-label {
            display: block;
            margin-bottom: 0.5rem;
            color: var(--text-color);
            font-weight: 500;
        }

        .form-control {
            border-radius: 6px;
            padding: 0.5rem 0.75rem;
            border: 1px solid var(--border-color);
            width: 100%;
            font-size: 1rem;
            line-height: 1.5;
            color: var(--text-color);
            background-color: var(--white);
            background-clip: padding-box;
            transition: var(--transition-default);
        }

        .form-control:focus {
            border-color: var(--primary-light);
            box-shadow: 0 0 0 0.2rem rgba(0, 64, 113, 0.15);
            outline: 0;
        }

        .form-control.is-invalid {
            border-color: var(--danger-color) !important;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right calc(0.375em + 0.1875rem) center;
            background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
            padding-right: calc(1.5em + 0.75rem);
        }

        .input-group {
            position: relative;
            display: flex;
            flex-wrap: nowrap;
            align-items: stretch;
            width: 100%;
        }

        .select2-container--classic .select2-selection--single {
            border-radius: var(--border-radius);
            height: 45px;
            padding: 8px 15px;
            border: 1px solid var(--card-border);
            font-size: 1rem;
        }

        .select2-container--classic .select2-selection--single .select2-selection__rendered {
            line-height: 28px;
            color: var(--text-color);
        }

        .select2-container--classic .select2-selection--single .select2-selection__arrow {
            height: 43px;
        }

        .select2-container--classic .select2-results__option--highlighted[aria-selected] {
            background-color: var(--accent-color);
        }

        .select2-container--classic .select2-search--dropdown .select2-search__field {
            border: 1px solid var(--accent-light);
            border-radius: var(--border-radius);
            padding: 8px;
        }

        .select2-container--classic .select2-dropdown {
            border-color: var(--accent-light);
            border-radius: var(--border-radius);
        }

        .input-group-text {
            display: flex;
            align-items: center;
            padding: 0.375rem 0.75rem;
            font-size: 1rem;
            font-weight: 400;
            line-height: 1.5;
            color: var(--text-muted);
            text-align: center;
            white-space: nowrap;
            background-color: var(--secondary-color);
            border: 1px solid var(--border-color);
            border-radius: 6px 0 0 6px;
        }

        .input-group>.form-control {
            position: relative;
            flex: 1 1 auto;
            width: 1%;
            min-width: 0;
            margin-bottom: 0;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }

        /* Validação */
        .invalid-feedback {
            display: block;
            width: 100%;
            margin-top: 0.25rem;
            font-size: 80%;
            color: var(--danger-color);
        }

        /* Select2 customizações */
        .select2-container--default .select2-selection--single {
            height: 38px;
            border: 1px solid var(--border-color);
            border-radius: 0 6px 6px 0;
        }

        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 38px;
            padding-left: 12px;
            color: var(--text-color);
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 36px;
        }

        .select2-container--default .select2-selection--single:focus {
            border-color: var(--primary-light);
            outline: 0;
        }

        .select2-container--default .select2-results__option--highlighted[aria-selected] {
            background-color: var(--primary-color);
        }

        .select2-dropdown {
            border-color: var(--primary-light);
            border-radius: var(--border-radius);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }

        .select2-search--dropdown .select2-search__field {
            border: 1px solid var(--border-color);
            border-radius: 4px;
            padding: 4px 8px;
        }

        .select2-container--default .select2-selection--single:focus-within {
            border-color: var(--primary-light);
            box-shadow: 0 0 0 0.2rem rgba(0, 64, 113, 0.15);
        }

        /* Melhorias para Select2 */
        .select2-container {
            display: block !important;
            width: 100% !important;
        }

        .select2-container--default .select2-selection--single {
            background-color: var(--white);
            border: 1px solid var(--border-color);
            height: 38px;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
            box-shadow: none;
        }

        .select2-selection__placeholder {
            color: #aaa;
        }

        .select2-container--default .select2-selection--single .select2-selection__rendered {
            color: var(--text-color);
            line-height: 38px;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 36px;
            right: 6px;
        }

        .select2-dropdown {
            border: 1px solid var(--primary-light);
            border-radius: 0 0 6px 6px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            z-index: 1051;
        }

        .select2-dropdown-primary .select2-results__option--highlighted[aria-selected] {
            background-color: var(--primary-color);
            color: white;
        }

        .select2-container--default .select2-results__option--highlighted[aria-selected] {
            background-color: var(--primary-color);
            color: white;
        }

        .select2-container--default .select2-results__option[aria-selected=true] {
            background-color: var(--primary-subtle);
        }

        .select2-results__option {
            padding: 8px 12px;
            user-select: none;
        }

        .select2-search--dropdown .select2-search__field {
            padding: 8px;
            border: 1px solid var(--border-color);
        }

        .select2-search--dropdown .select2-search__field:focus {
            border-color: var(--primary-light);
            outline: none;
        }

        /* Switches e checkboxes */
        .form-check {
            display: block;
            min-height: 1.5rem;
            padding-left: 1.5em;
            margin-bottom: 0.125rem;
        }

        .form-check-input {
            width: 1em;
            height: 1em;
            margin-top: 0.25em;
            vertical-align: top;
            background-color: var(--white);
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            border: 1px solid var(--border-color);
            appearance: none;
            color-adjust: exact;
            transition: var(--transition-default);
            cursor: pointer;
        }

        /* Radio buttons personalizados */
        .form-check-inline {
            display: inline-flex;
            align-items: center;
            padding-left: 0;
            margin-right: 1rem;
        }

        .form-check-inline .form-check-input {
            position: static;
            margin-top: 0;
            margin-right: 0.3125rem;
            margin-left: 0;
        }

        .form-check-input[type="radio"] {
            border-radius: 50%;
        }

        .form-check-input:checked {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
        }

        .form-check-input[type="radio"]:checked {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
        }

        .form-check-input:focus {
            border-color: var(--primary-light);
            outline: 0;
            box-shadow: 0 0 0 0.2rem rgba(0, 64, 113, 0.15);
        }

        .form-check-label {
            display: inline-block;
            color: var(--text-color);
            cursor: pointer;
        }

        /* Botões */
        .btn {
            display: inline-block;
            font-weight: 500;
            line-height: 1.5;
            color: var(--text-color);
            text-align: center;
            text-decoration: none;
            vertical-align: middle;
            cursor: pointer;
            user-select: none;
            background-color: transparent;
            border: 1px solid transparent;
            padding: 0.5rem 1rem;
            font-size: 1rem;
            border-radius: 6px;
            transition: var(--transition-default);
        }

        .btn-primary {
            color: var(--white);
            background-color: var(--primary-color);
            border-color: var(--primary-color);
        }

        .btn-primary:hover {
            background-color: var(--primary-dark);
            border-color: var(--primary-dark);
            box-shadow: 0 4px 10px rgba(0, 64, 113, 0.25);
        }

        .btn-success {
            color: var(--white);
            background-color: var(--success-color);
            border-color: var(--success-color);
        }

        .btn-success:hover {
            background-color: #218838;
            border-color: #1e7e34;
            box-shadow: 0 4px 10px rgba(40, 167, 69, 0.2);
        }

        .btn-danger {
            color: var(--white);
            background-color: var(--danger-color);
            border-color: var(--danger-color);
        }

        .btn-danger:hover {
            background-color: #c82333;
            border-color: #bd2130;
            box-shadow: 0 4px 10px rgba(220, 53, 69, 0.2);
        }

        .btn-outline-secondary {
            color: var(--text-muted);
            border-color: var(--border-color);
        }

        .btn-outline-secondary:hover {
            color: var(--text-color);
            background-color: var(--secondary-color);
            border-color: var(--border-color);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
        }

        .btn-sm {
            padding: 0.25rem 0.75rem;
            font-size: 0.875rem;
            border-radius: 4px;
        }

        /* Badges */
        .badge {
            display: inline-block;
            padding: 0.35em 0.65em;
            font-size: 0.75em;
            font-weight: 600;
            line-height: 1;
            color: var(--white);
            text-align: center;
            white-space: nowrap;
            vertical-align: baseline;
            border-radius: 50rem;
        }

        .bg-primary {
            background-color: var(--primary-color) !important;
        }

        .bg-success {
            background-color: var(--success-color) !important;
        }

        .bg-danger {
            background-color: var(--danger-color) !important;
        }

        .bg-info {
            background-color: var(--info-color) !important;
        }

        .bg-secondary {
            background-color: var(--text-muted) !important;
        }

        .bg-light {
            background-color: var(--secondary-color) !important;
            color: var(--text-muted) !important;
        }

        .text-white {
            color: var(--white) !important;
        }

        .text-primary {
            color: var(--primary-color) !important;
        }

        .text-secondary {
            color: var(--text-muted) !important;
        }

        .text-danger {
            color: var(--danger-color) !important;
        }

        /* Utilitários */
        .fw-bold {
            font-weight: 600 !important;
        }

        .d-flex {
            display: flex !important;
        }

        .justify-content-between {
            justify-content: space-between !important;
        }

        .align-items-center {
            align-items: center !important;
        }

        .me-1 {
            margin-right: 0.25rem !important;
        }

        .me-2 {
            margin-right: 0.5rem !important;
        }

        .me-3 {
            margin-right: 1rem !important;
        }

        .ms-1 {
            margin-left: 0.25rem !important;
        }

        .ms-2 {
            margin-left: 0.5rem !important;
        }

        .mb-0 {
            margin-bottom: 0 !important;
        }

        .mb-1 {
            margin-bottom: 0.25rem !important;
        }

        .mb-2 {
            margin-bottom: 0.5rem !important;
        }

        .mb-3 {
            margin-bottom: 1rem !important;
        }

        .mb-4 {
            margin-bottom: 1.5rem !important;
        }

        .mt-0 {
            margin-top: 0 !important;
        }

        .mt-1 {
            margin-top: 0.25rem !important;
        }

        .mt-2 {
            margin-top: 0.5rem !important;
        }

        .mt-3 {
            margin-top: 1rem !important;
        }

        .mt-4 {
            margin-top: 1.5rem !important;
        }

        .py-2 {
            padding-top: 0.5rem !important;
            padding-bottom: 0.5rem !important;
        }

        .py-3 {
            padding-top: 1rem !important;
            padding-bottom: 1rem !important;
        }

        .py-4 {
            padding-top: 1.5rem !important;
            padding-bottom: 1.5rem !important;
        }

        .px-4 {
            padding-left: 1.5rem !important;
            padding-right: 1.5rem !important;
        }

        /* Alertas */
        .alert {
            position: relative;
            padding: 1rem 1.5rem;
            margin-bottom: 1rem;
            border: 1px solid transparent;
            border-radius: var(--border-radius);
            box-shadow: var(--card-shadow);
        }

        .alert-danger {
            color: #721c24;
            background-color: #f8d7da;
            border-color: #f5c6cb;
        }

        .alert-success {
            color: #155724;
            background-color: #d4edda;
            border-color: #c3e6cb;
        }

        /* Animações */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .alert,
        .card,
        .form-card {
            animation: fadeIn 0.3s ease forwards;
        }

        /* Responsividade */
        @media (max-width: 768px) {
            .container {
                padding-left: 15px;
                padding-right: 15px;
            }

            .btn {
                padding: 0.4rem 0.8rem;
            }

            .form-card .card-body {
                padding: 1rem;
            }

            .card-header,
            .card-footer {
                padding: 0.75rem 1rem;
            }

            .form-check-inline {
                margin-bottom: 0.5rem;
                display: flex;
            }
        }

        /* Extras para formulários avançados */
        .form-text {
            margin-top: 0.25rem;
            font-size: 0.875em;
            color: var(--text-muted);
        }

        .form-select {
            display: block;
            width: 100%;
            padding: 0.375rem 2.25rem 0.375rem 0.75rem;
            font-size: 1rem;
            font-weight: 400;
            line-height: 1.5;
            color: var(--text-color);
            background-color: var(--white);
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right 0.75rem center;
            background-size: 16px 12px;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
            appearance: none;
        }

        /* Ícones Bootstrap */
        .bi {
            display: inline-block;
            vertical-align: -0.125em;
        }
    </style>

    <script type="text/javascript">
        $(document).ready(function() {
            // Máscara para CPF
            $('.cpf').mask('000.000.000-00', {
                clearIfNotMatch: true,
                placeholder: '000.000.000-00'
            });

            // Máscara para telefone
            $('.telefone').mask('(00) 00000-0000', {
                clearIfNotMatch: true,
                placeholder: '(99) 99999-9999'
            });

            // Formatação para o campo de período
            function formatarPeriodo(valor) {
                var numero = valor.replace(/\D/g, '');

                if (numero) {
                    var numeroInt = parseInt(numero);
                    if (numeroInt < 1) numeroInt = 1;
                    if (numeroInt > 10) numeroInt = 10;
                    return numeroInt + 'º Período';
                }
                return '';
            }

            $('.periodo').on('input', function() {
                var valor = $(this).val().replace(/\D/g, '');

                if (valor) {
                    valor = parseInt(valor);
                    if (valor < 1) valor = 1;
                    if (valor > 10) valor = 10;

                    $(this).val(valor + 'º Período');
                }
            });

            $('.periodo').on('blur', function() {
                $(this).val(formatarPeriodo($(this).val()));
            });

            $('.periodo').on('focus', function() {
                var input = $(this);
                setTimeout(function() {
                    var valorAtual = input.val();
                    var posicaoFinal = valorAtual.indexOf('º');
                    if (posicaoFinal > 0) {
                        input[0].setSelectionRange(0, posicaoFinal);
                    }
                }, 10);
            });

            // Integração com API IBGE para listar cidades do Paraná
            $.ajax({
                url: 'https://servicodados.ibge.gov.br/api/v1/localidades/estados/41/municipios',
                method: 'GET',
                dataType: 'json',
                success: function(data) {
                    const cidades = data.map(municipio => ({
                        id: municipio.nome,
                        text: municipio.nome
                    }));

                    $('.cidade-select').select2({
                        data: cidades,
                        theme: "classic",
                        width: '100%',
                        placeholder: "Selecione ou digite para buscar uma cidade",
                        allowClear: true,
                        language: {
                            noResults: function() {
                                return "Nenhuma cidade encontrada";
                            },
                            searching: function() {
                                return "Buscando...";
                            }
                        },
                        dropdownParent: $('.cidade-select').closest('.input-group')
                    });

                    // Ajustar o estilo do Select2 para combinar com o input-group
                    $('.select2-container--classic .select2-selection--single').css({
                        'border-top-left-radius': '0',
                        'border-bottom-left-radius': '0',
                        'border-left': 'none'
                    });
                },
                error: function() {
                    // Fallback para digitação manual se a API falhar
                    $('.cidade-select').select2({
                        theme: "classic",
                        width: '100%',
                        tags: true,
                        placeholder: "Digite o nome da cidade",
                        allowClear: true,
                        dropdownParent: $('.cidade-select').closest('.input-group')
                    });
                }
            });

            // Radio buttons para PCD
            $('.pcd-radio').change(function() {
                var value = $(this).val();
                $('#pcd_hidden').val(value);

                if (value === '1') {
                    $('.pcd-tipo-container').slideDown(300);
                    $('#pcd_tipo').prop('required', true);
                    $('.pcd-required').show();
                } else {
                    $('.pcd-tipo-container').slideUp(300);
                    $('#pcd_tipo').prop('required', false);
                    $('.pcd-required').hide();
                }
            });

            // Radio buttons para presença
            $('.presenca-radio').change(function() {
                var value = $(this).val();
                $('#presenca_hidden').val(value);
            });

            // Validação de CPF
            function isValidCPF(cpf) {
                cpf = cpf.replace(/[^\d]+/g, '');

                if (cpf.length !== 11 || /^(\d)\1{10}$/.test(cpf)) {
                    return false;
                }

                let sum = 0;
                for (let i = 0; i < 9; i++) {
                    sum += parseInt(cpf.charAt(i)) * (10 - i);
                }
                let remainder = (sum * 10) % 11;
                if (remainder === 10 || remainder === 11) remainder = 0;
                if (remainder !== parseInt(cpf.charAt(9))) {
                    return false;
                }

                sum = 0;
                for (let i = 0; i < 10; i++) {
                    sum += parseInt(cpf.charAt(i)) * (11 - i);
                }
                remainder = (sum * 10) % 11;
                if (remainder === 10 || remainder === 11) remainder = 0;

                return remainder === parseInt(cpf.charAt(10));
            }

            // Validação do formulário
            $('#participanteForm').submit(function(e) {
                let isValid = true;

                // Validar campos obrigatórios
                $(this).find('[required]').each(function() {
                    if ($(this).val() === '' || $(this).val() === null) {
                        $(this).addClass('is-invalid');
                        isValid = false;
                    }
                });

                // Validar CPF se preenchido
                const cpf = $('#cpf').val();
                if (cpf && !isValidCPF(cpf)) {
                    $('#cpf').addClass('is-invalid');
                    if (!$('#cpf').next('.invalid-feedback').length) {
                        $('#cpf').after(
                            '<div class="invalid-feedback"><strong>CPF inválido</strong></div>');
                    }
                    isValid = false;
                }

                // Validar se PCD está marcado e tipo não está preenchido
                if ($('#pcd_hidden').val() === '1' && $('#pcd_tipo').val() === '') {
                    $('#pcd_tipo').addClass('is-invalid');
                    if (!$('#pcd_tipo').next('.invalid-feedback').length) {
                        $('#pcd_tipo').after(
                            '<div class="invalid-feedback"><strong>Informe o tipo de deficiência</strong></div>'
                        );
                    }
                    isValid = false;
                }

                if (!isValid) {
                    e.preventDefault();

                    // Scroll para o primeiro campo com erro
                    const firstInvalid = $('.is-invalid:first');
                    if (firstInvalid.length) {
                        $('html, body').animate({
                            scrollTop: firstInvalid.offset().top - 100
                        }, 200);
                    }

                    Swal.fire({
                        icon: 'error',
                        title: 'Erro de Validação',
                        text: 'Por favor, verifique os campos destacados em vermelho.',
                        confirmButtonColor: '#0d6efd'
                    });
                } else {
                    // Mostrar indicador de loading
                    Swal.fire({
                        title: 'Salvando...',
                        text: 'Processando os dados do participante',
                        allowOutsideClick: false,
                        didOpen: () => {
                            Swal.showLoading();
                        }
                    });
                }
            });

            // Remover validação visual ao editar campo
            $(document).on('input change', '.is-invalid', function() {
                $(this).removeClass('is-invalid');
                $(this).next('.invalid-feedback').remove();
            });
        });
    </script>
@endsection