<div class="content-wrapper" >
  <section class="content-header">
    <h1>
       <?= $page_title ?>
        <small><?= $page_desc ?></small>
    </h1>
    <ol class="breadcrumb">
     <li><a href="<?= base_url() ?>"><i class="fa fa-star-o" aria-hidden="true"></i>Home</a></li>
     <li><?= $menu ?></li>
     <li class="active"><?= $sub_menu ?></li>
   </ol>
  </section>

  <section class="content">
    <div class="row">
      <div class="col-md-12">
          <?php if($this->session->flashdata('message')) { 
              $flashdata = $this->session->flashdata('message'); ?>
              <div class="alert alert-<?= $flashdata['class'] ?>">
                 <button class="close" data-dismiss="alert" type="button">×</button>
                 <?= $flashdata['message'] ?>
              </div>
          <?php } ?>
      </div>
      <div class="col-xs-12">
      <div class="box box-warning"> 
      <div class="box-body">
        <table id="driverTable" class="table table-bordered table-striped datatable ">
          <thead>
            <tr>
              <th class="hidden">ID</th>
              <th width="150px;">Name</th> 
              <th width="100px;">Phone</th>
              <th width="150px;">Email ID</th> 
              <th width="50px;">Age</th> 
              <th width="150px;">Date Of Birth</th>
              <th width="50px;">Status</th>
              <th width="500px;">Action</th>
            </tr>
          </thead> 
          <tbody>
            <?php
            if(!empty($customerData)){
              foreach($customerData as $customer) {
               ?>
               <tr>
                 <th class="hidden"><?= $customer->customer_id ?></th>
                 <td class="center"><?= $customer->first_name.' '.$customer->last_name ?></th> 
                 <td class="center"><?= $customer->phone ?></th>
                 <td class="center"><?= $customer->email ?></th> 
                 <td class="center"><?= $customer->age ?></th> 
                 <td class="center"><?= $customer->date_of_birth ?></th> 
                 <td class="center"><?= ($customer->status == '1')?'Active':'Inactive'?></td>
                 <td class="center">	 
                    <a class="btn btn-sm btn-primary" id="viewCustomer" customer_id="<?= encode_param($customer->customer_id) ?>">
                      <i class="fa fa-fw fa-edit"></i>View
                    </a>
                    <a class="btn btn-sm btn-danger" 
                      href="<?= base_url('Customer/editCustomer/'.encode_param($customer->customer_id)) ?>">
                      <i class="fa fa-fw fa-trash"></i>Edit
                    </a> 
                    <a class="btn btn-sm btn-danger" 
                      href="<?= base_url("Customer/changeStatus/".encode_param($customer->customer_id))."/2" ?>" 
                      onClick="return doconfirm()">
                      <i class="fa fa-fw fa-trash"></i>Delete
                    </a>    
                    <?php if($customer->status == 1){ ?>
                      <a class="btn btn-sm btn-success" style="background-color:#ac2925" href="<?= base_url("Customer/changeStatus/".encode_param($customer->customer_id))."/0" ?>">
                        <i class="fa fa-cog"></i> De-activate
                      </a>
                    <?php } else { ?>
                      <a class="btn btn-sm btn-success" href="<?= base_url("Customer/changeStatus/".encode_param($customer->customer_id))."/1" ?>">
                        <i class="fa fa-cog"></i> Activate
                      </a>
                    <?php } ?>
                  </td>
                </tr>
            <?php 
              } 
            }?>
          </tbody>
        </table>
      </div>
    </div>
  </section>
</div>

<script type="text/javascript">

  jQuery('[id="viewCustomer"]').on('click',function() {
    markCalBak(jQuery(this).attr('customer_id'));
  });
  
  function markCalBak(customer_id){
    if(customer_id=='' || customer_id==undefined || customer_id=='undefined' || customer_id==null || customer_id=='null'){
      return true;
    }
    modalTrigger('Patient Details','');
    addModalLoader();
    jQuery.ajax({
      url  : base_url+"Customer/getCustomerData", 
      type : 'POST',
      data : {'customer_id':customer_id},
      success: function(resp){
        if(resp == '' || resp == undefined || resp == 'undefined' || resp == null || resp == 'null'){
          remModalLoader();
          jQuery('[id="modal_content"]').html('Something went wrong, please try again later...!');
          return false;
        }
        var resp_data = jQuery.parseJSON(resp);
        if(resp_data['status'] == '0'){
          remModalLoader();
          jQuery('[id="modal_content"]').html('Something went wrong, please try again later...!');
          return false;
        }
        var customer_data = resp_data['customer_data'];

        // Direct HTML
        var html = '<div class="col-xs-12">'+
                      '<div class="col-md-2"> '+
                        '<div class="form-group has-feedback"> '+
                          '<img id="customerProfileImg" src="'+base_url+customer_data['profile_image']+'"'+
                            'height="100" width="100" /> '+
                        '</div> '+
                      '</div> '+
                      '<div class="col-md-5"> '+
                        '<div class="form-group has-feedback"> '+
                          '<span style="padding-right: 38px;">First Name </span> : '+
                          '<label style="padding-left: 10px;">'+
                            customer_data['first_name']+
                          '</label> '+
                        '</div> '+
                        '<div class="form-group has-feedback"> '+
                          '<span style="padding-right: 68px;">Email </span> : '+
                          '<label style="padding-left: 10px;">'+
                            customer_data['email']+
                          '</label> '+
                        '</div> '+
                        '<div class="form-group has-feedback"> '+
                          '<span style="padding-right: 55px;">Address </span> : '+
                          '<label style="padding-left: 10px;">'+
                            customer_data['address']+
                          '</label> '+
                        '</div> '+
                        '<div class="form-group has-feedback"> '+
                          '<span style="padding-right: 80px;">Age </span> : '+
                          '<label style="padding-left: 10px;">'+
                            customer_data['age']+
                          '</label> '+
                        '</div> '+
                        '<div class="form-group has-feedback"> '+
                          '<span style="padding-right: 79px;">SSN </span> : '+
                          '<label style="padding-left: 10px;">'+
                            customer_data['ssn']+
                          '</label> '+
                        '</div> '+
                        '<div class="form-group has-feedback"> '+
                          '<span style="padding-right: 68px;">Issuer </span> : '+
                          '<label style="padding-left: 10px;">'+
                            customer_data['issuer']+
                          '</label> '+
                        '</div> '+
                        '<div class="form-group has-feedback"> '+
                          '<span style="padding-right: 39px;">Member ID </span> : '+
                          '<label style="padding-left: 10px;">'+
                            customer_data['member_id']+
                          '</label> '+
                        '</div> '+
                      '</div> '+

                      '<div class="col-md-5"> '+
                        '<div class="form-group has-feedback"> '+
                          '<span style="padding-right: 56px;">Last Name </span> : '+
                          '<label style="padding-left: 10px;">'+
                            customer_data['last_name']+
                          '</label> '+
                        '</div> '+
                        '<div class="form-group has-feedback"> '+
                          '<span style="padding-right: 80px;">Phone </span> : '+
                          '<label style="padding-left: 10px;">'+
                            customer_data['phone']+
                          '</label> '+
                        '</div> '+
                        '<div class="form-group has-feedback"> '+
                          '<span style="padding-right: 43px;">Date Of Dirth </span> : '+
                          '<label style="padding-left: 10px;">'+
                            customer_data['date_of_birth']+
                          '</label> '+
                        '</div> '+
                        '<div class="form-group has-feedback"> '+
                          '<span style="padding-right: 25px;">Alternate Phone </span> : '+
                          '<label style="padding-left: 10px;">'+
                            customer_data['alt_phone']+
                          '</label> '+
                        '</div> '+
                        '<div class="form-group has-feedback"> '+
                          '<span style="padding-right: 96px;">GRP </span> : '+
                          '<label style="padding-left: 10px;">'+
                            customer_data['grp']+
                          '</label> '+
                        '</div> '+
                        '<div class="form-group has-feedback"> '+
                          '<span style="padding-right: 11px;">Insurance Provider </span> : '+
                          '<label style="padding-left: 10px;">'+
                            customer_data['insurance_provider']+
                          '</label> '+
                        '</div> '+
                        '<div class="form-group has-feedback"> '+
                          '<span style="padding-right: 34px;">Group Number </span> : '+
                          '<label style="padding-left: 10px;">'+
                            customer_data['group_number']+
                          '</label> '+
                        '</div> '+
                      '</div> '+
                    '</div>';

        // Dymanic Drawing
        // var html = '', bodyHtml = '', profPic = '';
        // profPic = '<div class="col-md-2"> '+
        //             '<div class="form-group has-feedback"> '+
        //               '<img  id="customerProfileImg" src="'+base_url+customer_data['profile_image']+'" '+
        //                 'height="100" width="100" /> '+
        //             '</div> '+
        //           '</div>';

        // bodyHtml += '<div class="col-md-10">';
        // jQuery.each(customer_data, function(key,value) {
        //   if(key == 'customer_id' || key == 'status'){
        //     return true;
        //   }

        //   key = key.replace(/_/g,' ').toUpperCase();
        //   value = (value==''||value==null||value=='null'||value==undefined||value=='undefined')?'--':value;
                    
        //   value = value;
        //   bodyHtml += '<div class="col-md-3">'+key+'</div>'+
        //               '<div class="col-md-1"><span>:</span></div>'+
        //               '<div class="col-md-6">'+value+'</div>';
        // });
        // bodyHtml += '</div>';

        // html = '<div class="col-xs-12">'+profPic+bodyHtml+'</div>';

        remModalLoader();
        jQuery('[id="modal_content"]').html(html);

        jQuery('[id="customerProfileImg"]').error(function() {
          jQuery('[id="customerProfileImg"]').attr('src',base_url+'assets/images/user_avatar.jpg');
        });

      },
      fail: function(xhr, textStatus, errorThrown){
        remModalLoader();
        jQuery('[id="modal_content"]').html('Something went wrong, please try again later...!');
      },
      error: function (ajaxContext) {
        remModalLoader();
        jQuery('[id="modal_content"]').html('Something went wrong, please try again later...!');
      }
    });
  }
</script>