@extends('layouts.admin.theme')

@section('title', env('APP_NAME') . ' :: ' . __('PCA - Ficha do Usuário'))

@section('content')
    <div class="card shadow-lg" id="ficha-user-pca">
        @include('components.buttons._headLineButtonsBackAdd', [
            'headLine' => __('Ficha Cadastral'),
            'routeBack' => 'admin.ocorrencias-pca.acompanhamento',
            'routeBackParams' => [],
            'nameBack' => __('Voltar'),
        ])

        <div class="d-flex btn-group flex-wrap justify-content-center mt-4" role="group">
            <button type="button" class="btn btn-outline-primary filter-btn active mx-3 mt-2"
                data-filter="dados-cadastrais">
                {{ __('Dados Cadastrais') }}
            </button>

            <button type="button" class="btn btn-outline-primary filter-btn mx-3 mt-2" data-filter="ocorrencias">
                {{ __('Ocorrências Abertas') }}
            </button>

            <a type="button" class="btn btn-danger mx-3 mt-2"
                href="{{ route('admin.ocorrencias-pca.gerarPdf', $usuario->id) }}" target="_blank">
                <i class="fa-solid fa-file-pdf me-2"></i> {{ __('Baixar PDF') }}
            </a>
        </div>

        <div id="dados-cadastrais" class="filter-section p-4">
            <div class="row">
                <div class="col-md-4 text-center">
                    @php
                        $userImageUrl = asset('pmar/assets/img/profile.jpg');
                        if ($fotoUserUltimoChamado) {
                            $userImage = $fotoUserUltimoChamado->user_image ?? null;
                            if (!empty($userImage) && !filter_var($userImage, FILTER_VALIDATE_URL)) {
                                $userImageUrl = asset($userImage);
                            }
                        }
                    @endphp
                    <div class="mb-4">
                        <img src="{{ $userImageUrl }}" alt="{{ __('Imagem do usuário') }}"
                            class="img-thumbnail rounded-circle"
                            style="width: 400px; height: 500px; object-fit: cover;">
                    </div>
                </div>

                <div class="col-md-8">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h3 class="mb-0">Ficha do Usuário</h3>
                    </div>

                    <div class="card mb-4">
                        <div class="card-header bg-light">
                            <h5 class="mb-0"><i class="fas fa-info-circle me-2"></i>{{ __('Informações Básicas') }}</h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label text-muted small mb-1">{{ __('Nome Completo') }}</label>
                                        <p class="mb-0 fs-5">{{ $usuario->name }}</p>
                                    </div>

                                    <div class="mb-3">
                                        <label class="form-label text-muted small mb-1">{{ __('CPF') }}</label>
                                        <p class="mb-0 fs-5">{{ $usuario->document }}</p>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label text-muted small mb-1">{{ __('E-mail') }}</label>
                                        <p class="mb-0 fs-5">{{ $usuario->email }}</p>
                                    </div>

                                    <div class="mb-3">
                                        <label class="form-label text-muted small mb-1">{{ __('Telefone') }}</label>
                                        <p class="mb-0 fs-5">{{ $usuario->phone ?? __('Não informado') }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-header bg-light">
                            <h5 class="mb-0"><i class="fas fa-calendar-alt me-2"></i>{{ __('Dados do Sistema') }}</h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label text-muted small mb-1">{{ __('Data de Cadastro') }}</label>
                                        <p class="mb-0 fs-5">{{ $usuario->created_at }}</p>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label text-muted small mb-1">{{ __('Última Atualização') }}</label>
                                        <p class="mb-0 fs-5">{{ $usuario->updated_at }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="ocorrencias" class="filter-section p-4" style="display: none;">
            <div class="container">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h4 class="mb-0">{{ __('Ocorrências Registradas') }}</h4>
                    <span class="badge bg-primary">{{ $chamados->count() }} {{ __('registros') }}</span>
                </div>
            </div>

            <div class="table-responsive">
                <table class="table table-hover">
                    <thead class="table-light">
                        <tr>
                            <th>{{ __('ID') }}</th>
                            <th>{{ __('Descrição') }}</th>
                            <th>{{ __('Status') }}</th>
                            <th>{{ __('Órgão') }}</th>
                            <th>{{ __('Criado em') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($chamados as $chamado)
                            <tr>
                                <td class="fw-bold">#{{ $chamado->id }}</td>
                                <td>{{ Str::limit($chamado->description ?? __('Sem descrição'), 100) }}</td>

                                <td>
                                    @php
                                        $status = strtoupper(
                                            data_get($ultimoStatusPorChamado, $chamado->id . '.status', 'SEM STATUS'),
                                        );
                                        $badgeClass = match ($status) {
                                            'ABERTO' => 'badge bg-warning text-dark',
                                            'CONCLUÍDO' => 'badge bg-success',
                                            'REPROVADO' => 'badge bg-danger',
                                            'SENDO AVALIADO' => 'badge bg-primary',
                                            'SEM ÓRGÃO' => 'badge bg-secondary',
                                            default => 'badge bg-light text-muted',
                                        };
                                    @endphp

                                    <span class="{{ $badgeClass }}">{{ $status }}</span>
                                </td>

                                <td>
                                    @php
                                        $statusChamado = data_get($ultimoStatusPorChamado, $chamado->id);
                                        $orgao = $statusChamado->organ_name ?? null;
                                    @endphp

                                    @if ($orgao)
                                        <span class="badge bg-info text-dark">
                                            {{ $orgao }}
                                        </span>
                                    @else
                                        <span class="badge bg-secondary">
                                            {{ __('Sem órgão') }}
                                        </span>
                                    @endif
                                </td>

                                <td>
                                    <span class="badge bg-light text-dark">
                                        <i class="far fa-clock me-1"></i>
                                        {{ $chamado->created_at->format('d/m/Y H:i') }}
                                    </span>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="text-center">{{ __('Nenhuma ocorrência encontrada.') }}</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    @push('after-scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const filterButtons = document.querySelectorAll('.filter-btn');
            const filterSections = document.querySelectorAll('.filter-section');

            filterButtons.forEach(function(button) {
                button.addEventListener('click', function() {
                    const filter = this.getAttribute('data-filter');

                    // Remove active de todos os botões
                    filterButtons.forEach(function(btn) {
                        btn.classList.remove('active');
                    });

                    // Adiciona active ao botão clicado
                    this.classList.add('active');

                    // Esconde todas as seções
                    filterSections.forEach(function(section) {
                        section.style.display = 'none';
                    });

                    // Mostra a seção correspondente
                    const targetSection = document.getElementById(filter);
                    if (targetSection) {
                        targetSection.style.display = 'block';
                    }
                });
            });
        });
    </script>
    @endpush
@endsection