@extends('layouts.staff')

@section('title', '📰 Serials Module › Koha Staff')

@section('breadcrumb-trail')
    <span class="sep">›</span>
    <a href="{{ route('staff.serials') }}">Serials</a>
@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:grid; grid-template-columns: 2fr 1fr; gap:16px;">
        <div class="checkout-panel">
            <h3>Active Subscriptions</h3>
            <table class="items-table" style="margin-top:10px;">
                <thead>
                    <tr>
                        <th>Title</th>
                        <th>Frequency</th>
                        <th>Vendor</th>
                        <th>Start Date</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($subscriptions as $sub)
                        <tr>
                            <td><strong>{{ $sub->biblio_title }}</strong></td>
                            <td>{{ ucfirst($sub->frequency) }}</td>
                            <td>{{ $sub->vendor_name }}</td>
                            <td>{{ $sub->start_date }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="4" style="text-align:center; color:#777; padding:10px;">No serial subscriptions registered.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div class="checkout-panel">
            <h3>Add New Subscription</h3>
            <form action="{{ route('staff.serials') }}" method="POST" style="margin-top:10px;">
                @csrf
                <div class="form-row">
                    <span class="form-label" style="width:80px;">Title:</span>
                    <select class="form-input" name="biblio_id" required>
                        @foreach($biblios as $b)
                            <option value="{{ $b->id }}">{{ $b->title }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-row">
                    <span class="form-label" style="width:80px;">Vendor:</span>
                    <select class="form-input" name="vendor_id" required>
                        @foreach($vendors as $v)
                            <option value="{{ $v->id }}">{{ $v->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-row">
                    <span class="form-label" style="width:80px;">Frequency:</span>
                    <select class="form-input" name="frequency" required>
                        <option value="weekly">Weekly</option>
                        <option value="monthly">Monthly</option>
                        <option value="quarterly">Quarterly</option>
                    </select>
                </div>
                <div class="form-row">
                    <span class="form-label" style="width:80px;">Start Date:</span>
                    <input class="form-input" name="start_date" type="date" required value="{{ date('Y-m-d') }}">
                </div>
                <div style="margin-top:12px; border-top:1px solid #eee; padding-top:10px; text-align:right;">
                    <button class="form-btn primary" type="submit">Save Subscription</button>
                </div>
            </form>
        </div>
    </div>

    <a href="{{ route('staff.home') }}" class="form-btn" style="width:120px; text-align:center; margin-top:12px;">← Back to Home</a>
</div>
@endsection