@extends('layouts.app', [
    'title' => 'Edit Donor | Blood Donor App',
    'pageHeading' => 'Edit Donor',
    'pageSubheading' => 'Update donor contact and profile information',
])

@section('content')
    <div class="card card-soft border-0">
        <div class="card-header bg-white d-flex justify-content-between align-items-center">
            <h2 class="h6 mb-0">Edit: {{ $donor->name }}</h2>
            <a href="{{ route('donors.show', $donor) }}" class="btn btn-sm btn-outline-secondary">Back to Profile</a>
        </div>
        <div class="card-body">
            <form method="POST" action="{{ route('donors.update', $donor) }}" enctype="multipart/form-data">
                @csrf
                @method('PUT')

                @include('donors.partials.form', ['donor' => $donor])

                <div class="mt-4 d-flex gap-2">
                    <button type="submit" class="btn btn-danger">
                        <i class="bi bi-check-circle me-1"></i>Update Donor
                    </button>
                    <a href="{{ route('donors.show', $donor) }}" class="btn btn-light border">Cancel</a>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        const profileInput = document.querySelector('.js-profile-input');
        const profilePreview = document.getElementById('profilePreview');

        profileInput?.addEventListener('change', event => {
            const [file] = event.target.files;
            if (!file || !profilePreview) return;
            profilePreview.src = URL.createObjectURL(file);
        });
    </script>
@endpush