@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="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>{{$formDetails->form_name}}</h2>
                      
                      <div class="ffd-container">
                          <div class="ffd-form">
                              <!--  div for errror message -->
                              <div class="row">
                                  <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); @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 your 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>
                      </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);
            
          }
        });
      });  
      
      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++;
            }
        }
    });
        console.log("errorCount"+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)) {
              $msg =  performServerValidation( email, phone, emailValue, phoneValue, formDataArray);
              if($msg == 1) {
                return "success";
              } else {
                return "Email and Phone number already exists!"; 
              }
            } 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 isValid = false;
        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') }}",
          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;
          },
          error: function (error) {

            console.error("Error performing server-side validation", error);
          },
        });

        return isValid;
      }



    
    // $(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')