@extends('layouts.publicador.default')

    @section('content')
    <div class="container-fluid my-4 animate__animated animate__fadeIn">
        <form action="{{ route('publicador.processos.da.index') }}" method="GET" id="form-pesquisa-unificado">
            <div class="card mb-4 shadow-sm animate__animated animate__fadeInUp">
                <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                    <h5 class="mb-0"><i class="fas fa-filter me-2"></i>Filtros de Pesquisa</h5>
                </div>
                <div class="card-body">
                    <div class="row mb-3">
                        <div class="col-md-2">
                            <div class="input-group">
                                <span class="input-group-text">
                                    <i class="fas fa-file-alt"></i>
                                </span>
                                <input type="text" name="numero"
                                    class="form-control @error('numero') is-invalid @enderror"
                                    value="{{ request()->input('numero') }}" maxlength="13"
                                    placeholder="Número do Processo">
                                @error('numero')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-3">
                            <div class="input-group">
                                <span class="input-group-text">
                                    <i class="fas fa-book"></i>
                                </span>
                                <input type="text" name="assunto"
                                    class="form-control @error('assunto') is-invalid @enderror"
                                    value="{{ request()->input('assunto') }}" autocomplete="off"
                                    placeholder="Assunto do processo">
                                @error('assunto')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-3">
                            <div class="input-group">
                                <span class="input-group-text">
                                    <i class="fas fa-search"></i>
                                </span>
                                <input type="text" name="palavrachave"
                                    class="form-control @error('palavrachave') is-invalid @enderror"
                                    value="{{ request()->input('palavrachave') }}" autocomplete="off"
                                    placeholder="Buscar por palavra-chave">
                                @error('palavrachave')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="row">
                                <div class="col-6 pe-1">
                                    <div class="input-group">
                                        <span class="input-group-text">
                                            <i class="fas fa-calendar-alt"></i>
                                        </span>
                                        <input type="date" name="data_de" class="form-control"
                                            value="{{ request()->input('data_de') }}" placeholder="Data Inicial">
                                    </div>
                                </div>
                                <div class="col-6 ps-1">
                                    <div class="input-group">
                                        <input type="date" name="data_ate" class="form-control"
                                            value="{{ request()->input('data_ate') }}" placeholder="Data Final">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-2">
                            <select name="unidade" class="form-control unidade">
                                <option value="">Selecione a Unidade</option>
                                @foreach ($unidades as $value => $label)
                                    <option value="{{ $value }}"
                                        {{ request()->input('unidade') == $value ? 'selected' : '' }}>
                                        {{ $label }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-2">
                            <select name="sunidade" class="form-control select2 subunidade">
                                <option value="">Selecione a Subunidade</option>
                            </select>
                        </div>

                        <div class="col-md-2">
                            <select name="responsavel" class="form-control select2">
                                <option value="">Selecione o Responsável</option>
                                @foreach ($usuarios as $usuario)
                                    <option value="{{ $usuario->id }}"
                                        {{ request()->input('responsavel') == $usuario->id ? 'selected' : '' }}>
                                        {{ $usuario->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-3">
                            <select name="categoria" id="categoria" class="form-control select2">
                                <option value="">Selecione a categoria</option>
                                @foreach ($categorias as $categoria)
                                    <option value="{{ $categoria->id }}"
                                        {{ request()->input('categoria') == $categoria->id ? 'selected' : '' }}>
                                        {{ $categoria->categoria }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-3">
                            <select name="subcategoria" id="subcategoria" class="form-control select2">
                                <option value="">Selecione a subcategoria</option>
                                @if (isset($subcategorias) && $subcategorias->count() > 0)
                                    @foreach ($subcategorias as $subcategoria)
                                        <option value="{{ $subcategoria->id }}"
                                            {{ request()->input('subcategoria') == $subcategoria->id ? 'selected' : '' }}>
                                            {{ $subcategoria->subcategoria }}
                                        </option>
                                    @endforeach
                                @endif
                            </select>
                        </div>
                    </div>

                    <!-- Botões -->
                    <div class="row">
                        <div class="col-md-12 text-center">
                            <div class="btn-group">
                                <button type="submit" class="btn btn-primary btn-animate" name="acao" value="pesquisar">
                                    <i class="fas fa-search me-1"></i> Pesquisar
                                </button>
                                <button type="submit" class="btn btn-success btn-animate" name="acao"
                                    value="acompanhar">
                                    <i class="fas fa-eye me-1"></i> Acompanhar Processo
                                </button>
                                <button type="submit" class="btn btn-info btn-animate" name="acao" value="download">
                                    <i class="fas fa-download me-1"></i> Baixar Planilha
                                </button>
                                @if (request()->has('acao') && request()->acao == 'pesquisar')
                                    <a href="{{ route('publicador.processos.da.index') }}"
                                        class="btn btn-warning btn-animate">http://relatoriosei.assembleia.pr.leg.br/relatorios/gerencial/da/processos?numero=&data_de=&data_ate=&unidade=&sunidade=&responsavel=19&categoria=#submenuDTI
                                        <i class="fas fa-sync-alt me-1"></i> Limpar Filtros
                                    </a>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>

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

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

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

        @if ($lista->isNotEmpty())
            @php $pgJson = json_decode($lista->toJson()) @endphp
            <div class="alert alert-info text-center"
                style="background-color: #f8f9fa; border-color: #ddd; color: #004071; padding: 8px; margin-bottom: 15px;">
                <small>
                    <i class="fas fa-folder-open"></i>
                    @lang('labels.total'): <b>{{ number_format($pgJson->total, 0, ',', '.') }}</b>
                    {{ $pgJson->total == 1 ? 'Processo' : 'Processos' }}
                </small>
            </div>
        @endif

        @unless ($lista->isEmpty())
            <div class="card shadow-sm animate__animated animate__fadeInUp animate__delay-1s">
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover" id="processosTable">
                            <thead class="thead-dark">
                                <tr>
                                    <th>@choice('labels.processos', 1)</th>
                                    <th>@choice('labels.data', 1) @choice('labels.processos', 1)</th>
                                    <th>@choice('labels.unidades', 1)</th>
                                    <th>Dias em aberto</th>
                                    <th>Data Unidade</th>
                                    <th>@lang('labels.procedimento')</th>
                                    <th>@lang('labels.descricao')</th>
                                    <th>Ações</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($lista as $index => $item)
                                    @php
                                        $index = str_replace('.', '_', $index);
                                    @endphp
                                    <tr>
                                        <td>{{ $item['numero'] }}</td>
                                        <td>{{ \Carbon\Carbon::parse($item['data_abertura'])->format('d/m/Y') }}</td>
                                        <td>
                                            @if (!empty($item['atividade']))
                                                @php
                                                    $uniqueSiglas = $item['atividade']
                                                        ->unique('sigla')
                                                        ->filter(function ($sigla) {
                                                            return $sigla->sigla === 'DA' ||
                                                                strpos($sigla->sigla, 'DA/') === 0;
                                                        });
                                                @endphp
                                                @foreach ($uniqueSiglas as $sigla)
                                                    <div class="unidade-cell" title="{{ $sigla->sigla }}">
                                                        @if (strlen($sigla->sigla) > 15)
                                                            {{ substr($sigla->sigla, 0, 15) }}...
                                                        @else
                                                            {{ $sigla->sigla }}
                                                        @endif
                                                    </div>
                                                @endforeach
                                            @endif
                                        </td>
                                        <td>
                                            @if (!empty($item['atividade']))
                                                @foreach ($uniqueSiglas as $sigla)
                                                    {{ \Carbon\Carbon::now()->diffInDays(\Carbon\Carbon::parse($sigla->ultima_atividade)) }}
                                                    dias<br>
                                                @endforeach
                                            @endif
                                        </td>
                                        <td>
                                            @if (!empty($item['atividade']))
                                                @foreach ($uniqueSiglas as $sigla)
                                                    {{ date('d/m/Y H:i', strtotime($sigla->ultima_atividade)) }}<br>
                                                @endforeach
                                            @endif
                                        </td>
                                        <td>{{ !empty($item['procedimento']) ? $item['procedimento'] : 'Processo sem descrição' }}
                                        </td>
                                        <td>{{ !empty($item['descricao']) ? $item['descricao'] : 'Processo sem descrição' }}
                                        </td>
                                        <td>
                                            @php
                                                $id = str_replace(['.', '-'], '', $item['numero']);
                                            @endphp
                                            <div class="btn-group" role="group">
                                                <a href="{{ route('publicador.processos.da.form_edit', $id) }}"
                                                    class="btn btn-sm btn-primary btn-animate" title="Alterar">
                                                    <i class="fas fa-pencil-alt"></i>
                                                </a>
                                                <button class="btn btn-sm btn-info btn-animate toggle-details"
                                                    data-target="details-{{ $index }}" title="Detalhes">
                                                    <i class="fas fa-info-circle"></i>
                                                </button>
                                                <button type="button" class="btn btn-sm btn-danger btn-animate"
                                                    onclick="confirmarConclusao('{{ $item['id'] }}', '{{ $item['numero'] }}')"
                                                    title="Concluir Processo">
                                                    <i class="fa-solid fa-circle-xmark"></i> </button>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        @endunless

        @include('layouts.publicador.paginacao')

        <div class="modal fade" id="processDetailsModal" tabindex="-1" role="dialog">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">
                            <i class="fas fa-file-alt"></i>
                            Detalhes do Processo <span id="modalProcessNumber"></span>
                        </h4>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <!-- Coluna da Esquerda - Detalhes -->
                            <div class="col-md-6">
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <h3 class="panel-title"><i class="fas fa-info-circle"></i> Informações Gerais</h3>
                                    </div>
                                    <div class="panel-body">
                                        <dl class="process-details">
                                            <!-- Será preenchido via JavaScript -->
                                        </dl>
                                    </div>
                                </div>

                                <div class="panel panel-default" id="contractsPanel">
                                    <div class="panel-heading">
                                        <h3 class="panel-title"><i class="fas fa-file-contract"></i> Contratos Vinculados
                                        </h3>
                                    </div>
                                    <div class="panel-body">
                                        <div id="contractsList">
                                            <!-- Será preenchido via JavaScript -->
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Coluna da Direita - Histórico -->
                            <div class="col-md-6">
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <h3 class="panel-title"><i class="fas fa-history"></i> Histórico</h3>
                                    </div>
                                    <div class="panel-body">
                                        <div class="table-responsive">
                                            <table class="table table-striped" id="historyTable">
                                                <thead>
                                                    <tr>
                                                        <th>Unidade</th>
                                                        <th>Data Entrada</th>
                                                        <th>Data Conclusão</th>
                                                        <th>Tempo</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <!-- Será preenchido via JavaScript -->
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <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://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.32/dist/sweetalert2.min.css">

    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.24/js/dataTables.bootstrap4.min.js"></script>
    <script src="https://kit.fontawesome.com/19aa79ed21.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.32/dist/sweetalert2.all.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

    <style>
        .my-4 {
            margin-top: 0px !important;
        }

        small {
            font-size: 100%;
        }

        /* Tabelas */
        #processosTable th {
            min-width: 155px;
        }

        .table {
            width: 100%;
            margin-bottom: 1rem;
            color: #000;
        }

        .table .thead-dark th {
            color: #fff;
            background-color: #004071;
            border-color: #454d55;
        }

        #processosTable tbody tr {
            transition: background-color 0.3s ease;
        }

        #processosTable tbody tr:hover {
            background-color: #f1f3f5;
        }

        /* Cores e Backgrounds */
        .text-primary {
            color: #333 !important;
        }

        .bg-primary {
            background-color: #004071 !important;
        }

        /* Botões e Interações */
        .btn-group {
            white-space: nowrap;
        }

        .btn-group .btn {
            margin-bottom: 5px;
        }

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

        .btn-animate:hover {
            transform: translateY(-3px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        .btn-success.btn-animate:hover {
            background-color: #218838;
            transform: translateY(-3px);
            box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
        }

        /* Células de Unidade */
        .unidade-cell {
            max-width: 150px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-bottom: 2px;
        }

        #processosTable .unidade-cell:last-child {
            margin-bottom: 0;
        }

        .unidade-cell[title] {
            cursor: help;
        }

        /* Cards e Panels */
        .card {
            transition: box-shadow 0.3s ease;
        }

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

        /* Filtros Avançados */
        #filtrosAvancados {
            padding-top: 15px;
            border-top: 1px solid #dee2e6;
            margin-top: 15px;
        }

        /* SweetAlert2 Customização */
        .swal2-popup {
            font-size: 1rem !important;
        }

        .swal2-textarea {
            height: 150px !important;
        }

        .swal2-actions .btn {
            margin: 0 5px;
            padding: 8px 20px;
        }

        .modal {
            top: 5%;
            z-index: 1050 !important;
        }

        .modal-backdrop {
            z-index: 1040 !important;
            display: none !important;
        }

        #processDetailsModal {
            background-color: rgba(0, 0, 0, 0.5);
        }

        #processDetailsModal .modal-dialog {
            width: 90%;
            max-width: 1200px;
            margin: 30px auto;
        }

        #processDetailsModal .modal-content {
            border-radius: 3px;
            box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
        }

        /* Header Modal */
        #processDetailsModal .modal-header {
            background-color: #004071;
            color: white;
            padding: 15px;
            border-radius: 3px 3px 0 0;
            position: relative;
        }

        #processDetailsModal .modal-title {
            margin: 0;
            font-size: 16px;
            line-height: 1.42857143;
        }

        #processDetailsModal .close {
            color: white;
            opacity: 0.7;
            text-shadow: none;
            position: absolute;
            right: 15px;
            top: 80%;
            transform: translateY(-50%);
        }

        #processDetailsModal .close:hover {
            opacity: 1;
        }

        /* Corpo Modal */
        #processDetailsModal .modal-body {
            padding: 15px;
            background-color: #f8f9fa;
        }

        /* Lista de Detalhes */
        .process-details {
            margin: 0;
        }

        .process-details dt {
            float: left;
            width: 200px;
            overflow: hidden;
            clear: left;
            text-align: right;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-weight: 700;
            margin-bottom: 5px;
        }

        .process-details dd {
            margin-left: 220px;
            margin-bottom: 5px;
        }

        /* Painéis */
        #processDetailsModal .panel {
            margin-bottom: 15px;
            box-shadow: none;
            border: 1px solid #ddd;
            border-radius: 3px;
        }

        #processDetailsModal .panel-heading {
            background-color: #f5f5f5;
            border-bottom: 1px solid #ddd;
            padding: 10px 15px;
        }

        #processDetailsModal .panel-title {
            font-size: 14px;
            font-weight: 600;
            margin: 0;
        }

        #processDetailsModal .panel-body {
            padding: 15px;
        }

        /* Tabela de Histórico */
        .table-responsive {
            border: 1px solid #ddd;
            border-radius: 4px;
            margin-bottom: 0;
        }

        #historyTable {
            margin-bottom: 0;
            border-collapse: separate;
            border-spacing: 0;
        }

        #historyTable th {
            background-color: #004071;
            color: white;
            border-bottom: 2px solid #004071;
        }

        .table-responsive #historyTable thead th {
            position: sticky;
            top: 0;
            z-index: 1;
            background-color: #004071;
        }

        #historyTable tr.active-da {
            background-color: #d9edf7;
        }

        .table-responsive #historyTable th,
        .table-responsive #historyTable td {
            border-right: 1px solid #ddd;
            border-bottom: 1px solid #ddd;
            padding: 8px;
        }

        .table-responsive #historyTable th:last-child,
        .table-responsive #historyTable td:last-child {
            border-right: none;
        }

        /* Scrollbar Personalizada */
        .table-responsive::-webkit-scrollbar {
            width: 8px;
        }

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

        .table-responsive::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 4px;
        }

        .table-responsive::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

        /* Cards de Contrato */
        .contract-card {
            border: 1px solid #ddd;
            border-radius: 3px;
            padding: 10px;
            margin-bottom: 10px;
        }

        .contract-card:last-child {
            margin-bottom: 0;
        }

        .contract-label {
            font-weight: 700;
            color: #666;
            margin-bottom: 5px;
        }

        .contract-value {
            margin-bottom: 10px;
        }

        .contract-attachments {
            margin-top: 10px;
        }

        /* Lista de Anexos */
        .attachment-list {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 10px;
        }

        .btn-attachment {
            max-width: 200px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-right: 5px;
            margin-bottom: 5px;
        }

        .btn-attachment i {
            margin-right: 5px;
        }

        /* Responsividade */
        @media (max-width: 768px) {
            #processDetailsModal .modal-dialog {
                margin: 10px;
                width: auto;
            }

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

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

        i.fas.fa-filter.me-2 {
            padding-right: 5px;
        }

        .btn-group {
            flex-wrap: wrap;
            gap: 5px;
        }

        .btn-group .btn {
            margin-bottom: 5px;
        }

        #filtrosAvancados {
            padding-top: 15px;
            border-top: 1px solid #dee2e6;
            margin-top: 15px;
        }
    </style>
    <script>
        $(document).ready(function() {
            // Botão Download
            $('#btn-download').on('click', function(e) {
                e.preventDefault();
                const formData = new FormData($('#form-pesquisa-unificado')[0]);
                let url = '{{ route('publicador.processos.da.download_index') }}';
                let params = [];

                for (let [key, value] of formData.entries()) {
                    if (value && value.trim() !== '' && value !== '__/__/____') {
                        params.push(encodeURIComponent(key) + '=' + encodeURIComponent(value));
                    }
                }

                if (params.length > 0) {
                    url += '?' + params.join('&');
                }

                window.location.href = url;
            });

            // Configuração do datepicker
            $('.datepicker').datetimepicker({
                format: 'd/m/Y',
                timepicker: false,
                mask: true,
                scrollMonth: false,
                scrollInput: false,
                dayOfWeekStart: 1,
                validateOnBlur: true,
                allowBlank: true,
                yearStart: 2000,
                yearEnd: 2030
            });
        });

        $(document).ready(function() {
            // Configurações iniciais
            $('[title]').tooltip({
                placement: 'top',
                trigger: 'hover'
            });

            // Select2 initialization
            $('.subunidade').select2({
                theme: 'bootstrap-5',
                width: '100%',
                placeholder: '@choice('labels.subunidades', 0)',
                allowClear: true,
                minimumResultsForSearch: 5,
                maximumSelectionLength: 5
            });

            // Datepicker initialization
            $('.datepicker').datetimepicker({
                format: 'd/m/Y',
                timepicker: false,
                mask: false,
                lang: 'pt-BR',
                defaultDate: '',
                allowBlank: true
            });

            // Handlers de animação
            $('.btn-animate').hover(
                function() {
                    $(this).addClass('animate__animated animate__pulse');
                },
                function() {
                    $(this).removeClass('animate__animated animate__pulse');
                }
            );

            $('#processosTable tbody').on('mouseenter', 'tr', function() {
                $(this).addClass('animate__animated animate__fadeIn');
            }).on('mouseleave', 'tr', function() {
                $(this).removeClass('animate__animated animate__fadeIn');
            });

            // Unidade change handler
            $('.unidade').change(function() {
                let id = $(this).val();
                $('.subunidade').empty().append('<option value="0">@choice('labels.subunidades', 0)</option>');
                if (id === '') return;

                $.getJSON('{{ route('publicador.unidades.sub') }}', {
                    id: id
                }, function(data) {
                    let sub = $('.subunidade');
                    sub.empty()
                        .append('<option value="0">@lang('labels.selecione') @choice('labels.subunidades', 0)</option>')
                        .append('<option value="1">@lang('labels.todas') @choice('labels.subunidades', 0)</option>');

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

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

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

            $('.toggle-details').on('click', function() {
                var numero = $(this).closest('tr').find('td:first').text().trim();

                // Limpar modal e mostrar loading
                $('.process-details').empty();
                $('#contractsList').empty();
                $('#historyTable tbody').empty();

                // Mostrar loading apenas no corpo do modal
                $('.modal-body').prepend(`
                    <div id="loading-indicator" class="text-center" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1000; background: rgba(255,255,255,0.9); padding: 20px; border-radius: 5px;">
                        <i class="fas fa-spinner fa-spin fa-3x"></i>
                        <div class="mt-3">Carregando dados do processo...</div>
                    </div>
                `);

                // Mostrar modal
                $('#processDetailsModal').modal({
                    backdrop: false,
                    keyboard: true,
                    show: true
                });
                $(document).on('click', '[data-dismiss="modal"]', function() {
                    $('#processDetailsModal').modal('hide');
                    $('.modal-backdrop').remove();
                    $('body').removeClass('modal-open');
                });

                $(document).on('keydown', function(e) {
                    if (e.key === 'Escape' && $('#processDetailsModal').hasClass('in')) {
                        $('#processDetailsModal').modal('hide');
                        $('.modal-backdrop').remove();
                        $('body').removeClass('modal-open');
                    }
                });

                $('#processDetailsModal').on('click', function(e) {
                    if ($(e.target).is('#processDetailsModal')) {
                        $('#processDetailsModal').modal('hide');
                        $('.modal-backdrop').remove();
                        $('body').removeClass('modal-open');
                    }
                });
                // Requisição AJAX
                var route = "{{ route('publicador.processos.da.detalhes', ':numero') }}";
                route = route.replace(':numero', numero);

                $.ajax({
                    url: route,
                    method: 'GET',
                    success: function(data) {
                        $('#loading-indicator').remove();
                        atualizarModal(data);
                    },
                    error: function(xhr) {
                        $('#loading-indicator').remove();
                        $('.modal-body').prepend(`
                <div class="alert alert-danger">
                    <i class="fas fa-exclamation-circle mr-2"></i>
                    ${xhr.responseJSON?.error || 'Erro ao carregar dados do processo'}
                </div>
                `);
                    }
                });
            });

            $(document).on('hidden.bs.modal', '#processDetailsModal', function() {
                $('.modal-backdrop').remove();
                $('body').removeClass('modal-open');
            });

            function atualizarModal(data) {
                // Atualizar número do processo
                $('#modalProcessNumber').text(' - ' + data.numero);

                // Preparar dados para exibição
                var detalhes = {
                    'Número': data.numero,
                    'Data Abertura': data.data_abertura,
                    'Unidade Geradora': data.unidade_origem,
                    'Procedimento': data.procedimento || 'Não definido',
                    'Descrição': data.descricao || 'Não definido',
                    'Categoria': data.categoria || 'Não definida',
                    'Subcategoria': data.subcategoria || 'Não definida',
                    'Assunto': data.assunto || 'Não definido',
                    'Palavras-chave': data.palavra_chave || 'Não definidas',
                    'Situação': data.situacao || 'Não definida',
                    'Data da Situação': data.data_situacao || 'Não definida',
                    'Responsável': data.usuario_responsavel_id || 'Não definido',
                    'Observações': data.obs || 'Sem observações'
                };

                // Atualizar detalhes gerais
                var detalhesHtml = '';
                Object.entries(detalhes).forEach(function([label, value]) {
                    detalhesHtml += `<dt>${label}:</dt><dd>${value}</dd>`;
                });
                $('.process-details').html(detalhesHtml);

                // Atualizar contratos
                if (data.contratos?.length > 0) {
                    var contratosHtml = data.contratos.map(function(contrato) {
                        return `
                        <div class="contract-card">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="contract-label">Número do Contrato</div>
                                    <div class="contract-value">${contrato.numero || 'Não informado'}</div>
                                </div>
                                <div class="col-md-6">
                                    <div class="contract-label">Empresa</div>
                                    <div class="contract-value">${contrato.empresa || 'Não informada'}</div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="contract-label">Vigência</div>
                                    <div class="contract-value">${contrato.data_inicio || 'N/A'} a ${contrato.data_fim || 'N/A'}</div>
                                </div>
                            </div>
                            ${contrato.anexos?.length ? `
                                                                                                                                                                                                        <div class="contract-attachments">
                                                                                                                                                                                                            <div class="contract-label">Anexos</div>
                                                                                                                                                                                                            <div class="attachment-list">
                                                                                                                                                                                                                ${contrato.anexos.map(function(anexo) {
                                                                                                                                                                                                                    const nomeArquivo = anexo.split('/').pop();
                                                                                                                                                                                                                    // Use a rota storage
                                                                                                                                                                                                                    return `
                                                <a href="{{ url('') }}/${anexo}"
                                                class="btn btn-xs btn-primary btn-attachment"
                                                title="${nomeArquivo}"
                                                target="_blank">
                                                    <i class="fas fa-paperclip"></i>
                                                    ${nomeArquivo.length > 20 ? nomeArquivo.substring(0, 20) + '...' : nomeArquivo}
                                                </a>`;
                                                                                                                                                                                                                }).join('')}
                                                                                                                                                                                                            </div>
                                                                                                                                                                                                        </div>
                                                                                                                                                                                                    ` : ''}
                        </div>
                    `;
                    }).join('');
                    $('#contractsList').html(contratosHtml);
                    $('#contractsPanel').show();
                } else {
                    $('#contractsList').html('<p class="text-muted">Nenhum contrato vinculado.</p>');
                    $('#contractsPanel').hide();
                }

                // Atualizar histórico
                if (data.historico_completo?.length > 0) {
                    var historicoHtml = data.historico_completo.map(function(registro) {
                        return `
                        <tr class="${registro.sigla === 'DA' || registro.sigla.startsWith('DA/') ? 'active-da' : ''}">
                            <td>${registro.sigla}</td>
                            <td>${moment(registro.ultima_atividade).format('DD/MM/YYYY HH:mm')}</td>
                            <td>${registro.dth_conclusao ? moment(registro.dth_conclusao).format('DD/MM/YYYY HH:mm') : 'Em aberto'}</td>
                            <td>${registro.tempo_unidade} dias</td>
                        </tr>
                    `;
                    }).join('');
                    $('#historyTable tbody').html(historicoHtml);

                    if (data.historico_completo?.length > 10) {
                        $('#historyTable').closest('.table-responsive').css({
                            'max-height': '400px',
                            'overflow-y': 'auto'
                        });
                    } else {
                        $('#historyTable').closest('.table-responsive').css({
                            'max-height': 'none',
                            'overflow-y': 'visible'
                        });
                    }
                } else {
                    $('#historyTable tbody').html(
                        '<tr><td colspan="4" class="text-center">Nenhum histórico disponível.</td></tr>');
                }
            }

            // Confirmar Conclusão
            window.confirmarConclusao = function(id, numero) {
                Swal.fire({
                    title: 'Concluir Processo',
                    html: `Deseja concluir o processo <strong>${numero}</strong>?<br>Você pode adicionar um motivo (opcional):`,
                    icon: 'question',
                    input: 'textarea',
                    inputLabel: 'Motivo da Conclusão (opcional)',
                    inputPlaceholder: 'Digite o motivo da conclusão se desejar...',
                    showCancelButton: true,
                    confirmButtonColor: '#28a745',
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: 'Concluir!',
                    cancelButtonText: 'Cancelar',
                    inputValidator: undefined
                }).then((result) => {
                    if (result.isConfirmed) {
                        const form = document.createElement('form');
                        form.method = 'POST';
                        form.action = '{{ route('publicador.processos.da.concluir') }}';

                        const csrfToken = document.createElement('input');
                        csrfToken.type = 'hidden';
                        csrfToken.name = '_token';
                        csrfToken.value = '{{ csrf_token() }}';
                        form.appendChild(csrfToken);

                        const idInput = document.createElement('input');
                        idInput.type = 'hidden';
                        idInput.name = 'id';
                        idInput.value = id;
                        form.appendChild(idInput);

                        const motivoInput = document.createElement('input');
                        motivoInput.type = 'hidden';
                        motivoInput.name = 'motivo_conclusao';
                        motivoInput.value = result.value || 'Processo concluído';
                        form.appendChild(motivoInput);

                        document.body.appendChild(form);
                        form.submit();
                    }
                });
            };
        });

        $(document).ready(function() {
            // Initialize Select2 for categoria and subcategoria
            $('#categoria, #subcategoria').select2({
                theme: 'bootstrap-5',
                width: '100%',
                allowClear: true,
                placeholder: function() {
                    return $(this).data('placeholder') || 'Selecione uma opção';
                }
            });

            // Handle categoria change
            $('#categoria').on('change', function() {
                const categoriaSelect = $(this);
                const categoriaNome = categoriaSelect.find('option:selected').text();
                const subcategoriaSelect = $('#subcategoria');

                // Reset and disable subcategoria select
                subcategoriaSelect.empty().prop('disabled', true);
                subcategoriaSelect.append(new Option('Carregando...', '', true, true));

                if (!categoriaNome || categoriaNome === 'Selecione a categoria') {
                    subcategoriaSelect.empty().append(new Option('Selecione a subcategoria', '', true,
                        true));
                    subcategoriaSelect.prop('disabled', true).trigger('change');
                    return;
                }

                // Fetch subcategorias
                $.ajax({
                    url: '{{ route('publicador.processos.da.subcategorias') }}',
                    type: 'GET',
                    data: {
                        categoria: categoriaNome
                    },
                    success: function(response) {
                        subcategoriaSelect.empty();
                        subcategoriaSelect.append(new Option('Selecione a subcategoria', '',
                            true, true));

                        if (Array.isArray(response) && response.length > 0) {
                            response.forEach(function(item) {
                                subcategoriaSelect.append(new Option(item.subcategoria,
                                    item.id));
                            });
                            subcategoriaSelect.prop('disabled', false);
                        } else {
                            subcategoriaSelect.append(new Option(
                                'Nenhuma subcategoria disponível', '', true, true));
                        }

                        subcategoriaSelect.trigger('change');
                    },
                    error: function(xhr, status, error) {
                        let errorMessage = 'Erro ao carregar subcategorias';

                        if (xhr.responseJSON && xhr.responseJSON.error) {
                            errorMessage = xhr.responseJSON.error;
                        }

                        console.error('Erro ao carregar subcategorias:', error);
                        subcategoriaSelect.empty()
                            .append(new Option('Erro ao carregar subcategorias', '', true,
                                true))
                            .prop('disabled', true)
                            .trigger('change');

                        Swal.fire({
                            title: 'Erro!',
                            text: errorMessage,
                            icon: 'error',
                            confirmButtonText: 'Ok'
                        });
                    }
                });
            });

            // Initialize subcategoria state based on initial categoria value
            if ($('#categoria').val()) {
                $('#categoria').trigger('change');
            } else {
                $('#subcategoria').prop('disabled', true);
            }
        });
    </script>
@endsection