@extends('layouts.staff')

@section('title', '📋 Course Reserves › Koha Staff Client')

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

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

    <div style="display: flex; gap: 16px; align-items: flex-start;">
        <!-- Left: Current reserves list -->
        <div style="flex: 2; background: #fff; border: 1px solid #d0d0d0; padding: 15px; border-radius: 3px;">
            <h3 style="color:#1b4880; font-size:15px; margin-bottom:12px; border-bottom:1px solid #ddd; padding-bottom:5px;">
                📋 Active Course Reserve Items
            </h3>
            
            @if(count($reserves) > 0)
                <table class="items-table">
                    <thead>
                        <tr>
                            <th>Course Name</th>
                            <th>Instructor</th>
                            <th>Title & Author</th>
                            <th>Staff Note</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($reserves as $reserve)
                            <tr>
                                <td style="font-weight: bold;">{{ $reserve->course_name }}</td>
                                <td>{{ $reserve->instructor }}</td>
                                <td>
                                    <a href="{{ route('staff.cataloging.show', $reserve->biblio_id) }}">
                                        {{ $reserve->title }}
                                    </a> 
                                    <span style="font-size:11px; color:#666;">by {{ $reserve->author }}</span>
                                </td>
                                <td style="font-style: italic; color:#555;">{{ $reserve->staff_note ?? 'N/A' }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            @else
                <p style="color: #777; font-style: italic;">No course reserve titles linked yet.</p>
            @endif
        </div>

        <!-- Right: Add new reserve form -->
        <div style="flex: 1; background: #fff; border: 1px solid #d0d0d0; padding: 15px; border-radius: 3px;">
            <h3 style="color:#1b4880; font-size:15px; margin-bottom:12px; border-bottom:1px solid #ddd; padding-bottom:5px;">
                ➕ Add Reserve Item
            </h3>
            
            <form action="{{ route('staff.coursereserves') }}" method="POST">
                @csrf
                <div style="margin-bottom: 10px;">
                    <label style="display:block; font-size:12px; font-weight:bold; margin-bottom:4px;">Course Name / Code:</label>
                    <input type="text" name="course_name" required class="form-input" style="width:100%;" placeholder="e.g. COMP8006">
                </div>

                <div style="margin-bottom: 10px;">
                    <label style="display:block; font-size:12px; font-weight:bold; margin-bottom:4px;">Instructor:</label>
                    <input type="text" name="instructor" required class="form-input" style="width:100%;" placeholder="e.g. Dr. Jane Smith">
                </div>

                <div style="margin-bottom: 10px;">
                    <label style="display:block; font-size:12px; font-weight:bold; margin-bottom:4px;">Select Bibliographic Record:</label>
                    <select name="biblio_id" required class="form-input" style="width:100%; height:30px;">
                        <option value="">-- Choose Title --</option>
                        @foreach($biblios as $b)
                            <option value="{{ $b->id }}">{{ $b->title }} (by {{ $b->author }})</option>
                        @endforeach
                    </select>
                </div>

                <div style="margin-bottom: 12px;">
                    <label style="display:block; font-size:12px; font-weight:bold; margin-bottom:4px;">Staff Note:</label>
                    <textarea name="staff_note" class="form-input" style="width:100%; height:60px;" placeholder="Optional notes..."></textarea>
                </div>

                <button type="submit" class="form-btn primary" style="width:100%;">Add Course Reserve</button>
            </form>
        </div>
    </div>
</div>
@endsection