@extends('layouts.app')

@section('title', 'Manage Unit & Conversion')
@section('breadcrumb', 'Manage Unit & Conversion')
@section('sub-breadcrumb')
    <a class="kt-subheader__breadcrumbs-link">
        List
    </a>
@endsection
@section('stock-manage-unit', 'kt-menu__item--open kt-menu__item--here')
@section('list-stock-manage-unit', 'kt-menu__item--active')
@section('content')
    <div class="kt-portlet">
        {{-- <div class="kt-portlet__head">
            <div class="kt-portlet__head-toolbar">
                <a href="{{route('stock.unit.create')}}" class="font-primary"><i class="fa fa-plus-circle"></i> Add Data</a>
            </div>
        </div> --}}
        <div class="kt-portlet__body">
            @include('layouts.notification')

           {{-- begin: datatable --}}
            <table id="datatable" class="table table-hover" style="width:100%">
                <thead>
                    <tr>
                        {{-- <th>No</th> --}}
                        <th style="width=40%;">Item Name</th>
                        <th>Unit Convertion</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>

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

    @foreach ($data['result'] as $key => $value)
        <div class="modal fade" id="view{{$value['id']}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Unit</th>
                                <th>Ratio</th>
                                <th>Price</th>
                            </tr>
                        </thead>
                        @foreach ($value['brand_item_unit2s'] as $item)
                            <tbody>
                                <tr>
                                    <td>
                                        {{$item['unit']['name']}}
                                    </td>
                                    <td>
                                        {{$item['ratio'] ?? 0}}
                                    </td>
                                    <td>
                                        Rp.{{number_format($item['price'] , 0, '', '.') ?? 0}}
                                    </td>
                                </tr>
                            </tbody>
                        @endforeach
                    </table>
                </div>
            </div>
            </div>
        </div>
    @endforeach
@endsection

@section('custom-script')
    <script>

    </script>
    <script>
        // In your Javascript (external .js resource or <script> tag)
        $(document).ready(function() {
            $('.js-example-basic-single').select2();
        });
    </script>
    <script>
        $.fn.dataTable.ext.errMode = 'none';
        $('#datatable').DataTable({
            responsive: true,
            serverSide: true,
            stateSave: true,
            ajax: "{{ route('unit.convertion.table') }}",
            columns: [
                // {data: 'DT_RowIndex', name: 'id', searchable: false, orderable: false},
                {data: 'accurate_name', name: 'accurate_name'},
                {data: 'unit', name: 'unit'},
                {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() {
            filter();
        });

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

        function filter() {
            var stuff      = $('#stuff').val();
            var unit_small      = $('#unit_small').val();
            var smeqmed   = $('#smeqmed').val();
            var unit_medium   = $('#unit_medium').val();
            var medeqlarge   = $('#medeqlarge').val();
            var unit_large   = $('#unit_large').val();
            $.fn.dataTable.ext.errMode = 'none';

            var table = $('#datatable').DataTable({
                responsive: true,
                processing: true,
                serverSide: true,
                stateSave : true,
                destroy: true,
                "bFilter": false,
                "lengthChange": false,
                ajax: {
                    url: "{{ route('stock.unit.table') }}",
                    type: 'get',
                    data: function(d) {
                        d.stuff = stuff;
                        d.unit_small = unit_small;
                        d.smeqmed = smeqmed;
                        d.unit_medium = unit_medium;
                        d.medeqlarge = medeqlarge;
                        d.unit_large = unit_large;
                    }
                },
                columns: [
                    {data: 'accurate_name', name: 'accurate_name'},
                    {data: 'unit', name: 'unit'},
                    {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() {
            $('#stuff').val('');
            $('#unit_small').val('');
            $('#smeqmed').val('');
            $('#unit_medium').val('');
            $('#medeqlarge').val('');
            $('#unit_large').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!'
                            });
                        }
                    });
                }
            });
        });
    </script>
@endsection