@extends('layouts.pmar.theme')
@section("title", env("APP_NAME") . " :: " . __($pppSummary['title'] ?? 'PPPs e Convênios'))

@section('content')
@php
    $pppSummary = $pppSummary ?? ['metrics' => [], 'highlights' => [], 'chartDistribution' => ['labels' => [], 'values' => []]];
    $chartDistribution = $pppSummary['chartDistribution'] ?? ['labels' => ['PPPs', 'Convênios'], 'values' => [0, 0]];
@endphp
<style>
    .bg-primary { background: linear-gradient(135deg, #0d6efd, #084298); }
    .landing-header {
        color: white;
        padding: 4rem 0;
        margin-bottom: 2rem;
        border-radius: 0 0 50px 50px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.15);
        position: relative;
        overflow: hidden;
    }
    .landing-header.bg-primary::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background: url('https://www.angra.rj.gov.br/uploads/2023/01/20230113110543.jpg') center/cover;
        opacity: 0.08;
        mix-blend-mode: overlay;
    }
    .landing-card {
        border: none;
        border-radius: 20px;
        background: white;
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        box-shadow: 0 10px 25px rgba(0,0,0,0.05);
        height: 100%;
        overflow: hidden;
        text-decoration: none;
        color: inherit;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 3rem 2rem;
        border: 1px solid rgba(0,0,0,0.05);
    }
    .landing-card:hover {
        transform: translateY(-15px);
        box-shadow: 0 20px 40px rgba(0,0,0,0.12);
        color: #004e92;
        border-color: #004e92;
    }
    .icon-circle {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: linear-gradient(135deg, #f0f7ff 0%, #e6f0ff 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 3rem;
        color: #004e92;
        margin-bottom: 2rem;
        transition: all 0.4s ease;
    }
    .landing-card:hover .icon-circle {
        background: linear-gradient(135deg, #004e92 0%, #002b55 100%);
        color: white;
        transform: scale(1.1) rotate(5deg);
    }
    .card-title-custom {
        font-weight: 800;
        font-size: 1.5rem;
        margin-bottom: 1rem;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    .card-text-custom {
        color: #6c757d;
        font-size: 1.1rem;
        line-height: 1.6;
    }
</style>

<div class="landing-header bg-primary text-center position-relative">
    <div class="container position-relative">
        <div class="d-flex align-items-center gap-3 justify-content-center flex-wrap">
            <div class="bg-white text-primary rounded-circle p-3 shadow-sm">
                <i class="{{ $pppSummary['icon'] ?? 'fa-solid fa-handshake' }} fa-2x"></i>
            </div>
            <div>
                <h1 class="h2 mb-0 text-white fw-bold">{{ __($pppSummary['title'] ?? 'PPPs e Convênios') }}</h1>
                <p class="text-white-50 mb-0">{{ __($pppSummary['subtitle'] ?? 'Investimentos e Parcerias') }}</p>
            </div>
        </div>
    </div>
</div>

<div class="container mb-5">
    <div class="row g-2 mb-4">
        @foreach ($pppSummary['metrics'] ?? [] as $metric)
            <div class="col-6 col-md-3">
                <div class="card border-0 bg-light h-100">
                    <div class="card-body text-center p-3">
                        <p class="text-uppercase text-muted fw-bold small mb-1">{{ __($metric['label']) }}</p>
                        <h2 class="h5 fw-bold text-primary mb-0">
                            {{ is_numeric($metric['value']) ? number_format($metric['value'], 0, ',', '.') : $metric['value'] }}
                        </h2>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    <div class="row g-4 align-items-stretch">
        <div class="col-md-6">
            <a href="{{ route('ppps.public.list') }}" class="landing-card">
                <div class="icon-circle">
                    <i class="fa-solid fa-handshake"></i>
                </div>
                <h3 class="card-title-custom">{{ __('Parcerias Público-Privadas') }}</h3>
                <p class="card-text-custom">{{ __('Acompanhe os projetos de concessão e parcerias estratégicas para o desenvolvimento da infraestrutura municipal.') }}</p>
            </a>
        </div>
        <div class="col-md-6">
            <a href="{{ route('convenios.public.list') }}" class="landing-card">
                <div class="icon-circle">
                    <i class="fa-solid fa-file-contract"></i>
                </div>
                <h3 class="card-title-custom">{{ __('Convênios e Repasses') }}</h3>
                <p class="card-text-custom">{{ __('Visualize os convênios federais, estaduais e repasses, garantindo a transparência na aplicação dos recursos.') }}</p>
            </a>
        </div>
    </div>

    @if(!empty($chartDistribution['labels']) && !empty($chartDistribution['values']))
        <div class="row mt-5">
            <div class="col-12 col-lg-6 mx-auto">
                <h6 class="text-muted text-uppercase fw-bold small mb-3 text-center">{{ __('Distribuição da Carteira') }}</h6>
                <div style="height: 220px; position: relative;">
                    <canvas id="chart-ppp-distribution-public"></canvas>
                </div>
                <p class="text-muted small text-center mt-2">{{ __('Visão consolidada dos ativos de parcerias e convênios gerenciados pela prefeitura.') }}</p>
            </div>
        </div>
    @endif
</div>

@if(!empty($chartDistribution['labels']) && !empty($chartDistribution['values']))
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js" crossorigin="anonymous"></script>
<script>
(function() {
    var ctx = document.getElementById('chart-ppp-distribution-public');
    if (!ctx) return;
    var data = @json($chartDistribution);
    new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: data.labels,
            datasets: [{
                data: data.values,
                backgroundColor: ['#0d6efd', '#198754'],
                borderWidth: 0
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { position: 'bottom' }
            }
        }
    });
})();
</script>
@endif
@endsection