@extends('layouts.site')

@section('content')
    @include('frontend.common.breadcrumb')

<div class="container py-5">
    {{-- <h2 class="fw-bold mb-4">{{ $pageTitle }}</h2> --}}

    <div class="row g-4">
        @forelse($reports as $report)
        <div class="col-lg-6">
            <div class="card report-horizontal-card">
                <div class="row g-0">
                    <div class="col-md-4">
                        <img
                            src="{{ $report->image
                                ? asset('storage/' . $report->image)
                                // ? asset($report->image)
                                : 'https://images.unsplash.com/photo-1517048676732-d65bc937f952?w=500' }}"
                            class="h-100 w-100 object-fit-cover"
                            alt="{{ $report->title }}"
                        >
                    </div>
                    <div class="col-md-8">
                        <div class="card-body d-flex flex-column h-100">
                            <h4 class="fw-bold">{{ $report->title }}</h4>
                            <p class="text-muted">{{ $report->short_description }}</p>
                            <div class="mt-auto pt-3 border-top d-flex justify-content-between align-items-center">
                                <span class="small text-muted">
                                    <i class="bi bi-clock me-1"></i>
                                    {{ $report->created_at->diffForHumans() }}
                                </span>
                                <a
                                    href="{{ asset('storage/' . $report->pdf_path) }}"
                                    {{-- href="{{ asset($report->pdf_path) }}" --}}
                                    target="_blank"
                                    class="btn btn-outline-danger btn-sm rounded-pill px-4"
                                >
                                    <i class="bi bi-file-earmark-pdf"></i> PDF View
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @empty
        <div class="col-12">
            <p class="text-muted text-center">No reports found.</p>
        </div>
        @endforelse
    </div>
</div>

@endsection

@push('styles')

    <style>
        :root {
            --brand-green: #27ae60;
            --brand-yellow: #f1c40f;
            --light-gray: #f8f9fa;
        }

        body {
            background-color: #f1f3f5;
            font-family: 'Segoe UI', sans-serif;
        }

        /* 1. Magazine Style Cover Card */
        .report-magazine-card {
            border: none;
            border-radius: 15px;
            overflow: hidden;
            transition: 0.4s ease;
            background: #fff;
        }

        .report-magazine-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }

        .report-magazine-card .cover-wrapper {
            position: relative;
            height: 250px;
            overflow: hidden;
        }

        .report-magazine-card .cover-wrapper img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .pdf-badge {
            position: absolute;
            top: 15px;
            right: 15px;
            background: rgba(220, 53, 69, 0.9);
            color: white;
            padding: 5px 12px;
            border-radius: 5px;
            font-weight: bold;
            font-size: 0.8rem;
        }

        /* 2. Horizontal Book Style */
        .report-horizontal-card {
            border: none;
            border-radius: 12px;
            background: #fff;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            transition: 0.3s;
        }

        .report-horizontal-card:hover {
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }

        .report-horizontal-card img {
            width: 100%;
            height: 180px;
            object-fit: cover;
            border-radius: 12px 0 0 12px;
        }

        /* 3. Minimalist Overlay Style */
        .report-overlay-card {
            border: none;
            border-radius: 20px;
            position: relative;
            height: 300px;
            overflow: hidden;
            color: white;
        }

        .report-overlay-card .card-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .report-overlay-card .overlay-content {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 25px;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
        }

        /* 4. Elegant Bordered Card */
        .report-bordered-card {
            border: 2px solid #eee;
            border-radius: 10px;
            background: #fff;
            transition: 0.3s;
        }

        .report-bordered-card:hover {
            border-color: var(--brand-green);
        }

        .img-frame {
            padding: 10px;
        }

        .img-frame img {
            border-radius: 8px;
            width: 100%;
            height: 200px;
            object-fit: cover;
        }

        .btn-pdf {
            background-color: var(--brand-green);
            color: white;
            border-radius: 50px;
            font-weight: 600;
            padding: 8px 20px;
        }

        .btn-pdf:hover {
            background-color: #219150;
            color: white;
        }
    </style>
@endpush