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

  <div class="box">
      <div class="box-header">
        <!-- <h3 class="box-title" id="title_form">Add Profile Affliates</h3> -->
        <div class="col-xs-6">
        <p class="text-red">Note : Select affiliates list that you want to assign the profile.</p>
        </div>
        <a href="" class="btn btn-info pull-right" id="addBtn" ><b>Add Mapping</b></a>
      </div>
      <!-- /.box-header -->
      <div class="box-body">
       {{Form::open(array('url' => '/account/profile/affli-profi-map-fun', 'method' => 'POST' ,'id' =>'formValidation'))}}
       <div class="form-group col-md-4 required">
       <span class="control-label"></span>
          {{Form::label('Profile',array())}}
          {{Form::select('profile_id', $profiles, null,array('class'=>'form-control profileId','id' => 'profileId'))}}
        </div>

        <div class="form-group col-md-12"></div>

        <div id="affiliates">
          <div class="col-xs-4">
            {{Form::label('Avaliable Affiliates',array())}}
            {{Form::select('affiliate_unselecetd[]',[],null,array('multiple','name'=>'affiliate_id[]','id' => 'multiselect','class' =>'form-control affiliates','name' => 'from[]','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 Affiliates',array())}}
            <select name="to[]" id="multiselect_to" class="form-control" size="8" multiple="multiple">
            </select>
          </div>
        </div>

        <div class="form-group pull-left col-xs-12"></div>

        <div class="form-group pull-left col-xs-12">
          {{Form::submit('Submit',array('class' => 'btn btn-success','id' => 'submit-btn'))}}
        </div>

       {{Form::close()}}
      </div>
  <!-- /.box-body -->
  </div>
  <div class="box ">
    <!-- Index  -->
    <div class="box-header">
        <h3 class="box-title">Profiles List</h3>
    </div>

    <div class="box-body">
        <table id="datatable" class="table table-bordered table-hover">
                <thead>
                  <tr>
                    <th width="15%">Created Date</th>
                    <th>Title</th>
                    <th>Description</th>
                    <th width="15%">Created Date</th>
                    <th width="15%" class="actalign">Actions</th>
                  </tr>
                </thead>
                <tbody>
                @if(isset($pfs))
                  @foreach($pfs as $pf)
                   <tr>
                    <td>{{$pf->id}}</td>
                    <td>{{$pf->title}} </td>
                    <td>{{$pf->description}} </td>
                    <td>{{date('d-m-Y H:i:s',strtotime($pf->created_at))}}</td>
                    <td class="actalign"> 

                      <!-- edit button -->
                      <a class="text-blue edit-btn" title="Edit" href='#'  data-id='{{$pf->id}}' data-title='{{$pf->title}}'>
                        <i class="fa fa-fw fa-edit"></i>
                      </a> &nbsp;&nbsp;&nbsp;&nbsp;

                      <!-- delete button -->
                      <a class="text-red delete-btn" href='#' title="Delete" data-id='{{$pf->id}}'>
                        <i class="fa fa-fw fa-remove"></i>
                      </a> 

                    </td>
                  </tr>
                  @endforeach
                @endif
              </tbody>
            </table>
    </div>
  </div>

     
 <a data-target="#ConfirmDelete" role="button" data-toggle="modal" id="trigger"></a>
</section>

@stop
@section('pageBottomJs')
<style type="text/css">
  /* Multiselect box height */
  select[multiple], select[size] {
    height: 200px;
  }
  /*.btn-block {
    display: block;
   width: 1%;
  }*/
  /* for Actions alignments in table */
  .actalign{
    text-align: center;
  }
  /*.table-bordered {
    border: 1px solid white;
  }*/
  /* validation message color*/
  .error{
    color:red;
  }

.table-bordered > tbody > tr > td, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > td, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > thead > tr > th {
    /*border: 1px solid white;*/
}
</style>
<!-- Multiselect -->
<script src="{{URL::asset('assets/js/multiselect/multiselect.js')}}"></script>
<!-- Ajax calls  -->
<script src="{{URL::asset('assets/js/views/profiles/profile.affiliate.map.js')}}"></script>
<!-- Data tables  -->
<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') }}">
<!-- /Data tables  -->
<script type="text/javascript">
$(document).ready(function(){
  $('#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": [4]},
          {'visible': false, "aTargets" : 0}
        ],
  }); 
  // delete button 
    $(".delete-btn").click(function () {
        var id = $(this).attr("data-id");
        $("#confirmButton").html(
           "<a href='/account/profile/delete-profile-affiliate-map/"+ id+"'  class='btn btn-danger'>Confirm</a>"
        );
        $('#modal-title').html(
          '<h4 class="modal-title">Profile Affiliate Map deletion</h4>'
          );
        $('#modal-body').html(
          '<p> Do you really want  to delete this element?</p>'
          );
        $("#trigger").click();
    });

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

    // import form validation
   $('#formValidation').validate({
          rules:{
            to:{
              required:true
            },
            profile_id: { valueNotEquals: "0" },
          },
          messages:{
            profile_id: { valueNotEquals: "* Please select profile." },
            to:'* Please select affiliates.'
          }
      });
  
</script>
@stop