@extends('modules.head') @section('contenido')
    <div class="box-header">

    </div>

    <!-- List banners-->
    <div class="box">
        <div class="box-header with-border">
            <div class="row">
                <div class="col-xs-2"><h3 class="box-title">{{ Lang::get('messages.screen_products_tag1')}}</h3></div>
            </div>
        </div>

        <!-- /.box-header -->
        <div class="box-body table-responsive hideScrollOffset">
            <table id="example2" class="table table-bordered table-hover dataTable" role="grid"
                   aria-describedby="example2_info">
                <thead>
                <tr role="row">
                    <th>Image</th>
                    <th>Name</th>
                    <th>PLU</th>
                    <th>Price</th>
                    <th>Status</th>
                    <th>Highlight</th>
                    <th>Actions</th>
                </tr>
                </thead>
            </table>
        </div>
        <!-- /.box-body -->
    </div>

    <script src="{{ asset('js/jQuery/jquery-2.2.3.min.js') }}"></script>
    <script src="{{ asset('js/products.js') }}"></script>
    <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="{{ asset('js/bootstrap/js/bootstrap.min.js') }}"></script>
    <script src="{{ asset('js/dropzone/dropzone.js') }}"></script>
    <script src="{{ asset('js/masterSAPB1.js') }}"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            let _table = $('#example2').DataTable({
                responsive: true,
                processing: true,
                serverSide: true,
                "order": [],
                "language": {
                    url: 'https://cdn.datatables.net/plug-ins/1.10.19/i18n/Spanish.json'
                },
                ajax: '/products/filter/',
                columns: [
                    {
                        data: 'image',
                        name: 'image',
                        "width": "15%",
                        render(data, type, raw) {
                            return `<img src="${data}${raw.plu}" alt='photo not found' width="75" height="75" />`;
                        }
                    },
                    {data: 'name', name: 'name',
                        render(data, type, row) {
                            return `<a href="/products/edit/${row.id}">${data}</a>`
                        }},
                    {data: 'plu', name: 'plu',
                        render(data, type, row) {
                            return `<a href="/products/edit/${row.id}">${data}</a>`
                        }},
                    {data: 'price', name: 'price'},
                    {
                        data: 'active', name: 'active',
                        render(data) {
                            if (data) {
                                return `<span class="label label-success">Active</span>`;
                            }
                            return `<span class="label label-warning">Inactive</span>`;
                        }
                    },
                    {
                        data: 'id',
                        name: 'id',

                        render(data, type, raw) {
                            let checked = "";
                            if (raw.highlight) {
                                checked = "checked";
                            }
                            return `
                                <div class="switch">
                                    <label>
                                      <div class="checkbox checbox-switch switch-success">
                                        <label>No<input type="checkbox" name="chk_edit_highlight" onclick="highlightOrUnhighlightProduct(this, '${data}')" ${checked}>
                                        <span></span>Yes</label>
                                      </div>
                                    </label>
                                </div>`;
                            }

                    },
                    {
                        data: 'plu',
                        name: 'plu',
                        render(data) {
                            return `<div style="text-align:center">
                                      <a type="button" class="btn btn-default sync-inventory" onclick="syncInventoryByPLUAllBranches(this, '${data}')"><i class="fa fa-refresh"></i></a>
                                    </div>`;
                        }
                    },
                ]

            });

        });

        $('#sync_categories').on('click', function() {
            swal({
                    text: "Are you sure you want to perform this action?",
                    icon: "info",
                    buttons: ["Cancel", "Ok"],
                })
                .then((value) => {
                    if(value) {
                        showLoadingOverlay('Synchronizing categories')
                        $.ajax({
                            url: `/products/sync_categories`,
                            type: "GET",
                            contentType: "application/json",
                            headers: {
                                "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                                "Content-Type": "application/json",
                            },
                            success: (response) => {
                                if(response.status){
                                    swal({
                                        title: "Success",
                                        text: response.message,
                                        icon: "success",
                                    }).then(() => {
                                        location.reload(true);
                                    })
                                }
                                else {
                                    swal('Error', response.message, 'error');
                                }
                            },
                            complete: function() {
                                Swal.close();
                            },
                            error: (error) => {
                                console.error(error);
                                swal('Error', `An unexpected error has occurred ${error.message}`, 'error');
                            },
                        });
                    }
                });
        });

        function showLoadingOverlay(title){
            Swal.fire({
                title: title,
                html: '<div class="i_container" id="i_container" style="font-size:40px; height:50px; margin-top:20px" ><i id="fa-refresh" class="fa fa-refresh text-green rotating"></i></div>',
                showConfirmButton: false
            });
        }

        function syncInventoryByPLUAllBranches(el, plu){
            let element = $(el);
            element.button('loading');
            $.ajax({
                url: `/stock/syncInventoryByPLUAllBranches/${plu}`,
                type: 'GET',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                    'Content-Type': 'application/json'
                },
                success: function(data) {
                    swal("", 'Item updated successfully.', 'success');
                },
                error: function(data) {
                    swal('Error', `Internal server error.`, 'error');
                },
                complete: function() {
                    element.button('reset');
                    clearInput($('#clearInput'));
                }
            })
        }
    </script>
@endsection

<style>
    .checkbox.checbox-switch label > input:checked + span:before, .checkbox-inline.checbox-switch > input:checked + span:before {
        left: 8px !important;
    }
    .checkbox.checbox-switch label span:before, .checkbox-inline.checbox-switch span:before {
        left: -8px !important;
    }
</style>