@extends('layouts.app')

@section('title', 'Manage Items')
@section('breadcrumb', 'Manage Items')
@section('sub-breadcrumb')
    <a class="kt-subheader__breadcrumbs-link">
        List
    </a>
@endsection
@section('list-stock-master-data-item', 'kt-menu__item--open kt-menu__item--here')
@section('list-stock-master-data', 'kt-menu__item--active')
@section('content')
    <div class="kt-portlet">
        <div class="kt-portlet__body">
            @include('layouts.notification')

           {{-- begin: Search form --}}
            <div class="container">
                <div class="row">
                    <div class="col-lg-4">
                        <label>Category:</label>
                        <select class="form-control" name="category" id="category">
                            <option value="">-- Choose Category --</option>
                            @foreach ($dataCategory['result'] as $item)
                                <option value="{{$item['id']}}">{{$item['category']}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-lg-4">
                        <label>Item Name:</label>
                        <div class="input-group">
                            <div class="input-group-prepend"><span class="input-group-text"><i class="flaticon2-cube"></i></span></div>
                            <input type="text" name="name" id="name" class="form-control m-input" placeholder="E.g: Biji Kopi . ." data-col-index="0">
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <label>Unit Order:</label>
                        <select class="form-control" name="unit_order" id="unit_order">
                            <option value="">-- Choose Unit Order --</option>
                            @foreach ($dataUnit['result'] as $item)
                                <option value="{{$item['id']}}">{{$item['name']}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="row mt-3">
                    <div class="col-lg-4">
                        <label>Unit Opname:</label>
                        <select class="form-control" name="unit_opname" id="unit_opname">
                            <option value="">-- Choose Unit Opname --</option>
                            @foreach ($dataUnit['result'] as $item)
                                <option value="{{$item['id']}}">{{$item['name']}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-lg-4">
                        <label>Low Stock Limit:</label>
                        <div class="input-group">
                            <div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-low-vision"></i></span></div>
                            <input name="low_stock_limit" id="low_stock_limit" type="text" class="form-control" placeholder="E.g: 2">
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <label>Price:</label>
                        <div class="input-group">
                            <div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-coins"></i></span></div>
                            <input name="price" id="price" type="text" class="form-control" placeholder="E.g: 15000">
                        </div>
                    </div>

                </div>
                <div class="row mt-3">
                    <div class="col-lg-4">
                        <label>Status Order:</label>
                        <select class="form-control" name="status_order" id="status_order">
                            <option value="">-- Choose Status Order --</option>
                            <option value="1">Visible</option>
                            <option value="0">Hidden</option>
                        </select>
                    </div>
                    <div class="col-lg-4">
                        <label>Status Opname:</label>
                        <select class="form-control" name="status_opname" id="status_opname">
                            <option value="">-- Choose Status Opname --</option>
                            <option value="1">Visible</option>
                            <option value="0">Hidden</option>
                        </select>
                    </div>
                    <div class="col-lg-4">
                        <label>SKU:</label>
                        <div class="input-group">
                            <div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-check-circle"></i></span></div>
                            <input name="sku" id="sku" type="text" class="form-control" placeholder="E.g: 15000">
                        </div>
                    </div>
                </div>
                <div class="row mt-2 pull-right">
                    <div class="col-lg-12">
                        <button class="btn btn-primary filter"><i class="fa fa-search"></i> Search</button>
                        &nbsp;&nbsp;
                        <input class="btn btn-secondary reset" type="reset">
                        &nbsp;&nbsp;
                        <button class="btn btn-success sync"><i class="flaticon-refresh"></i> Sync</button>
                    </div>
                </div>
            </div>
           {{-- end: Search form --}}

           {{-- begin: datatable --}}
            <table id="datatable" class="table table-hover table-responsive" width="100%">
                <thead>
                    <tr>
                        {{-- <th>No</th> --}}
                        <th>Image</th>
                        <th>Category</th>
                        <th>Accurate Name</th>
                        <th>SKU</th>
                        <th>Unit Order</th>
                        <th>Unit Opname</th>
                        {{-- <th>Low Stock Limit</th> --}}
                        <th>Price</th>
                        <th>Min. Order</th>
                        <th>Status Order</th>
                        <th>Status Opname</th>
                        <th>Limit</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
            <div class="kt-separator kt-separator--dashed"></div>
           {{-- begin: datatable --}}
        </div>
    </div>
@endsection

@section('custom-script')
    <script>
        $.fn.dataTable.ext.errMode = 'none';
        $('#datatable').DataTable({
            serverSide: true,
            stateSave: true,
            "bFilter": false,
            "lengthChange": false,
            ajax: "{{ route('stock.data.stock.table') }}",
            columns: [
                {data: 'image_url', name: 'image_url', searchable: false, orderable: false},
                {data: 'brand_category.category', name: 'brand_category.category'},
                {data: 'accurate_name', name: 'accurate_name'},
                {data: 'accurate_code', name: 'accurate_code'},
                {data: 'brand_item_unit2_order.unit.name', name: 'brand_item_unit2_order.unit.name'},
                {data: 'brand_item_unit2_opname.unit.name', name: 'brand_item_unit2_opname.unit.name'},
                // {data: 'low_stock_limit', name: 'low_stock_limit'},
                {data: 'price', name: 'price', render: $.fn.dataTable.render.number(',', '.', 0, '')},
                {data: 'minimum_order', name: 'minimum_order'},
                {data: 'status_order', name: 'status_order'},
                {data: 'status_opname', name: 'status_opname'},
                {data: 'limit', name: 'limit'},
                {data: 'action', name: 'action', searchable: false, orderable: false}
            ]
        }).on('processing.dt', function (e, settings, processing) {
                if (processing) {
                    $('#datatable').hide();
                    $('#loading').show();
                } else {
                    $('#datatable').show();
                    $('#loading').hide();
                }
        });

        $(document).on('click', '.filter', function() {
            var category          = $('#category').val();
            var name              = $('#name').val();
            var unit_order        = $('#unit_order').val();
            var unit_opname       = $('#unit_opname').val();
            var low_stock_limit   = $('#low_stock_limit').val();
            var price             = $('#price').val();
            var status_order      = $('#status_order').val();
            var status_opname     = $('#status_opname').val();
            var sku               = $('#sku').val();
            filter(category, name, unit_order, unit_opname, low_stock_limit, price, status_order, status_opname, sku);
        });

        $(document).on('click', '.reset', function() {
            reset();
            filter();
        });

        function filter(category='', name='', unit_order='', unit_opname='', low_stock_limit='', price='', status_order='',status_opname='', sku='') {
            // var category                = $('#category').val();
            // var name                    = $('#name').val();
            // var unit_order              = $('#unit_order').val();
            // var unit_opname             = $('#unit_opname').val();
            // var low_stock_limit         = $('#low_stock_limit').val();
            // var price                   = $('#price').val();
            $.fn.dataTable.ext.errMode  = 'none';

            var table = $('#datatable').DataTable({
                destroy: true,
                processing: true,
                stateSave : true,
                serverSide: true,
                "bFilter": false,
                "lengthChange": false,
                ajax: {
                    url: "{{ route('stock.data.stock.table') }}",
                    type: 'get',
                    data: function(d) {
                        d.category        = category;
                        d.name            = name;
                        d.unit_order      = unit_order;
                        d.unit_opname     = unit_opname;
                        d.low_stock_limit = low_stock_limit;
                        d.price           = price;
                        d.status_order    = status_order;
                        d.status_opname   = status_opname;
                        d.sku             = sku;
                    }
                },
                columns: [
                    {data: 'image_url', name: 'image_url', searchable: false, orderable: false},
                    {data: 'brand_category.category', name: 'brand_category.category'},
                    {data: 'accurate_name', name: 'accurate_name'},
                    {data: 'accurate_code', name: 'accurate_code'},
                    {data: 'brand_item_unit2_order.unit.name', name: 'brand_item_unit2_order.unit.name'},
                    {data: 'brand_item_unit2_opname.unit.name', name: 'brand_item_unit2_opname.unit.name'},
                    // {data: 'low_stock_limit', name: 'low_stock_limit'},
                    {data: 'price', name: 'price', render: $.fn.dataTable.render.number(',', '.', 0, '')},
                    {data: 'minimum_order', name: 'minimum_order'},
                    {data: 'status_order', name: 'status_order'},
                    {data: 'status_opname', name: 'status_opname'},
                    {data: 'limit', name: 'limit'},
                    {data: 'action', name: 'action', searchable: false, orderable: false}
                ]
            }).on('processing.dt', function (e, settings, processing) {
                    if (processing) {
                        $('#datatable').hide();
                        $('#loading').show();
                    } else {
                        $('#datatable').show();
                        $('#loading').hide();
                    }
            });
        }

        function reset() {
            $('#category').val('');
            $('#name').val('');
            $('#unit_order').val('');
            $('#unit_opname').val('');
            $('#low_stock_limit').val('');
            $('#price').val('');
            $('#status_order').val('');
            $('#status_opname').val('');
            $('#sku').val('');
        }

        $('body').on('click', '.btn-delete', function (event) {
            event.preventDefault();

            var me = $(this),
                url = me.attr('href'),
                title = me.attr('title'),
                csrf_token = $('meta[name="csrf-token"]').attr('content');

            swal.fire({
                title: 'Are you sure want to delete ' + title + ' ?',
                text: 'You won\'t be able to revert this!',
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.value) {
                    $('#loading').show();
                    $.ajax({
                        url: url,
                        type: "POST",
                        data: {
                            '_method': 'DELETE',
                            '_token': csrf_token
                        },
                        success: function (response) {
                            $('#loading').hide();
                            // console.log(response)
                            if (response.status == "fail") {
                                swal.fire({
                                    type: 'error',
                                    title: 'Oops...',
                                    text: 'Something went wrong!'
                                });
                            }
                            if (response.status == "success") {
                                $('#datatable').DataTable().ajax.reload();
                                swal.fire({
                                    type: 'success',
                                    title: 'Success!',
                                    text: 'Data has been deleted!'
                                });
                            }
                        },
                        error: function (xhr) {
                            $('#loading').hide();
                            swal.fire({
                                type: 'error',
                                title: 'Oops...',
                                text: 'Something went wrong!'
                            });
                        }
                    });
                }
            });
        });


        $('body').on('click', '.sync', function (event) {
            event.preventDefault();

            var csrf_token = $('meta[name="csrf-token"]').attr('content');

            swal.fire({
                title: 'Apa kamu yakin ingin melakukan sinkronisasi item dengan Accurate ?',
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                cancelButtonText: 'Tidak',
                confirmButtonText: 'Ya, sinkronkan!'
            }).then((result) => {
                if (result.value) {
                    $('#loading').show();
                    $.ajax({
                        url: "{{route('stock.data.sync')}}",
                        type: "POST",
                        data: {
                            '_method': 'POST',
                            '_token': csrf_token
                        },
                        success: function (response) {
                            $('#loading').hide();
                            console.log(response)
                            if (response.status == "fail") {
                                swal.fire({
                                    type: 'error',
                                    title: 'Oops...',
                                    text: 'Something went wrong!'
                                });
                            }
                            if (response.status == "success") {
                                $('#datatable').DataTable().ajax.reload();
                                swal.fire({
                                    type: 'success',
                                    title: 'Sukses',
                                    text: 'Item berhasil di Sinkron Ulang'
                                });
                            }
                        },
                        error: function (xhr) {
                            $('#loading').hide();
                            swal.fire({
                                type: 'error',
                                title: 'Oops...',
                                text: 'Something went wrong!'
                            });
                        }
                    });
                }
            });
        });
    </script>
@endsection