@extends('layouts.master')

@section('page_title', 'Product')
@section('title', 'Products Details')
@section('main_item', 'Products')
@section('sub_item', 'Manage Your Products')
@section('content')
    <style>
        div.dt-buttons {
            position: relative;
            float: right;
        }

        div.dataTables_filter {
            margin-top: 7px
        }
    </style>
    
    <div class="col-12">
        <div class="card">
            <div id="accordion">
                <div class="border-bottom card-header" style="background-color: white; cursor: pointer;" data-toggle="collapse"
                    data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                    <h4 class="mb-0 header-title">
                        Filter
                    </h4>
                </div>
                <div id="collapseOne" class="collapse show mt-3" aria-labelledby="headingOne" data-parent="#accordion">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label style="font-weight: bold" for="category">Category</label>
                                    <select class="form-control" id="product_list_filter_category_id" name="category">
                                        <option value="">All</option>
                                        @foreach ($categories as $category)
                                            <option value="{{ $category->id }}">{{ $category->category_name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                           
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label style="font-weight: bold" for="unit">Unit</label>
                                    <select class="form-control" id="product_list_filter_unit_id" name="unit">
                                        <option value="">All</option>
                                        @foreach ($units as $unit)
                                            <option value="{{ $unit->id }}">
                                                {{ $unit->actual_name . ' (' . $unit->short_name . ')' }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label style="font-weight: bold" for="synced">Woocommerce Synced</label>
                                    <select class="form-control" id="synced" name="synced">
                                        <option value="">All</option>
                                        <option value="1">YES</option>
                                        <option value="false">NO</option>
                                    </select>
                                </div>
                      
                            </div>
                            <div class="col-md-3" id="div_value">
                                <div class="form-group">
                                    <label style="font-weight: bold" for="attribute_value">Attribute Value</label>
                                    <select class="form-control select2" id="attribute_value" name="attribute_value">
                                        <option value="" selected>All</option>
                                        @foreach ($attributes as $attribute)
                                            <option value="{{ $attribute->id }}">{{ $attribute->value }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
             
                </div>
            
            </div>
        </div>
    </div>
    <div class="col-md-12">
        <div class="card">
            <div class="card-body">

              
                <ul class="nav nav-tabs" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" data-toggle="tab" href="#products" role="tab" id="product_btn"
                            aria-selected="false"><i class="fa fa-cubes" aria-hidden="true"></i> All
                            Products</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#stock" role="tab" aria-selected="true"
                            id="stock_btn"><i class="fa fa-hourglass-half " aria-hidden="true"></i> Stock Report</a>
                    </li>
                </ul>

              
                <div class="tab-content">
                    <div class="tab-pane p-3 active" id="products" role="tabpanel">
                        <div>
                            @can('product_create')
                                <button type="button" class="btn btn-primary px-4 float-right mt-0 mb-3" id="edit_bulk_product"
                                    style="margin-left: 10px"><i class="mdi mdi-animation mr-2"></i>Edit Bulk Product
                                </button>
                                <form id="bulk-edit-form" action="{{ route('products.bulk_product_edit') }}" method="get">
                                    <input type="hidden" id="bulk_product_id" name="bulk_product_id" value="">
                                </form>
                                <button class="btn btn-primary px-4 float-right mt-0 mb-3" data-toggle="modal"
                                    data-animation="bounce" id="add_bulk_product"
                                    data-href="{{ route('products.add-bulk-product') }}" style="margin-left: 10px"
                                    href="javascript:void(0)"><i class="mdi mdi-chevron-double-down mr-2"></i>Excel
                                </button>
                                <a href="{{ route('products.create') }}">
                                    <button class="btn btn-primary px-4 float-right mt-0 mb-3"><i
                                            class="mdi mdi-plus-circle-outline mr-2"></i>Add Product
                                    </button>
                                </a>
                            @endcan
                        </div>
                        
                        <div class="table-responsive dash-social">
                            <table id="laravel_datatable_product" class="table table-stripped">
                                <thead class="thead-dark">
                                    <tr>
                                        <th>
                                            <div class="checkbox my-2">
                                                <div class="custom-control custom-checkbox">
                                                    <input type="checkbox" class="custom-control-input" id="select-all"
                                                        data-parsley-multiple="groups" data-parsley-mincheck="2">
                                                    <label class="custom-control-label" for="select-all">Check</label>
                                                </div>
                                            </div>
                                        </th>
                                        <th>Action</th>
                                        <th>Product Image</th>
                                        <th>Product Name</th>
                                        <th>SKU</th>
                                        <th>Woocommerce Synced</th>
                                        <th>Custom Website Woocommerce Synced</th>
                                        <th>Second Woocommerce Synced</th>
                                        <th>Category</th>
                                        <th>Sub Category</th>

                                        @can('show_reseller_price_only')
                                             <th>
                                                Re-Selling Price 
                                                @if ($setting->select_currency_type == '1')
                                                    <span> (LKR) </span>
                                                @else
                                                    <span> (USD) </span>
                                                @endif
                                            </th>
                                        @else
                                            <th>
                                                Unit Price 
                                                @if ($setting->select_currency_type == '1')
                                                    <span> (LKR) </span>
                                                @else
                                                    <span> (USD) </span>
                                                @endif
                                            </th>
                                            <th>
                                                Purchase Price 
                                                @if ($setting->select_currency_type == '1')
                                                    <span> (LKR) </span>
                                                @else
                                                    <span> (USD) </span>
                                                @endif
                                            </th>
                                            <th>
                                                ReSelling Price 
                                                @if ($setting->select_currency_type == '1')
                                                    <span> (LKR) </span>
                                                @else
                                                    <span> (USD) </span>
                                                @endif
                                            </th>
                                        @endcan
                                        

                                        <th>Re Order Level</th>
                                       

                                    </tr>
                                   
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="tab-pane p-3" id="stock" role="tabpanel">
                        <div class="table-responsive dash-social">
                            <table id="laravel_datatable_stock" class="table">
                                <thead class="thead-dark">
                                    <tr>
                                        {{-- <th>Index</th> --}}
                                        <th>SKU</th>
                                        <th>Product Name</th>
                                        {{-- <th>Product Image URL</th>
                                        <th>Product Image</th> --}}
                                        {{-- <th>SKU</th> --}}
                                        <th>Attribute <br> Value</th>
                                        <th>Current Stock</th>
                                        {{-- <th>Purchase Price</th> --}}
                                         @can('show_reseller_price_only')
                                        <th>Re-Selling Price</th>
                                         @else
                                            <th>Selling Price</th>
                                          <th>Re-Selling Price</th>
                                         @endcan
                                        
                                        {{-- <th>Current Stock Value <br>
                                            (by purchase price)</th> --}}
                                            
                                        {{-- <th>Current Stock Value <br>
                                            (by sale price)</th> --}}
                                        {{-- <th>Second Selling Price</th> --}}
                                        {{-- <th>Protential Profit</th> --}}
                                        <th>Total Unit Sold</th>
                                        
                                    </tr>
                                  
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>

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

    <div class="modal fade bs-example-modal-sm" id="valueModal" tabindex="-1" role="dialog"
        aria-labelledby="mySmallModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title mt-0" id="mySmallModalLabel">Attribute Values</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                </div>
                <div class="modal-body">
                    <div class="card">
                        <div class="card-body">
                            <div class="table-responsive dash-social">
                                <table id="attribute_table" class="table">
                                    <thead class="thead-dark">
                                        <tr>
                                            <th>Value</th>
                                        </tr>
                                      
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                      
                    </div>

                </div>
            </div>
        </div>
    </div>
    <div id="package-status-update" class="modal fade">
    </div>
    <div id="product_view" class="modal fade"> </div>
    <div id="product_label_view" class="modal fade"></div>
    <div id="add_bulk_product_modal" class="modal fade">
        <div class="modal-dialog" role="document" id="add_bulk_modal_content">
        </div>
    </div>
    <input type="hidden" id="second_woocommerece_api_setting_enable" name="second_woocommerece_api_setting_enable"
        class="form-control" value="{{ $setting->second_woocommerece_api_setting_enable }}">

@endsection

@section('scripts')
    <script !src="">
        $('#product_list_filter_category_id').select2();
        $('#product_list_filter_unit_id').select2();
        $('#attribute_value').select2();
    </script>
    <script>
        $(document).ready(function() {
            product_table = $('#laravel_datatable_product').DataTable({
                lengthMenu: [
                    [25, 50, 100, -1],
                    ['25 ', '50 ', '100', 'All']
                ],
                dom: 'Blfrtip',
                buttons: [

                    {
                        extend: 'copy',
                        exportOptions: {
                            columns: [2, 3, 4, 6, 7, 8, 9]
                        }
                    },

                    {
                        extend: 'excel',
                        exportOptions: {
                            columns: [2, 3, 4, 6, 7, 8, 9]
                        }
                    },
                    {
                        extend: 'pdf',
                        exportOptions: {
                            columns: [2, 3, 4, 6, 7, 8, 9]
                        }
                    },
                    {
                        extend: 'print',
                        exportOptions: {
                            columns: [2, 3, 4, 6, 7, 8, 9]
                        }
                    },
                ],
                processing: true,
                serverSide: true,
                "autoWidth": false,
                ajax: {
                    url: "{{ url('/products/list/all') }}",
                    data: function(d) {
                        d.category_id = $('#product_list_filter_category_id').val();
                        d.unit_id = $('#product_list_filter_unit_id').val();
                        d.synced = $('#synced').val();
                    }
                },
                columnDefs: [{
                    "targets": [0, 8],
                    "orderable": false,
                    "searchable": false,

                }],

                columns: [{
                        data: 'check',
                        name: 'check'
                    },
                    {
                        data: 'action',
                        name: 'action'
                    },
                    {
                        data: 'image',
                        name: 'image'
                    },
                    {
                        data: 'product_name',
                        name: 'product_name'
                    },
                    {
                        data: 'sku',
                        name: 'sku'
                    },
                    {
                        data: 'synced',
                        name: 'synced'
                    },
                    {
                        data: 'custom_website_sync',
                        name: 'custom_website_sync'
                    },
                    {
                        data: 'second_synced',
                        name: 'second_synced'
                    },
                    {
                        data: 'category',
                        name: 'category'
                    },
                    {
                        data: 'sub_category',
                        name: 'sub_category'
                    },
                  @can('show_reseller_price_only')
                     {
                        data: 'second_price',
                        name: 'second_price'
                    },
                  @else
                      {
                        data: 'p_price',
                        name: 'p_price'
                    },
                    {
                        data: 's_price',
                        name: 's_price'
                    },
                    {
                        data: 'second_price',
                        name: 'second_price'
                    },
                  @endcan
                    
                    {
                        data: 'reorder_level',
                        name: 'reorder_level'
                    },
                  
                ]
            });
            let second_woocommerece_api_setting_enable = $('#second_woocommerece_api_setting_enable').val();
            if (second_woocommerece_api_setting_enable != '1') {
                product_table.column('second_synced:name').visible(false);
            }
            $(document).on('click', '#add_bulk_product', function() {
                let url = $(this).data('href');
                $('#add_bulk_modal_content').load(url, function() {
                    $('#add_bulk_product_modal').modal('show');
                });
            });
          
            $(document).on('click', '#status', function() {
                $('#package-status-update').load($(this).data('href'), function() {
                    $('#package-status-update').modal('show');
                })
            });
            $(document).on('click', '.delete-product', function(e) {
                e.preventDefault();
                var url = $(this).attr('href');
        
                Swal.fire({
                    title: 'Are you sure?',
                    text: "You won't be able to revert this!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes, delete it!'
                }).then((result) => {
                    if (result.value) {
                        $.ajax({
                            type: "GET",
                            url: url,
                            success: function(response) {
                                $.toast({
                                    heading: 'Success',
                                    text: response.msg,
                                    position: 'top-right',
                                    bgColor: '#1ecab8',
                                    showHideTransition: 'fade',
                                    loaderBg: '#ecf0f1'
                                })
                                product_table.ajax.reload();
                            }
                        });
                    }
                })
            });
            stock_report_table = $('#laravel_datatable_stock').DataTable({
                lengthMenu: [
                    [15, 50, 100, -1],
                    ['15 ', '50 ', '100', 'All']
                ],
                dom: 'Blfrtip',
                buttons: [{

                        extend: 'copy',
                        exportOptions: {
                            columns: [0, 1, 2, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]
                        }
                    },
                    {
                        extend: 'excel',
                        filename: 'stock_reports',
                        exportOptions: {
                            columns: [0, 1, 2, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]
                        }
                    },
                    {
                        extend: 'pdf',
                        exportOptions: {
                            columns: [0, 1, 2, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]
                        }
                    },
                    {
                        extend: 'print',
                        exportOptions: {
                            columns: [0, 1, 2, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]
                        }
                    },
                ],
                processing: false,
                serverSide: true,
                "autoWidth": false,
                ajax: {
                    url: "{{ url('/products/stock/all') }}",
                    data: function(d) {
                        d.category_id = $('#product_list_filter_category_id').val();
                        d.unit_id = $('#product_list_filter_unit_id').val();
                        d.attribute_value_id = $('#attribute_value').val();
                    }
                },
                columnDefs: [{
                    "targets": [],
                    "orderable": false,
                    "searchable": false,
                    "visible": false,
                }],
                columns: [
                    // {
                    //     data: 'parent_product_id',
                    //     name: 'parent_product_id'
                    // },
                    {
                        data: 'sku',
                        name: 'sku'
                    },

                    {
                        data: 'product_name',
                        name: 'product_name'
                    },
                    {
                        data: 'attribute',
                        name: 'attribute',
                        render: function(data, type, row) {
                            return data ? data : 'Single';  // Return the attribute value or 'NA' if the value is falsy (null, undefined, empty string)
                        }
                    },
                    {
                        data: 'stock',
                        name: 'stock'
                    },
                    @can('show_reseller_price_only')
                    
                    {
                        data: 'second_price',
                        name: 'second_price'
                    },
                    @else    
                     {
                        data: 's_price',
                        name: 's_price'
                    },
                    
                    {
                        data: 'second_price',
                        name: 'second_price'
                    },
                    @endcan
                    
                    {
                        data: 'stock_sold',
                        name: 'stock_sold'
                    },
                    // {
                    //     data: 'image_url',
                    //     name: 'image_url'
                    // },
                    // {
                    //     data: 'image',
                    //     name: 'image'
                    // },
                    // {
                    //     data: 'sku',
                    //     name: 'sku'
                    // },
                    
                    
                    // {
                    //     data: 'u_price',
                    //     name: 'u_price'
                    // },
                    
                    // {
                    //     data: 'total_cost_purchase',
                    //     name: 'total_cost_purchase'
                    // },
                    // {
                    //     data: 'total_cost',
                    //     name: 'total_cost'
                    // },
                    // {
                    //     data: 'second_price',
                    //     name: 'second_price'
                    // },
                    // {
                    //     data: 'protential_profit',
                    //     name: 'protential_profit'
                    // },
                    
                    // {
                    //     data: 'stock_claimed',
                    //     name: 'stock_claimed'
                    // }
                    
                ]
            });
    
            $('[data-toggle="tooltip"]').tooltip()
        });
        $(document).on('click', '#update_qtys', function() {
            let product_id = $('#product_id').val();
            let qty = $('#qty').val();
            let url = "{{ route('products.update-qty') }}";
            $.ajax({
                method: 'POST',
                url: url,
                data: {
                    "_token": "{{ csrf_token() }}",
                    'product_id': product_id,
                    'qty': qty

                },
                success: function(response) {
                    $('#package-status-update').modal('hide');
                    $.toast({
                        heading: 'Success',
                        text: response.msg,
                        position: 'top-right',
                        bgColor: '#1ecab8',
                      
                        showHideTransition: 'fade',
                        loaderBg: '#ecf0f1'
                    })
                    product_table.ajax.reload();
                    stock_report_table.ajax.reload();
                }
            });
        });

        $(document).on('change',
            '#product_list_filter_category_id, #product_list_filter_unit_id, #synced, #attribute_value',
            function() {
                if ($("#products").hasClass('active')) {
                    console.log("works")
                    product_table.ajax.reload();
                }
                if ($("#stock").hasClass('active')) {
                    console.log("works stock")
                    stock_report_table.ajax.reload();
                }
            });
        $(function() {
            $('[data-toggle="tooltip"]').tooltip()
        });

        $('#laravel_datatable_product').on('click', '.attr', function(event) {
            $("#attribute_table > tbody").html("");
            axios.get('/products/get/attribute/' + this.id + '')
                .then(function(response) {
                  
                    var data = response.data;
                    data.forEach(datas => {
                        $("#attribute_table > tbody").append("<tr><td>" + datas.value + "</td></tr>");
                    });
                })
                .catch(function(error) {
                 
                    console.log(error);
                }).finally(function() {
                    $("#valueModal").modal()
                });
        });
        $(document).on('click', '#select-all', function() {
            if ($(this).prop('checked')) {
                $('.check-product').prop('checked', true);
            } else {
                $('.check-product').prop('checked', false);
            }
        });
        $(document).on('click', '#edit_bulk_product', function() {
            let product_id_array = getBulkProductEdit();
            if (product_id_array.length >= 2) {
                $('#bulk_product_id').val(product_id_array);
                $('#bulk-edit-form').submit();
            } else {
                swal.fire('Please select at least 2 or more products.!', '', 'warning');
            }
        });

        function getBulkProductEdit() {
            let product_id_array = [];
            $('.check-product:checked').each(function() {
                product_id_array.push($(this).attr('id'));
            });
            return product_id_array;
        }
        $('#div_value').hide();
        $("#product_btn").click(function() {
            $("#div_value").hide();
        })
        $("#stock_btn").click(function() {
            $("#div_value").show();
        })
        $(document).on('click', '#products_show', function() {
            $('#product_view').load($(this).data('href'), function() {
                $('#product_view').modal('show');

            })
        });
        $(document).on('click', '#products_label', function() {
            $('#product_label_view').load($(this).data('href'), function() {
                $('#product_label_view').modal('show');

            })
        });
    </script>
@endsection