@extends('layouts.master')

@section('title', 'Matter Reports')

@section('content')
<style>
    @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=DM+Sans:wght@300;400;500;600;700&display=swap');

    :root {
        --ink: #0f1f2e;
        --ink-soft: #4a5a6a;
        --cream: #f0f8ff;
        --sky: #38bdf8;
        --sky-dark: #0ea5e9;
        --sky-deeper: #0369a1;
        --border: #bae6fd;
        --shadow: 0 2px 16px rgba(14,60,100,0.08);
        --shadow-lg: 0 8px 40px rgba(14,60,100,0.14);
    }

    body { background: var(--cream); font-family: 'DM Sans', sans-serif; color: var(--ink); }

    .wrap {
        min-height: 100vh;
        padding: 2rem 1.5rem;
        background: radial-gradient(700px 220px at 10% 0%, rgba(56,189,248,.22), transparent 60%),
                    radial-gradient(900px 320px at 90% 0%, rgba(14,165,233,.14), transparent 55%),
                    linear-gradient(180deg, #f8fbff, #eef7ff);
    }

    .hdr {
        max-width: 1200px;
        margin: 0 auto 1.8rem;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
    }

    .hdr h1 {
        font-family: 'Playfair Display', serif;
        font-size: 2.1rem;
        margin: 0;
        letter-spacing: -0.02em;
    }
    .hdr p { margin: 0.25rem 0 0; color: var(--ink-soft); }

    .btn-back {
        text-decoration: none;
        color: var(--sky-deeper);
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 14px;
        border-radius: 10px;
        border: 1px solid var(--border);
        background: #fff;
        box-shadow: var(--shadow);
        transition: 0.2s ease;
    }
    .btn-back:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); text-decoration: none; }

    .grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1.25rem;
        max-width: 1200px;
        margin: 0 auto;
    }

    .card {
        background: #fff;
        border-radius: 14px;
        border: 1px solid var(--border);
        box-shadow: var(--shadow);
        overflow: hidden;
        transition: 0.22s ease;
        text-decoration: none;
        color: inherit;
        display: block;
    }
    .card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(14,165,233,0.55); text-decoration: none; }
    .bar { height: 8px; background: linear-gradient(90deg, var(--sky), var(--sky-dark)); }
    .body { padding: 1.35rem; }
    .top { display:flex; justify-content: space-between; gap: 10px; margin-bottom: .85rem; }
    .icon {
        width: 46px; height: 46px; border-radius: 12px;
        display:flex; align-items:center; justify-content:center;
        background: linear-gradient(135deg, var(--sky-dark), var(--sky-deeper));
        color:#fff;
        box-shadow: 0 6px 20px rgba(14,165,233,0.25);
        flex: 0 0 auto;
    }
    .icon i { font-size: 1.25rem; }
    .arrow { width: 22px; height: 22px; fill: var(--sky-deeper); margin-top: 4px; }
    .title { font-weight: 900; margin: 0 0 .4rem; font-size: 1.05rem; letter-spacing: -.01em; }
    .desc { margin: 0; color: var(--ink-soft); font-size: .9rem; line-height: 1.6; }
</style>

<div class="wrap">
    <div class="hdr">
        <div>
            <h1>Matter Reports</h1>
            <p>Matter-centric reporting (Cases are shown as a subset of a Matter).</p>
        </div>
        <a href="{{ route('modules.reports') }}" class="btn-back">
            <i class="fas fa-arrow-left"></i> Back to Reports
        </a>
    </div>

    <div class="grid">
        <a href="{{ route('modules.reports.matters') }}" class="card" aria-label="Matter Status Report">
            <div class="bar"></div>
            <div class="body">
                <div class="top">
                    <div class="icon"><i class="fas fa-layer-group"></i></div>
                    <svg class="arrow" viewBox="0 0 24 24"><path d="M9 6L15 12L9 18"></path></svg>
                </div>
                <div class="title">Matter Status</div>
                <p class="desc">Overview of all matters by status, type, client, and lawyer.</p>
            </div>
        </a>

        <a href="{{ route('modules.reports.matter-detail') }}" class="card" aria-label="Matter Detail Report">
            <div class="bar"></div>
            <div class="body">
                <div class="top">
                    <div class="icon"><i class="fas fa-clipboard-list"></i></div>
                    <svg class="arrow" viewBox="0 0 24 24"><path d="M9 6L15 12L9 18"></path></svg>
                </div>
                <div class="title">Matter Detail</div>
                <p class="desc">Select a matter and generate a printable detail statement (clients, lawyers, cases, and financials).</p>
            </div>
        </a>

        <a href="{{ route('modules.reports.case-status') }}" class="card" aria-label="Matter Case Status Report">
            <div class="bar"></div>
            <div class="body">
                <div class="top">
                    <div class="icon"><i class="fas fa-gavel"></i></div>
                    <svg class="arrow" viewBox="0 0 24 24"><path d="M9 6L15 12L9 18"></path></svg>
                </div>
                <div class="title">Matter Case Status</div>
                <p class="desc">Case status reporting with Matter filtering (Cases are treated as part of the Matter).</p>
            </div>
        </a>

        <a href="{{ route('modules.reports.lawyer-statement') }}" class="card" aria-label="Lawyer Statement Report">
            <div class="bar"></div>
            <div class="body">
                <div class="top">
                    <div class="icon"><i class="fas fa-user-tie"></i></div>
                    <svg class="arrow" viewBox="0 0 24 24"><path d="M9 6L15 12L9 18"></path></svg>
                </div>
                <div class="title">Lawyer Statement</div>
                <p class="desc">Matter-based portfolio and fees generated per lawyer (derived from Matter assignments + invoices).</p>
            </div>
        </a>
    </div>
</div>
@endsection