@extends('layouts.authenticated')
@section('title','Product Category')
@section('product','active')
@section('style')
    <style>
        .bg-yes {
            border-radius: 25px;
            background: green;
            color: white;
            text-align: center;
        }

        .bg-no {
            border-radius: 25px;
            background: red;
            color: white;
            text-align: center;
        }

        .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-book"></i> Product Category</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>Category ID</th>
                            <th>Description</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: 10,
                /*stateSave: true,*/
                deferRender: true,
                position: 'fixed',
                /*serverSide: true,*/
                /*destroy: true,*/
                scrollY: "500px",
                scrollCollapse: true,
                ajax: {
                    url: "{{ url('product/fetch-category') }}",
                    dataType: "json",
                    type: "GET",
                },
                columns: [
                    {data: "catid"},
                    {data: "category_name"},
                ],
                columnDefs: [
                    {className: "dt-nowrap", targets: [1]}
                ],
                order: [[0, 'asc']],
            });

            $(".form-select").attr('form-select', 'form-control');


            /*  $.fn.dataTable.ext.search.push(
                  function (settings, data, dataIndex) {
                      var selectedCategory = $('#filter-category').val()
                      var selectedExist = $('#filter-exist').val()
                      var category = data[2];
                      console.log(selectedCategory);
                      if (selectedCategory === "" || category.includes(selectedCategory)) {
                          return true;
                      }
                      return false;
                  }
              );*/

            $(document).on('change', '#filter-category', function (e) {
                table.column(2).search($(this).val()).draw();
            })
            $(document).on('change', '#filter-exist', function (e) {
                table.column(3).search($(this).val()).draw();
            })

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