@extends('app')
@section('content')
<title>Services Report</title>
<style type="text/css">
.check {
  margin-top: 3% !important;
}
.checkbox {
    margin-bottom: 0px;
}
.shipment_packages {
  display: none;
}
td, th {
    /*font-size: 12px;*/
}
.modal.fade:not(.in).bottom .modal-dialog {
    -webkit-transform: translate3d(-25%, 0, 0);
    transform: translate3d(0, 25%, 0);
}
/* For fixed table thead */
table {
   /* table-layout:fixed;*/
}
.div-table-content {
  max-height: 655px;
  overflow-y:auto;
}
.scorll {
  width: 98.5%;
  margin-bottom: 0px;
  border-bottom: none !important;
}

</style>
<div class="content-wrapper">
    <div class="container-fluid">
    <div class="row">
      <div class="col-md-12">
                  <a href="?report=1" data-toggle="tooltip" title="" class="btn btn-primary" data-original-title="Download Excel" style="float:right;margin-right:2%;margin-top:1%">DOWNLOAD EXCEL <i class="fa fa-download"></i></a>
          <!-- <span style="float:right;margin-right:2%;margin-top:2%">Click on service number to reveal services details.</span> -->
          <h1 class="page-head-line">Services Report</h1>
      </div>
    </div>
    <div class="row">
        <form method="GET" action="/report" id="report-frm" name="report-frm">
        <input type="hidden" name="_token" value="{{ csrf_token() }}" />
    	  <div class="col-md-2 report_leftpanel">
    		   <label style="padding: 0px;margin-top: 2%;">Start Date :</lable>
                <div class="col-md-12 padding_filter" style="padding:0px">
                    <div class="input-group date">
                      <input type="text" id="report_start_date" name="start_date" data-format="DD-MM-YYYY" class="form-control" placeholder="DD-MM-YY" value =  "" >
                      <span class="input-group-btn">
                      <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
                      </span>
                    </div>
                </div>

                <label style="padding: 0px;margin-top: 2%;">End Date :</lable>
                <div class="col-md-12 padding_filter" style="padding:0px">
                    <div class="input-group date">
                      <input type="text" id="report_end_date" name="end_date" data-format="DD-MM-YYYY" class="form-control" placeholder="DD-MM-YY" value = "" >
                      <span class="input-group-btn">
                      <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
                      </span>
                    </div>
                </div>
              <label class="col-md-12 control-label" style="padding:0px; margin-top: 2%;">Technician : </label>
              <div class="col-md-12" style="padding:0px">
                    <p><span id="tags-input" class="selectivity-input" name="bikers_list" id="bikers_list" style="width:100%;font-size: 11px;"></span></p>
                    <textarea name="bikers_id" id="bikers_id" style="display:none;"></textarea>
              </div>
              <!-- Added by gaurav on 6-march-2020 for creating filter of client name -->
              <label class="col-md-12 control-label" style="padding:0px;margin-top: 2%;">Client Name: </label>
                  <div class="col-md-12 padding_filter" style="padding:0px">
                    <p><span id="vendors-input" class="selectivity-input" name="vendors_list" id="vendors_list" style="width:100%;font-size: 11px;"></span></p>
                    <textarea name="vendors_id" id="vendors_id" style="display:none;"></textarea>
              </div><!-- Ended here -->
              <label class="col-md-12 control-label" style="padding:0px;margin-top: 2%;">Service Status:</label>
              <div class="col-md-12">
              @foreach($statuses as $status)
                <div class="checkbox">
                  <label style="padding-left: 10px;">
                    <input type="checkbox" name="filter_status[]" value="" class="check" style="margin-top: 0px !important;" >                  </label>
                </div>
              @endforeach
              </div>

              <label class="col-md-12 control-label" style="padding:0px;margin-top: 2%;">Service No. : </label>
                             <div class="col-md-12" style="padding:0px">
                <input type="text" class="form-control" name="filter_shipment" value="">
              </div>

              <!-- Added by gaurav on 6-4-20 to make client ticket number -->
              <div class="row" style="margin-top:4%">
                                <div class="col-md-12">
                    <label style="margin-top: 8%;">Client Ticket No.</label>
                </div>
                  <div class="col-md-12">
                    <input type="text" class="form-control" name="clientticketno" value="">
                  </div>
              </div>
              
              <div class="col-md-12" style="margin-top: 4%">
                  <button type="submit" class="btn btn-success" id="shipment_form_submit" style="padding: 6px 6px;">&nbsp;Search</button>&nbsp;
                  <button onclick="reset_tags_box();return false;" class="btn btn-success" id="shipment_form_reset">&nbsp;Clear</button>
              </div>
            </form>
    	</div>
    	<div class="col-md-9">
            <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}" />
    		<!-- <table class="table table-striped table-bordered table-fixed scorll" id="header_table">
    			<thead>
    				<tr>
              <th style="width: 3%;"></th>

    					<th style="width:17.7%">AWB No.</th>
    					<th style="width:11.9%">Start Date</th>
    					<th style="width:11.9%">Closed Date</th>
    					<th style="width:13.9%">Status</th>
    					<th style="width:11.9%">Service Type</th>
              <th>Customer</th>
              <th>Technician</th>
             
    				</tr>
    			</thead>
        </table> -->
                <div class="div-table-content">
            <table class="table table-striped table-bordered table-fixed" id="content_table">
        			<tbody>
              <thead>
            <tr>
             <!--  <th style="width: 3%;"></th> -->

              <th>Service No.</th>
              <th>Start Date</th>
              <th>Closed Date</th>
              <th>Status</th>
              <th>Service Description</th>
              <th>Service Type</th>
              <th>Remark</th>
              <th>Client</th>
              <th>Technician</th>
             
            </tr>
          </thead>