<?php /* Template Name: Home Page */
get_header();
?>
<section class="home-banner-wrap">
   <div class="left-wrap">
      <div class="content-wrap">
         <div class="tag">Turn caring into earning.</div>
         <h2 class="title">Receive weekly pay as a caregiver for your loved one.</h2>

         <div class="start-wrap">
            <div class="cal-wrap">
               <a href="tel:+13134667770">Call (313) 466-7770</a>
            </div>

             <form id="startForm" data-parsley-validate>

               <div class="email-btn-wrap">
                  <input type="email" 
                         id="startEmail" 
                         name="email"
                         class="txt" 
                         placeholder="Email Address"
                         required 
                         data-parsley-type="email"
                         data-parsley-required-message="Email is required"
                         data-parsley-type-message="Please enter a valid email">
                  
                  <button id="startBtn" class="btn">
                     <span>Get started today</span>
                     <img src="<?php echo get_template_directory_uri(); ?>/img/arrow-right-green.svg" alt="">
                  </button>
               </div>

               <input type="hidden" name="action" value="send_start_email">
               <input type="hidden" name="security" value="<?php echo wp_create_nonce('start_email_nonce'); ?>">

               <div id="emailMsg" style="margin-top:10px; display:none;"></div>
            </form>
         </div>
      </div>
   </div>

   <div class="img-wrap">
      <img src="<?php echo get_template_directory_uri(); ?>/img/banner.png" alt="" class="img">
   </div>
</section>
<section class="eligibility-wrap">
   <div class="container custom-container">
      <div class="content-wrap">
         <div class="left-wrap">
            <div class="box-wrap">
               <h2 class="title">Can I be a caregiver?</h2>
               <ul class="list">
                  <li>
                     <div class="ico"><img src="<?php echo get_template_directory_uri(); ?>/img/tic.png" alt=""></div>
                     <span class="txt">18+ with a clean background check</span>
                  </li>
                  <li>
                     <div class="ico"><img src="<?php echo get_template_directory_uri(); ?>/img/tic.png" alt=""></div>
                     <span class="txt"> Family or friend of patient </span>
                  </li>
                  <li>
                     <div class="ico"><img src="<?php echo get_template_directory_uri(); ?>/img/close.png" alt=""></div>
                     <span class="txt">Spouse or parent of a minor patient</span>
                  </li>
               </ul>
            </div>
         </div>
         <div class="right-wrap">
            <div class="box-wrap">
               <h2 class="title">Is my loved one eligible?</h2>
               <ul class="list">
                  <li>
                     <div class="ico"><img src="<?php echo get_template_directory_uri(); ?>/img/tic.png" alt=""></div>
                     <span class="txt">Enrolled in Medicaid</span>
                  </li>
                  <li>
                     <div class="ico"><img src="<?php echo get_template_directory_uri(); ?>/img/tic.png" alt=""></div>
                     <span class="txt">Michigan resident </span>
                  </li>
                  <li>
                     <div class="ico"><img src="<?php echo get_template_directory_uri(); ?>/img/tic.png" alt=""></div>
                     <span class="txt"> In need of daily care</span>
                  </li>
               </ul>
            </div>
         </div>
         <div class="btn-wrap">
            <a href="#contact-form" class="btn">
               Verify your elegibility</a>
         </div>
      </div>
   </div>
</section>

<section class="receive-wrap">
   <div class="container custom-container">
      <div class="receiver-inner row">
         <div class="card-wrap">
            <div class="card-inner">
                  <div class="card-title">
                     <span class="italic-title">Your loved one </span>
 
                     <span>will receive:</span>
                  </div>
                  <div class="icon-wrp">
                     <div class="icon-sec">
                        <div class="icon"><img src="<?php echo get_template_directory_uri(); ?>/img/icon1.svg"></div>
                        <div class="txt">
                              <span>A trusted </span>
                              <span>caregiver</span>
                        </div>
                     </div>
                     <div class="icon-sec">
                        <div class="icon"><img src="<?php echo get_template_directory_uri(); ?>/img/icon2.svg"></div>
                        <div class="txt">
                              <span>
                                 A personalized
                              </span>
                              <span>
                                 care plan
                              </span>
                        </div>
                     </div>
                     <div class="icon-sec">
                        <div class="icon"><img src="<?php echo get_template_directory_uri(); ?>/img/icon3.svg"></div>
                        <div class="txt">
                              <span>
                                 Zero-cost
                              </span>
                              <span>
                                 care
                              </span>
                           </div>
                     </div>
                     <div class="icon-sec">
                        <div class="icon"><img src="<?php echo get_template_directory_uri(); ?>/img/icon4.svg"></div>
                        <div class="txt">
                              <span>
                                 At-home
                              </span>
                              <span>
                                 independence
                              </span>
                           </div>
                     </div>
                  </div>
            </div>
         </div>
            <div class="card-wrap">
            <div class="card-inner">
                  <div class="card-title">
                     <span>
                        You’ll receive
                     </span>
                     <span class="italic-title">
                        top tier benefits:
                     </span>
 
                  </div>
                  <div class="icon-wrp">
                     <div class="icon-sec">
                        <div class="icon"><img src="<?php echo get_template_directory_uri(); ?>/img/icon5.svg"></div>
                        <div class="txt">
                              <span>
                                 Highest
                              </span>
                              <span>
                                 pay rates
                              </span>
                        </div>
                     </div>
                     <div class="icon-sec">
                        <div class="icon"><img src="<?php echo get_template_directory_uri(); ?>/img/icon6.svg"></div>
                        <div class="txt">
                              <span>
                                 Rapid
                              </span>
                              <span>
                                 onboarding
                              </span>
                              </div>
                     </div>
                     <div class="icon-sec">
                        <div class="icon"><img src="<?php echo get_template_directory_uri(); ?>/img/icon7.svg"></div>
                        <div class="txt">
                              <span>
                                 Weekly
                              </span>
                              <span>
                                 pay
                              </span>
                              </div>
                     </div>
                     <div class="icon-sec">
                        <div class="icon"><img src="<?php echo get_template_directory_uri(); ?>/img/icon8.svg"></div>
                        <div class="txt">
                              <span>
                                    Sign-on 
                              </span>
                              <span>
                                 bonus
                              </span>
                           </div>
                     </div>
                  </div>
            </div>
         </div>
      </div>
   </div>
</section>
<section class="best-care" id="about">
   <div class="container custom-container2">
      <div class="care-wrap">
            <div class="topsec row">
               <div class="title ">The best care <br> comes from <span>those<br> who care most</span></div>
               
               <div class="best-care-inner">
                     <div class="prgrm-txt ">
                        <div class="subtitle">What is the Michigan Home Help Program?</div>
                        <div class="sub-content">An official Medicaid program, run by the Michigan Department of Health and Human Services (MDHHS), paying family or friends to be caregivers in the patient’s home — because family and friends provide the best care.</div>
               </div>
               <div class="rt-img ">
                  <img src="<?php echo get_template_directory_uri(); ?>/img/care-img.png" alt="careimg">
               </div>
               </div>
               
            </div>  

            <div class="bottom-sec row">
               <div class="wh-chose-img"><img src="<?php echo get_template_directory_uri(); ?>/img/wh-ch-img.png" alt="why-img"></div>
               <div class="wh-txt">
                  <div class="why-title">Why choose Michigan Care Partners?</div>
                  <div class="why-content">We’re an agency committed to  helping families access this program with the same care and attention you give your loved ones. With Michigan Care Partners you can expect support every step of the way.</div>
               </div>
            </div>

         
      </div>
   </div>
</section>
<section class="care-help">
  <div class="container custom-container2">

    <div class="help-title-box text-center">
      <h2 class="help-main">How will you help?</h2>
      <p class="help-sub">
        <span>As a caregiver you’ll need to be capable of providing</span>
        <span>need-based care in the following areas:</span>
        
      </p>
    </div>

    <div class="row help-row">

      <div class="col-lg-6 help-wrp">
        <div class="help-img-box">
          <img id="helpImage" src="<?php echo get_template_directory_uri(); ?>/img/personal-care.png" alt="help-img" class="img-fluid rounded-3">
        </div>
      </div>


      <div class="col-lg-6 help-wrp">
        <div class="help-list">

    
          <div class="help-item active" data-img="<?php echo get_template_directory_uri(); ?>/img/personal-care.png" >
            <h4 class="help-item-title">Personal Care</h4>
            <div class="help-item-desc">Bathing, dressing, grooming, and toileting.</div>
          </div>

          <div class="help-item" data-img="<?php echo get_template_directory_uri(); ?>/img/mobility.png">
            <h4 class="help-item-title">Mobility Help</h4>
            <div class="help-item-desc">Walking assistance, transfers, exercise support</div>
          </div>

          <div class="help-item" data-img="<?php echo get_template_directory_uri(); ?>/img/household.png" >
            <h4 class="help-item-title">Household Tasks</h4>
            <div class="help-item-desc">Light housework, laundry, organizing</div>
          </div>

          <div class="help-item" data-img="<?php echo get_template_directory_uri(); ?>/img/trans.png" >
            <h4 class="help-item-title">Transportation</h4>
            <div class="help-item-desc">Rides to medical appointments and activities</div>
          </div>

          <div class="help-item" data-img="<?php echo get_template_directory_uri(); ?>/img/medication.png" >
            <h4 class="help-item-title">Medication Support</h4>
            <div class="help-item-desc">Medication reminders and management</div>
          </div>

          <div class="help-item" data-img="<?php echo get_template_directory_uri(); ?>/img/com.png" >
            <h4 class="help-item-title">Companionship</h4>
            <div class="help-item-desc">Social interaction, emotional support, activities</div>
          </div>

          <div class="help-item" data-img="<?php echo get_template_directory_uri(); ?>/img/meal.png" >
            <h4 class="help-item-title">Meal Services</h4>
            <div class="help-item-desc">Meal preparation, cooking, eating assistance</div>
          </div>

          <div class="help-item" data-img="<?php echo get_template_directory_uri(); ?>/img/errands.png" >
            <h4 class="help-item-title">Errands & Shopping</h4>
            <div class="help-item-desc">Grocery shopping, pharmacy trips, appointments</div>
          </div>

        </div>
      </div>
    </div>
  </div>
</section>
<section class="story-wrp">
    <div class="container story-container bg-attach">
        <div class="slider-wrp">
            <div class="sec-title">Stories <span>of <span class="font-c">care</span></span></div>
    <div class="stories-slider">

    <div class="slick-slideshow__slide">
            <div class="card-wrp">
                <div class="user-blk">
                    <img src="<?php echo get_template_directory_uri(); ?>/img/user2.png" alt="">
                </div>
                <div class="content-blk">
                    "I was already caring for my dad after his stroke, but struggling to pay my bills. Michigan Care Partners helped me become his official caregiver and get paid. My dad gets the best care and I can support my family."
                </div>
                <div class="author">
                    — Sarah M., Grand Rapids
                </div>
            </div>
    </div>
    <div class="slick-slideshow__slide">
            <div class="card-wrp">
                <div class="user-blk">
                    <img src="<?php echo get_template_directory_uri(); ?>/img/user1.png" alt="">
                </div>
                <div class="content-blk">
                    "I was worried about leaving my factory job to care for Dad, but this program pays better than I expected. The weekly checks help our whole family, and Dad loves having me around."
                </div>
                <div class="author">
                   —Carlos R., Lansing
                </div>
            </div>
    </div>

    </div>
        </div>
    </div>
</section>
<section class="ready-to-start-wrap" id="benefits">
   <div class="container custom-container min-container">
         <div class="row">
            <div class="col-lg-4">
               <div class="content-wrap">
                  <h2 class="title">Ready to get started?</h2>
                  <p class="para">We care to keep it simple — the paperwork is on us. Expect a fast and stress-free
                     enrollment process. </p>
               </div>
            </div>
            <div class="col-lg-8">

               <div class="box-outer-wrap">
                  <div class="row desktop-view">
                     <div class="col-md-6 col-adj">
                        <div class="box-wrap">
                           <div class="img"><img src="<?php echo get_template_directory_uri(); ?>/img/ready-1.svg" alt=""></div>
                           <h3 class="title">Reach <span></span> out</h3>
                           <div class="para">Verify your eligibility within minutes online or via phone</div>
                        </div>
                     </div>

                     <div class="col-md-6 col-adj col-align">
                        <div class="box-wrap">
                           <div class="img"><img src="<?php echo get_template_directory_uri(); ?>/img/ready-2.svg" alt=""></div>
                           <h3 class="title">Offload the paperwork</h3>
                           <div class="para">Our team completes all MDHHS applications </div>
                        </div>
                     </div>

                     <div class="col-md-6 col-adj">
                        <div class="box-wrap">
                           <div class="img"><img src="<?php echo get_template_directory_uri(); ?>/img/ready-3.svg" alt=""></div>
                           <h3 class="title">Get approved</h3>
                           <div class="para">MDHHS reviews and approves your program participation</div>
                        </div>
                     </div>

                     <div class="col-md-6 col-adj col-align">
                        <div class="box-wrap">
                           <div class="img"><img src="<?php echo get_template_directory_uri(); ?>/img/ready-4.svg" alt=""></div>
                           <h3 class="title">Start earning</h3>
                           <div class="para">Begin providing care and get paid weekly</div>
                        </div>
                     </div>

               </div>
               <div class="box-slider">
                  <div>
                     <div class="box-wrap">
                        <div class="img"><img src="<?php echo get_template_directory_uri(); ?>/img/ready-1.svg" alt=""></div>
                        <h3 class="title">Reach <span></span> out</h3>
                        <div class="para">Verify your eligibility within minutes online or via phone</div>
                        <img src="<?php echo get_template_directory_uri(); ?>/img/ready-icon.svg" alt="" class="icon">
                     </div>
                  </div>
                  <div>
                     <div class="box-wrap">
                        <div class="img"><img src="<?php echo get_template_directory_uri(); ?>/img/ready-2.svg" alt=""></div>
                        <h3 class="title">Offload the paperwork</h3>
                        <div class="para">Our team completes all MDHHS applications </div>
                        <img src="<?php echo get_template_directory_uri(); ?>/img/ready-icon.svg" alt="" class="icon">
                     </div>
                  </div>
                  <div>
                     <div class="box-wrap">
                        <div class="img"><img src="<?php echo get_template_directory_uri(); ?>/img/ready-3.svg" alt=""></div>
                        <h3 class="title">Get approved</h3>
                        <div class="para">MDHHS reviews and approves your program participation</div>
                        <img src="<?php echo get_template_directory_uri(); ?>/img/ready-icon.svg" alt="" class="icon">
                     </div>
                  </div>
                  <div>
                     <div class="box-wrap">
                        <div class="img"><img src="<?php echo get_template_directory_uri(); ?>/img/ready-4.svg" alt=""></div>
                        <h3 class="title">Start earning</h3>
                        <div class="para">Begin providing care and get paid weekly</div>
                        <img src="<?php echo get_template_directory_uri(); ?>/img/ready-icon.svg" alt="" class="icon">
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</section>

  <section class="form-outer-wrap" id="contact-form">
   <div class="container form-container">
      <div class="form-inner">
         <div class="left-sec">
            <div class="title">Check eligibility & start earning:</div>
            <div class="desc">Simply fill out this form or 
               <span>give us a call at <a class="tel" href="tel:+xxx-xxx-xxx">xxx-xxx-xxxx</a></span>
            </div>
         </div>

         <div class="rt-sec">
            <form id="eligibilityForm" class="form-wrp" data-parsley-validate>
               <input type="hidden" name="action" value="submit_eligibility_form">
               <input type="hidden" name="security" value="<?php echo wp_create_nonce('eligibility_nonce'); ?>">

               <div class="form-group">
                  <input type="text" name="first_name" class="form-inp" placeholder="First name" required>
                  <!-- <span class="error">Please check</span> -->
               </div>

               <div class="form-group">
                  <input type="text" name="last_name" class="form-inp" placeholder="Last name" required>
                  <!-- <span class="error">Please check</span> -->
               </div>

               <div class="form-group">
                  <input type="email" 
                         id="startEmail" 
                         name="email"
                         class="form-inp" 
                         placeholder="Email address"
                         required 
                         data-parsley-type="email"
                         data-parsley-required-message="Email is required"
                         data-parsley-type-message="Please enter a valid email">
                  <!-- <span class="error">Please check</span> -->
               </div>
               <div class="form-group">
                  <input type="text" name="phone" class="form-inp" placeholder="Phone number" required data-parsley-type="digits">
                  <!-- <span class="error">Please check</span> -->
               </div>

               <div class="form-group">
                  <input type="text" name="age" class="form-inp" placeholder="Your age" required data-parsley-type="digits">
                  <!-- <span class="error">Please check</span> -->
               </div>

               <div class="form-group">
                  <select name="relationship" class="form-inp custom-sel" required>
                     <option value="">Relationship to patient</option>
                     <option value="Option 1">Option 1</option>
                     <option value="Option 2">Option 2</option>
                  </select>
                  <!-- <span class="error">Please check</span> -->
               </div>

               <div class="form-group">
                  <select name="medicare" class="form-inp custom-sel" required>
                     <option value="">Medicare status of patient</option>
                     <option value="Option 1">Option 1</option>
                     <option value="Option 2">Option 2</option>
                  </select>
                  <!-- <span class="error">Please check</span> -->
               </div>

               <div class="form-group">
                  <textarea name="message" class="form-inp" placeholder="Message"></textarea>
                  <!-- <span class="error">Please check</span> -->
               </div>

               <button type="submit" class="btn submit-btn">
                  <span>Submit form</span>
               </button>

               <div id="formMsg" style="display:none; margin-top:10px;"></div>
            </form>
         </div>
      </div>
   </div>
</section>



<?php get_footer(); ?>
<script src="https://cdn.jsdelivr.net/npm/parsleyjs"></script>

<script>
jQuery(document).ready(function($){

   $('#eligibilityForm').parsley();

   $('#eligibilityForm').on('submit', function(e){
      e.preventDefault();

      if($(this).parsley().isValid()){
         
         var formData = $(this).serialize();

         $.ajax({
            type: "POST",
            url: "<?php echo admin_url('admin-ajax.php'); ?>",
            data: formData,
            beforeSend: function(){
               $('.submit-btn span').text('Submitting...');
            },
            success: function(response){
               $('#formMsg')
                  .html('<span style="color:green;">Form submitted successfully!</span>')
                  .fadeIn().delay(3000).fadeOut();

               $('#eligibilityForm')[0].reset();
               $('.submit-btn span').text('Submit form');
            },
            error: function(){
               $('#formMsg')
                  .html('<span style="color:red;">Something went wrong!</span>')
                  .fadeIn().delay(3000).fadeOut();
               $('.submit-btn span').text('Submit form');
            }
         });
      }
   });


});
jQuery(document).ready(function($){

   $('#startForm').parsley();

   $('#startForm').on('submit', function(e){
      e.preventDefault();

      var form = $('#startForm');

      if(form.parsley().isValid()) {

         $.ajax({
            url: "<?php echo admin_url('admin-ajax.php'); ?>",
            method: "POST",
            data: form.serialize(),
            beforeSend: function(){
               $('#startBtn span').text('Sending...');
            },
            success: function(response){
               if(response.success){
                  $('#emailMsg')
                     .html("<span style='color:green;'>Email sent successfully!</span>")
                     .fadeIn().delay(3000).fadeOut();
                  form[0].reset();
               } else {
                  $('#emailMsg')
                     .html("<span style='color:red;'>Something went wrong.</span>")
                     .show();
               }
               $('#startBtn span').text('Get started today');
            },
            error: function(){
               $('#emailMsg')
                  .html("<span style='color:red;'>Server error.</span>")
                  .show();
               $('#startBtn span').text('Get started today');
            }
         });
      }
   });
});
</script>