@extends('layouts.admin')
@section('pageTitle')
  <title>Best Insurance | Profile,Product,Occupation Mapping</title>
@stop
@section('content')
<section class="content ">

  <div class="box">
        <div class="box-header">
          <div class="col-xs-6" >
          <p class="text-red">Note : Select occupation list that you don't want to show.</p>
          </div>
          <div class="col-xs-2" >
          <!-- <a href="" class="btn btn-success pull-left" id="add-btn" >Add mapping</a> -->
          </div>
          <div class="col-xs-2" >
           <a href="" class="btn btn-success pull-left" id="add-btn" >Add mapping</a>
           </div>
           <div class="col-xs-2" >
             <a href="#"  class="btn btn-info" id="bulk_import"><i class="fa fa-download"></i> Bulk Import</a>&nbsp;&nbsp;&nbsp; 
          </div>
        </div>
        <!-- /.box-header -->
        <div class="box-body ">
        {{Form::open(array('url' => '/account/mappings/store-Prfl-Prdct-Occup-Map', 'method' => 'POST','id' => 'formValidation'))}}
         
          <div class="form-group col-xs-4 required">
          <span class="control-label"></span>
            {{Form::label('profile',array())}}
            {{Form::select('profile_id',$profArray,null,array('id' => 'profile','class' =>'form-control'))}}
          </div>
          <div class="form-group col-xs-4 required">
          <span class="control-label"></span>
            {{Form::label('product',array())}}
           <select name="product_id" id="product" class="form-control">
                <option value="0">Select Product</option>
                <option value="34">Income Secure 150-AS</option>
                <option value="36">Income Secure 150-ASU</option>
                <option value="37">Income Bee 120-AS</option>
                <option value="38">Income Bee 120-ASU</option>
                <option value="39">Income Anchor-AS</option>
                <option value="40">Income Anchor-ASU</option>
                <option value="41">Best Income-12-AS</option>
                <option value="42">Best Income-24-AS</option>
                <option value="44">Mortgage Sheild</option>
                <option value="51">Mortgage Sheild Pro</option>
              </select>
           
          </div>

          <div class="form-group col-xs-4 required">
          <span class="control-label"></span>
            {{Form::label('Cover Type')}}
            <select name="cover_type" id="cover_type" class="form-control">
            <option name="All" >Select Cover Type</option>
            <option name="All" selected>All</option>
            <option name="All">ASU</option>
            <option name="All">AS</option>
            <option name="All">U</option>
            </select>
          </div>

          <div class="col-xs-12" >
         
          </div>
          <div class="col-xs-4">
            {{Form::label('Available Occupations',array())}}
            
            {{Form::select('',[],null,array('multiple' => true,'id' => 'multiselect','class' =>'form-control','size' => "8"))}}
          </div>
          <div class="col-xs-1">
          <div class="mappingbtns">
            {{Form::label('',array())}}
            <button type="button" id="multiselect_rightAll" class="btn btn-block"><i class="glyphicon glyphicon-forward"></i></button>

            <button type="button" id="multiselect_rightSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>

            <button type="button" id="multiselect_leftSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>

            <button type="button" id="multiselect_leftAll" class="btn btn-block"><i class="glyphicon glyphicon-backward"></i></button>
            </div>

          </div>
          <div class=" form-group col-xs-4 required">
            <span class="control-label"></span>
            {{Form::label('Selected Occupations',array())}}

            {{Form::select('to[]',[],null,array('multiple' => true,'id' => 'multiselect_to','class' =>'form-control','size' => "8"))}}

          </div>
          <div class="col-md-12">
          <br>
          </div>
          <div class="form-group col-md-6">
              {{Form::submit('Submit',array('class' => 'btn btn-success','id' => 'submit-btn'))}}
          </div>
      {{Form::close()}}
    </div>
        <!-- /.box-body -->
  </div>
  <div class="box">
    <div class="box-header">
      <h1 class="box-title"> Mappings list</h1>
    </div>
    <div class="box-body">
        <table class="table table-borderd table-hover" id="datatable">
          <thead>
            <tr>
              <th>Profile </th>
              <th>Product</th>
              <th class="actalign">Actions</th>
          </tr>
          </thead>
          <tbody>
            @if(isset($occ_pro_products))
              @foreach($occ_pro_products as $profProduct)
                <tr>
                  <td>{{ $profProduct->profile_title}} </td>
                 <td>{{ $profProduct->product_name}} - {{$profProduct->cover_type}}</td>
                  <td class="actalign"> 
                  
                  <a href="#" title="Edit"  id="edit-btn" class="edit-btn" profileId ='{{$profProduct->profile_id}}' productId='{{$profProduct->product_id}}' ><i class="fa fa-edit "></i></a></td>
                </tr>
              @endforeach
            @endif
          </tbody>
        </table>
    </div>
  </div>
</div>
</section>
<a data-target="#ConfirmReject" role="button" data-toggle="modal" id="rejectTrigger"></a>
<div class="modal fade" id="ConfirmReject">
    <div class="modal-dialog">
      <div class="modal-content">
          <!-- modal header -->
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
            <!-- modal title -->
            <div class="modal-title" id="reject-modal-title">  </div>
          </div>
          <div class="modal-body " id="comment-btn">
           <div class="col-xs-12">
              <a href="{{URL::to('account/mappings/get-download/occupation')}}">
                <p type="button" class="pull-right"><i class="fa fa-download"></i>&nbsp; &nbsp;&nbsp;<b class="">Download Sample file</b></p>
              </a>
          </div>
          {{Form::open(array('url' => '/account/occupations/profile-occupation-csv-mapping', 'method' => 'POST','files' => 'true','id' => 'form-popup'))}}
            <div class="form-group col-xs-6 required" >
            <span class="control-label"></span>
              {{Form::label('profile',array())}}
              {{Form::select('profile_id',$profArray,null,array('id' => 'profile','class' =>'form-control'))}}
            </div>
            <div class="form-group col-xs-6 required">
            <span class="control-label"></span>
              {{Form::label('product',array())}}
              <select name="product_id" id="product_id" class="form-control">
                <option value="0">Select Product</option>
                <option value="34">Income Secure 150-AS</option>
                <option value="36">Income Secure 150-ASU</option>
                <option value="37">Income Bee 120-AS</option>
                <option value="38">Income Bee 120-ASU</option>
                <option value="39">Income Anchor-AS</option>
                <option value="40">Income Anchor-ASU</option>
                <option value="41">Best Income-12-AS</option>
                <option value="42">Best Income-24-AS</option>
                <option value="44">Mortgage Sheild</option>
                <option value="51">Mortgage Sheild Pro</option>
              </select>
             <!-- {{Form::select('product_id',$prodArray,null,array('id' => 'product','class' =>'form-control'))}}-->
            </div>

            <div class="form-group col-xs-4 required">
          <span class="control-label"></span>
            {{Form::label('Cover Type')}}
            <select name="cover_type" id="cover_type" class="form-control">
            <option name="All" >Select Cover Type</option>
            <option name="All" selected>All</option>
            <option name="All">ASU</option>
            <option name="All">AS</option>
            <option name="All">U</option>
            </select>
          </div>

            <div class="form-group col-xs-12 required">
            <span class="control-label"></span>
              {{Form::label(' file',array())}}
              {{Form::file('csv')}}
            </div>
          </div>
            <br><br><br><br><br><br><br><br>
          <div class="modal-footer">
              <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
              <!-- confirm button -->
              <div id="RejConfirmButton">{{Form::submit('Submit',array('class' => 'btn btn-success'))}}</div>
              {{Form::close()}}
          </div>

      </div>
    </div>
<!-- </div> -->
@stop
@section('pageBottomJs')

 <!-- Multiselect -->
<script src="{{URL::asset('assets/js/multiselect/multiselect.js')}}"></script>
<!-- Ajax calls -->
<script src="{{URL::asset('assets/js/views/mappings/prof_prdct_occup_map.js')}}"></script>

<!-- dataTables -->
<script src="{{ URL::asset('assets/js/dataTables/jquery.dataTables.min.js') }}"></script>
<script src="{{ URL::asset('assets/js/dataTables/dataTables.bootstrap.min.js') }}"></script>
<link rel="stylesheet" href="{{ URL::asset('assets/js/dataTables/dataTables.bootstrap.css') }}">

<style type="text/css">
  /* for Actions alignments in table */
  .actalign{
    text-align: center;
  }
  /* for Add news button */
    .info-box {
      min-height: 42px;
    }
  /* validation message color*/
  .error{
    color:red;
  }
  tr td{
    border: 1px solid #f4f4f4;

  }
  tr th{
    border-top: 1px solid #f4f4f4 !important;
    border-bottom: 3px solid #f4f4f4 !important;
    border-left:1px solid #f4f4f4 !important;
    border-right:1px solid #f4f4f4 !important;

  }

</style>
<script type="text/javascript">

//  Edit button functinality
$(document).ready(function () {


    $('#bulk_import').click(function () {

         var id = $(this).attr("data-id");

          $('#comment-btn').show();
          $('#RejConfirmButton').show();
         
          // modal title 
          $('#reject-modal-title').html(
          '<h4 class="modal-title">Import CSV file</h4>'
          );

          // modal body
          $('#reject-modal-body').html(
            "<p>Are you sure want to reject this application? Once you reject you cann't revert it back. Please confirm</p>"
          );
          $('#rejectTrigger').click();
    });
    $("#add-btn").hide();
    
    // change event function for profiles to occupations.
    $(".edit-btn").click(function(){
      
      document.getElementById('multiselect_to').innerHTML = "";
      document.getElementById('multiselect').innerHTML = "";
      document.getElementById('profile').innerHTML = "";
      document.getElementById('product').innerHTML = "";
      //$(this).attr('data-id');
      var profile_id = $(this).attr('profileId');
      var product_id = $(this).attr('productId');
      var cover_type = $('#cover_type').val();
      //alert(profile_id);
      if(profile_id != '0' && product_id != '0'){
        $.ajax({
        type: "POST",
          headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          },
          url: "get-occupations-by-profile-and-product",
          data: {profileId : profile_id, productId: product_id,cover_type:cover_type},
          datatype: "json",
          success: function(data) {
            if(data.unselected != 'empty'){
              $.each( data.unselected, function(key,value) {
              $("#multiselect").append($("<option></option>")
                 .attr("value", key).text(value));
              });
            }

            $("#add-btn").show();
            $("#profile").append($("<option></option>")
                 .attr("value", data.profileId).text(data.profileName));
            $("#product").append($("<option></option>")
                 .attr("value", data.productId).text(data.productName));

            // submit btn name changing to Update when click on edit btn
            $('#submit-btn').attr("value", "Update");
            if(data.selected != 'empty'){
              $.each( data.selected, function(key,value) {
              $("#multiselect_to").append($("<option></option>")
                 .attr("value", key).text(value));
              });
            }
          }
        });
      }
    });
 
  $("#datatable").dataTable({
      "paging": true,
          "lengthChange": true,
          "searching": true,
          "ordering": true,
          "info": true,
          "autoWidth": false,
          "order": [[0, 'asc']],
          "aLengthMenu" : [[10,20,50,100,-1],[10,20,50,100,"All"]],
          "aoColumnDefs": [
            {"bSortable": false, "aTargets": [2]}
          ],
  });

  // form validation rules for select box
  $.validator.addMethod("valueNotEquals", function(value, element, arg){
  return arg != value;
 }, "This field is required.");

  // import form validation
   $('#form-popup').validate({
          rules:{
            csv:{
              required:true
            },
            profile_id: { valueNotEquals: "0" },
            product_id: { valueNotEquals: "0" },
            multiselect_to: { required:true},
          },
          messages:{
            profile_id: { valueNotEquals: "* Please select profile." },
            product_id: { valueNotEquals: "* Please select product." },
            csv:'* Please select file.'
          }
      });

// normal form validation
   $('#formValidation').validate({
          rules:{
            csv:{
              required:true
            },
            profile_id: { valueNotEquals: "0" },
            product_id: { valueNotEquals: "0" }
          },
          messages:{
            profile_id: { valueNotEquals: "* Please select profile." },
            product_id: { valueNotEquals: "* Please select product." },
            csv:'* Please select file.'
          }
      });
   
});

</script>
@stop