@extends('layouts.admin')
@section('pageTitle')
  <title>Best Insurance | Occupations</title>
@stop
@section('content')
<section class="content">

<div class="row">
    <div class="col-md-3 col-sm-6 col-xs-12">
      <div class="m-b-10">
        <a href="{{URL::to('account/industries/import/occupations/1')}}" class="btn btn-primary btn-lg">
          <span class="" > <i class="fa fa-download"></i>&nbsp;&nbsp;Bulk Import </span>
        </a>

      </div>
    </div>
</div>
<div class="box">
<!--   <div class="box-header">
      <h3 class="box-title" id="title_form" >Add Occupation</h3>
      <div class="form-group ">
      <a href="" class="btn btn-info pull-right" id="addBtn" >Add Occupation</a>
      </div>
  </div> -->
  <div class="box-body" id="OccForm">
  {{Form::open(array('url' => '/account/occupations', 'method' => 'POST','id' => 'formValidation'))}}
      <div class="form-group col-xs-3 required">
      <span class=" control-label "></span>
        {{Form::label('Occupation Code',array())}}
        {{Form::text('occupation_code',null,array('id' => 'occupation_code','required' => true,'class' =>'form-control'))}}
        {{Form::hidden('id',null,array('id' => 'occupation_id'))}}
      </div>
      <div class="form-group col-xs-3 required">
      <span class=" control-label "></span>
        {{Form::label('occupation name ',array())}}
        {{Form::text('occupation_name',null,array('id' => 'occupation_name','required' => true,'class' =>'form-control'))}}
      </div>
      <div class="form-group col-xs-2 required">
      <span class=" control-label "></span>
        {{Form::label('class',array())}}
        {{ Form::select('class', [
                           '0' => 'Select',
                           '1' => '1',
                           '2' => '2',
                           '3' => '3',
                           '4' => '4'],null,
                           ['class' => 'form-control', 'id' => 'occ_class']
                        ) }}
       
      </div>
      <div class="form-group col-xs-2 required" id = 'checkbox'>
      <span class="control-label"></span>
        {{Form::label('Status',array())}}<br>
        <div class="radio">
          <label>
            {{Form::radio('is_active','1',true,array('id' => 'checkboxVal'))}} Active
          </label>&nbsp;
          <label>
          {{Form::radio('is_active','0',true,array('id' => 'checkboxValInactive', 'class' => ''))}} Inacive
          </label>
        </div>
      </div>
       <div class="form-group col-xs-2">
       {{Form::label('submit',null,array('style'=>'color:white'))}}
        {{Form::submit('Submit',array('class' => 'form-control btn btn-success'))}}
      </div>
  {{Form::close()}}

  </div>
</div>
  <div class="box">
        <!-- <div class="box-header">
          <h3 class="box-title">Occupations</h3>
        </div> -->
        <!-- /.box-header -->
        <div class="box-body">
            <table id="occupations_list" class="table table-bordered table-hover">
                <thead>
                  <tr>
                    <th>Created Date</th>
                    <th>Code</th>
                    <th>Name</th>
                    <th>Class</th>
                    <th width="15%">Created Date</th>
                    <th width="10%" class="actalign">Status</th>
                    <th width="15%" class="actalign">Actions</th>
                  </tr>
                </thead>
                <tbody>
                @if(isset($occupations))
                @foreach($occupations as $occupation)
                 <tr>
                  <td>{{$occupation->updated_at}}</td>
                  <td>{{$occupation->occupation_code}} </td>
                  <td>{{$occupation->occupation_name}} </td>
                  <td>{{$occupation->class}} </td>
                  <td>{{date('d-m-Y H:i:s',strtotime($occupation->updated_at))}}</td>
                  @if($occupation->is_active == '1')
                    <td  class="actalign"><i class="fa fa-check text-green"></i> </td>
                  @else
                    <td  class="actalign"><i class="fa fa-times  text-red"></i></td>
                  @endif
                  <td class="actalign"> 
                    <a class="text-blue edit-btn" title="Edit" href='#'  data-id='{{$occupation->id}}'>
                      <i class="fa fa-fw fa-edit"></i>
                    </a> 
                    <a class="text-red delete-btn" href='#' title="Delete" data-id='{{$occupation->id}}'>
                      <i class="fa fa-fw fa-remove"></i>
                    </a> 
                  </td>
                </tr>
                @endforeach
                @endif
              </tbody>
            </table>
        </div>
        <!-- /.box-body -->
        </div>
    <!-- </div> -->
  <a data-target="#ConfirmDelete" role="button" data-toggle="modal" id="trigger"></a>
</section>

@stop
@section('pageBottomJs')
<style type="text/css">
  .fa-fw {
    width: 2.285714em;
    text-align: center;
  }
  .info-box {
    min-height: 42px;
  }
  .info-box-icon {
    height: 42px;
  }
  /* for Actions alignments in table */
  .actalign{
    text-align: center;
  }
  .error{
    color :red;
    font-size: smaller;
  }
</style> 
<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') }}">
<script>
    $(document).ready(function () {
    //  Data tables 
    $('#occupations_list').dataTable({
        "paging": true,
        "lengthChange": true,
        "searching": true,
        "ordering": true,
        "info": true,
        "autoWidth": false,
        "order": [[0, 'desc']],
        "aoColumnDefs": [
          {"bSortable": false, "aTargets": [6]},
          {'visible': false, "aTargets" : 0}
        ],
        "iDisplayLength": 20,
        "aLengthMenu" : [[10,20,50,100,-1],[10,20,50,100,"All"]],
      }); 

      // trim blank spaces 
      $('#formValidation').submit( function(e){
          $(this).find('input:text').each(function(){
                $(this).val($.trim($(this).val()));
          });
      });
      // form validation rules for select box
        $.validator.addMethod("valueNotEquals", function(value, element, arg){
          return arg != value;
        }, "This field is required.");

      // validations for form   
      $('#formValidation').validate({
          rules:{
            occupation_code:{
              required:true,
              maxlength:30
            },
            occupation_name:{
              required:true,
              maxlength:100
            },
            class:{
              required:true,
              valueNotEquals:0
            }
          },
          messages:{
            occupation_name:'* Please enter name and maximum length should be 30 characters.',
            occupation_code:'* Please enter code and maximum length should be 100 characters.'
          }
      });
    });
    $("#checkbox").hide();
    $("#addBtn").hide();
    $(".edit-btn").click(function(){
      var id = $(this).attr("data-id");
      $("#checkbox").show();
      // ajax call for edit view 
      $.ajax({
        type: "POST",
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        url: "{{URL::to('/account/occupations/editmodal')}}",
        data: {id : id},
        dataType: "json",
        success: function(data) {
            $("#formValidation").attr('action',"{{URL::to('/account/occupations/update')}}" );
            $('#checkboxVal').removeAttr("disabled");
            $("#occupation_name").val(data.occ_name);
            $("#occupation_id").val(data.id);
            $("#occupation_code").val(data.occ_code);
            $('#occ_class').val(data.occ_class)
            $("#addBtn").show();
            //$("#checkboxVal").val(data.is_active);
            if(data.is_active == 1){
              $("#checkboxVal").prop("checked",true);
              $("#checkboxValInactive").prop('checked', false);
            }else{
              $("#checkboxVal").prop('checked', false);
              $("#checkboxValInactive").prop('checked', true);
            }
            $("#title_form").html('Edit Occupation');
            console.log(data);
        },
      });

    });
    // delete button 
    $(".delete-btn").click(function () {
        var id = $(this).attr("data-id");
        $("#confirmButton").html(
           "<a href='/account/occupations/destroy/"+ id+"'  class='btn btn-danger'>Confirm</a>"
        );
        $('#modal-title').html(
          '<h4 class="modal-title">Occupation deletion</h4>'
          );
        $('#modal-body').html(
          '<p> Do you really want to delete?</p>'
          );
        $("#trigger").click();
    });

</script>
@stop