@extends('layouts.adminlte-app')

@section('content')
<style type="text/css">
/*table.dataTable th:nth-child(3)) {
  word-break: break-all;
  white-space: pre-line;
}

table.dataTable td:nth-child(3){
  width: 20px;
  max-width: 100px;
  word-break: break-all;
  white-space: pre-line;
}*/
.text-wrap{
    white-space:normal;
}
.width-50{
    width:60px;
    padding-right: 25px !important;
}
.width-100{
    width:90px;
}
.width-200{
    width:200px;
}
.width-250{
    width:250px;
}
.table td{
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}
.content-wrapper, .main-footer {
    margin-left: 0px !important;
}
.width-lg{
    width:50%;
}
.width-md{
    width:20%;
}
.width-sm{
    width:10%;
}
</style>

<!-- Content Header (Page header) -->
  <section class="content-header">
    <h1>
      Cetak
      <small>Struk</small>
    </h1>
    <ol class="breadcrumb">
      <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
      <li><a href="#">Guest</a></li>
      <li class="active">Cetak Struk</li>
    </ol>
  </section>

  <!-- Main content -->
  <section class="content">
    <div class="row">
        <div class="col-md-12">
            <div class="box  box-default " id="accordion">
                <div class="box-header with-border" style="cursor: pointer;">
                    <h3 class="box-title">
                  <a data-toggle="collapse" data-parent="#accordion" href="#collapseFilter" aria-expanded="true" class="">
                     <i class="fa fa-filter" aria-hidden="true"></i>  Filters
                  </a>
                    </h3>
                </div>
                <div id="collapseFilter" class="panel-collapse active collapse in" aria-expanded="true" style="">
                    <div class="box-body">
                        <div class="col-md-8">
                            <div class="form-group">
                                <label for="type">Periode:</label>
                                <div class="input-group input-group-sm">
                                    <input type="text" class="form-control pull-right filter-table datepicker" id="from_date">
                                    <div class="input-group-addon">
                                        s/d
                                    </div>
                                    <input type="text" class="form-control pull-right filter-table datepicker" id="to_date">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 hide-sm">
                            <div class="form-group">
                                <label for="type"><br></label>
                                <div class="input-group input-group-sm">
                                    <br><br>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="type">Nomor Pelanggan:</label>
                                <input type="text" class="form-control" name="pelanggan" id="pelanggan" placeholder="Nomor Pelanggan">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="type">Admin:</label>
                                <div class="input-group input-group-sm">
                                    <input type="text" class="form-control" name="admin" id="admin" placeholder="Admin">
                                        <span class="input-group-btn">
                                            <button type="button" id="dateSearch" class="btn btn-info btn-flat">Search</button>
                                        </span>
                                </div>
                                <input type="hidden" class="input-sm form-control" name="search" value="0">
                            </div>
                        </div>
                    </div>
                </div>
            </div>    
        </div>
    </div>

    <!-- Info boxes -->
    <div class="box box-default color-palette-box">
        <div class="box-header with-border">
          <h3 class="box-title">Cetak Struk</h3>
        </div>
        <div class="box-body table-responsive">
            <!-- /.box-header -->
            <table class="table table-bordered table-hover display responsive nowrap" id="data">
                <thead>
                    <tr>
                        <th class="width-100">Tanggal</th>
                        <th class="width-100">ID Pelanggan</th>
                        <th>SN</th>
                        <th class="width-50">Cetak</th>
                    </tr>
                </thead>
            </table>
        </div>
        <!-- /.box-body -->
    </div>

  </section>
  <!-- /.content -->

@endsection

@push('scripts')
<script>
//Date picker
    $('.datepicker').datepicker({
        autoclose: true,
        format: 'dd/mm/yyyy',
    })

    $('.datepicker').datepicker('setDate', today);

$(document).ready(function() {
    $('.preloader').hide();
  // Setup - add a text input to each footer cell
    $('#data thead tr').clone(true).appendTo( '#data thead' );
    $('#data thead tr:eq(1) th').each( function (i) {
        var title = $(this).text();
        if(title != 'Cetak'){
          $(this).html( '<input type="text" style="width:100%" />' );
   
          $( 'input', this ).on( 'keyup change', function () {
              if ( table.column(i).search() !== this.value ) {
                  table
                      .column(i)
                      .search( this.value )
                      .draw();
              }
          } );
        }else{
          $(this).hide();
        }
    } );
    var table = $('#data').DataTable({
        'paging'      : true,
        'lengthChange': false,
        'searching'   : true,
        'ordering'    : true,
        'info'        : true,
        'autoWidth'   : false,
        processing: true,
        serverSide: true,
        autoWidth: false,
        orderCellsTop: true,
        fixedHeader: true,
        ajax: {
            'url': "{{route('datatables.struk')}}",
            data: function(d) {
                d.admin = $('input[name=admin]').val();
                d.tujuan = ($('input[name=pelanggan]').val().length === 0) ? '00000' : $('input[name=pelanggan]').val();
                d.search = $('input[name=search]').val();
                d.start_date = $('#from_date').val();
                d.end_date = $('#to_date').val();
            },
            'type': 'POST',
            'beforeSend': function (request) {
                request.setRequestHeader("X-CSRF-TOKEN", $('meta[name="csrf-token"]').attr('content'));
            },
            error: function (jqXHR, textStatus, errorThrown) {
                // alert('Sesi anda telah habis, mohon melakukan login ulang')
            }
        },
        "order": [[ 0, "desc" ]],
        columns: [
            { data: 'tgl_entri', name: 'tgl_entri' },
            { data: 'tujuan', name: 'tujuan' },
            { data: 'sn', name: 'sn' },
            { data: 'print', name: 'print', "searchable": false }
        ],
        columnDefs: [
          {
              render: function (data, type, full, meta) {
                      return "<div class='text-wrap'>" + data + "</div>";
                      // return data;
                  },
                  targets: [2, 3]
          }
       ]
    });

    $('#dateSearch').on('click', function() {
      $('input[name=search]').val(1)
      table.draw();
    });

    (function($) {
      $.fn.inputFilter = function(inputFilter) {
        return this.on("input keydown keyup mousedown mouseup select contextmenu drop", function() {
          if (inputFilter(this.value)) {
            this.oldValue = this.value;
            this.oldSelectionStart = this.selectionStart;
            this.oldSelectionEnd = this.selectionEnd;
          } else if (this.hasOwnProperty("oldValue")) {
            this.value = this.oldValue;
            this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
          }
        });
      };
    }(jQuery));

    $("#uintTextBox").inputFilter(function(value) {
      return /^\d*$/.test(value); });

});
function printa4(id){
  window.open("{{route('h2h.print.a4','')}}/"+id, "myWindow", 'width=800,height=300');
}

function printstruk(id){
  window.open("{{route('h2h.print.struk','')}}/"+id, "myWindow", 'width=400,height=350');
}
</script>
@endpush