@extends('layouts.dashboard')

@section('page_title')
	Manage Customer
@endsection

@section('page_header_title')
	Manage Customer
@endsection

<style>
  .data-align{
    text-align: left;
    align-content: left;
    align-items: left;
  }
  </style>


@section('page_body')
{{ Breadcrumbs::render('customer') }}

	<div class="row row-cards row-deck">
              <div class="col-12">
                <div class="card">
                	  <div class="card-header">


					   @if(Auth::user()->hasAnyPermission(['All','Add Customer']))

					     <button  class="float-right btn btn-sm btn-outline-primary" data-toggle="modal" data-target="#md_add_customer"><i class="fa fa-plus"></i></button> &nbsp;&nbsp;
              @endif

					     <h3 class="card-title">Add Customer</h3>
					  </div>

                	{{-- <div class="card-status card-status-left bg-blue"></div> --}}
                  <div class="datatable datatable-bordered datatable-head-custom" ></div>
                  <div class="table-responsive table-height">
                    <table id="user_table" class="table table-hover table-outline table-vcenter text-nowrap card-table cls_datatable">
                      <thead>
                        <tr>

                          <th>#</th>
                          <th>Name</th>
                          <th>Father Name</th>
                          <th>Cnic #</th>
                          <th>Email </th>
                          <th>Contact #</th>
                          <th>Branch</th>
                          <th>Reg Date</th>
                          <th style="text-align: center;"><i class="dropdown-icon fa fa-cogs"></i></th>

                        </tr>
                      </thead>
                      <tbody>
                      	
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
          </div>
@endsection

@section('page_modal')
	@include('user.modals.add_customer')
  @include('user.modals.update_customer')
@endsection

@section('page_script')

<script type="text/javascript">

function loadCustomers()
{
      var element = $('#user_table');
       
      element.DataTable().clear();
      element.DataTable().destroy();
      
      element.DataTable( {
      "columnDefs": [
                { "type": "numeric-comma", targets: 0 }
            ],
          cache:true,
          responsive: true,
          bProcessing: true,
          bServerSide: true,
          deferRender: true,
          // select: true,
          // stateSave: true,
          pageLength:100,
          colReorder : true,

        "ajax": "{{ route('loadcustomers') }}",
        "columns": [
           {
    name: 'id',
    data: 'count'
   },
   {
    name: 'name',
    data: 'name',
    className: 'data-align'
   },
   {
    name: 'fname',
    data: 'fname'
   },
   {
    name: 'cnic',
    data: 'cnic'
   },
   {
    name: 'email',
    data: 'email'
   },
   

   {
    name: 'contact',
    data: 'contact'
   },
   {
        name: 'branch',
        data:'branch'
   },
   {
    name: 'created_at',
    data: 'created_at'
   },
   {
    name: 'action',
    data: 'action'
   },

  ],
    });
}


$(document).ready(function(){
  loadCustomers();
} );

</script>


@endsection

