@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/addProduct') }}" class="btn btn-info pull-right addViewBtn">
                            <i class="glyphicon glyphicon-plus-sign addIcon"></i>{{ $data['addBtnLabel'] }}
                        </a>
                    </div>
                </div>

                <div class="panel-body panelBodyView">
                    @php
                        if($data['branchName']->name =='Head Office')
                        {
                           $searchElements = [
                                ['element' => 'dateRange'],
                                ['element' => 'supplierId'],
                                ['element' => 'group_id'],
                                ['element' => 'category_id'],
                                ['element' => 'sub_category_id'],
                                ['element' => 'model_id'],

                            ];
                        }
                        else{
                            $searchElements = [
                                ['element' => 'dateRange'],
                                ['element' => 'supplierId'],
                                ['element' => 'group_id'],
                                ['element' => 'category_id'],
                                ['element' => 'sub_category_id'],
                                ['element' => 'model_id'],

                            ];
                        }


                    @endphp
                    @include('partials.searchPanel.main', ['searchElements' => $searchElements])

                    <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">Barcode</th>
                                <th width="10" class="text-center">Cost Price</th>
                                <th width="10" class="text-center">Action</th>
                            </tr>
                        </thead>
                        <tbody id="tableBodySection">

                        </tbody>

                    </table>
                </div>
            </div>
        </div>
    </div>
    </div>
    </div>
    @include('pos/productConfig/product/productDetails')
    <script>
        $(document).ready(function() {

            var dataTable = $('#datatable').DataTable({
                "sDom": "ltipr", // For removeing default Search bar //
                "processing": true,
                "serverSide": true,
                "ordering": false,

                "ajax": {
                    "url": "{{ Request::url() }}",
                    "type": "POST",
                    "data": function(d) {
                        var inputs = {};
                        $.each($('form').serializeArray(), function() {
                            inputs[this.name] = this.value;
                        });
                        d.filter = inputs;
                    }
                },

                "columns": [{
                        "data": "sl"
                    },
                    {
                        "data": "purchase_name",
                        className: "text-align-center"
                    },
                    {
                        "data": "pro_group",
                        className: "text-align-center"
                    },
                    {
                        "data": "pro_category",
                        className: "text-align-center"
                    },
                    {
                        "data": "pro_subcategory",
                        className: "text-align-center"
                    },
                    {
                        "data": "pro_brand",
                        className: "text-align-center"
                    },
                    {
                        "data": "pro_model",
                        className: "text-align-center"
                    },
                    {
                        "data": "pro_size",
                        className: "text-align-center"
                    },
                    {
                        "data": "pro_color",
                        className: "text-align-center"
                    },
                    {
                        "data": "pro_barcode",
                        className: "text-align-center"
                    },
                    {
                        "data": "pro_costprice",
                        className: "text-align-right"
                    },
                    {
                        "data": "id",
                        className: "text-center"
                    }
                ],

                "columnDefs": [{
                    "targets": -1,
                    "data": "id",
                    "render": function(data, type, row, meta) {

                        var activedate = "{{ $data['branch_active_date'] }}";
                        var html = '';
                        var classCheck = '<i class="fa fa-check text-success" aria-hidden="true"></i>';

                        if(row.status == 1){
                            classCheck = '<i class="fa fa-check text-success" aria-hidden="true"></i>';
                        }else{
                            classCheck = '<i class="fa fa-times text-danger" aria-hidden="true"></i>';
                        }

                        if(row.product_check == 0){
                            html += '<a href="javascript:;" data-token="" data-id="'+data+'" class="btn btn-xs form5 btn-info"><i class="fa fa-eye" aria-hidden="true"></i></a>\
                            <a href="{{ url("/pos/editProduct/") }}/' + data +
                            '" class="btn btn-xs btn-info"><i class="fa fa-edit" aria-hidden="true"></i></a>' +
                            '<a href="javascript:;"  data-id=' + data +
                            ' class="btn btn-xs btn-danger delete-action"><i class="fa fa-trash" aria-hidden="true"></i></a>';
                        }else{
                            html += '<a href="javascript:;" data-token="" data-id="'+data+'" class="btn btn-xs form5 btn-info"><i class="fa fa-eye" aria-hidden="true"></i></a>';
                            html += '<a href="javascript:;" data-id="'+data+'" data-status="'+row.status+'" class="btn btn-xs btn-info status-update-action">'+classCheck+'</a>';
                        }

                        return html;


                    }
                }]


            });

            $("#searchForm").submit(function(e) {
                e.preventDefault();
                dataTable.draw();
            });



             //delete function
            $(document).on('click', '.delete-action', function() {

                Swal.fire({
                  title: 'Are you sure?',
                  text: "Once delete you won't be able to revert this!",
                  icon: 'warning',
                  showCancelButton: true,
                  confirmButtonColor: '#d33',
                  cancelButtonColor: '#7e7979',
                  confirmButtonText: 'Yes, delete it!'
                }).then((result) => {
                  if (result.isConfirmed) {

                    $.ajax({
                        type: 'post',
                        url: '{{ url("/pos/deleteProduct") }}',
                        data: {
                          '_token': $('input[name=_token]').val(),
                          'id': $(this).data('id')
                        },
                        success: function(_response) {
                          if(_response.responseTitle == 'success') {
                            Swal.fire({
                              icon: 'success',
                              title: 'Deleted!',
                              text: 'This data has been deleted.',
                              showConfirmButton: false,
                              timer: 1500
                            })

                            setTimeout(function(){
                              dataTable.ajax.reload();
                            }, 1000);


                          }
                          else {
                            Swal.fire({
                              icon: 'error',
                              title: 'Failed to delete!',
                              text: 'This data has not been deleted.',
                              showConfirmButton: true,
                            })
                          }


                          // setTimeout(function(){
                          //   window.location.reload(1);
                          // }, 1000);
                        }
                    });



                  }
                })


            });

             //update status function
            $(document).on('click', '.status-update-action', function() {

                if($(this).data('status') == 1){
                    var statusLabel = 'Inactive';
                }else{
                    var statusLabel = 'Active';
                }

                Swal.fire({
                  title: 'Are you want to '+statusLabel+' this product?',
                  text: "Please change product status for "+statusLabel+" this product?",
                  icon: 'warning',
                  showCancelButton: true,
                  confirmButtonColor: '#d33',
                  cancelButtonColor: '#7e7979',
                  confirmButtonText: 'Yes, do it!'
                }).then((result) => {
                  if (result.isConfirmed) {

                    $.ajax({
                        type: 'post',
                        url: '{{ url("/pos/statusUpdateProduct") }}',
                        data: {
                          '_token': $('input[name=_token]').val(),
                          'id': $(this).data('id'),
                          'status': $(this).data('status')
                        },
                        success: function(_response) {
                          if(_response.responseTitle == 'success') {
                            Swal.fire({
                              icon: 'success',
                              title: 'Updated!',
                              text: 'This data has been updated.',
                              showConfirmButton: false,
                              timer: 1500
                            })

                            setTimeout(function(){
                              dataTable.ajax.reload();
                            }, 1000);


                          }
                          else {
                            Swal.fire({
                              icon: 'error',
                              title: 'Failed to update!',
                              text: 'This data has not been updated.',
                              showConfirmButton: true,
                            })
                          }


                          // setTimeout(function(){
                          //   window.location.reload(1);
                          // }, 1000);
                        }
                    });



                  }
                })


            });


            //product details model
            $(document).on('click', '.form5', function() {
                if(hasAccess('pos/productDetail')){
                    $('#imageShow3').empty();
                    var id = ($(this).data('id'));
                    var crsf = ($(this).data('token'));
                    //alert(id);alert(crsf);
                    $.ajax({
                        type: 'post',
                        url: './productDetail',
                        data: {
                            '_token': $('input[name=_token]').val(),
                            'id': id
                        },
                        dataType: 'json',
                        success: function( _response ){
                            //console.log(JSON.stringify(data));
                            $.each(_response.data, function( index, value ){
                                // console.log(_response.data.supplierName.company_name);
                                $('#ProductName').text(_response.data.productName);
                                $('#Id').text(_response.data.productIdNo);
                                $('#Description').text(_response.data.description);
                                $('#SupplierName').text(_response.data.supplierName);
                                $('#Group').text(_response.data.groupName);
                                $('#Catagory').text(_response.data.categoryName);
                                $('#SubCatagory').text(_response.data.subCategoryName);
                                $('#Brand').text(_response.data.productBrandName);
                                $('#Model').text(_response.data.productModelName);
                                $('#Size').text(_response.data.ProductSizeName);
                                $('#Color').text(_response.data.productColorName);
                                $('#UOM').text(_response.data.productUomName);
                                $('#CostPrice').text(_response.data.costPrice);
                                $('#SalesPrice').text(_response.data.salesPrice);
                                $('#MinimumSt').text(_response.data.minimumStock);
                                $('#Barcode').text(_response.data.barcode);
                                $('#BarcodeSystem').text(_response.data.systemBarcode);
                                $('#Warranty').text(_response.data.warranty);
                                $('#ServiceWarranty').text(_response.data.serviceWarranty);
                                $('#CompresserWarranty').text(_response.data.compresserWarranty);

                            });

                            var imageName = _response.data.imageName;
                            $('#imageShow3').append('<img src="{{ asset("images/pos/product/") }}'+ '/' + imageName +'" width="300" height="300" class="amni"/>');
                            $('.modal-title').text('Product Details');
                            $('.modal-header').css({"background-color":"black", "color":"white", "padding":"10px"});
                            $('.modal-dialog').css('width','90%');
                            $('.deleteContent').hide();
                            $('.modal-footer').hide();
                            $('.form-horizontal').show();
                            $('#myModal2').modal('show');

                        },
                        error: function( data ){
                            alert();
                        }
                    });
                }

            });

        });


    </script>
@endsection