@extends('main')
@section('content')
<style>
  .form-container {
    background: #fff;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 400px;
} 
</style>
<main>

    <section id="blog" class="blog-area p-relative pt-95 pb-90 fix">
      <div class="container">
        <div class="row justify-content-center">
          <div class="col-xl-8 col-lg-10">
            <div class="section-title text-center mb-80">
              <h2>Apply Now</h2>
            </div>
          </div>
        </div>
        <form id="contact-form">
          <div class="row col-10 m-auto">
          <div class="col-lg-12">                               
              <div class="contact-field p-relative c-subject mb-20">                                   
                  <input type="name" placeholder="Write your Name here" id="name">
              </div>
          </div>	
          <div class="col-lg-12">                               
            <div class="contact-field p-relative c-subject mb-20">                                   
                <input type="email" placeholder="Write your Email here" id="email">
            </div>
        </div>		
          <div class="col-lg-12">                               
            <div class="contact-field p-relative c-subject mb-20">                                   
                <textarea name="description" id="description" cols="30" rows="10"></textarea>
            </div>
        </div>		
        <div class="col-lg-12">                               
          <div class="contact-field p-relative c-subject mb-20">     
            <label for="" class="label">Upload your CV</label>                              
              <input type="file" name="resume" id="resume">
          </div>
      </div>							
          <div class="col-lg-12">
             
              <div class="slider-btn">  
                  <button class="btn ss-btn" type="submit" data-animation="fadeInRight" data-delay=".8s">Apply</button>                                        
              </div>                             
          </div>
      </div>
  </form>
      </div>
    </section>
</main>
@endsection

@push('scripts')
<script>
        
        $("#contact-form").on("submit", function (e) {
        e.preventDefault();
        var name = $("#name").val();
        var email = $("#email").val();
        var description = $("#description").val();
        var resume = $("#resume").val();

        // Check if the fields are empty
        if (name === "" || email === "") {
            alert("Please fill out all fields.");
            return; // Stop form submission if validation fails
        }
        var formData = new FormData();
        formData.append("name", $("#name").val());
        formData.append("email", $("#email").val());
        formData.append("description", $("#description").val());
        formData.append("resume", $("#resume")[0].files[0]); // Attach the file

        $.ajaxSetup({
            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content') }
        });

        $.ajax({
            url: '/apply_now',
            type: 'POST',
            processData: false,
            contentType: false,
            data: formData,
            success: function (response) {
                $("#name").val('');
                $("#email").val('');
                $("#description").val('');
                $("#resume").val('');
                alert("Application submitted successfully.");
            },
            error: function (response) {
                alert("Error submitting the application.");
            }
        });
    });

</script>
@endpush