@extends('layouts.master')
@section('title') Edit Blood Donor @endsection

@section('content')
    <div class="page-header">
        <h1>Edit Blood Donor</h1>
        <div>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('dashboard.index') }}">Home</a></li>
                <li class="breadcrumb-item"><a href="{{ route('blood_donor.index') }}">Blood Donors</a></li>
                <li class="breadcrumb-item active">Edit</li>
            </ol>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">
                    <form class="needs-validation" method="post" action="{{ route('blood_donor.update', $bloodDonor->id) }}" novalidate>
                        @csrf
                        @method('PUT')
                        @if ($errors->any())
                            <div class="alert alert-danger">
                                <ul>
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        <div class="row mb-3">
                            <label for="name" class="col-sm-2 col-form-label">Full Name</label>
                            <div class="col-sm-10">
                                <input name="name" id="name" type="text" class="form-control" value="{{ $bloodDonor->name }}" required>
                                <div class="invalid-feedback">Please enter donor name.</div>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <label for="blood_group" class="col-sm-2 col-form-label">Blood Group</label>
                            <div class="col-sm-10">
                                <select name="blood_group" id="blood_group" class="form-control form-select" required>
                                 @foreach(blood_groups() as $key => $group)
                                                <option value="{{ $key }}" {{ $bloodDonor->blood_group == $group ? 'selected' : '' }}>{{ $group }}</option>
                                            @endforeach  
                               
                                </select>
                                <div class="invalid-feedback">Please select a blood group.</div>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <label for="phone" class="col-sm-2 col-form-label">Phone Number</label>
                            <div class="col-sm-10">
                                <input name="phone" id="phone" type="text" class="form-control" value="{{ $bloodDonor->phone }}" required>
                                <div class="invalid-feedback">Please enter phone number.</div>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <label for="email" class="col-sm-2 col-form-label">Email</label>
                            <div class="col-sm-10">
                                <input name="email" id="email" type="email" class="form-control" value="{{ $bloodDonor->email }}">
                            </div>
                        </div>

                        <div class="row mb-3">
                            <label for="message" class="col-sm-2 col-form-label">Message</label>
                            <div class="col-sm-10">
                                <textarea name="message" id="message" rows="4" class="form-control">{{ $bloodDonor->message }}</textarea>
                            </div>
                        </div>

                        <div class="card-footer text-end">
                            <button type="submit" class="btn btn-primary">Update Donor</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
<script>
(function () {
    'use strict';
    var forms = document.querySelectorAll('.needs-validation');
    Array.prototype.slice.call(forms).forEach(function (form) {
        form.addEventListener('submit', function (event) {
            if (!form.checkValidity()) {
                event.preventDefault();
                event.stopPropagation();
            }
            form.classList.add('was-validated');
        }, false);
    });
})();
</script>
@endsection