@extends('layouts.publicador.layout_novo')



<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" />
<link rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.32/dist/sweetalert2.min.css">

@section('content')
    <div class="container my-4 py-3">

        <script src="https://kit.fontawesome.com/3f8ae44385.js" crossorigin="anonymous"></script>


        <div class="container my-4 py-3">

            <h4 class="mb-4">
                @choice('labels.relatorios', 1) @lang('labels.gerencial')
            </h4>
            {{--             @php
            dd($input);
            @endphp --}}
            <div class="pesquisa">
                {!! Form::open(['route' => ['publicador.relatorios.gerencial'], 'method' => 'GET', 'class' => 'form my-2 mb-4']) !!}
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                            {{ Form::select('unidade', $unidades, \Request::query('unidade'), ['class' => 'form-control form-control-sm unidade', 'placeholder' => trans_choice('labels.unidades', 1)]) }}
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            {{ Form::select('sunidade', [], \Request::query('unidade'), ['class' => 'form-control form-control-sm subunidade', 'placeholder' => trans_choice('labels.subunidades', 0)]) }}
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            <select class="form-control form-control-sm" name="user_resp">
                                <option value="">Responsável</option>
                                <option
                                    {{ !empty($input['user_resp']) && $input['user_resp'] == 'Gudrian marcelo' ? 'selected' : '' }}
                                    value="Gudrian marcelo">Gudrian Marcelo Loureiro de Lima</option>
                                <option
                                    {{ !empty($input['user_resp']) && $input['user_resp'] == 'Fernanda silva' ? 'selected' : '' }}
                                    value="Fernanda silva">Fernanda Silva Abduch Santos</option>
                                <option
                                    {{ !empty($input['user_resp']) && $input['user_resp'] == 'Elisangela cristina' ? 'selected' : '' }}
                                    value="Elisangela cristina">Elisangela Cristina Good</option>
                            </select>

                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            <input value="{{ !empty($input['venci_contrato_de']) ? $input['venci_contrato_de'] : '' }}"
                                class="form-control form-control-sm data" placeholder="Contrato de" name="venci_contrato_de"
                                type="text">
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            <input value="{{ !empty($input['venci_contrato_ate']) ? $input['venci_contrato_ate'] : '' }}"
                                class="form-control form-control-sm data" placeholder="até" name="venci_contrato_ate"
                                type="text">
                        </div>
                    </div>
                    <div class="col-12 text-right">
                        <a href="{{ route('publicador.relatorios.downloadform') }}" class="btn btn-success btn-sm text-left"
                            title="download"><i class="fas fa-download" aria-hidden="true"></i> Baixar Planilha</a>

                        <button class="btn btn-sm btn-primary text-right" type="submit"
                            value="Pesquisar">Pesquisar</button>
                    </div>
                </div>
                {!! Form::close() !!}
            </div>

            @if (session('status-success'))
                <div class="alert alert-success text-center remove-after-3s" role="alert">
                    {{ session('status-success') }}
                </div>
            @endif
            @if (session('status-error'))
                <div class="alert alert-danger text-center remove-after-3s" role="alert">
                    {{ session('status-error') }}
                </div>
                @php
                    session()->remove('status-error');
                @endphp
            @endif
            @include('layouts.publicador.aviso_paginacao')
            @unless ($lista->isEmpty())
                <table class="table table-processos table-sm table-bordered">
                    <thead class="thead-default">
                        <tr>
                            <th>@choice('labels.unidades', 1)</th>
                            <th>@choice('labels.processos', 1)</th>
                            <th nowrap>@choice('labels.data', 1) @lang('labels.abertura')</th>
                            <th>@lang('labels.procedimento')</th>
                            <th>@lang('labels.descricao')</th>
                            <th nowrap>@lang('labels.ultimo') @lang('labels.andamento')</th>
                        </tr>
                    </thead>
                    <tbody>


                        @foreach ($lista as $index => $item)
                            @php
                                $index = str_replace('.', '_', $index);
                            @endphp
                            <tr class="tr-processos">
                                <td nowrap>
                                    @if (!empty($item['atividade']))
                                        @foreach ($item['atividade'] as $sigla => $data)
                                            {{ $sigla }} <br>
                                        @endforeach
                                    @endif
                                </td>
                                <td nowrap>{{ $item['protocolo'] }}</td>
                                <td nowrap>{{ \Carbon\Carbon::parse($item['data_geracao'])->format('d/m/Y') }}</td>
                                <td>{{ $item['procedimento'] }}</td>
                                <td class="w-25">{{ $item['descricao'] }}</td>
                                <td nowrap>
                                    @if (!empty($item['atividade']))
                                        {{ \Carbon\Carbon::parse(reset($item['atividade']))->format('d/m/Y H:i') }}
                                        @foreach ($item['atividade'] as $sigla => $data)
                                        @endforeach
                                    @endif
                                </td>
                                <td class="text-right" nowrap>
                                    @php
                                        $id = str_replace('.', '', $item['protocolo']);
                                        $id = str_replace('-', '', $id);
                                    @endphp
                                    <form method="POST" action="{{ route('publicador.relatorios.form_geren_remove', $id) }}"
                                        accept-charset="UTF-8" class="form-delete d-inline">

                                        <input name="_token" type="hidden" value="{{ csrf_token() }}">

                                        <a href="{{ route('publicador.relatorios.form_edit', $id) }}" class="btn btn-primary"
                                            title="Alterar"
                                            style="padding: 6px 12px; background-color: #0056b3; border-color: #0056b3; border-radius: 3px;">

                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"
                                                stroke-linecap="round" stroke-linejoin="round">
                                                <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
                                                <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
                                            </svg>
                                        </a>
                                    </form>
                                </td>
                            </tr>
                            <tr class="tr-processos">
                                <td colspan="8">
                                    <div class="row buttons">
                                        <div class="col">
                                            <div class="alinha-esquerda">
                                                <button class="btn success i-{{ $index }}"
                                                    onclick="toggle('detalhes-{{ $index }}', 'atividades-{{ $index }}'), teste('i-{{ $index }}', 'bnt-detalhes', 'i-{{ $index }}')">
                                                    <i class="fa-solid fa-caret-down i-{{ $index }} bnt-detalhes"></i>
                                                    Detalhes
                                                </button>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="alinha-direita">
                                                <button class="btn sucess c-{{ $index }}"
                                                    onclick="toggle('atividades-{{ $index }}', 'detalhes-{{ $index }}'), teste('i-{{ $index }}', 'bnt-atividades', 'c-{{ $index }}')">
                                                    <i
                                                        class="fa-solid fa-caret-down i-{{ $index }} bnt-atividades"></i>Atividades
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row details">
                                        <div class="col">
                                            <div class="conteudaison detalhes detalhes-{{ $index }}" id="detalhesdiv"
                                                style="">
                                                <div>
                                                    <div class="row fs-80 p-2">
                                                        <div class="col-6 col-lg-4 mb-3">
                                                            <b>Numero</b>: <p>{{ $item['protocolo'] }}</p>
                                                            <b>Data Abertura</b>: <p>
                                                                {{ $item['data_geracao'] == null ? '' : \Carbon\Carbon::parse($item['data_geracao'])->format('d/m/Y') }}
                                                            </p>
                                                            <b>Unidade geradora</b>: <p>
                                                                {{ $item['unidade_geradora'] }}</p>
                                                            <b>Procedimento</b>: <p>{{ $item['procedimento'] }}</p>
                                                            <b>Descricao</b>: <p>{{ $item['descricao'] }}</p>
                                                            <b>Unidade atual</b>: <p>
                                                                @if (!empty($item['atividade']))
                                                                    @foreach ($item['atividade'] as $sigla => $data)
                                                                        {{ $sigla }}
                                                                        <br>
                                                                    @endforeach
                                                                @endif
                                                            </p>
                                                        </div>
                                                        <div class="col-6 col-lg-3">
                                                            <b>Objeto</b>: <p>{{ $item['objeto'] }}</p>
                                                            <b>Modalidade</b>: <p>{{ $item['modalidade'] }}</p>
                                                            <b>Vencimento Contrato</b>: <p>{{ $item['vencimento'] }}</p>
                                                            <b>Valor Máximo</b>: <p>{{ $item['valor_max'] }}</p>
                                                            <b>Valor Final Contratação</b>: <p>{{ $item['valor_contrato'] }}
                                                            </p>
                                                            <b>Data Entrada</b>: <p>
                                                                {{ $item['data_entrada'] == null ? '' : $item['data_entrada'] }}
                                                            </p>
                                                            <b>Data Saida</b>: <p>
                                                                {{ $item['data_saida'] == null ? '' : $item['data_saida'] }}
                                                            </p>
                                                            <b>Planejamento</b>: <p>{{ $item['planejamento'] }}</p>
                                                        </div>
                                                        <div class="col-12 col-lg-4">
                                                            <b>Usuario responsavel</b>: <p>
                                                                {{ $item['user_resp'] }}</p>
                                                            <b>Tramite</b>: <p>{{ $item['tramite'] }}</p>
                                                            <b>Comentarios</b>: <p>{{ $item['comentarios'] }}</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="conteudaison atividades atividades-{{ $index }}"
                                                id="atividadesdiv">
                                                <div>
                                                    <div class="row fs-80 p-2">
                                                        <div class="col-12">
                                                            <table class="table table-striped">
                                                                <tbody>
                                                                    <tr style="font-weight:500;font-size:large;;">
                                                                        <th nowrap>Unidade</th>
                                                                        <th nowrap>Descrição</th>
                                                                        <th nowrap>Data</th>
                                                                    </tr>
                                                                    @if (!empty($item['atividade']))
                                                                        @php
                                                                            $indice = 0;
                                                                        @endphp
                                                                        @foreach ($item['atividade'] as $key => $atividade)
                                                                            @if ($indice < 8)
                                                                                <tr style="font-size:larger;">
                                                                                    <td nowrap>{{ $key }}</td>
                                                                                    <td nowrap></td>
                                                                                    <td nowrap>
                                                                                        {{ date('d/m/Y', strtotime($atividade)) }}
                                                                                    </td>
                                                                                </tr>
                                                                                @php
                                                                                    $indice++;
                                                                                @endphp
                                                                            @endif
                                                                        @endforeach
                                                                </tbody>
                                                            </table>
                                                        @else
                                                            <p>Sem atividade registrada..</p>
                        @endif
            </div>
        </div>
        </div>
        </div>
        </div>
        </div>

        </td>


        </tr>
        @endforeach
        </tbody>
        </table>
    @endunless
    <script>
        function toggle(idToOpen, idToClose) {
            let openElement = document.querySelector('.' + idToOpen);
            let closeElement = document.querySelector('.' + idToClose);

            if (openElement.style.height === "auto") {
                // Close it
                openElement.style.height = "0px";
                openElement.style.minHeight = "0px";

            } else {
                // Open it
                openElement.style.height = "auto";
                openElement.style.minHeight = "150px";

                // Close the other div
                closeElement.style.height = "0px";
                closeElement.style.minHeight = "0px";
            }
        }
    </script>
    <script>
        function teste(index, par, color) {
            if (document.querySelector("." + index + ".bnt-detalhes").classList.contains("fa-rotate-180")) {
                document.querySelector("." + index + ".bnt-detalhes").classList.remove("fa-rotate-180");

            } else if (document.querySelector("." + index + ".bnt-atividades").classList.contains("fa-rotate-180")) {
                document.querySelector("." + index + ".bnt-atividades").classList.remove("fa-rotate-180");

            } else if (par == "bnt-atividades") {
                document.querySelector("." + index + "." + par).classList.add("fa-rotate-180");
                document.querySelector("." + index + ".bnt-detalhes").classList.remove("fa-rotate-180");

            } else if (par == "bnt-detalhes") {
                document.querySelector("." + index + "." + par).classList.add("fa-rotate-180");
                document.querySelector("." + index + ".bnt-atividades").classList.remove("fa-rotate-180");

            }
        }
    </script>

    <style>
        .text-primary {
            color: rgb(2, 80, 137) !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;
            --header-height: 60px;
            --transition-speed: 0.3s;
        }

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

        /* Cards */
        .card {
            border: 1px solid rgba(0, 0, 0, 0.1);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            transition: box-shadow var(--transition-speed);
        }

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

        .card-header {
            background-color: white;
            border-bottom: 1px solid #E5E7EB;
            padding: 1rem 1.25rem;
        }

        .card-header .card-title {
            color: #374151;
            font-size: 1rem;
            font-weight: 600;
            margin: 0;
        }

        /* Formulários */
        .form-control,
        .form-select {
            border: 1px solid rgba(0, 0, 0, 0.1);
            transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
        }

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

        .input-group-text {
            background-color: #f8f9fa;
            border: 1px solid rgba(0, 0, 0, 0.1);
        }

        /* Select2 Personalização */
        .select2-container--bootstrap-5 .select2-selection {
            border: 1px solid rgba(0, 0, 0, 0.1);
            min-height: 38px;
        }

        .select2-container--bootstrap-5 .select2-selection--single {
            padding-top: 4px;
        }

        .select2-container--bootstrap-5.select2-container--focus .select2-selection,
        .select2-container--bootstrap-5.select2-container--open .select2-selection {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 0.2rem rgba(2, 84, 144, 0.25);
        }

        .table-container {
            position: relative;
            max-height: calc(100vh - 400px);
            overflow-y: auto;
        }

        #processosTable {
            position: relative;
            width: 100%;
            margin-bottom: 0;
            border-collapse: separate;
            border-spacing: 0;
        }

        #processosTable thead {
            position: sticky;
            top: 0;
            z-index: 1020;
            background-color: var(--primary-color);
        }


        #processosTable thead th {
            background-color: var(--primary-color);
            color: white;
            padding: 1rem;
            font-weight: 500;
            text-align: left;
            position: sticky;
            top: 0;
        }

        .btn-group {
            z-index: 1010;
        }

        #processosTable td:last-child {
            position: relative;
            z-index: 1010;
        }


        #processosTable thead th::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 2px;
            background-color: rgba(0, 0, 0, 0.1);
        }

        #processosTable tbody tr {
            transition: background-color var(--transition-speed);
        }

        #processosTable tbody tr:hover {
            background-color: rgba(2, 84, 144, 0.05);
        }

        #processosTable td {
            vertical-align: middle;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        }

        /* Células Especiais */
        .unidade-cell,
        .dias-cell,
        .data-cell {
            padding: 0.25rem 0.5rem;
            margin-bottom: 0.25rem;
            background-color: rgba(2, 84, 144, 0.1);
            border-radius: 4px;
            font-size: 0.875rem;
        }

        .unidade-cell:last-child,
        .dias-cell:last-child,
        .data-cell:last-child {
            margin-bottom: 0;
        }

        /* Modal de Detalhes */
        .modal-xl {
            max-width: 1140px;
            margin: 1.75rem auto;
        }

        .modal-content {
            border: none;
            border-radius: 0.75rem;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }

        .modal-header {
            background-color: var(--primary-color);
            color: white;
            border-radius: 0.75rem 0.75rem 0 0;
            padding: 1.25rem 2rem;
        }

        .modal-header .btn-close {
            filter: brightness(0) invert(1);
            opacity: 0.8;
            transition: opacity 0.2s;
        }

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

        .modal-title {
            font-size: 1.25rem;
            font-weight: 500;
        }

        .modal-body {
            padding: 1.25rem 2rem;
            background-color: #f8f9fa;
        }

        .modal-body .col-md-6 {
            padding: 0 1rem;
        }

        /* Lista de Detalhes do Processo */
        .process-details {
            background: white;
            border-radius: 0.5rem;
            padding: 1.25rem;
            margin: 0;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            display: grid;
            gap: 0.5rem 1rem;
        }

        .process-details dt {
            grid-column: 1;
            margin-bottom: 0.75rem;
            font-weight: 600;
            color: #4B5563;
            margin-bottom: 0.5rem;
            font-size: 0.875rem;
        }

        .process-details dd {
            margin-bottom: 1rem;
            margin-left: 0;
            padding-left: 1rem;
            border-left: 3px solid var(--primary-color);
            color: #6B7280;
            font-size: 0.875rem;
            grid-column: 2;
            margin-bottom: 0.75rem;
        }

        .process-details dd:last-child {
            margin-bottom: 0;
        }

        @media (max-width: 992px) {
            .modal-xl {
                max-width: 95%;
                margin: 1rem auto;
            }
        }

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

            .process-details {
                grid-template-columns: 1fr;
                gap: 0.25rem;
            }

            .process-details dt {
                grid-column: 1;
                margin-bottom: 0.25rem;
            }

            .process-details dd {
                grid-column: 1;
                margin-bottom: 1rem;
            }
        }

        /* Cartão de Contrato */
        .contract-card {
            background: white;
            border-radius: 0.5rem;
            padding: 1.25rem;
            margin-bottom: 1rem;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            transition: transform 0.2s;
        }

        .contract-card:hover {
            transform: translateY(-2px);
        }

        .contract-label {
            font-weight: 600;
            color: #4B5563;
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.025em;
            margin-bottom: 0.25rem;
        }

        .contract-value {
            color: #6B7280;
            font-size: 0.875rem;
        }

        .contract-attachments {
            margin-top: 1rem;
            padding-top: 1rem;
            border-top: 1px solid #E5E7EB;
        }

        /* Tabela de Histórico */
        .history-table {
            max-height: 600px;
            background: white;
            overflow: hidden;
            overflow-y: auto;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .history-table::-webkit-scrollbar {
            width: 8px;
        }

        .history-table::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 4px;
        }

        .history-table::-webkit-scrollbar-thumb {
            background: var(--primary-color);
            border-radius: 4px;
        }

        .history-table::-webkit-scrollbar-thumb:hover {
            background: var(--primary-hover);
        }

        #historyTable {
            margin-bottom: 0;
        }

        #historyTable thead th {
            background-color: var(--primary-color);
            color: white;
            font-weight: 500;
            padding: 0.75rem 1rem;
            font-size: 0.875rem;
            border: none;
        }

        #historyTable tbody td {
            padding: 0.75rem 1rem;
            font-size: 0.875rem;
            color: #6B7280;
            border-bottom: 1px solid #E5E7EB;
            vertical-align: middle;
        }

        #historyTable tbody tr:last-child td {
            border-bottom: none;
        }

        #historyTable tbody tr.active-da {
            background-color: rgba(2, 84, 144, 0.05);
        }

        #historyTable tbody tr:hover {
            background-color: rgba(2, 84, 144, 0.02);
        }

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

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

        .btn-group {
            gap: 0.25rem;
        }

        .btn-group .btn {
            border-radius: 4px !important;
        }

        /* Alertas */
        .alert {
            border-radius: 6px;
            border: 1px solid rgba(0, 0, 0, 0.1);
            padding: 1rem;
        }

        .alert svg {
            width: 24px;
            height: 24px;
        }

        /* Scrollbar Personalizada */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        ::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb {
            background: var(--primary-color);
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: var(--primary-hover);
        }

        /* Loading Indicator */
        .loading-overlay {
            background-color: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(4px);
            border-radius: 0.75rem;
        }

        .spinner {
            width: 40px;
            height: 40px;
            border: 3px solid #E5E7EB;
            border-top-color: var(--primary-color);
            border-radius: 50%;
            animation: spinner 0.8s linear infinite;
        }

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


        .modal-footer {
            background-color: white;
            border-top: 1px solid #E5E7EB;
            border-radius: 0 0 0.75rem 0.75rem;
            padding: 1.25rem 2rem;
        }

        .modal-footer .btn {
            padding: 0.5rem 1.5rem;
            font-weight: 500;
        }

        /* Responsive Adjustments */
        @media (max-width: 768px) {
            .modal-dialog {
                margin: 0.5rem;
            }

            .process-details dt {
                float: none;
                width: auto;
                text-align: left;
            }

            .process-details dd {
                margin-left: 0;
            }

            .contract-card {
                padding: 1rem;
            }
        }

        /* Responsividade */
        @media (max-width: 768px) {
            .btn-group {
                flex-direction: column;
            }

            .btn-group .btn {
                width: 100%;
                margin-bottom: 0.5rem;
            }

            .process-details dt {
                float: none;
                text-align: left;
                width: auto;
            }

            .process-details dd {
                margin-left: 0;
                margin-bottom: 1rem;
            }

            .modal-dialog {
                margin: 0.5rem;
            }

            .table-container {
                max-height: calc(100vh - 300px);
            }
        }

        /* Animações */
        .fade-enter {
            opacity: 0;
        }

        .fade-enter-active {
            opacity: 1;
            transition: opacity var(--transition-speed);
        }

        .fade-exit {
            opacity: 1;
        }

        .fade-exit-active {
            opacity: 0;
            transition: opacity var(--transition-speed);
        }

        /* Tooltips */
        .tooltip {
            font-size: 0.875rem;
        }

        .tooltip-inner {
            background-color: var(--dark-color);
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .container-fluid.py-4 {
            padding: 0 !important;
        }
    </style>
    <style>
        /* Variáveis de Cor e Estilo */
        :root {
            --primary-color: #025490;
            --primary-hover: #01407a;
            --secondary-color: #6c757d;
            --success-color: #28a745;
            --info-color: #17a2b8;
            --surface-color: #fff;
            --border-color: rgba(0, 0, 0, 0.1);
            --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
            --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
            --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.1);
            --transition: all 0.2s ease-in-out;
        }

        /* Card Principal */
        .card {
            background: var(--surface-color);
            border: 1px solid var(--border-color);
            border-radius: 0.75rem;
            box-shadow: var(--shadow-sm);
            transition: var(--transition);
            margin-bottom: 1.5rem;

        }

        .card-body {
            padding: 1.25rem;
        }

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

        /* Campo de Busca Principal */
        .search-group {
            width: 100%;
            margin: 0 auto;
            box-shadow: var(--shadow-sm);
        }

        .search-group .input-group-text {
            background-color: var(--surface-color);
            color: #6B7280;
            padding: 0.75rem 1.25rem;
            border: 1px solid #e2e8f0;
            border-right: none;
            border-top-left-radius: 0.5rem;
            border-bottom-left-radius: 0.5rem;
        }

        .search-group .form-control {
            height: 54px;
            font-size: 1rem;
            color: #374151;
            border: 1px solid #e2e8f0;
            border-left: none;
            padding: 0.75rem 1.25rem;
            border-top-right-radius: 0.5rem;
            border-bottom-right-radius: 0.5rem;
            transition: var(--transition);
        }

        .search-group .form-control::placeholder {
            color: #9CA3AF;
        }

        .search-group:hover .input-group-text,
        .search-group:hover .form-control {
            border-color: #cbd5e0;
        }

        .search-group .form-control:focus {
            box-shadow: none;
            border-color: var(--primary-color);
        }

        .search-group:focus-within {
            box-shadow: 0 0 0 3px rgba(2, 84, 144, 0.15);
            border-radius: 0.5rem;
        }

        .search-group svg {
            width: 20px;
            height: 20px;
            stroke-width: 2;
        }

        /* Botões */
        .btn {
            height: 40px;
            padding: 0 0.7rem;
            font-size: 0.95rem;
            font-weight: 500;
            display: inline-flex;
            align-items: center;
            gap: 0.625rem;
            transition: var(--transition);
            border-radius: 0.5rem;
            position: relative;
        }

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

        .btn svg {
            width: 20px;
            height: 20px;
            stroke-width: 2;
        }

        /* Variantes de Botões */
        .btn-light {
            background: var(--surface-color);
            border-color: #e2e8f0;
            color: #4B5563;
        }

        .btn-light:hover {
            background: #f9fafb;
            border-color: #cbd5e0;
        }

        .btn-primary {
            background: var(--primary-color);
            border: none;
            color: #ffffff;
        }

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

        .btn-success {
            background: var(--success-color);
            border: none;
            color: #ffffff;
        }

        .btn-success:hover {
            background: #218838;
        }

        .btn-info {
            background: var(--info-color);
            border: none;
            color: #ffffff;
        }

        .btn-info:hover {
            background: #138496;
        }

        /* Badge nos Botões */
        .badge {
            position: absolute;
            top: -8px;
            right: -8px;
            min-width: 22px;
            height: 22px;
            padding: 0 8px;
            font-size: 11px;
            font-weight: 600;
            line-height: 22px;
            border-radius: 11px;
            background: var(--primary-color);
            color: #ffffff;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

        /* Layout e Espaçamento */
        .px-6 {
            padding-left: 2.5rem !important;
            padding-right: 2.5rem !important;
        }

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

        /* Container dos Botões */
        .action-buttons {
            display: flex;
            gap: 0.75rem;
            flex-shrink: 0;
        }

        /* Responsividade */
        @media (max-width: 1024px) {
            .search-group {
                max-width: 100%;
            }

            .btn {
                padding: 0 1rem;
            }

            .btn-text {
                display: none;
            }

            .action-buttons {
                gap: 0.5rem;
            }
        }

        @media (max-width: 768px) {
            .px-6 {
                padding-left: 1rem !important;
                padding-right: 1rem !important;
            }

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

            .search-group .form-control {
                height: 48px;
            }

            .btn {
                height: 48px;
                padding: 0 0.75rem;
            }

            .btn svg {
                width: 18px;
                height: 18px;
            }
        }

        .offcanvas-backdrop {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 1040;
            width: 100vw;
            height: 100vh;
            background-color: #000;
            pointer-events: auto;
        }

        .offcanvas-backdrop.fade {
            opacity: 0;
            transition: opacity 0.15s linear;
        }

        .offcanvas-backdrop.show {
            opacity: 0.5;
        }

        .offcanvas {
            transition: transform 0.3s ease-in-out;
        }

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

        /* Animação suave para o hover dos elementos */
        .form-control,
        .btn,
        .badge {
            transition: all 0.2s ease-in-out;
        }

        /* Melhorias de Acessibilidade */
        .form-control:focus,
        .btn:focus {
            outline: none;
        }

        .btn:focus-visible {
            box-shadow: 0 0 0 3px rgba(2, 84, 144, 0.4);
        }

        .swal2-small {
            max-width: 500px;
            padding: 1.25rem;
        }

        .swal2-small textarea.form-control {
            height: 80px !important;
            margin-bottom: 1rem;
            width: auto;
        }

        .swal2-container-custom {
            padding: 1rem;
        }

        /* Ajusta o espaçamento do título */
        .swal2-small .swal2-title {
            padding: 0.5rem 0;
            font-size: 1.25rem;
        }

        /* Ajusta o espaçamento do ícone */
        .swal2-small .swal2-icon {
            margin: 0.5rem auto;
        }

        .btn-favorito svg {
            transition: all 0.3s ease;
        }

        .btn-favorito:hover {
            transform: scale(1.1);
        }

        .btn-light.btn-favorito {
            background-color: #f8f9fa;
            border-color: #ddd;
        }

        .btn-warning.btn-favorito {
            background-color: #ffc107;
            border-color: #ffc107;
            color: #000;
        }

        .btn-warning.btn-favorito svg {
            fill: currentColor;
        }

        .aditivo-item {
            transition: all 0.2s ease-in-out;
        }

        .aditivo-item .card {
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            transition: all 0.2s ease-in-out;
        }

        .aditivo-item .card:hover {
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
            transform: translateY(-1px);
        }

        .contract-label {
            font-weight: 600;
            color: #495057;
            font-size: 0.875rem;
            padding-bottom: 0.5rem;
            border-bottom: 1px solid #e9ecef;
            margin-bottom: 1rem;
        }

        #situacoesTable thead th {
            position: sticky;
            top: 0;
            background: white;
            z-index: 1;
        }

        .loading-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255, 255, 255, 0.8);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
        }

        /* Estilo para o modal de situação */
        .bg-gradient-primary {
            background: linear-gradient(45deg, var(--primary-color), #0275d8);
        }

        .modal-content {
            border-radius: 1rem;
            overflow: hidden;
        }

        .card {
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            border-radius: 0.75rem;
        }

        .input-group-text {
            color: #6c757d;
        }

        .form-control:focus {
            box-shadow: none;
            border-color: var(--primary-color);
        }

        .input-group:focus-within {
            box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
            border-radius: 0.375rem;
        }

        .table-hover tbody tr:hover {
            background-color: rgba(2, 84, 144, 0.05);
        }


        .toggle-details {
            position: relative;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .toggle-details:hover::after {
            content: 'Ver detalhes';
            position: absolute;
            background-color: var(--primary-color);
            color: white;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            white-space: nowrap;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            opacity: 0;
            animation: fadeIn 0.2s ease forwards;
            z-index: 1000;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translate(-50%, -10px);
            }

            to {
                opacity: 1;
                transform: translate(-50%, 0);
            }
        }

        .toggle-details:active {
            background-color: rgba(2, 84, 144, 0.1);
        }

        .toggle-details::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: rgba(2, 84, 144, 0.2);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: all 0.3s ease;
        }

        .toggle-details:active::before {
            width: 100%;
            height: 100%;
            border-radius: 4px;
        }
    </style>

    @include('layouts.publicador.paginacao')
    <script type="text/javascript">
        (function($) {
            $('.accordion').accordion({
                active: false,
                collapsible: true,
                heightStyle: 'content'
            });
        })(jQuery);
    </script>
    <script type="text/javascript">
        (function($) {
            $('.unidade').change(function() {
                let id = $(this).val();

                $('.subunidade').empty().append('<option value="0">@extends('layouts.publicador.layout_novo')</option>');

                if (id === '') return;

                $.getJSON('{{ route('publicador.unidades.sub') }}', {
                    id: id
                }, function(data) {

                    let sub = $('.subunidade');

                    sub.empty()
                        .append('<option value="0">@choice('labels.relatorios', 1) @lang('labels.gerencial')</option>')
                        .append('<option value="1">@choice('labels.unidades', 1) @choice('labels.processos', 1)</option>');

                    $.each(data, function(k, v) {
                        let opt = $('<option value="' + v.id_unidade + '">' + v.sigla + ' - ' +
                            v.descricao + '</option>');
                        sub.append(opt);
                    });

                    @if ($subunidade > 0)
                        sub.val({{ $subunidade }});
                    @endif

                });
            }).trigger('change');

        })(jQuery);
    </script>

    </div>
@endsection