<?php 
$class = isset($args['class']) ? $args['class'] : '';
?>

<section class="section affilate-dashboard-access <?php echo $class;?>">
    <div class="container">
        <div class="text-content text-center slide-down">
            <h2 class="section-title"><?php echo get_field('affiliate_dashboard_section_heading');?></h2>
        </div>
        <div class="box">
            <div class="row">
                <div class="col-lg-6 slide-right">
                    <div class="img-cont">
                        <img src="<?php echo get_field('affiliate_dashboard_section_image');?>" alt="dashboard"  class="img-fluid">
                    </div>
                </div>
                <div class="col-lg-6 slide-left">
                    <?php
                        // $form = get_field('select_affiliate_dashboard_form'); 

                        // if( $form ) {
                        //     echo do_shortcode('[contact-form-7 id="' . $form->ID . '" title="' . esc_attr($form->post_title) . '"]');
                        // }
                    ?>
                    <form id="affiliateForm">
  <div class="input-cont">
    <label>First Name</label>
    <input class="form-control" type="text" name="name" required>
  </div>
  <div class="input-cont">
    <label>Your Email Address</label>
    <input class="form-control" type="email" name="email" required>
  </div>
  <div class="input-cont">
    <label>Your Phone Number </label>
    <input class="form-control" type="tel" name="phone" required>
  </div>
  
<div class="input-cont" style="display:none;">
  <label>Email Confirmation</label>
  <input class="form-control" type="email" name="email_confirmation">
</div>
  <div class="position-relative">
    <button type="submit" class="access-btn">Access Dashboard</button>
    <span class="wpcf7-spinner"></span>
  </div>
</form>

<div id="affiliateResponse"></div>

                </div>
            </div>
        </div>
    </div>
</section>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
jQuery(document).ready(function($){
    $("#affiliateForm").on("submit", function(e){
        e.preventDefault();

        var formData = $(this).serialize();
        var $btn = $(".access-btn");
        var $spinner = $(".wpcf7-spinner");

        $.ajax({
            url: "<?php echo admin_url('admin-ajax.php'); ?>",
            type: "POST",
            data: {
                action: "submit_affiliate_form",
                form_data: formData
            },
            beforeSend: function(){
                $spinner.show();              
                $btn.prop("disabled", true);
                $btn.text("Processing...");
            },
            success: function(response){
                $spinner.hide();
                $btn.prop("disabled", false);
                $btn.text("Access Dashboard");

                if(response.success){
                    Swal.fire({
                      title: "Success",
                      text: "Form Submitted Successfully",
                      icon: "success"
                    });
                     $("#affiliateForm")[0].reset();
                } else {
                    Swal.fire({
                      title: "Failed",
                      text: "Error: " + response.data,
                      icon: "error"
                    });
                }
            },
            error: function(xhr){
                $spinner.hide();
                $btn.prop("disabled", false);
                $btn.text("Access Dashboard");

                Swal.fire({
                  title: "Failed",
                  text: "Request failed! Please try again.",
                  icon: "error"
                });
            }
        });
    });
});

</script>
<script>
jQuery(document).ready(function($){
    $('input[name="email"]').on('input', function(){
        var emailValue = $(this).val();
        $('input[name="email_confirmation"]').val(emailValue);
    });
});
</script>

<style>
.wpcf7-spinner {
  display: none;
  margin-left: 10px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #0073aa;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

    </style>
    