@extends('layouts.app', [
    'title' => 'Add Donor | Blood Donor App',
    'pageHeading' => 'Add New Donor',
    'pageSubheading' => 'Create a donor profile with complete contact and medical basics',
])

@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">Donor Information</h2>
            <a href="{{ route('donors.index') }}" class="btn btn-sm btn-outline-secondary">Back to List</a>
        </div>
        <div class="card-body">
            <form method="POST" action="{{ route('donors.store') }}" enctype="multipart/form-data">
                @csrf

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

                <div class="mt-4 d-flex gap-2">
                    <button type="submit" class="btn btn-danger">
                        <i class="bi bi-check-circle me-1"></i>Save Donor
                    </button>
                    <a href="{{ route('donors.index') }}" 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