@extends('layouts.authenticated')
@section('title','Product List')
@section('product','active')
@section('style')
  <style>
    .product-image {
      max-width: 100%;
      height: auto;
      width: 100%
    }

    .product-image-thumbs {
      -webkit-align-items: stretch;
      -ms-flex-align: stretch;
      align-items: stretch;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      margin-top: 2rem
    }

    .product-image-thumb {
      box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
      border-radius: .25rem;
      background-color: #fff;
      border: 1px solid #dee2e6;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      margin-right: 1rem;
      max-width: 7rem;
      padding: .5rem
    }

    .product-image-thumb img {
      max-width: 100%;
      height: auto;
      -webkit-align-self: center;
      -ms-flex-item-align: center;
      align-self: center
    }

    .product-image-thumb:hover {
      opacity: .5
    }
  </style>

@endsection
@section('content')
  <div class="panel panel-info">
    <div class="panel-heading"><i class="fa fa-tag"></i> Products</div>
    <div class="panel-body">
      <div id="output">
        <div class="dataTable_wrapper table-responsive" id="tablelist">
          <table class="table table-striped table-hover" id="product-table">
            <thead style="white-space: nowrap">
            <tr>
              <th>Product Name</th>
              <th>Size</th>
              <th><select class="category-drpdwn" style="border:white;">
                  <option value="" hidden>Category</option>
                  <option value="">All</option>
                  @foreach($data['productCategory'] as $category)
                    <option value="{{$category->category_name}}">{{$category->category_name}}</option>
                  @endforeach
                </select></th>
              <th><select class="exist-drodwn" style="border:white;">
                  <option value="" hidden>Exist in PR</option>
                  <option value="">ALL</option>
                  <option value="Yes">Yes</option>
                  <option value="No">No</option>
                </select></th>
              <th>Last Updated Date</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td colspan="6" style="text-align: center">Processing</td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="product-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
       aria-hidden="true">
    <div class="modal-dialog" role="document" style="width:90%;">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span style="color: red;font-size: 25px">&times;</span>
          </button>
          <h4 class="modal-title" name="modal" id="exampleModalLabel"><i class="fa fa-tags"
                                                                         style="font-size: 25px; color: lightblue"></i>
            Product Information</h4>
        </div>
        <div class="modal-body" id="modal-content">

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

@endsection

@section('customjs')
  <script type="text/javascript">
    $(document).ready(function () {
      var table = $('#product-table').dataTable({
        //mark: true,
        processing: true,
        //  paging: false,
        iDisplayLength: 100,
        /*stateSave: true,*/
       // deferRender: true,
        position: 'fixed',
        serverSide: true,
        /*destroy: true,*/
        scrollY: "500px",
        scrollCollapse: true,
        ajax: {
          url: "{{ url('product/fetch') }}",
          dataType: "json",
          type: "GET",
        },
        columns: [
          {
            data: "product_name",
            render: function (data, type, row) {
              return '<a class="btn-submit"  data-sku=' + row['stn_sku'] + ' + style="cursor: pointer;">' + row['stn_sku'] + '</a>' + '<p class="text-muted">' + data + '</p>';
            }
          },
          {data: "size"},
          {data: "category_name"},
          {
            data: "is_exist",
            render: function (data, type, row) {
              if (data == 1) {
                var exist = '<div class="p-3 mb-2" style="color: green">Yes</div>';
              } else {
                var exist = '<div class="p-3 mb-2" style="color: red">No</div>';
              }
              return exist;
            }
          },
          {data: "last_updated_date"},
        ],
        columnDefs: [
          {className: "dt-nowrap", targets: [4]},
          {orderable: false, targets: [2, 3]}
        ],
        order: [[0, 'asc']],
      });


      $(document).on('click', '.btn-submit', function (e) {
        var sku = $(this).data('sku');
        $.ajax({
          url: 'product-details',
          type: "GET",
          data: {sku: sku},
          dataType: 'html',
          beforeSend: function (response) {
            $('#modal-content').html()
          },
          success: function (response) {
            $('#modal-content').html(response)
          },
          complete: function (response) {
            //$('#modal-content').html(response.responseText)
            $('#product-modal').modal('show')
          },
        });
      });

      $('.category-drpdwn').on('change', function (e) {
        var status = $(this).val();
        $('.category-drpdwn').val(status)
        //dataTable.column(6).search('\\s' + status + '\\s', true, false, true).draw();
        $('#product-table').DataTable().column(2).search(status).draw();
      })

      $('.exist-drodwn').on('change', function (e) {
        var status = $(this).val();
        $('.exist-drodwn').val(status)
        //dataTable.column(6).search('\\s' + status + '\\s', true, false, true).draw();
        $('#product-table').DataTable().column(3).search(status).draw();
      })
    });
  </script>
@endsection