@extends('layouts.opac')

@section('title', 'Search Results › MTU Library Catalog')

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

@section('sidebar')
    <div class="refine-section">
        <div class="refine-title">Refine your search</div>
        <a class="refine-link" href="{{ route('opac.search', array_merge(request()->all(), ['available' => 1])) }}">Limit to currently available items</a>
    </div>
    <div class="refine-section">
        <div class="refine-title">Libraries</div>
        @foreach($librariesFacet as $facet)
            <a class="refine-link" href="{{ route('opac.search', array_merge(request()->all(), ['branch' => $facet->name])) }}">
                {{ $facet->name }} ({{ $facet->count }})
            </a>
        @endforeach
    </div>
    <div class="refine-section">
        <div class="refine-title">Authors</div>
        @foreach($authorsFacet as $facet)
            <a class="refine-link" href="{{ route('opac.search', array_merge(request()->all(), ['q' => $facet->author, 'idx' => 'au'])) }}">
                {{ $facet->author }} ({{ $facet->count }})
            </a>
        @endforeach
    </div>
@endsection

@section('content')
    <div id="view-results" class="view active">
        <div id="results-header">
            @if(!empty($q))
                "You searched: <strong id="search-query-display">{{ $q }}</strong>" returned
            @else
                All catalog items returned
            @endif
            <strong>{{ $results->total() }} results.</strong>
        </div>

        <div id="results-toolbar">
            <div class="toolbar-left">
                <button class="select-all-btn" onclick="alert('Select All clicked (Prototype)')">Select all</button>
                <button class="clear-all-btn" onclick="alert('Clear All clicked (Prototype)')">Clear all</button>
                <span>Add to:</span>
                <select id="add-to-select" style="padding:3px 6px; font-size:11.5px; border:1px solid #ccc; border-radius:2px;">
                    <option>-- select --</option>
                    <option>Cart</option>
                    <option>List</option>
                </select>
                <button class="export-btn" onclick="alert('Save clicked (Prototype)')">Save</button>
            </div>
            <div class="toolbar-right">
                <select id="sort-select" onchange="window.location.href = '{{ route('opac.search', array_merge(request()->all(), ['sort' => ''])) }}' + this.value">
                    <option value="newest" {{ request('sort') == 'newest' ? 'selected' : '' }}>Publication Date: Newest to Oldest</option>
                    <option value="oldest" {{ request('sort') == 'oldest' ? 'selected' : '' }}>Publication Date: Oldest to Newest</option>
                    <option value="title_az" {{ request('sort') == 'title_az' ? 'selected' : '' }}>Title: A to Z</option>
                    <option value="author_az" {{ request('sort') == 'author_az' ? 'selected' : '' }}>Author: A to Z</option>
                </select>
            </div>
        </div>

        <!-- RESULTS LIST -->
        <div id="results-list">
            @forelse($results as $index => $book)
                <div class="result-item" style="display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid #eee; animation-delay: {{ $index * 0.05 }}s;">
                    <input class="result-checkbox" type="checkbox" name="biblionumber[]" value="{{ $book->id }}" style="margin-top: 4px;">
                    <div class="result-num" style="font-weight: bold; color: #777;">{{ $results->firstItem() + $index }}.</div>
                    
                    <!-- Cover Thumbnail -->
                    <img src="/images/book{{ (($book->id - 1) % 5) + 1 }}.png" alt="Cover" style="width: 50px; height: 68px; object-fit: cover; border: 1px solid #ddd; box-shadow: 1px 1px 3px rgba(0,0,0,0.1); flex-shrink: 0;">
                    
                    <div class="result-body" style="flex: 1;">
                        <div class="result-title" style="font-size: 13.5px; font-weight: bold;">
                            <a href="{{ route('opac.detail', $book->id) }}">{{ $book->title }}</a>
                        </div>
                        <div class="result-author" style="font-size: 11.5px; color: #555; margin-top: 2px;">by {{ $book->author }}</div>
                        <div class="result-pub" style="font-size: 11px; color: #666; margin-top: 4px;">Publication: {{ $book->publisher }}, {{ $book->pub_year }}. | Call Number: {{ $book->call_number }}</div>
                        <div class="result-avail" style="font-size: 11px; color: #2a7a2a; font-weight: bold; margin-top: 4px;">
                            Availability: Copies in collection.
                        </div>
                    </div>
                </div>
            @empty
                <div style="padding: 24px; text-align: center; color: #777;">
                    No catalog items found matching your search.
                </div>
            @endforelse
        </div>

        <div style="margin-top: 20px;">
            {{ $results->links() }}
        </div>
    </div>
@endsection