@extends('layouts.opac')

@section('title')
    {{ $biblio->title }} › Mountain Top University Library Catalog
@endsection

@section('breadcrumb-trail')
    <span class="sep">›</span>
    <a href="{{ route('opac.home') }}">Home</a>
    <span class="sep">›</span>
    <a href="{{ route('opac.search') }}">Catalog Search</a>
    <span class="sep">›</span>
    <span>{{ $biblio->title }}</span>
@endsection

@section('sidebar')
    <div class="sidebar-section">
        <div class="sidebar-title">ACTIONS</div>
        <div class="sidebar-links">
            <form action="{{ route('opac.hold.place', $biblio->id) }}" method="POST" id="hold-form">
                @csrf
                <a href="#" onclick="document.getElementById('hold-form').submit(); return false;">› Place Hold</a>
            </form>
            <a href="#" onclick="addToCart({{ $biblio->id }}, '{{ addslashes($biblio->title) }}'); return false;">› Add to Cart</a>
            <form action="{{ route('opac.list.add', $biblio->id) }}" method="POST" id="list-form">
                @csrf
                <a href="#" onclick="document.getElementById('list-form').submit(); return false;">› Add to List</a>
            </form>
            <a href="{{ route('opac.search') }}" onclick="if(document.referrer && document.referrer.includes('/opac/search')) { history.back(); return false; }">› ← Back to Results</a>
        </div>
    </div>
@endsection

@section('content')
    @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
    @if(session('info'))
        <div style="background:#d1ecf1; color:#0c5460; border:1px solid #bee5eb; padding:12px; margin-bottom:16px; border-radius:4px; font-size:13px;">
            {{ session('info') }}
        </div>
    @endif

    <div class="checkout-panel" style="display: flex; gap: 20px; align-items: flex-start; padding: 20px;">
        <div class="result-cover" style="width: 120px; flex-shrink: 0;">
            <img src="/images/book{{ (($biblio->id - 1) % 5) + 1 }}.png" alt="Book Cover" style="width: 120px; height: auto; border: 1px solid #ccc; box-shadow: 1px 1px 4px rgba(0,0,0,0.15);">
        </div>
        <div style="flex: 1;">
            <h2 style="font-size: 18px; color: #1b4880; margin-bottom: 8px;">{{ $biblio->title }}</h2>
            <div style="font-size: 13px; margin-bottom: 12px;">by <strong>{{ $biblio->author }}</strong></div>
            
            <table class="items-table" style="margin-bottom: 16px;">
                <tr>
                    <td style="width: 130px; font-weight: bold; background: #e8eef5;">Call Number:</td>
                    <td><code>{{ $biblio->call_number ?? 'N/A' }}</code></td>
                </tr>
                <tr>
                    <td style="font-weight: bold; background: #e8eef5;">Publisher:</td>
                    <td>{{ $biblio->publisher ?? 'N/A' }}, {{ $biblio->pub_year ?? '' }}</td>
                </tr>
                <tr>
                    <td style="font-weight: bold; background: #e8eef5;">ISBN:</td>
                    <td>{{ $biblio->isbn ?? 'N/A' }}</td>
                </tr>
                <tr>
                    <td style="font-weight: bold; background: #e8eef5;">Subject:</td>
                    <td><a href="{{ route('opac.search') }}?q={{ urlencode($biblio->subject ?? '') }}">{{ $biblio->subject ?? 'General' }}</a></td>
                </tr>
                @if(!empty($biblio->notes))
                    <tr>
                        <td style="font-weight: bold; background: #e8eef5;">Notes:</td>
                        <td>{{ $biblio->notes }}</td>
                    </tr>
                @endif
            </table>

            <div style="display:flex; gap:8px;">
                <form action="{{ route('opac.hold.place', $biblio->id) }}" method="POST" style="margin:0;">
                    @csrf
                    <button type="submit" class="form-btn primary" style="padding:6px 14px; font-size:12.5px; font-weight:bold; cursor:pointer;">📌 Place Hold</button>
                </form>
                <button type="button" class="cart-btn" onclick="addToCart({{ $biblio->id }}, '{{ addslashes($biblio->title) }}')" style="padding:6px 14px; font-size:12.5px; font-weight:bold;">🛒 Add to Cart</button>
            </div>
        </div>
    </div>

    <div class="checkout-panel">
        <h3 style="font-size: 14px; margin-bottom: 10px; color: #333;">Holdings / Copy Status ({{ count($holdings) }})</h3>
        <table class="items-table">
            <thead>
                <tr>
                    <th>Barcode</th>
                    <th>Accession No.</th>
                    <th>Call Number</th>
                    <th>Library Branch</th>
                    <th>Shelving Location</th>
                    <th>Accession Date</th>
                    <th>Item Type</th>
                    <th>Status</th>
                </tr>
            </thead>
            <tbody>
                @forelse($holdings as $item)
                    <tr>
                        <td><code>{{ $item->barcode }}</code></td>
                        <td><code>{{ $item->accession_number ?? $item->barcode }}</code></td>
                        <td><code>{{ $item->itemcallnumber ?? $biblio->call_number ?? 'N/A' }}</code></td>
                        <td>{{ $item->library_name }}</td>
                        <td>{{ $item->location ?? 'Main Stacks' }}</td>
                        <td>{{ $item->accession_date ?? 'N/A' }}</td>
                        <td>{{ $item->type_description }}</td>
                        <td>
                            @if($item->status == 'available')
                                <span class="status-ok">✓ Available</span>
                            @else
                                <span class="overdue-tag">⚠ Checked Out</span>
                            @endif
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="8" style="text-align: center; color: #777; padding: 12px;">No physical copies found in system.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
@endsection

@section('scripts')
<script>
function addToCart(id, title) {
    let cart = JSON.parse(localStorage.getItem('lopac_cart') || '[]');
    if (!cart.some(item => item.id === id)) {
        cart.push({ id: id, title: title });
        localStorage.setItem('lopac_cart', JSON.stringify(cart));
    }
    let countEl = document.getElementById('cart-count');
    if (countEl) { countEl.innerText = '(' + cart.length + ')'; }
    alert("✓ '" + title + "' has been added to your cart!");
}
</script>
@endsection