@extends('modules.head') @section('contenido')


<!-- LIST lines-->
<div class="box">
    <h3>Products categories</h3></br>
    <!-- /.box-header -->
    <div class="box-body table-responsive">
        <table id="example2" class="table table-bordered table-hover dataTable" role="grid" aria-describedby="example2_info">
            <thead>
                <tr role="row">
                    <th class="sorting" tabindex="0" rowspan="1" colspan="1" >Name</th>
                    <th class="sorting" tabindex="0" rowspan="1" colspan="1" >PLU</th>
                    <th class="sorting" tabindex="0" rowspan="1" colspan="1" >Categories</th>
                </tr>
            </thead>
        </table>
    </div>
</div>
@endsection


<script src="{{ asset('js/jQuery/jquery-2.2.3.min.js') }}"></script>
{{-- <script src="{{ asset('js/categories.js') }}"></script> --}}
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="{{ asset('js/bootstrap/js/bootstrap.min.js') }}"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            url: "/categories/get_products_categories",
            type: "GET",
            contentType: "application/json",
            headers: {
                "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"), "Content-Type": "application/json",
            },
            success: function (r) {
                displayData(r);
            },
            error: function (error) {
                swal('Server error', `${error.message}`, 'error');
            }
        });

        function displayData(response) {
            $('#example2').dataTable().fnDestroy();
            _table = $('#example2').DataTable({
                "aaData":response,
                "columns": [
                    {
                        'data' : 'name',
                    },
                    {
                        'data' : 'plu',
                    },
                    {
                        'data' : 'categories',
                    },
                ],
            });
        }

        $('#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) => {
                                swal('Error', `An unexpected error has occurred ${error}`, '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
            });
        }
    });

  </script>