@extends('layouts.opac')

@section('title', 'Your Account Summary › Mountain Top University Library Catalog')

@section('breadcrumb-trail')
    <span class="sep">›</span>
    <a href="{{ route('opac.home') }}">Home</a>
    <span class="sep">›</span>
    <span>Account Summary</span>
@endsection

@section('sidebar')
    <div class="sidebar-section">
        <div class="sidebar-title">My Account Menu</div>
        <div class="sidebar-links">
            <a href="{{ route('opac.account') }}" style="font-weight: bold; color: var(--blue);">📊 Summary / Checkouts</a>
            <a href="{{ route('opac.holds') }}">📋 My Holds ({{ $holdsCount ?? 0 }})</a>
            <a href="{{ route('opac.history') }}">📖 Reading History ({{ $historyCount ?? 0 }})</a>
            <a href="{{ route('opac.fines') }}">💳 Fines and Charges</a>
            <a href="{{ route('opac.account.password') }}">🔑 Change Password</a>
        </div>
    </div>
@endsection

@section('content')
    <div style="width: 100%;">
        @if(session('success'))
            <div style="background:#d4edda; color:#155724; border:1px solid #c3e6cb; padding:12px; margin-bottom:16px; border-radius:4px; font-size:13px; font-weight:bold;">
                {{ session('success') }}
            </div>
        @endif

        {{-- Top Header & Quick Profile Info --}}
        <div style="background:#fff; border:1px solid var(--border); border-radius:var(--radius-md); padding:18px; margin-bottom:20px; box-shadow:var(--shadow-xs);">
            <div style="display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:16px; border-bottom:1px solid var(--border); padding-bottom:14px; margin-bottom:14px;">
                <div style="display:flex; gap:16px; align-items:center;">
                    <div style="width:68px; height:68px; border-radius:50%; overflow:hidden; border:2px solid #cbd5e1; flex-shrink:0; background:#f8fafc; box-shadow:0 1px 3px rgba(0,0,0,0.08);">
                        @php
                            $opacPassport = (!empty($patron->passport) && file_exists(public_path($patron->passport)))
                                ? asset($patron->passport)
                                : asset('images/default-avatar.svg');
                        @endphp
                        <img src="{{ $opacPassport }}" alt="{{ $patron->firstname }} {{ $patron->surname }}" style="width:100%; height:100%; object-fit:cover;">
                    </div>
                    <div>
                        <h2 style="font-family:'Outfit', sans-serif; font-size:18px; color:var(--navy); margin:0 0 4px 0;">
                            {{ $patron->firstname }} {{ $patron->surname }}
                        </h2>
                        <div style="font-size:12.5px; color:var(--text-muted);">
                            Card Number: <code>{{ $patron->cardnumber }}</code> | Username: <code>{{ $patron->username ?? 'N/A' }}</code>
                        </div>
                    </div>
                </div>
                <div style="display:flex; gap:8px;">
                    <a href="{{ route('opac.account.password') }}" class="form-btn" style="padding:6px 12px; font-size:12px; text-decoration:none; background:#eef3fc; color:var(--blue-mid); border:1px solid #d0dcf5;">🔑 Change Password</a>
                </div>
            </div>

            <div style="display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap:12px; font-size:12.5px;">
                <div><strong>Category:</strong> {{ $patron->category_name ?? 'Standard Patron' }}</div>
                <div><strong>Home Library:</strong> {{ $patron->library_name ?? 'Main Library' }}</div>
                <div><strong>Email:</strong> {{ $patron->email ?? 'N/A' }}</div>
                <div>
                    <strong>Account Status:</strong> 
                    @if(!empty($patron->expiry_date) && \Carbon\Carbon::parse($patron->expiry_date)->startOfDay()->isPast())
                        <span style="color:#dc3545; font-weight:bold;">⚠️ Expired on {{ \Carbon\Carbon::parse($patron->expiry_date)->format('d/m/Y') }}</span>
                    @else
                        <span style="color:#28a745; font-weight:bold;">✓ Active (Expires {{ !empty($patron->expiry_date) ? \Carbon\Carbon::parse($patron->expiry_date)->format('d/m/Y') : 'N/A' }})</span>
                    @endif
                </div>
            </div>
        </div>

        {{-- Quick Account Stats Widgets --}}
        <div style="display:grid; grid-template-columns: 1fr 1fr 1fr; gap:16px; margin-bottom:20px;">
            <div style="background:#eef7ff; border:1px solid #cce5ff; border-radius:var(--radius-sm); padding:14px; text-align:center;">
                <div style="font-size:22px; font-weight:700; color:#004085;">{{ count($checkouts) }}</div>
                <div style="font-size:12px; color:#004085; font-weight:600;">📚 Active Checkouts</div>
            </div>
            <a href="{{ route('opac.holds') }}" style="background:#fff8e6; border:1px solid #ffeeba; border-radius:var(--radius-sm); padding:14px; text-align:center; text-decoration:none;">
                <div style="font-size:22px; font-weight:700; color:#856404;">{{ $holdsCount ?? 0 }}</div>
                <div style="font-size:12px; color:#856404; font-weight:600;">📋 Pending Holds</div>
            </a>
            <a href="{{ route('opac.history') }}" style="background:#f4f8fa; border:1px solid #d6e9f8; border-radius:var(--radius-sm); padding:14px; text-align:center; text-decoration:none;">
                <div style="font-size:22px; font-weight:700; color:#1b4880;">{{ $historyCount ?? 0 }}</div>
                <div style="font-size:12px; color:#1b4880; font-weight:600;">📖 Reading History</div>
            </a>
        </div>

        {{-- Active Checkouts Table --}}
        <div class="checkout-panel">
            <h3 style="color:#1b4880; font-size:15px; margin-bottom:12px;">📚 Current Checked Out Items ({{ count($checkouts) }})</h3>
            
            @if(count($checkouts) > 0)
                <table class="items-table">
                    <thead>
                        <tr>
                            <th>Book Title & Author</th>
                            <th>Barcode</th>
                            <th>Call Number</th>
                            <th>Due Date</th>
                            <th>Loan Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($checkouts as $checkout)
                            @php
                                $isOverdue = !empty($checkout->date_due) && \Carbon\Carbon::parse($checkout->date_due)->startOfDay()->isPast();
                            @endphp
                            <tr>
                                <td>
                                    <strong>{{ $checkout->title }}</strong>
                                    <div style="font-size:11.5px; color:#666;">by {{ $checkout->author }}</div>
                                </td>
                                <td><code>{{ $checkout->barcode }}</code></td>
                                <td><code>{{ $checkout->call_number ?? 'N/A' }}</code></td>
                                <td style="font-weight:bold; color: {{ $isOverdue ? '#dc3545' : '#333' }};">
                                    {{ !empty($checkout->date_due) ? \Carbon\Carbon::parse($checkout->date_due)->format('d/m/Y') : 'N/A' }}
                                </td>
                                <td>
                                    @if($isOverdue)
                                        <span class="overdue-tag">⚠️ Overdue</span>
                                    @else
                                        <span class="status-ok">✓ Active Loan</span>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            @else
                <div style="padding: 24px; background: #f9f9f9; border: 1px dashed #ccc; text-align: center; color: #777; font-size: 13px; border-radius:4px;">
                    📚 You currently have no checked out items. Browse the <a href="{{ route('opac.search') }}" style="color:var(--blue-mid); font-weight:bold;">Library Catalog</a> to borrow books!
                </div>
            @endif
        </div>
    </div>
@endsection