@extends('layouts.staff')

@section('title', 'Patron Categories › Koha Administration')

@section('breadcrumb-trail')
    <span class="sep">›</span>
    <a href="{{ route('staff.administration') }}">Administration</a>
    <span class="sep">›</span>
    <span>Patron Categories</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

    @if ($errors->any())
        <div style="background:#f8d7da; color:#721c24; border:1px solid #f5c6cb; padding:10px; margin-bottom:12px; border-radius:3px; font-size:13px;">
            <ul style="margin:0; padding-left:18px;">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div style="background: #fff; border: 1px solid #d0d0d0; padding: 20px; border-radius: 3px;">
        <div style="display:flex; justify-content:space-between; align-items:center; border-bottom: 2px solid #1b4880; padding-bottom: 8px; margin-bottom: 15px;">
            <h2 style="margin: 0; color: #1b4880; font-size: 16px;">
                👥 Patron Categories Configuration
            </h2>
            <button onclick="document.getElementById('new-cat-form').style.display = document.getElementById('new-cat-form').style.display === 'none' ? 'block' : 'none';" class="form-btn primary" style="font-size:12px;">
                + Add New Category
            </button>
        </div>

        <!-- Add Form -->
        <div id="new-cat-form" style="display:none; background:#f9f9f9; border:1px solid #d0d0d0; padding:15px; border-radius:3px; margin-bottom:20px;">
            <h4 style="margin-top:0; color:#1b4880;">+ Create New Patron Category</h4>
            <form action="{{ route('staff.admin.patron-categories.store') }}" method="POST">
                @csrf
                <div class="form-row">
                    <span class="form-label">Category Code:</span>
                    <input class="form-input" name="code" required type="text" placeholder="e.g. STU, STAFF, ADULT">
                </div>
                <div class="form-row">
                    <span class="form-label">Description:</span>
                    <input class="form-input" name="description" required type="text" placeholder="e.g. Undergraduate Student">
                </div>
                <div class="form-row">
                    <span class="form-label">Category Type:</span>
                    <select class="form-input" name="category_type" required>
                        <option value="student">Student</option>
                        <option value="staff">Staff</option>
                        <option value="adult">Adult</option>
                        <option value="child">Child</option>
                        <option value="academic">Academic / Faculty</option>
                    </select>
                </div>
                <div class="form-row">
                    <span class="form-label">Enrolment Period (Months):</span>
                    <input class="form-input" name="enrolment_period" value="12" required type="number" min="1">
                </div>
                <div class="form-row">
                    <span class="form-label">Max Checkouts Limit:</span>
                    <input class="form-input" name="max_checkouts" value="5" required type="number" min="1">
                </div>
                <div style="margin-top:12px; display:flex; gap:6px;">
                    <button type="submit" class="form-btn primary">Save Category</button>
                    <button type="button" onclick="document.getElementById('new-cat-form').style.display = 'none';" class="form-btn">Cancel</button>
                </div>
            </form>
        </div>

        <table class="items-table">
            <thead>
                <tr>
                    <th>Category Code</th>
                    <th>Description</th>
                    <th>Type</th>
                    <th>Enrolment Period</th>
                    <th>Max Checkouts</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach($patronCategories as $cat)
                    <tr>
                        <td style="font-family: monospace; font-weight: bold; font-size: 12px;">{{ $cat->code }}</td>
                        <td style="font-weight: bold;">{{ $cat->description }}</td>
                        <td><span class="badge" style="background:#e9ecef; color:#495057; padding:2px 6px; border-radius:3px; font-size:11px;">{{ ucfirst($cat->category_type) }}</span></td>
                        <td>{{ $cat->enrolment_period }} months</td>
                        <td>{{ $cat->max_checkouts }} items</td>
                        <td>
                            <button onclick="document.getElementById('edit-cat-{{ $cat->id }}').style.display = document.getElementById('edit-cat-{{ $cat->id }}').style.display === 'none' ? 'table-row' : 'none';" class="form-btn" style="padding:2px 8px; font-size:11px;">
                                ✏️ Edit
                            </button>
                        </td>
                    </tr>
                    <!-- Inline Edit Form Row -->
                    <tr id="edit-cat-{{ $cat->id }}" style="display:none; background:#f4f8fa;">
                        <td colspan="6" style="padding:12px;">
                            <form action="{{ route('staff.admin.patron-categories.update', $cat->id) }}" method="POST">
                                @csrf
                                <div style="display:grid; grid-template-columns: 1fr 2fr 1.5fr 1fr 1fr 1fr; gap:10px; align-items:center;">
                                    <div>
                                        <label style="font-size:11px; font-weight:bold; display:block;">Code:</label>
                                        <input class="form-input" name="code" value="{{ $cat->code }}" required style="width:100%;">
                                    </div>
                                    <div>
                                        <label style="font-size:11px; font-weight:bold; display:block;">Description:</label>
                                        <input class="form-input" name="description" value="{{ $cat->description }}" required style="width:100%;">
                                    </div>
                                    <div>
                                        <label style="font-size:11px; font-weight:bold; display:block;">Type:</label>
                                        <select class="form-input" name="category_type" required style="width:100%;">
                                            <option value="student" {{ strtolower($cat->category_type) === 'student' ? 'selected' : '' }}>Student</option>
                                            <option value="staff" {{ strtolower($cat->category_type) === 'staff' ? 'selected' : '' }}>Staff</option>
                                            <option value="adult" {{ strtolower($cat->category_type) === 'adult' ? 'selected' : '' }}>Adult</option>
                                            <option value="child" {{ strtolower($cat->category_type) === 'child' ? 'selected' : '' }}>Child</option>
                                            <option value="academic" {{ strtolower($cat->category_type) === 'academic' ? 'selected' : '' }}>Academic</option>
                                        </select>
                                    </div>
                                    <div>
                                        <label style="font-size:11px; font-weight:bold; display:block;">Enrolment (M):</label>
                                        <input class="form-input" name="enrolment_period" value="{{ $cat->enrolment_period }}" required type="number" min="1" style="width:100%;">
                                    </div>
                                    <div>
                                        <label style="font-size:11px; font-weight:bold; display:block;">Max Items:</label>
                                        <input class="form-input" name="max_checkouts" value="{{ $cat->max_checkouts }}" required type="number" min="1" style="width:100%;">
                                    </div>
                                    <div>
                                        <button type="submit" class="form-btn primary" style="padding:4px 10px; font-size:11px;">Save</button>
                                        <button type="button" onclick="document.getElementById('edit-cat-{{ $cat->id }}').style.display = 'none';" class="form-btn" style="padding:4px 10px; font-size:11px;">Cancel</button>
                                    </div>
                                </div>
                            </form>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>

        <div style="margin-top: 20px;">
            <a href="{{ route('staff.administration') }}" class="form-btn" style="text-decoration:none;">← Back to Admin</a>
        </div>
    </div>
</div>
@endsection