@extends('front.layouts.main')

@section('header')

@endsection

@section('content')


<div class="container-fluid">
  <br><br>
  <table class="table table-hover">
  <thead>
    <tr>
      <th scope="col">ID</th>
      <th scope="col">Quantity</th>
      <th scope="col">Supplier</th>
      <th scope="col">Costing</th>
      <th scope="col">Category</th>
      <th scope="col">Branch</th>
      <th scope="col">Bar Code</th>
      <th scope="col">Remark</th>
      <th scope="col">Delete</th>
    </tr>
  </thead>
  @foreach($listings as $key => $listing)
  <tbody>
    <tr>
      <th scope="row">{{$key + 1}}</th>
      <td>{{$listing->quantity}}</td>
      <td>{{$listing->supplier->supplier_name}}</td>
      <td>{{$listing->costing}}</td>
      <td>{{$listing->category->category_name}}</td>
      <td>{{$listing->branch->branch}}</td>
      <td> <a onclick="barcode( {{$listing->bar_code_sh}} )" href="#">{{$listing->bar_code_sh}}</a> </td>
      <td>{{$listing->remark}}</td>
      <td>
        
          <a href="{{route('delete',[$listing->id])}}" class="btn btn-danger fa fa-trash">Delete</a>
      </td>
    </tr>
  </tbody>
  @endforeach
</table>
</div>
  <!-- <div class="select">
    <select class="form-control" id="locale">
      <option value="af-ZA">af-ZA</option>
      <option value="ar-SA">ar-SA</option>
      <option value="ca-ES">ca-ES</option>
      <option value="cs-CZ">cs-CZ</option>
      <option value="da-DK">da-DK</option>
      <option value="de-DE">de-DE</option>
      <option value="el-GR">el-GR</option>
      <option value="en-US" selected>en-US</option>
      <option value="es-AR">es-AR</option>
      <option value="es-CL">es-CL</option>
      <option value="es-CR">es-CR</option>
      <option value="es-ES">es-ES</option>
      <option value="es-MX">es-MX</option>
      <option value="es-NI">es-NI</option>
      <option value="es-SP">es-SP</option>
      <option value="et-EE">et-EE</option>
      <option value="eu-EU">eu-EU</option>
      <option value="fa-IR">fa-IR</option>
      <option value="fi-FI">fi-FI</option>
      <option value="fr-BE">fr-BE</option>
      <option value="fr-FR">fr-FR</option>
      <option value="he-IL">he-IL</option>
      <option value="hr-HR">hr-HR</option>
      <option value="hu-HU">hu-HU</option>
      <option value="id-ID">id-ID</option>
      <option value="it-IT">it-IT</option>
      <option value="ja-JP">ja-JP</option>
      <option value="ka-GE">ka-GE</option>
      <option value="ko-KR">ko-KR</option>
      <option value="ms-MY">ms-MY</option>
      <option value="nb-NO">nb-NO</option>
      <option value="nl-NL">nl-NL</option>
      <option value="pl-PL">pl-PL</option>
      <option value="pt-BR">pt-BR</option>
      <option value="pt-PT">pt-PT</option>
      <option value="ro-RO">ro-RO</option>
      <option value="ru-RU">ru-RU</option>
      <option value="sk-SK">sk-SK</option>
      <option value="sv-SE">sv-SE</option>
      <option value="th-TH">th-TH</option>
      <option value="tr-TR">tr-TR</option>
      <option value="uk-UA">uk-UA</option>
      <option value="ur-PK">ur-PK</option>
      <option value="uz-Latn-UZ">uz-Latn-UZ</option>
      <option value="vi-VN">vi-VN</option>
      <option value="zh-CN">zh-CN</option>
      <option value="zh-TW">zh-TW</option>
    </select>
  </div>

  <div id="toolbar">
    <button id="remove" class="btn btn-danger" disabled>
      <i class="fa fa-trash"></i> Delete
    </button>
  </div>
  <table
    id="table"
    data-toolbar="#toolbar"
    data-search="true"
    data-show-refresh="true"
    data-show-toggle="true"
    data-show-fullscreen="true"
    data-show-columns="true"
    data-show-columns-toggle-all="true"
    data-detail-view="true"
    data-show-export="true"
    data-click-to-select="true"
    data-detail-formatter="detailFormatter"
    data-minimum-count-columns="2"
    data-show-pagination-switch="true"
    data-pagination="true"
    data-id-field="id"
    data-page-list="[10, 25, 50, 100, all]"
    data-show-footer="true"
    data-side-pagination="server"
    data-url="https://examples.wenzhixin.net.cn/examples/bootstrap_table/data"
    data-response-handler="responseHandler">
  </table>
</div> -->

@endsection

@section('js')

<script>
  var $table = $('#table')
  var $remove = $('#remove')
  var selections = []

  function getIdSelections() {
    return $.map($table.bootstrapTable('getSelections'), function (row) {
      return row.id
    })
  }

  function responseHandler(res) {
    $.each(res.rows, function (i, row) {
      row.state = $.inArray(row.id, selections) !== -1
    })
    return res
  }

  function detailFormatter(index, row) {
    var html = []
    $.each(row, function (key, value) {
      html.push('<p><b>' + key + ':</b> ' + value + '</p>')
    })
    return html.join('')
  }

  function operateFormatter(value, row, index) {
    return [
      '<a class="like" href="javascript:void(0)" title="Like">',
      '<i class="fa fa-heart"></i>',
      '</a>  ',
      '<a class="remove" href="javascript:void(0)" title="Remove">',
      '<i class="fa fa-trash"></i>',
      '</a>'
    ].join('')
  }

  window.operateEvents = {
    'click .like': function (e, value, row, index) {
      alert('You click like action, row: ' + JSON.stringify(row))
    },
    'click .remove': function (e, value, row, index) {
      $table.bootstrapTable('remove', {
        field: 'id',
        values: [row.id]
      })
    }
  }

  function totalTextFormatter(data) {
    return 'Total'
  }

  function totalNameFormatter(data) {
    return data.length
  }

  function totalPriceFormatter(data) {
    var field = this.field
    return '$' + data.map(function (row) {
      return +row[field].substring(1)
    }).reduce(function (sum, i) {
      return sum + i
    }, 0)
  }

  function initTable() {
    $table.bootstrapTable('destroy').bootstrapTable({
      height: 550,
      locale: $('#locale').val(),
      columns: [
        [{
          field: 'state',
          checkbox: true,
          rowspan: 2,
          align: 'center',
          valign: 'middle'
        }, {
          title: 'Item ID',
          field: 'id',
          rowspan: 2,
          align: 'center',
          valign: 'middle',
          sortable: true,
          footerFormatter: totalTextFormatter
        }, {
          title: 'Item Detail',
          colspan: 3,
          align: 'center'
        }],
        [{
          field: 'name',
          title: 'Item Name',
          sortable: true,
          footerFormatter: totalNameFormatter,
          align: 'center'
        }, {
          field: 'price',
          title: 'Item Price',
          sortable: true,
          align: 'center',
          footerFormatter: totalPriceFormatter
        }, {
          field: 'operate',
          title: 'Item Operate',
          align: 'center',
          clickToSelect: false,
          events: window.operateEvents,
          formatter: operateFormatter
        }]
      ]
    })
    $table.on('check.bs.table uncheck.bs.table ' +
      'check-all.bs.table uncheck-all.bs.table',
    function () {
      $remove.prop('disabled', !$table.bootstrapTable('getSelections').length)

      // save your data, here just save the current page
      selections = getIdSelections()
      // push or splice the selections if you want to save all data selections
    })
    $table.on('all.bs.table', function (e, name, args) {
      console.log(name, args)
    })
    $remove.click(function () {
      var ids = getIdSelections()
      $table.bootstrapTable('remove', {
        field: 'id',
        values: ids
      })
      $remove.prop('disabled', true)
    })
  }

  $(function() {
    initTable()

    $('#locale').change(initTable)
  })

  function deleteFunction(id) {
     // body...
  }


</script>

<script>
  function barcode(id)
  { 
    $('#details').empty();

    $.ajax({
        url: "/de-get-products-detail/"+id,
        type: 'GET',
        dataType: 'json', // added data type
        success: function(res) {
            html = `<div class="row" id="b">
                      <div class="col-md-6">
                        <b>Ruby LC </b><br>
                      </div>
                      <div class="col-md-6">
                        <b style="float:right">`+res.category.category_name+`</b> <br>
                      </div>
                    </div>`;

                  $('#details').empty();

                  JsBarcode("#barcode", id);

                  

                  $('#details').append(html);

                  $('.modal').modal('show');
        }
    });
  }
</script>

<script>
  function printDiv() {
      var divContents = document.getElementById("b").innerHTML;
      var a = window.open('', '', 'height=500, width=500');
      a.document.write('<html>');
      a.document.write('<body >');
      a.document.write(divContents);
      a.document.write('</body></html>');
      a.document.close();
      a.print();
  }
</script>


@endsection

@section('modal')
    <div class="modal" tabindex="-1" role="dialog">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Barcode</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div id="b" class="modal-body">
            <div class="row justify-content-center">
              <div class="col-md-8">
                <div id="details">

                </div>
                <div class="row justify-content-center">
                  <div class="col-md-10">
                    <svg id="barcode"></svg>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer">
              <div class="col-12" style="text-align: center">
                <a href="javascript:void" onclick="printDiv()" rel="noopener" class="btn btn-success">
                  <i class="fas fa-print"></i>
                  Print
                </a>
              </div>
          </div>
        </div>
      </div>
    </div>
@endsection