@extends('website.layouts.app')
@section('title','Career')
@section('content')
<style>
    .strice{
        color: red !important;
    }
</style>
  <!-- start inner banner -->
    <section class="about-career">
        <h1 class="font-weight-bold text-center">Career</h1>
      
    </section>
    <!-- end inner banner -->
      <section class="about-us mt-5 aos-init aos-animate" data-aos="fade-up" data-aos-duration="950">
    <div class="container">
        <div class="sec-title bg-fill mb-3">
            <h4>Join our team of smart, passionate, and empathetic user experience professionals</h4> 
        </div>
        <div class="row " style="box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;">
            <div class="col-md-5">
                <div>
                    <img src="{{ asset('website') }}/images/resume.jpg" alt="">
                </div>
                
            </div>
            <div class="col-md-7 mt-top">
              <div> 

                <form class="needs-validation" method ="post" action="{{action('WebsiteController\WebsiteController@sendcareer')}}" enctype="multipart/form-data" id="add_career_page" >
                    @csrf
                  <div class="form-group">
                <label for="">Name <i class="strice">*</i></label>
                    <input type="text" class="form-control" id="inputEmail4" placeholder="Name" name="name" required onkeypress="return alphanumeric(event)">

                  </div>
                 
                 <div class="form-group">
                    <label for="">Email ID <i class="strice">*</i></label>

                    <input type="email"  pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,5}$" class="form-control" id="" placeholder="Email ID" name="email" required >

                  </div>

                  <div class="form-group">
                 <label for="">Phone No.<i class="strice">*</i></label>

                    <input  class="form-control" id="" name="phone" placeholder="Phone Number" type="tel" pattern="[0-9]+" inputmode="numeric" maxlength="10" onkeypress="return numbersplusonly(event)" required>

                  </div>
                 
                 
                  <div class="form-group">
                  <label for="">Your Message<i class="strice">*</i></label>

                    <textarea class="form-control" id="" rows="3" placeholder="Your Message" required name ="message"></textarea>
                  </div>
                    <div class="form-group">
                    <label for="">Resume<i class="strice">*</i></label>
                    <!--<input type="file" class="form-control" id="" name="resume_path" style="padding: 3px;" required>-->
                    <input type="file"  class="form-control" name="resume_path" id="file" class="form-control" accept=".pdf, .docx"  style="padding: 3px;" required>

                  </div>
                 
                   <div class="form-group">

                   <div class="white_submit"><button id="send" class="btn btn-white" type="submit"><img src="{{asset('website')}}/images/loader/ajax-loader.gif" alt="loader1" style="display:none; height:30px; width:auto;" id="loaderImg">Submit</button></div>
                  </div> 
                  



                 
                </form>
                </div>
        </div>
        
    </div>
</section>
<script>
    $validator = Validator::make($request->all(), [
            'file'   => 'mimes:doc,pdf,docx'
        ]);
</script>
@endsection

@section('js')
<script type="text/javascript">
$(document).on('submit', 'form#add_career_page', function(e) {
      e.preventDefault();
      var data = new FormData(this);
       $('img').show();
       $('button').prop("disabled",true);
//alert("hbhd"); 
      $.ajax({
          cache:false,
          contentType: false,
          processData: false,
          url:"{{action('WebsiteController\WebsiteController@sendcareer')}}",
          method: $(this).attr("method"),
          dataType: "json",
          data: data,
          success: function(response) {
            $('img').show();     
            $('button').prop("disabled", false); 
            if (response.success == 200) {
                toastr.success(response.message); 
                location.reload(true);
                
            } else {
                toastr.error(response.message);
            }
          }
      }); 
});
</script>


@endsection