<?php $this->view("includes/Inc_pagehead");?>
<!-- Page Styles Goes Here-->
<style>
.m-input{
  border: 1px solid #ebedf2 !important;
  background-color: #f4f5f833 !important;
}
#payment_view_table .dataTables_scrollHeadInner {
  width:100% !important;
  padding: 0 !important;
}

</style>


<?php $this->view("includes/Inc_navigation");?>
<div class="m-grid__item m-grid__item--fluid m-wrapper">
  <!-- BEGIN: Subheader -->
  <div class="m-subheader ">
    <div class="d-flex align-items-center">
      <div class="mr-auto">
        <h3 class="m-subheader__title m-subheader__title--separator">
          Vehicle Consignee/Owner Profile
        </h3>
      </div>
    </div>
  </div>


  <!-- END: Subheader -->
  <div class="m-content">
    <div class="row">
      <div class="col-xl-3 col-lg-4">
        <div class="m-portlet m-portlet--full-height  ">
          <div class="m-portlet__body" style="padding-top: 0px">
            <div class="m-card-profile">
              <div class="m-card-profile__title m--hide">
                Vehicle Consignee/Owner Profile
              </div>
              <div class="m-card-profile__pic">
                <div class="m-card-profile__pic-wrapper">
                  <img src="<?php echo $this->config->item('Template_template_file_url'); ?>template/assets/app/media/img/users/user.png" alt=""/>
                </div>
              </div>
              <div class="m-card-profile__details">
                <span class="m-card-profile__name">
                  #<?php echo $consignee_data->consignee_id?> - <?php echo $consignee_data->consignee_name?>
                  <br/><?php echo $consignee_data->consignee_place?><br/>
                  <?php echo $consignee_data->consignee_mobile?>
                </span>
                <br/>
                <a  id="btn_add_vehicle_payment" data-toggle="modal"  href="#vehicle_payment_add_modal" class="btn m-btn--gradient-from-success m-btn--gradient-to-info  m-btn  m-btn--icon m-btn--air m-btn--pill">
                  <span>
                    <i class="la la-plus"></i>
                    <span>
                      Add Payment
                    </span>
                  </span>
                </a>

                <a style="margin-top:20px"  href="<?php echo base_url().'accounts/ledger/vehicleconsignee_'.$consignee_data->consignee_id.'/vehicle_consignee' ?>" class="btn m-btn--gradient-from-focus m-btn--gradient-to-primary  m-btn  m-btn--icon m-btn--air m-btn--pill">
                  <span>
                    <i class="la la-th-list"></i>
                    <span>
                      View Ledger
                    </span>
                  </span>
                </a>
              </div>


              <div class="m-card-profile__details">
                <span class="m-card-profile__name">

                </span>
              </div>
              <br/>
            </div>
            <ul class="m-nav m-nav--hover-bg m-portlet-fit--sides">
              <li class="m-nav__separator m-nav__separator--fit" style="margin-top: 0px"></li>
              <li class="m-nav__section m--hide">
                <span class="m-nav__section-text">
                  Section
                </span>
              </li>
              <li class="m-nav__item profile_nav" id="nav_overview" data-nav="overview" data-table-name=''>
                <a href="javascript:;" class="m-nav__link">
                  <i class="m-nav__link-icon fa fa-industry"></i>
                  <span class="m-nav__link-title">
                    <span class="m-nav__link-wrap">
                      <span class="m-nav__link-text">
                        Overview
                      </span>
                    </span>
                  </span>
                </a>
              </li>
              <li class="m-nav__item profile_nav" id="nav_vehicles" data-nav="vehicles" data-table-name='vehicles_view_table'>
                <a href="javascript:;" class="m-nav__link">
                  <i class="m-nav__link-icon fa fa-truck"></i>
                  <span class="m-nav__link-title">
                    <span class="m-nav__link-wrap">
                      <span class="m-nav__link-text">
                        Vehicles
                      </span>
                    </span>
                  </span>
                </a>
              </li>
              <li class="m-nav__item profile_nav" id="nav_work_slips" data-nav="work_slips" data-table-name='vehicle_work_slip_view_table'>
                <a href="javascript:;" class="m-nav__link">
                  <i class="m-nav__link-icon fa fa-shopping-cart"></i>
                  <span class="m-nav__link-title">
                    <span class="m-nav__link-wrap">
                      <span class="m-nav__link-text">
                        Vehicle Work Slips
                      </span>
                    </span>
                  </span>
                </a>
              </li>
              <li class="m-nav__item profile_nav" id="nav_payments" data-nav="payments" data-table-name='vehicle_work_slip_transaction_view_table'>
                <a href="javascript:;" class="m-nav__link">
                  <i class="m-nav__link-icon fa fa-money-bill-alt"></i>
                  <span class="m-nav__link-title">
                    <span class="m-nav__link-wrap">
                      <span class="m-nav__link-text">
                        Work Slip Payments
                      </span>
                    </span>
                  </span>
                </a>
              </li>
              <li class="m-nav__item profile_nav" id="nav_op_balance_payments" data-nav="op_balance_payments" data-table-name='vehicle_op_balance_transaction_view_table'>
                <a href="javascript:;" class="m-nav__link">
                  <i class="m-nav__link-icon fa fa-rupee-sign"></i>
                  <span class="m-nav__link-title">
                    <span class="m-nav__link-wrap">
                      <span class="m-nav__link-text">
                        OP Balance Payments
                      </span>
                    </span>
                  </span>
                </a>
              </li>
            </ul>

          </div>
        </div>
      </div>
      <div class="col-xl-9 col-lg-8">
        <div id="div_overview" class="profile_nav_div">
          <div class="m-portlet">
            <div class="m-portlet__body m-portlet__body--no-padding">
              <div class="row m-row--no-padding m-row--col-separator-xl">
                <div class="col-md-12 col-lg-12 col-xl-3">
                  <!--begin:: Widgets/Stats2-1 -->
                  <div class="m-widget1">
                    <div class="m-widget1__item">
                      <div class="row m-row--no-padding align-items-center">
                        <div class="col">
                          <h3 class="m-widget1__title">
                            Total Vehicles
                          </h3>
                        </div>
                        <div class="col m--align-right">
                          <span class="m-widget1__number m--font-brand">
                            <label class="total_vehicles_info"></label>
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!--end:: Widgets/Stats2-1 -->
                </div>
                <div class="col-md-12 col-lg-12 col-xl-3">
                  <!--begin:: Widgets/Stats2-3 -->
                  <div class="m-widget1">
                    <div class="m-widget1__item">
                      <div class="row m-row--no-padding align-items-center">
                        <div class="col">
                          <h3 class="m-widget1__title">
                            Total Payable
                          </h3>
                        </div>
                        <div class="col m--align-right">
                          <span class="m-widget1__number m--font-success">
                            <label class="total_payable_info"></label>
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!--begin:: Widgets/Stats2-3 -->
                </div>
                <div class="col-md-12 col-lg-12 col-xl-3">
                  <!--begin:: Widgets/Stats2-3 -->
                  <div class="m-widget1">
                    <div class="m-widget1__item">
                      <div class="row m-row--no-padding align-items-center">
                        <div class="col">
                          <h3 class="m-widget1__title">
                            Total Paid
                          </h3>
                        </div>
                        <div class="col m--align-right">
                          <span class="m-widget1__number m--font-success">
                            <label class="total_paid_info"></label>
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!--begin:: Widgets/Stats2-3 -->
                </div>
                <div class="col-md-12 col-lg-12 col-xl-3">
                  <!--begin:: Widgets/Stats2-3 -->
                  <div class="m-widget1">
                    <div class="m-widget1__item">
                      <div class="row m-row--no-padding align-items-center">
                        <div class="col">
                          <h3 class="m-widget1__title">
                            Total Balance
                          </h3>
                        </div>
                        <div class="col m--align-right">
                          <span class="m-widget1__number m--font-success">
                            <label class="total_balance_info"></label>
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!--begin:: Widgets/Stats2-3 -->
                </div>
              </div>
            </div>
          </div>
          <div class="m-portlet  m-portlet--rounded m-portlet--bordered">
            <div class="m-portlet__body">
              <h3 class="m-portlet__head-text" style="text-align: center">
                Payment Summary
              </h3>
              <table width="100%" class="table m-table nowrap table-header-fixed table-striped table-bordered table-hover table-header-fixed" id="all_payments">
                <thead>
                  <tr class="">
                    <th>Types Of Payments</th>
                    <th>Amount</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>Total Vehicle Opening Balance Payable Amount</td>
                    <strong><td class="total_op_balance_payable_info"></td></strong>
                  </tr>
                  <tr>
                    <td>Total Vehicle Work Slip Payable Amount</td>
                    <strong><td class="total_work_slip_payable_info"></td></strong>
                  </tr>
                  <tr>
                    <td>Total Payable Amount</td>
                    <strong><td class="total_payable_info"></td></strong>
                  </tr>
                  <tr>
                    <td></td>
                    <td></td>
                  </tr>
                  <tr>
                    <td>Total Paid Towards Opening Balance</td>
                    <strong><td class="total_paid_op_balance_info"></td></strong>
                  </tr>
                  <tr>
                    <td>Total Paid Towards Work Slip</td>
                    <strong><td class="total_paid_work_slip_info"></td></strong>
                  </tr>
                  <tr>
                    <td>Total Paid</td>
                    <strong><td class="total_paid_info"></td></strong>
                  </tr>
                  <tr>
                    <td>Total Balance</td>
                    <strong><td class="total_balance_info"></td></strong>
                  </tr>

                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div id="div_vehicles" class="profile_nav_div">
          <div class="m-portlet m-portlet--mobile m-portlet--info m-portlet--head-solid-bg m-portlet--bordered m-portlet--rounded">
            <div class="m-portlet__head">
              <div class="m-portlet__head-caption">
                <div class="m-portlet__head-title">
                  <h3 class="m-portlet__head-text">
                    Vehicles
                  </h3>
                </div>
              </div>
              <div class="m-portlet__head-tools">

              </div>
            </div>
            <div class="m-portlet__body">
              <!--begin: Datatable -->
              <?php $this->view("modules/include_tables/table_vehicles");?>
              <!--end: Datatable -->
            </div>
          </div>
        </div>
        <div id="div_work_slips" class="profile_nav_div">
          <div class="m-portlet m-portlet--mobile m-portlet--info m-portlet--head-solid-bg m-portlet--bordered m-portlet--rounded">
            <div class="m-portlet__head">
              <div class="m-portlet__head-caption">
                <div class="m-portlet__head-title">
                  <h3 class="m-portlet__head-text">
                    Vehicle Work Slips
                  </h3>
                </div>
              </div>
            </div>
            <div class="m-portlet__body">
              <!--begin: Datatable -->
              <?php $this->view("modules/include_tables/table_vehicle_work_slips");?>
              <!--end: Datatable -->
            </div>
          </div>
        </div>
        <div id="div_payments" class="profile_nav_div">
          <div class="m-portlet m-portlet--mobile m-portlet--info m-portlet--head-solid-bg m-portlet--bordered m-portlet--rounded">
            <div class="m-portlet__head">
              <div class="m-portlet__head-caption">
                <div class="m-portlet__head-title">
                  <h3 class="m-portlet__head-text">
                    List of Payments
                  </h3>
                </div>
              </div>
            </div>
            <div class="m-portlet__body">
              <!--begin: Datatable -->
              <?php $this->view("modules/include_tables/table_vehicle_work_slip_transaction");?>
              <!--end: Datatable -->
            </div>
          </div>
        </div>
        <div id="div_op_balance_payments" class="profile_nav_div">
          <div class="m-portlet m-portlet--mobile m-portlet--info m-portlet--head-solid-bg m-portlet--bordered m-portlet--rounded">
            <div class="m-portlet__head">
              <div class="m-portlet__head-caption">
                <div class="m-portlet__head-title">
                  <h3 class="m-portlet__head-text">
                    OP Balance Payments
                  </h3>
                </div>
              </div>
              <div class="m-portlet__head-tools">

              </div>
            </div>
            <div class="m-portlet__body">
              <!--begin: Datatable -->
              <?php $this->view("modules/include_tables/table_vehicle_op_balance_transaction");?>
              <!--end: Datatable -->
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>
<?php $this->view("modules/include_modals/modal_vehicle_payment");?>
<?php $this->view("modules/include_modals/modal_bills");?>

<?php $this->view("modules/include_modals/modal_transaction_delete");?>

</div>
</div>
<!-- end:: Body -->
<!-- begin::Footer -->
<?php $this->view("includes/Inc_footer");?>
<!-- end::Footer -->
</div>
<!-- end:: Page -->
<?php $this->view("includes/Inc_sidebar");?>
<?php $this->view("includes/Inc_scripts");?>

<!--begin::Page Snippets -->
<script src="<?php echo $this->config->item('Template_template_file_url'); ?>template/assets/app/js/dashboard.js" type="text/javascript"></script>
<!--end::Page Snippets -->

<script>
function hide_all(){
  $(".profile_nav").removeClass('m-nav__item--active');
  $(".profile_nav_div").hide();
}
function active(menu_name){
  hide_all();
  $("#nav_"+menu_name).addClass('m-nav__item--active');
  $("#div_"+menu_name).show();
  $("#div_"+menu_name).fadeIn("slow");
  $('html, body').animate({
    scrollTop: eval($("#div_"+menu_name).offset().top - 150)
  }, 500);
}
//  Hide All Div and In Active All Menu
hide_all();
//  Active First Menu and Its div
active('overview');
$('body').on('click', '.profile_nav', function() {
  var nav = $(this).attr('data-nav');
  active(nav);
})
</script>
<script>
$("#vehicle_menu").addClass('m-menu__item--active m-menu__item--open');
$("#vehicle_menu_3").addClass('m-menu__item--active');
select_summary();
function select_summary(){
  var consignee_id = "<?php echo $consignee_data->consignee_id?>";
  $.post("<?php echo base_url().'vehicles/select_consignee_summary/count' ?>",{
    consignee_id:consignee_id
  },function(data){
    var obj= $.parseJSON(data);
    $(".total_vehicles_info").html(obj.total_vehicles);
    $(".total_work_slip_payable_info").html(obj.total_work_slip_payable);
    $(".total_op_balance_payable_info").html(obj.total_op_balance);
    $(".total_payable_info").html(obj.total_payable);
    $(".total_paid_op_balance_info").html(obj.total_op_balance_paid);
    $(".total_paid_work_slip_info").html(obj.total_work_slip_paid);
    $(".total_paid_info").html(obj.total_paid);
    $(".total_balance_info").html(obj.total_balance);
  })
}
</script>
<!-- Bill Scripts -->
<?php $this->view("modules/include_scripts/bill_scripts");?>

<!-- Transaction Scripts -->
<?php $this->view("modules/include_scripts/transaction_scripts");?>

<!-- Vehicles Scripts -->
<?php $this->view("modules/include_scripts/vehicles_scripts");?>

<!-- Work Slip & Payment Scripts -->
<?php $this->view("modules/include_scripts/vehicle_work_scripts");?>
<?php $this->view("modules/include_scripts/vehicle_payment_scripts");?>

<script>

  jQuery(document).ready(function() {
    $('.profile_nav').on('click', function(e){
      var table_name = $(this).attr('data-table-name');
      if(table_name!=''){
        var tables = table_name.split(',');
        $.each(tables, function( index, value ){
          var table_name = value;
          eval(table_name).ajax.reload();
        });
      }
    });
    $(".form_submit_btn").click(function (e) {
      e.preventDefault();
      var a = $(this),
      l = $(this).closest("form"),
      action = l.attr('action');
      var form_id = l.attr('id');
      l.validate({
        rules: {
          paid_amount: {
            number: !0,
            required: !0
          }
        }, invalidHandler: function (e, r) {
          var i = $("#" + form_id + "_msg");
          i.removeClass("m--hide").show(), mUtil.scrollTo(i, -200)
        }, submitHandler: function (e) {
        }
      }), l.valid() && (a.addClass("m-loader m-loader--right m-loader--light").attr("disabled", !0),
      l.ajaxSubmit({
        url: action,
        success: function (e, t, r, s) {
          var modal_id = l.attr('data-modal-id');
          var form_type = l.attr('data-form-type');
          $("#" + form_id + "_msg").addClass("m--hide");
          // Block UI
          mApp.blockPage({
            overlayColor: "#000000",
            type: "loader",
            state: "success",
            message: "Please wait..."
          }), setTimeout(function () {
            mApp.unblockPage()
          }, 2e3);
          var obj = $.parseJSON(e);
          if (obj.status == 1) {
            a.removeClass("m-loader m-loader--right m-loader--light").attr("disabled", !1);
            toastr[obj.flashdata_type](obj.flashdata_msg, obj.flashdata_title);
            $("#"+modal_id).modal('toggle');
            $("."+form_id+"_fields").val('');
            $("."+form_id+"_select").val('').trigger("change");
            select_summary();
            vehicles_view_table.ajax.reload();
            vehicle_work_slip_view_table.ajax.reload();
            vehicle_work_slip_transaction_view_table.ajax.reload();
vehicle_op_balance_transaction_view_table.ajax.reload();
          } else {
            a.removeClass("m-loader m-loader--right m-loader--light").attr("disabled", !1);
            toastr[obj.flashdata_type](obj.flashdata_msg, obj.flashdata_title);
          }
          if (obj == null) {
            setTimeout(function () {
              a.removeClass("m-loader m-loader--right m-loader--light").attr("disabled", !1);
              toastr["warning"]("Your Attempt is Timed Out. Please Try Again.", "Timed Out");
            }, 2e4)
          }
        },error: function() {
          a.removeClass("m-loader m-loader--right m-loader--light").attr("disabled", !1);
          toastr["error"]("Sorry. There Has Been Some Error Occurred. Please Try Again.", "Error");
        }
      })
      )
    });
    $($.fn.dataTable.tables(true)).DataTable()
    .columns.adjust()
    .responsive.recalc();

  });
</script>
