@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">
                    <!-- Page Header Box Start -->
                    <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="index.html">home</a></li>
                                <li class="breadcrumb-item">Blood Bank</li>
                            </ol>
                        </nav>
                    </div>
                    <!-- Page Header Box End -->
                </div>
            </div>
        </div>
    </div>
    <!-- Page Header End -->




    <!-- Our Approach Section Start -->
    <div class="blood_bank_top">
        <div class="container">
            <div class="row section-row align-items-center">
                <div class="col-lg-6">
                    <!-- Section Title Start -->
                    <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>
                    <!-- Section Title End -->
                </div>

                <div class="col-lg-6">
                    <div class="section-title-content wow fadeInUp" data-wow-delay="0.2s">
                        <p>At Rehab clinic, we are committed to delivering compassionate, high-quality healthcare tailored to each patient's needs. Our mission is to provide reliable, accessible, and modern medical services.</p>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-6">
                    <div class="blood_status">
                        
                        <div class="blood_status_item wow fadeInUp" data-wow-delay="0.6s">
                                <h3>Blood availability status</h3>
                                <div class="blood_search">
                                    <div class="select">
                        <select name="blood_group_check" id="blood_group_check">
                            <option selected disabled>Blood Group....</option>
                           @foreach(blood_groups() as $key => $group)
                                                <option value="{{ $key }}">{{ $group }}</option>
                                            @endforeach
                        </select>
                    </div>

                        <button type="submit" id="btnCheckAvailability" class="blood_search_submit" name="submit"><img src="{{ asset('images/search.png') }}"> Search</button>

                                </div>

                            <div class="donor_detail" id="availabilityResult" style="display:none;">
                            <ul>

                     
                                <li>
                                    <span class="donor_left">Status</span>
                                    <span class="donor_right"  id="resStatus">: &nbsp; Available</span>
                                </li>
                                <li>
                                    <span class="donor_left">Last Updated on </span>
                                    <span class="donor_right" id="resDate">: &nbsp; 18-01-2026</span>
                                </li>
                                <li>
                                    <span class="donor_left">Contact No. </span>
                                    <span class="donor_right" id="resPhone">: &nbsp;  </span>
                                </li>
                            </ul>
                        </div>
                        </div>

                        
                        
                    </div>
                </div>

                <div class="col-lg-6">

                    <!-- Book Appointment Content Start -->
                    <div class="book-appointment-content">
                        <!-- Section Title Start -->
                        <div class="section-title">
                            <h3 class="wow fadeInUp">Blood request form</h3>
                            <h2 class="text-anime-style-3" data-cursor="-opaque">Request Form</h2>
                        </div>
                        <!-- Section Title End -->

                        <!-- Book Appointment Form Start -->
                        <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-4">
                                        <select name="blood_group" class="form-control form-select" id="blood_group" required>
                                            <option value="" disabled selected>Select Blood Group</option>
                                            @foreach(blood_groups() as $key => $group)
                                                <option value="{{ $key }}">{{ $group }}</option>
                                            @endforeach
                                        </select>
                                        <div class="help-block with-errors"></div>
                                    </div>
                                    <div class="form-group col-md-6 mb-4">
                                        <input type="text" name="name" class="form-control" id="name" placeholder="Full Name" required>
                                        <div class="help-block with-errors"></div>
                                    </div>
                                    
                                    <div class="form-group col-md-6 mb-4">
                                        <input type="email" name ="email" class="form-control" id="email" placeholder="Email Address" required>
                                        <div class="help-block with-errors"></div>
                                    </div>
                
                                    <div class="form-group col-md-6 mb-4">
                                        <input type="text" name="phone" class="form-control" id="phone" placeholder="Phone Number" required>
                                        <div class="help-block with-errors"></div>
                                    </div>
                                    


                                    <div class="form-group col-md-12 mb-4">
                                        <textarea name="message" class="form-control" id="message" rows="3" placeholder="Message"></textarea>
                                        <div class="help-block with-errors"></div>
                                    </div>
                
                                    <div class="col-md-12">
                                        <button type="submit" class="btn-default"><span>Request</span></button>
                                        <!-- <div id="msgSubmit" class="h3 hidden"></div> -->
                                         <div id="requestMsg" class="mt-2" style="display:none;"></div>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <!-- Book Appointment Form End -->
                    </div>
                    <!-- Book Appointment Content End -->
                   
                </div>
            </div>
        </div>
    </div>
    <!-- Our Approach Section End -->




    <!-- What We Do Section Start -->
    <div class="what-we-do">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6">
                    <!-- What We Image Box Start -->
                    <div class="what-we-image-box">
                        <!-- What We Image Start -->
                        <div class="what-we-image">
                            <figure class="image-anime reveal">
                                <img src="{{ asset('images/blooddonor.jpg') }}" alt="">
                            </figure>
                        </div>
                        <!-- What We Image End -->
                    </div>
                    <!-- What We Image Box End -->
                </div>

                <div class="col-lg-6">
                   <!-- Book Appointment Content Start -->
                    <div class="book-appointment-content">
                        <!-- Section Title Start -->
                        <div class="section-title">
                            <h3 class="wow fadeInUp">Donor Registration</h3>
                            <h2 class="text-anime-style-3" data-cursor="-opaque">Become a Blood Donor</h2>
                        </div>
                        <!-- Section Title End -->

                        <!-- Book Appointment Form Start -->
                        <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-4">
                                        <input type="text" name="name" class="form-control" id="name" placeholder="Full Name" required>
                                        <div class="help-block with-errors"></div>
                                    </div>
                                    
                                    <div class="form-group col-md-6 mb-4">
                                        <input type="email" name ="email" class="form-control" id="email" placeholder="Email Address" required>
                                        <div class="help-block with-errors"></div>
                                    </div>
                
                                    <div class="form-group col-md-6 mb-4">
                                        <input type="text" name="phone" class="form-control" id="phone" placeholder="Phone Number" required>
                                        <div class="help-block with-errors"></div>
                                    </div>
                                    
                                    <div class="form-group col-md-6 mb-4">
                                        <select name="blood_group" class="form-control form-select" id="blood_group" required>
                                            <option value="" disabled selected>Select Blood Group</option>
                                              @foreach(blood_groups() as $key => $group)
                                                <option value="{{ $key }}">{{ $group }}</option>
                                            @endforeach
                                        </select>
                                        <div class="help-block with-errors"></div>
                                    </div>

                                    <div class="form-group col-md-12 mb-4">
                                        <textarea name="message" class="form-control" id="message" rows="3" placeholder="Message"></textarea>
                                        <div class="help-block with-errors"></div>
                                    </div>
                
                                    <div class="col-md-12">
                                        <button type="submit" class="btn-default"><span>Submit now</span></button>
                                        <div id="msgSubmit" class="h3 hidden"></div>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <!-- Book Appointment Form End -->
                    </div>
                    <!-- Book Appointment Content End -->                  
                </div>
            </div>
        </div>
    </div>
    <!-- What We Do Section End -->
@endsection

@section('script')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
$(document).ready(function() {
    // Check Availability
    $('#btnCheckAvailability').click(function() {
        let group = $('#blood_group_check').val();
       // $('#availabilityResult').html('');
        if(!group) {
            Swal.fire({
                title: 'Selection Required',
                text: 'Please select a blood group first.',
                icon: 'warning'
            });
            return;
        }
        $.get("{{ route('frontend.blood_donor.check') }}", { blood_group: group }, function(res) {
            $('#availabilityResult').fadeIn();
            $('#resStatus').text(': ' + (res.available ? 'Available ' : 'Currently Unavailable'));
          //  $('#resStatus').addClass(res.available ? 'text-success' : 'text-danger');
            $('#resDate').text(': ' + res.last_updated);
             $('#resPhone').text(': ' + res.phone);
        });
    });

    // Handle Form Submissions with SweetAlert2
    function handleFormSubmit(formId, url) {
        $(formId).on('submit', function(e) {
            e.preventDefault();
            let form = $(this);
            
            if(!form[0].checkValidity()) {
                form.addClass('was-validated');
                return;
            }

            let submitBtn = form.find('button[type="submit"]');
            let originalBtnText = submitBtn.html();
            submitBtn.prop('disabled', true).html('<span>Sending...</span>');

            $.ajax({
                url: url,
                type: 'POST',
                data: form.serialize(),
                success: function(response) {
                    submitBtn.prop('disabled', false).html(originalBtnText);
                    if (response.success) {
                        Swal.fire({
                            title: 'Success!',
                            text: response.message,
                            icon: 'success',
                            confirmButtonText: 'Great'
                        });
                        form[0].reset();
                        form.removeClass('was-validated');
                    }
                },
                error: function(xhr) {
                    submitBtn.prop('disabled', false).html(originalBtnText);
                    if (xhr.status === 422) {
                        let errors = xhr.responseJSON.errors;
                        let errorHtml = '<ul>';
                        $.each(errors, function(key, value) {
                            errorHtml += '<li>' + value[0] + '</li>';
                        });
                        errorHtml += '</ul>';
                        Swal.fire({
                            title: 'Validation Error',
                            html: errorHtml,
                            icon: 'error'
                        });
                    } else {
                        Swal.fire({
                            title: 'Error!',
                            text: 'Something went wrong. Please try again.',
                            icon: 'error'
                        });
                    }
                }
            });
        });
    }

    handleFormSubmit('#bloodRequestForm', "{{ route('frontend.blood_request.submit') }}");
    handleFormSubmit('#bloodDonorForm', "{{ route('frontend.blood_donor.submit') }}");
});
</script>
@endsection