@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">

                    <form action="{{ url('products/new/index/page') }}" method="get" id="filter_form">
                        <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(request('business_location_id') == $business_location->id) selected @endif>
                                                        {{ $business_location->name }}
                                                    </option>
                                                @endif
                                            @endforeach
                                        @else
                                            @foreach ($users_access_location as $business_location)
                                                @if ($business_location->is_active == '1')
                                                    <option value="{{ $business_location->business_location_id }}" 
                                                        @if(request('business_location_id') == $business_location->business_location_id) selected @endif>
                                                        {{ $business_location->name }}
                                                    </option>
                                                @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 }}" 
                                                @if(request('category') == $category->id) selected @endif>
                                                {{ $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 }}" 
                                            @if(request('unit') == $unit->id) selected @endif>
                                            {{ $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" @if(request('synced') == '1') selected @endif>YES</option>
                                        <option value="0" @if(request('synced') == '0') selected @endif>NO</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <button type="submit" class="btn btn-primary">Filter</button>
                                <button type="button" class="btn btn-danger" onclick="resetFilters()">Reset</button>
                            </div>
                        </div>
                        <input type="hidden" name="data_type" id="data_type" value="">
                    </form>

                </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>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>
                        <a href="{{ url('products/new/index/page') }}" class="btn btn-primary float-right px-5 py-2 submit-filters" data-type="excel" style="margin-right: 10px" ;>Download
                            Excel</a>

                    </div>
                    <div class="table-responsive dash-social" >
                        <table class="table table-stripped" id="laravel_datatable_product">
                            <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>Second Price
                                        @if ($setting->select_currency_type == '1')
                                        <span> (USD) </span>
                                        @else
                                        <span> (LKR) </span>
                                        @endif
                                    </th> --}}
                                    <th>Re Order Level</th>
                                </tr>
                                <!--end tr-->
                            </thead>
                            <tbody>
                                @foreach($products as $product)
                                <tr>
                                    <td>
                                        <div class="checkbox my-2">
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input check-product check-multipale" id="{{ $product->id }}" data-parsley-multiple="groups" data-parsley-mincheck="2">
                                                <label class="custom-control-label" for="{{ $product->id }}"></label>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="dropdown">
                                            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                Action
                                            </button>
                                            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                                @if(auth()->user()->can('order_access'))
                                                <a href="{{ url('products/' . $product->id) }}" class="dropdown-item"><i class="fas fa-eye text-primary font-16"></i> View</a>
                                                @endif
                                                @if(auth()->user()->can('product_edit'))
                                                <a href="{{ url('products/' . $product->id . '/edit') }}" class="dropdown-item"><i class="fas fa-edit text-success font-16"></i> Edit</a>
                                                @endif
                                                @if($product->childProducts()->count() == 0)
                                                <a href="javascript:void(0)" class="dropdown-item" id="status" data-href="{{ route('products.add-qty', $product->id) }}"><i class="fa fa-plus-circle text-warning font-16"></i> Qty Update</a>
                                                @endif
                                                @if(auth()->user()->can('product_delete'))
                                                <a href="{{ url('products/' . $product->id . '/delete') }}" data-synced="{{ $product->synced }}" class="dropdown-item delete-product"><i class="fas fa-trash-alt text-danger font-16"></i> Delete</a>
                                                @endif
                                            </div>
                                        </div>
                                    </td>
                                    <td><img style="width: 50px; height: 50px; object-fit: cover" src="{{ $product->image_url }}" alt=""></td>
                                    <td>{{ $product->location_names }}</td>
                                    <td>{{ $product->product_name }}</td>
                                    <td>{{ $product->sku }}</td>
                                    <td>
                                        @if($product->allow_woocommerce_sync)
                                        @if($product->synced == 1)
                                        <span class="badge badge-success">YES</span>
                                        @else()
                                        <span class="badge badge-warning">NO</span>

                                        @endif
                                        @else
                                        <span class="badge badge-info">Disabled</span>
                                        @endif
                                    </td>
                                    <td>{{ $product->category_name }}</td>
                                    <td>{{ $product->sub_categories }}</td>
                                    <td>{{ $product->p_price }}</td>
                                    <td>{{ $product->s_price }}</td>
                                    {{-- <td>{{ $product->second_price }}</td> --}}
                                    <td>{{ number_format($product->reorder_level, 2) }}</td>
                                </tr>
                                @endforeach
                            </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>

                {{-- <button type="button" class="btn btn-xs btn_multipal_bulk_print" id="btn2">Add to locations
                    </button>
                    <form id="edit_location" action="{{ route('orders.asign-edit') }}" method="get">
                <input type="hidden" id="bulk_sale_id" name="bulk_sale_id" value="">
                </form> --}}

                {{-- <button type="button" class="btn btn-xs btn_multipal_edit_order_assing" id="btn">
                        <i class="mdi mdi-animation mr-2"></i>Edit Locations
                    </button>

                <form id="edit_products" action="{{ route('products.location-edit') }}" method="get">
                <input type="hidden" id="product_bulk_id" name="product_bulk_id" value="">
                </form> --}}

            </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']
            ],
            
           processing: true,
			serverSide: true,
			searching: true,   // Make sure search is enabled
			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, 1, 2, 8, 9, 10, 11],
                    "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: 'second_price',
                //     name: 'second_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()

    });


    // biz loc
    //  $(document).on('click', '#btn2', function() {
    //             let sale_id_array = getloadLocationEdit();
    //             if (sale_id_array.length >= 1) {
    //                 $('#bulk_sale_id').val(sale_id_array);
    //                 $('#edit_location').submit();
    //             } else {
    //                 swal.fire('Please select at least 1 or more Orders.!', '', 'warning');
    //             }
    //         });

    //         function getloadLocationEdit() {
    //             let sale_id_array = [];
    //             $('.check-multipale:checked').each(function() {
    //                 sale_id_array.push($(this).attr('id'));
    //             });
    //             return sale_id_array;
    //         }

    // location edit
    // $(document).on('click', '#btn', function() {
    //             let product_id_array = getProductAsignEdit();
    //             if (product_id_array.length >= 2) {
    //                 $('#product_bulk_id').val(product_id_array);
    //                 $('#edit_products').submit();
    //             } else {
    //                 swal.fire('Please select at least 1 or more Orders.!', '', 'warning');
    //             }
    //         });

    //         function getProductAsignEdit() {
    //             let product_id_array = [];
    //             $('.check-multipale:checked').each(function() {
    //                 product_id_array.push($(this).attr('id'));
    //             });
    //             return product_id_array;
    //         }

    $(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', '#select-all', function() {
        if ($(this).prop('checked')) {
            $('.check-multipale').prop('checked', true);
        } else {
            $('.check-multipale').prop('checked', false);
        }
    })

    $(document).on('click', '#edit_bulk_product', function() {
        let product_id_array = getBulkProductEdit();
        if (product_id_array.length >= 1) {
            $('#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;
    }
    $(document).on('click', '.submit-filters', function(e) {
        e.preventDefault()
        let data_type = $(this).data('type');
        $('#data_type').val(data_type);
        $('#filter_form').submit();

    });
</script>
<script>
function resetFilters() {
    // Clear the selected values
    $('#business_location_id').val('').trigger('change');
    $('#product_list_filter_category_id').val('').trigger('change');
    $('#product_list_filter_unit_id').val('').trigger('change');
    $('#synced').val('').trigger('change');
    window.location.href = '/products/new/index/page';
}
</script>
@endsection