@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;
}*/
.width-250{
    width:250px;
}
.text-wrap{
    white-space:normal;
}
.table td{
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}
.content-wrapper, .main-footer {
    margin-left: 0px !important;
}
.width-lg{
    width:70%;
}
.width-md{
    width:20%;
}
.width-sm{
    width:10%;
}
.width-xs{
    width:7.5%;
}
.bg-gangguan {
  background-color: #f8cfce !important;
}
</style>

<!-- Content Header (Page header) -->
  <section class="content-header">
    <h1>
      <small>Daftar Harga</small>
      Produk
    </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">Daftar Harga Produk</li>
    </ol>
  </section>

  <!-- Main content -->
  <section class="content">
    @foreach($product as $category)
        <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="#{{str_replace('.','_',$category->kode)}}" aria-expanded="true" class="">
                        <i class="fa fa-check-square-o" aria-hidden="true"></i>   {{$category->nama}}
                      </a>
                        </h3>
                    </div>
                    <div id="{{str_replace('.','_',$category->kode)}}" class="panel-collapse active collapse in" aria-expanded="true" style="">
                        <div class="box-body table-responsive">
                            <!-- /.box-header -->
                            <table class="table table-bordered table-hover display responsive nowrap" id="data{{str_replace('.','_',$category->kode)}}">
                                <thead>
                                    <tr>
                                        <th class="width-sm">Kode</th>
                                        <th class="width-lg">Nama</th>
                                        <th class="width-xs">Harga</th>
                                        <th class="width-xs">Status</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                        <!-- /.box-body -->
                    </div>
                </div>    
            </div>
        </div>
    @endforeach

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

@push('scripts')
<script>
$(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();
        $(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();
            }
        } );
    } );
    @foreach($product as $category)
        var table{{str_replace(".","_",$category->kode)}} = $('#data{{str_replace(".","_",$category->kode)}}').DataTable({
            'paging'      : true,
            'lengthChange': false,
            'searching'   : true,
            'ordering'    : true,
            'info'        : true,
            'autoWidth'   : false,
            processing: true,
            serverSide: true,
            orderCellsTop: true,
            fixedHeader: true,
            ajax: {
                'url': "{{route('datatables.guest.product')}}",
                data: function(d) {
                    d.produk = '{{$category->kode}}';
                },
                '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, "asc" ], [ 1, "asc" ], [ 3, "asc" ]],
            dom: 'Bfrtip',
            buttons: [
                {
                    extend:    'copyHtml5',
                    text:      '<i class="fa fa-files-o"></i>',
                    titleAttr: 'Copy'
                },
                {
                    extend:    'excelHtml5',
                    text:      '<i class="fa fa-file-excel-o"></i>',
                    titleAttr: 'Excel',
                    exportOptions: {
                        format: {
                            body: function(data, row, column, node) {              
                                return column == 3 ? data.replace(/[.]/g, '').replace("<div class='pull-right'>",'').replace("</div>", '') : data;
                     
                            }
                        }
                    }
                },
                {
                    extend:    'csvHtml5',
                    text:      '<i class="fa fa-file-text-o"></i>',
                    titleAttr: 'CSV',
                    exportOptions: {
                        format: {
                            body: function(data, row, column, node) {              
                                return column >= 4 && column <= 6 ? data.replace(/[.]/g, '').replace("<div class='pull-right'>",'').replace("</div>", '') : data;
                     
                            }
                        }
                    }
                },
                {
                    extend:    'pdfHtml5',
                    text:      '<i class="fa fa-file-pdf-o"></i>',
                    titleAttr: 'PDF'
                },
                'pageLength'
            ],
            "lengthMenu": [ [10, 25, 50, 100, 250, 500, -1], [10, 25, 50, 100, 250, 500, "All"] ],
            columns: [
                { data: 'kode', name: 'kode' },
                { data: 'nama', name: 'nama' },
                { data: 'harga', name: 'harga'},
                { data: 'gangguan', name: 'gangguan' }
            ],
            columnDefs: [
              {
                  render: function (data, type, full, meta) {
                      return "<div class='text-wrap'>" + data + "</div>";
                      // return data;
                  },
                  targets: [0, 2]
              }
            ],
            createdRow: function( row, data, dataIndex ) {
                // Set the data-status attribute, and add a class
                // alert(data.status)
                if(data.gangguan == "Close"){
                    $(row).addClass( 'bg-gangguan' );
                }
                // $( row ).find('td:eq(0)')
                //     .attr('data-status', data.status ? 'locked' : 'unlocked')
                //     .addClass('asset-context box');
            }
        });
    @endforeach

    $('#dateSearch').on('click', function() {
      table.draw();
    });

    setInterval(function () {
        table.ajax.reload(null, false);
    }, 60000);
});
</script>
@endpush