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

        .grid-list {
            background-color: rgb(155, 155, 155);
            font-size: 20px;
            transition: 0.3s; 
            border: none;
            margin-top: 10px;
        }

        .grid-list-start {
            background-color: rgb(255, 255, 255);
            font-size: 20px;
            transition: 0.3s; 
            border: none;
            margin-top: 10px;
        }
    </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><br>
                                    <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><br>
                                    <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 active" id="products" role="tabpanel">
                        {{-- Grid and list view --}}
                        <div class="d-flex justify-content-start mb-3 mt-3">
                            <button id="gridViewBtn"><i class="fa fa-th" aria-hidden="true" style="font-size: 20px;"></i></button>
                            <button id="listViewBtn"><i class="fa fa-list-ul" aria-hidden="true" style="font-size: 20px;"></i></button>
                        </div>
                    
                        <!-- Grid View -->
                        <div id="gridView" class="container-fluid">
                            <div class="row col-md-12 justify-content-end">
                            <div class="row col-md-12 mt-2 justify-content-end">
                                @can('product_create')
                                    <a href="{{ route('products.create') }}">
                                        <button class="btn btn-primary px-4 mt-0">
                                            <i class="mdi mdi-plus-circle-outline mr-2"></i>Add Product
                                        </button>
                                    </a>
                                @endcan
                            </div>

                                <!-- Search Bar -->
                                <div class="input-group mt-3" style="width: 300px; position: relative;">
                                    <input type="text" class="form-control" id="searchBar" placeholder="Search Products" aria-label="Search">
                                    <div class="input-group-append">
                                        <button class="btn btn-primary" id="searchButton" type="button">
                                            <i class="fa fa-search"></i>
                                        </button>
                                    </div>
                                    <span id="clearSearch" style="display: none; cursor: pointer; position: absolute; right: 50px; top: 7px; font-size: 20px; color: #888;">
                                        &times;
                                    </span>
                                </div>
                            </div>
                            
                            <div class="container-fluid col-md-12">
                                <div id="product-grid-container" class="row">
                                </div>
                            </div>
                        </div>
                    
                        <!-- List View -->
                        <div id="listView">
                            <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>
                    
                    <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>SKU</th>
                                        <th>Product Name</th>
                                        <th>Attribute <br> Value</th>
                                        <th>Current Stock</th>
                                         @can('show_reseller_price_only')
                                        <th>Re-Selling Price</th>
                                         @else
                                            <th>Selling Price</th>
                                          <th>Re-Selling Price</th>
                                         @endcan
                                        <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>
    document.addEventListener('DOMContentLoaded', function () {
        const gridView = document.getElementById('gridView');
        const listView = document.getElementById('listView');
        const gridViewBtn = document.getElementById('gridViewBtn');
        const listViewBtn = document.getElementById('listViewBtn');

        // Default: Show Grid View
        gridView.style.display = 'block';
        listView.style.display = 'none';
        gridViewBtn.classList.add('grid-list');
        listViewBtn.classList.add('grid-list-start');

        // Toggle to Grid View
        gridViewBtn.addEventListener('click', () => {
            gridView.style.display = 'block';
            listView.style.display = 'none';
            gridViewBtn.classList.add('grid-list');
            gridViewBtn.classList.remove('grid-list-start');
            listViewBtn.classList.add('grid-list-start');
            listViewBtn.classList.remove('grid-list');
        });

        // Toggle to List View
        listViewBtn.addEventListener('click', () => {
            listView.style.display = 'block';
            gridView.style.display = 'none';
            listViewBtn.classList.add('grid-list');
            listViewBtn.classList.remove('grid-list-start');
            gridViewBtn.classList.add('grid-list-start');
            gridViewBtn.classList.remove('grid-list');
        });
    });
</script>

<script !src="">
    $('#product_list_filter_category_id').select2();
    $('#product_list_filter_unit_id').select2();
    $('#attribute_value').select2();
</script>

<script>
    $(document).ready(function() {
          
        loadProductGrid();

        //product list view
        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,
            aaSorting: [[3, 'asc']], 
            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 list view
        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: '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-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')) {
                    loadProductGrid();
                    product_table.ajax.reload();
                }
                if ($("#stock").hasClass('active')) {
                    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');

            })
        });

        $(document).on('click', '.pagination a', function(event) {
            event.preventDefault();
            let url = $(this).attr('href');
            fetchProducts(url);
        });

        function fetchProducts(url) {
        $.ajax({
            url: url,
            type: 'GET',
            data: {
                category_id: $('#product_list_filter_category_id').val(),
                unit_id: $('#product_list_filter_unit_id').val(),
                synced: $('#synced').val()
            },
            success: function(response) {
                $('#product-grid-container').html(response.html);
            },
        });
        }
        //product grid view
        function loadProductGrid() {

                $.ajax({
                    url: '/products/list/grid',
                    type: 'GET',
                    data: {
                        category_id: $('#product_list_filter_category_id').val(),
                        unit_id: $('#product_list_filter_unit_id').val(),
                        synced: $('#synced').val(),
                        search_query: $('#searchBar').val()
                    },
                    success: function(response) {
                        $('#product-grid-container').html(response.html);
                    },
                    error: function() {
                        console.error('Failed to load product list.');
                    }
                });
            }

            $(document).ready(function () {
                const $searchBar = $('#searchBar');
                const $clearSearch = $('#clearSearch');
                const $searchButton = $('#searchButton');

                // Trigger search when clicking the search button
                $searchButton.on('click', function () {
                    const searchTerm = $searchBar.val().trim();
                    loadProductGrid(searchTerm);
                    if (searchTerm !== '') {
                        $clearSearch.show();
                    }
                });

                // Clear the search bar and reload all products
                $clearSearch.on('click', function () {
                    $searchBar.val('');
                    $clearSearch.hide();
                    loadProductGrid();
                });
            });
    </script>
@endsection