@extends('layouts.pmar.theme')
@section("title", env("APP_NAME") . " :: " . __('Convênios e Repasses'))

@section('content')
    @php
        $convenioItems = $convenioItems ?? [];
    @endphp
    <style>
        .bg-primary {
            background: linear-gradient(135deg, #0d6efd, #084298);
        }

        .landing-header {
            color: white;
            padding: 3rem 0 2.5rem 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;
        }

        .ppp-card {
            transition: all 0.3s ease;
            border-radius: 18px;
            border: none;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
            height: 100%;
        }

        .ppp-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 1.5rem 2rem rgba(0, 0, 0, 0.15);
        }

        .btn-voltar-ppp {
            background-color: #fff;
            border: 1px solid #dee2e6;
            transition: 0.2s;
        }

        .btn-voltar-ppp:hover {
            background-color: #f8f9fa;
        }
    </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 mb-3">
                <div class="bg-white text-primary rounded-circle p-3 shadow-sm">
                    <i class="fa-solid fa-file-contract fa-2x"></i>
                </div>
                <div>
                    <h1 class="h2 mb-0 text-white fw-bold">{{ __('Convênios e Repasses') }}</h1>
                    <p class="text-white-50 mb-0">{{ __('Carteira de convênios e repasses') }}</p>
                </div>
            </div>

            <div class="col-2 mx-auto">
                <a href="{{ route('pppseconvenios') }}" class="btn btn-outline-light btn-sm rounded-pill px-4">
                    <i class="fa-solid fa-arrow-left me-2"></i>{{ __('Voltar ao Início') }}
                </a>
            </div>
        </div>
    </div>

    <div class="container mb-5">
        <div class="row g-4">
            @forelse($convenioItems as $item)
                <div class="col-md-6 col-lg-4">
                    <div class="card ppp-card border-0 shadow-lg h-100">
                        @php
                            $porcentagem_conclusao = (int) ($item['details']['Porcentagem'] ?? 0);
                            if ($porcentagem_conclusao < 40) {
                                $progressColor = 'bg-danger';
                            } elseif ($porcentagem_conclusao < 70) {
                                $progressColor = 'bg-warning';
                            } else {
                                $progressColor = 'bg-success';
                            }
                            $status = $item['details']['Status / Plataforma'] ?? 'N/A';
                            if (str_contains(strtolower($status ?? ''), 'execução') || str_contains(strtolower($status ?? ''), 'andamento')) {
                                $statusColor = 'bg-primary';
                            } elseif (str_contains(strtolower($status ?? ''), 'conclu')) {
                                $statusColor = 'bg-success';
                            } elseif (str_contains(strtolower($status ?? ''), 'cancel')) {
                                $statusColor = 'bg-danger';
                            } else {
                                $statusColor = 'bg-secondary';
                            }
                        @endphp
                        <div class="card-body d-flex flex-column">
                            <div class="d-flex justify-content-between align-items-start mb-3">
                                <span class="badge {{ $statusColor }} px-3 py-2 rounded-pill shadow-sm">{{ $status }}</span>
                                <small class="text-muted text-end">
                                    <i class="fa-regular fa-calendar me-1"></i>{{ $item['details']['Data'] ?? __('Data n/d') }}
                                </small>
                            </div>
                            <h5 class="fw-bold text-dark mb-3" style="min-height: 3rem;">
                                {{ \Illuminate\Support\Str::limit($item['title'] ?? '', 60) }}</h5>
                            <hr class="opacity-25">
                            <div class="mb-2">
                                <div class="small text-uppercase text-muted fw-semibold">{{ __('Executor / Ordenador') }}</div>
                                <div class="fw-medium text-truncate">{{ $item['details']['Executor / Ordenador'] ?? '–' }}</div>
                            </div>
                            <div class="mb-2">
                                <div class="small text-uppercase text-muted fw-semibold">{{ __('Concedente') }}</div>
                                <div class="fw-medium text-truncate">{{ $item['details']['Concedente'] ?? '–' }}</div>
                            </div>
                            <div class="row mb-3">
                                <div class="col-6">
                                    <div class="small text-uppercase text-muted fw-semibold">{{ __('Valor Global') }}</div>
                                    <div class="fw-bold text-success fs-6 text-truncate">
                                        {{ $item['details']['Valor Global'] ?? '–' }}</div>
                                </div>
                                <div class="col-6">
                                    <div class="small text-uppercase text-muted fw-semibold">{{ __('Repasse') }}</div>
                                    <div class="fw-medium text-truncate">{{ $item['details']['Repasse'] ?? '–' }}</div>
                                </div>
                            </div>
                            <div class="mt-auto">
                                <div class="d-flex justify-content-between small mb-1">
                                    <span class="fw-semibold text-muted">{{ __('Conclusão do Projeto') }}</span>
                                    <span class="fw-bold">{{ $porcentagem_conclusao }}%</span>
                                </div>
                                <div class="progress rounded-pill shadow-sm" style="height: 12px;">
                                    <div class="progress-bar {{ $progressColor }} rounded-pill" role="progressbar"
                                        style="width: {{ $porcentagem_conclusao }}%"
                                        aria-valuenow="{{ $porcentagem_conclusao }}" aria-valuemin="0" aria-valuemax="100">
                                    </div>
                                </div>
                            </div>
                            <div class="mt-4">
                                <a href="{{ route('convenios.public.show', $item['id']) }}"
                                    class="btn btn-outline-primary btn-sm w-100 rounded-pill shadow-sm">
                                    {{ __('Ver Detalhes') }} <i class="fa-solid fa-arrow-right ms-2"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            @empty
                <div class="col-12 text-center py-5">
                    <div class="text-muted">
                        <i class="fa-solid fa-file-circle-xmark fa-3x mb-3 text-secondary"></i>
                        <h4>{{ __('Nenhum convênio encontrado.') }}</h4>
                    </div>
                </div>
            @endforelse
        </div>
    </div>
@endsection