@extends('layouts.opac')

@section('title', 'Welcome to MTU Library Catalog')

@section('breadcrumb-trail')
    <span class="sep">›</span>
    <span>Home</span>
@endsection

@section('styles')
<style>
    /* ---- HOME PAGE SPECIFIC STYLES ---- */
    #home-content { padding: 4px 0; }

    .home-welcome {
        font-family: 'Outfit', sans-serif;
        font-size: 22px;
        font-weight: 700;
        color: var(--navy);
        margin-bottom: 5px;
        letter-spacing: -0.02em;
    }
    .home-sub {
        font-size: 13px;
        color: var(--text-muted);
        margin-bottom: 20px;
    }

    /* Popular search tags */
    .popular-label {
        font-size: 11px;
        font-weight: 700;
        color: var(--text-light);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        margin-bottom: 10px;
    }
    .quick-tags-wrap { margin-bottom: 22px; }
    a.quick-tag, span.quick-tag {
        display: inline-block;
        background: #eef3fc;
        border: 1px solid #d0dcf5;
        border-radius: 20px;
        padding: 4px 13px;
        font-size: 12px;
        color: var(--blue-mid);
        margin: 3px 3px 3px 0;
        cursor: pointer;
        font-weight: 500;
        transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
        text-decoration: none;
    }
    a.quick-tag:hover, span.quick-tag:hover {
        background: var(--blue-mid);
        color: #fff;
        border-color: var(--blue-mid);
        transform: translateY(-1px);
    }

    /* News cards grid */
    .news-cards-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        margin-top: 4px;
    }
    @media (max-width: 680px) {
        .news-cards-grid { grid-template-columns: 1fr; }
    }

    /* Card base */
    .info-card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        padding: 18px 20px;
        box-shadow: var(--shadow-xs);
        transition: box-shadow var(--t-mid), transform var(--t-mid);
        position: relative;
        overflow: hidden;
    }
    .info-card::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 3px;
        border-radius: var(--radius-md) var(--radius-md) 0 0;
    }
    .info-card:hover {
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
    }
    .info-card.blue::before  { background: linear-gradient(90deg, var(--blue-mid), var(--purple)); }
    .info-card.amber::before { background: linear-gradient(90deg, #e8a020, #e05c20); }

    .info-card h3 {
        font-family: 'Outfit', sans-serif;
        font-size: 15px;
        font-weight: 700;
        color: var(--navy);
        margin-bottom: 14px;
        display: flex;
        align-items: center;
        gap: 7px;
    }

    /* News items */
    .news-item {
        padding: 10px 0;
        border-bottom: 1px solid var(--border);
    }
    .news-item:last-child { border-bottom: none; padding-bottom: 0; }
    .news-item:first-child { padding-top: 0; }
    .news-item-title {
        font-weight: 600;
        font-size: 13px;
        color: var(--text);
    }
    .news-item-date {
        font-size: 11px;
        color: var(--text-light);
        margin-left: 5px;
        font-weight: 400;
    }
    .news-item-body {
        font-size: 12.5px;
        color: var(--text-muted);
        margin-top: 4px;
        line-height: 1.55;
    }

    /* New arrivals items */
    .arrival-item {
        display: flex;
        gap: 12px;
        align-items: center;
        padding: 10px 0;
        border-bottom: 1px solid var(--border);
        transition: background var(--t-fast);
    }
    .arrival-item:last-child { border-bottom: none; padding-bottom: 0; }
    .arrival-item:first-child { padding-top: 0; }
    .arrival-cover {
        width: 42px;
        height: 56px;
        object-fit: cover;
        border: 1px solid var(--border);
        border-radius: 4px;
        box-shadow: var(--shadow-xs);
        flex-shrink: 0;
    }
    .arrival-info { flex: 1; min-width: 0; }
    .arrival-title {
        font-weight: 600;
        font-size: 13px;
        color: var(--navy);
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: color var(--t-fast);
    }
    .arrival-title:hover { color: var(--blue-mid); }
    .arrival-meta {
        font-size: 11.5px;
        color: var(--text-light);
        margin-top: 3px;
    }
</style>
@endsection

@section('sidebar')
    <div class="sidebar-section">
        <div class="sidebar-title">Quick Links</div>
        <div class="sidebar-links">
            @forelse($sharedQuickLinks as $link)
                <a href="{{ $link->url }}" target="{{ str_starts_with($link->url, 'http') ? '_blank' : '_self' }}" title="{{ $link->description }}">{{ $link->title }}</a>
            @empty
                <span style="font-size:11.5px; color:#888;">No quick links available</span>
            @endforelse
        </div>
    </div>
    <div class="sidebar-section">
        <div class="sidebar-title">Online Resources</div>
        <div class="sidebar-links">
            @forelse($sharedOnlineResources as $res)
                <a href="{{ $res->url }}" target="{{ str_starts_with($res->url, 'http') ? '_blank' : '_self' }}" title="{{ $res->description }}">{{ $res->title }}</a>
            @empty
                <span style="font-size:11.5px; color:#888;">No e-resources available</span>
            @endforelse
        </div>
    </div>
@endsection

@section('content')
    <div id="home-content">
        @auth
            <div style="background: linear-gradient(135deg, var(--navy) 0%, var(--blue-mid) 100%); color: white; padding: 16px 20px; border-radius: var(--radius-md); margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; box-shadow: var(--shadow-sm); flex-wrap:wrap; gap:12px;">
                <div>
                    <div style="font-family:'Outfit', sans-serif; font-size: 19px; font-weight: 700;">👋 Welcome back, {{ Auth::user()->firstname }} {{ Auth::user()->surname }}!</div>
                    <div style="font-size: 12px; opacity: 0.92; margin-top: 3px;">Card Number: <code>{{ Auth::user()->cardnumber }}</code> | Mountain Top University Library Member</div>
                </div>
                <div style="display: flex; gap: 8px;">
                    <a href="{{ route('opac.account') }}" style="background: #ffd700; color: #1b4880; font-weight: 700; padding: 6px 14px; border-radius: var(--radius-sm); text-decoration: none; font-size: 12px; transition: transform 0.15s ease;">👤 My Account</a>
                </div>
            </div>
        @else
            <div style="display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:15px;">
                <div>
                    <div class="home-welcome">Welcome to Mountain Top University — Library Catalog</div>
                    <p class="home-sub" style="margin-bottom:0;">
                        Search the MTU library collection of books, journals, theses, and digital resources.
                    </p>
                </div>
                <div>
                    <a href="{{ route('opac.login') }}" style="background: var(--blue-mid); color: white; font-weight: 600; padding: 7px 16px; border-radius: var(--radius-sm); text-decoration: none; font-size: 12.5px; display:inline-flex; align-items:center; gap:5px;">🔒 Sign In to Your Account</a>
                </div>
            </div>
        @endauth

        <div class="quick-tags-wrap">
            <div class="popular-label">Popular searches</div>
            <a href="{{ route('opac.search') }}?q=marine+ecology" class="quick-tag">marine ecology</a>
            <a href="{{ route('opac.search') }}?q=Irish+history" class="quick-tag">Irish history</a>
            <a href="{{ route('opac.search') }}?q=engineering" class="quick-tag">engineering</a>
            <a href="{{ route('opac.search') }}?q=business+management" class="quick-tag">business management</a>
            <a href="{{ route('opac.search') }}?q=nursing" class="quick-tag">nursing</a>
            <a href="{{ route('opac.search') }}?q=biodiversity" class="quick-tag">biodiversity</a>
            <a href="{{ route('opac.search') }}?q=data+science" class="quick-tag">data science</a>
        </div>

        <div class="news-cards-grid">

            {{-- Library News Card --}}
            <div class="info-card blue">
                <h3>📢 Library News</h3>
                @foreach($news as $item)
                    <div class="news-item">
                        <div>
                            <span class="news-item-title">{{ $item->title }}</span>
                            <span class="news-item-date">({{ $item->published_date }})</span>
                        </div>
                        <p class="news-item-body">{{ $item->content }}</p>
                    </div>
                @endforeach
            </div>

            {{-- New Arrivals Card --}}
            <div class="info-card amber">
                <h3>📚 New Arrivals</h3>
                @foreach($newArrivals as $book)
                    <div class="arrival-item">
                        <img src="/images/book{{ (($book->id - 1) % 5) + 1 }}.png"
                             alt="{{ $book->title }} cover"
                             class="arrival-cover"
                             onerror="this.style.display='none'">
                        <div class="arrival-info">
                            <a href="{{ route('opac.detail', $book->id) }}" class="arrival-title">{{ $book->title }}</a>
                            <div class="arrival-meta">{{ $book->publisher }}{{ $book->pub_year ? ', ' . $book->pub_year : '' }}</div>
                        </div>
                    </div>
                @endforeach
            </div>

        </div>
    </div>
@endsection