@extends('frontend.layout.app')
@section('content')
<section class="mainBanner innerBanner">
   <div class="overlay"> </div>
   <div class="container">
      <h2 class="text-center">How to Get Kosher Certification</h2>
   </div>
</section>
<!-- <section class="mainBanner text-center"> -->
<!-- <h1 style="color: white;">How to Get Kosher Certification</h1>
         <div class="container"> -->
<!-- @if ($errors->any())
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif -->

<!-- @if (session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
        @endif
         </div>
      </section> -->
<section class="certificationSteps boxBg" id="certificate_steps">
   <div class="container">
      <div class="row">
         <div class="col-md-12">
            <h2 class="text-center"><span>Steps to</span> Certification</h2>
            <p class="paddingLR200 text-center">Kosher refers to religious dietary laws, followed by Jews, which have
               been applied to the increasingly complex world of food ingredients and food production.</p>
         </div>
      </div>
      <div class="steps">
         <div class="row">
            <div class="col-lg-3 col-md-6">
               <div class="stepBlock">
                  <div class="stepNumber">01</div>
                  <div class="stepHeading"><img src="{{ asset('frontend_assets/images/step-icon-01.jpg') }}"
                        alt="">Application Form</div>
                  <p>To get started, complete our short application form.</p>
               </div>
            </div>
            <div class="col-lg-3 col-md-6">
               <div class="stepBlock">
                  <div class="stepNumber">02</div>
                  <div class="stepHeading"><img src="{{ asset('frontend_assets/images/step-icon-01.jpg') }}"
                        alt="">Quotation</div>
                  <p>Your application will be assessed by our experts and we will provide you with a quotation.</p>
               </div>
            </div>
            <div class="col-lg-3 col-md-6">
               <div class="stepBlock">
                  <div class="stepNumber">03</div>
                  <div class="stepHeading"><img src="{{ asset('frontend_assets/images/step-icon-01.jpg') }}"
                        alt="">Assessment</div>
                  <p>We will require additional information about your ingredients and manufacturing process.</p>
               </div>
            </div>
            <div class="col-lg-3 col-md-6">
               <div class="stepBlock">
                  <div class="stepNumber">04</div>
                  <div class="stepHeading"><img src="{{ asset('frontend_assets/images/step-icon-01.jpg') }}"
                        alt="">Certification</div>
                  <p>Ensuring your process and ingredients meet the highest kosher standards we will issue you with a
                     contract to sign.</p>
               </div>
            </div>
         </div>
      </div>
   </div>
</section>
<section class="" id="kosher_form_apply">
   <div class="container">
      <div class="row">
         <div class="col-md-12">
            <h2 class="text-center">Apply For <span>Kosher Certification</span></h2>
            <p class="paddingLR200 text-center">We want to serve you better and are committed to giving you the best
               kosher certification package for your needs. Please take the time to fill in the form below. Following
               your application we will be in touch with you shortly.</p>
         </div>
      </div>
      <div class="row">
         <div class="col-md-12">
            <form id="certificateForm" action="{{ route('certificates.store') }}" method="POST">
               @csrf
               <div class="form-section">
                  <h3>Company Details</h3>
                  <div class="form-group row">
                     <div class="col-md-6">
                        <label for="company-name">Company Name *</label>
                        <input type="text" id="company-name" name="company_name" class="form-control"
                           placeholder="Enter company name">
                        <!-- @error('company_name')
                     <div class="text-danger">{{ $message }}</div>
                  @enderror -->
                     </div>
                     <div class="col-md-6">
                        <label for="factory-name">Factory Name (if different)</label>
                        <input type="text" id="factory-name" name="factory_name" class="form-control"
                           placeholder="Enter factory name (optional)">
                        <!-- @error('factory_name')
                     <div class="text-danger">{{ $message }}</div>
                  @enderror -->
                     </div>
                  </div>
                  <div class="form-group row">
                     <div class="col-md-6">
                        <label for="address-line1">Address *</label>
                        <input type="text" id="address" name="address_line1" class="form-control" placeholder="Enter address">
                        <!-- @error('address')
                     <div class="text-danger">{{ $message }}</div>
                  @enderror -->
                     </div>
                     <div class="col-md-6">
                        <label for="city">City *</label>
                        <input type="text" id="city" name="city" class="form-control" placeholder="Enter city">
                        <!-- @error('city')
                     <div class="text-danger">{{ $message }}</div>
                  @enderror -->
                     </div>
                  </div>
                  <div class="form-group row">
                     <div class="col-md-6">
                        <label for="state">State*</label>
                        <input type="text" id="state" name="state" class="form-control" placeholder="Enter state">
                        <!-- @error('state')
                     <div class="text-danger">{{ $message }}</div>
                  @enderror -->
                     </div>
                     <div class="col-md-6">
                        <label for="zip-code">Zip code/Postcode *</label>
                        <input type="text" id="zip-code" name="zip_code" class="form-control"
                           placeholder="Enter zip or postcode">
                        <!-- @error('zip_code')
                     <div class="text-danger">{{ $message }}</div>
                  @enderror -->
                     </div>
                  </div>
                  <div class="form-group row">
                     <div class="col-md-6">
                        <label for="country">Country *</label>
                        <input type="text" id="country" name="country" class="form-control" placeholder="Enter country">
                        <!-- @error('country')
                     <div class="text-danger">{{ $message }}</div>
                  @enderror -->
                     </div>
                     <div class="col-md-6">
                        <label for="website">Website URL (optional)</label>
                        <input type="url" id="website" name="website_url" class="form-control"
                           placeholder="Enter website URL (optional)">

                     </div>
                  </div>
               </div>
               <div class="form-section">
                  <h3>Contact Details</h3>
                  <div class="form-group row">
                     <div class="col-md-6">
                        <label for="contact-name">Contact Name *</label>
                        <input type="text" id="contact-name" name="contact_name" class="form-control"
                           placeholder="Enter contact name">
                        <!-- @error('contact_name')
                     <div class="text-danger">{{ $message }}</div>
                  @enderror -->
                     </div>
                     <div class="col-md-6">
                        <label for="position">Position</label>
                        <input type="text" id="position" name="position" class="form-control"
                           placeholder="Enter position">
                        <!-- @error('position')
                     <div class="text-danger">{{ $message }}</div>
                  @enderror -->
                     </div>
                  </div>
                  <div class="form-group row">
                     <div class="col-md-6">
                        <label for="telephone">Direct Telephone Number *</label>
                        <input type="tel" id="telephone" name="telephone" class="form-control"
                           placeholder="Enter telephone number">
                        <!-- @error('telephone')
                     <div class="text-danger">{{ $message }}</div>
                  @enderror -->
                     </div>
                     <div class="col-md-6">
                        <label for="email">Email *</label>
                        <input type="email" id="email" name="email" class="form-control"
                           placeholder="Enter email address">
                        <!-- @error('email')
                     <div class="text-danger">{{ $message }}</div>
                  @enderror -->
                     </div>
                  </div>
               </div>
               <div class="form-section">
                  <h3>Production Details</h3>
                  <div class="row">
                     <div class="col-md-6">
                        <div class="form-group">
                           <label>Do you currently hold kosher certification? *</label>
                           <div class="d-flex">
                              <div class="form-check">
                                 <input type="radio" id="kosher-yes" name="kosher_certification" value="yes"
                                    class="form-check-input">
                                 <label for="kosher-yes" class="form-check-label">Yes</label>
                              </div>
                              <div class="form-check">
                                 <input type="radio" id="kosher-no" name="kosher_certification" value="no"
                                    class="form-check-input">
                                 <label for="kosher-no" class="form-check-label">No</label>
                              </div>
                              <!-- @error('kosher_certification')
                          <div class="text-danger">{{ $message }}</div>
                       @enderror -->
                           </div>
                        </div>
                        <div class="form-group mt-2">
                           <label>Is the factory manufacturing products with:</label>
                           <div class="mb-1">
                              <label>Dairy ingredients *</label>
                              <div class="d-flex">
                                 <div class="form-check">
                                    <input type="radio" id="dairy-yes" name="dairy_ingredients" value="yes"
                                       class="form-check-input">
                                    <label for="dairy-yes" class="form-check-label">Yes</label>
                                 </div>
                                 <div class="form-check">
                                    <input type="radio" id="dairy-no" name="dairy_ingredients" value="no"
                                       class="form-check-input">
                                    <label for="dairy-no" class="form-check-label">No</label>
                                 </div>
                                 <div class="form-check">
                                    <input type="radio" id="dairy-not-sure" name="dairy_ingredients" value="not-sure"
                                       class="form-check-input">
                                    <label for="dairy-not-sure" class="form-check-label">Not Sure</label>
                                 </div>
                                 <!-- @error('dairy_ingredients')
                            <div class="text-danger">{{ $message }}</div>
                         @enderror -->
                              </div>
                           </div>
                           <div>
                              <label>Meat ingredients *</label>
                              <div class="d-flex mb-1">
                                 <div class="form-check">
                                    <input type="radio" id="meat-yes" name="meat_ingredients" value="yes"
                                       class="form-check-input">
                                    <label for="meat-yes" class="form-check-label">Yes</label>
                                 </div>
                                 <div class="form-check">
                                    <input type="radio" id="meat-no" name="meat_ingredients" value="no"
                                       class="form-check-input">
                                    <label for="meat-no" class="form-check-label">No</label>
                                 </div>
                                 <div class="form-check">
                                    <input type="radio" id="meat-not-sure" name="meat_ingredients" value="not-sure"
                                       class="form-check-input">
                                    <label for="meat-not-sure" class="form-check-label">Not Sure</label>
                                 </div>
                                 <!-- @error('meat_ingredients')
                            <div class="text-danger">{{ $message }}</div>
                         @enderror -->
                              </div>
                           </div>
                           <div>
                              <label>Grape ingredients *</label>
                              <div class="d-flex mb-1">
                                 <div class="form-check">
                                    <input type="radio" id="grape-yes" name="grape_ingredients" value="yes"
                                       class="form-check-input">
                                    <label for="grape-yes" class="form-check-label">Yes</label>
                                 </div>
                                 <div class="form-check">
                                    <input type="radio" id="grape-no" name="grape_ingredients" value="no"
                                       class="form-check-input">
                                    <label for="grape-no" class="form-check-label">No</label>
                                 </div>
                                 <div class="form-check">
                                    <input type="radio" id="grape-not-sure" name="grape_ingredients" value="not-sure"
                                       class="form-check-input">
                                    <label for="grape-not-sure" class="form-check-label">Not Sure</label>
                                 </div>
                                 <!-- @error('grape_ingredients')
                            <div class="text-danger">{{ $message }}</div>
                         @enderror -->
                              </div>
                           </div>
                           <div>
                              <label>Fish ingredients *</label>
                              <div class="d-flex mb-1">
                                 <div class="form-check">
                                    <input type="radio" id="fish-yes" name="fish_ingredients" value="yes"
                                       class="form-check-input">
                                    <label for="fish-yes" class="form-check-label">Yes</label>
                                 </div>
                                 <div class="form-check">
                                    <input type="radio" id="fish-no" name="fish_ingredients" value="no"
                                       class="form-check-input">
                                    <label for="fish-no" class="form-check-label">No</label>
                                 </div>
                                 <div class="form-check">
                                    <input type="radio" id="fish-not-sure" name="fish_ingredients" value="not-sure"
                                       class="form-check-input">
                                    <label for="fish-not-sure" class="form-check-label">Not Sure</label>
                                 </div>
                                 <!-- @error('fish_ingredients')
                            <div class="text-danger">{{ $message }}</div>
                         @enderror -->
                              </div>
                           </div>
                        </div>
                        <div class="form-group">
                           <label>Are any products processed or packaged at a different site? *</label>
                           <div class="d-flex">
                              <div class="form-check">
                                 <input type="radio" id="different-site-yes" name="different_site" value="yes"
                                    class="form-check-input">
                                 <label for="different-site-yes" class="form-check-label">Yes</label>
                              </div>
                              <div class="form-check">
                                 <input type="radio" id="different-site-no" name="different_site" value="no"
                                    class="form-check-input">
                                 <label for="different-site-no" class="form-check-label">No</label>
                              </div>
                              <!-- @error('different_site')
                          <div class="text-danger">{{ $message }}</div>
                       @enderror -->
                           </div>
                        </div>
                     </div>
                     <div class="col-md-6">
                        <div class="form-group">
                           <label for="product-description">Please give us a short description of your products and
                              manufacturing processes *</label>
                           <textarea id="product-description" name="product_description" rows="8" class="form-control"
                              placeholder="Enter product description and manufacturing processes"></textarea>
                           <!-- @error('product_description')
                        <div class="text-danger">{{ $message }}</div>
                     @enderror -->
                        </div>
                        <div class="form-group">
                           <label for="certification-date">When do you need your certification to commence?
                              (optional)</label>
                           <input type="date" id="certification-date" name="certification_date" class="form-control"
                              placeholder="Select certification commencement date (optional)">
                        </div>
                        <div class="form-group">
                           <label for="interest-reason">What is the main reason for your interest? (optional)</label>
                           <select id="interest-reason" name="interest_reason" class="form-control">
                              <option value="">-- Select --</option>
                              <option value="export-na">Export to North America</option>
                              <option value="export-eu">Export to Europe</option>
                              <option value="export-other">Export to Other Regions</option>
                              <option value="domestic-market">Domestic Market</option>
                              <option value="customer-request">Customer Request</option>
                              <option value="other">Other</option>
                           </select>
                           <!-- @error('interest_reason')
                        <div class="text-danger">{{ $message }}</div>
                     @enderror -->
                        </div>
                        <div class="form-group">
                           <label for="hear-about-us">Where did you hear about us? *</label>
                           <select id="hear-about-us" name="hear_about_us" class="form-control">
                              <option value="">-- Select --</option>
                              <option value="online-search">Online Search</option>
                              <option value="social-media">Social Media</option>
                              <option value="recommendation">Recommendation</option>
                              <option value="advertisement">Advertisement</option>
                              <option value="other">Other</option>
                           </select>
                           <!-- @error('hear_about_us')
                        <div class="text-danger">{{ $message }}</div>
                     @enderror -->
                        </div>
                     </div>
                  </div>
                  <div class="form-group row mt-4">
                     <div class="col-md-12">
                        <div class="form-check">
                           <input type="checkbox" id="newsletter" name="newsletter" class="form-check-input">

                           <label for="newsletter" class="form-check-label">I would like to receive newsletter.</label>
                        </div>
                        <div class="form-check mt-2">
                           <input type="checkbox" id="agree" name="agree" class="form-check-input">

                           <label for="agree" class="form-check-label">By using this form you agree with the storage and
                              handling of your data in accordance with the <a href="#" target="_blank">Privacy
                                 Policy</a>.</label>
                           <!-- @error('agree')
                        <div class="text-danger">{{ $message }}</div>
                     @enderror -->
                        </div>
                     </div>
                  </div>
                  <div class="mt-3 submit-button text-center">
                     <button type="submit" class="btn customBtn01 customBtn01Large gradientBtn">Submit</button>
                  </div>
               </div>
            </form>

         </div>
      </div>
   </div>
</section>
<section class="pt-0">
   <div class="container">
      <div class="row">
         <div class="col-md-12">
            <div class="cta02 greenBg">
               <h4 class="text-white">All information is kept in the strictest confidence.</h4>
               <h2 class="text-white">For assistance call Orthodox Kosher Certification (OKC) at +1(0) 23 4567 8900 or
               </h2>
               <a href="{{route('contact_us')}}" class="customBtn01 gradientBtn">Contact Us</a>
            </div>
         </div>
      </div>
   </div>
</section>
<section class="greyBg" id="confi">
   <div class="container">
      <div class="row">
         <div class="col-lg-12">
            <h2>Confidentiality</h2>
            <p>Orthodox Kosher Certification (OKC) understands that companies may have concerns about disclosing
               sensitive information. companies should be assured that confidentiality is of the highest importance to
               Orthodox Kosher Certification (OKC). Orthodox Kosher Certification (OKC) will not communicate, divulge or
               use, for the benefit of any other person, partnership, association or corporation, any of the trade
               secrets, formulae or secret processes used by the company that may be communicated to Orthodox Kosher
               Certification (OKC) by virtue of their application. even when the company does not proceed with kosher
               certification, all information will be kept in the strictest confidence. to read more about our
               confidentiality & security click here. alternatively, if you have any further questions regarding
               confidentiality please do not hesitate to contact us.</p>
         </div>
      </div>
   </div>
</section>
<section class="backgroundBg01 text-center text-white subscribe">
   <div class="container">
      <div class="row">
         <div class="col-lg-10 m-auto">
            <h2 class="text-white">Subscribe to Our Newsletter</h2>
            <p>By subscribing to our newsletter you agree to the Ortho-K</p>
            <form role="search" method="get" action="#" autocomplete="off" class="subscribeForm">
               <label class="screen-reader-text" for="searchInput"></label>
               <input type="text" class="search-field" value="" name="searchInput" id="searchInput"
                  placeholder="Enter Your Email Address" autocomplete="off">
               <input type="submit" id="subscribe" class="search-submit gradientBtn" value="Subscribe Now">
            </form>
         </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>
   $(document).ready(function () {
      $('#certificateForm').on('submit', function (e) {
         e.preventDefault();

         
         $('.text-danger').remove();
         $('.form-control').removeClass('is-invalid');
         $('.form-check-input').removeClass('is-invalid');

         let form = $(this);
         let url = form.attr('action');

         $.ajax({
            type: 'POST',
            url: url,
            data: form.serialize(),
            success: function (response) {
               Swal.fire({
                  title: 'Success!',
                  text: 'Certificate request submitted successfully!',
                  icon: 'success',
                  timer: 3000,
                  showConfirmButton: false
               }).then(() => {
                  location.reload(); 
               });
            },
            error: function (xhr) {
               if (xhr.status === 422) {
                  let errors = xhr.responseJSON.errors;

                  Swal.fire({
                     title: 'Validation Error!',
                     text: 'Please check your inputs.',
                     icon: 'error',
                     timer: 3000,
                     showConfirmButton: false
                  });

                  setTimeout(function () {
                     $.each(errors, function (key, value) {
                        var input = $('[name="' + key + '"]');
                        if (input.length) {
                          
                           input.addClass('is-invalid');
                           
                           input.after('<div class="text-danger">' + value[0] + '</div>');
                        } else {
                           
                           var radioButtons = $('[name="' + key + '"]');
                           radioButtons.closest('.form-check').append('<div class="text-danger">' + value[0] + '</div>');
                        }
                     });
                  }, 3000); 
               }
            }
         });
      });
   });


</script>
@endsection('content')