@extends('layouts.staff')

@section('title', '⚙️ Lopac Administration › Staff Client')

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

@section('content')
<div style="width: 100%; display: flex; flex-direction: column;">
    <div style="background: #fff; border: 1px solid #d0d0d0; padding: 20px; border-radius: 3px;">
        <h2 style="margin: 0 0 15px 0; color: #1b4880; font-size: 18px; border-bottom: 2px solid #1b4880; padding-bottom: 8px;">
            ⚙️ Lopac Administration Hub
        </h2>
        
        <p style="font-size: 13px; color: #555; margin-bottom: 20px;">
            Manage branch definitions, item classification tags, patron category matrices, OPAC portal links, e-resources, news, and system-wide circulation policies.
        </p>

        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px;">
            <!-- Column 1: Basic Parameters -->
            <div style="border: 1px solid #ddd; border-radius: 3px; padding: 15px; background: #fafafa;">
                <h4 style="margin: 0 0 10px 0; color: #1b4880; font-size: 14px; border-bottom: 1px solid #ddd; padding-bottom: 4px;">🏢 Basic Parameters</h4>
                <ul style="list-style: none; padding: 0; margin: 0; line-height: 1.8;">
                    <li><a href="{{ route('staff.admin.libraries') }}" style="font-weight: bold; color: #1b4880;">Libraries and Branches</a></li>
                    <li><a href="{{ route('staff.admin.item-types') }}" style="font-weight: bold; color: #1b4880;">Item Types</a></li>
                </ul>
            </div>

            <!-- Column 2: Patrons and Circulation -->
            <div style="border: 1px solid #ddd; border-radius: 3px; padding: 15px; background: #fafafa;">
                <h4 style="margin: 0 0 10px 0; color: #1b4880; font-size: 14px; border-bottom: 1px solid #ddd; padding-bottom: 4px;">👥 Patrons and Circulation</h4>
                <ul style="list-style: none; padding: 0; margin: 0; line-height: 1.8;">
                    <li><a href="{{ route('staff.admin.patron-categories') }}" style="font-weight: bold; color: #1b4880;">Patron Categories</a></li>
                    <li><a href="{{ route('staff.admin.circ-rules') }}" style="font-weight: bold; color: #1b4880;">Circulation and Fine Rules Matrix</a></li>
                </ul>
            </div>

            <!-- Column 3: OPAC Content & E-Resources -->
            <div style="border: 1px solid #ddd; border-radius: 3px; padding: 15px; background: #f0f7ff;">
                <h4 style="margin: 0 0 10px 0; color: #1b4880; font-size: 14px; border-bottom: 1px solid #ddd; padding-bottom: 4px;">🌐 OPAC Content & E-Resources</h4>
                <ul style="list-style: none; padding: 0; margin: 0; line-height: 1.8;">
                    <li><a href="{{ route('staff.admin.links') }}" style="font-weight: bold; color: #1b4880;">🔗 Quick Links & E-Resources Manager</a></li>
                    <li><a href="{{ route('staff.admin.news') }}" style="font-weight: bold; color: #1b4880;">📢 Library News & Announcements Manager</a></li>
                </ul>
            </div>

            <!-- Column 4: Catalog and System Preferences -->
            <div style="border: 1px solid #ddd; border-radius: 3px; padding: 15px; background: #fafafa;">
                <h4 style="margin: 0 0 10px 0; color: #1b4880; font-size: 14px; border-bottom: 1px solid #ddd; padding-bottom: 4px;">⚙️ Global System Settings</h4>
                <ul style="list-style: none; padding: 0; margin: 0; line-height: 1.8;">
                    <li><a href="{{ route('staff.admin.preferences') }}" style="font-weight: bold; color: #1b4880;">Global System Preferences</a></li>
                    <li><a href="{{ route('staff.admin.marc-frameworks') }}" style="font-weight: bold; color: #1b4880;">MARC Bibliographic Frameworks</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
@endsection