@extends('layouts.staff')

@section('title', '👤 New Patron › Koha Staff')

@section('breadcrumb-trail')
    <span class="sep">›</span>
    <a href="{{ route('staff.patrons') }}">Patrons</a>
    <span class="sep">›</span>
    <span>New Patron</span>
@endsection

@section('content')
<div style="width:100%; display:flex; flex-direction:column;">
    <div class="checkout-panel">
        <h3>👤 Add New Patron</h3>
        
        @if ($errors->any())
            <div style="background:#f8d7da; color:#721c24; border:1px solid #f5c6cb; padding:10px; margin-top:10px; margin-bottom:14px; border-radius:4px; font-size:13px;">
                <strong style="display:block; margin-bottom:4px;">⚠️ Please correct the following errors:</strong>
                <ul style="margin:0; padding-left:18px;">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form action="{{ route('staff.patrons.store') }}" method="POST" enctype="multipart/form-data" style="margin-top:12px;">
            @csrf
            
            <div class="form-row">
                <span class="form-label">First name:</span>
                <input class="form-input" name="firstname" value="{{ old('firstname') }}" required type="text">
            </div>
            <div class="form-row">
                <span class="form-label">Surname:</span>
                <input class="form-input" name="surname" value="{{ old('surname') }}" required type="text">
            </div>
            <div class="form-row">
                <span class="form-label">Card number:</span>
                <input class="form-input" name="cardnumber" value="{{ old('cardnumber') }}" placeholder="e.g. MTU20159999" required type="text">
            </div>
            <div class="form-row">
                <span class="form-label">Email (Unique):</span>
                <input class="form-input" name="email" value="{{ old('email') }}" placeholder="e.g. patron@mtu.edu.ng (Optional)" type="email">
                <span style="font-size:11px; color:#666; margin-left:8px;">Must be unique. If left empty, defaults to cardnumber@mtu.edu.ng.</span>
            </div>
            <div class="form-row">
                <span class="form-label">Username:</span>
                <input class="form-input" name="username" value="{{ old('username') }}" required type="text">
            </div>
            <div class="form-row">
                <span class="form-label">Password:</span>
                <input class="form-input" name="password" required type="password">
            </div>

            <div class="form-row">
                <span class="form-label">Passport Photo:</span>
                <div style="display:flex; align-items:center; gap:16px;">
                    <div style="width:72px; height:72px; border-radius:6px; border:2px dashed #cbd5e1; display:flex; align-items:center; justify-content:center; overflow:hidden; background:#f8fafc;">
                        <img id="passport-preview" src="{{ asset('images/default-avatar.svg') }}" alt="Passport Preview" style="width:100%; height:100%; object-fit:cover; display:none;">
                        <span id="passport-placeholder" style="font-size:24px; color:#94a3b8;">📷</span>
                    </div>
                    <div>
                        <input class="form-input" id="passport-input" name="passport" type="file" accept="image/jpeg,image/png,image/jpg,image/webp,image/gif" onchange="previewPassport(event)">
                        <div style="font-size:11px; color:#64748b; margin-top:4px;">Supported: JPG, PNG, WEBP, GIF (Max: 2MB). Ideal for circulation verification and patron ID.</div>
                    </div>
                </div>
            </div>

            <div class="form-row">
                <span class="form-label">Expiration Date:</span>
                <input class="form-input" name="expiry_date" type="date" value="{{ old('expiry_date', $defaultExpiry) }}">
                <span style="font-size:11px; color:#666; margin-left:8px;">Default is 4 years. Admin can select a different date.</span>
            </div>
            
            <div class="form-row">
                <span class="form-label">Category:</span>
                <select class="form-input" name="category_id" required>
                    @foreach($categories as $cat)
                        <option value="{{ $cat->id }}" {{ old('category_id') == $cat->id ? 'selected' : '' }}>
                            {{ $cat->description }} ({{ $cat->code }})
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="form-row">
                <span class="form-label">Home Library:</span>
                <select class="form-input" name="library_id" required>
                    @foreach($libraries as $lib)
                        <option value="{{ $lib->id }}" {{ old('library_id') == $lib->id ? 'selected' : '' }}>
                            {{ $lib->name }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div style="margin-top:20px; border-top:1px solid #eee; padding-top:12px; display:flex; gap:6px;">
                <button type="submit" class="form-btn primary">Save Patron</button>
                <a href="{{ route('staff.patrons') }}" class="form-btn">Cancel</a>
            </div>
        </form>
    </div>
</div>

<script>
function previewPassport(event) {
    const file = event.target.files[0];
    const preview = document.getElementById('passport-preview');
    const placeholder = document.getElementById('passport-placeholder');
    if (file) {
        const reader = new FileReader();
        reader.onload = function(e) {
            preview.src = e.target.result;
            preview.style.display = 'block';
            if (placeholder) placeholder.style.display = 'none';
        };
        reader.readAsDataURL(file);
    }
}
</script>
@endsection