<?php $this->view("includes/Inc_pagehead"); ?>
<!-- Page Styles Goes Here-->

<style>
  .item_table td {
    padding: .75rem !important;
  }

  .item_table th {
    white-space: nowrap;
    padding: .75rem !important;
  }

  .table thead th {
    border-top: 2px solid #f4f5f8 !important;
  }

  .payment-table tbody td {
    border-top: 2px solid #f4f5f8 !important;
  }

  .m-invoice-2 .m-invoice__wrapper .m-invoice__head .m-invoice__container.m-invoice__container--centered {
    width: 90%;
  }

  .m-invoice-2 .m-invoice__wrapper .m-invoice__body.m-invoice__body--centered {
    width: 90%;
  }
</style>




<style>
  @media print {

    .no-print{
    display: none !important;
  }

    .table-bordered td {
      padding: .75rem !important;
    }

    .table-bordered th {
      white-space: nowrap;
      padding: .75rem !important;
    }

    .table-bordered .table thead th {
      border-top: 2px solid #f4f5f8 !important;
    }

    .m-invoice-2 .m-invoice__wrapper .m-invoice__head .m-invoice__container.m-invoice__container--centered {
      width: 90%;
    }

    .m-invoice-2 .m-invoice__wrapper .m-invoice__body.m-invoice__body--centered {
      width: 90%;
    }

    #print_view {
      margin-top: -20%;
    }

    body * {
      visibility: hidden;
    }

    .m-portlet__body * {
      visibility: visible;
      overflow: visible !important;
    }

    .letter_head_img {
      display: block !important;
    }
  }

  .m-invoice-2 .m-invoice__wrapper .m-invoice__head .m-invoice__container.m-invoice__container--centered {
    width: 90%;
  }
</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">
          Sales Target Report
        </h3>
        <ul class="m-subheader__breadcrumbs m-nav m-nav--inline">
          <li class="m-nav__item m-nav__item--home">
            <a href="#" class="m-nav__link m-nav__link--icon">
              <i class="m-nav__link-icon la la-home"></i>
            </a>
          </li>
          <li class="m-nav__separator">
            -
          </li>
          <li class="m-nav__item">
            <a href="<?php echo base_url() . 'dashboard' ?>" class="m-nav__link">
              <span class="m-nav__link-text">
                Home
              </span>
            </a>
          </li>
          <li class="m-nav__separator">
            -
          </li>
          <li class="m-nav__item">
            <a href="<?php echo base_url() . 'sales_targets' ?>" class="m-nav__link">
              <span class="m-nav__link-text">
                Sale Target Report
              </span>
            </a>
          </li>


        </ul>
      </div>
      <div>

      </div>
    </div>
  </div>
  <!-- END: Subheader -->
  <div class="m-content">

    <div class="m-portlet  m-portlet--rounded m-portlet--bordered no-print">
      <div class="m-portlet__body" style="padding: 1rem 2.2rem;">
        <form autocomplete="off" id="form_account_ledger" method="post" action="javascript:;" enctype="multipart/form-data" class="m-form m-form--fit m-form--state m-form--label-align-right ">
          <div class="m-form m-form--label-align-right m--margin-bottom-10 ">
            <div class="row ">
              <div class="col-xl-12 order-2 order-xl-1">
                <div class="form-group m-form__group row">
                  <div class="col-lg-5">
                    <div class="form-group m-form__group">
                      <label for="user_name">
                        Select Sales Staff
                      </label>
                      <div class="m-select2 m-select2--air m-select2--pill">
                        <select required id="sales_staff" name="sales_staff" style="width: 100%" class="form-control m-input" aria-describedby="basic-addon1" data-placeholder="Select sales staff">
                          <option value="" selected disabled>
                            Select Sales Staff
                          </option>
                          <?php
                          foreach ($sales_staffs as $key => $value) {
                            echo '<option value="' . $value->user_id . '">' . $value->user_alias . '</option>';
                          }
                          ?>
                        </select>
                      </div>
                      <span class="m-form__help"></span>
                    </div>
                  </div>
                  <div class="col-lg-4">
                    <div class="form-group m-form__group">
                      <label> Month :</label>
                      <div class="input-group m-input-group--air m-input-group--pill date">
                        <div class="input-group-prepend">
                          <span class="input-group-text">
                            <i class="la la-calendar"></i>
                          </span>
                        </div>
                        <input readonly placeholder="Month" type="text" value="<?= date('F Y') ?>" id="month" class="form-control m-input m-input--air m-input--pill" aria-describedby="basic-addon1">
                      </div>
                    </div>
                  </div>

                  <div class="col-lg-2">
                    <br />
                    <button type="submit" style="margin-top: 7px" id="btn_go" class="btn btn-focus m-btn m-btn--custom m-btn--icon m-btn--air m-btn--pill">
                      <span>
                        <i class="la la-search"></i>
                        <span>
                          Go
                        </span>
                      </span>
                    </button>
                  </div>

                </div>

              </div>

            </div>
          </div>
      </div>
      </form>
    </div>

    <div class="m-portlet m-portlet--full-height" id="report_div" style="display: none;">
      <div class="m-portlet__head">
        <div class="m-portlet__head-caption">
          <div class="m-portlet__head-title">
            <h3 class="m-portlet__head-text">

            </h3>
          </div>
        </div>
        <div class="m-portlet__head-tools">


          <a href="javascript:;" onclick="window.print()" id="btn_print_bill" style="margin-left: 5px;margin-right: 5px" class="btn m-btn--gradient-from-danger m-btn--gradient-to-info  m-btn  m-btn--icon m-btn--air m-btn--pill">
            <span>
              <i class="fa fa-print"></i>
              <span>
                Print Report
              </span>
            </span>
          </a>
        </div>
      </div>
      <div class="m-portlet__body m-portlet__body--no-padding" id="print_view">
        <?php if ($this->config->item('company_letter_head') != '') { ?>
          <img class="letter_head_img" style="max-width: 1000px;display:none" src="<?php echo base_url() . 'uploads/company/' . $this->config->item('company_letter_head') ?>" />
        <?php } ?>
        <div class="m-invoice-2" style="padding-bottom: 20px">
          <div class="m-invoice__wrapper">
            <div class="m-invoice__head">
              <div class="m-invoice__container m-invoice__container--centered">
                <div class="m-invoice__logo" style="padding-top: 3rem;">
                  <a href="#">

                  </a>
                </div>
                <div class="row">
                  <div class="col-md-6" style="border-right: 1px solid #ebedf2;">
                    <span class="m-invoice__desc" style="text-align: left;padding: 1rem 0 1rem 0 !important;">
                      <span class="m-invoice__subtitle">Sales Staff</span>
                      <span><strong id="sales_staff_name"></strong></span>
                      <span><strong id="sales_staff_phone"></strong></span>
                      <span><strong id="sales_staff_email"></strong></span>
                    </span>
                  </div>
                  <div class="col-md-6">
                    <div class="m-invoice__logo" style="padding-top: 1rem;">
                      <a href="#">
                        <h2 id="report_title">SALES TARGET REPORT<br /></h2>
                      </a>
                    </div>

                  </div>
                </div>

              </div>
            </div>
            <div class="m-invoice__body m-invoice__body--centered" style="min-height: 200px" id="target_data_table">




            </div>

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

<!-- end:: Body -->
<!-- begin::Footer -->

<?php $this->view("includes/Inc_footer"); ?>
<!-- end::Footer -->

<!-- end:: Page -->

<?php $this->view("includes/Inc_sidebar"); ?>
<?php $this->view("includes/Inc_scripts"); ?>


<!--begin::Page Snippets -->
<?php $this->view("modules/include_scripts/bill_scripts"); ?>
<script>
  //    Toggle Sidebar
  // $("#m_aside_left_minimize_toggle").addClass("m-brand__toggler--active");
  // $("#body").addClass("m-brand--minimize m-aside-left--minimize");

  $("#sales_target_report_menu").addClass('m-menu__item--active m-menu__item--open');
  // $("#purchase_menu_2").addClass('m-menu__item--active');
</script>
<script>
  // month datepicker month select
  $('#month').datepicker({
    format: "MM yyyy",
    viewMode: "months",
    minViewMode: "months"
  });

  // sales_staff select2
  $("#sales_staff").select2({
    placeholder: "Select Sales Staff",
  });

  // if get has staff and month set values 
  var staff = "<?= $this->input->get('staff') ?>";
  var month = "<?= $this->input->get('month') ?>";
  if (staff != '' && month != '') {
    var month = "<?= date('F Y', strtotime($this->input->get('month'))) ?>";
    $("#sales_staff").val(staff).trigger('change');
    $("#month").val(month);
    $("#btn_go").trigger('click');
  }



  $('body').on('click', '#btn_go', function() {
    var sales_man = $('#sales_staff :selected').val();
    var month = $('#month').val();
    if (sales_man != '' && sales_man != null && month != '' && month != null) {

      $.post("<?php echo base_url() ?>sales_targets/get_sales_target_report", {
        staff: sales_man,
        month: month
      }, function(data) {
        var obj = $.parseJSON(data);
        $('#target_data_table').html('');

        if (obj.status != 0) {

          $('#report_title').html('SALES TARGET REPORT<br />' + $('#month').val().toUpperCase());
          $('#sales_staff_name').html(obj.target_data.sales_staff.toUpperCase());
          $('#sales_staff_phone').html(obj.target_data.sales_staff_phone_no);
          $('#sales_staff_email').html(obj.target_data.staff_email.toUpperCase());

          $('#target_data_table').html(obj.table);

          $("#report_div").show();

        } else {
          $("#report_div").hide();
          toastr.error(obj.message);
        }

      });


    } else {
      toastr["warning"]("Please select Sales man and month to generate report ");
    }
  })



  $(".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: {
        "new_paid_amount": {
          required: !0,
          number: !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("");
            location.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");
        }
      })
    )
  });
</script>