@extends("layouts.main")
@section('title', trans('core.title_post_job'))
@section("content")
<script type="text/javascript" src="{{ secure_asset('assets/js/jquery-nicelabel.js') }} "></script>
<div class="pcoded-content">

  <div class="hme-loading-mask">
    <div class="hme-loading-container">
        <div class="hme-dual-ring"></div>
        <div>Please wait, Loading...</div>
    </div>
  </div> 

  <div class="pcoded-inner-content">
    <div class="main-body">
      <div class="page-wrapper">
        <div class="page-header">
          <div class="page-header-title">
            <h4>@if(!empty($customized_job_id)) Edit Jobs Page @else Create New Jobs Page @endif</h4>
          </div> 
          <div class="page-header-breadcrumb">
            <ul class="breadcrumb-title">
              <li class="breadcrumb-item">
                <a href="#!">
                  <span class="hiremee-home"></span>
                </a>
              </li>
              <li class="breadcrumb-item">
                <a href="{{ secure_url('blog-create')}}">
                  Dashboard
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div class="page-body">
          <div class="row">
            <div class="col-md-12 col-lg-12">
              <div class="row">
                <div class="col-md-9 col-lg-9">
                  <div class="card-unborder card-block">

                      <div class="page-header edit-page">
                        <div class="page-header-title">
                          <h4>About the Job Opportunity</h4>
                        </div>
                           @if(empty($customized_job_id))
                           <a href="{{secure_url('dynamic-jobs-page')}}" class="edit-button">Activate / De-activate Customized Job Pages</a>
                           @endif
                      </div>
                    <!-- <div class="row">
                      <div class="col-md-12">
                        <p class="text-custom d-flex align-items-center">
                          <i class="hiremee-info f-22 p-r-10"></i> Fill in the basic job details you have 
                        </p>
                      </div>
                    </div> -->
                    {!! Form::open(['url'=>'job/save-customized-jobs','method'=>'POST','id'=>'js-jobpost-form','autocomplete'=>'off']) !!}
                    <input type="hidden" id="job_ids" value="{{$customized_job_details->job_ids ?? ''}}">
                    <input type="hidden" name ="customized_job_id" id="customized_job_id" value="{{$customized_job_id ?? ''}}">
                    <div class="row">
                      <div class="col-md-12">
                        <label class="profile-label">Job Title<sup class="text-danger f-15">*</sup>:</label>
                      </div>
                    </div>
                    <div class="row form-group">
                      <div class="col-md-12">
                        {!! Form::text('job_title',$customized_job_details->job_title ?? '',['class'=>'form-control','placeholder'=>'Ex: Social marketing Manager','id'=>'job_title','maxlength'=>255]) !!}
                        <span id="job_title-error"></span>
                      </div>                                          
                    </div>
                     <div class="row">
                      <div class="col-md-12">
                        <label class="profile-label">Job Location
                          <sup class="text-danger f-15">*</sup>
                          <span class="f-12">(At least one location required)</span>:
                        </label>
                      </div>
                    </div>
                    <div class="row form-group">
                      <div class="col-md-12">
                        <div class="tags_max_char">
                          {!! Form::select('locations[]',$locations,!empty($customized_job_details->loc_ids) ? explode(',',$customized_job_details->loc_ids) : null, ['id' => 'job_locations','class'=> 'form-control js-select2','multiple','data-placeholder'=>'Select Location' ]) !!}
                            <span id="job_locations-error"></span>
                        </div>                        
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-md-12">
                        <label class="profile-label">Job Category
                          <sup class="text-danger f-15"></sup>:
                        </label>
                      </div>
                    </div>
                    <div class="row form-group">
                      <div class="col-md-12">
                        <div class="tags_max_char">
                            {!! Form::select('industries[]',$industries,!empty($customized_job_details->cat_ids) ? explode(',',$customized_job_details->cat_ids) : null, ['id' => 'job_industries','class'=> 'form-control js-select2','multiple','data-placeholder'=>'Select a Job Category' ]) !!}
                        </div>
                        <span id="industries-error"></span>
                    </div>                      
                    </div>

                    <div class="form-group row">
                      <label class="col-sm-12 profile-label">Meta Key :</label>
                      <div class="col-md-12">
                      {!!Form::textarea('metakey',$customized_job_details->metakey ?? '',['class'=>'form-control','placeholder'=>'Enter Meta Key','id'=>'metakey'])!!}                      
                      </div>
                    </div>

                    <div class="form-group row">
                      <label class="col-sm-12 profile-label">Meta Key description :</label>
                      <div class="col-md-12">
                      {!! Form::textarea('metadesc',$customized_job_details->metadesc ?? '',['class'=>'form-control','placeholder'=>'Enter Meta Description','id'=>'metadesc'])!!}
                       
                      </div>
                    </div>

                     <div class="row form-group m-b-0">
                      <div class="col-sm-4 p-t-10 profile-label">
                          Show Page In Industry List :
                      </div>
                      <div class="col-sm-2 p-t-10">
                          <div class='switch'>                         
                              <input type="checkbox" name="industry_listing_required" class="js-pro-switch" id='js-pro-industry' @if(!empty($customized_job_details->listing_required_in_industry) && $customized_job_details->listing_required_in_industry==1) checked @endif>
                              <span class='checked'></span>
                              <label for="js-pro-industry" class="js-pro-industry_value">@if(!empty($customized_job_details->listing_required_in_industry) && $customized_job_details->listing_required_in_industry==1) YES @else NO @endif</label>
                          </div>
                      </div>
                      <div class="col-sm-4 p-t-10 profile-label">
                          Show Page In Location List :
                      </div>
                      <div class="col-sm-2 p-t-10">
                          <div class='switch'>                         
                              <input type="checkbox" name="location_listing_required" class="js-pro-switch" id='js-pro-location'  @if(!empty($customized_job_details->listing_required_in_location) && $customized_job_details->listing_required_in_location==1) checked @endif>
                              <span class='checked'></span>
                              <label for="js-pro-location" class="js-pro-location_value">@if(!empty($customized_job_details->listing_required_in_location) && $customized_job_details->listing_required_in_location==1) YES @else NO @endif</label>
                          </div>
                      </div>
                  </div>

                    <div class="row form-group m-b-0">
                      <div class="col-sm-3 p-t-10 profile-label">
                        Employment Type :
                      </div>
                        <div class="col-sm-7  p-t-10 js-radio-box">
                        @if(!is_null($emp_types))
                        @foreach ($emp_types as $e_id=>$type)                        
                        <input class="text-nicelabel" data-nicelabel='{"position_class": "text_radio", "checked_text": "{{ $type }}", "unchecked_text": "{{ $type }}"}' 
        
                        @php $emp_type =  $customized_job_details->emp_type?? 5; @endphp
                         
                         @if($emp_type == $e_id) checked @endif

                        type="radio" name="emp_type" value="{{ $e_id }}" />  
                        @endforeach
                        @endif
                        <span id="emp_type-error"></span>
                      </div>                      
                    </div>
                    <div class="pro-color-tab-list-container" id="js_question_listing_container">
                      <div class="job_list_render_section">
                      @if($flag == 0)
                         {!! $component!!}
                      @endif
                      </div>                         
                 </div>
                    <div class="row">
                      <div class="col-md-12">                        
                        <button type="submit" data-animation="false" data-toggle="tooltip" title="Save" class="btn btn-outline-info m-r-15">
                          Save </button>
                         <button type="button" data-animation="false" data-toggle="tooltip" title="Reset" class="btn btn-outline-info m-r-5" onClick="formReset()"> Reset </button>
                      </div>
                    </div>
                    {!! Form::close() !!}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
<input type="hidden" id="total_count">
  <script type="text/javascript">   
    $(document).on("change","#job_locations",function(e){
          var count = 0;
          $.each($("#job_locations option:selected"), function(){if ( $(this).val() > 0) {++count;}});
          if(count > 0){
            jobCreationDetailsList();
          }
      });
   $(document).on("change","#job_industries",function(e){
          var count = 0;
          $.each($("#job_industries option:selected"),  function(){if ( $(this).val() > 0) {++count;}});
          if(count > 0){
            jobCreationDetailsList();
          }
      }); 
    function jobCreationDetailsList(){
      var loc_ids = $("#job_locations").val();
      var industry_id = $("#job_industries").val();
      var job_ids = $('#job_ids').val();   
       var emp_type = $('[name=emp_type]:checked').val();      
      $('.hme-loading-mask').fadeIn();
      // $('#js-frontsearch-load-more').attr("data-page",2);
      $.ajax({
        url: "{{secure_url('customized-jobs-list')}}",
        type:"get",
        data:{industries:industry_id,locations:loc_ids,is_search:'1',job_ids:job_ids,emp_type:emp_type},
        success: function(response){
          if(response.status == 200){
              $('.job_list_render_section').html(response.html);
              $('#total_count').val(response.total_count);
          } else{
            swal({
              html: true, 
              title: '<span class="sweet-danger-text">Something Went Wrong</span>', 
              text: "No records found, Sorry for the inconvenience.",
              type: "error",
              showCancelButton: false,
              confirmButtonText: "OK",
              closeOnConfirm: false,
              confirmButtonColor: '#f0443a',
            });
          }
        $('.hme-loading-mask').fadeOut();
        }
      })
    }
    $(document).on("click", "#js-frontsearch-load-more", function () {
        var checkBox = document.getElementById('all_checked_ids').value;
        var job_ids = $('#job_ids').val();
        var __this = $(this),
            __data =$("#js-jobpost-form").serialize()+"&page="+__this.attr('data-page')+"&all_checked="+checkBox+"&job_ids="+job_ids;
            __loader = $("body").find('.hme-loading-mask');
        $.ajax({
            url: "{{ url('customized-jobs-list') }}",
            dataType: "json",
            beforeSend: function () {
                __this.addClass("d-none");
                __loader.fadeIn()
            },
            data: __data,
            success: function (response) {
                $("body").find(".job_list_render_section").append(response.html);
                // $('.js-corp-job-candidates-popover').popover();
                if (response.hasmore) {
                    __this.attr("data-page", response.next_page).removeClass("d-none");
                    __loader.fadeOut();
                     __this.attr("data-page", response.current_page).addClass("d-none");
                } else {
                    __loader.fadeOut();
                }
            }
        });
        return false;
    });
    
    $('.js-pro-switch').on('change',function(){
    var id = $(this).prop('id');
    var status = $(this).is(':checked');
    if(status == false){
        $(this).val('0');
        $('.'+id+'_value').text('NO')
    } else {
        $(this).val('1');
        $('.'+id+'_value').text('YES')
    }
    });

    function formReset(){
      $('#js-jobpost-form').validate().resetForm();
      $('body').find('#js-jobpost-form')[0].reset();
      $('#locations').val('').trigger('change');
      $('#industries').val('').trigger('change');
      $('.js-pro-industry_value').text('NO');
      $('.js-pro-location_value').text('NO');
      $(".job_list_render_section").html("");
    }

    @if(!empty($customized_job_id)) 

    jobCreationDetailsList();
    @endif

    $('[name=emp_type]').click(function(){
     jobCreationDetailsList();

   })
    

  </script>
  @endsection