@extends('layouts.publicador.default')

@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <div class="container my-4">
        <div class="card border-0 shadow mb-4">
            <div class="card-header bg-primary text-white py-3">
                <h4 class="mb-0">
                    <i class="fas fa-chart-line mr-2"></i>Relatório Gerencial DA
                </h4>
                <p class="mb-0 mt-1 font-italic">Alterar Processo</p>
            </div>
            <div class="card-body bg-light">

                @if ($errors->any())
                    <div class="alert alert-danger alert-dismissible fade show animate__animated animate__fadeIn"
                        role="alert">
                        <ul class="mb-0">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                        <button type="button" class="close" data-dismiss="alert" aria-label="Fechar">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                @endif

                @if (session('status-success'))
                    <div class="alert alert-success alert-dismissible fade show animate__animated animate__fadeIn"
                        role="alert">
                        <i class="fas fa-check-circle mr-1"></i> {{ session('status-success') }}
                        <button type="button" class="close" data-dismiss="alert" aria-label="Fechar">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                @endif

                <form method="POST" action="{{ route('publicador.processos.da.form_geren_save') }}" accept-charset="UTF-8"
                    class="needs-validation" enctype="multipart/form-data" novalidate>
                    @csrf
                    <input type="hidden" name="processo"
                        value="{{ isset($processo->id_processo_DA) ? $processo->id_processo_DA : $processo->id }}">

                    <div class="form-group">
                        <label for="responsavel" class="font-weight-bold text-primary">
                            <i class="fas fa-user mr-2"></i>Responsável
                        </label>
                        <select class="form-control" name="responsavel">
                            <option disabled selected>Selecione o responsável</option>
                            @foreach ($usuarios as $user)
                                <option value="{{ $user->id }}"
                                    {{ $processo->usuario_responsavel_id == $user->id ? 'selected' : '' }}>
                                    {{ $user->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="situacao" class="font-weight-bold text-primary">
                                    <i class="fas fa-info-circle mr-2"></i>Situação
                                </label>
                                <input class="form-control" name="situacao" type="text"
                                    placeholder="Situação do Processo" value="{{ $processo->situacao }}" required>
                                <div class="invalid-feedback">
                                    Por favor, informe a situação.
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="data_situacao" class="font-weight-bold text-primary">
                                    <i class="fas fa-calendar-alt mr-2"></i>Data Situação
                                </label>
                                <input class="form-control" name="data_situacao" type="date"
                                    value="{{ $processo->data_situacao }}" required>

                                <div class="invalid-feedback">
                                    Por favor, selecione uma data válida.
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="categoria" class="font-weight-bold text-primary">
                                    <i class="fas fa-tag mr-2"></i>Categoria
                                </label>
                                <select class="form-control" name="categoria" id="categoria" required>
                                    <option value="" disabled selected>Selecione a categoria</option>
                                    @foreach ($categorias as $categoria)
                                        <option value="{{ $categoria->id }}"
                                            {{ $processo->id_categoria == $categoria->id ? 'selected' : '' }}>
                                            {{ $categoria->categoria }}
                                        </option>
                                    @endforeach
                                </select>
                                <div class="invalid-feedback">
                                    Por favor, selecione uma categoria.
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="subcategoria" class="font-weight-bold text-primary">
                                    <i class="fas fa-tags mr-2"></i>Subcategoria
                                </label>
                                <select class="form-control" name="subcategoria" id="subcategoria" required>
                                    <option value="" disabled
                                        {{ !isset($processo->subcategoria) ? 'selected' : '' }}>
                                        Selecione a subcategoria
                                    </option>
                                    @if (isset($subcategorias) && $subcategorias->count() > 0)
                                        @foreach ($subcategorias as $subcategoria)
                                            <option value="{{ $subcategoria->id }}"
                                                {{ isset($processo->id_categoria) && $processo->id_categoria == $subcategoria->id ? 'selected' : '' }}>
                                                {{ $subcategoria->subcategoria }}
                                            </option>
                                        @endforeach
                                    @endif
                                </select>
                                <div class="invalid-feedback">
                                    Por favor, selecione uma subcategoria.
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="assunto" class="font-weight-bold text-primary">
                                    <i class="fas fa-bookmark mr-2"></i>Assunto
                                </label>
                                <input type="text" class="form-control" name="assunto" id="assunto"
                                    placeholder="Digite o assunto" value="{{ $processo->assunto ?? '' }}" required>
                                <div class="invalid-feedback">
                                    Por favor, informe o assunto.
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="palavras_chave" class="font-weight-bold text-primary">
                                    <i class="fas fa-key mr-2"></i>Palavras-chave
                                </label>
                                <input type="text" class="form-control" name="palavras_chave" id="palavras_chave"
                                    placeholder="Separe as palavras-chave por vírgula"
                                    value="{{ $processo->palavra_chave }}">
                                <small class="form-text text-muted">
                                    <i class="fas fa-info-circle"></i> Digite as palavras-chave separadas por vírgula
                                </small>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="observacao" class="font-weight-bold text-primary">
                                    <i class="fas fa-comment mr-2"></i>Observações
                                </label>
                                <textarea class="form-control" name="observacao" rows="4" placeholder="Insira seus comentários aqui...">{{ isset($processo->obs) ? $processo->obs : '' }}</textarea>
                            </div>
                        </div>
                    </div>
                    <div class="mt-4">
                        <h5 class="font-weight-bold text-primary mb-3">
                            <i class="fas fa-file-contract mr-2"></i>Contratos Vinculados
                        </h5>
                        <div id="contratos-container">
                            @if (isset($contratos) && $contratos->count() > 0)
                                @foreach ($contratos as $index => $contrato)
                                    <div class="card contrato-card mb-4">
                                        <div class="card-header bg-white border-bottom">
                                            <div class="d-flex justify-content-between align-items-center">
                                                <h6 class="mb-0 text-primary">
                                                    <i class="fas fa-file-contract mr-2"></i>
                                                    <span class="numero-contrato-display">Contrato
                                                        {{ $index + 1 }}</span>
                                                </h6>
                                                <div class="btn-group remove-button-container">
                                                    <button type="button"
                                                        class="btn btn-sm btn-danger btn-remove-contrato"
                                                        style="display: 'flex' }}" data-bs-toggle="tooltip"
                                                        data-bs-placement="top" title="Remover Contrato"
                                                        data-numero-contrato="{{ $contrato->numero_contrato }}"
                                                        data-numero-sei="{{ $contrato->numero_sei }}">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-md-6 mb-3">
                                                    <label class="form-label text-primary">Número do Contrato</label>
                                                    <input type="text" class="form-control" name="numero_contrato[]"
                                                        maxlength="15" required value="{{ $contrato->numero_contrato }}"
                                                        placeholder="Digite o número">
                                                    <div class="invalid-feedback">
                                                        Número do contrato é obrigatório
                                                    </div>
                                                </div>

                                                <div class="col-md-6 mb-3">
                                                    <label class="form-label text-primary">Vigência</label>
                                                    <input type="text" class="form-control" name="vigencia[]" readonly
                                                        value="{{ $contrato->vigencia ?? '' }}"
                                                        placeholder="Vigência em meses">
                                                </div>

                                                <div class="col-md-12 mb-3">
                                                    <label class="form-label text-primary">Empresa</label>
                                                    <input type="text" class="form-control" name="empresa[]"
                                                        maxlength="255" value="{{ $contrato->empresa }}"
                                                        placeholder="Nome da empresa">
                                                </div>

                                                <div class="col-md-6 mb-3">
                                                    <label class="form-label text-primary">Data Início</label>
                                                    <input type="date" class="form-control" name="data_inicio[]"
                                                        value="{{ $contrato->data_inicio }}" required>
                                                    <div class="invalid-feedback">
                                                        Data de início é obrigatória
                                                    </div>
                                                </div>

                                                <div class="col-md-6 mb-3">
                                                    <label class="form-label text-primary">Data Fim</label>
                                                    <input type="date" class="form-control" name="data_fim[]"
                                                        value="{{ $contrato->data_fim }}" required>
                                                    <div class="invalid-feedback">
                                                        Data de fim é obrigatória
                                                    </div>
                                                </div>

                                                <div class="col-md-4 mb-3">
                                                    <label class="form-label text-primary">Aditivo 1</label>
                                                    <input type="text" class="form-control" name="aditivo_1[]"
                                                        maxlength="15" value="{{ $contrato->aditivo_1 }}"
                                                        placeholder="Número do aditivo">
                                                </div>

                                                <div class="col-md-4 mb-3">
                                                    <label class="form-label text-primary">Aditivo 2</label>
                                                    <input type="text" class="form-control" name="aditivo_2[]"
                                                        maxlength="15" value="{{ $contrato->aditivo_2 }}"
                                                        placeholder="Número do aditivo">
                                                </div>

                                                <div class="col-md-4 mb-3">
                                                    <label class="form-label text-primary">Aditivo 3</label>
                                                    <input type="text" class="form-control" name="aditivo_3[]"
                                                        maxlength="15" value="{{ $contrato->aditivo_3 }}"
                                                        placeholder="Número do aditivo">
                                                </div>

                                                <div class="col-12 mb-4">
                                                    <label class="form-label text-primary mb-3">Anexos</label>
                                                    <div class="dropzone-container">
                                                        <div class="drop-area">
                                                            <p>Arraste e solte arquivos aqui ou</p>
                                                            <input type="file" class="file-elem" multiple
                                                                accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png"
                                                                style="display:none">
                                                            <button type="button"
                                                                class="file-select btn btn-outline-primary">
                                                                Selecione os arquivos
                                                            </button>
                                                        </div>
                                                        <small class="form-text text-muted">
                                                            Tamanho máximo: 100MB. Formatos aceitos: PDF, DOC, DOCX, XLS,
                                                            XLSX, JPG, JPEG, PNG. Máximo 5 arquivos.
                                                        </small>
                                                        <div class="file-list mt-3">
                                                            <div class="new-files" style="display: none;">
                                                                <h6 class="text-primary">Arquivos para upload:</h6>
                                                                <div class="new-files-list"></div>
                                                            </div>
                                                            @if (!empty($contrato->anexos_array))
                                                                <div class="existing-files">
                                                                    <h6 class="text-primary mt-3">Arquivos existentes:</h6>
                                                                    <div class="existing-files-list">
                                                                        @foreach ($contrato->anexos_array as $anexo)
                                                                            <div
                                                                                class="file-preview d-flex align-items-center bg-light p-2 mb-2 rounded">
                                                                                <i class="fas fa-file me-2"></i>
                                                                                <span
                                                                                    class="file-name flex-grow-1">{{ basename($anexo) }}</span>
                                                                                <div class="file-actions">
                                                                                    <a href="{{ asset($anexo) }}"
                                                                                        class="btn btn-sm btn-outline-info me-1"
                                                                                        target="_blank"
                                                                                        title="Visualizar">
                                                                                        <i class="fas fa-eye"></i>
                                                                                    </a>
                                                                                    <button type="button"
                                                                                        class="btn btn-sm btn-outline-danger delete-existing-file"
                                                                                        data-contrato-id="{{ $contrato->id }}"
                                                                                        data-filename="{{ basename($anexo) }}"
                                                                                        data-path="{{ $anexo }}"
                                                                                        title="Excluir">
                                                                                        <i class="fas fa-trash"></i>
                                                                                    </button>
                                                                                </div>
                                                                            </div>
                                                                        @endforeach
                                                                    </div>
                                                                </div>
                                                            @endif
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            @endif
                        </div>
                    </div>
                    <div class="text-center mt-4">
                        <a href="{{ route('publicador.processos.da.index') }}" class="btn btn-outline-danger mr-2">
                            <i class="fas fa-times mr-1"></i>Cancelar
                        </a>
                        <button type="submit" class="btn btn-success">
                            <i class="fas fa-save mr-1"></i>Salvar
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="floating-action-button">
        <button class="fab-main">
            <i class="fas fa-plus"></i>
        </button>
        <ul class="fab-options">
            <li>
                <button type="button" class="fab-option" onclick="adicionarContrato()">
                    <i class="fas fa-file-contract"></i>
                    <span>Adicionar Contrato</span>
                </button>
            </li>
            <li>
                <button type="button" class="fab-option fab-cancel"
                    onclick="window.location.href='{{ route('publicador.processos.da.index') }}'">
                    <i class="fas fa-times"></i>
                    <span>Cancelar</span>
                </button>
            </li>
            <li>
                <button type="button" class="fab-option fab-save" onclick="validarESalvar(event)" disabled>
                    <i class="fas fa-save"></i>
                    <span>Salvar</span>
                </button>
            </li>
            <li>
                <button type="button" style="display:none;" class="fab-option fab-history"
                    onclick="window.location.href=''">
                    <i class="fas fa-history"></i>
                    <span>Histórico</span>
                </button>
            </li>
        </ul>
    </div>

    <template id="contrato-template">
        <div class="card contrato-card mb-4">
            <div class="card-header bg-white border-bottom">
                <div class="d-flex justify-content-between align-items-center">
                    <h6 class="mb-0 text-primary">
                        <i class="fas fa-file-contract mr-2"></i>
                        <span class="numero-contrato-display">Novo Contrato</span>
                    </h6>
                    <div class="btn-group remove-button-container">
                        <button type="button" class="btn btn-sm btn-danger btn-remove-contrato" style="display: none;"
                            data-bs-toggle="tooltip" data-bs-placement="top" title="Remover Contrato">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                </div>
            </div>

            <div class="card-body">
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label text-primary">Número do Contrato</label>
                        <input type="text" class="form-control" name="numero_contrato[]" maxlength="15" required
                            placeholder="Digite o número">
                        <div class="invalid-feedback">
                            Número do contrato é obrigatório
                        </div>
                    </div>

                    <div class="col-md-6 mb-3">
                        <label class="form-label text-primary">Vigência</label>
                        <input type="text" class="form-control" name="vigencia[]" readonly
                            placeholder="Vigência em meses">
                    </div>

                    <div class="col-md-12 mb-3">
                        <label class="form-label text-primary">Empresa</label>
                        <input type="text" class="form-control" name="empresa[]" maxlength="255"
                            placeholder="Nome da empresa">
                    </div>

                    <div class="col-md-6 mb-3">
                        <label class="form-label text-primary">Data Início</label>
                        <input type="date" class="form-control" name="data_inicio[]" required>
                        <div class="invalid-feedback">
                            Data de início é obrigatória
                        </div>
                    </div>

                    <div class="col-md-6 mb-3">
                        <label class="form-label text-primary">Data Fim</label>
                        <input type="date" class="form-control" name="data_fim[]" required>
                        <div class="invalid-feedback">
                            Data de fim é obrigatória
                        </div>
                    </div>

                    <div class="col-md-4 mb-3">
                        <label class="form-label text-primary">Aditivo 1</label>
                        <input type="text" class="form-control" name="aditivo_1[]" maxlength="15"
                            placeholder="Número do aditivo">
                    </div>

                    <div class="col-md-4 mb-3">
                        <label class="form-label text-primary">Aditivo 2</label>
                        <input type="text" class="form-control" name="aditivo_2[]" maxlength="15"
                            placeholder="Número do aditivo">
                    </div>

                    <div class="col-md-4 mb-3">
                        <label class="form-label text-primary">Aditivo 3</label>
                        <input type="text" class="form-control" name="aditivo_3[]" maxlength="15"
                            placeholder="Número do aditivo">
                    </div>

                    <div class="col-12 mb-4">
                        <label class="form-label text-primary mb-3">Anexos</label>
                        <div class="dropzone-container">
                            <div class="drop-area">
                                <p>Arraste e solte arquivos aqui ou</p>
                                <input type="file" class="file-elem" multiple
                                    accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png" style="display:none">
                                <button type="button" class="file-select btn btn-outline-primary">
                                    Selecione os arquivos
                                </button>
                            </div>
                            <small class="form-text text-muted">
                                Tamanho máximo: 100MB. Formatos aceitos: PDF, DOC, DOCX, XLS, XLSX, JPG, JPEG, PNG. Máximo 5
                                arquivos.
                            </small>
                            <div class="file-list mt-3">
                                <div class="new-files" style="display: none;">
                                    <h6 class="text-primary">Arquivos para upload:</h6>
                                    <div class="new-files-list"></div>
                                </div>
                                <div class="existing-files" style="display: none;">
                                    <h6 class="text-primary mt-3">Arquivos existentes:</h6>
                                    <div class="existing-files-list"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </template>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.32/dist/sweetalert2.min.css" rel="stylesheet">

    <style>
        a.fab-option.fab-cancel {
            text-decoration: none;
            width: 65%;
        }

        .floating-action-button {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            z-index: 1000;
        }

        .fab-main {
            width: 3.5rem;
            height: 3.5rem;
            border-radius: 50%;
            background: #007bff;
            border: none;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
            color: white;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .fab-main:hover {
            background: #0056b3;
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
        }

        .fab-main i {
            font-size: 1.5rem;
            transition: transform 0.3s ease;
        }

        .fab-main.active {
            background: #dc3545;
        }

        .fab-main.active i {
            transform: rotate(135deg);
        }

        .fab-options {
            position: absolute;
            bottom: 70px;
            right: 5px;
            list-style: none;
            padding: 0;
            margin: 0;
            visibility: hidden;
        }

        .fab-options.show {
            visibility: visible;
        }

        .fab-options li {
            transform: translateY(10px);
            opacity: 0;
            transition: transform 0.3s ease, opacity 0.3s ease;
            margin-bottom: 10px;
        }

        .fab-options.show li {
            opacity: 1;
            transform: translateY(0);
        }

        .fab-options.show li:nth-child(1) {
            transition-delay: 0.1s;
        }

        .fab-options.show li:nth-child(2) {
            transition-delay: 0.2s;
        }

        .fab-options.show li:nth-child(3) {
            transition-delay: 0.3s;
        }

        .fab-options.show li:nth-child(4) {
            transition-delay: 0.4s;
        }

        .fab-option {
            display: flex;
            align-items: center;
            background: white;
            border: none;
            padding: 10px 20px;
            border-radius: 25px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16);
            cursor: pointer;
            transition: all 0.3s ease;
            color: #004a99;
            white-space: nowrap;
            text-decoration: none;
        }

        .fab-option i {
            margin-right: 8px;
            font-size: 1.1rem;
        }

        /* Estilos específicos para cada botão */
        .fab-option.fab-cancel {
            background-color: #dc3545;
            color: white;
        }

        .fab-option.fab-cancel:hover {
            background-color: #c82333;
        }

        .fab-option.fab-save {
            background-color: #28a745;
            color: white;
        }

        .fab-option.fab-save:hover:not(:disabled) {
            background-color: #218838;
        }

        .fab-option.fab-save:disabled {
            background-color: #6c757d;
            cursor: not-allowed;
            opacity: 0.65;
        }

        .fab-option.fab-history {
            background-color: #17a2b8;
            color: white;
        }

        .fab-option.fab-history:hover {
            background-color: #138496;
        }

        /* Estilos Base do Layout */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 15px;
        }

        /* Estilos do Card Principal */
        .card {
            border-radius: 8px;
            overflow: hidden;
            transition: box-shadow 0.3s ease;
            border: none;
        }

        .card:hover {
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        }

        .card-header {
            background: linear-gradient(to right, #004a99, #0066cc);
            padding: 1rem 1.25rem;
            border-bottom: 1px solid rgba(0, 0, 0, 0.125);
        }

        /* Estilos dos Cards de Contrato */
        .contrato-card {
            border: 1px solid rgba(0, 0, 0, 0.1);
            border-radius: 10px;
            transition: all 0.3s ease;
            background-color: #ffffff;
            margin-bottom: 1.5rem;
        }

        .contrato-card:hover {
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
            transform: translateY(-2px);
        }

        .contrato-card .card-header {
            background: linear-gradient(to right, #f8f9fa, #ffffff);
            padding: 1rem 1.25rem;
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            border-radius: 10px 10px 0 0;
        }

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

        /* Estilos dos Formulários */
        .form-control {
            border: 1px solid #ced4da;
            border-radius: 6px;
            padding: 0.5rem 0.75rem;
            font-size: 0.95rem;
            transition: all 0.2s ease;
            height: auto;
            line-height: 1.5;
        }

        .form-control:focus {
            border-color: #80bdff;
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.15);
            outline: 0;
        }

        .form-label {
            font-weight: 500;
            margin-bottom: 0.5rem;
            font-size: 0.9rem;
            color: #495057;
        }

        .form-group {
            margin-bottom: 1rem;
        }

        .invalid-feedback {
            display: none;
            color: #dc3545;
            font-size: 80%;
            margin-top: 0.25rem;
        }

        /* Área de Upload */
        .drop-area {
            border: 2px dashed #007bff;
            border-radius: 8px;
            background-color: #f8f9fa;
            padding: 2rem;
            text-align: center;
            transition: all 0.3s ease;
            cursor: pointer;
            min-height: 150px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .drop-area:hover,
        .drop-area.drag-over {
            background-color: #e9ecef;
            border-color: #0056b3;
        }

        .drop-area p {
            margin: 0;
            color: #6c757d;
        }

        .drop-area .btn {
            margin-top: 1rem;
        }

        /* Lista de Arquivos */
        .file-preview {
            display: flex;
            align-items: center;
            padding: 0.75rem;
            background-color: #f8f9fa;
            border-radius: 6px;
            margin-bottom: 0.5rem;
            transition: background-color 0.2s ease;
        }

        .file-preview:hover {
            background-color: #e9ecef;
        }

        .file-preview .file-icon {
            font-size: 1.25rem;
            color: #6c757d;
            margin-right: 0.75rem;
        }

        .file-preview .file-name {
            flex-grow: 1;
            margin-left: 1rem;
            color: #495057;
            font-size: 0.9rem;
        }

        .file-preview .file-actions {
            display: flex;
            gap: 0.5rem;
        }

        .file-preview .btn {
            padding: 0.25rem 0.5rem;
            font-size: 0.875rem;
        }

        /* Botões e Ações */
        .btn {
            border-radius: 6px;
            padding: 0.5rem 1rem;
            font-weight: 500;
            transition: all 0.2s ease;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

        .btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .btn-primary {
            background-color: #007bff;
            border-color: #007bff;
            color: white;
        }

        .btn-primary:hover {
            background-color: #0056b3;
            border-color: #0056b3;
        }

        .btn-danger {
            background-color: #dc3545;
            border-color: #dc3545;
            color: white;
        }

        .btn-danger:hover {
            background-color: #c82333;
            border-color: #bd2130;
        }

        .btn-outline-primary {
            color: #007bff;
            border-color: #007bff;
            background-color: transparent;
        }

        .btn-outline-primary:hover {
            color: white;
            background-color: #007bff;
        }

        .btn-group .btn {
            padding: 0.375rem 0.75rem;
        }

        /* Floating Action Button */
        .floating-action-button {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            z-index: 1000;
        }

        .fab-main {
            width: 3.5rem;
            height: 3.5rem;
            border-radius: 50%;
            background: #007bff;
            border: none;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
            color: white;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .fab-main:hover {
            background: #0056b3;
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
        }

        .fab-main i {
            font-size: 1.5rem;
            transition: transform 0.3s ease;
        }

        .fab-main.active {
            background: #dc3545;
        }

        .fab-main.active i {
            transform: rotate(135deg);
        }

        .fab-options {
            position: absolute;
            bottom: 70px;
            right: 5px;
            list-style: none;
            padding: 0;
            margin: 0;
            visibility: hidden;
        }

        .fab-options.show {
            visibility: visible;
        }

        .fab-options li {
            transform: translateY(10px);
            opacity: 0;
            transition: transform 0.3s ease, opacity 0.3s ease;
            margin-bottom: 10px;
        }

        .fab-options.show li {
            opacity: 1;
            transform: translateY(0);
        }

        .fab-options.show li:nth-child(1) {
            transition-delay: 0.1s;
        }

        .fab-options.show li:nth-child(2) {
            transition-delay: 0.2s;
        }

        .fab-option {
            display: flex;
            align-items: center;
            background: white;
            border: none;
            padding: 10px 20px;
            border-radius: 25px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16);
            cursor: pointer;
            transition: all 0.3s ease;
            color: #004a99;
            white-space: nowrap;
        }

        .fab-option:hover {
            background: #f8f9fa;
            transform: translateX(-5px);
        }

        .fab-option i {
            margin-right: 8px;
            font-size: 1.1rem;
        }

        /* Utilitários */
        .gap-2 {
            gap: 0.5rem !important;
        }

        .text-primary {
            color: #004a99 !important;
        }

        /* Responsividade */
        @media (max-width: 768px) {
            .contrato-card {
                margin-bottom: 1rem;
            }

            .form-group {
                margin-bottom: 1rem;
            }

            .floating-action-button {
                bottom: 1rem;
                right: 1rem;
            }

            .fab-main {
                width: 3rem;
                height: 3rem;
            }

            .fab-option {
                padding: 8px 16px;
                font-size: 0.9rem;
            }

            .form-label {
                font-size: 0.85rem;
            }
        }

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

        .was-validated .form-control:valid {
            border-color: #28a745;
            padding-right: calc(1.5em + 0.75rem);
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right calc(0.375em + 0.1875rem) center;
            background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
        }
    </style>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.32/dist/sweetalert2.all.min.js"></script>

    <script>

        //script antigo

        function validateForm() {
            let isValid = true;
            const form = document.querySelector('form');
            const saveButton = document.querySelector('.fab-save');

            // Validar campos obrigatórios
            form.querySelectorAll('input[required], select[required]').forEach(function(element) {
                if (!element.value) {
                    isValid = false;
                    element.classList.add('is-invalid');
                } else {
                    element.classList.remove('is-invalid');
                }
            });

            // Validar datas dos contratos
            form.querySelectorAll('.contrato-card').forEach(function(card) {
                const dataInicio = card.querySelector('input[name="data_inicio[]"]');
                const dataFim = card.querySelector('input[name="data_fim[]"]');

                if (dataInicio && dataFim && dataInicio.value && dataFim.value) {
                    const inicio = new Date(dataInicio.value);
                    const fim = new Date(dataFim.value);

                    if (inicio > fim) {
                        isValid = false;
                    }
                }
            });

            // Atualizar estado do botão de salvar
            if (saveButton) {
                saveButton.disabled = !isValid;
            }

            return isValid;
        }

        function validarESalvar() {
            const form = document.querySelector('form');
            if (form && validateForm()) {
                event.preventDefault();
                event.stopPropagation();

                const token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
                if (!form.querySelector('input[name="_token"]')) {
                    const csrfInput = document.createElement('input');
                    csrfInput.type = 'hidden';
                    csrfInput.name = '_token';
                    csrfInput.value = token;
                    form.appendChild(csrfInput);
                }

                form.submit();
            } else {
                Swal.fire({
                    title: 'Atenção!',
                    text: 'Por favor, preencha todos os campos obrigatórios corretamente',
                    icon: 'warning',
                    confirmButtonText: 'Ok'
                });
            }
        }

        // Setup inicial do formulário
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.querySelector('form');

            // Adicionar listeners para validação em tempo real
            form.querySelectorAll('input[required], select[required]').forEach(input => {
                input.addEventListener('input', validateForm);
                input.addEventListener('change', validateForm);
            });

            // Configurar o botão FAB principal
            const fabMain = document.querySelector('.fab-main');
            const fabOptions = document.querySelector('.fab-options');
            let isOpen = false;

            if (fabMain && fabOptions) {
                fabMain.addEventListener('click', function() {
                    isOpen = !isOpen;
                    if (isOpen) {
                        fabMain.classList.add('active');
                        fabOptions.classList.add('show');
                    } else {
                        fabMain.classList.remove('active');
                        fabOptions.classList.remove('show');
                    }
                });

                // Fechar o menu ao clicar fora
                document.addEventListener('click', function(e) {
                    if (!e.target.closest('.floating-action-button') && isOpen) {
                        isOpen = false;
                        fabMain.classList.remove('active');
                        fabOptions.classList.remove('show');
                    }
                });
            }

            // Validação inicial
            validateForm();
        });

        function calcularVigenciaEmMeses(dataInicio, dataFim) {
            const inicio = new Date(dataInicio);
            const fim = new Date(dataFim);

            const inicioAjustado = new Date(inicio.getFullYear(), inicio.getMonth(), 1);
            const fimAjustado = new Date(fim.getFullYear(), fim.getMonth() + 1, 0);

            const meses = (fimAjustado.getFullYear() - inicioAjustado.getFullYear()) * 12 +
                (fimAjustado.getMonth() - inicioAjustado.getMonth()) + 1;

            return meses;
        }

        function atualizarVigencia(cardElement) {
            const dataInicio = cardElement.querySelector('input[name="data_inicio[]"]');
            const dataFim = cardElement.querySelector('input[name="data_fim[]"]');
            const vigencia = cardElement.querySelector('input[name="vigencia[]"]');

            if (dataInicio && dataFim && vigencia && dataInicio.value && dataFim.value) {
                const meses = calcularVigenciaEmMeses(dataInicio.value, dataFim.value);
                vigencia.value = `${meses} meses`;
            }
        }

        function setupDateValidation(cardElement) {
            const dataInicio = cardElement.querySelector('input[name="data_inicio[]"]');
            const dataFim = cardElement.querySelector('input[name="data_fim[]"]');

            if (!dataInicio || !dataFim) return;

            [dataInicio, dataFim].forEach(input => {
                input.addEventListener('change', () => {
                    if (dataInicio.value && dataFim.value) {
                        const inicio = new Date(dataInicio.value);
                        const fim = new Date(dataFim.value);

                        if (inicio > fim) {
                            Swal.fire({
                                title: 'Data Inválida',
                                text: 'A data de início não pode ser posterior à data de fim',
                                icon: 'error'
                            });
                            input.value = '';
                        } else {
                            atualizarVigencia(cardElement);
                        }
                    }
                });
            });

            if (dataInicio.value && dataFim.value) {
                atualizarVigencia(cardElement);
            }
        }

        function formatarDatas() {
            document.querySelectorAll('input[type="date"]').forEach((input, index) => {
                const valorAtributo = input.getAttribute('value');

                if (valorAtributo && valorAtributo.includes(' ')) {
                    const novoValor = valorAtributo.split(' ')[0];
                    input.value = novoValor;
                    input.setAttribute('value', novoValor);
                }

                if (input.value && input.value.includes(' ')) {
                    const novoValor = input.value.split(' ')[0];
                    input.value = novoValor;
                    input.setAttribute('value', novoValor);
                }
            });
        }

        document.addEventListener('DOMContentLoaded', function() {

            formatarDatas();
            initializeMasks();

            const contratosContainer = document.getElementById('contratos-container');

            if (contratosContainer) {

                if (contratosContainer.children.length === 0) {
                    adicionarContrato();
                } else {

                    if (typeof window.originalSetupRemoveButton === 'undefined') {
                        window.originalSetupRemoveButton = setupRemoveButton;
                    }

                    contratosContainer.querySelectorAll('.contrato-card').forEach(function(card) {
                        setupFileUpload(card);
                        setupDateValidation(card);
                        setupRemoveButton(card);
                    });
                }
            }

            setupFloatingActionButton();
            setupCategoriaSubcategoria();
            setupFormValidation();
            initializeTooltips();
            setupExistingFileDelete();
        });

        const routes = {
            deleteFile: @json(route('publicador.processos.da.delete_file', ['contrato' => ':contrato', 'filename' => ':filename'])),
            deleteContrato: @json(route('publicador.processos.da.delete_contrato', [
                    'numero_contrato' => ':numero_contrato',
                    'numero_sei' => ':numero_sei'
                ]))
        };

        function setupRemoveExistingContract(cardElement) {
            if (!cardElement) return;

            const removeButton = cardElement.querySelector('.btn-remove-contrato');
            if (!removeButton) return;

            const container = document.getElementById('contratos-container');
            if (!container) {
                console.error('Container de contratos não encontrado');
                return;
            }

            removeButton.addEventListener('click', () => {
                const cardToRemove = removeButton.closest('.contrato-card');
                const numeroContrato = removeButton.dataset.numeroContrato;
                const numeroSei = removeButton.dataset.numeroSei;



                if (!numeroContrato || !numeroSei) {
                    console.error('Dados do contrato não encontrados');
                    return;
                }

                Swal.fire({
                    title: 'Remover Contrato',
                    text: `Tem certeza que deseja remover o contrato ${numeroContrato}?`,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#dc3545',
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: 'Sim, remover',
                    cancelButtonText: 'Cancelar'
                }).then((result) => {
                    if (result.isConfirmed) {
                        const token = document.querySelector('meta[name="csrf-token"]').getAttribute(
                            'content');
                        const url = routes.deleteContrato
                            .replace(':numero_contrato', encodeURIComponent(numeroContrato))
                            .replace(':numero_sei', encodeURIComponent(numeroSei));


                        fetch(url, {
                                method: 'DELETE',
                                headers: {
                                    'X-CSRF-TOKEN': token,
                                    'Accept': 'application/json',
                                    'Content-Type': 'application/json'
                                }
                            })
                            .then(response => response.json())
                            .then(data => {
                                if (data.success) {
                                    cardToRemove.remove();
                                    atualizarNumeracaoContratos();
                                    updateGlobalCounter();
                                    Swal.fire(
                                        'Removido!',
                                        'O contrato foi removido com sucesso.',
                                        'success'
                                    );
                                } else {
                                    throw new Error(data.message || 'Erro ao remover contrato');
                                }
                            })
                            .catch(error => {
                                console.error('Erro ao remover contrato:', error);
                                Swal.fire(
                                    'Erro!',
                                    error.message || 'Ocorreu um erro ao remover o contrato.',
                                    'error'
                                );
                            });
                    }
                });
            });
        }

        function setupRemoveNewContract(cardElement) {
            if (!cardElement) return;

            const removeButton = cardElement.querySelector('.btn-remove-contrato');
            if (!removeButton) return;

            const container = document.getElementById('contratos-container');
            if (!container) return;

            removeButton.addEventListener('click', () => {
                const cards = container.querySelectorAll('.contrato-card');
                const cardToRemove = removeButton.closest('.contrato-card');

                Swal.fire({
                    title: 'Remover Contrato',
                    text: 'Tem certeza que deseja remover este contrato?',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#dc3545',
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: 'Sim, remover',
                    cancelButtonText: 'Cancelar'
                }).then((result) => {
                    if (result.isConfirmed) {
                        cardToRemove.remove();
                        atualizarNumeracaoContratos();
                        updateGlobalCounter();
                        Swal.fire(
                            'Removido!',
                            'O contrato foi removido com sucesso.',
                            'success'
                        );
                    }
                });

            });
        }

        function setupRemoveButton(cardElement) {
            const removeButton = cardElement.querySelector('.btn-remove-contrato');
            if (!removeButton) return;

            const numeroContrato = removeButton.dataset.numeroContrato;
            const numeroSei = removeButton.dataset.numeroSei;

            if (numeroContrato && numeroSei) {
                setupRemoveExistingContract(cardElement);
            } else {
                setupRemoveNewContract(cardElement);
            }
        }

        function setupExistingFileDelete() {
            document.querySelectorAll('.delete-existing-file').forEach(button => {
                button.addEventListener('click', function() {
                    const contratoId = this.dataset.contratoId;
                    const filename = this.dataset.filename;
                    const filePath = this.dataset.path;
                    const filePreview = this.closest('.file-preview');
                    const existingFiles = filePreview.closest('.existing-files');

                    Swal.fire({
                        title: 'Confirmar exclusão',
                        text: `Tem certeza que deseja excluir o arquivo "${filename}"?`,
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#dc3545',
                        cancelButtonColor: '#6c757d',
                        confirmButtonText: 'Sim, excluir',
                        cancelButtonText: 'Cancelar'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            const token = document.querySelector('meta[name="csrf-token"]')
                                .getAttribute('content');
                            const url = routes.deleteFile
                                .replace(':contrato', contratoId)
                                .replace(':filename', encodeURIComponent(filename));

                            fetch(url, {
                                    method: 'DELETE',
                                    headers: {
                                        'X-CSRF-TOKEN': token,
                                        'Accept': 'application/json',
                                        'Content-Type': 'application/json'
                                    }
                                })
                                .then(response => response.json())
                                .then(data => {
                                    if (data.success) {
                                        if (filePreview) {
                                            filePreview.remove();
                                        }

                                        if (existingFiles) {
                                            const remainingPreviews = existingFiles
                                                .querySelectorAll('.file-preview');
                                            if (remainingPreviews.length === 0) {
                                                existingFiles.style.display = 'none';
                                            }
                                        }

                                        updateGlobalCounter();

                                        Swal.fire(
                                            'Excluído!',
                                            'O arquivo foi excluído com sucesso.',
                                            'success'
                                        );
                                    } else {
                                        throw new Error(data.message ||
                                            'Erro ao excluir arquivo');
                                    }
                                })
                                .catch(error => {
                                    console.error('Erro ao excluir arquivo:', error);
                                    Swal.fire(
                                        'Erro!',
                                        error.message ||
                                        'Ocorreu um erro ao excluir o arquivo.',
                                        'error'
                                    );
                                });
                        }
                    });
                });
            });
        }

        function initializeMasks() {
            var SPMaskBehavior = function(val) {
                return val.replace(/\D/g, '').length === 11 ? '(00) 00000-0000' : '(00) 0000-00009';
            };

            var spOptions = {
                onKeyPress: function(val, e, field, options) {
                    field.mask(SPMaskBehavior.apply({}, arguments), options);
                }
            };

            $('.telefone-mask').mask(SPMaskBehavior, spOptions);
        }

        function setupFloatingActionButton() {
            const fabMain = document.querySelector('.fab-main');
            const fabOptions = document.querySelector('.fab-options');
            let isOpen = false;

            if (fabMain && fabOptions) {
                fabMain.addEventListener('click', function() {
                    isOpen = !isOpen;
                    if (isOpen) {
                        fabMain.classList.add('active');
                        fabOptions.classList.add('show');
                    } else {
                        fabMain.classList.remove('active');
                        fabOptions.classList.remove('show');
                    }
                });

                document.addEventListener('click', function(e) {
                    if (!e.target.closest('.floating-action-button') && isOpen) {
                        isOpen = false;
                        fabMain.classList.remove('active');
                        fabOptions.classList.remove('show');
                    }
                });
            }
        }

        window.adicionarContrato = function() {
            const template = document.getElementById('contrato-template');
            const container = document.getElementById('contratos-container');

            if (!template || !container) {
                console.error('Template ou container não encontrado');
                return;
            }

            const clone = template.content.cloneNode(true);
            const numContratos = container.children.length + 1;

            const numeroContratoDisplay = clone.querySelector('.numero-contrato-display');
            if (numeroContratoDisplay) {
                numeroContratoDisplay.textContent = `Contrato ${numContratos}`;
            }

            const removeButton = clone.querySelector('.btn-remove-contrato');
            if (removeButton) {
                removeButton.style.display = numContratos > 1 ? 'flex' : 'none';
            }

            container.appendChild(clone);

            const novoCard = container.lastElementChild;
            if (novoCard) {
                setupFileUpload(novoCard);
                setupDateValidation(novoCard);
                setupRemoveButton(novoCard);

                $(novoCard).find('.telefone-mask').mask('(00) 00000-0000');
            }

            const fabMain = document.querySelector('.fab-main');
            const fabOptions = document.querySelector('.fab-options');
            if (fabMain && fabOptions) {
                fabMain.classList.remove('active');
                fabOptions.classList.remove('show');
            }
        };

        function validarArquivo(file) {
            const tiposPermitidos = [
                'application/pdf',
                'application/msword',
                'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
                'application/vnd.ms-excel',
                'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
                'image/jpeg',
                'image/png'
            ];

            if (!tiposPermitidos.includes(file.type)) {
                Swal.fire({
                    title: 'Tipo de arquivo não permitido',
                    text: 'Por favor, selecione apenas arquivos PDF, DOC, DOCX, XLS, XLSX, JPG, JPEG ou PNG',
                    icon: 'error'
                });
                return false;
            }

            const maxSize = 100 * 1024 * 1024;
            if (file.size > maxSize) {
                Swal.fire({
                    title: 'Arquivo muito grande',
                    text: 'O tamanho máximo permitido é 100MB',
                    icon: 'error'
                });
                return false;
            }

            return true;
        }

        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 setupFileUpload(cardElement) {

            const fileElem = cardElement.querySelector('.file-elem');
            const fileSelect = cardElement.querySelector('.file-select');
            const dropArea = cardElement.querySelector('.drop-area');
            const newFileList = cardElement.querySelector('.new-files-list');
            const newFileSection = cardElement.querySelector('.new-files');
            const form = cardElement.closest('form');

            if (!fileElem || !fileSelect || !dropArea || !form) return;

            if (!cardElement.__fileState) {
                cardElement.__fileState = {
                    files: [],
                    totalSize: 0,
                    maxFiles: 5,
                    maxFileSize: 100 * 1024 * 1024,
                    maxTotalSize: 100 * 1024 * 1024,
                    isProcessing: false
                };
            }

            const state = cardElement.__fileState;

            async function processFiles(fileList) {
                if (state.isProcessing) return;
                state.isProcessing = true;

                try {
                    const files = Array.from(fileList);
                    for (const file of files) {
                        if (!validarArquivo(file)) continue;

                        if (state.files.length >= state.maxFiles) {
                            Swal.fire({
                                title: 'Erro!',
                                text: 'Número máximo de arquivos atingido (5 arquivos).',
                                icon: 'error'
                            });
                            break;
                        }

                        if (!isWithinGlobalLimit(file.size)) {
                            Swal.fire({
                                title: 'Erro!',
                                text: 'O tamanho total dos arquivos de todos os contratos não pode exceder 100MB.',
                                icon: 'error'
                            });
                            break;
                        }

                        if (!state.files.some(f => f.name === file.name)) {
                            state.files.push(file);
                            state.totalSize += file.size;
                        }
                    }

                    updateFileList();
                    updateGlobalCounter();
                } finally {
                    state.isProcessing = false;
                }
            }

            fileSelect.addEventListener("click", (e) => {
                e.preventDefault();
                e.stopPropagation();

                fileElem.value = '';
                fileElem.click();
            });

            fileElem.addEventListener("change", function(e) {
                e.preventDefault();
                if (this.files && this.files.length > 0) {
                    processFiles(this.files);
                }
            });

            dropArea.addEventListener("dragover", function(e) {
                e.preventDefault();
                e.stopPropagation();
                dropArea.classList.add('drag-over');
            });

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

            dropArea.addEventListener("drop", function(e) {
                e.preventDefault();
                e.stopPropagation();
                dropArea.classList.remove('drag-over');
                if (e.dataTransfer.files.length > 0) {
                    handleFiles(Array.from(e.dataTransfer.files));
                }
            });

            function handleFiles(files) {
                for (const file of files) {
                    if (!validarArquivo(file)) continue;

                    if (state.files.length >= state.maxFiles) {
                        Swal.fire({
                            title: 'Erro!',
                            text: 'Número máximo de arquivos atingido (5 arquivos).',
                            icon: 'error'
                        });
                        break;
                    }

                    if (!isWithinGlobalLimit(file.size)) {
                        Swal.fire({
                            title: 'Erro!',
                            text: 'O tamanho total dos arquivos de todos os contratos não pode exceder 100MB.',
                            icon: 'error'
                        });
                        break;
                    }

                    if (!state.files.some(f => f.name === file.name)) {
                        state.files.push(file);
                        state.totalSize += file.size;
                    }
                }

                updateFileList();
                updateGlobalCounter();
            }

            function createFilePreview(file, index) {
                const filePreview = document.createElement('div');
                filePreview.className = 'file-preview d-flex align-items-center bg-light p-2 mb-2 rounded';
                filePreview.innerHTML = `
                <i class="fas fa-file me-2"></i>
                <span class="file-name flex-grow-1">${file.name} (${formatFileSize(file.size)})</span>
                <div class="file-actions">
                    <button type="button" class="btn btn-sm btn-outline-info view-file me-1" title="Visualizar">
                        <i class="fas fa-eye"></i>
                    </button>
                    <button type="button" class="btn btn-sm btn-outline-danger remove-file" title="Remover">
                        <i class="fas fa-trash"></i>
                    </button>
                </div>
                `;

                const viewBtn = filePreview.querySelector('.view-file');
                viewBtn.addEventListener('click', () => {
                    const url = URL.createObjectURL(file);
                    window.open(url, '_blank');
                    URL.revokeObjectURL(url);
                });

                const removeBtn = filePreview.querySelector('.remove-file');
                removeBtn.addEventListener('click', () => {
                    state.totalSize -= state.files[index].size;
                    state.files.splice(index, 1);
                    updateFileList();
                    updateGlobalCounter();
                });

                return filePreview;
            }

            function updateFileList() {
                if (!newFileList) return;

                newFileList.innerHTML = '';

                state.files.forEach((file, index) => {
                    const filePreview = createFilePreview(file, index);
                    newFileList.appendChild(filePreview);
                });

                if (state.files.length > 0) {
                    const totalSizeDiv = document.createElement('div');
                    totalSizeDiv.className = 'total-size mt-2 text-muted';
                    totalSizeDiv.innerHTML = `
                <i class="fas fa-info-circle me-1"></i>
                Total no card: ${state.files.length} arquivo(s) |
                Tamanho: ${formatFileSize(state.totalSize)}
                `;
                    newFileList.appendChild(totalSizeDiv);
                }

                if (newFileSection) {
                    newFileSection.style.display = state.files.length > 0 ? 'block' : 'none';
                }

                updateHiddenInputs();
            }

            function updateHiddenInputs() {
                const cardIndex = Array.from(form.querySelectorAll('.contrato-card')).indexOf(cardElement);
                const existingInputs = form.querySelectorAll(`input[name^="anexos[${cardIndex}]"]`);
                existingInputs.forEach(input => input.remove());

                state.files.forEach((file, fileIndex) => {
                    const input = document.createElement('input');
                    input.type = 'file';
                    input.name = `anexos[${cardIndex}][${fileIndex}]`;
                    input.style.display = 'none';

                    const dataTransfer = new DataTransfer();
                    dataTransfer.items.add(file);
                    input.files = dataTransfer.files;

                    form.appendChild(input);
                });
            }

            function isWithinGlobalLimit(newFileSize) {
                const otherCardsSize = getTotalSize();
                const currentCardSize = state.totalSize;
                const wouldBeTotal = otherCardsSize + currentCardSize + newFileSize;

                return wouldBeTotal <= state.maxTotalSize;
            }

            function getTotalSize() {
                let totalSize = 0;
                document.querySelectorAll('.contrato-card').forEach(card => {
                    if (card.__fileState && card !== cardElement) {
                        totalSize += card.__fileState.totalSize;
                    }
                });
                return totalSize;
            }
        }

        function updateGlobalCounter() {
            const form = document.querySelector('form');
            if (!form) return;

            let totalFiles = 0;
            let totalSize = 0;

            form.querySelectorAll('.contrato-card').forEach(card => {
                if (card.__fileState) {
                    totalFiles += card.__fileState.files.length;
                    totalSize += card.__fileState.totalSize;
                }
            });

            let globalCounter = form.querySelector('.global-file-counter');
            let submitButton = form.querySelector('button[type="submit"]');

            if (!globalCounter && submitButton) {
                globalCounter = document.createElement('div');
                globalCounter.className = 'global-file-counter mt-3 p-3 bg-light rounded border';

                let container = submitButton.closest('.text-center');
                if (container && container.parentElement) {
                    container.parentElement.insertBefore(globalCounter, container);
                } else {
                    form.appendChild(globalCounter);
                }
            }

            if (globalCounter) {
                if (totalFiles > 0) {
                    globalCounter.innerHTML = `
                        <h6 class="text-primary mb-2">
                            <i class="fas fa-calculator me-2"></i>Total Geral de Arquivos
                        </h6>
                        <div class="text-muted">
                            <div><i class="fas fa-file me-2"></i>Quantidade total: ${totalFiles} arquivo(s)</div>
                            <div><i class="fas fa-hdd me-2"></i>Tamanho total: ${formatFileSize(totalSize)}</div>
                        </div>
                        `;
                    globalCounter.style.display = 'block';
                } else {
                    globalCounter.style.display = 'none';
                }
            }
        }

        function setupFormValidation() {
            document.querySelector('form').addEventListener('submit', function(event) {
                let isValid = true;

                this.querySelectorAll('input[required], select[required]').forEach(function(element) {
                    if (!element.value) {
                        isValid = false;
                        element.classList.add('is-invalid');
                    } else {
                        element.classList.remove('is-invalid');
                    }
                });

                this.querySelectorAll('.contrato-card').forEach(function(card) {
                    const dataInicio = card.querySelector('input[name="data_inicio[]"]');
                    const dataFim = card.querySelector('input[name="data_fim[]"]');

                    if (dataInicio && dataFim && dataInicio.value && dataFim.value) {
                        const inicio = new Date(dataInicio.value);
                        const fim = new Date(dataFim.value);

                        if (inicio > fim) {
                            isValid = false;
                            Swal.fire({
                                title: 'Erro de Validação',
                                text: 'Verifique as datas de início e fim dos contratos',
                                icon: 'error'
                            });
                        }
                    }
                });

                if (!isValid) {
                    event.preventDefault();
                    Swal.fire({
                        title: 'Atenção!',
                        text: 'Por favor, preencha todos os campos obrigatórios corretamente',
                        icon: 'warning',
                        confirmButtonText: 'Ok'
                    });
                }
            });
        }

        function atualizarNumeracaoContratos() {
            const cards = document.querySelectorAll('.contrato-card');
            cards.forEach((card, index) => {
                const displayElement = card.querySelector('.numero-contrato-display');
                if (displayElement) {
                    displayElement.textContent = `Contrato ${index + 1}`;
                }

                const removeButton = card.querySelector('.btn-remove-contrato');
                if (removeButton) {
                    removeButton.style.display = index === 0 ? 'none' : 'flex';
                }
            });
        }

        function limparFormulario() {
            Swal.fire({
                title: 'Tem certeza?',
                text: "Todos os dados não salvos serão perdidos!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Sim, limpar',
                cancelButtonText: 'Cancelar'
            }).then((result) => {
                if (result.isConfirmed) {
                    document.querySelector('form').reset();
                    document.querySelectorAll('.is-invalid').forEach(el => el.classList.remove('is-invalid'));
                    document.querySelectorAll('.new-files').forEach(el => {
                        el.innerHTML = '';
                        el.style.display = 'none';
                    });

                    const container = document.getElementById('contratos-container');
                    const cards = container.querySelectorAll('.contrato-card');
                    cards.forEach((card, index) => {
                        if (index > 0) card.remove();
                    });

                    updateGlobalCounter();

                    Swal.fire(
                        'Limpo!',
                        'O formulário foi limpo com sucesso.',
                        'success'
                    );
                }
            });
        }

        function setupCategoriaSubcategoria() {
            const categoriaSelect = document.getElementById('categoria');
            const subcategoriaSelect = document.getElementById('subcategoria');

            if (categoriaSelect) {
                categoriaSelect.addEventListener('change', function() {
                    const categoria = this.options[this.selectedIndex].text;

                    if (subcategoriaSelect) {
                        subcategoriaSelect.innerHTML = '<option value="" disabled selected>Carregando...</option>';
                        subcategoriaSelect.disabled = true;
                    }

                    if (categoria && categoria !== 'Selecione a categoria') {
                        const token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
                        const url = "{{ route('publicador.processos.da.subcategorias') }}?categoria=" +
                            encodeURIComponent(categoria);

                        fetch(url, {
                                method: 'GET',
                                headers: {
                                    'X-CSRF-TOKEN': token,
                                    'Accept': 'application/json'
                                }
                            })
                            .then(response => {
                                if (!response.ok) {
                                    throw new Error('Erro na requisição: ' + response.status);
                                }
                                return response.json();
                            })
                            .then(data => {
                                subcategoriaSelect.innerHTML =
                                    '<option value="" disabled selected>Selecione a subcategoria</option>';

                                if (Array.isArray(data)) {
                                    data.forEach(item => {
                                        const option = document.createElement('option');
                                        option.value = item.id;
                                        option.textContent = item.subcategoria;
                                        subcategoriaSelect.appendChild(option);
                                    });
                                } else {
                                    console.error('Dados recebidos não são um array:', data);
                                }

                                subcategoriaSelect.disabled = false;
                            })
                            .catch(error => {
                                console.error('Erro completo:', error);
                                Swal.fire({
                                    title: 'Erro!',
                                    text: 'Não foi possível carregar as subcategorias',
                                    icon: 'error',
                                    confirmButtonText: 'Ok'
                                });
                                subcategoriaSelect.innerHTML =
                                    '<option value="" disabled selected>Erro ao carregar subcategorias</option>';
                                subcategoriaSelect.disabled = true;
                            });
                    } else {
                        subcategoriaSelect.innerHTML =
                            '<option value="" disabled selected>Selecione a subcategoria</option>';
                        subcategoriaSelect.disabled = true;
                    }
                });
            }

            if (subcategoriaSelect) {
                subcategoriaSelect.disabled = !categoriaSelect || !categoriaSelect.value;
            }
        }

        function initializeTooltips() {
            var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
            var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
                return new bootstrap.Tooltip(tooltipTriggerEl);
            });
        }
    </script>
@endsection