@extends('layouts.master')
@section('title', 'Company')
@section('pageheader')
  <!-- Page Header -->
                    <div class="page-header">
                        <div class="header-icon"><i class="fa  fa-suitcase"></i></div>
                        <h5>Company</h5>
                       {{--  <div class="form-group float-right mt-2">
                            <select class="form-control">
                                <option>Units</option>
                                <option>Users</option>
                            </select>
                        </div> --}}
                    </div>
                    <!-- /#Page Header -->

@endsection

@section('breadcrumb')
<nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="#">Administrative settings</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Company</li>
                        </ol>
                    </nav>
 @endsection

@include('layouts.includes.alert')
@section('content')

<div class="pista-wrapper mb-3">
                        <div class="row">
                            <div class="col-8">
                                <form class="form-inline">
                                    <div class="input-group search-box mr-3">
                                        <div class="input-group-prepend">
                                            <div class="input-group-text"><i class="fa fa-search"></i></div>
                                        </div>
                                        <!-- <input type="text" class="form-control" placeholder="Search" aria-label="Search"> -->
                                        <input type="text" class="form-control" id="company_search" placeholder="Search" aria-label="Search">
                                        <div class="input-group-append">
                                            <button title="Comming Soon"  class="btn btn-outline-secondary" type="button"><i class="fa fa-microphone"></i></button>
                                        </div>
                                    </div>
                                    
                                </form>
                            </div>
                            <div class="col-4">
                                <div class="float-right">
                                    <!-- <a href="{{ route('company.index') }}"><button type="button" class="btn btn-outline-primary"><i class="fa fa-history"></i> Refresh</button></a>  -->
                                    <a href="{{ route('company.create') }}"><button type="button" class="btn btn-outline-primary ml-3"><i class="fa fa-truck"></i> New Company</button></a>
                                    
                                </div>
                            </div>
                        </div>
                    </div>
<div class="detailed-info-table">
                        <div class="info-table">
                             <table  class="table table-striped data-table">
                                <thead class="thead-dark">
                                    <tr>     
                                     
                                        <th>#</th>                            
                                        <th>Company</th>
                                        <th>Address</th>
                                        <th>Phone no</th>  
                                        <th>Status</th>                      
                                       <!--  <th>Role</th> -->
                                        <th class="text-center">Actions</th>   
                                        <!-- <th>Email</th>
                                        <th>Created On</th>
                                        <th class="text-center">Active</th>
                                         -->
                                    </tr>
                                    
                                </thead>
                                <tbody class="tbody searchable">

                                </tbody>
                            </table>


                        </div>
</div>

@endsection

@section('script')
<script>

  var _reload = (function reload_datatable(){
  startLoading();
    $.ajax({
      type: "POST",
      url : '{{ route('company.ajax.datatable') }}',
      dataType: "JSON",
      data : {"_token": "{{ csrf_token() }}"},
      success: function(data)
      {
        stopLoading();
        var _dataset = [];
        var _data = data.dataset;
        var _i = 1;
        $(_data).each(function(idx,dataset){          
          var _j                = _i+'.';
          //var row_details = _data[idx].users;
          var _id           = _data[idx].id;
          var _name     = "<a href='company/edit/id/"+_id+"' title='Edit'>"+_data[idx].company_name+"</a>";
          var _address  = _data[idx].address;
          var _phone_no     = _data[idx].phone;       
          var chang_color='red';
          var status_title="inactive";
          if(_data[idx].is_active==1){
            chang_color='green';
            status_title='active';
          }
          var status = ""
          +"<a href='javascript:void(0);' onClick='change_status("+_id+"); return false;' title="+status_title+">"
          +"<button type='button' class='status_change btn btn-link action c-"+chang_color+" title='status' value='"+_data[idx].is_active+"'>"
          +"<i class='fa fa-check-circle'></i>"
          + "</button>"
          + "</a>";
          var _action   = ""
          + "<a href='company/edit/id/"+_id+"' title='Edit'>"
          +"<button type='button' class='btn btn-link action c-yellow' title='edit' value='"+_id+"'>"
          +"<i class='fa fa-pencil-alt'></i>"
          + "</button>"
          + "</a>"
          + "<a href='javascript:void(0)' onClick='ajax_roles_delete("+_id+"); return false;' title='Delete'>"
          +"<button type='button' class='btn btn-link action c-red ml-3' title='delete' value='"+_id+"'>"
          +"<i class='fa fa-trash'></i>"          
          + "</button>"
          + "</a>";
          _dataset.push([_j,_name,_address,_phone_no,status,_action]);
          _i = _i+1;
        });
        //console.log(_dataset);
       var companyData =  $(".data-table").DataTable({
          destroy: true,
          paging: true,
          searching: true,
          pageLength: 25,
          data : _dataset,
          bAutoWidth:false,
          columnDefs: [
           
            // { className: "details-control text-center", "targets": [ 0 ],"bSortable": false,"orderable":false,"data":null, "defaultContent": '' },
            { className: "text-center", "targets": [ 0 ] },
            { className: "text-center", "targets": [ 2 ] },
            { className: "text-center", "targets": [ 2 ] },
            { className: "text-center", "targets": [ 3 ] },
            { className: "text-center", "targets": [ 4 ] ,"bSortable": false },
            { className: "text-center", "targets": [ 5 ],"bSortable": false }
          ]
        });
       
        $(".dataTables_filter").css("display","none");
        //$(".dataTables_length").css("display","none");
        $('#company_search').on( 'keyup click', function () {   // for text boxes
            var v =$(this).val();  // getting search input value
            companyData.search(v).draw();
        }); 

       $('.data-table tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = companyData.row( tr );
 
        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
          $('.shown').each(function(i, obj) {
           newtr = $(this).closest('tr');
           newrow = companyData.row( newtr );
           newrow.child.hide();
           newtr.removeClass('shown');
           });
            // Open this row
            row.child( format(row.data()) ).show();
            tr.addClass('shown');
        }
    } );   


      }
    });

    return reload_datatable; //return the function itself to reference

  }());
  /* Formatting function for row details - modify as you need */
function format ( d ) {
//console.log(d);
//return false;
  var html='<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;"><th>User Name</th><th>Email</th>';
  $(d).each(function(idx){   
    if($.isArray(d[idx])){
      
      var user_data= d[idx];
     
         $(user_data).each(function(id){
             html +='<tr>';
             html +='<td>'+user_data[id].user_name+'</td>';
             html +='<td>'+user_data[id].email+'</td>';
             html +='</tr>';
         });
      
    }
    

  });
html +='</table>';
    
    return html;
}
  function ajax_roles_delete(_id){
    bootbox.confirm("Are you sure you want to Delete!", function(result){
      if(result==true){
        startLoading('Please wait....');
      $.ajax({
        type: "DELETE",
        url : 'company/delete/'+_id,
        dataType: "JSON",
        data : {"_token": "{{ csrf_token() }}"},
        success: function(data)
        {

          if(data.status === true){
              bootbox.alert('Data Deleted Successfully.')              
              _reload();
          }else{
              stopLoading();
              bootbox.alert('There is error to delete record.');
              //alert('There is error to delete record.');
          }         
        }
      });
    }

    });

    }

    function change_status(_id){
      // bootbox.confirm("This is the default confirm!", function(result){ console.log('This was logged in the callback: ' + result); });

     bootbox.confirm("Are you sure you want to change status!", function(result){
   
      if(result==true){
      startLoading('Please wait....');
      $.ajax({
        type: "POST",
        url : "{{ url('/company/changestatus') }}/"+_id,
        dataType: "JSON",
        data : {"_token": "{{ csrf_token() }}"},
        success: function(data)
        {

          if(data.status === true){
               //alert('Status changed Successfully.');
               startLoading('Status changed Successfully.')
              _reload();
          }else{
            stopLoading();
            bootbox.alert('There is error while changing status.');
              //alert('There is error while changing status.');
          }         
        }
      });
    }
      });
    
    }
  
</script>
@endsection