@extends('layouts/pos_layout')
@section('title', '| ' . $data['pageTitle'])
@section('content')
    <style>
        .page-item.active .page-link {
            background-color: lightgrey !important;
            border: 1px solid black;
        }

        .page-link {
            color: black !important;
        }
    </style>
    <div class="row page-wrap">
        <div class="col-md-12">
            <div class="" style="">
                <div class=" ">
                    <div class="panel panel-default" style="background-color:#708090;">
                        <div class="panel-heading" style="padding-bottom:0px">
                            <div class="panel-title">
                                <h2>{!! $data['pageTitle'] !!}</h2>
                            </div>
                            <div class="panel-options">
                                <a href="{{ url('pos/product-sales-config/') }}"
                                    class="btn btn-info pull-right addViewBtn"><i
                                        class="glyphicon glyphicon-th-list viewIcon">
                                    </i>{!! $data['pageTitle'] !!} List</a>
                            </div>
                        </div>

                        <div class="panel-body panelBodyView">
                            <div class="panel-body panelBodyView" id="productSaleConfigSave">

                                <table class="table table-striped table-bordered table-condensed first-col-dark"
                                    id="datatable" style="width:100%;">
                                    <thead>
                                        <tr>
                                            <th width="5%" class="text-center  sorting_1">SL#</th>
                                            <th width="10" class="text-center  sorting_1">Product Name</th>
                                            <th width="10" class="text-center">Group</th>
                                            <th width="10" class="text-center">Category</th>
                                            <th width="10" class="text-center">Sub Category</th>
                                            <th width="10" class="text-center">Brand</th>
                                            <th width="10" class="text-center">Model</th>
                                            <th width="10" class="text-center">Size</th>
                                            <th width="10" class="text-center">Color</th>
                                            <th width="10" class="text-center">Cost Price</th>
                                            <th width="10" class="text-center">Action
                                                {{-- @if ($data['click_all'] == true)
                                                    <span
                                                        style='color: green;font-size: 13px;background: #eee !important'>&#10004;</span>
                                                @else
                                                    <span
                                                        style='color: red;font-size: 13px;background: #eee !important'>&#10005;</span>
                                                @endif --}}
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody id="table_data">

                                    </tbody>
                                    <p id='category_product_ide' style="max-height:3px;"></p>

                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function() {
            $("#effect_date").datepicker({
                changeMonth: true,
                changeYear: true,
                dateFormat: 'dd-mm-yy',
                onSelect: function() {
                    if (effect_date) {
                        $('#effect_datee').hide();
                    } else {
                        $('#effect_datee').show();
                    }
                }
            });
            getProductSystem();
            $('form').submit(function(event) {
                event.preventDefault();
                getProductSystem();
            });

        });

        function toggle(source) {
            var checkboxes = document.querySelectorAll('input[type="checkbox"]');
            for (var i = 0; i < checkboxes.length; i++) {
                if (checkboxes[i] != source)
                    checkboxes[i].checked = source.checked;
            }
        }

        function getProductSystem() {
            $('#loadingModal').show();
            $.ajax({
                type: 'post',
                url: '{{ Request::url() }}',
                data: $('form').serialize(),
                dataType: 'json',
                success: function(_response) {

                    $('#loadingModal').hide();
                    $('#table_data').empty();
                    if (_response.responseTitle == 'success') {

                        var totalQty = 0;
                        var totalGrossTransferAmount = 0;

                        $.each(_response.data, function(key, value) {
                            html = '<tr>';
                            html += '<td style="text-align:center">' + value.sl +
                                ' </td>';
                            html += '<td style="text-align:center"> ' + value
                                .purchase_name + ' </td>';
                            html += '<td style="text-align:center"> ' + value
                                .pro_group + ' </td>';
                            html += '<td style="text-align:center"> ' + value
                                .pro_category + ' </td>';
                            html += '<td style="text-align:center"> ' + value
                                .pro_subcategory + '  </td>';
                            html += '<td style="text-align:center"> ' + value
                                .pro_brand + '  </td>';
                            html += '<td style="text-align:center"> ' + value
                                .pro_model + '  </td>';
                            html += '<td style="text-align:left"> ' + value
                                .pro_size + '  </td>';
                            html += '<td style="text-align:left"> ' + value
                                .pro_color + '  </td>';
                            html += '<td style="text-align:center"> ' + value
                                .pro_costprice + '  </td>';
                            html += '<td style="text-align:center"> ' + value
                                .click + '  </td>';
                            html += '</tr> ';

                            $('#table_data').append(html);
                        });

                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Something went wrong!',
                            showConfirmButton: true
                        })
                        return false;
                        $('#loadingModal').hide();
                    }
                },
                error: function(_response) {
                    toastr.error('_response.errors');
                    $('#loadingModal').hide();
                }
            });
        }
    </script>
@endsection