@extends('layouts.master')

@section('page_title', 'Product')
@section('title', 'Products Details')
@section('main_item', 'Products')
@section('sub_item', 'Manage Your Products')
@section('content')

    <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" @if ($setting->business_location != '1') style="display: none" @endif>
                        <div class="form-group">
                            <label class="required" style="font-weight: bold" for="activate_code">business Location</label>
                            <select class="form-control select2" id="business_location_id" name="business_location_id">
                                <option value="">All</option>
                                @if (Auth::user()->role_id == '1')
                                    @foreach ($users_access_location as $business_location)
                                        @if ($business_location->is_active == '1')
                                            <option value="{{ $business_location->id }}" @if($business_location->id == 1) selected @endif>
                                                {{ $business_location->name }}
                                            </option>
                                        @else
                                        @endif
                                    @endforeach
                                @else
                                    @foreach ($users_access_location as $business_location)
                                        @if ($business_location->is_active == '1')
                                            <option value="{{ $business_location->business_location_id }}" @if($business_location->id == 1) selected @endif>
                                                {{ $business_location->name }}
                                            </option>
                                        @else
                                        @endif
                                    @endforeach

                                @endif

                            </select>
                        </div>
                    </div>
                    <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>
                        <!--end card-body-->
                    </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>
                        <!--end card-body-->
                    </div>
                </div>
            </div>
            <!--end card-body-->
        </div>
        <!--end card-->
    </div>
        </div>
    </div>
    <div class="col-md-12">
        <div class="card">
            <div class="card-body">
                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" data-toggle="tab" href="#products" role="tab"
                            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"><i
                                class="fa fa-hourglass-half " aria-hidden="true"></i> Stock Report</a>
                    </li>
                </ul>
                <!-- Tab panes -->
                <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>Import 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>Business Location</th>
                                        <th>Product Name</th>
                                        <th>SKU</th>
                                        <th>Woocommerce Synced</th>
                                        <th>Category</th>
                                        <th>Sub Category</th>
                                        <th>Purchase Price</th>
                                        <th>Selling Price</th>
                                        <th>Re Order Level</th>
                                    </tr>
                                    <!--end 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>Product Name</th>
                                        <th>Product Image</th>
                                        <th>Business Location</th>
                                        <th>SKU</th>
                                        <th>Selling Price</th>
                                        <th>Current Stock</th>
                                        <th>Total Unit Sold</th>
                                        <th>Total Unit Replaced</th>
                                    </tr>
                                    <!--end tr-->
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <!--end card-body-->
        </div>
        <!--end card-->
    </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>
                                        <!--end tr-->
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <!--end card -body-->
                    </div>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
    <div id="package-status-update" 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>
@endsection

@section('scripts')
    <script !src="">
        $('#product_list_filter_category_id').select2();
        $('#product_list_filter_unit_id').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, 10, 11, 12]
                        }
                    },

                    {
                        extend: 'excel',
                        exportOptions: {
                            columns: [2, 3, 4, 6, 7, 8, 9, 10, 11, 12]
                        }
                    },
                    {
                        extend: 'pdf',
                        exportOptions: {
                            columns: [2, 3, 4, 6, 7, 8, 9, 10, 11, 12]
                        }
                    },
                    {
                        extend: 'print',
                        exportOptions: {
                            columns: [2, 3, 4, 6, 7, 8, 9, 10, 11, 12]
                        }
                    },
                ],
                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();
                        d.business_location_id = $('#business_location_id').val();

                    }
                },
                columnDefs: [{
                        "targets": [0, 8],
                        "orderable": false,
                        "searchable": false,

                    },
                    {
                        "targets": [],
                        "orderable": false,
                        "visible": false,
                        "searchable": false,
                    },
                ],

                columns: [{
                        data: 'check',
                        name: 'check'
                    },
                    {
                        data: 'action',
                        name: 'action'
                    },
                    {
                        data: 'image',
                        name: 'image'
                    },
                    {
                        data: 'location_id',
                        name: 'location_id'
                    },
                    {
                        data: 'product_name',
                        name: 'product_name'
                    },
                    {
                        data: 'sku',
                        name: 'sku'
                    },
                    {
                        data: 'synced',
                        name: 'synced'
                    },
                    {
                        data: 'category',
                        name: 'category'
                    },
                    {
                        data: 'sub_category',
                        name: 'sub_category'
                    },
                    // {
                    //     data: 'unit',
                    //     name: 'unit'
                    // },
                    {
                        data: 'p_price',
                        name: 'p_price'
                    },
                    {
                        data: 's_price',
                        name: 's_price'
                    },
                    {
                        data: 'reorder_level',
                        name: 'reorder_level'
                    },
                    // {
                    //     data: 'stock',
                    //     name: 'stock'
                    // },
                ]
            });

            $(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');
                });
            });
            //product delete
            $(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({
                buttons: ['copy', 'excel', 'pdf', 'colvis'],
                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.business_location_id = $('#business_location_id').val();
                    }
                },
                columnDefs: [{
                    "targets": [02],
                    "orderable": false,
                    "visible": false,
                    // "searchable": false,
                }, ],

                columns: [{
                        data: 'product_name',
                        name: 'product_name'
                    },
                    {
                        data: 'image',
                        name: 'image'
                    },
                    {
                        data: 'location_id',
                        name: 'location_id'
                    },
                    {
                        data: 'sku',
                        name: 'sku'
                    },
                    {
                        data: 's_price',
                        name: 's_price'
                    },
                    {
                        data: 'stock',
                        name: 'stock'
                    },
                    {
                        data: 'stock_sold',
                        name: 'stock_sold'
                    },
                    {
                        data: 'stock_claimed',
                        name: 'stock_claimed'
                    }
                ]
            });

            //toast
            $('[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, #business_location_id',
            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) {
                    // handle success
                    var data = response.data;
                    data.forEach(datas => {
                        $("#attribute_table > tbody").append("<tr><td>" + datas.value + "</td></tr>");
                    });

                })
                .catch(function(error) {
                    // handle 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;
        }
    </script>
@endsection