@extends('layouts.staff')

@section('title', 'Item Types › Koha Administration')

@section('breadcrumb-trail')
    <span class="sep">›</span>
    <a href="{{ route('staff.administration') }}">Administration</a>
    <span class="sep">›</span>
    <span>Item Types</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;">
                🏷️ Item Types and Circulation Policies
            </h2>
            <button onclick="document.getElementById('new-type-form').style.display = document.getElementById('new-type-form').style.display === 'none' ? 'block' : 'none';" class="form-btn primary" style="font-size:12px;">
                + Add New Item Type
            </button>
        </div>

        <!-- Add Form -->
        <div id="new-type-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 Item Type</h4>
            <form action="{{ route('staff.admin.item-types.store') }}" method="POST">
                @csrf
                <div class="form-row">
                    <span class="form-label">Type Code:</span>
                    <input class="form-input" name="code" required type="text" placeholder="e.g. BK, REF, DVD">
                </div>
                <div class="form-row">
                    <span class="form-label">Description:</span>
                    <input class="form-input" name="description" required type="text" placeholder="e.g. Books & Monographs">
                </div>
                <div class="form-row">
                    <span class="form-label">Loan Period (Days):</span>
                    <input class="form-input" name="loan_period" value="21" required type="number" min="1">
                </div>
                <div class="form-row">
                    <span class="form-label">Daily Fine Rate (₦):</span>
                    <input class="form-input" name="fine_rate" value="0.20" step="0.01" required type="number" min="0">
                </div>
                <div style="margin-top:12px; display:flex; gap:6px;">
                    <button type="submit" class="form-btn primary">Save Item Type</button>
                    <button type="button" onclick="document.getElementById('new-type-form').style.display = 'none';" class="form-btn">Cancel</button>
                </div>
            </form>
        </div>

        <table class="items-table">
            <thead>
                <tr>
                    <th>Item Type Code</th>
                    <th>Description</th>
                    <th>Loan Period</th>
                    <th>Daily Fine Rate</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach($itemTypes as $type)
                    <tr>
                        <td style="font-family: monospace; font-weight: bold; font-size: 12px;">{{ $type->code }}</td>
                        <td style="font-weight: bold;">{{ $type->description }}</td>
                        <td>{{ $type->loan_period ?? 21 }} days</td>
                        <td>₦{{ number_format($type->fine_rate ?? 0.20, 2) }}/day</td>
                        <td>
                            <button onclick="document.getElementById('edit-type-{{ $type->id }}').style.display = document.getElementById('edit-type-{{ $type->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-type-{{ $type->id }}" style="display:none; background:#f4f8fa;">
                        <td colspan="5" style="padding:12px;">
                            <form action="{{ route('staff.admin.item-types.update', $type->id) }}" method="POST">
                                @csrf
                                <div style="display:grid; grid-template-columns: 1fr 2fr 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="{{ $type->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="{{ $type->description }}" required style="width:100%;">
                                    </div>
                                    <div>
                                        <label style="font-size:11px; font-weight:bold; display:block;">Loan (Days):</label>
                                        <input class="form-input" name="loan_period" value="{{ $type->loan_period ?? 21 }}" required type="number" min="1" style="width:100%;">
                                    </div>
                                    <div>
                                        <label style="font-size:11px; font-weight:bold; display:block;">Fine Rate (₦):</label>
                                        <input class="form-input" name="fine_rate" value="{{ $type->fine_rate ?? 0.20 }}" step="0.01" required type="number" min="0" 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-type-{{ $type->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