@extends('layouts.staff')

@section('title', '✏️ Edit Patron › Koha Staff')

@section('breadcrumb-trail')
    <span class="sep">›</span>
    <a href="{{ route('staff.patrons') }}">Patrons</a>
    <span class="sep">›</span>
    <a href="{{ route('staff.patrons.show', $patron->id) }}">{{ $patron->firstname }} {{ $patron->surname }}</a>
    <span class="sep">›</span>
    <span>Edit</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; border-bottom:1px solid #e2e8f0; padding-bottom:10px; margin-bottom:14px;">
            <h3 style="margin:0;">✏️ Edit Patron: {{ $patron->firstname }} {{ $patron->surname }}</h3>
            <span class="badge" style="background:#e0f2fe; color:#0369a1; font-weight:600; padding:4px 10px; border-radius:4px; font-size:12px;">Card: {{ $patron->cardnumber }}</span>
        </div>
        
        @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.update', $patron->id) }}" 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', $patron->firstname) }}" required type="text">
            </div>
            <div class="form-row">
                <span class="form-label">Surname:</span>
                <input class="form-input" name="surname" value="{{ old('surname', $patron->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', $patron->cardnumber) }}" required type="text">
            </div>
            <div class="form-row">
                <span class="form-label">Email (Unique):</span>
                <input class="form-input" name="email" value="{{ old('email', $patron->email) }}" type="email">
            </div>
            <div class="form-row">
                <span class="form-label">Username:</span>
                <input class="form-input" name="username" value="{{ old('username', $patron->username) }}" required type="text">
            </div>
            <div class="form-row">
                <span class="form-label">Change Password:</span>
                <input class="form-input" name="password" placeholder="Leave blank to keep current password" type="password">
                <span style="font-size:11px; color:#666; margin-left:8px;">Only enter if you wish to change their password.</span>
            </div>

            <div class="form-row">
                <span class="form-label">Passport Photo:</span>
                <div style="display:flex; align-items:center; gap:16px;">
                    <div style="width:76px; height:76px; border-radius:6px; border:2px dashed #cbd5e1; display:flex; align-items:center; justify-content:center; overflow:hidden; background:#f8fafc; box-shadow:inset 0 1px 2px rgba(0,0,0,0.05);">
                        @php
                            $currentPassport = (!empty($patron->passport) && file_exists(public_path($patron->passport)))
                                ? asset($patron->passport)
                                : asset('images/default-avatar.svg');
                        @endphp
                        <img id="passport-preview" src="{{ $currentPassport }}" alt="Passport Preview" style="width:100%; height:100%; object-fit:cover;">
                    </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;">Upload new photo to replace. Supported: JPG, PNG, WEBP, GIF (Max: 2MB).</div>
                        @if (!empty($patron->passport))
                            <div style="margin-top:6px;">
                                <label style="font-size:12px; color:#b91c1c; display:flex; align-items:center; gap:4px; cursor:pointer;">
                                    <input type="checkbox" name="remove_passport" value="1">
                                    <span>🗑️ Remove current passport photo</span>
                                </label>
                            </div>
                        @endif
                    </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', $patron->expiry_date) }}">
            </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', $patron->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', $patron->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">Update Patron</button>
                <a href="{{ route('staff.patrons.show', $patron->id) }}" 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');
    if (file) {
        const reader = new FileReader();
        reader.onload = function(e) {
            preview.src = e.target.result;
        };
        reader.readAsDataURL(file);
    }
}
</script>
@endsection