@extends('layouts.staff')

@section('title', '⇄ Circulation — Renew › Koha Staff')

@section('qtab-renew-active', 'active')

@section('breadcrumb-trail')
    <span class="sep">›</span>
    <a href="{{ route('staff.circulation') }}">Circulation</a>
    <span class="sep">›</span>
    <span>Renew</span>
@endsection

@section('content')
<div style="width: 100%; display: flex; flex-direction: column;">
    @if(session('error'))
        <div style="background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; padding: 10px; margin-bottom: 12px; border-radius: 3px; font-size: 13px;">
            {{ session('error') }}
        </div>
    @endif
    @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 class="checkout-panel" style="background: #fff; border: 1px solid #d0d0d0; padding: 15px; border-radius: 3px; margin-bottom: 16px;">
        <h3 style="color:#1b4880; font-size:15px; margin-bottom:12px; border-bottom:1px solid #ddd; padding-bottom:5px;">
            ⇄ Circulation — Renew Item
        </h3>
        
        <form action="{{ route('staff.renew') }}" method="GET" class="form-row" style="display: flex; gap: 8px; align-items: center; margin-bottom: 15px;">
            <span class="form-label" style="font-size: 12px; font-weight: bold;">Enter item barcode:</span>
            <input class="form-input" name="barcode" value="{{ $barcode }}" placeholder="e.g. 100001" type="text" style="width: 200px;" autofocus>
            <button class="form-btn primary" type="submit">Search</button>
        </form>

        @if($issue && $patron && $item && $biblio)
            <div style="margin-top: 15px; padding: 15px; background: #f0f7ff; border: 1px solid #c0d5f0; border-radius: 3px; font-size: 13px;">
                <h4 style="margin: 0 0 10px 0; color: #1b4880; font-size:14px;">Checkout details found:</h4>
                <table style="width: 100%; border-collapse: collapse; margin-bottom: 15px;">
                    <tr>
                        <td style="font-weight: bold; width: 120px; padding: 4px 0;">Title:</td>
                        <td>{{ $biblio->title }} (by {{ $biblio->author }})</td>
                    </tr>
                    <tr>
                        <td style="font-weight: bold; padding: 4px 0;">Barcode:</td>
                        <td><code>{{ $item->barcode }}</code></td>
                    </tr>
                    <tr>
                        <td style="font-weight: bold; padding: 4px 0;">Checked out to:</td>
                        <td>{{ $patron->firstname }} {{ $patron->surname }} (Card: {{ $patron->cardnumber }})</td>
                    </tr>
                    <tr>
                        <td style="font-weight: bold; padding: 4px 0;">Current Due Date:</td>
                        <td style="color: {{ \Carbon\Carbon::parse($issue->date_due)->isPast() ? '#c00' : '#333' }}; font-weight: bold;">
                            {{ \Carbon\Carbon::parse($issue->date_due)->format('d.m.Y') }}
                            @if(\Carbon\Carbon::parse($issue->date_due)->isPast())
                                <span class="overdue-tag">(OVERDUE)</span>
                            @endif
                        </td>
                    </tr>
                </table>

                <form action="{{ route('staff.renew') }}" method="POST">
                    @csrf
                    <input type="hidden" name="issue_id" value="{{ $issue->id }}">
                    <button type="submit" class="form-btn primary" style="padding: 6px 16px; font-weight: bold;">Renew Loan (+21 days)</button>
                </form>
            </div>
        @endif
    </div>
</div>
@endsection