@extends('layoutsfrontend.master')
@section('content')

    <!-- Page Header Start -->
    <div class="page-header bg-section parallaxie">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-12">
                    <div class="page-header-box">
                        <h1 class="text-anime-style-3" data-cursor="-opaque">Blood Bank</h1>
                        <nav class="wow fadeInUp">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="{{ route('home') }}">home</a></li>
                                <li class="breadcrumb-item">Blood Bank</li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Page Header End -->

    <!-- Blood Status & Request Section Start -->
    <div class="blood_bank_top py-5">
        <div class="container">
            <div class="row section-row align-items-center">
                <div class="col-lg-6">
                    <div class="section-title">
                        <h3 class="wow fadeInUp">Blood Bank</h3>
                        <h2 class="text-anime-style-3" data-cursor="-opaque">Comprehensive Services Tailored to Your Needs</h2>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="section-title-content wow fadeInUp" data-wow-delay="0.2s">
                        <p>At Sunrise Hospital, we maintain a robust blood bank to ensure immediate availability for emergencies and planned surgeries. Your health is our priority.</p>
                    </div>
                </div>
            </div>

            <div class="row pt-4">
                <div class="col-lg-6">
                    <div class="blood_status p-4 bg-light rounded shadow-sm">
                        <div class="blood_status_item wow fadeInUp" data-wow-delay="0.6s">
                            <h3>Blood availability status</h3>
                            <div class="blood_search d-flex mb-4">
                                <div class="select flex-grow-1 me-2">
                                    <select name="blood_group_check" id="blood_group_check" class="form-control">
                                        <option value="" selected disabled>Blood Group....</option>
                                        <option value="A+">A+</option>
                                        <option value="A-">A-</option>
                                        <option value="B+">B+</option>
                                        <option value="B-">B-</option>
                                        <option value="AB+">AB+</option>
                                        <option value="AB-">AB-</option>
                                        <option value="O+">O+</option>
                                        <option value="O-">O-</option>
                                    </select>
                                </div>
                                <button type="button" id="btnCheckAvailability" class="btn btn-primary">Search</button>
                            </div>

                            <div class="donor_detail" id="availabilityResult" style="display:none;">
                                <ul class="list-unstyled">
                                    <li><strong>Status:</strong> <span id="resStatus" class="ms-2"></span></li>
                                    <li><strong>Last Updated on:</strong> <span id="resDate" class="ms-2"></span></li>
                                    <li><strong>Information:</strong> <span class="ms-2 text-muted">Contact our 24/7 help desk for immediate assistance.</span></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-6 mt-4 mt-lg-0">
                    <div class="book-appointment-content p-4 bg-white rounded shadow-sm border">
                        <div class="section-title mb-4">
                            <h3 class="wow fadeInUp">Blood request form</h3>
                            <h2 class="text-anime-style-3" data-cursor="-opaque">Request Form</h2>
                        </div>

                        <div class="appointment-form wow fadeInUp" data-wow-delay="0.4s">
                            <form id="bloodRequestForm" class="needs-validation" novalidate>
                                @csrf
                                <div class="row">
                                    <div class="form-group col-md-6 mb-3">
                                        <select name="blood_group" class="form-control form-select" required>
                                            <option value="" disabled selected>Select Blood Group</option>
                                            <option value="A+">A+</option>
                                            <option value="A-">A-</option>
                                            <option value="B+">B+</option>
                                            <option value="B-">B-</option>
                                            <option value="AB+">AB+</option>
                                            <option value="AB-">AB-</option>
                                            <option value="O+">O+</option>
                                            <option value="O-">O-</option>
                                        </select>
                                    </div>
                                    <div class="form-group col-md-6 mb-3">
                                        <input type="text" name="name" class="form-control" placeholder="Full Name" required>
                                    </div>
                                    <div class="form-group col-md-6 mb-3">
                                        <input type="email" name="email" class="form-control" placeholder="Email Address" required>
                                    </div>
                                    <div class="form-group col-md-6 mb-3">
                                        <input type="text" name="phone" class="form-control" placeholder="Phone Number" required>
                                    </div>
                                    <div class="form-group col-md-12 mb-3">
                                        <textarea name="message" class="form-control" rows="3" placeholder="Message/Reason"></textarea>
                                    </div>
                                    <div class="col-md-12">
                                        <button type="submit" class="btn btn-primary w-100"><span>Submit Request</span></button>
                                        <div id="requestMsg" class="mt-2" style="display:none;"></div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Become a Donor Section Start -->
    <div class="what-we-do bg-section py-5">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6 mb-4 mb-lg-0">
                    <div class="what-we-image-box">
                        <figure class="image-anime reveal rounded">
                            <img src="{{ asset('images/blooddonor.jpg') }}" alt="Blood Donor" class="img-fluid">
                        </figure>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="book-appointment-content p-4 bg-white rounded shadow">
                        <div class="section-title mb-4">
                            <h3 class="wow fadeInUp">Donor Registration</h3>
                            <h2 class="text-anime-style-3" data-cursor="-opaque">Become a Blood Donor</h2>
                        </div>

                        <div class="appointment-form wow fadeInUp" data-wow-delay="0.4s">
                            <form id="bloodDonorForm" class="needs-validation" novalidate>
                                @csrf
                                <div class="row">                                
                                    <div class="form-group col-md-6 mb-3">
                                        <input type="text" name="name" class="form-control" placeholder="Full Name" required>
                                    </div>
                                    <div class="form-group col-md-6 mb-3">
                                        <input type="email" name="email" class="form-control" placeholder="Email Address" required>
                                    </div>
                                    <div class="form-group col-md-6 mb-3">
                                        <input type="text" name="phone" class="form-control" placeholder="Phone Number" required>
                                    </div>
                                    <div class="form-group col-md-6 mb-3">
                                        <select name="blood_group" class="form-control form-select" required>
                                            <option value="" disabled selected>Select Blood Group</option>
                                            <option value="A+">A+</option>
                                            <option value="A-">A-</option>
                                            <option value="B+">B+</option>
                                            <option value="B-">B-</option>
                                            <option value="AB+">AB+</option>
                                            <option value="AB-">AB-</option>
                                            <option value="O+">O+</option>
                                            <option value="O-">O-</option>
                                        </select>
                                    </div>
                                    <div class="form-group col-md-12 mb-3">
                                        <textarea name="message" class="form-control" rows="3" placeholder="Additional Information/Medical History Summary"></textarea>
                                    </div>
                                    <div class="col-md-12">
                                        <button type="submit" class="btn btn-primary w-100"><span>Register Now</span></button>
                                        <div id="donorMsg" class="mt-2" style="display:none;"></div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
<script>
$(document).ready(function() {
    // Check Availability
    $('#btnCheckAvailability').click(function() {
        let group = $('#blood_group_check').val();
        if(!group) return alert('Select blood group');

        $.get("{{ route('frontend.blood_donor.check') }}", { blood_group: group }, function(res) {
            $('#availabilityResult').fadeIn();
            $('#resStatus').text(res.available ? 'Available (' + res.count + ' donor(s) registered)' : 'Currently Unavailable');
            $('#resStatus').removeClass('text-success text-danger').addClass(res.available ? 'text-success' : 'text-danger');
            $('#resDate').text(res.last_updated);
        });
    });

    // Submit Request
    $('#bloodRequestForm').submit(function(e) {
        e.preventDefault();
        let form = $(this);
        if(!form[0].checkValidity()) return form.addClass('was-validated');

        $.post("{{ route('frontend.blood_request.submit') }}", form.serialize(), function(res) {
            $('#requestMsg').text(res.message).addClass('alert alert-success').fadeIn();
            form[0].reset();
        });
    });

    // Register Donor
    $('#bloodDonorForm').submit(function(e) {
        e.preventDefault();
        let form = $(this);
        if(!form[0].checkValidity()) return form.addClass('was-validated');

        $.post("{{ route('frontend.blood_donor.submit') }}", form.serialize(), function(res) {
            $('#donorMsg').text(res.message).addClass('alert alert-success').fadeIn();
            form[0].reset();
        });
    });
});
</script>
@endsection