@extends('frontend.layouts.app')
@section('bodyClass', 'frontend')
@section('content')
<link rel="stylesheet" href="{{ asset('css/forms/global_form_design.css')}} ">
<div class="ffd-banner prizeform-ffd-banner">
<div class="loader-new">
    <div class="loader-icon"></div>
</div>
    <div class="ffe-banner-left">
            
            <div class="ffe-banner-left-inner position-relative">
            <div class="prizeform-inputs">
                <div class="ffd-content ">
                  <div id="question">
                      <h2></h2>
                  </div>
                  <div id="details">
                      <h2>{{$templateDetail->form_name}}</h2>
                      
                      <div class="ffd-container">
                          <div class="ffd-form">
                              <!--  div for errror message -->
                              <div class="row prize-form">
                                  <form name="{{$formDetails->id}}" id="prizeform" class="prizeform" onsubmit="return false;">
                                      @if(count($formDetails->componentQuestionsMain) > 0)
                                          
                                          @foreach($formDetails->componentQuestionsMain as $key => $quesMain)
                                              @php $result = FormHelper::getFormComponentHtml($quesMain->component->component_code,$quesMain,0,$studioId); @endphp
                                              {!! $result['htmlcode'] !!}
                                          @endforeach
                                      @endif
                                      @php
                                         foreach($formDetails->componentQuestionsMain as $key => $quesMain){
                                          if($quesMain->component_id =='41'){
                                            $gameRules = $quesMain->component_question_title;
                                          }
                                         }
                                         
                                      @endphp
                                      @if ($component_id == 34)
                                          <div class="prizeform-btn">
                                            <!-- <div class="prizeform-btn-left">
                                              <div class="fw-700">Rules for spinning the wheel:</div>
                                              <div>{{$gameRules??''}}</div>
                                            </div> -->
                                              <button  class="ffe-btn-theme"  id="spinButton" >Try Your Luck!</button>
                                          </div>
                                          
                                      @endif
                                      @if ($component_id == 38)
                                          <div class="prizeform-btn">
                                            <!-- <div class="prizeform-btn-left">
                                              <div class="fw-700">Rules for scratching the card:</div>
                                              <div>{{$gameRules??''}}</div>
                                            </div> -->
                                              <button  class="ffe-btn-theme"  id="scratchButton" >Try Your Luck!</button>
                                          </div>
                                          
                                      @endif
                                      <div class="prizeform-btn">
                                        <div class="prizeform-btn-left">
                                          <div class="fw-700">Please note:  </div>
                                          <div>FitForms assumes no responsibility for honouring any prizes offered by this business.</div>
                                        </div>
                                      </div>
                                  </form>
                                  
                              </div> 
                          </div>
                          <div id="validationErrors" class="alert alert-danger custom-alert" style="display: none;"></div>
                          <div id="validationSuccess" class="alert alert-success custom-alert" style="display: none;"></div>
                          <input type="hidden" class="prizeformuserid" id="prizeformuserid" value="0">
                      </div>
                    </div>
                </div>
            </div>
        </div>


    </div>
    <div class="ffe-banner-right prizeform-options">
        @if($component_id == 38) 
          <div class="scratch-section">
            <div>
              @include('frontend.scratchcard', [
                      'formDetails' => $formDetails,
                      'studioId' => $studio_id,
                      'data' => $data,
                      'templateId' => $templateId,
                      'component_id' => 38,
                      'studioLogo' => $studioLogo,
                      'successMessage' => $successMessage,
                      'primaryColor' => $primaryColor,
                      'secondaryColor' => $secondaryColor,
                      'imageData' => $imageData
                     
              ])
              </div>
          </div>
        @endif
        @if($component_id == 34) 
        <div class="spin-section">
            <div>
                @include('frontend.spinning_wheel', [
                  'formDetails' => $formDetails,
                  'studioId' => $studio_id,
                  'data' => $data,
                  'templateId' => $templateId,
                  'component_id' => 34,
                  'studioLogo' => $studioLogo,
                  'successMessage' => $successMessage,
                  'primaryColor' => $primaryColor,
                  'secondaryColor' => $secondaryColor
                ])
            </div>
          </div>
            @endif
    </div>
</div>
<div class="prize-form-image">
    <img src="{{ asset('images/studio_images/'. $selected_studio_images[0]['img_name']) }}" class="mCS_img_loaded" alt="">
</div>

@endsection 
@push('scripts')
<script type="text/javascript">     
$(document).ready(function () {
    $("#spinButton").click(function () {
        validationMsg = validateFields();
        if (validationMsg == "success") {
        // If validation is successful, trigger the spinning of the wheel
        $('html, body').animate({scrollTop:130}, 'slow');
        if (window.matchMedia('(max-width: 991px)').matches) { 
          $('html, body').animate({scrollTop:650}, 'slow');
        }
        if (window.matchMedia('(max-width: 767px)').matches) { 
          $('html, body').animate({scrollTop:700}, 'slow');
        }
        spin();
        setTimeout(function () {
          if (window.matchMedia('(min-width: 992px)').matches) { 
            $('html, body').animate({scrollTop:130}, 'slow');
          }
          if (window.matchMedia('(max-width: 991px)').matches) { 
            $('html, body').animate({scrollTop:40}, 'slow');
          }
        }, 5000);
      } else {
        // If validation fails, display an error message
        $("#validationErrors").html(validationMsg).show();
        var validationErrors = document.getElementById("validationErrors");
        setTimeout(function () {
            validationErrors.style.display = "none";
        }, 3000);
        
      }
    });

    // Date Range changes - 86cugq7cp
    if ($('.datepicker').length > 0) {
        $('.single_date').datepicker({
            beforeShow: function(input, inst) {            
                $('.body').addClass('active-overflow-hidden');
            },
            onSelect: function(selectedDate){ 
                $('.body').removeClass('active-overflow-hidden');
            },
            onClose: function(input, inst) { 
                $('.body').removeClass('active-overflow-hidden');
            },
            changeMonth: true, // Allow changing month
            changeYear: true,  // Allow changing year
            showButtonPanel: false,
            dateFormat: "dd/mm/yy",
            yearRange: "-70:+30"
        
        });

        $('.single_date').on('keydown paste', function(e) {
            e.preventDefault();
        });
    }

    // Date Range based questions - 86cugq7cp
    var date2 = null; // Variable to store the selected start date
    });  
      
      function validateFields() {

        var form = document.getElementById("prizeform");

        // Create a FormData object
        var formData = new FormData(form);

        // Convert FormData to a plain JavaScript array
        var formDataArray = Array.from(formData);
        var errorCount = 0;
        $(".mandatory_cls").each(function() {
        var checkMandatory = $(this).text();
        if (checkMandatory.trim() === "*") {
            var componentId = $(this).closest(".form-group").find("input, textarea, select").attr("id");
            var componentValue = $("#" + componentId).val();
            if (componentValue.trim() === "") {
                errorCount++;
            }
        }
    });
      
        if (errorCount > 0) {
          return "Enter all mandatory fields!";
      }

        emailValue =  {!! json_encode($mainEmailId) !!}
        phoneValue =  {!! json_encode($mainPhoneId) !!}
        nameValue =  {!! json_encode($mainNameId) !!}
        
        var email = $("#" + emailValue + "").val();
        var phone = $("#" + phoneValue + "").val();
        var name = $("#" + nameValue + "").val();
        
        if (email !== "" && phone !== "" && name !== "") {
          if (validateEmail(email)) {
            if (validatePhoneNumber(phone)) {
              $validation =  performServerValidation( email, phone, emailValue, phoneValue, formDataArray);
              if($validation['isValid'] == 1) {
                return "success";
              } else {
                return $validation['msg']; 
              }
            } else {
              return "Invalid phone number!";
            }
          } else {
            return "Invalid Email Id!";
          }
         
        //  return true;
        }  
        else {

          return "Enter all mandatory fields!";
        }
      }

      function validateEmail(email) {
    // Regular expression for a basic email validation
        var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

    // Test the email against the regular expression
         return emailRegex.test(email);
      }

      function validatePhoneNumber(phoneNumber) {
          // Regular expression for a basic numeric phone number validation
          var phoneRegex = /^[0-9]{8,}$/;

          // Test the phone number against the regular expression
          return phoneRegex.test(phoneNumber);
      }

      // Function to perform server-side validation
      function performServerValidation(email, phone, emailValue, phoneValue, formDataArray) {
          var validationarr = {};
          var isValid = false;
          var msg = '';
          var csrfToken = "{{ csrf_token() }}";
          
          var template_id = {!! json_encode($templateId) !!};
          var studio_id = {!! json_encode($studio_id) !!};
          var component_id = {!! json_encode($component_id) !!};
          
          $.ajax({
              type: "POST",
              url: "{{ route('form.validateFormInputs') }}",
              beforeSend: function() {
                $('.loader-new').addClass("active-loader");
                $('#scratchButton').attr("disabled", true);
                $('#scratchButton').css('cursor','default');
              },
              data: {
                  email: email, 
                  phone: phone, 
                  template_id: template_id, 
                  studio_id: studio_id, 
                  component_id: component_id, 
                  emailValue: emailValue, 
                  phoneValue: phoneValue, 
                  formDataArray: formDataArray
              },
              async: false,
              headers: {
                  'X-CSRF-TOKEN': csrfToken
              },
              success: function(response) {
                  isValid = response.isValid;
                  msg = response.msg;
                  formUserId = response.formUser;
                  if(isValid == 1){
                    $('#prizeformuserid').val(formUserId);
                  }
                  $('.loader-new').removeClass("active-loader");
              },
              error: function(error) {
                  console.error("Error performing server-side validation", error);
              },
          });

          validationarr['isValid'] = isValid;
          validationarr['msg'] = msg;
          return validationarr;
      }



    
    // $(document).off("click", ".tabchoose").on("click", ".tabchoose", function () {
    
    //     var currenttab = $(this).attr('tabid');
    //     $('.tab_section').hide();
    //     $('.tabchoose .nav-link').removeClass('active');
    //     $(this).find('a').addClass('active');
    //     $('#'+currenttab+'').addClass('active show');
    //     $('#'+currenttab+'').show();
        
    //     //$('a[href="#' + currenttab + '"]').tab('show');

    // });
</script>
@endpush('scripts')