@extends('layouts.publicador.default')
{{-- input: $title, model, fields --}}

@section('modal')
    <div class="modal-img-overlay" id="imageModal">
        <div class="modal-img-container">
            <button type="button" class="modal-img-close" id="modalClose">
                <i class="bi bi-x-lg"></i>
            </button>
            <img src="" alt="Preview" id="modalImage">
        </div>
    </div>

    <style>
        .modal-img-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.85);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1050;
            opacity: 0;
            visibility: hidden;
            transition: all var(--transition-base);
        }

        .modal-img-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        .modal-img-container {
            position: relative;
            max-width: 90%;
            max-height: 90%;
        }

        .modal-img-container img {
            max-width: 100%;
            max-height: 90vh;
            border-radius: var(--bs-border-radius-lg);
            box-shadow: var(--shadow-xl);
        }

        .modal-img-close {
            position: absolute;
            top: -48px;
            right: 0;
            width: 40px;
            height: 40px;
            background: var(--bs-white);
            border: none;
            border-radius: var(--bs-border-radius-pill);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: var(--font-size-lg);
            color: var(--color-gray-700);
            cursor: pointer;
            transition: all var(--transition-fast);
        }

        .modal-img-close:hover {
            background: var(--bs-danger);
            color: var(--bs-white);
            transform: rotate(90deg);
        }
    </style>
@endsection

@section('content')
    <div class="container my-4 py-3">
        <div class="card shadow-sm border-0 rounded-3">
            <div class="card-header bg-white border-bottom py-3">
                <div class="d-flex align-items-center">
                    <i class="bi bi-file-earmark-text text-primary fs-4 me-3"></i>
                    <h4 class="mb-0">
                        {{ $title }}
                        <span class="badge bg-primary ms-2 fs-6">
                            {{ !empty($model) ? 'Editar' : 'Cadastrar' }}
                        </span>
                    </h4>
                </div>
            </div>

            <div class="card-body p-4">

                @if ($errors->any())
                    <div class="alert alert-danger">
                        <i class="bi bi-exclamation-circle"></i>
                        <div>@lang('labels.msg.verifique')</div>
                    </div>
                @endif

                @if (session('status-success'))
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        {{ session('status-success') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif

                @if (session('status-error'))
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        {{ session('status-error') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif

                @if (empty($model))
                    {{ html()->form('POST', empty($hrefsalvar) ? route($route . '.salvar') : $hrefsalvar)->class('form form-edit')->acceptsFiles()->open() }}
                @else
                    {{ html()->modelForm($model, 'PUT', empty($hrefeditar) ? route($route . '.salvar', [$model]) : $hrefeditar)->class('form form-edit')->acceptsFiles()->open() }}
                    {{ html()->hidden('id') }}
                @endif

                @php
                    $jquery = false;
                    $select2 = false;
                @endphp

                @foreach ($fields as $group)
                    <div class="card mb-4 border-0 shadow-sm">
                        <div class="card-header bg-white border-0 py-3">
                            <div class="d-flex align-items-center">
                                <div class="bg-primary bg-opacity-10 p-3 rounded-circle me-3">
                                    <i class="bi bi-{{ $group['icon'] }} text-primary"></i>
                                </div>
                                <div>
                                    <h5 class="mb-0 fw-bold">{{ $group['title'] }}</h5>
                                    @if (!empty($group['subtitle']))
                                        <p class="m-0 fs-6 fw-light">{{ $group['subtitle'] }}</p>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <div class="card-body">
                            <div class="row g-3">
                                @foreach ($group['fields'] as $field)
                                    @php
                                        $type = $field['type'];
                                        $name = $field['name'];
                                    @endphp

                                    <div class="{{ $field['cols'] }}">
                                        @switch($type)
                                            @case('switch')
                                                <div class="form-check form-switch">
                                                    {{ html()->checkbox($field['name'], old($field['name']))->class(['form-check-input', 'is-invalid' => $errors->has($field['name'])]) }}
                                                    @if (!empty($field['title']))
                                                        {{ html()->label($field['title'], $field['name'])->class('form-check-label fw-semibold mb-1') }}
                                                    @endif
                                                </div>
                                            @break

                                            @case('switchtext')
                                                @if (!empty($field['title']))
                                                    {{ html()->label($field['title'], $field['name'])->class('form-check-label fw-semibold mb-1') }}
                                                @endif

                                                <div class="input-group mb-3">
                                                    <div class="input-group-text">
                                                        {{ html()->checkbox($field['name'], old($field['name']))->class(['form-check-input', 'switchtext_checkbox', 'is-invalid' => $errors->has($field['name'])]) }}
                                                    </div>
                                                    {{ html()->text($field['extra_name'], old($field['extra_name']))->class(['form-control', 'switchtext_text', 'is-invalid' => $errors->has($field['extra_name'])])->placeholder($field['extra_placeholder']) }}
                                                </div>
                                            @break

                                            @case('button')
                                                <div class="h-100 d-flex justify-content-center">
                                                    <a style="height: fit-content" class="btn btn-info btn-lg"
                                                        href="{{ $field['href'] }}"><i
                                                            class="buttonicon bi bi-{{ $field['icon'] }}"></i>{{ $field['title'] }}</a>
                                                </div>
                                            @break

                                            @case('image')
                                                <div class="section-body">
                                                    <div class="upload-container">
                                                        <div class="upload-dropzone" id="uploadDropzone">
                                                            <input type="file" name="{{ $field['name'] }}" id="inputImagem"
                                                                accept="image/*">
                                                            <div class="dropzone-content">
                                                                <div class="dropzone-icon">
                                                                    <i class="bi bi-cloud-arrow-up"></i>
                                                                </div>
                                                                <div class="dropzone-text">
                                                                    <span class="dropzone-title">Clique para selecionar</span>
                                                                    <span class="dropzone-subtitle">ou arraste uma imagem
                                                                        aqui</span>
                                                                </div>
                                                                <div class="dropzone-info">
                                                                    <span><i class="bi bi-file-image"></i> JPG, PNG, GIF</span>
                                                                    <span><i class="bi bi-hdd"></i> Máximo 2MB</span>
                                                                </div>
                                                            </div>
                                                            <div class="dropzone-progress" id="uploadProgress">
                                                                <div class="progress-bar">
                                                                    <div class="progress-fill"></div>
                                                                </div>
                                                                <span class="progress-text">Carregando...</span>
                                                            </div>
                                                        </div>

                                                        <div class="upload-preview" id="uploadPreview">
                                                            @if (!empty($model))
                                                                {{ html()->hidden('exists', 1) }}
                                                                @if (!empty($model->imagem) && is_file(public_path($model->caminho_completo)))
                                                                    <img src="{{ url($model->caminho_completo) }}" alt="Preview"
                                                                        id="previewImage">
                                                                    <div class="preview-overlay">
                                                                        <button type="button" class="btn-preview-action"
                                                                            id="btnZoom" title="Ampliar">
                                                                            <i class="bi bi-zoom-in"></i>
                                                                        </button>
                                                                        <button type="button" class="btn-preview-action"
                                                                            id="btnRemove" title="Remover">
                                                                            <i class="bi bi-trash"></i>
                                                                        </button>
                                                                    </div>
                                                                @else
                                                                    Arquivo não encontrado!
                                                                @endif
                                                            @else
                                                                {{ html()->hidden('exists', 0) }}
                                                                <div class="preview-empty">
                                                                    <i class="bi bi-image"></i>
                                                                    <span>Pré-visualização</span>
                                                                </div>
                                                            @endif
                                                        </div>
                                                    </div>
                                                    @if ($errors->has($field['name']))
                                                        <span
                                                            class="field-message error">{{ $errors->first($field['name']) }}</span>
                                                    @endif
                                                </div>
                                            @break

                                            @case('cursovagasstatus')
                                                @if (!empty($model))
                                                    <div
                                                        class="status-card {{ empty($model->limite_vagas) ? 'status-success' : ($model->isVagasEsgotadas ? 'status-danger' : 'status-info') }}">
                                                        <div class="status-icon">
                                                            <i
                                                                class="bi {{ empty($model->limite_vagas) ? 'bi-infinity' : ($model->isVagasEsgotadas ? 'bi-x-circle-fill' : 'bi-check-circle-fill') }}"></i>
                                                        </div>
                                                        <div class="status-content">
                                                            <span class="status-number">{{ $model->vagasPreenchidas }}</span>
                                                            <span
                                                                class="status-label">{{ $model->vagasPreenchidas == 1 ? 'inscrito' : 'inscritos' }}</span>
                                                            @if (!empty($model->limite_vagas))
                                                                <span class="status-divider">/</span>
                                                                <span class="status-number">{{ $model->limite_vagas }}</span>
                                                                <span class="status-label">vagas</span>
                                                            @endif
                                                        </div>
                                                        <div class="status-badge">
                                                            @if (empty($model->limite_vagas))
                                                                <span class="badge text-bg-success">Sem Limite</span>
                                                            @elseif ($model->vagasDisponiveis > 0)
                                                                <span class="badge text-bg-info">{{ $model->vagasDisponiveis }}
                                                                    disponíveis</span>
                                                            @else
                                                                <span class="badge text-bg-danger">Esgotado</span>
                                                            @endif
                                                        </div>
                                                    </div>
                                                @endif
                                            @break

                                            @default
                                                @if (!empty($field['title']))
                                                    {{ html()->label($field['title'], $field['name'])->class('form-label fw-semibold mb-1') }}

                                                    @if (!empty($field['tooltip']))
                                                        <span style="cursor: help" class="text-secondary"
                                                            data-bs-toggle="tooltip" data-bs-title="{{ $field['tooltip'] }}">
                                                            <i class="bi bi-question-circle"></i>
                                                        </span>
                                                    @endif

                                                    @if (!empty($field['optional']) && $field['optional'])
                                                        <span class="badge text-bg-secondary">Opcional</span>
                                                    @endif
                                                @endif
                                                <div class="input-group">
                                                    @if (!empty($field['icon']))
                                                        <span class="input-group-text bg-light"><i
                                                                class="bi bi-{{ $field['icon'] }}"></i></span>
                                                    @endif

                                                    @switch($type)
                                                        @case('text')
                                                        @case('tel')

                                                        @case('url')
                                                        @case('email')
                                                            {{ html()->input($type, $field['name'], old($field['name']))->class(['form-control', 'is-invalid' => $errors->has($field['name'])])->placeholder($field['placeholder'])->attribute('inputmode', $field['inputmode'])->attributeIf(!empty($field['maxlength']), 'maxlength', $field['maxlength']) }}
                                                            @if (!empty($field['maxlength']))
                                                                <span class="input-group-text justify-content-end text-secondary"
                                                                    style="min-width: 5.5em"><span
                                                                        class="counter">0</span>/{{ $field['maxlength'] }}</span>
                                                            @endif

                                                            @if (!empty($field['mask']))
                                                                <script>
                                                                    'use strict';

                                                                    addEventListener("DOMContentLoaded", (event) => {
                                                                        const element = document.getElementById('{{ $field['name'] }}');

                                                                        // Se o valor no DB não passar na mascara, não aplique mascara
                                                                        @if (!empty($model) && !empty($model->$name))
                                                                            const piped = IMask.pipe('{{ $model->$name }}', {
                                                                                mask: '{{ $field['mask'] }}'
                                                                            });
                                                                            const run = (piped == '{{ $model->$name }}');
                                                                        @else
                                                                            const run = true;
                                                                        @endif

                                                                        if (run) {
                                                                            window.mask{{ $name }} = IMask(element, {
                                                                                mask: '{{ $field['mask'] }}',
                                                                                lazy: false,
                                                                                placeholderChar: '_',
                                                                            });

                                                                            @if (!empty($field['validate']))
                                                                                const input = document.querySelector('#{{ $field['name'] }}');
                                                                                input.addEventListener("input", (event) => {
                                                                                    const valid = {{ $field['validate'] }}(window.mask{{ $name }}
                                                                                        .unmaskedValue);
                                                                                    console.log(valid, window.mask{{ $name }}.unmaskedValue);
                                                                                    input.setCustomValidity(valid ? '' : 'Campo incorreto');
                                                                                });
                                                                            @endif
                                                                        }
                                                                    })
                                                                </script>
                                                            @endif
                                                        @break

                                                        @case('textarea')
                                                            {{ html()->input($type, $field['name'], old($field['name']))->class(['form-control', 'tinymceselector', 'is-invalid' => $errors->has($field['name'])])->placeholder($field['placeholder']) }}
                                                        @break

                                                        @case('number')
                                                            {{ html()->number($field['name'], old($field['name']), $field['min'], $field['max'], 1)->class(['form-control', 'is-invalid' => $errors->has($field['name'])]) }}
                                                        @break

                                                        @case('horasminutos')
                                                            {{ html()->number($field['name'] . '_horas', old($field['name'], empty($model) ? $field['def'] : intdiv($model->$name, 60)), $field['min'], $field['max'], 1)->class(['form-control', 'horasminutos_horas', 'is-invalid' => $errors->has($field['name'])]) }}
                                                            <span class="input-group-text">Horas</span>
                                                            {{ html()->number($field['name'] . '_minutos', old($field['name'], empty($model) ? 0 : $model->$name % 60), 0, 55, 5)->class(['form-control', 'horasminutos_minutos', 'is-invalid' => $errors->has($field['name'])]) }}
                                                            <span class="input-group-text">Minutos</span>
                                                            {{ html()->hidden($field['name'], '')->class('horasminutos_hidden') }}
                                                        @break

                                                        @case('select')
                                                            {{ html()->select($field['name'], $field['options'], old($field['name']))->class('form-select')->placeholder($field['placeholder']) }}
                                                        @break

                                                        @case('file')
                                                            {{ html()->file($field['name'])->class('form-control')->attribute('accept', $field['accept']) }}
                                                        @break

                                                        @case('date')
                                                            {{ html()->date($field['name'], old($field['name']))->class('form-control') }}
                                                        @break

                                                        @case('datetime')
                                                            {{ html()->datetime($field['name'], old($field['name'], empty($model) ? $field['def'] : null))->class('form-control') }}
                                                        @break

                                                        @case('cidadespr')
                                                            {{ html()->select($field['name'], isset($model->cidade) ? [$model->cidade => $model->cidade] : [], old($field['name']))->class('form-select') }}

                                                            @php
                                                                $jquery = true;
                                                                $select2 = true;
                                                            @endphp

                                                            <script type="text/javascript">
                                                                document.addEventListener('DOMContentLoaded', function() {
                                                                    // 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
                                                                            }));

                                                                            $('#{{ $field['name'] }}').select2({
                                                                                data: cidades,
                                                                                theme: "bootstrap-5",
                                                                                placeholder: "Selecione ou digite para buscar uma cidade",
                                                                                allowClear: true,
                                                                                language: {
                                                                                    noResults: function() {
                                                                                        return "Nenhuma cidade encontrada";
                                                                                    },
                                                                                    searching: function() {
                                                                                        return "Buscando...";
                                                                                    }
                                                                                },
                                                                                dropdownParent: $('#{{ $field['name'] }}').closest('.input-group')
                                                                            });

                                                                        },
                                                                        error: function() {
                                                                            // Fallback para digitação manual se a API falhar
                                                                            $('#{{ $field['name'] }}').select2({
                                                                                theme: "classic",
                                                                                width: '100%',
                                                                                tags: true,
                                                                                placeholder: "Digite o nome da cidade",
                                                                                allowClear: true,
                                                                                dropdownParent: $('#{{ $field['name'] }}').closest('.input-group')
                                                                            });
                                                                        }
                                                                    });

                                                                    // Validação do formulário
                                                                    $('#participanteForm').on('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;
                                                                            }
                                                                        });

                                                                        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>
                                                        @break
                                                    @endswitch

                                                    @if (!empty($field['aftertext']))
                                                        <span class="input-group-text">{{ $field['aftertext'] }}</span>
                                                    @endif
                                                </div>
                                            @break

                                        @endswitch

                                        @if ($field['name'] and $errors->has($field['name']))
                                            <div class="text-danger small mt-1 error">{{ $errors->first($field['name']) }}
                                            </div>
                                        @endif
                                        @if (!empty($field['text']))
                                            <div id="{{ $field['name'] }}_info" class="form-text">{{ $field['text'] }}
                                            </div>
                                        @endif
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                @endforeach
                {{ $extra }}


                <div class="d-flex justify-content-center gap-3 mt-4">
                    <a href="{{ empty($hrefcancel) ? route($route . '.index') : $hrefcancel }}"
                        class="btn btn-outline-secondary btn-lg">
                        <i class="bi bi-x-lg me-2"></i>Cancelar
                    </a>
                    <button id="submit" type=@if (!empty($nosubmit) && $nosubmit) "button" @else "submit" @endif
                        class="btn btn-success btn-lg">
                        <i class="bi bi-save me-2"></i>
                        {{ !empty($model) ? 'Atualizar' : 'Cadastrar' }}
                    </button>
                </div>

                @if (empty($model))
                    {{ html()->form()->close() }}
                @else
                    {{ html()->closeModelForm() }}
                @endif
            </div>
        </div>
    </div>

    @if ($select2)
        <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
        <link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css"
            rel="stylesheet" />
        <script defer src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    @endif
    @if (!empty($tinymce))
        @include('layouts.publicador.tinymce')
    @endif
    <script defer src="{{ asset('assets/libs/imask/imask.min.js') }}"></script>

    <script>
        "use strict";

        function update_switchtext(checkbox) {
            const textinput = checkbox.parentElement.parentElement.querySelector(".switchtext_text");
            if (checkbox.checked) {
                textinput.setAttribute('required', "");
                textinput.removeAttribute('disabled');
            } else {
                textinput.setAttribute('disabled', "");
                textinput.removeAttribute('required');
            }
        }

        function update_horasminutos(input) {
            const horas = Number(input.parentElement.querySelector('.horasminutos_horas').value);
            const minutos = Number(input.parentElement.querySelector('.horasminutos_minutos').value);
            input.parentElement.querySelector('.horasminutos_hidden').value = horas * 60 + minutos;
        }

        function updateCounter(input) {
            const counter = input.parentElement.querySelector('.counter');
            counter.textContent = input.value.length;
        }

        document.addEventListener('DOMContentLoaded', function() {
            const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
            const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => {
                return new bootstrap.Tooltip(tooltipTriggerEl, {
                    boundary: document.body,
                    fallbackPlacements: ['top', 'bottom', 'right', 'left'],
                    html: true,
                    sanitize: true,
                    container: 'body',
                    customClass: 'custom-tooltip'
                });
            });

            document.querySelectorAll('input[maxlength]').forEach(input => {
                input.addEventListener('input', event => updateCounter(input));
                updateCounter(input);
            });

            document.querySelectorAll('.switchtext_checkbox').forEach(checkbox => {
                checkbox.addEventListener('change', event => update_switchtext(event.target));
                update_switchtext(checkbox);
            });

            document.querySelectorAll('.horasminutos_horas, .horasminutos_minutos').forEach(input => {
                input.addEventListener('change', event => update_horasminutos(event.target));
                update_horasminutos(input);
            });

            const firstError = document.querySelector('.error');
            if (firstError) {
                firstError.scrollIntoView({
                    behavior: 'smooth',
                    block: 'center'
                });
                const input = firstError.parentElement.querySelector('input')
                if (input) {
                    input.focus();
                }
            }
        });


        // Drag drop files 

        (function() {
            const dropzone = document.getElementById('uploadDropzone');
            const input = document.getElementById('inputImagem');
            const preview = document.getElementById('uploadPreview');

            if (!dropzone || !input || !preview) return;

            ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(function(eventName) {
                dropzone.addEventListener(eventName, function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                });
            });

            ['dragenter', 'dragover'].forEach(function(eventName) {
                dropzone.addEventListener(eventName, function() {
                    dropzone.classList.add('dragover');
                });
            });

            ['dragleave', 'drop'].forEach(function(eventName) {
                dropzone.addEventListener(eventName, function() {
                    dropzone.classList.remove('dragover');
                });
            });

            dropzone.addEventListener('drop', function(e) {
                const files = e.dataTransfer.files;
                if (files.length) {
                    input.files = files;
                    handleFile(files[0]);
                }
            });

            input.addEventListener('change', function() {
                if (this.files.length) {
                    handleFile(this.files[0]);
                }
            });

            function handleFile(file) {
                if (!file.type.match('image.*')) {
                    alert('Por favor, selecione uma imagem válida.');
                    return;
                }

                if (file.size > 2 * 1024 * 1024) {
                    alert('A imagem deve ter no máximo 2MB.');
                    return;
                }

                dropzone.classList.add('uploading');

                const reader = new FileReader();

                reader.onload = function(e) {
                    setTimeout(function() {
                        dropzone.classList.remove('uploading');

                        preview.innerHTML = `
                                    <img src="${e.target.result}" alt="Preview" id="previewImage">
                                    <div class="preview-overlay">
                                        <button type="button" class="btn-preview-action" id="btnZoom" title="Ampliar">
                                            <i class="bi bi-zoom-in"></i>
                                        </button>
                                        <button type="button" class="btn-preview-action" id="btnRemove" title="Remover">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </div>
                                `;

                        initPreviewButtons();
                    }, 500);
                };

                reader.readAsDataURL(file);
            }

            function initPreviewButtons() {
                const btnZoom = document.getElementById('btnZoom');
                const btnRemove = document.getElementById('btnRemove');

                if (btnZoom) {
                    btnZoom.addEventListener('click', function() {
                        const img = document.getElementById('previewImage');
                        if (img) {
                            document.getElementById('modalImage').src = img.src;
                            document.getElementById('imageModal').classList.add('active');
                        }
                    });
                }

                if (btnRemove) {
                    btnRemove.addEventListener('click', function() {
                        input.value = '';
                        preview.innerHTML = `
                                    <div class="preview-empty">
                                        <i class="bi bi-image"></i>
                                        <span>Pré-visualização</span>
                                    </div>
                                `;
                    });
                }
            }

            initPreviewButtons();


            const modal = document.getElementById('imageModal');
            const closeBtn = document.getElementById('modalClose');

            if (!modal) return;

            if (closeBtn) {
                closeBtn.addEventListener('click', function() {
                    modal.classList.remove('active');
                });
            }

            modal.addEventListener('click', function(e) {
                if (e.target === modal) {
                    modal.classList.remove('active');
                }
            });

            document.addEventListener('keydown', function(e) {
                if (e.key === 'Escape' && modal.classList.contains('active')) {
                    modal.classList.remove('active');
                }
            });

        })();


        ////Validation


        // Validação de CPF
        function validate_cpf(cpf) {
            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));
        }

        document.addEventListener('DOMContentLoaded', function() {
            // Form validation
            const form = document.querySelector('.form-edit');
            form.addEventListener('submit', function(event) {
                const requiredFields = form.querySelectorAll('input[required], select[required]');
                let hasError = false;

                requiredFields.forEach(field => {
                    if (!field.value.trim()) {
                        field.classList.add('is-invalid');
                        hasError = true;
                    } else {
                        field.classList.remove('is-invalid');
                    }
                });

                if (hasError) {
                    event.preventDefault();
                    // Scroll to first error
                    const firstError = form.querySelector('.is-invalid');
                    firstError.scrollIntoView({
                        behavior: 'smooth',
                        block: 'center'
                    });
                }
            });
        });
    </script>

    <style>
        /* Palestra status */
        .status-card {
            display: flex;
            align-items: center;
            gap: var(--spacing-4);
            padding: var(--spacing-4) var(--spacing-5);
            border-radius: var(--bs-border-radius-lg);
            margin-top: var(--spacing-5);
        }

        .status-success {
            background: var(--bs-success-bg-subtle);
            border-left: 4px solid var(--bs-success-border-subtle);
        }

        .status-info {
            background: var(--bs-info-bg-subtle);
            border-left: 4px solid var(--bs-info-border-subtle);
        }

        .status-danger {
            background: var(--bs-danger-bg-subtle);
            border-left: 4px solid var(--bs-danger-border-subtle);
        }

        .status-icon {
            font-size: 2rem;
        }

        .status-success .status-icon {
            color: var(--bs-success);
        }

        .status-info .status-icon {
            color: var(--bs-info);
        }

        .status-danger .status-icon {
            color: var(--bs-danger);
        }

        .status-content {
            display: flex;
            align-items: baseline;
            gap: var(--spacing-2);
            flex: 1;
        }

        .status-number {
            font-size: var(--font-size-2xl);
            font-weight: 700;
            color: var(--color-gray-800);
        }

        .status-label {
            font-size: var(--font-size-sm);
            color: var(--color-gray-600);
        }

        .status-divider {
            color: var(--color-gray-400);
        }



        /* Drag drop files */
        .upload-container {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: var(--spacing-5);
        }

        @media (max-width: 768px) {
            .upload-container {
                grid-template-columns: 1fr;
            }
        }

        .upload-dropzone {
            border: 2px dashed var(--color-gray-300);
            border-radius: var(--bs-border-radius-lg);
            padding: var(--spacing-8);
            text-align: center;
            cursor: pointer;
            transition: all var(--transition-base);
            position: relative;
            overflow: hidden;
        }

        .upload-dropzone input {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            opacity: 0;
            cursor: pointer;
        }

        .upload-dropzone:hover {
            border-color: var(--bs-primary);
            background: var(--bs-primary-light);
        }

        .upload-dropzone.dragover {
            border-color: var(--bs-success);
            background: var(--bs-success-bg-subtle);
            transform: scale(1.02);
        }

        .upload-dropzone.uploading {
            pointer-events: none;
        }

        .dropzone-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: var(--spacing-3);
        }

        .dropzone-icon {
            width: 72px;
            height: 72px;
            background: linear-gradient(135deg, var(--color-gray-100), var(--color-gray-200));
            border-radius: var(--bs-border-radius-pill);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            color: var(--color-gray-400);
            transition: all var(--transition-base);
        }

        .upload-dropzone:hover .dropzone-icon {
            background: linear-gradient(135deg, var(--bs-primary-light), var(--bs-primary));
            color: var(--bs-white);
            transform: scale(1.1);
        }

        .dropzone-title {
            font-size: var(--font-size-base);
            font-weight: 600;
            color: var(--color-gray-700);
        }

        .dropzone-subtitle {
            font-size: var(--font-size-sm);
            color: var(--color-gray-500);
        }

        .dropzone-info {
            display: flex;
            gap: var(--spacing-4);
            margin-top: var(--spacing-2);
        }

        .dropzone-info span {
            display: flex;
            align-items: center;
            gap: var(--spacing-1);
            font-size: var(--font-size-xs);
            color: var(--color-gray-400);
        }

        .dropzone-progress {
            display: none;
            flex-direction: column;
            align-items: center;
            gap: var(--spacing-3);
        }

        .upload-dropzone.uploading .dropzone-content {
            display: none;
        }

        .upload-dropzone.uploading .dropzone-progress {
            display: flex;
        }

        .dropzone-progress .progress-bar {
            width: 200px;
            height: 6px;
            background: var(--color-gray-200);
            border-radius: var(--bs-border-radius-pill);
            overflow: hidden;
        }

        .dropzone-progress .progress-fill {
            height: 100%;
            width: 0%;
            background: var(--bs-primary);
            border-radius: var(--bs-border-radius-pill);
            animation: progressAnimation 1.5s ease infinite;
        }

        @keyframes progressAnimation {
            0% {
                width: 0%;
            }

            50% {
                width: 70%;
            }

            100% {
                width: 100%;
            }
        }

        .dropzone-progress .progress-text {
            font-size: var(--font-size-sm);
            color: var(--color-gray-600);
        }

        .upload-preview {
            background: var(--color-gray-100);
            border-radius: var(--bs-border-radius-lg);
            overflow: hidden;
            position: relative;
            min-height: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .upload-preview img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .preview-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: var(--spacing-3);
            opacity: 0;
            transition: opacity var(--transition-base);
        }

        .upload-preview:hover .preview-overlay {
            opacity: 1;
        }

        .btn-preview-action {
            width: 44px;
            height: 44px;
            background: var(--bs-white);
            border: none;
            border-radius: var(--bs-border-radius);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: var(--font-size-lg);
            color: var(--color-gray-700);
            cursor: pointer;
            transition: all var(--transition-fast);
        }

        .btn-preview-action:hover {
            background: var(--bs-primary);
            color: var(--bs-white);
            transform: scale(1.1);
        }

        .preview-empty {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: var(--spacing-2);
            color: var(--color-gray-400);
        }

        .preview-empty i {
            font-size: 3rem;
        }

        .preview-empty span {
            font-size: var(--font-size-sm);
        }

        /* Button icons */
        .buttonicon::before {
            vertical-align: text-top;
        }


        /* Other */
        body {
            background-color: #f8f9fa;
        }

        .card {
            border-radius: 0.5rem;
            transition: all 0.2s ease-in-out;
        }

        .card-header {
            border-radius: 0.5rem 0.5rem 0 0 !important;
        }

        .form-control,
        .form-select,
        .input-group-text {
            border-radius: 0.375rem;
            padding: 0.5rem 0.75rem;
        }

        .form-control:focus,
        .form-select:focus {
            box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
        }

        .input-group-text {
            background-color: #f8f9fa;
        }

        .bg-primary.bg-opacity-10.p-3.rounded-circle.me-3,
        .bg-success.bg-opacity-10.p-3.rounded-circle.me-3 {
            width: 40px;
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .drop-area {
            border: 2px dashed #4299e1;
            background: #f7fafc;
            min-height: 140px;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .drop-area:hover {
            background-color: #ebf8ff;
            border-color: #3182ce;
        }

        .drop-area.drag-over {
            background-color: #ebf8ff;
            border-color: #3182ce;
            box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.25);
        }

        .file-preview {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            padding: 16px;
            background-color: #f8fafc;
            border-radius: 0.5rem;
            border: 1px solid #edf2f7;
            transition: all 0.3s ease;
        }

        .file-preview:hover {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            background-color: #fff;
            transform: translateY(-2px);
        }

        .file-preview .file-icon {
            font-size: 1.5rem;
            margin-right: 18px;
            color: #4a5568;
            width: 36px;
            text-align: center;
            opacity: 0.9;
        }

        .file-preview .file-type-badge {
            font-size: 0.75rem;
            padding: 0.25rem 0.5rem;
            border-radius: 20px;
            margin-right: 10px;
            display: inline-block;
            font-weight: 600;
        }

        .file-preview .file-info {
            flex-grow: 1;
        }

        .file-preview .file-name {
            font-weight: 600;
            margin-bottom: 5px;
            color: #2d3748;
            font-size: 1rem;
        }

        .file-preview .file-meta {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
        }

        .file-preview .file-size {
            font-size: 0.85rem;
            color: #718096;
        }

        .file-preview .file-actions {
            display: flex;
            align-items: center;
        }

        .file-preview .file-actions button {
            margin-left: 8px;
        }

        .existing-file {
            background-color: #ebf8ff;
            border-left: 3px solid #4299e1;
        }

        .new-file {
            background-color: #f0fff4;
            border-left: 3px solid #48bb78;
        }

        .deleted-file {
            background-color: #fff5f5;
            border-left: 3px solid #e53e3e;
            opacity: 0.8;
        }

        .deleted-file .file-name {
            text-decoration: line-through;
            color: #718096;
        }

        .deleted-file .file-icon {
            color: #a0aec0;
        }

        .bg-pdf {
            background-color: #f56565;
            color: white;
        }

        .bg-doc,
        .bg-docx {
            background-color: #4299e1;
            color: white;
        }

        .bg-xls,
        .bg-xlsx {
            background-color: #48bb78;
            color: white;
        }

        .bg-txt {
            background-color: #718096;
            color: white;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        .spin {
            animation: spin 1s linear infinite;
        }

        @media (max-width: 768px) {
            .file-preview {
                flex-direction: column;
                align-items: flex-start;
            }

            .file-preview .file-icon {
                margin-bottom: 12px;
                margin-right: 0;
                width: 100%;
                text-align: left;
            }

            .file-preview .file-actions {
                margin-top: 12px;
                width: 100%;
                justify-content: flex-end;
            }

            .file-preview .file-info {
                width: 100%;
            }
        }

        /* Correção z-indices */
        .modal {
            z-index: 2056 !important;
        }

        .modal-backdrop {
            z-index: 2055 !important;
        }

        .modal-dialog {
            z-index: 2057 !important;
        }

        .modal-content {
            position: relative;
            z-index: 2060 !important;
        }

        .modal-backdrop.show {
            opacity: 1 !important;
            background-color: rgba(15, 23, 42, 0.65) !important;
            backdrop-filter: blur(6px) !important;
        }

        body.modal-open {
            overflow: hidden;
            padding-right: 0 !important;
        }

        .modal.show {
            display: block !important;
            padding-right: 0 !important;
        }

        .modal-dialog {
            position: relative;
            margin: 1.75rem auto;
        }

        .modal-backdrop+.modal-backdrop {
            display: none;
        }

        /* Estilos para ordenação de arquivos */
        .file-preview .drag-handle {
            cursor: move;
            color: #718096;
            margin-right: 10px;
            opacity: 0.7;
            transition: all 0.2s ease;
        }

        .file-preview .drag-handle:hover {
            opacity: 1;
            color: #4a5568;
        }

        .file-preview.dragging {
            border: 2px dashed #4299e1;
            background-color: #ebf8ff;
            opacity: 0.8;
        }

        .file-position {
            display: inline-block;
            width: 24px;
            height: 24px;
            line-height: 24px;
            text-align: center;
            background-color: #e2e8f0;
            color: #4a5568;
            border-radius: 50%;
            font-size: 12px;
            font-weight: 600;
            margin-right: 8px;
        }

        .sortable-ghost {
            opacity: 0.4;
            background-color: #ebf8ff;
        }
    </style>
@endsection