@extends('layouts.staff')

@section('title', '⚙️ Manage Quick Links & E-Resources › Koha Staff')

@section('breadcrumb-trail')
    <span class="sep">›</span>
    <a href="{{ route('staff.administration') }}">Administration</a>
    <span class="sep">›</span>
    <span>Links & E-Resources</span>
@endsection

@section('content')
<div style="width:100%; display:flex; flex-direction:column;">
    <div class="checkout-panel">
        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;">
            <h3>🔗 Quick Links & Online Resources Management</h3>
        </div>

        @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

        {{-- Add Link Form --}}
        <div style="background:#f8f9fa; padding:14px; border:1px solid #e9ecef; border-radius:4px; margin-bottom:20px;">
            <h4 style="margin-top:0; margin-bottom:10px; color:#004085;">+ Add New Link / E-Resource</h4>
            <form action="{{ route('staff.admin.links.store') }}" method="POST">
                @csrf
                <div style="display:flex; gap:10px; flex-wrap:wrap; align-items:center;">
                    <div style="flex:1; min-width:200px;">
                        <input class="form-input" name="title" required placeholder="Link / Resource Title (e.g. AGORA)" type="text">
                    </div>
                    <div style="flex:1.5; min-width:220px;">
                        <input class="form-input" name="url" required placeholder="URL (e.g. https://www.fao.org/agora)" type="text">
                    </div>
                    <div style="width:150px;">
                        <select class="form-input" name="type" required>
                            <option value="online_resource">Online Resource</option>
                            <option value="quick_link">Quick Link</option>
                        </select>
                    </div>
                    <div style="width:90px;">
                        <input class="form-input" name="sort_order" placeholder="Sort order" type="number" value="0">
                    </div>
                    <div>
                        <label style="font-size:12px; cursor:pointer;"><input type="checkbox" name="active" value="1" checked> Active</label>
                    </div>
                    <div>
                        <button type="submit" class="form-btn primary">+ Add</button>
                    </div>
                </div>
                <div style="margin-top:8px;">
                    <input class="form-input" name="description" placeholder="Description / Details (optional)..." type="text">
                </div>
            </form>
        </div>

        {{-- Online Resources Table --}}
        <h4 style="color:#1b4880; margin-bottom:8px;">🌐 Online Resources (Sidebar & OPAC)</h4>
        <table class="items-table" style="margin-bottom:24px;">
            <thead>
                <tr>
                    <th style="width:40px;">Order</th>
                    <th>Resource Title</th>
                    <th>URL</th>
                    <th>Description</th>
                    <th style="width:70px;">Status</th>
                    <th style="width:140px;">Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($onlineResources as $item)
                    <tr>
                        <form action="{{ route('staff.admin.links.update', $item->id) }}" method="POST">
                            @csrf
                            <td><input class="form-input" name="sort_order" value="{{ $item->sort_order }}" style="width:45px; padding:3px;" type="number"></td>
                            <td><input class="form-input" name="title" value="{{ $item->title }}" required type="text"></td>
                            <td><input class="form-input" name="url" value="{{ $item->url }}" required type="text"></td>
                            <td><input class="form-input" name="description" value="{{ $item->description }}" type="text"></td>
                            <td>
                                <input type="hidden" name="type" value="online_resource">
                                <label><input type="checkbox" name="active" value="1" {{ $item->active ? 'checked' : '' }}> {{ $item->active ? 'Active' : 'Off' }}</label>
                            </td>
                            <td>
                                <button type="submit" class="form-btn" style="padding:3px 8px; font-size:11px;">💾 Save</button>
                                <button type="button" class="form-btn" onclick="if(confirm('Delete {{ addslashes($item->title) }}?')) { document.getElementById('delete-link-{{ $item->id }}').submit(); }" style="padding:3px 8px; font-size:11px; background:#dc3545; color:white; border-color:#dc3545;">🗑️ Delete</button>
                            </td>
                        </form>
                        <form id="delete-link-{{ $item->id }}" action="{{ route('staff.admin.links.delete', $item->id) }}" method="POST" style="display:none;">
                            @csrf
                            @method('DELETE')
                        </form>
                    </tr>
                @empty
                    <tr><td colspan="6" style="text-align:center; color:#777;">No online resources defined.</td></tr>
                @endforelse
            </tbody>
        </table>

        {{-- Quick Links Table --}}
        <h4 style="color:#1b4880; margin-bottom:8px;">🔗 Quick Links (Sidebar & Footer)</h4>
        <table class="items-table">
            <thead>
                <tr>
                    <th style="width:40px;">Order</th>
                    <th>Link Title</th>
                    <th>URL</th>
                    <th>Description</th>
                    <th style="width:70px;">Status</th>
                    <th style="width:140px;">Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($quickLinks as $item)
                    <tr>
                        <form action="{{ route('staff.admin.links.update', $item->id) }}" method="POST">
                            @csrf
                            <td><input class="form-input" name="sort_order" value="{{ $item->sort_order }}" style="width:45px; padding:3px;" type="number"></td>
                            <td><input class="form-input" name="title" value="{{ $item->title }}" required type="text"></td>
                            <td><input class="form-input" name="url" value="{{ $item->url }}" required type="text"></td>
                            <td><input class="form-input" name="description" value="{{ $item->description }}" type="text"></td>
                            <td>
                                <input type="hidden" name="type" value="quick_link">
                                <label><input type="checkbox" name="active" value="1" {{ $item->active ? 'checked' : '' }}> {{ $item->active ? 'Active' : 'Off' }}</label>
                            </td>
                            <td>
                                <button type="submit" class="form-btn" style="padding:3px 8px; font-size:11px;">💾 Save</button>
                                <button type="button" class="form-btn" onclick="if(confirm('Delete {{ addslashes($item->title) }}?')) { document.getElementById('delete-link-{{ $item->id }}').submit(); }" style="padding:3px 8px; font-size:11px; background:#dc3545; color:white; border-color:#dc3545;">🗑️ Delete</button>
                            </td>
                        </form>
                        <form id="delete-link-{{ $item->id }}" action="{{ route('staff.admin.links.delete', $item->id) }}" method="POST" style="display:none;">
                            @csrf
                            @method('DELETE')
                        </form>
                    </tr>
                @empty
                    <tr><td colspan="6" style="text-align:center; color:#777;">No quick links defined.</td></tr>
                @endforelse
            </tbody>
        </table>

    </div>
</div>
@endsection