@extends('layouts.publicador.layout_novo')

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

    <div class="container my-4">
        @if ($errors->any())
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <div class="d-flex align-items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        class="me-2">
                        <circle cx="12" cy="12" r="10" />
                        <line x1="12" y1="8" x2="12" y2="12" />
                        <line x1="12" y1="16" x2="12.01" y2="16" />
                    </svg>
                    <ul class="mb-0">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Fechar"></button>
            </div>
        @endif

        @if (session('status-success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <div class="d-flex align-items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        class="me-2">
                        <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
                        <polyline points="22 4 12 14.01 9 11.01" />
                    </svg>
                    <span>{{ session('status-success') }}</span>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Fechar"></button>
            </div>
        @endif

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

                <form method="POST" action="{{ route('publicador.processos.da.form_geren_save') }}"
                    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="section mb-4">
                        <div class="card-header bg-light border-bottom p-4">
                            <h5 class="mb-0 d-flex align-items-center text-primary">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                    stroke-linejoin="round" class="me-2">
                                    <path d="M13 2H6a2 2 0 0 0-2 2v16c0 1.1.9 2 2 2h12a2 2 0 0 0 2-2V9l-7-7z" />
                                    <path d="M13 3v6h6" />
                                </svg>
                                Informações do Processo
                            </h5>
                        </div>
                        <div class="card-body p-4">
                            <div class="row g-4">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label class="form-label d-flex align-items-center">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                                stroke-linecap="round" stroke-linejoin="round" class="me-2">
                                                <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
                                                <circle cx="9" cy="7" r="4" />
                                                <path d="M22 21v-2a4 4 0 0 0-3-3.87" />
                                                <path d="M16 3.13a4 4 0 0 1 0 7.75" />
                                            </svg>
                                            Responsável
                                        </label>
                                        <select class="form-select" name="responsavel">
                                            <option value="" 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 class="invalid-feedback">Por favor, selecione um responsável.</div>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-label d-flex align-items-center">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                                stroke-linecap="round" stroke-linejoin="round" class="me-2">
                                                <circle cx="12" cy="12" r="10" />
                                                <line x1="12" y1="16" x2="12" y2="12" />
                                                <line x1="12" y1="8" x2="12.01" y2="8" />
                                            </svg>
                                            Situação
                                        </label>
                                        <input type="text" class="form-control" name="situacao"
                                            value="{{ isset($processo->situacao) ? $processo->situacao : null }}">
                                        <div class="invalid-feedback">Por favor, informe a situação.</div>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-label d-flex align-items-center">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                                stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                                class="me-2">
                                                <rect x="3" y="4" width="18" height="18" rx="2"
                                                    ry="2" />
                                                <line x1="16" y1="2" x2="16" y2="6" />
                                                <line x1="8" y1="2" x2="8" y2="6" />
                                                <line x1="3" y1="10" x2="21" y2="10" />
                                            </svg>
                                            Data Situação
                                        </label>
                                        <input type="date" class="form-control" name="data_situacao"
                                            value="{{ isset($processo->data_situacao) ? $processo->data_situacao : null }}">
                                        <div class="invalid-feedback">Por favor, selecione uma data.</div>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-label d-flex align-items-center">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                                stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                                class="me-2">
                                                <path
                                                    d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z" />
                                                <line x1="7" y1="7" x2="7.01" y2="7" />
                                            </svg>
                                            Categoria
                                        </label>
                                        <select class="form-select" name="categoria" id="categoria">
                                            <option value="" disabled selected>Selecione a categoria</option>
                                            @foreach ($categorias as $categoria)
                                                <option value="{{ $categoria->id }}"
                                                    {{ isset($processo->categoria_nome) && $processo->categoria_nome == $categoria->categoria ? '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 class="form-label d-flex align-items-center">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                                stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                                class="me-2">
                                                <path
                                                    d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z" />
                                                <line x1="7" y1="7" x2="7.01" y2="7" />
                                            </svg>
                                            Subcategoria
                                        </label>
                                        <select class="form-select" name="subcategoria" id="subcategoria"
                                            data-initial-id="{{ $processo->id_categoria ?? '' }}">
                                            <option value="" disabled selected>Selecione a subcategoria</option>
                                        </select>
                                        <div class="invalid-feedback">Por favor, selecione uma subcategoria.</div>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-label d-flex align-items-center required">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                                stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                                class="me-2">
                                                <path
                                                    d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" />
                                            </svg>
                                            Assunto
                                        </label>
                                        <input type="text" class="form-control" name="assunto"
                                            value="{{ isset($processo->assunto) ? $processo->assunto : null }}" required>
                                        <div class="invalid-feedback">Por favor, informe o assunto.</div>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-label d-flex align-items-center required">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                                stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                                <path
                                                    d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4" />
                                            </svg>
                                            Palavras-chave
                                        </label>
                                        <input type="text" class="form-control" name="palavras_chave"
                                            value="{{ isset($processo->palavra_chave) ? $processo->palavra_chave : null }}"
                                            placeholder="Separe as palavras-chave por vírgula" required>
                                        <small class="form-text text-muted">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"
                                                viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                                stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                                class="me-1">
                                                <circle cx="12" cy="12" r="10" />
                                                <line x1="12" y1="16" x2="12" y2="12" />
                                                <line x1="12" y1="8" x2="12.01" y2="8" />
                                            </svg>
                                            Digite as palavras-chave separadas por vírgula
                                        </small>
                                    </div>
                                </div>

                                <div class="col-12">
                                    <div class="form-group">
                                        <label class="form-label d-flex align-items-center">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                                stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                                class="me-2">
                                                <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
                                            </svg>
                                            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>
                    </div>

                    <div class="section mb-4">
                        <div
                            class="section-header d-flex justify-content-between align-items-center bg-light border-bottom p-4">
                            <h5 class="mb-0 d-flex align-items-center text-primary">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                    stroke-linecap="round" stroke-linejoin="round" class="me-2">
                                    <path d="M14 2H6a2 2 0 0 0-2 2v16c0 1.1.9 2 2 2h12a2 2 0 0 0 2-2V8l-6-6z" />
                                    <polyline points="14 2 14 8 20 8" />
                                    <path d="M16 13H8" />
                                    <path d="M16 17H8" />
                                </svg>
                                Contratos Vinculados
                            </h5>
                        </div>

                        <div id="contratos-container">
                            @if (isset($contratos) && $contratos->count() > 0)
                                @foreach ($contratos as $index => $contrato)
                                    <div class="contrato-item mb-4" data-contrato-index="{{ $index }}">
                                        <div
                                            class="contrato-header d-flex justify-content-between align-items-center mb-4">
                                            <div class="d-flex align-items-center">
                                                <div class="contrato-number me-3">
                                                    <span class="badge bg-primary">Contrato {{ $index + 1 }}</span>
                                                </div>
                                                <h6 class="mb-0 text-primary">Informações do Contrato</h6>
                                            </div>
                                            <button type="button"
                                                class="btn btn-outline-danger btn-sm btn-remove-contrato"
                                                title="Remover Contrato"
                                                data-numero-contrato="{{ $contrato->numero_contrato }}"
                                                data-numero-sei="{{ $contrato->numero_sei }}">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                    viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                                    <path d="M3 6h18" />
                                                    <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" />
                                                    <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
                                                </svg>
                                            </button>
                                        </div>

                                        <div class="contrato-body">
                                            <div class="row g-3">
                                                <div class="col-md-3">
                                                    <div class="form-group">
                                                        <label class="form-label">
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="14"
                                                                height="14" viewBox="0 0 24 24" fill="none"
                                                                stroke="currentColor" stroke-width="2"
                                                                stroke-linecap="round" stroke-linejoin="round"
                                                                class="me-2">
                                                                <path
                                                                    d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
                                                                <polyline points="14 2 14 8 20 8" />
                                                            </svg>
                                                            Número do Contrato - ALEP
                                                        </label>
                                                        <input type="hidden" name="contratos[{{ $index }}][id]"
                                                            value="{{ $contrato->id }}">
                                                        <input type="text" class="form-control"
                                                            name="contratos[{{ $index }}][numero_contrato]"
                                                            value="{{ $contrato->numero_contrato }}" maxlength="15">
                                                        <div class="invalid-feedback">Número do contrato é obrigatório
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-3">
                                                    <div class="form-group">
                                                        <label class="form-label">
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="14"
                                                                height="14" viewBox="0 0 24 24" fill="none"
                                                                stroke="currentColor" stroke-width="2"
                                                                stroke-linecap="round" stroke-linejoin="round"
                                                                class="me-2">
                                                                <path
                                                                    d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z">
                                                                </path>
                                                                <polyline points="3.27 6.96 12 12.01 20.73 6.96">
                                                                </polyline>
                                                                <line x1="12" y1="22.08" x2="12"
                                                                    y2="12"></line>
                                                            </svg>
                                                            Protocolo SEI
                                                        </label>
                                                        <input type="text" class="form-control"
                                                            name="contratos[{{ $index }}][protocolo_sei_contratos]"
                                                            value="{{ isset($contrato->protocolo_sei_contratos) ? $contrato->protocolo_sei_contratos : null }}"
                                                            maxlength="15">
                                                        <div class="invalid-feedback">protocolo é obrigatório
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-3">
                                                    <div class="form-group">
                                                        <label class="form-label ">
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="14"
                                                                height="14" viewBox="0 0 24 24" fill="none"
                                                                stroke="currentColor" stroke-width="2"
                                                                stroke-linecap="round" stroke-linejoin="round"
                                                                class="me-2">
                                                                <path
                                                                    d="M20 3H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2z" />
                                                                <line x1="8" y1="8" x2="16"
                                                                    y2="8" />
                                                                <line x1="8" y1="12" x2="16"
                                                                    y2="12" />
                                                                <line x1="8" y1="16" x2="12"
                                                                    y2="16" />
                                                            </svg>
                                                            Número do Contrato - GMS
                                                        </label>
                                                        <input type="text" class="form-control"
                                                            name="contratos[{{ $index }}][contrato_gms]"
                                                            value="{{ isset($contrato->contrato_gms) ? $contrato->contrato_gms : null }}"
                                                            maxlength="15">
                                                        <div class="invalid-feedback">Número do contrato é obrigatório
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-md-3">
                                                    <div class="form-group">
                                                        <label class="form-label">
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="14"
                                                                height="14" viewBox="0 0 24 24" fill="none"
                                                                stroke="currentColor" stroke-width="2"
                                                                stroke-linecap="round" stroke-linejoin="round"
                                                                class="me-2">
                                                                <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
                                                                <circle cx="9" cy="7" r="4" />
                                                            </svg>
                                                            Empresa
                                                        </label>
                                                        <input type="text" class="form-control"
                                                            name="contratos[{{ $index }}][empresa]"
                                                            value="{{ isset($contrato->empresa) ? $contrato->empresa : null }}"
                                                            maxlength="255">
                                                    </div>
                                                </div>

                                                <div class="col-md-4">
                                                    <div class="form-group">
                                                        <label class="form-label ">
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="14"
                                                                height="14" viewBox="0 0 24 24" fill="none"
                                                                stroke="currentColor" stroke-width="2"
                                                                stroke-linecap="round" stroke-linejoin="round"
                                                                class="me-2">
                                                                <rect x="3" y="4" width="18" height="18"
                                                                    rx="2" ry="2" />
                                                                <line x1="16" y1="2" x2="16"
                                                                    y2="6" />
                                                                <line x1="8" y1="2" x2="8"
                                                                    y2="6" />
                                                                <line x1="3" y1="10" x2="21"
                                                                    y2="10" />
                                                            </svg>
                                                            Data Início
                                                        </label>
                                                        <input type="date" class="form-control"
                                                            name="contratos[{{ $index }}][data_inicio]"
                                                            value="{{ isset($contrato->data_inicio) ? $contrato->data_inicio : null }}">
                                                        <div class="invalid-feedback">Data de início é obrigatória</div>
                                                    </div>
                                                </div>

                                                <div class="col-md-4">
                                                    <div class="form-group">
                                                        <label class="form-label ">
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="14"
                                                                height="14" viewBox="0 0 24 24" fill="none"
                                                                stroke="currentColor" stroke-width="2"
                                                                stroke-linecap="round" stroke-linejoin="round"
                                                                class="me-2">
                                                                <rect x="3" y="4" width="18" height="18"
                                                                    rx="2" ry="2" />
                                                                <line x1="16" y1="2" x2="16"
                                                                    y2="6" />
                                                                <line x1="8" y1="2" x2="8"
                                                                    y2="6" />
                                                                <line x1="3" y1="10" x2="21"
                                                                    y2="10" />
                                                            </svg>
                                                            Data Fim
                                                        </label>
                                                        <input type="date" class="form-control"
                                                            name="contratos[{{ $index }}][data_fim]"
                                                            value="{{ isset($contrato->data_fim) ? $contrato->data_fim : null }}">
                                                        <div class="invalid-feedback">Data de fim é obrigatória</div>
                                                    </div>
                                                </div>

                                                <div class="col-md-4">
                                                    <div class="form-group">
                                                        <label class="form-label">
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="14"
                                                                height="14" viewBox="0 0 24 24" fill="none"
                                                                stroke="currentColor" stroke-width="2"
                                                                stroke-linecap="round" stroke-linejoin="round"
                                                                class="me-2">
                                                                <circle cx="12" cy="12" r="10" />
                                                                <polyline points="12 6 12 12 16 14" />
                                                            </svg>
                                                            Vigência
                                                        </label>
                                                        <input type="text" class="form-control"
                                                            name="contratos[{{ $index }}][vigencia]"
                                                            value="{{ isset($contrato->vigencia) ? $contrato->vigencia : null }}"
                                                            readonly>
                                                    </div>
                                                </div>

                                                <div class="col-12">
                                                    <div class="aditivos-section mt-4">
                                                        <div
                                                            class="section-header d-flex justify-content-between align-items-center bg-light p-3 rounded">
                                                            <h6 class="mb-0 text-primary d-flex align-items-center">
                                                                <svg xmlns="http://www.w3.org/2000/svg" width="16"
                                                                    height="16" viewBox="0 0 24 24" fill="none"
                                                                    stroke="currentColor" stroke-width="2"
                                                                    stroke-linecap="round" stroke-linejoin="round"
                                                                    class="me-2">
                                                                    <path d="M22 12h-4l-3 9L9 3l-3 9H2" />
                                                                </svg>
                                                                Aditivos
                                                            </h6>
                                                            <button type="button"
                                                                class="btn btn-primary btn-sm adicionar-aditivo"
                                                                onclick="adicionarAditivo(this)">
                                                                <svg xmlns="http://www.w3.org/2000/svg" width="16"
                                                                    height="16" viewBox="0 0 24 24" fill="none"
                                                                    stroke="currentColor" stroke-width="2"
                                                                    stroke-linecap="round" stroke-linejoin="round"
                                                                    class="me-2">
                                                                    <line x1="12" y1="5" x2="12"
                                                                        y2="19" />
                                                                    <line x1="5" y1="12" x2="19"
                                                                        y2="12" />
                                                                </svg>
                                                                Adicionar Aditivo
                                                            </button>
                                                        </div>

                                                        <div class="aditivos-container">
                                                            @if ($contrato->aditivos && $contrato->aditivos->count() > 0)
                                                                @foreach ($contrato->aditivos as $indexAditivo => $aditivo)
                                                                    <div class="aditivo-item card mt-3">
                                                                        <div class="card-body">
                                                                            <div
                                                                                class="d-flex justify-content-between align-items-center mb-3">
                                                                                <h6
                                                                                    class="card-title mb-0 text-primary numero-aditivo">
                                                                                    Aditivo</h6>
                                                                                <button type="button"
                                                                                    class="btn btn-outline-danger btn-sm"
                                                                                    onclick="removerAditivo(this)">
                                                                                    <svg xmlns="http://www.w3.org/2000/svg"
                                                                                        width="16" height="16"
                                                                                        viewBox="0 0 24 24" fill="none"
                                                                                        stroke="currentColor"
                                                                                        stroke-width="2"
                                                                                        stroke-linecap="round"
                                                                                        stroke-linejoin="round">
                                                                                        <path d="M3 6h18" />
                                                                                        <path
                                                                                            d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" />
                                                                                        <path
                                                                                            d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
                                                                                    </svg>
                                                                                </button>
                                                                            </div>

                                                                            <div class="row g-3">
                                                                                <div class="col-md-6">
                                                                                    <div class="form-group">
                                                                                        <label class="form-label required">
                                                                                            <svg xmlns="http://www.w3.org/2000/svg"
                                                                                                width="14"
                                                                                                height="14"
                                                                                                viewBox="0 0 24 24"
                                                                                                fill="none"
                                                                                                stroke="currentColor"
                                                                                                stroke-width="2"
                                                                                                stroke-linecap="round"
                                                                                                stroke-linejoin="round"
                                                                                                class="me-2">
                                                                                                <path
                                                                                                    d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" />
                                                                                                <polyline
                                                                                                    points="13 2 13 9 20 9" />
                                                                                            </svg>
                                                                                            Número do Aditivo
                                                                                        </label>
                                                                                        <input type="hidden"
                                                                                            name="contratos[{{ $index }}][aditivos][{{ $indexAditivo }}][id]"
                                                                                            value="{{ $aditivo->id }}">
                                                                                        <input type="text"
                                                                                            class="form-control"
                                                                                            name="contratos[{{ $index }}][aditivos][{{ $indexAditivo }}][numero]"
                                                                                            required
                                                                                            value="{{ $aditivo->numero }}"
                                                                                            readonly>
                                                                                        <div class="invalid-feedback">
                                                                                            Número do aditivo é obrigatório
                                                                                        </div>
                                                                                    </div>
                                                                                </div>

                                                                                <div class="col-md-6">
                                                                                    <div class="form-group">
                                                                                        <label class="form-label ">
                                                                                            <svg xmlns="http://www.w3.org/2000/svg"
                                                                                                width="14"
                                                                                                height="14"
                                                                                                viewBox="0 0 24 24"
                                                                                                fill="none"
                                                                                                stroke="currentColor"
                                                                                                stroke-width="2"
                                                                                                stroke-linecap="round"
                                                                                                stroke-linejoin="round"
                                                                                                class="me-2">
                                                                                                <path
                                                                                                    d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
                                                                                                <polyline
                                                                                                    points="14 2 14 8 20 8" />
                                                                                                <line x1="16"
                                                                                                    y1="13"
                                                                                                    x2="8"
                                                                                                    y2="13" />
                                                                                                <line x1="16"
                                                                                                    y1="17"
                                                                                                    x2="8"
                                                                                                    y2="17" />
                                                                                            </svg>
                                                                                            Número do Protocolo SEI
                                                                                        </label>
                                                                                        <input type="text"
                                                                                            class="form-control"
                                                                                            name="contratos[{{ $index }}][aditivos][{{ $indexAditivo }}][protocolo_sei]"
                                                                                            placeholder="00000-00.0000"
                                                                                            value="{{ $aditivo->protocolo_sei }}">
                                                                                        <div class="invalid-feedback">
                                                                                            Número do protocolo SEI é
                                                                                            obrigatório</div>
                                                                                    </div>
                                                                                </div>

                                                                                <div class="col-md-6">
                                                                                    <div class="form-group">
                                                                                        <label class="form-label required">
                                                                                            <svg xmlns="http://www.w3.org/2000/svg"
                                                                                                width="14"
                                                                                                height="14"
                                                                                                viewBox="0 0 24 24"
                                                                                                fill="none"
                                                                                                stroke="currentColor"
                                                                                                stroke-width="2"
                                                                                                stroke-linecap="round"
                                                                                                stroke-linejoin="round"
                                                                                                class="me-2">
                                                                                                <polygon
                                                                                                    points="12 2 2 7 12 12 22 7 12 2" />
                                                                                                <polyline
                                                                                                    points="2 17 12 22 22 17" />
                                                                                                <polyline
                                                                                                    points="2 12 12 17 22 12" />
                                                                                            </svg>
                                                                                            Tipo
                                                                                        </label>

                                                                                        <select class="form-select"
                                                                                            name="contratos[{{ $index }}][aditivos][{{ $indexAditivo }}][tipo]"
                                                                                            required>
                                                                                            <option value="" disabled
                                                                                                selected>Selecione o tipo
                                                                                            </option>
                                                                                        </select>

                                                                                        <div class="invalid-feedback">Tipo
                                                                                            é obrigatório</div>
                                                                                    </div>
                                                                                </div>

                                                                                <div class="col-md-6">
                                                                                    <div class="form-group">
                                                                                        <label class="form-label required">
                                                                                            <svg xmlns="http://www.w3.org/2000/svg"
                                                                                                width="14"
                                                                                                height="14"
                                                                                                viewBox="0 0 24 24"
                                                                                                fill="none"
                                                                                                stroke="currentColor"
                                                                                                stroke-width="2"
                                                                                                stroke-linecap="round"
                                                                                                stroke-linejoin="round"
                                                                                                class="me-2">
                                                                                                <circle cx="12"
                                                                                                    cy="12"
                                                                                                    r="10" />
                                                                                                <line x1="12"
                                                                                                    y1="16"
                                                                                                    x2="12"
                                                                                                    y2="12" />
                                                                                                <line x1="12"
                                                                                                    y1="8"
                                                                                                    x2="12.01"
                                                                                                    y2="8" />
                                                                                            </svg>
                                                                                            Motivo
                                                                                        </label>
                                                                                        <select
                                                                                            class="form-select motivo-select"
                                                                                            name="contratos[{{ $index }}][aditivos][{{ $indexAditivo }}][motivo]"
                                                                                            onchange="handleMotivoChange(this)"
                                                                                            data-motivo-id="{{ $aditivo->motivo }}"
                                                                                            value="{{ $aditivo->motivo }}"
                                                                                            required>
                                                                                            <option value="" disabled
                                                                                                selected>Selecione o motivo
                                                                                            </option>
                                                                                        </select>
                                                                                        <div class="invalid-feedback">
                                                                                            Motivo é obrigatório</div>
                                                                                    </div>
                                                                                </div>

                                                                                <div class="col-md-6">
                                                                                    <div class="form-group">
                                                                                        <label class="form-label required">
                                                                                            <svg xmlns="http://www.w3.org/2000/svg"
                                                                                                width="14"
                                                                                                height="14"
                                                                                                viewBox="0 0 24 24"
                                                                                                fill="none"
                                                                                                stroke="currentColor"
                                                                                                stroke-width="2"
                                                                                                stroke-linecap="round"
                                                                                                stroke-linejoin="round"
                                                                                                class="me-2">
                                                                                                <rect x="3" y="4"
                                                                                                    width="18"
                                                                                                    height="18"
                                                                                                    rx="2"
                                                                                                    ry="2" />
                                                                                                <line x1="16"
                                                                                                    y1="2"
                                                                                                    x2="16"
                                                                                                    y2="6" />
                                                                                                <line x1="8"
                                                                                                    y1="2"
                                                                                                    x2="8"
                                                                                                    y2="6" />
                                                                                                <line x1="3"
                                                                                                    y1="10"
                                                                                                    x2="21"
                                                                                                    y2="10" />
                                                                                            </svg>
                                                                                            Data Assinatura
                                                                                        </label>
                                                                                        <input type="date"
                                                                                            class="form-control"
                                                                                            name="contratos[{{ $index }}][aditivos][{{ $indexAditivo }}][data_inicio]"
                                                                                            required
                                                                                            value="{{ $aditivo->data_inicio }}">
                                                                                        <div class="invalid-feedback">Data
                                                                                            de Assinatura é obrigatória
                                                                                        </div>
                                                                                    </div>
                                                                                </div>

                                                                                <div class="col-md-6 data-fim-container"
                                                                                    style="display: none;">
                                                                                    <div class="form-group">
                                                                                        <label class="form-label required">
                                                                                            <svg xmlns="http://www.w3.org/2000/svg"
                                                                                                width="14"
                                                                                                height="14"
                                                                                                viewBox="0 0 24 24"
                                                                                                fill="none"
                                                                                                stroke="currentColor"
                                                                                                stroke-width="2"
                                                                                                stroke-linecap="round"
                                                                                                stroke-linejoin="round"
                                                                                                class="me-2">
                                                                                                <rect x="3" y="4"
                                                                                                    width="18"
                                                                                                    height="18"
                                                                                                    rx="2"
                                                                                                    ry="2" />
                                                                                                <line x1="16"
                                                                                                    y1="2"
                                                                                                    x2="16"
                                                                                                    y2="6" />
                                                                                                <line x1="8"
                                                                                                    y1="2"
                                                                                                    x2="8"
                                                                                                    y2="6" />
                                                                                                <line x1="3"
                                                                                                    y1="10"
                                                                                                    x2="21"
                                                                                                    y2="10" />
                                                                                            </svg>
                                                                                            Data Fim
                                                                                        </label>
                                                                                        <input type="date"
                                                                                            class="form-control data-fim-input"
                                                                                            name="contratos[{{ $index }}][aditivos][{{ $indexAditivo }}][data_fim]"
                                                                                            required
                                                                                            value="{{ $aditivo->data_fim }}">
                                                                                        <div class="invalid-feedback">Data
                                                                                            de fim é obrigatória</div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                @endforeach
                                                            @endif
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-12">
                                                    <div class="upload-section mt-3">
                                                        <label class="form-label mb-3">
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="14"
                                                                height="14" viewBox="0 0 24 24" fill="none"
                                                                stroke="currentColor" stroke-width="2"
                                                                stroke-linecap="round" stroke-linejoin="round"
                                                                class="me-2">
                                                                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
                                                                <polyline points="17 8 12 3 7 8" />
                                                                <line x1="12" y1="3" x2="12"
                                                                    y2="15" />
                                                            </svg>
                                                            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="btn btn-outline-primary file-select">
                                                                    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 mt-3">
                                                                        <h6 class="text-primary">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">
                                                                                    <svg xmlns="http://www.w3.org/2000/svg"
                                                                                        width="16" height="16"
                                                                                        viewBox="0 0 24 24" fill="none"
                                                                                        stroke="currentColor"
                                                                                        stroke-width="2"
                                                                                        stroke-linecap="round"
                                                                                        stroke-linejoin="round"
                                                                                        class="me-2">
                                                                                        <path
                                                                                            d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" />
                                                                                        <polyline
                                                                                            points="13 2 13 9 20 9" />
                                                                                    </svg>
                                                                                    <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">
                                                                                            <svg xmlns="http://www.w3.org/2000/svg"
                                                                                                width="16"
                                                                                                height="16"
                                                                                                viewBox="0 0 24 24"
                                                                                                fill="none"
                                                                                                stroke="currentColor"
                                                                                                stroke-width="2"
                                                                                                stroke-linecap="round"
                                                                                                stroke-linejoin="round">
                                                                                                <path
                                                                                                    d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7z" />
                                                                                                <circle cx="12"
                                                                                                    cy="12" r="3" />
                                                                                            </svg>
                                                                                        </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">
                                                                                            <svg xmlns="http://www.w3.org/2000/svg"
                                                                                                width="16"
                                                                                                height="16"
                                                                                                viewBox="0 0 24 24"
                                                                                                fill="none"
                                                                                                stroke="currentColor"
                                                                                                stroke-width="2"
                                                                                                stroke-linecap="round"
                                                                                                stroke-linejoin="round">
                                                                                                <path d="M3 6h18" />
                                                                                                <path
                                                                                                    d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" />
                                                                                                <path
                                                                                                    d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
                                                                                            </svg>
                                                                                        </button>
                                                                                    </div>
                                                                                </div>
                                                                            @endforeach
                                                                        </div>
                                                                    </div>
                                                                @endif
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            @endif
                        </div>

                        <div class="d-flex justify-content-end gap-3 mt-4">
                            <a href="{{ route('publicador.processos.da.index') }}" class="btn btn-light border">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                    stroke-linecap="round" stroke-linejoin="round" class="me-2">
                                    <path d="M19 12H5" />
                                    <path d="M12 19l-7-7 7-7" />
                                </svg>
                                Voltar
                            </a>
                            <button type="submit" class="btn btn-success">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                    stroke-linecap="round" stroke-linejoin="round" class="me-2">
                                    <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" />
                                    <polyline points="17 21 17 13 7 13 7 21" />
                                    <polyline points="7 3 7 8 15 8" />
                                </svg>
                                Salvar Alterações
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <template id="contrato-template">
        <div class="contrato-item mb-4" data-contrato-index="NOVO_INDICE">
            <div class="contrato-header d-flex justify-content-between align-items-center mb-4">
                <div class="d-flex align-items-center">
                    <div class="contrato-number me-3">
                        <span class="badge bg-primary">Contrato</span>
                    </div>
                    <h6 class="mb-0 text-primary">Informações do Contrato</h6>
                </div>
                <button type="button" class="btn btn-outline-danger btn-sm btn-remove-contrato" title="Remover Contrato"
                    onclick="removerContrato(this)">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                        stroke-linejoin="round">
                        <path d="M3 6h18" />
                        <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" />
                        <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
                    </svg>
                </button>
            </div>

            <div class="contrato-body">
                <div class="row g-3">
                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="form-label ">
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"
                                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                    stroke-linecap="round" stroke-linejoin="round" class="me-2">
                                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
                                    <polyline points="14 2 14 8 20 8" />
                                </svg>
                                Número do Contrato - ALEP
                            </label>
                            <input type="text" class="form-control" name="contratos[NOVO_INDICE][numero_contrato]"
                                maxlength="15">
                            <div class="invalid-feedback">Número do contrato é obrigatório</div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="form-label ">
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"
                                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                    stroke-linecap="round" stroke-linejoin="round" class="me-2">
                                    <path
                                        d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z">
                                    </path>
                                    <polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>
                                    <line x1="12" y1="22.08" x2="12" y2="12"></line>
                                </svg>
                                Protocolo SEI
                            </label>
                            <input type="text" class="form-control"
                                name="contratos[NOVO_INDICE][protocolo_sei_contratos]" maxlength="15">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="form-label ">
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"
                                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                    stroke-linecap="round" stroke-linejoin="round" class="me-2">
                                    <path d="M20 3H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2z" />
                                    <line x1="8" y1="8" x2="16" y2="8" />
                                    <line x1="8" y1="12" x2="16" y2="12" />
                                    <line x1="8" y1="16" x2="12" y2="16" />
                                </svg>
                                Número do Contrato - GMS
                            </label>
                            <input type="text" class="form-control" name="contratos[NOVO_INDICE][contrato_gms]"
                                maxlength="15">
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="form-label">
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"
                                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                    stroke-linecap="round" stroke-linejoin="round" class="me-2">
                                    <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
                                    <circle cx="9" cy="7" r="4" />
                                </svg>
                                Empresa
                            </label>
                            <input type="text" class="form-control" name="contratos[NOVO_INDICE][empresa]"
                                maxlength="255">
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="form-group">
                            <label class="form-label">
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"
                                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                    stroke-linecap="round" stroke-linejoin="round" class="me-2">
                                    <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
                                    <line x1="16" y1="2" x2="16" y2="6" />
                                    <line x1="8" y1="2" x2="8" y2="6" />
                                    <line x1="3" y1="10" x2="21" y2="10" />
                                </svg>
                                Data Início
                            </label>
                            <input type="date" class="form-control" name="contratos[NOVO_INDICE][data_inicio]">
                            <div class="invalid-feedback">Data de início é obrigatória</div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="form-group">
                            <label class="form-label">
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"
                                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                    stroke-linecap="round" stroke-linejoin="round" class="me-2">
                                    <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
                                    <line x1="16" y1="2" x2="16" y2="6" />
                                    <line x1="8" y1="2" x2="8" y2="6" />
                                    <line x1="3" y1="10" x2="21" y2="10" />
                                </svg>
                                Data Fim
                            </label>
                            <input type="date" class="form-control" name="contratos[NOVO_INDICE][data_fim]">
                            <div class="invalid-feedback">Data de fim é obrigatória</div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="form-group">
                            <label class="form-label">
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"
                                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                    stroke-linecap="round" stroke-linejoin="round" class="me-2">
                                    <circle cx="12" cy="12" r="10" />
                                    <polyline points="12 6 12 12 16 14" />
                                </svg>
                                Vigência
                            </label>
                            <input type="text" class="form-control" name="contratos[NOVO_INDICE][vigencia]"
                                readonly>
                        </div>
                    </div>

                    <div class="col-12">
                        <div class="aditivos-section mt-4">
                            <div
                                class="section-header d-flex justify-content-between align-items-center bg-light p-3 rounded">
                                <h6 class="mb-0 text-primary d-flex align-items-center">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                        stroke-linecap="round" stroke-linejoin="round" class="me-2">
                                        <path d="M22 12h-4l-3 9L9 3l-3 9H2" />
                                    </svg>
                                    Aditivos
                                </h6>
                                <button type="button" class="btn btn-primary btn-sm adicionar-aditivo"
                                    onclick="adicionarAditivo(this)">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                        stroke-linecap="round" stroke-linejoin="round" class="me-2">
                                        <line x1="12" y1="5" x2="12" y2="19" />
                                        <line x1="5" y1="12" x2="19" y2="12" />
                                    </svg>
                                    Adicionar Aditivo
                                </button>
                            </div>
                            <div class="aditivos-container">
                            </div>
                        </div>
                    </div>

                    <div class="col-12">
                        <div class="upload-section mt-3">
                            <label class="form-label mb-3">
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"
                                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                    stroke-linecap="round" stroke-linejoin="round" class="me-2">
                                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
                                    <polyline points="17 8 12 3 7 8" />
                                    <line x1="12" y1="3" x2="12" y2="15" />
                                </svg>
                                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="btn btn-outline-primary file-select">
                                        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>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </template>

    <template id="aditivo-template">
        <div class="aditivo-item card mt-3">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h6 class="card-title mb-0 text-primary numero-aditivo">Aditivo</h6>
                    <button type="button" class="btn btn-outline-danger btn-sm" onclick="removerAditivo(this)">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
                            fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round">
                            <path d="M3 6h18" />
                            <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" />
                            <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
                        </svg>
                    </button>
                </div>

                <div class="row g-3">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="form-label required">
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"
                                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                    stroke-linecap="round" stroke-linejoin="round" class="me-2">
                                    <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" />
                                    <polyline points="13 2 13 9 20 9" />
                                </svg>
                                Número do Aditivo
                            </label>
                            <input type="text" class="form-control"
                                name="contratos[INDICE_CONTRATO][aditivos][INDICE_ADITIVO][numero]" readonly required>
                            <div class="invalid-feedback">Número do aditivo é obrigatório</div>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="form-label">
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"
                                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                    stroke-linecap="round" stroke-linejoin="round" class="me-2">
                                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
                                    <polyline points="14 2 14 8 20 8" />
                                    <line x1="16" y1="13" x2="8" y2="13" />
                                    <line x1="16" y1="17" x2="8" y2="17" />
                                </svg>
                                Número do Protocolo SEI
                            </label>
                            <input type="text" class="form-control"
                                name="contratos[INDICE_CONTRATO][aditivos][INDICE_ADITIVO][protocolo_sei]"
                                placeholder="00000-00.0000">
                            <div class="invalid-feedback">Número do protocolo SEI é obrigatório</div>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="form-label required">
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"
                                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                    stroke-linecap="round" stroke-linejoin="round" class="me-2">
                                    <polygon points="12 2 2 7 12 12 22 7 12 2" />
                                    <polyline points="2 17 12 22 22 17" />
                                    <polyline points="2 12 12 17 22 12" />
                                </svg>
                                Tipo
                            </label>

                            <select class="form-select"
                                name="contratos[INDICE_CONTRATO][aditivos][INDICE_ADITIVO][tipo]" required>
                                <option value="" disabled selected>Selecione o tipo</option>
                            </select>

                            <div class="invalid-feedback">Tipo é obrigatório</div>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="form-label required">
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"
                                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                    stroke-linecap="round" stroke-linejoin="round" class="me-2">
                                    <circle cx="12" cy="12" r="10" />
                                    <line x1="12" y1="16" x2="12" y2="12" />
                                    <line x1="12" y1="8" x2="12.01" y2="8" />
                                </svg>
                                Motivo
                            </label>
                            <select class="form-select motivo-select"
                                name="contratos[INDICE_CONTRATO][aditivos][INDICE_ADITIVO][motivo]"
                                onchange="handleMotivoChange(this)" required>
                                <option value="" disabled selected>Selecione o motivo</option>
                            </select>
                            <div class="invalid-feedback">Motivo é obrigatório</div>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="form-label required">
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"
                                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                    stroke-linecap="round" stroke-linejoin="round" class="me-2">
                                    <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
                                    <line x1="16" y1="2" x2="16" y2="6" />
                                    <line x1="8" y1="2" x2="8" y2="6" />
                                    <line x1="3" y1="10" x2="21" y2="10" />
                                </svg>
                                Data Assinatura
                            </label>
                            <input type="date" class="form-control"
                                name="contratos[INDICE_CONTRATO][aditivos][INDICE_ADITIVO][data_inicio]" required>
                            <div class="invalid-feedback">Data de Assinatura é obrigatória</div>
                        </div>
                    </div>

                    <div class="col-md-6 data-fim-container" style="display: none;">
                        <div class="form-group">
                            <label class="form-label required">
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"
                                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                    stroke-linecap="round" stroke-linejoin="round" class="me-2">
                                    <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
                                    <line x1="16" y1="2" x2="16" y2="6" />
                                    <line x1="8" y1="2" x2="8" y2="6" />
                                    <line x1="3" y1="10" x2="21" y2="10" />
                                </svg>
                                Data Fim
                            </label>
                            <input type="date" class="form-control data-fim-input"
                                name="contratos[INDICE_CONTRATO][aditivos][INDICE_ADITIVO][data_fim]" required>
                            <div class="invalid-feedback">Data de fim é obrigatória</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </template>

    <div class="floating-action-button" id="mainFab">
        <button type="button" class="fab-main">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                stroke-linejoin="round">
                <line x1="12" y1="5" x2="12" y2="19"></line>
                <line x1="5" y1="12" x2="19" y2="12"></line>
            </svg>
        </button>
        <div class="fab-options">
            <button type="button" class="fab-option fab-add" onclick="adicionarContrato()"
                data-tooltip="Adicionar Contrato">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                    stroke-linejoin="round">
                    <path d="M14 2H6a2 2 0 0 0-2 2v16c0 1.1.9 2 2 2h12a2 2 0 0 0 2-2V8l-6-6z" />
                    <line x1="12" y1="18" x2="12" y2="12" />
                    <line x1="9" y1="15" x2="15" y2="15" />
                </svg>
            </button>
            @canany(['relatorio_ger_da_historico'])
                @if (isset($processo->id_processo_DA) && !empty($processo->id_processo_DA))
                    <a href="{{ route('publicador.processos.da.timeline', str_replace(['.', '-'], '', $processo->id_processo_DA)) }}"
                        class="fab-option fab-history" data-tooltip="Ver Histórico">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
                            fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round" class="ssvg">
                            <circle cx="12" cy="12" r="10" />
                            <path d="M12 6v6l4 2" />
                        </svg>
                    </a>
                @endif
            @endcanany
            <a href="{{ route('publicador.processos.da.index') }}" class="fab-option fab-cancel"
                data-tooltip="Voltar">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                    stroke-linejoin="round">
                    <path d="M19 12H5" />
                    <path d="M12 19l-7-7 7-7" />
                </svg>
            </a>
        </div>
    </div>


    <style>
        svg.ssvg {
            color: black;
        }

        .text-primary {
            --bs-text-opacity: 1;
            color: rgb(2 84 144) !important;
        }

        :root {
            --primary-color: #025490;
            --primary-hover: #004494;
            --secondary-color: #6c757d;
            --success-color: #28a745;
            --info-color: #17a2b8;
            --warning-color: #ffc107;
            --danger-color: #dc3545;
            --light-color: #f8f9fa;
            --dark-color: #343a40;
            --border-color: rgba(0, 0, 0, 0.1);
            --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
            --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
            --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15);
            --border-radius: 0.75rem;
            --transition-speed: 0.3s;
        }

        /* Reset e Estilos Base */
        body {
            background-color: var(--light-color);
            font-family: 'Roboto', sans-serif;
        }

        /* Container e Layout */
        .container-fluid {
            padding: 0 !important;
        }

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

        /* Cards */
        .card {
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-sm);
            transition: box-shadow var(--transition-speed);
            overflow: hidden;
            background: white;
        }

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

        .card-header {
            background-color: white;
            border-bottom: 1px solid var(--border-color);
            padding: 1.25rem;
        }

        .card-body {
            padding: 1.5rem;
        }

        /* Headings e Títulos */
        .section-title {
            color: var(--primary-color);
            font-size: 1.25rem;
            font-weight: 500;
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
        }

        .section-title svg {
            margin-right: 0.75rem;
            stroke: var(--primary-color);
        }

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

        .form-label {
            font-weight: 500;
            color: var(--dark-color);
            margin-bottom: 0.5rem;
            display: flex;
            align-items: center;
        }

        .form-label svg {
            margin-right: 0.5rem;
            stroke: var(--primary-color);
        }

        .form-control {
            border: 1px solid var(--border-color);
            border-radius: 0.5rem;
            padding: 0.75rem 1rem;
            font-size: 0.95rem;
            transition: all var(--transition-speed);
        }

        .form-control:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 0.2rem rgba(2, 84, 144, 0.15);
        }

        .form-select {
            border: 1px solid var(--border-color);
            border-radius: 0.5rem;
            padding: 0.75rem 2.25rem 0.75rem 1rem;
            background-position: right 1rem center;
        }

        .form-text {
            color: var(--secondary-color);
            font-size: 0.875rem;
            margin-top: 0.25rem;
        }

        /* Botões */
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0.5rem 1rem;
            font-weight: 500;
            border-radius: 0.5rem;
            transition: all var(--transition-speed);
            gap: 0.5rem;
        }

        .btn:hover {
            transform: translateY(-1px);
        }

        .btn svg {
            width: 1rem;
            height: 1rem;
        }

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

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

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

        .btn-success:hover {
            background-color: #218838;
            border-color: #1e7e34;
        }

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

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

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

        .btn-light:hover {
            background-color: var(--light-color);
            border-color: #9ca3af;
        }

        /* Alertas */
        .alert {
            border-radius: var(--border-radius);
            padding: 1rem;
            margin-bottom: 1rem;
            border: 1px solid transparent;
            display: flex;
            align-items: flex-start;
        }

        .alert svg {
            margin-right: 0.75rem;
            flex-shrink: 0;
        }

        .alert-danger {
            background-color: #fee2e2;
            border-color: #fecaca;
            color: #dc2626;
        }

        .alert-success {
            background-color: #dcfce7;
            border-color: #bbf7d0;
            color: #15803d;
        }

        /* Área de Upload */
        .dropzone-container {
            border: 2px dashed var(--border-color);
            border-radius: var(--border-radius);
            padding: 2rem;
            text-align: center;
            background-color: var(--light-color);
            transition: all var(--transition-speed);
        }

        .dropzone-container:hover {
            border-color: var(--primary-color);
            background-color: rgba(2, 84, 144, 0.05);
        }

        .drop-area {
            padding: 2rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1rem;
        }

        .file-preview {
            background-color: white;
            border: 1px solid var(--border-color);
            border-radius: 0.5rem;
            padding: 0.75rem;
            margin-bottom: 0.5rem;
            display: flex;
            align-items: center;
            transition: all var(--transition-speed);
        }

        .file-preview:hover {
            background-color: var(--light-color);
            transform: translateX(5px);
        }

        .file-preview .file-name {
            margin: 0 1rem;
            flex-grow: 1;
        }

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

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


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

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

            .dropzone-container {
                padding: 1rem;
            }

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

            .fab-option {
                padding: 0.5rem 1rem;
            }
        }

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

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

        .fade-in {
            animation: fadeIn 0.3s ease-in-out;
        }

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

        .gap-4 {
            gap: 1.5rem !important;
        }

        :root {
            --primary-color: #025490;
            --border-radius: 0.5rem;
        }

        .card {
            border-radius: var(--border-radius);
            border: 1px solid rgba(0, 0, 0, 0.1);
        }

        .section {
            background: #fff;
            border-radius: var(--border-radius);
            padding: 1.5rem;
        }

        .section-title {
            color: var(--primary-color);
            font-weight: 500;
            font-size: 1.1rem;
        }

        /* Remove boxshadow desnecessário */
        .shadow-sm {
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
        }

        /* Campos do formulário */
        .form-control,
        .form-select {
            border: 1px solid #dee2e6;
        }

        /* Contratos */
        .contrato-item {
            border-radius: var(--border-radius);
            padding: 1.5rem;
            margin-bottom: 1rem;
            background: #fff;
        }

        .contrato-item {
            border: 1px solid #e5e7eb;
            border-radius: 0.75rem;
            background: white;
            margin-bottom: 1.5rem;
            transition: all 0.3s ease;
            overflow: hidden;
        }

        .contrato-item:hover {
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            border-color: var(--primary-color);
        }

        .contrato-header {
            padding: 1rem 1.5rem;
            background-color: #f8f9fa;
            border-bottom: 1px solid #e5e7eb;
        }

        .contrato-body {
            padding: 1.5rem;
        }
    </style>
    <style>
        .floating-action-button {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            z-index: 1000;
        }

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

        .fab-main:hover {
            transform: scale(1.1);
            background: var(--primary-hover);
        }

        .fab-main.active {
            transform: scale(1.1);
            background: #dc3545;
        }

        .fab-options {
            position: absolute;
            bottom: 100%;
            right: 0;
            margin-bottom: 1rem;
            display: flex;
            flex-direction: column;
            gap: 1rem;
            visibility: hidden;
            opacity: 0;
            transform: scale(0.8);
            transform-origin: bottom right;
            transition: all 0.3s;
        }

        .fab-options.show {
            visibility: visible;
            opacity: 1;
            transform: scale(1);
        }

        .fab-option {
            width: 2.75rem;
            height: 2.75rem;
            border-radius: 50%;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            cursor: pointer;
            position: relative;
            transition: all 0.3s;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        }

        /* Tooltip estilizado */
        .fab-option::before {
            content: attr(data-tooltip);
            position: absolute;
            right: 100%;
            margin-right: 0.75rem;
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 0.5rem 0.75rem;
            border-radius: 4px;
            font-size: 0.875rem;
            white-space: nowrap;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s;
        }



        .fab-option:hover::before,
        .fab-option:hover::after {
            opacity: 1;
            visibility: visible;
        }

        /* Cores específicas para cada botão */
        .fab-add {
            background-color: var(--primary-color);
        }

        .fab-save {
            background-color: var(--success-color);
        }

        .fab-cancel {
            background-color: #f8f9fa;
            color: black;
        }

        /* Efeito hover nos botões */
        .fab-option:hover {
            transform: scale(1.15);
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
        }

        .fab-main svg {
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .fab-main.active svg {
            transform: rotate(270deg);
        }

        /* Opcional: para suavizar mais a animação */
        .fab-main {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        @media (max-width: 768px) {
            .floating-action-button {
                bottom: 1rem;
                right: 1rem;
            }

            .fab-option::before,
            .fab-option::after {
                display: none;
                /* Remove tooltips em mobile */
            }
        }
    </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://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>
        document.addEventListener('DOMContentLoaded', function() {
            function getUrlParam(param) {
                const urlParams = new URLSearchParams(window.location.search);
                return urlParams.get(param);
            }

            const contrato = getUrlParam('contrato');
            const id = window.location.pathname.split('/').filter(Boolean).pop();

            if (contrato) {
                Swal.fire({
                    title: 'Confirmação de Notificação',
                    text: 'Ao confirmar a visualização desta notificação, o sistema pausará os alertas deste contrato por 30 dias. Deseja prosseguir?',
                    icon: 'info',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: 'Confirmar visualização',
                    cancelButtonText: 'Manter notificação',
                    footer: 'Você poderá receber novas notificações após o período de pausa'
                }).then((result) => {
                    if (result.isConfirmed) {
                        const token = document.querySelector('meta[name="csrf-token"]')?.getAttribute(
                            'content');

                        const url = `${routes.mailed}?mailed=1&contrato=${contrato}`;

                        fetch(url, {
                                method: 'GET',
                                headers: {
                                    'Accept': 'application/json',
                                    'X-CSRF-TOKEN': token
                                }
                            })
                            .then(response => response.json())
                            .then(data => {
                                if (data.success) {
                                    Swal.fire(
                                        'Notificação Pausada',
                                        'As notificações para este contrato neste processo foram pausadas por 30 dias.',
                                        'success'
                                    ).then(() => {
                                        // Remove apenas o parâmetro contrato da URL
                                        const url = new URL(window.location.href);
                                        url.searchParams.delete('contrato');
                                        window.location.href = url.toString();
                                    });
                                } else {
                                    throw new Error('Falha ao atualizar status do e-mail');
                                }
                            })
                            .catch(error => {
                                console.error('Erro:', error);
                                Swal.fire(
                                    'Erro!',
                                    'Não foi possível atualizar o status do e-mail.',
                                    'error'
                                );
                            });
                    } else {
                        // Remove apenas o parâmetro contrato da URL
                        const url = new URL(window.location.href);
                        url.searchParams.delete('contrato');
                        window.location.href = url.toString();
                    }
                });
            }
        });

        function atualizarNumeracaoSequencialAditivos(aditivosContainer) {
            const aditivos = aditivosContainer.querySelectorAll('.aditivo-item');
            aditivos.forEach((aditivo, index) => {
                const numeroInput = aditivo.querySelector('input[name$="[numero]"]');
                if (numeroInput) {
                    numeroInput.value = `${index + 1}`;
                }
            });
        }

        function aplicarMascaraSEI(input) {
            let valor = input.value.replace(/\D/g, '');

            valor = valor.substring(0, 11);

            if (valor.length <= 5) {
                valor = valor.replace(/^(\d{1,5})/, '$1');
            } else if (valor.length <= 7) {
                valor = valor.replace(/^(\d{5})(\d{1,2})/, '$1-$2');
            } else {
                valor = valor.replace(/^(\d{5})(\d{2})(\d{1,4})/, '$1-$2.$3');
            }

            input.value = valor;
        }

        function initializeSEIMask(input) {
            input.addEventListener('input', () => aplicarMascaraSEI(input));

            input.addEventListener('blur', () => {
                const valor = input.value;
                if (valor && !valor.match(/^\d{5}-\d{2}\.\d{4}$/)) {
                    input.setCustomValidity('Formato inválido. Use: 00000-00.0000');
                } else {
                    input.setCustomValidity('');
                }
            });
        }

        function aplicarMascaraContratoGMS(input) {
            let valor = input.value.replace(/\D/g, '');

            valor = valor.substring(0, 8);

            if (valor.length <= 4) {
                valor = valor.replace(/^(\d{1,4})/, '$1');
            } else {
                valor = valor.replace(/^(\d{4})(\d{1,4})/, '$1/$2');
            }

            input.value = valor;
        }

        function aplicarMascaraContrato(input) {
            let valor = input.value.replace(/\D/g, '');

            valor = valor.substring(0, 7);

            if (valor.length <= 3) {
                valor = valor.replace(/^(\d{1,3})/, '$1');
            } else {
                valor = valor.replace(/^(\d{3})(\d{1,4})/, '$1/$2');
            }

            input.value = valor;
        }

        function initializeMascaraContrato(input) {
            input.addEventListener('input', () => aplicarMascaraContrato(input));

            input.addEventListener('blur', () => {
                const valor = input.value;
                if (valor && !valor.match(/^\d{4}\/\d{4}$/)) {
                    input.setCustomValidity('Formato inválido. Use: 000/0000');
                } else {
                    input.setCustomValidity('');
                }
            });
        }

        function initializeMascaraContratoGMS(input) {
            input.addEventListener('input', () => aplicarMascaraContratoGMS(input));

            input.addEventListener('blur', () => {
                const valor = input.value;
                if (valor && !valor.match(/^\d{3}\/\d{4}$/)) {
                    input.setCustomValidity('Formato inválido. Use: 0000/0000');
                } else {
                    input.setCustomValidity('');
                }
            });
        }


        function handleMotivoChange(selectElement) {
            const aditivoItem = selectElement.closest('.aditivo-item');
            const dataFimContainer = aditivoItem.querySelector('.data-fim-container');
            const dataFimInput = aditivoItem.querySelector('.data-fim-input');

            if (selectElement.value === '2') {
                dataFimContainer.style.display = 'block';
                dataFimInput.required = true;
                dataFimInput.setAttribute('required', 'required');
            } else {
                dataFimContainer.style.display = 'none';
                dataFimInput.required = false;
                dataFimInput.removeAttribute('required');
                dataFimInput.value = '';
            }
        }


        function initializeSEIMaskInAditivo(aditivoElement) {
            const protocoloInput = aditivoElement.querySelector('input[name$="[protocolo_sei]"]');
            if (protocoloInput) {
                initializeSEIMask(protocoloInput);
            }
        }
        async function carregarTiposMotivos() {
            try {
                const token = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') ||
                    document.querySelector('input[name="_token"]')?.value ||
                    document.querySelector('input[name="csrf-token"]')?.value;

                const headers = {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                };

                if (token) {
                    headers['X-CSRF-TOKEN'] = token;
                }

                const url = '{{ route('publicador.processos.da.tipos_motivos') }}';

                const response = await fetch(url, {
                    method: 'GET',
                    headers: headers
                });

                if (!response.ok) {
                    throw new Error(`Erro na requisição: ${response.status}`);
                }

                const tiposMotivos = await response.json();
                return tiposMotivos;

            } catch (error) {
                console.error('Erro ao carregar tipos e motivos:', error);
                Swal.fire({
                    title: 'Erro!',
                    text: 'Não foi possível carregar os tipos e motivos. Por favor, tente novamente.',
                    icon: 'error',
                    confirmButtonText: 'Ok'
                });
                return [];
            }
        }


        async function initializeTipoMotivo(aditivoElement) {
            if (aditivoElement.dataset.initialized === 'true') {
                return;
            }

            const tiposMotivos = await carregarTiposMotivos();
            if (tiposMotivos.length > 0) {
                const motivoSelect = aditivoElement.querySelector('select[name$="[motivo]"]');
                const motivoValue = motivoSelect?.getAttribute('value') ||
                    motivoSelect?.dataset.motivoId;

                if (motivoValue) {
                    const motivoId = parseInt(motivoValue);
                    popularSelects(aditivoElement, tiposMotivos, motivoId);
                } else {
                    popularSelects(aditivoElement, tiposMotivos);
                }
            }
        }

        async function initializeExistingAditivos() {
            const tiposMotivos = await carregarTiposMotivos();
            if (tiposMotivos.length > 0) {
                document.querySelectorAll('.aditivo-item').forEach(aditivoElement => {
                    const motivoSelect = aditivoElement.querySelector('select[name$="[motivo]"]');
                    const motivoValue = motivoSelect?.getAttribute('value') ||
                        motivoSelect?.dataset.motivoId;

                    if (motivoValue) {
                        const motivoId = parseInt(motivoValue);
                        popularSelects(aditivoElement, tiposMotivos, motivoId);
                    }
                });
            }
        }

        function popularSelects(aditivoElement, tiposMotivos, motivoId = null) {
            const tipoSelect = aditivoElement.querySelector('select[name$="[tipo]"]');
            const motivoSelect = aditivoElement.querySelector('select[name$="[motivo]"]');

            if (!tipoSelect || !motivoSelect) return;

            // Previne múltiplas inicializações
            if (aditivoElement.dataset.initialized === 'true') {
                return;
            }
            aditivoElement.dataset.initialized = 'true';

            // Encontra o motivo existente usando o ID
            const existingMotivo = motivoId ? tiposMotivos.find(item => item.id === parseInt(motivoId)) : null;
            const initialTipo = existingMotivo?.tipo;

            const tiposUnicos = [...new Set(tiposMotivos.map(item => item.tipo))];

            // Popula os tipos
            tipoSelect.innerHTML = '<option value="" disabled selected>Selecione o tipo</option>';
            tiposUnicos.forEach(tipo => {
                const option = document.createElement('option');
                option.value = tipo;
                option.textContent = tipo;
                if (initialTipo && tipo === initialTipo) {
                    option.selected = true;
                }
                tipoSelect.appendChild(option);
            });

            function atualizarMotivos(tipoSelecionado, selectedMotivoId = null) {
                motivoSelect.innerHTML = '<option value="" disabled selected>Selecione o motivo</option>';
                motivoSelect.disabled = !tipoSelecionado;

                if (!tipoSelecionado) return;

                const motivosDoTipo = tiposMotivos.filter(item => item.tipo === tipoSelecionado);

                motivosDoTipo.forEach(item => {
                    const option = document.createElement('option');
                    option.value = item.id;
                    option.textContent = item.motivo;
                    if (selectedMotivoId && item.id === parseInt(selectedMotivoId)) {
                        option.selected = true;
                    }
                    motivoSelect.appendChild(option);
                });

                // Se temos um motivo selecionado, dispara o evento de change
                if (selectedMotivoId) {
                    const event = new Event('change');
                    motivoSelect.dispatchEvent(event);
                }
            }

            // Se temos um motivo inicial, primeiro seleciona o tipo correspondente
            if (motivoId && existingMotivo) {
                // Seleciona o tipo correto
                const tipoOption = Array.from(tipoSelect.options).find(opt => opt.value === existingMotivo.tipo);
                if (tipoOption) {
                    tipoOption.selected = true;
                }
                // Atualiza os motivos com base no tipo selecionado
                atualizarMotivos(existingMotivo.tipo, motivoId);
            }

            tipoSelect.addEventListener('change', (e) => {
                const tipoSelecionado = e.target.value;
                atualizarMotivos(tipoSelecionado);
            });
        }

        document.addEventListener('DOMContentLoaded', () => {
            initializeExistingAditivos();
        });

        function adicionarAditivo(button) {
            const contratoItem = button.closest('.contrato-item');
            const aditivosContainer = contratoItem.querySelector('.aditivos-container');
            const indiceContrato = contratoItem.dataset.contratoIndex;
            const numAditivos = aditivosContainer.querySelectorAll('.aditivo-item').length;

            const template = document.querySelector('#aditivo-template');
            const novoAditivo = template.content.cloneNode(true);

            novoAditivo.querySelector('.numero-aditivo').textContent = `Aditivo ${numAditivos + 1}`;

            // Atualizar todos os campos com os índices corretos
            novoAditivo.querySelectorAll('[name*="INDICE_CONTRATO"]').forEach(element => {
                element.name = element.name.replace('INDICE_CONTRATO', indiceContrato);
            });

            novoAditivo.querySelectorAll('[name*="INDICE_ADITIVO"]').forEach(element => {
                element.name = element.name.replace('INDICE_ADITIVO', numAditivos);
            });

            aditivosContainer.appendChild(novoAditivo);

            const novoAditivoElement = aditivosContainer.lastElementChild;
            initializeTipoMotivo(novoAditivoElement);
            initializeSEIMaskInAditivo(novoAditivoElement);

            atualizarNumeracaoSequencialAditivos(aditivosContainer);
        }

        document.addEventListener('DOMContentLoaded', () => {
            document.querySelectorAll('.aditivo-item').forEach(aditivo => {
                initializeTipoMotivo(aditivo);
                initializeSEIMaskInAditivo(aditivo);
            });

            document.querySelectorAll('input[name$="[numero_contrato]"]').forEach(input => {
                initializeMascaraContrato(input);
            });

            document.querySelectorAll('input[name$="[contrato_gms]"]').forEach(input => {
                initializeMascaraContratoGMS(input);
            });

            document.querySelectorAll('input[name$="[protocolo_sei_contratos]"]').forEach(input => {
                initializeSEIMask(input);
            });
        });


        function removerAditivo(button) {
            const aditivoItem = button.closest('.aditivo-item');
            const numeroAditivo = aditivoItem.querySelector('[name$="[numero]"]').value || 'Novo Aditivo';

            // Pegando o ID do input hidden
            const idInput = aditivoItem.querySelector('input[name*="[aditivos]"][name$="[id]"]');
            const aditivoId = idInput ? idInput.value : null;

            console.log(aditivoId);

            Swal.fire({
                title: 'Remover Aditivo',
                text: `Tem certeza que deseja remover o aditivo ${numeroAditivo}?`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#dc3545',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'Sim, remover',
                cancelButtonText: 'Cancelar',
                customClass: {
                    confirmButton: 'btn btn-danger',
                    cancelButton: 'btn btn-secondary'
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    if (aditivoId) {
                        const token = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');

                        if (!token) {
                            Swal.fire('Erro!', 'Token CSRF não encontrado', 'error');
                            return;
                        }

                        const url = routes.deleteAditivo.replace(':id', aditivoId);

                        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) {
                                    removerAditivoDoDOM(aditivoItem);
                                    Swal.fire(
                                        'Removido!',
                                        'O aditivo foi removido com sucesso.',
                                        'success'
                                    );
                                } else {
                                    throw new Error(data.message || 'Erro ao remover aditivo');
                                }
                            })
                            .catch(error => {
                                console.error('Erro ao remover aditivo:', error);
                                Swal.fire(
                                    'Erro!',
                                    error.message || 'Ocorreu um erro ao remover o aditivo.',
                                    'error'
                                );
                            });
                    } else {
                        removerAditivoDoDOM(aditivoItem);
                        Swal.fire(
                            'Removido!',
                            'O aditivo foi removido com sucesso.',
                            'success'
                        );
                    }
                }
            });
        }

        function removerAditivoDoDOM(aditivoItem) {
            const aditivosContainer = aditivoItem.closest('.aditivos-container');
            const contratoItem = aditivosContainer.closest('.contrato-item');
            const indiceContrato = contratoItem.dataset.contratoIndex;

            aditivoItem.remove();

            const aditivos = aditivosContainer.querySelectorAll('.aditivo-item');
            aditivos.forEach((aditivo, index) => {
                aditivo.querySelector('.numero-aditivo').textContent = `Aditivo ${index + 1}`;

                aditivo.querySelectorAll('[name]').forEach(element => {
                    element.name = element.name
                        .replace(/contratos\[\d+\]/, `contratos[${indiceContrato}]`)
                        .replace(/aditivos\[\d+\]/, `aditivos[${index}]`);
                });
            });

            atualizarNumeracaoSequencialAditivos(aditivosContainer);
        }

        function initializeAditivoEvents(aditivoElement) {
            const dataInicio = aditivoElement.querySelector('[name$="[data_inicio]"]');
            const dataFim = aditivoElement.querySelector('[name$="[data_fim]"]');

            [dataInicio, dataFim].forEach(input => {
                input?.addEventListener('change', () => {
                    validarDatasAditivo(aditivoElement);
                });
            });
        }

        function validarDatasAditivo(aditivoElement) {
            const dataInicio = aditivoElement.querySelector('[name$="[data_inicio]"]');
            const dataFim = aditivoElement.querySelector('[name$="[data_fim]"]');

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

                if (fim < inicio) {
                    dataFim.setCustomValidity('A data de fim deve ser posterior à data de início');
                } else {
                    dataFim.setCustomValidity('');
                }

                dataFim.reportValidity();
            }
        }

        function carregarAditivosExistentes(contratoIndex, aditivos) {
            const contratoItem = document.querySelector(`[data-contrato-index="${contratoIndex}"]`);
            const aditivosContainer = contratoItem.querySelector('.aditivos-container');

            aditivos.forEach((aditivo, index) => {
                const template = document.querySelector('#aditivo-template');
                const novoAditivo = template.content.cloneNode(true);

                novoAditivo.querySelector('.numero-aditivo').textContent = `Aditivo ${index + 1}`;

                novoAditivo.querySelectorAll('[name]').forEach(element => {
                    const fieldName = element.name.split('].')[1].replace(']', '');
                    element.name = element.name
                        .replace('INDICE_CONTRATO', contratoIndex)
                        .replace('INDICE_ADITIVO', index);
                    element.value = aditivo[fieldName] || '';
                });

                aditivosContainer.appendChild(novoAditivo);
                initializeAditivoEvents(novoAditivo.querySelector('.aditivo-item'));
            });
        }

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

            // Verificar campos required
            form.querySelectorAll('[required]').forEach(function(element) {
                if (!element.value.trim()) {
                    isValid = false;
                    element.classList.add('is-invalid');
                    // Mostrar mensagem de erro
                    const feedback = element.nextElementSibling;
                    if (feedback && feedback.classList.contains('invalid-feedback')) {
                        feedback.style.display = 'block';
                    }
                } else {
                    element.classList.remove('is-invalid');
                }
            });

            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'
                });
            }
        }

        document.addEventListener('DOMContentLoaded', function() {
            const form = document.querySelector('form');

            form.querySelectorAll('input[required], select[required]').forEach(input => {
                input.addEventListener('input', validateForm);
                input.addEventListener('change', validateForm);
            });

            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');
                    }
                });
            }

            validateForm();
        });

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

            if (!(inicio instanceof Date && !isNaN(inicio)) || !(fim instanceof Date && !isNaN(fim))) {
                return 0;
            }

            const meses = (fim.getFullYear() - inicio.getFullYear()) * 12 +
                (fim.getMonth() - inicio.getMonth());

            const ajusteDias = fim.getDate() >= inicio.getDate() ? 0 : -1;

            return Math.max(0, meses + ajusteDias);
        }

        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',
                                confirmButtonColor: '#3085d6',
                                confirmButtonText: 'OK'
                            });
                            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'
                ])),
            deleteAditivo: @json(route('publicador.processos.da.delete_aditivo', ':id')),
            mailed: @json(route('publicador.processos.da.mailed'))
        };


        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-item');
                const numeroContrato = removeButton.dataset.numeroContrato?.replace(/\//g, '') || '';
                const numeroSei = removeButton.dataset.numeroSei;



                if (!cardToRemove) {
                    console.error('Card do contrato não encontrado');
                    return;
                }

                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');

                        if (!token) {
                            Swal.fire('Erro!', 'Token CSRF não encontrado', 'error');
                            return;
                        }

                        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 cardToRemove = removeButton.closest('.contrato-item');

                if (!cardToRemove) {
                    console.error('Card do contrato não encontrado');
                    return;
                }

                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 atualizarNumeracaoContratos() {
            const cards = document.querySelectorAll('.contrato-item');

            cards.forEach((card, index) => {
                const badge = card.querySelector('.contrato-number .badge');
                if (badge) {
                    badge.textContent = `Contrato ${index + 1}`;
                }

                const contratoNumberMe3 = card.querySelector('.contrato-number.me-3 .badge');
                if (contratoNumberMe3) {
                    contratoNumberMe3.textContent = `Contrato ${index + 1}`;
                }

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

        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 initializeContractButtons() {
            const cards = document.querySelectorAll('.contrato-item');
            cards.forEach(card => {
                const removeButton = card.querySelector('.btn-remove-contrato');
                if (removeButton) {
                    const numeroContrato = removeButton.dataset.numeroContrato;
                    if (numeroContrato) {
                        setupRemoveExistingContract(card);
                    } else {
                        setupRemoveNewContract(card);
                    }
                }
            });
        }

        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);
        }

        const fabState = {
            isOpen: false,
            isAnimating: false
        };

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

            if (!fabMain || !fabOptions) return;

            fabMain.addEventListener('click', (e) => {
                e.stopPropagation();
                toggleFab(!fabState.isOpen);
            });

            document.addEventListener('click', (e) => {
                if (!e.target.closest('.floating-action-button') && fabState.isOpen) {
                    toggleFab(false);
                }
            });
        }

        function initializeFab() {
            fabState.isOpen = false;
            fabState.isAnimating = false;
            fabState.rotation = 0;
        }

        function setupEventListeners(fabMain, fabOptions, fabMainIcon) {
            fabMain.addEventListener('click', (e) => {
                e.stopPropagation();
                toggleFab(fabMain, fabOptions, fabMainIcon);
            });

            document.addEventListener('click', (e) => {
                if (!e.target.closest('.floating-action-button') && fabState.isOpen) {
                    closeFab(fabMain, fabOptions, fabMainIcon);
                }
            });

            document.addEventListener('keydown', (e) => {
                if (e.key === 'Escape' && fabState.isOpen) {
                    closeFab(fabMain, fabOptions, fabMainIcon);
                }
            });

            const fabOptionButtons = document.querySelectorAll('.fab-option');
            fabOptionButtons.forEach(button => {
                button.addEventListener('mouseenter', () => {
                    if (!fabState.isOpen) return;
                    button.style.transform = 'translateX(-5px)';
                });

                button.addEventListener('mouseleave', () => {
                    button.style.transform = 'translateX(0)';
                });
            });
        }

        function toggleFab(open) {
            if (fabState.isAnimating) return;

            const fabMain = document.querySelector('.fab-main');
            const fabOptions = document.querySelector('.fab-options');
            const fabMainIcon = fabMain?.querySelector('svg');

            fabState.isAnimating = true;
            fabState.isOpen = open;

            fabMain?.classList.toggle('active', open);
            fabOptions?.classList.toggle('show', open);

            if (fabMainIcon) {
                fabMainIcon.style.transform = open ? 'rotate(225deg)' : 'rotate(0deg)';
            }

            setTimeout(() => {
                fabState.isAnimating = false;
            }, 300);
        }

        function openFab(fabMain, fabOptions, fabMainIcon) {
            fabState.rotation = 45;
            updateFabState(fabMain, fabOptions, fabMainIcon, true);
        }

        function closeFab(fabMain, fabOptions, fabMainIcon) {
            fabState.rotation = 0;
            fabState.isOpen = false;
            updateFabState(fabMain, fabOptions, fabMainIcon, false);
        }

        function updateFabState(fabMain, fabOptions, fabMainIcon, isOpen) {
            fabMain.classList.toggle('active', isOpen);
            fabOptions.classList.toggle('show', isOpen);

            if (fabMainIcon) {
                fabMainIcon.style.transform = isOpen ? 'rotate(225deg)' : 'rotate(0deg)';
            }

            setTimeout(() => {
                fabState.isAnimating = false;
            }, 300);
        }

        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;
            }

            try {
                const clone = template.content.cloneNode(true);
                const numContratos = container.children.length;
                // Usar o número atual de contratos como índice (começando do 0)
                const novoIndice = numContratos;

                // Atualizar o índice em todos os inputs do novo contrato
                clone.querySelectorAll('[name*="NOVO_INDICE"]').forEach(element => {
                    element.name = element.name.replace('NOVO_INDICE', novoIndice);
                });

                // Atualizar data-contrato-index no container do contrato
                const contratoItem = clone.querySelector('.contrato-item');
                if (contratoItem) {
                    contratoItem.dataset.contratoIndex = novoIndice;
                }

                const badge = clone.querySelector('.badge');
                if (badge) {
                    badge.textContent = `Contrato ${numContratos + 1}`;
                }

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

                container.appendChild(clone);
                const novoCard = container.lastElementChild;

                if (novoCard) {
                    setupNovoContrato(novoCard);
                }

                const fabMain = document.querySelector('.fab-main');
                const fabOptions = document.querySelector('.fab-options');
                if (fabMain && fabOptions) {
                    closeFab(fabMain, fabOptions, fabMain.querySelector('svg'));
                }

            } catch (error) {
                console.error('Erro ao adicionar contrato:', error);
            }
        };

        function setupNovoContrato(novoCard) {

            setupFileUpload(novoCard);
            setupDateValidation(novoCard);
            setupRemoveButton(novoCard);

            const contratoALEPInput = novoCard.querySelector('input[name$="[numero_contrato]"]');
            if (contratoALEPInput) {
                initializeMascaraContrato(contratoALEPInput);
            }

            const contratoGMSInput = novoCard.querySelector('input[name$="[contrato_gms]"]');
            if (contratoGMSInput) {
                initializeMascaraContratoGMS(contratoGMSInput);
            }

            const protocoloSEIInput = novoCard.querySelector('input[name$="[protocolo_sei_contratos]"]');
            if (protocoloSEIInput) {
                initializeSEIMask(protocoloSEIInput);
            }

            novoCard.classList.add('fade-in');
            setTimeout(() => {
                novoCard.classList.remove('fade-in');
            }, 300);
        }

        document.addEventListener('DOMContentLoaded', function() {
            initializeForm();
        });

        function initializeForm() {
            formatarDatas();
            initializeMasks();
            setupFloatingActionButton();
            setupFormValidation();
            setupContratos();
            initializeCategoriaSubcategoria();
            initializeContractButtons();
        }

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

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

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

                if (!template || !container) return;

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

                const badge = clone.querySelector('.badge');
                if (badge) {
                    badge.textContent = `Contrato ${numContratos}`;
                }

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

                container.appendChild(clone);
                const novoItem = container.lastElementChild;

                setupFileUpload(novoItem);
                setupDateValidation(novoItem);
                setupRemoveButton(novoItem);

                toggleFab(false);
            }

            container.querySelectorAll('.contrato-item').forEach(item => {
                setupFileUpload(item);
                setupDateValidation(item);
                setupRemoveButton(item);
            });
        }

        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;
                        }

                        file.metadata = {
                            originalName: file.name,
                            size: file.size,
                            type: file.type,
                            lastModified: file.lastModified
                        };

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

                    updateFileList();
                    updateGlobalCounter();
                    updateHiddenInputs();

                } 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("dragenter", function(e) {
                e.preventDefault();
                e.stopPropagation();
                dropArea.classList.add('drag-over');
            });

            // Manter o evento dragover já existente
            dropArea.addEventListener("dragover", function(e) {
                e.preventDefault();
                e.stopPropagation();
                dropArea.classList.add('drag-over');
            });

            // Manter o evento dragleave já existente
            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) {
                    processFiles(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';

                const fileIcon = `
                <svg xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    class="me-2">
                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                    <polyline points="14 2 14 8 20 8"/>
                </svg>`;

                filePreview.innerHTML = `
                    ${fileIcon}
                    <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">
                            <svg xmlns="http://www.w3.org/2000/svg"
                                width="16"
                                height="16"
                                viewBox="0 0 24 24"
                                fill="none"
                                stroke="currentColor"
                                stroke-width="2"
                                stroke-linecap="round"
                                stroke-linejoin="round">
                                <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7z"/>
                                <circle cx="12" cy="12" r="3"/>
                            </svg>
                        </button>
                        <button type="button" class="btn btn-sm btn-outline-danger remove-file" title="Remover">
                            <svg xmlns="http://www.w3.org/2000/svg"
                                width="16"
                                height="16"
                                viewBox="0 0 24 24"
                                fill="none"
                                stroke="currentColor"
                                stroke-width="2"
                                stroke-linecap="round"
                                stroke-linejoin="round">
                                <path d="M3 6h18"/>
                                <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
                                <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
                            </svg>
                        </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 contrato: ${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-item')).indexOf(cardElement);
                console.log('Card Index:', cardIndex, 'Card Element:', 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);

                    if (file.metadata) {
                        Object.entries(file.metadata).forEach(([key, value]) => {
                            const metaInput = document.createElement('input');
                            metaInput.type = 'hidden';
                            metaInput.name = `anexos_meta[${cardIndex}][${fileIndex}][${key}]`;
                            metaInput.value = value;
                            form.appendChild(metaInput);
                        });
                    }
                });
            }

            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 isContratoVazio(contratoElement) {
            const inputs = contratoElement.querySelectorAll('input[type="text"], input[type="date"]');
            return Array.from(inputs).every(input => !input.value || input.value.trim() === '');
        }

        function removerContratosVazios() {
            const contratos = document.querySelectorAll('.contrato-item');
            contratos.forEach(contrato => {
                if (isContratoVazio(contrato)) {
                    contrato.remove();
                }
            });
        }

        function reindexarContratos() {
            const contratos = document.querySelectorAll('.contrato-item');
            contratos.forEach((contrato, index) => {
                contrato.dataset.contratoIndex = index;

                contrato.querySelectorAll('[name*="contratos["]').forEach(element => {
                    element.name = element.name.replace(/contratos\[\d+\]/, `contratos[${index}]`);
                });
            });
        }

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

                if (!form.checkValidity()) {
                    event.stopPropagation();
                    form.classList.add('was-validated');
                    return;
                }

                removerContratosVazios();

                reindexarContratos();

                const contratos = document.querySelectorAll('.contrato-item');
                if (contratos.length === 0) {
                    this.submit();
                    return;
                }

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

                        const dataInicio = contrato.querySelector('input[name$="[data_inicio]"]');
                        const dataFim = contrato.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) {
                    form.submit();
                } else {
                    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 initializeCategoriaSubcategoria() {
            const categoriaSelect = document.getElementById('categoria');
            const subcategoriaSelect = document.getElementById('subcategoria');

            if (!categoriaSelect || !subcategoriaSelect) {
                console.log('Elementos de categoria ou subcategoria não encontrados');
                return;
            }

            async function carregarSubcategorias(categoriaId) {
                if (!categoriaId) {
                    subcategoriaSelect.innerHTML =
                        '<option value="" disabled selected>Selecione a subcategoria</option>';
                    subcategoriaSelect.disabled = true;
                    return;
                }

                try {
                    subcategoriaSelect.innerHTML = '<option value="" disabled selected>Carregando...</option>';
                    subcategoriaSelect.disabled = true;

                    const token = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
                    const headers = {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json'
                    };

                    if (token) {
                        headers['X-CSRF-TOKEN'] = token;
                    }

                    const url = `/relatorios/gerencial/da/processos/categoria/${categoriaId}`;

                    const response = await fetch(url, {
                        method: 'GET',
                        headers: headers
                    });

                    if (!response.ok) {
                        throw new Error(`HTTP error! status: ${response.status}`);
                    }

                    const data = await response.json();
                    const idSubcategoria = subcategoriaSelect.dataset.initialId;

                    subcategoriaSelect.innerHTML =
                        '<option value="" disabled selected>Selecione a subcategoria</option>';

                    if (data.success && data.subcategorias && data.subcategorias.length > 0) {
                        data.subcategorias.forEach(sub => {
                            const option = document.createElement('option');
                            option.value = sub.id;
                            option.textContent = sub.subcategoria;
                            if (idSubcategoria && parseInt(idSubcategoria) === sub.id) {
                                option.selected = true;
                            }
                            subcategoriaSelect.appendChild(option);
                        });
                        subcategoriaSelect.disabled = false;
                    } else {
                        subcategoriaSelect.innerHTML =
                            '<option value="" disabled selected>Nenhuma subcategoria encontrada</option>';
                        subcategoriaSelect.disabled = true;
                    }

                } catch (error) {
                    console.error('Erro ao carregar subcategorias:', error);
                    subcategoriaSelect.innerHTML =
                        '<option value="" disabled selected>Erro ao carregar subcategorias</option>';
                    subcategoriaSelect.disabled = true;
                }
            }

            // Evento de mudança na categoria
            categoriaSelect.addEventListener('change', function() {
                carregarSubcategorias(this.value);
            });

            // Inicialização: verifica se já existe uma categoria selecionada
            const initialValue = categoriaSelect.value;
            const hasSelectedOption = Array.from(categoriaSelect.options).some(option =>
                option.selected && option.value !== '');

            if (hasSelectedOption && initialValue) {
                carregarSubcategorias(initialValue);
            } else {
                // Reset subcategoria quando não há categoria selecionada
                subcategoriaSelect.innerHTML = '<option value="" disabled selected>Selecione a subcategoria</option>';
                subcategoriaSelect.disabled = true;
            }
        }

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

            if (!categoriaSelect || !subcategoriaSelect) {
                console.error('Elementos de categoria/subcategoria não encontrados');
                return;
            }

            const initialCategoriaId = categoriaSelect.value;
            const initialSubcategoriaId = subcategoriaSelect.dataset.initialValue || subcategoriaSelect.value;

            async function loadSubcategorias(categoriaId, categoriaName) {
                try {
                    subcategoriaSelect.innerHTML = '<option value="" disabled selected>Carregando...</option>';
                    subcategoriaSelect.disabled = true;

                    const token = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
                    const headers = {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json'
                    };
                    if (token) headers['X-CSRF-TOKEN'] = token;

                    // Usar ID se disponível, caso contrário usar nome
                    const queryParam = categoriaId ?
                        `categoria_id=${encodeURIComponent(categoriaId)}` :
                        `categoria=${encodeURIComponent(categoriaName)}`;

                    const url = `{{ route('publicador.processos.da.subcategorias_by_id', ['id' => ':id']) }}`.replace(
                        ':id', categoriaId);

                    const response = await fetch(url, {
                        method: 'GET',
                        headers
                    });
                    if (!response.ok) throw new Error(`Erro na requisição: ${response.status}`);

                    const subcategorias = await response.json();

                    subcategoriaSelect.innerHTML =
                        '<option value="" disabled selected>Selecione a subcategoria</option>';

                    if (Array.isArray(subcategorias) && subcategorias.length > 0) {
                        subcategorias.forEach(sub => {
                            const option = document.createElement('option');
                            option.value = sub.id;
                            option.textContent = sub.subcategoria;
                            if (initialSubcategoriaId && sub.id === parseInt(initialSubcategoriaId)) {
                                option.selected = true;
                            }
                            subcategoriaSelect.appendChild(option);
                        });
                        subcategoriaSelect.disabled = false;
                    } else {
                        subcategoriaSelect.innerHTML =
                            '<option value="" disabled selected>Nenhuma subcategoria disponível</option>';
                        subcategoriaSelect.disabled = true;
                    }

                } catch (error) {
                    console.error('Erro ao carregar subcategorias:', error);
                    subcategoriaSelect.innerHTML =
                        '<option value="" disabled selected>Erro ao carregar subcategorias</option>';
                    subcategoriaSelect.disabled = true;

                    Swal.fire({
                        title: 'Erro!',
                        text: 'Não foi possível carregar as subcategorias. Por favor, tente novamente.',
                        icon: 'error',
                        confirmButtonText: 'Ok'
                    });
                }
            }

            // Carregar subcategorias ao mudar categoria
            categoriaSelect.addEventListener('change', () => {
                const selectedOption = categoriaSelect.options[categoriaSelect.selectedIndex];
                if (selectedOption && selectedOption.value) {
                    loadSubcategorias(selectedOption.value, selectedOption.text);
                } else {
                    subcategoriaSelect.innerHTML =
                        '<option value="" disabled selected>Selecione a subcategoria</option>';
                    subcategoriaSelect.disabled = true;
                }
            });

            // Carregar subcategorias iniciais se houver uma categoria selecionada
            if (initialCategoriaId) {
                const selectedOption = categoriaSelect.options[categoriaSelect.selectedIndex];
                if (selectedOption) {
                    loadSubcategorias(initialCategoriaId, selectedOption.text);
                }
            }

        }

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

        document.addEventListener('DOMContentLoaded', function() {
            function updatePageTitle() {
                const pageTitle = document.getElementById('pageTitle');
                const title = 'Relatório SEI - Alterar Processo';
                pageTitle.textContent = title;
            }

            updatePageTitle();
        });
    </script>
@endsection