@extends('layouts.app')

@section('dashboard-title')
<h3 style="margin-top:17px;font-size:26px;">MONITORING AND EVALUATION</h3>
@endsection

@section('content')

<style>
    .me-wrapper {
        max-width: 960px;
        margin: 36px auto;
        padding: 0 24px;
    }

    .me-section-heading {
        font-size: 28px;
        font-weight: 900;
        color: #FFDE00;
        margin-bottom: 4px;
    }

    .me-divider {
        border: none;
        border-top: 2px solid #222;
        margin-bottom: 16px;
    }

    .me-report-list {
        display: flex;
        flex-direction: column;
    }

    .me-report-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 18px 0;
        border-bottom: 1px solid #e0e0e0;
    }

    .me-report-item:last-child {
        border-bottom: none;
    }

    .me-report-name {
        font-size: 24px;
        font-weight: 700;
        color: #27AD52;
        text-decoration: none;
    }

    .me-pdf-btn {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        background: #27AD52;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: background 0.2s, transform 0.15s;
        text-decoration: none;
    }

    .me-pdf-btn:hover {
        background: #1a7a38;
        transform: scale(1.07);
    }

    .me-pdf-btn svg {
        width: 22px;
        height: 22px;
        fill: #fff;
    }
</style>

@php
$pdfIcon = '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm-1 1.5L18.5 9H13V3.5zM6 20V4h5v7h7v9H6z" />
    <path d="M8 13h8v1.5H8zm0 3h5v1.5H8z" />
</svg>';
@endphp

<div class="me-wrapper">

    {{-- ==================== REPORTS ==================== --}}
    <div class="me-section-heading">REPORTS</div>
    <hr class="me-divider">

    <div class="me-report-list">

        <div class="me-report-item">
            <span class="me-report-name">D-1. Inception Report of the Project</span>
            <a href="#" class="me-pdf-btn" title="Download PDF" target="_blank">{!! $pdfIcon !!}</a>
        </div>




    </div>

    {{-- ==================== MONITORING REPORTS ==================== --}}
    <div class="me-section-heading" style="margin-top: 40px;">MONITORING REPORTS</div>
    <hr class="me-divider">

    <div class="me-report-list">

        <div class="me-report-item">
            <span class="me-report-name">Q-01. Quarter Progress Report</span>
            <a href="#" class="me-pdf-btn" title="Download PDF" target="_blank">{!! $pdfIcon !!}</a>
        </div>



        <div class="me-section-heading" style="margin-top: 40px;">MONITORING TOOLS</div>
        <hr class="me-divider">

        <div class="me-report-list">

            <div class="me-report-item">
                <span class="me-report-name">Annex-A1. Rehabilitation of Irrigation and Flood Control Infrastructure</span>
                <a href="#" class="me-pdf-btn" title="Download PDF" target="_blank">{!! $pdfIcon !!}</a>
            </div>



            {{--
            ================================================
            YAHAN APNE MONITORING REPORTS ADD KAREIN
            Neeche wala example copy karke use karein:

            <div class="me-report-item">
                <span class="me-report-name">M-1. Aapki Report Ka Naam</span>
                <a href="{{ asset('reports/file-name.pdf') }}" class="me-pdf-btn" title="Download PDF" target="_blank">{!! $pdfIcon !!}</a>
        </div>
        ================================================
        --}}

    </div>

</div>

@endsection