@extends('sistema.layout')
@section('titulo', 'Processos')
@section('conteudo')
    @php
        // Helper para verificar se há filtros ativos
        $hasActiveFilters = request()->filled('numero') || 
                            request()->filled('ano') || 
                            request()->filled('entidade') || 
                            request()->filled('tipo') || 
                            request()->filled('data_inicial') || 
                            request()->filled('data_final');
    @endphp

    <div class="row">
        <div class="col-lg-12 mb-2">
            <div class="pagetitle">
                <h1 class="fw-bold text-dark mb-1">Gestão de Processos</h1>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb small">
                        <li class="breadcrumb-item">
                            <a href="{{ route('dashboard') }}" class="text-decoration-none">Dashboard</a>
                        </li>
                        <li class="breadcrumb-item" aria-current="page">Processos</li>
                        <li class="breadcrumb-item active" aria-current="page">Lista de Processos</li>
                    </ol>
                </nav>
            </div>
        </div>

        <!-- Cards de Estatísticas -->
        <div class="col-12 mb-3">
            <div class="row">
                {{-- Total --}}
                <div class="col-lg-4 col-md-6 col-sm-12 mb-4">
                    <a href="{{ route('processos.index') }}" class="text-decoration-none">
                        <div class="card py-3 card-hover">
                            <div class="card-body d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="text-secondary mb-0 fw-semibold">Total de Processos</h6>
                                    <h2 class="fw-bold mb-0">{{ number_format($processos->total(), 0, ',', '.') }}</h2>
                                </div>
                                <div class="bg-primary rounded-circle d-flex align-items-center justify-content-center"
                                    style="width:55px; height:55px;">
                                    <i class="fa-solid fa-folder fa-lg text-white"></i>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                
                <div class="col-lg-4 col-md-6 col-sm-12 mb-4">
                    <a href="{{ route('processos.index', ['tipo' => 'preventiva']) }}" class="text-decoration-none">
                        <div class="card py-3 card-hover">
                            <div class="card-body d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="text-secondary mb-0 fw-semibold">Fiscalização Preventiva</h6>
                                    <h2 class="fw-bold mb-0">{{ number_format($preventiva ?? 0, 0, ',', '.') }}</h2>
                                </div>
                                <div class="bg-dark rounded-circle d-flex align-items-center justify-content-center"
                                    style="width:55px; height:55px;">
                                    <i class="fa-solid fa-shield-halved fa-lg text-white"></i>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>

                <div class="col-lg-4 col-md-6 col-sm-12 mb-4">
                    <a href="{{ route('processos.index', ['tipo' => 'sucessiva']) }}" class="text-decoration-none">
                        <div class="card py-3 card-hover">
                            <div class="card-body d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="text-secondary mb-0 fw-semibold">Fiscalização Sucessiva</h6>
                                    <h2 class="fw-bold mb-0">{{ number_format($sucessiva ?? 0, 0, ',', '.') }}</h2>
                                </div>
                                <div class="bg-dark rounded-circle d-flex align-items-center justify-content-center"
                                    style="width:55px; height:55px;">
                                    <i class="fa-solid fa-scale-balanced fa-lg text-white"></i>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>

                <div class="col-lg-4 col-md-6 col-sm-12 mb-4">
                    <a href="{{ route('processos.index', ['tipo' => 'concomitante']) }}" class="text-decoration-none">
                        <div class="card py-3 card-hover">
                            <div class="card-body d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="text-secondary mb-0 fw-semibold">Fiscalização Concomitante</h6>
                                    <h2 class="fw-bold mb-0">{{ number_format($concomitante ?? 0, 0, ',', '.') }}</h2>
                                </div>
                                <div class="bg-dark rounded-circle d-flex align-items-center justify-content-center"
                                    style="width:55px; height:55px;">
                                    <i class="fa-solid fa-eye fa-lg text-white"></i>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>

                <div class="col-lg-4 col-md-6 col-sm-12 mb-4">
                    <a href="{{ route('processos.index', ['tipo' => 'rf15']) }}" class="text-decoration-none">
                        <div class="card py-3 card-hover">
                            <div class="card-body d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="text-secondary mb-0 fw-semibold">RF15</h6>
                                    <h2 class="fw-bold mb-0">{{ number_format($rf15 ?? 0, 0, ',', '.') }}</h2>
                                </div>
                                <div class="bg-dark rounded-circle d-flex align-items-center justify-content-center"
                                    style="width:55px; height:55px;">
                                    <i class="fa-solid fa-file-contract fa-lg text-white"></i>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>

        <div class="col-lg-12">
            <!-- Botões de Ação -->
            <div class="col-lg-12 col-sm-12 d-flex justify-content-lg-end justify-content-start mb-3 gap-2">
                <a class="btn btn-default-outline" href="#" role="button" id="filterToggle">
                    <i class="fa-solid fa-filter fa-lg me-1"></i> Filtrar
                </a>
                <a class="btn btn-default" href="{{ route('processos.create') }}">
                    <i class="fa-solid fa-plus fa-lg me-1"></i> Novo Processo
                </a>
                <a href="{{ route('processos.export-pdf') }}" class="btn btn-default-outline" target="_blank">
                    <i class="fa-solid fa-file-pdf fa-lg me-1"></i> Exportar PDF
                </a>
            </div>

            <!-- Filtros Avançados -->
            <div id="filtersSection" class="alert card mb-4 bg-white alert-dismissible fade {{ $hasActiveFilters ? '' : 'd-none' }}" role="alert">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h4 class="mb-0"><i class="fa-solid fa-filter me-2"></i>Filtros Avançados</h4>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Fechar"></button>
                    </div>

                    <form id="filterForm" method="GET" action="{{ route('processos.index') }}" class="row g-3">
                        <div class="col-md-3">
                            <label class="form-label small text-muted fw-semibold">Número do Processo</label>
                            <input type="text" class="form-control" name="numero" 
                                   placeholder="Ex: 001/2024" 
                                   value="{{ request('numero') }}">
                        </div>
                        
                        <div class="col-md-3">
                            <label class="form-label small text-muted fw-semibold">Ano</label>
                            <select class="form-select" name="ano">
                                <option value="">Todos os anos</option>
                                @for($year = date('Y'); $year >= 2020; $year--)
                                    <option value="{{ $year }}" {{ request('ano') == $year ? 'selected' : '' }}>{{ $year }}</option>
                                @endfor
                            </select>
                        </div>
                        
                        <div class="col-md-3">
                            <label class="form-label small text-muted fw-semibold">Entidade</label>
                            <input type="text" class="form-control" name="entidade" 
                                   placeholder="Nome da entidade" 
                                   value="{{ request('entidade') }}">
                        </div>
                        
                        <div class="col-md-3">
                            <label class="form-label small text-muted fw-semibold">Tipo de Fiscalização</label>
                            <select class="form-select" name="tipo">
                                <option value="">Todos os tipos</option>
                                <option value="preventiva" {{ request('tipo') == 'preventiva' ? 'selected' : '' }}>Preventiva</option>
                                <option value="sucessiva" {{ request('tipo') == 'sucessiva' ? 'selected' : '' }}>Sucessiva</option>
                                <option value="concomitante" {{ request('tipo') == 'concomitante' ? 'selected' : '' }}>Concomitante</option>
                                <option value="rf15" {{ request('tipo') == 'rf15' ? 'selected' : '' }}>RF15</option>
                            </select>
                        </div>
                        
                        <div class="col-md-3">
                            <label class="form-label small text-muted fw-semibold">Data Inicial</label>
                            <input type="date" class="form-control" name="data_inicial" 
                                   value="{{ request('data_inicial') }}">
                        </div>
                        
                        <div class="col-md-3">
                            <label class="form-label small text-muted fw-semibold">Data Final</label>
                            <input type="date" class="form-control" name="data_final" 
                                   value="{{ request('data_final') }}">
                        </div>

                        <div class="col-12">
                            <div class="d-flex justify-content-end gap-2">
                                @if($hasActiveFilters)
                                    <a href="{{ route('processos.index') }}" class="btn btn-outline-danger">
                                        <i class="fa-solid fa-times me-1"></i> Limpar Filtros
                                    </a>
                                @endif
                                <button type="submit" class="btn btn-primary px-4">
                                    <i class="fa-solid fa-search me-1"></i> Aplicar Filtros
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Mensagens -->
            @if(session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    <i class="fa-solid fa-circle-check me-2"></i>
                    {{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endif

            @if(session('error'))
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <i class="fa-solid fa-circle-exclamation me-2"></i>
                    {{ session('error') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endif

            <!-- Tabela de Processos -->
            <div class="card p-4">
                <div class="card-body">
                    @if ($processos->count() == 0)
                        <div class="text-center p-5">
                            <h1 style="font-size: 4rem !important;"><i class="fa-solid fa-folder-open"></i></h1>
                            <h4>Nenhum processo encontrado</h4>
                            <p class="text-muted mb-4">
                                @if($hasActiveFilters)
                                    Nenhum processo corresponde aos filtros aplicados.
                                    <br>
                                    <a href="{{ route('processos.index') }}" class="btn btn-link">Limpar filtros</a>
                                @else
                                    Comece criando um novo processo.
                                @endif
                            </p>
                            @if(!$hasActiveFilters)
                                <a href="{{ route('processos.create') }}" class="btn btn-primary">
                                    <i class="fa-solid fa-plus me-2"></i>Criar Primeiro Processo
                                </a>
                            @endif
                        </div>
                    @else
                        <div class="table-responsive">
                            <table class="table table-hover align-middle">
                                <thead class="table-light">
                                    <tr>
                                        <th scope="col" width="5%">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" id="selectAll">
                                            </div>
                                        </th>
                                        <th scope="col">Número/Ano</th>
                                        <th scope="col">Entidade Principal</th>
                                        <th scope="col">Relator(es)</th>
                                        <th scope="col">Tipo</th>
                                        <th scope="col">Data Entrada</th>
                                        <th scope="col" width="10%">Ações</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($processos as $processo)
                                    <tr class="processo-row" data-processo-id="{{ $processo->id }}">
                                        <td>
                                            <div class="form-check">
                                                <input class="form-check-input select-processo" type="checkbox" 
                                                       value="{{ $processo->id }}">
                                            </div>
                                        </td>
                                        <td>
                                            <div class="d-flex flex-column">
                                                <span class="fw-semibold">
                                                    {{ $processo->numero }}/{{ $processo->ano }}
                                                </span>
                                                <small class="text-muted">ID: {{ $processo->id }}</small>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <div class="bg-primary rounded-circle d-flex align-items-center justify-content-center me-2"
                                                     style="width:32px; height:32px;">
                                                    <i class="fa-solid fa-building text-white small"></i>
                                                </div>
                                                <div>
                                                    <span class="d-block fw-medium">
                                                        {{ $processo->entidades->where('pivot.papel', 'principal')->first()->nome ?? '—' }}
                                                    </span>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="d-flex flex-column">
                                                @php
                                                    $relatorPrincipal = $processo->relatores->where('pivot.papel', 'principal')->first();
                                                    $relatoresAdjuntos = $processo->relatores->where('pivot.papel', 'adjunto');
                                                @endphp
                                                
                                                @if($relatorPrincipal)
                                                    <div class="d-flex align-items-center mb-1">
                                                        <i class="fa-solid fa-user-check text-success me-1 small"></i>
                                                        <span class="fw-medium">{{ $relatorPrincipal->nome }}</span>
                                                        <span class="badge bg-success ms-1" style="font-size: 9px;">Principal</span>
                                                    </div>
                                                @else
                                                    <div class="text-muted small">—</div>
                                                @endif
                                                
                                                @if($relatoresAdjuntos->count() > 0)
                                                    <div class="d-flex flex-wrap gap-1 mt-1">
                                                        <i class="fa-solid fa-users text-info me-1 small"></i>
                                                        @foreach($relatoresAdjuntos as $adjunto)
                                                            <span class="badge bg-info text-dark" style="font-size: 10px;">
                                                                {{ $adjunto->nome }}
                                                            </span>
                                                        @endforeach
                                                    </div>
                                                @endif
                                            </div>
                                        </td>
                                        <td>
                                            @php
                                                $tipoDisplay = str_replace(['Sucessiva-(', ')'], '', $processo->tipo_fiscalizacao);
                                                $tipoClass = match($processo->tipo_fiscalizacao) {
                                                    'Preventiva' => 'bg-primary',
                                                    'Sucessiva-(Multa)' => 'bg-warning text-dark',
                                                    'Sucessiva-(Prestação de Contas)' => 'bg-info text-dark',
                                                    'Sucessiva-(Auditoria)' => 'bg-secondary',
                                                    'Concomitante' => 'bg-dark',
                                                    'RF15' => 'bg-danger',
                                                    default => 'bg-secondary'
                                                };
                                            @endphp
                                            <span class="badge {{ $tipoClass }}">
                                                {{ $tipoDisplay }}
                                            </span>
                                        </td>
                                        <td>
                                            <div class="d-flex flex-column">
                                                <span class="fw-medium">
                                                    {{ \Carbon\Carbon::parse($processo->data_entrada)->format('d/m/Y') }}
                                                </span>
                                                <small class="text-muted">
                                                    {{ \Carbon\Carbon::parse($processo->created_at)->format('H:i') }}
                                                </small>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="dropdown">
                                                <button class="btn btn-sm btn-light" type="button" data-bs-toggle="dropdown">
                                                    <i class="fa-solid fa-ellipsis-vertical"></i>
                                                </button>
                                                <ul class="dropdown-menu">
                                                    <li>
                                                        <a class="dropdown-item" href="{{ route('processos.show', $processo->id) }}">
                                                            <i class="fa-solid fa-eye me-2"></i> Visualizar
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a class="dropdown-item" href="{{ route('processos.edit', $processo->id) }}">
                                                            <i class="fa-solid fa-pen-to-square me-2"></i> Editar
                                                        </a>
                                                    </li>
                                                    <li><hr class="dropdown-divider"></li>
                                                    <li>
                                                        <a class="dropdown-item text-danger" href="#" data-bs-toggle="modal" data-bs-target="#deleteModal{{ $processo->id }}">
                                                            <i class="fa-solid fa-trash me-2"></i> Eliminar
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </td>
                                    </tr>

                                    <!-- Modal Exclusão -->
                                    <div class="modal fade" id="deleteModal{{ $processo->id }}" tabindex="-1" data-bs-backdrop="static">
                                        <div class="modal-dialog modal-dialog-centered">
                                            <div class="modal-content border-0 shadow-lg">
                                                <div class="modal-header bg-danger text-white">
                                                    <i class="fa-solid fa-trash-can me-2"></i>
                                                    <h5 class="modal-title">Confirmar Exclusão</h5>
                                                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                                                </div>
                                                
                                                <form action="{{ route('processos.destroy', $processo->id) }}" method="POST">
                                                    @csrf
                                                    @method('DELETE')
                                                    
                                                    <div class="modal-body text-center py-4">
                                                        <p class="mb-4">Tem certeza que deseja <strong>eliminar</strong> o processo <strong>"{{ $processo->numero }}/{{ $processo->ano }}"</strong>?</p>
                                                        <p class="text-danger">
                                                            <i class="fa-solid fa-triangle-exclamation me-1"></i>
                                                            Esta ação não pode ser desfeita!
                                                        </p>
                                                    </div>
                                                    
                                                    <div class="modal-footer">
                                                        <button type="submit" class="btn btn-danger px-4">
                                                            <i class="fa-solid fa-trash me-1"></i> Sim, excluir
                                                        </button>
                                                        <button type="button" class="btn btn-secondary px-4" data-bs-dismiss="modal">
                                                            <i class="fa-solid fa-xmark me-1"></i> Cancelar
                                                        </button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                        <!-- Paginação -->
                        <div class="d-flex justify-content-between align-items-center mt-4">
                            <div>
                                <span class="text-muted small">
                                    Mostrando {{ $processos->firstItem() }} - {{ $processos->lastItem() }} 
                                    de {{ $processos->total() }} processos
                                </span>
                            </div>
                            <div>
                                {{ $processos->appends(request()->query())->links() }}
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const filterToggle = document.getElementById('filterToggle');
    const filtersSection = document.getElementById('filtersSection');
    const hasActiveFilters = {{ $hasActiveFilters ? 'true' : 'false' }};
    
    // Atualizar texto do botão toggle
    if (filterToggle && filtersSection) {
        if (!filtersSection.classList.contains('d-none')) {
            filterToggle.innerHTML = '<i class="fa-solid fa-filter fa-lg me-1"></i> Ocultar Filtros';
        }
        
        filterToggle.addEventListener('click', function(e) {
            e.preventDefault();
            filtersSection.classList.toggle('d-none');
            
            if (!filtersSection.classList.contains('d-none')) {
                this.innerHTML = '<i class="fa-solid fa-filter fa-lg me-1"></i> Ocultar Filtros';
            } else {
                this.innerHTML = '<i class="fa-solid fa-filter fa-lg me-1"></i> Filtrar';
            }
        });
    }

    // Seleção em lote
    const selectAll = document.getElementById('selectAll');
    
    function updateSelectAll() {
        const checkboxes = document.querySelectorAll('.select-processo');
        const allChecked = checkboxes.length > 0 && Array.from(checkboxes).every(cb => cb.checked);
        if (selectAll) selectAll.checked = allChecked;
    }
    
    if (selectAll) {
        selectAll.addEventListener('change', function() {
            document.querySelectorAll('.select-processo').forEach(cb => cb.checked = this.checked);
        });
    }
    
    document.querySelectorAll('.select-processo').forEach(cb => {
        cb.addEventListener('change', updateSelectAll);
    });

    // Clique na linha
    document.querySelectorAll('.processo-row').forEach(row => {
        row.addEventListener('click', function(e) {
            if (!e.target.closest('input[type="checkbox"]') && 
                !e.target.closest('.dropdown') && 
                !e.target.closest('button') &&
                !e.target.closest('a')) {
                window.location.href = '{{ url("processos") }}/' + this.dataset.processoId;
            }
        });
    });

    // Prevenir propagação
    document.querySelectorAll('.select-processo, .dropdown').forEach(el => {
        el.addEventListener('click', e => e.stopPropagation());
    });
});
</script>

<style>
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

#filtersSection {
    animation: slideDown 0.3s ease;
}

.processo-row {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.processo-row:hover {
    background-color: rgba(13, 110, 253, 0.05);
}

.card-hover {
    transition: all 0.25s ease;
    cursor: pointer;
}

.card-hover:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}

/* Estilo para badges de relatores */
.badge.bg-info {
    background-color: #0dcaf0 !important;
}

.badge.bg-warning {
    background-color: #ffc107 !important;
}
</style>
@endsection