@extends('layouts.publicador.novo_padrao')

@section('content')
    <div class="container my-4 py-3">
        <div class="content-wrapper">
            <div class="content-header">
                <h4>
                    @choice('labels.ordens_dia', 0)
                    <small class="text-muted">
                        {{ empty($model->id) ? __('labels.acoes.adicionar') : __('labels.acoes.alterar') }}
                    </small>
                </h4>
            </div>

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

            <!-- Início do Formulário -->
            @if (empty($model))
                {!! Form::open([
                    'route' => ['publicador.ordem_dia.store'],
                    'class' => 'form form-edit',
                    'enctype' => 'multipart/form-data',
                ]) !!}
            @else
                {!! Form::model($model, [
                    'route' => ['publicador.ordem_dia.update', $model->id],
                    'method' => 'put',
                    'class' => 'form form-edit',
                    'enctype' => 'multipart/form-data',
                ]) !!}
                {{ Form::hidden('id') }}
            @endif

            <div class="row">
                <!-- Informações Básicas -->
                <div class="col-sm-12">
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-header">
                            <h6 class="section-title">
                                <i class="fas fa-info-circle"></i>
                                Informações Básicas
                            </h6>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="form-group">
                                        {{ Form::label('titulo', __('Título'), ['class' => 'form-label']) }}
                                        {{ Form::text('titulo', null, [
                                            'class' => 'form-control ' . ($errors->has('titulo') ? 'is-invalid' : ''),
                                            'maxlength' => 150,
                                            'placeholder' => __('Digite o título da ordem do dia'),
                                            'required' => true,
                                        ]) }}
                                        <div class="form-text">Máximo 150 caracteres</div>
                                        @if ($errors->has('titulo'))
                                            <div class="invalid-feedback">
                                                <strong>{{ $errors->first('titulo') }}</strong>
                                            </div>
                                        @endif
                                    </div>
                                </div>

                                <div class="col-sm-6">
                                    <div class="form-group">
                                        {{ Form::label('data_sessao', __('Data da Sessão'), ['class' => 'form-label']) }}
                                        {{ Form::datetimeLocal(
                                            'data_sessao',
                                            isset($model) && $model->data_sessao ? $model->data_sessao->format('Y-m-d\TH:i') : null,
                                            [
                                                'class' => 'form-control ' . ($errors->has('data_sessao') ? 'is-invalid' : ''),
                                                'required' => true,
                                            ],
                                        ) }}
                                        @if ($errors->has('data_sessao'))
                                            <div class="invalid-feedback">
                                                <strong>{{ $errors->first('data_sessao') }}</strong>
                                            </div>
                                        @endif
                                    </div>
                                </div>

                                <div class="col-sm-6">
                                    <div class="form-group">
                                        {{ Form::label('data_publicacao', __('Data de Publicação'), ['class' => 'form-label']) }}
                                        {{ Form::datetimeLocal(
                                            'data_publicacao',
                                            isset($model) && $model->data_publicacao ? $model->data_publicacao->format('Y-m-d\TH:i') : null,
                                            [
                                                'class' => 'form-control ' . ($errors->has('data_publicacao') ? 'is-invalid' : ''),
                                                'required' => true,
                                            ],
                                        ) }}
                                        @if ($errors->has('data_publicacao'))
                                            <div class="invalid-feedback">
                                                <strong>{{ $errors->first('data_publicacao') }}</strong>
                                            </div>
                                        @endif
                                    </div>
                                </div>

                                <div class="col-sm-6">
                                    <div class="form-group">
                                        {{ Form::label('publicado', __('Publicado'), ['class' => 'form-label']) }}
                                        {{ Form::select('publicado', Config::get('constants.boolean'), null, [
                                            'class' => 'form-control ' . ($errors->has('publicado') ? 'is-invalid' : ''),
                                            'placeholder' => __('labels.acoes.selecione'),
                                            'required' => true,
                                        ]) }}
                                        @if ($errors->has('publicado'))
                                            <div class="invalid-feedback">
                                                <strong>{{ $errors->first('publicado') }}</strong>
                                            </div>
                                        @endif
                                    </div>
                                </div>

                                <div class="col-sm-6">
                                    <div class="form-group">
                                        {{ Form::label('transmissao', __('Transmissão'), ['class' => 'form-label']) }}
                                        {{ Form::select('transmissao', Config::get('constants.boolean'), null, [
                                            'class' => 'form-control ' . ($errors->has('transmissao') ? 'is-invalid' : ''),
                                            'placeholder' => __('labels.acoes.selecione'),
                                            'required' => true,
                                        ]) }}
                                        @if ($errors->has('transmissao'))
                                            <div class="invalid-feedback">
                                                <strong>{{ $errors->first('transmissao') }}</strong>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Arquivos Adicionais -->
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h6 class="section-title">
                        <i class="fas fa-file"></i> Arquivos Adicionais
                    </h6>
                    <button type="button" class="btn btn-success btn-sm" id="btnAddFile">
                        <i class="fas fa-plus"></i> Adicionar Arquivo
                    </button>
                </div>
                <div class="card-body">
                    <!-- Novos Arquivos -->
                    <div class="mb-4">
                        <h6 class="subsection-title"><i class="fa fa-upload text-success"></i>Novos Arquivos</h6>
                        <div id="newFileList">
                            <div class="alert alert-info mb-0" id="noFilesMessage">
                                <i class="fa fa-info-circle"></i>
                                Nenhum arquivo adicionado. Clique em "Adicionar Arquivo" para começar.
                            </div>
                        </div>
                    </div>

                    @if (isset($model) && $model->arquivos->count() > 0)
                        <!-- Arquivos Existentes -->
                        <div class="mb-4">
                            <h6 class="subsection-title">
                                <i class="fa fa-archive text-primary"></i>
                                Arquivos Existentes
                                <small class="text-muted ms-2">
                                    <i class="fas fa-arrows-alt"></i>
                                    Arraste para reordenar
                                </small>
                            </h6>
                            <div id="existingFileList" class="sortable-list">
                                @foreach ($model->arquivos->sortBy('posicao') as $arquivo)
                                    @php
                                        $extension = pathinfo($arquivo->arquivo, PATHINFO_EXTENSION);
                                        $size = 0;
                                        $filePath = $arquivo->arquivo;

                                        if (!str_contains($filePath, '/')) {
                                            $filePath = 'ordem_dia/' . $filePath;
                                        }

                                        if (Storage::disk('public')->exists($filePath)) {
                                            $size = Storage::disk('public')->size($filePath);
                                        }

                                        // Função para ícone
                                        $icons = [
                                            'pdf' => 'fas fa-file-pdf',
                                            'doc' => 'fas fa-file-word',
                                            'docx' => 'fas fa-file-word',
                                        ];
                                        $fileIcon = $icons[strtolower($extension)] ?? 'fa fa-file-o';

                                        // Função para classe
                                        $classes = [
                                            'pdf' => 'pdf',
                                            'doc' => 'doc',
                                            'docx' => 'docx',
                                        ];
                                        $fileClass = $classes[strtolower($extension)] ?? 'default';

                                        // Função para tamanho
                                        $units = ['B', 'KB', 'MB', 'GB', 'TB'];
                                        $bytes = $size;
                                        for ($i = 0; $bytes > 1024 && $i < count($units) - 1; $i++) {
                                            $bytes /= 1024;
                                        }
                                        $fileSize = round($bytes, 2) . ' ' . $units[$i];
                                    @endphp
                                    <div class="file-preview existing-file sortable-item" data-id="{{ $arquivo->id }}"
                                        data-posicao="{{ $arquivo->posicao }}">
                                        <div class="file-drag-handle">
                                            <i class="fas fa-grip-vertical"></i>
                                        </div>
                                        <div class="file-position">{{ $arquivo->posicao }}</div>
                                        <div class="file-icon">
                                            <i class="{{ $fileIcon }}"></i>
                                        </div>
                                        <div class="file-info">
                                            <div class="file-name">{{ $arquivo->titulo }}</div>
                                            <div class="file-meta">
                                                <span class="badge file-type-badge bg-{{ $fileClass }}">
                                                    .{{ $extension }}
                                                </span>
                                                <span class="file-size">{{ $fileSize }}</span>
                                                <span class="text-muted">Criado:
                                                    {{ $arquivo->created_at->format('d/m/Y H:i') }}</span>
                                            </div>
                                        </div>
                                        <div class="file-actions">
                                            <a href="{{ Storage::disk('public')->url($filePath) }}" target="_blank"
                                                class="btn btn-outline-info btn-sm" title="Visualizar">
                                                <i class="fa fa-eye"></i>
                                            </a>
                                            <button type="button" class="btn btn-outline-primary btn-sm edit-existing-file"
                                                title="Editar" data-id="{{ $arquivo->id }}"
                                                data-titulo="{{ $arquivo->titulo }}">
                                                <i class="fa fa-edit"></i>
                                            </button>
                                            <button type="button"
                                                class="btn btn-outline-danger btn-sm delete-existing-file" title="Excluir"
                                                data-id="{{ $arquivo->id }}" data-titulo="{{ $arquivo->titulo }}">
                                                <i class="fa fa-trash"></i>
                                            </button>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Botões de Ação -->
            <div class="form-actions">
                <div class="d-flex justify-content-center gap-3">
                    <a href="{{ route('publicador.ordem_dia.index') }}" class="btn btn-danger">
                        <i class="fa fa-times"></i>
                        @lang('labels.acoes.cancelar')
                    </a>
                    <button type="submit" class="btn btn-success">
                        <i class="fa fa-save"></i>
                        @lang('labels.acoes.salvar')
                    </button>
                </div>
            </div>

            {!! Form::close() !!}
        </div>
    </div>

    <!-- Modal para adicionar/editar arquivos -->
    <div class="modal fade" id="modalAddFile" tabindex="-1" aria-labelledby="modalAddFileLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalAddFileLabel">
                        <i class="fas fa-plus"></i>
                        <span id="modalTitle">Adicionar Arquivo</span>
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="fileName" class="form-label">Título do Arquivo <span
                                class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="fileName"
                            placeholder="Digite um título para o arquivo" maxlength="255" required>
                        <div class="form-text">Este título será exibido na listagem</div>
                    </div>

                    <div id="uploadArea">
                        <label class="form-label">Selecionar Arquivo <span class="text-danger">*</span></label>
                        <div class="drop-area" id="dropArea">
                            <i class="fas fa-cloud-upload-alt"></i>
                            <p>Arraste e solte o arquivo aqui ou clique para selecionar</p>
                            <input type="file" id="fileInput" accept=".pdf,.doc,.docx" style="display:none" required>
                            <button type="button" id="fileSelectBtn" class="btn btn-primary">
                                <i class="fa fa-folder-open"></i>Selecionar Arquivo
                            </button>
                            <div class="text-muted mt-2">
                                <small>Formatos aceitos: PDF, DOC, DOCX (máximo 60MB)</small>
                            </div>
                        </div>
                        <div id="filePreview" class="mt-3" style="display: none;"></div>
                    </div>

                    <input type="hidden" id="editFileId">
                </div>
                <div class="modal-footer">
                    <button type="button" id="close-modal" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fa fa-times"></i>Cancelar
                    </button>
                    <button type="button" class="btn btn-primary" id="btnSaveFile">
                        <i class="fas fa-plus"></i>Adicionar
                    </button>
                </div>
            </div>
        </div>
    </div>

    <style>
        :root {
            --primary-color: #2563eb;
            --primary-hover: #1d4ed8;
            --secondary-color: #64748b;
            --success-color: #22c55e;
            --danger-color: #ef4444;
            --warning-color: #eab308;
            --info-color: #0ea5e9;
            --border-radius: 0.5rem;
            --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            --transition: all 0.3s ease;
        }

        /* Reset e Base */
        * {
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #f8fafc;
            color: #1e293b;
            line-height: 1.6;
        }

        /* Container Principal */
        .content-wrapper {
            background: white;
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
            margin: 2rem auto;
            padding: 2rem;
            position: relative;
        }

        /* Headers e Títulos Melhorados */
        .content-header {
            margin-bottom: 2rem;
            padding-bottom: 1.5rem;
            border-bottom: 2px solid #f1f5f9;
            position: relative;
        }

        .content-header::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 80px;
            height: 2px;
            background: var(--primary-color);
        }

        .content-header h4 {
            color: #1e293b;
            font-weight: 700;
            margin: 0;
            display: flex;
            align-items: center;
            gap: 0.75rem;
            font-size: 1.75rem;
            letter-spacing: -0.025em;
        }

        .content-header small {
            color: var(--secondary-color);
            font-size: 0.875rem;
            font-weight: 500;
            background: #f1f5f9;
            padding: 0.375rem 0.875rem;
            border-radius: 1rem;
            margin-left: 1rem;
        }

        /* Títulos de Seções */
        .section-title {
            color: #1e293b;
            font-weight: 600;
            margin: 0;
            font-size: 1.1rem;
            display: flex;
            align-items: center;
            letter-spacing: -0.01em;
        }

        .section-title i {
            margin-right: 0.75rem;
            font-size: 1.2rem;
            color: var(--primary-color);
        }

        .subsection-title {
            color: #374151;
            font-weight: 600;
            font-size: 1rem;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            letter-spacing: -0.01em;
        }

        .subsection-title i {
            margin-right: 0.75rem;
            font-size: 1.1rem;
        }

        /* Cards */
        .card {
            border: none;
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
            transition: var(--transition);
            background: white;
        }

        .card:hover {
            box-shadow: 0 8px 25px -8px rgba(0, 0, 0, 0.12);
        }

        .card-header {
            background: #f8fafc;
            border-bottom: 1px solid #e2e8f0;
            padding: 1.25rem 1.5rem;
        }

        .card-body {
            padding: 1.5rem;
        }

        /* Formulários Melhorados */
        .form-group {
            margin-bottom: 1.5rem;
        }

        .form-label {
            display: block;
            margin-bottom: 0.625rem;
            color: #374151;
            font-weight: 600;
            font-size: 0.875rem;
            letter-spacing: 0.01em;
        }

        .form-control {
            width: 100%;
            border: 1.5px solid #d1d5db;
            border-radius: var(--border-radius);
            font-size: 0.875rem;
            color: #1e293b;
            background: #ffffff;
            transition: var(--transition);
            font-weight: 500;
        }

        .form-control:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
            outline: none;
        }

        .form-control.is-invalid {
            border-color: var(--danger-color);
        }

        .form-text {
            font-size: 0.75rem;
            color: #6b7280;
            margin-top: 0.375rem;
            font-style: italic;
        }

        /* Alertas */
        .alert {
            border: none;
            border-radius: var(--border-radius);
            padding: 1rem 1.25rem;
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .alert i {
            font-size: 1.1rem;
        }

        .alert-danger {
            background-color: rgba(239, 68, 68, 0.1);
            color: var(--danger-color);
            border-left: 4px solid var(--danger-color);
        }

        .alert-info {
            background-color: rgba(14, 165, 233, 0.1);
            color: var(--info-color);
            border-left: 4px solid var(--info-color);
        }

        /* Botões */
        .btn {
            padding: 0.625rem 1.25rem;
            border-radius: var(--border-radius);
            font-weight: 500;
            font-size: 0.875rem;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            transition: var(--transition);
            text-decoration: none;
            cursor: pointer;
            border: 1px solid transparent;
        }

        .btn i {
            font-size: 0.875rem;
        }

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

        .btn-success:hover {
            background-color: #16a34a;
            border-color: #16a34a;
            transform: translateY(-1px);
        }

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

        .btn-danger:hover {
            background-color: #dc2626;
            border-color: #dc2626;
            transform: translateY(-1px);
        }

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

        .btn-primary:hover {
            background-color: var(--primary-hover);
            border-color: var(--primary-hover);
            transform: translateY(-1px);
        }

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

        .btn-secondary:hover {
            background-color: #475569;
            border-color: #475569;
        }

        .btn-outline-info {
            border-color: var(--info-color);
            color: var(--info-color);
            background: transparent;
        }

        .btn-outline-info:hover {
            background: var(--info-color);
            color: white;
        }

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

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

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

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

        .btn-sm {
            padding: 0.5rem 0.875rem;
            font-size: 0.8rem;
        }

        /* Sortable Styles */
        .sortable-list {
            min-height: 100px;
        }

        .sortable-item {
            cursor: grab;
        }

        .sortable-item:active {
            cursor: grabbing;
        }

        .sortable-item.sortable-chosen {
            opacity: 0.8;
            transform: rotate(2deg);
            background: #f0f9ff !important;
            border-color: var(--primary-color) !important;
            box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
        }

        .sortable-item.sortable-ghost {
            opacity: 0.3;
            background: #f8fafc !important;
            border: 2px dashed var(--primary-color) !important;
        }

        .file-drag-handle {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            color: #9ca3af;
            cursor: grab;
            margin-right: 0.75rem;
            font-size: 1.2rem;
            transition: var(--transition);
        }

        .file-drag-handle:hover {
            color: var(--primary-color);
        }

        .file-drag-handle:active {
            cursor: grabbing;
        }

        /* Arquivos */
        .file-preview {
            display: flex;
            align-items: center;
            padding: 1rem;
            margin-bottom: 0.875rem;
            background: white;
            border: 1px solid #e5e7eb;
            border-radius: var(--border-radius);
            transition: var(--transition);
        }

        .file-preview:hover {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            border-color: #d1d5db;
        }

        .file-preview.existing-file {
            background: #f0f9ff;
            border-color: #7dd3fc;
        }

        .file-preview.new-file {
            background: #f0fdf4;
            border-color: #86efac;
        }

        .file-icon {
            font-size: 2rem;
            margin-right: 1rem;
            color: #6b7280;
            width: 50px;
            text-align: center;
        }

        .file-info {
            flex-grow: 1;
            min-width: 0;
        }

        .file-name {
            font-weight: 600;
            margin-bottom: 0.375rem;
            color: #1f2937;
            font-size: 0.95rem;
        }

        .file-meta {
            display: flex;
            align-items: center;
            gap: 0.625rem;
            flex-wrap: wrap;
        }

        .file-type-badge {
            font-size: 0.7rem;
            font-weight: 600;
            padding: 0.25rem 0.5rem;
            border-radius: 0.25rem;
            text-transform: uppercase;
        }

        .bg-pdf {
            background: var(--danger-color);
            color: white;
        }

        .bg-doc,
        .bg-docx {
            background: var(--primary-color);
            color: white;
        }

        .bg-default {
            background: var(--secondary-color);
            color: white;
        }

        .file-size {
            font-size: 0.8rem;
            color: #6b7280;
            font-weight: 500;
        }

        .file-actions {
            display: flex;
            gap: 0.375rem;
            margin-left: 0.875rem;
        }

        .file-position {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            background: var(--primary-color);
            color: white;
            border-radius: 50%;
            font-size: 0.8rem;
            font-weight: 600;
            margin-right: 0.875rem;
        }

        /* Drop Area */
        .drop-area {
            border: 2px dashed #9ca3af;
            background: #f9fafb;
            min-height: 150px;
            padding: 2rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: var(--transition);
            border-radius: var(--border-radius);
        }

        .drop-area:hover,
        .drop-area.drag-over {
            background: #f3f4f6;
            border-color: var(--primary-color);
        }

        .drop-area i {
            font-size: 3rem;
            color: #9ca3af;
            margin-bottom: 1rem;
        }

        .drop-area p {
            color: #6b7280;
            margin-bottom: 1.25rem;
            font-size: 1rem;
            text-align: center;
        }

        /* Modal Centralizado */
        .modal-dialog-centered {
            display: flex;
            align-items: center;
            min-height: calc(100% - 1rem);
        }

        .modal-content {
            border: none;
            border-radius: var(--border-radius);
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        }

        .modal-header {
            background: #f8fafc;
            border-bottom: 1px solid #e5e7eb;
            padding: 1.25rem 1.5rem;
        }

        .modal-title {
            font-weight: 600;
            color: #1f2937;
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .modal-title i {
            font-size: 1.2rem;
            color: var(--primary-color);
        }

        .modal-body {
            padding: 1.5rem;
        }

        .modal-footer {
            background: #f8fafc;
            border-top: 1px solid #e5e7eb;
            padding: 1rem 1.5rem;
        }

        .btn-close {
            background: none;
            border: none;
            font-size: 1.5rem;
            color: #6b7280;
            opacity: 0.7;
            transition: var(--transition);
            padding: 0.25rem;
        }

        .btn-close:hover {
            opacity: 1;
        }

        /* Form Actions */
        .form-actions {
            margin-top: 2rem;
            padding-top: 1.5rem;
            border-top: 1px solid #e5e7eb;
        }

        /* Feedback de Validação */
        .invalid-feedback {
            display: block;
            color: var(--danger-color);
            font-size: 0.8rem;
            margin-top: 0.375rem;
            font-weight: 500;
        }

        /* Utilitários */
        .gap-3 {
            gap: 1rem;
        }

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

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

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

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

        .text-center {
            text-align: center;
        }

        .text-muted {
            color: #6b7280;
        }

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

        .text-success {
            color: var(--success-color);
        }

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

        .d-flex {
            display: flex;
        }

        .justify-content-center {
            justify-content: center;
        }

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

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

        /* Grid System */
        .row {
            display: flex;
            flex-wrap: wrap;
            margin-right: -0.75rem;
            margin-left: -0.75rem;
        }

        [class*="col-"] {
            padding-right: 0.75rem;
            padding-left: 0.75rem;
        }

        .col-sm-6 {
            flex: 0 0 50%;
            max-width: 50%;
        }

        .col-sm-12 {
            flex: 0 0 100%;
            max-width: 100%;
        }

        /* Loading states */
        .btn.loading {
            position: relative;
            color: transparent;
        }

        .btn.loading::after {
            content: '';
            position: absolute;
            width: 16px;
            height: 16px;
            top: 50%;
            left: 50%;
            margin-left: -8px;
            margin-top: -8px;
            border: 2px solid transparent;
            border-top-color: currentColor;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

        /* Responsividade */
        @media (max-width: 768px) {
            .content-wrapper {
                padding: 1.5rem;
                margin: 1rem;
            }

            .card-body {
                padding: 1.25rem;
            }

            .col-sm-6 {
                flex: 0 0 100%;
                max-width: 100%;
            }

            .file-preview {
                flex-direction: column;
                text-align: center;
                padding: 1.25rem 1rem;
            }

            .file-icon {
                margin-bottom: 0.75rem;
                margin-right: 0;
            }

            .file-actions {
                margin-top: 0.75rem;
                margin-left: 0;
                justify-content: center;
            }

            .btn {
                width: 100%;
                justify-content: center;
                margin: 0.375rem 0;
            }

            .d-flex.gap-3 {
                flex-direction: column;
                gap: 0.75rem;
            }

            .drop-area {
                min-height: 120px;
                padding: 1.5rem 1rem;
            }

            .content-header h4 {
                flex-direction: column;
                align-items: flex-start;
                gap: 0.5rem;
                font-size: 1.5rem;
            }

            .content-header small {
                margin-left: 0;
            }

            .file-drag-handle {
                display: none;
            }
        }

        @media (max-width: 480px) {
            .content-wrapper {
                margin: 0.5rem;
                padding: 1rem;
            }

            .card-header {
                padding: 1rem;
            }

            .card-body {
                padding: 1rem;
            }

            .modal-body {
                padding: 1.25rem;
            }

            .file-meta {
                flex-direction: column;
                align-items: flex-start;
                gap: 0.375rem;
            }
        }

        svg.svg-inline--fa.fa-file.fa-w-12,
        svg.svg-inline--fa.fa-upload.fa-w-16.text-success,
        svg.svg-inline--fa.fa-info-circle.fa-w-16,
        svg.svg-inline--fa.fa-archive.fa-w-16.text-primary {
            margin-right: 10px;
        }
    </style>

    <!-- Scripts -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.0/Sortable.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const MAX_FILE_SIZE = 60 * 1024 * 1024; // 60MB
            const ACCEPTED_FORMATS = ['.pdf', '.doc', '.docx'];

            let fileCounter = 0;
            let currentFile = null;
            let isEditMode = false;
            let modalInstance = null;
            let sortableInstance = null;

            // Elementos
            const modalElement = document.getElementById('modalAddFile');
            const btnAddFile = document.getElementById('btnAddFile');
            const btnSaveFile = document.getElementById('btnSaveFile');
            const fileInput = document.getElementById('fileInput');
            const fileSelectBtn = document.getElementById('fileSelectBtn');
            const fileName = document.getElementById('fileName');
            const filePreview = document.getElementById('filePreview');
            const dropArea = document.getElementById('dropArea');
            const newFileList = document.getElementById('newFileList');
            const noFilesMessage = document.getElementById('noFilesMessage');
            const editFileId = document.getElementById('editFileId');
            const existingFileList = document.getElementById('existingFileList');

            // Inicializar modal do Bootstrap
            if (modalElement) {
                modalInstance = new bootstrap.Modal(modalElement, {
                    backdrop: true, // Permite fechar clicando fora
                    keyboard: true, // Permite fechar com ESC
                    focus: true
                });

                // Configurar eventos de fechamento do modal
                setupModalCloseEvents();
            }

            // Função para configurar eventos de fechamento do modal
            function setupModalCloseEvents() {
                // Botão cancelar no footer (com data-bs-dismiss)
                const btnCancelModal = modalElement.querySelector('#close-modal');
                if (btnCancelModal) {
                    btnCancelModal.addEventListener('click', function(e) {
                        e.preventDefault();
                        handleModalClose();
                    });
                }

                // Botão X no header
                const btnCloseModal = modalElement.querySelector('.btn-close');
                if (btnCloseModal) {
                    btnCloseModal.addEventListener('click', function(e) {
                        e.preventDefault();
                        handleModalClose();
                    });
                }

                // Eventos nativos do Bootstrap para fechamento
                modalElement.addEventListener('hide.bs.modal', function(e) {
                    if (hasUnsavedChanges()) {
                        e.preventDefault();
                        confirmCloseModal();
                    }
                });

                // Reset quando o modal é fechado
                modalElement.addEventListener('hidden.bs.modal', function() {
                    resetModalState();
                });
            }

            // Função para lidar com o fechamento do modal
            function handleModalClose() {
                if (hasUnsavedChanges()) {
                    confirmCloseModal();
                } else {
                    closeModal();
                }
            }

            // Função para fechar modal
            function closeModal() {
                if (modalInstance) {
                    modalInstance.hide();
                }
            }

            // Função para verificar se há mudanças não salvas
            function hasUnsavedChanges() {
                return fileName.value.trim() !== '' || currentFile !== null;
            }

            // Função para confirmar fechamento com dados não salvos
            function confirmCloseModal() {
                Swal.fire({
                    title: 'Descartar alterações?',
                    text: 'Você tem alterações não salvas. Deseja realmente fechar?',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#ef4444',
                    cancelButtonColor: '#6b7280',
                    confirmButtonText: 'Sim, descartar',
                    cancelButtonText: 'Continuar editando'
                }).then((result) => {
                    if (result.isConfirmed) {
                        // Remove o listener temporariamente para forçar o fechamento
                        modalElement.removeEventListener('hide.bs.modal', preventClose);
                        modalInstance.hide();
                        // Recoloca o listener após fechar
                        setTimeout(() => {
                            modalElement.addEventListener('hide.bs.modal', preventClose);
                        }, 100);
                    }
                });
            }

            // Função para prevenir fechamento (usada no listener)
            function preventClose(e) {
                if (hasUnsavedChanges()) {
                    e.preventDefault();
                    confirmCloseModal();
                }
            }

            // Função para resetar estado do modal
            function resetModalState() {
                setupAddMode();
                // Remove qualquer classe de validação
                document.querySelectorAll('.modal .is-invalid').forEach(el => {
                    el.classList.remove('is-invalid');
                });
            }

            // Inicializar Sortable para arquivos existentes
            if (existingFileList) {
                initializeSortable();
            }

            function initializeSortable() {
                sortableInstance = new Sortable(existingFileList, {
                    handle: '.file-drag-handle',
                    animation: 150,
                    ghostClass: 'sortable-ghost',
                    chosenClass: 'sortable-chosen',
                    onEnd: function(evt) {
                        updateFilePositions();
                    }
                });
            }

            function updateFilePositions() {
                const items = existingFileList.querySelectorAll('.sortable-item');
                const updates = [];

                items.forEach((item, index) => {
                    const id = item.dataset.id;
                    const newPosition = index + 1;

                    // Atualizar posição visual
                    const positionElement = item.querySelector('.file-position');
                    if (positionElement) {
                        positionElement.textContent = newPosition;
                    }

                    item.dataset.posicao = newPosition;

                    updates.push({
                        id: parseInt(id),
                        posicao: newPosition
                    });
                });

                // Enviar para o servidor
                if (updates.length > 0) {
                    savePositionsToServer(updates);
                }
            }

            function savePositionsToServer(updates) {
                const ordemId = '{{ $model->id ?? 0 }}';

                if (!ordemId || ordemId === '0') {
                    return; // Não salvar se estiver criando nova ordem
                }

                fetch(`{{ route('publicador.ordem_dia.update_arquivos_posicao', ['id' => $model->id ?? 0]) }}`, {
                        method: 'PUT',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute(
                                'content') || ''
                        },
                        body: JSON.stringify({
                            arquivos: updates
                        })
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            showNotification('success', 'Ordem dos arquivos atualizada!');
                        } else {
                            showNotification('error', 'Erro ao atualizar ordem dos arquivos');
                            location.reload();
                        }
                    })
                    .catch(error => {
                        console.error('Erro:', error);
                        showNotification('error', 'Erro ao salvar nova ordem');
                        location.reload();
                    });
            }

            // Funções utilitárias
            function formatFileSize(bytes) {
                if (bytes === 0) return '0 Bytes';
                const k = 1024;
                const sizes = ['Bytes', 'KB', 'MB', 'GB'];
                const i = Math.floor(Math.log(bytes) / Math.log(k));
                return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
            }

            function getFileIcon(filename) {
                const ext = filename.split('.').pop().toLowerCase();
                const icons = {
                    'pdf': 'fas fa-file-pdf',
                    'doc': 'fas fa-file-word',
                    'docx': 'fas fa-file-word',
                };
                return icons[ext] || 'fa fa-file-o';
            }

            function getFileTypeClass(ext) {
                const classes = {
                    'pdf': 'pdf',
                    'doc': 'doc',
                    'docx': 'docx'
                };
                return classes[ext.toLowerCase()] || 'default';
            }

            function validateFile(file) {
                const ext = '.' + file.name.split('.').pop().toLowerCase();
                if (!ACCEPTED_FORMATS.includes(ext)) {
                    return 'Formato não suportado. Use PDF, DOC ou DOCX.';
                }
                if (file.size > MAX_FILE_SIZE) {
                    return 'Arquivo muito grande. Máximo 60MB.';
                }
                return null;
            }

            function showNotification(type, message) {
                Swal.fire({
                    icon: type,
                    title: message,
                    toast: true,
                    position: 'top-end',
                    showConfirmButton: false,
                    timer: 3000,
                    timerProgressBar: true
                });
            }

            // Setup do modal
            function setupAddMode() {
                document.getElementById('modalTitle').textContent = 'Adicionar Arquivo';
                btnSaveFile.innerHTML = '<i class="fas fa-plus"></i>Adicionar';

                isEditMode = false;
                editFileId.value = '';
                fileName.value = '';
                fileInput.value = '';
                currentFile = null;
                filePreview.style.display = 'none';
                document.getElementById('uploadArea').style.display = 'block';

                // Remove classes de validação
                fileName.classList.remove('is-invalid');
                fileInput.required = true;
            }

            function setupEditMode(fileId, fileTitle) {
                document.getElementById('modalTitle').textContent = 'Editar Título do Arquivo';
                btnSaveFile.innerHTML = '<i class="fas fa-save"></i>Salvar';

                isEditMode = true;
                editFileId.value = fileId;
                fileName.value = fileTitle;
                document.getElementById('uploadArea').style.display = 'none';
                fileInput.required = false;

                // Remove classes de validação
                fileName.classList.remove('is-invalid');
            }

            // Manipulação de arquivos
            function handleFileSelect(file) {
                const error = validateFile(file);
                if (error) {
                    showNotification('error', error);
                    fileInput.value = '';
                    filePreview.style.display = 'none';
                    currentFile = null;
                    return;
                }

                currentFile = file;

                if (!fileName.value.trim()) {
                    const name = file.name.split('.').slice(0, -1).join('.');
                    fileName.value = name;
                }

                showFilePreview(file);
            }

            function showFilePreview(file) {
                const ext = file.name.split('.').pop().toLowerCase();
                filePreview.innerHTML = `
            <div class="file-preview new-file">
                <div class="file-icon">
                    <i class="${getFileIcon(file.name)}"></i>
                </div>
                <div class="file-info">
                    <div class="file-name">${file.name}</div>
                    <div class="file-meta">
                        <span class="badge file-type-badge bg-${getFileTypeClass(ext)}">.${ext}</span>
                        <span class="file-size">${formatFileSize(file.size)}</span>
                    </div>
                </div>
                <div class="file-actions">
                    <button type="button" class="btn btn-outline-danger btn-sm" onclick="removePreview()">
                        <i class="fa fa-trash"></i>
                    </button>
                </div>
            </div>
        `;
                filePreview.style.display = 'block';
            }

            function removePreview() {
                fileInput.value = '';
                filePreview.style.display = 'none';
                currentFile = null;
            }

            function addNewFile() {
                // Remover classes de validação anteriores
                fileName.classList.remove('is-invalid');

                if (!fileName.value.trim()) {
                    fileName.classList.add('is-invalid');
                    showNotification('warning', 'Por favor, preencha o título do arquivo');
                    return;
                }

                if (isEditMode) {
                    // Editar arquivo existente
                    if (!fileName.value.trim()) {
                        showNotification('warning', 'Preencha o título do arquivo');
                        fileName.classList.add('is-invalid');
                        return;
                    }

                    updateExistingFileTitle(editFileId.value, fileName.value.trim());
                } else {
                    // Adicionar novo arquivo
                    if (!currentFile || !fileName.value.trim()) {
                        showNotification('warning', 'Preencha todos os campos obrigatórios');
                        if (!fileName.value.trim()) fileName.classList.add('is-invalid');
                        return;
                    }

                    const fileNameValue = fileName.value.trim();
                    const fileExt = currentFile.name.split('.').pop().toLowerCase();
                    const fileId = 'file_' + fileCounter++;

                    // Criar elemento visual
                    const fileElement = createNewFileElement(fileId, fileNameValue, currentFile, fileExt);
                    newFileList.appendChild(fileElement);

                    // Adicionar ao formulário
                    addFileToForm(fileId, fileNameValue, currentFile);

                    updateFileList();
                    showNotification('success', 'Arquivo adicionado com sucesso');
                }

                closeModal();
            }

            function createNewFileElement(fileId, fileNameValue, file, fileExt) {
                const div = document.createElement('div');
                div.className = 'file-preview new-file';
                div.dataset.fileId = fileId;

                div.innerHTML = `
            <div class="file-icon">
                <i class="${getFileIcon(file.name)}"></i>
            </div>
            <div class="file-info">
                <div class="file-name">${fileNameValue}</div>
                <div class="file-meta">
                    <span class="badge file-type-badge bg-${getFileTypeClass(fileExt)}">.${fileExt}</span>
                    <span class="file-size">${formatFileSize(file.size)}</span>
                    <span class="text-muted">Novo arquivo</span>
                </div>
            </div>
            <div class="file-actions">
                <button type="button" class="btn btn-outline-danger btn-sm remove-file" title="Remover">
                    <i class="fa fa-trash"></i>
                </button>
            </div>
        `;

                div.querySelector('.remove-file').addEventListener('click', function() {
                    Swal.fire({
                        title: 'Remover arquivo?',
                        text: 'Esta ação não pode ser desfeita.',
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#ef4444',
                        cancelButtonColor: '#6b7280',
                        confirmButtonText: 'Sim, remover',
                        cancelButtonText: 'Cancelar'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            div.remove();
                            document.querySelectorAll(`input[name^="arquivos[${fileId}]"]`).forEach(
                                input => input.remove());
                            updateFileList();
                            showNotification('success', 'Arquivo removido');
                        }
                    });
                });

                return div;
            }

            function addFileToForm(fileId, fileNameValue, file) {
                const formDiv = document.createElement('div');
                formDiv.className = 'hidden-file-inputs';
                formDiv.innerHTML = `
            <input type="hidden" name="arquivos[${fileId}][titulo]" value="${fileNameValue}">
            <input type="file" name="arquivos[${fileId}][arquivo]" id="form_${fileId}" style="display:none">
        `;
                document.querySelector('.form-edit').appendChild(formDiv);

                // Transferir arquivo para o input
                const dataTransfer = new DataTransfer();
                dataTransfer.items.add(file);
                setTimeout(() => {
                    const input = document.getElementById(`form_${fileId}`);
                    if (input) input.files = dataTransfer.files;
                }, 100);
            }

            function updateFileList() {
                const hasFiles = newFileList.querySelectorAll('.file-preview').length > 0;
                noFilesMessage.style.display = hasFiles ? 'none' : 'block';
            }

            function updateExistingFileTitle(fileId, newTitle) {
                fetch(`{{ route('publicador.ordem_dia.update_arquivo_descricao', ['id' => $model->id ?? 0, 'arquivo' => ':arquivo']) }}`
                        .replace(':arquivo', fileId), {
                            method: 'PUT',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute(
                                    'content') || ''
                            },
                            body: JSON.stringify({
                                titulo: newTitle
                            })
                        })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            // Atualizar o título na interface
                            const fileElement = document.querySelector(`[data-id="${fileId}"] .file-name`);
                            if (fileElement) {
                                fileElement.textContent = newTitle;
                            }
                            showNotification('success', 'Título atualizado com sucesso');
                        } else {
                            showNotification('error', 'Erro ao atualizar título');
                        }
                    })
                    .catch(error => {
                        console.error('Erro:', error);
                        showNotification('error', 'Erro ao atualizar título');
                    });
            }

            function deleteExistingFile(fileId, titulo) {
                Swal.fire({
                    title: 'Excluir arquivo?',
                    text: `Tem certeza que deseja excluir "${titulo}"?`,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#ef4444',
                    cancelButtonColor: '#6b7280',
                    confirmButtonText: 'Sim, excluir',
                    cancelButtonText: 'Cancelar'
                }).then((result) => {
                    if (result.isConfirmed) {
                        fetch(`{{ route('publicador.ordem_dia.delete_arquivo_ajax', ['id' => $model->id ?? 0, 'arquivo' => ':arquivo']) }}`
                                .replace(':arquivo', fileId), {
                                    method: 'DELETE',
                                    headers: {
                                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')
                                            ?.getAttribute('content') || ''
                                    }
                                })
                            .then(response => response.json())
                            .then(data => {
                                if (data.success) {
                                    document.querySelector(`[data-id="${fileId}"]`).remove();
                                    showNotification('success', 'Arquivo excluído com sucesso');
                                } else {
                                    showNotification('error', 'Erro ao excluir arquivo');
                                }
                            })
                            .catch(error => {
                                console.error('Erro:', error);
                                showNotification('error', 'Erro ao excluir arquivo');
                            });
                    }
                });
            }

            // Event Listeners
            if (btnAddFile) {
                btnAddFile.addEventListener('click', () => {
                    setupAddMode();
                    if (modalInstance) {
                        modalInstance.show();
                    }
                });
            }

            if (fileSelectBtn) {
                fileSelectBtn.addEventListener('click', () => {
                    fileInput.click();
                });
            }

            if (fileInput) {
                fileInput.addEventListener('change', function() {
                    if (this.files.length > 0) {
                        handleFileSelect(this.files[0]);
                    }
                });
            }

            if (btnSaveFile) {
                btnSaveFile.addEventListener('click', addNewFile);
            }

            // Drag and Drop
            if (dropArea) {
                dropArea.addEventListener('dragover', function(e) {
                    e.preventDefault();
                    this.classList.add('drag-over');
                });

                dropArea.addEventListener('dragleave', function(e) {
                    e.preventDefault();
                    this.classList.remove('drag-over');
                });

                dropArea.addEventListener('drop', function(e) {
                    e.preventDefault();
                    this.classList.remove('drag-over');
                    if (e.dataTransfer.files.length > 0) {
                        const file = e.dataTransfer.files[0];
                        const dataTransfer = new DataTransfer();
                        dataTransfer.items.add(file);
                        fileInput.files = dataTransfer.files;
                        handleFileSelect(file);
                    }
                });

                dropArea.addEventListener('click', () => {
                    fileInput.click();
                });
            }

            // Editar arquivos existentes
            document.querySelectorAll('.edit-existing-file').forEach(btn => {
                btn.addEventListener('click', function() {
                    const fileId = this.dataset.id;
                    const titulo = this.dataset.titulo;
                    setupEditMode(fileId, titulo);
                    if (modalInstance) {
                        modalInstance.show();
                    }
                });
            });

            // Excluir arquivos existentes
            document.querySelectorAll('.delete-existing-file').forEach(btn => {
                btn.addEventListener('click', function() {
                    const fileId = this.dataset.id;
                    const titulo = this.dataset.titulo;
                    deleteExistingFile(fileId, titulo);
                });
            });

            // Validação do formulário
            const form = document.querySelector('.form-edit');
            if (form) {
                form.addEventListener('submit', function(e) {
                    const required = this.querySelectorAll('[required]');
                    let hasErrors = false;

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

                    if (hasErrors) {
                        e.preventDefault();
                        showNotification('warning', 'Preencha todos os campos obrigatórios');

                        // Scroll para o primeiro erro
                        const firstError = this.querySelector('.is-invalid');
                        if (firstError) {
                            firstError.scrollIntoView({
                                behavior: 'smooth',
                                block: 'center'
                            });
                            firstError.focus();
                        }
                    } else {
                        // Mostrar loading no botão de submit
                        const submitBtn = this.querySelector('button[type="submit"]');
                        if (submitBtn) {
                            submitBtn.classList.add('loading');
                            submitBtn.disabled = true;
                        }
                    }
                });
            }

            // Função global para remoção de preview
            window.removePreview = removePreview;

            // Inicialização
            updateFileList();
        });
    </script>
@endsection