@extends('layouts.app')

@section('title', 'Manage Unit & Conversion')
@section('breadcrumb', 'Manage Unit & Conversion')
@section('sub-breadcrumb')
    <a href="{{route('stock.unit')}}" class="kt-subheader__breadcrumbs-link">
        Create
    </a>
@endsection
@section('stock-manage-unit', 'kt-menu__item--open kt-menu__item--here')
@section('create-stock-manage-unit', 'kt-menu__item--active')
@section('content')
    <div class="kt-portlet">
        <div class="kt-portlet__body">
            <div class="container">
            @include('layouts.notification')
            {{-- begin: hint --}}
            <div class="mb-4">
                <div class="col-md-12">
                    <div class="accordion accordion-toggle-arrow" id="accordion-info">
                        <div class="card" style="border-bottom: 1px solid #ebedf2">
                            <div class="card-header" id="headingOne4">
                                <div class="card-title" data-toggle="collapse" data-target="#collapse-info" aria-expanded="true" aria-controls="collapse-info">
                                    <i class="flaticon-info"></i> Manage Unit & Conversion
                                </div>
                            </div>
                            <div id="collapse-info" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion-info" style="">
                                <div class="card-body">
                                    <p>Halaman ini merupakan halaman create unit convertion pada items, yang bisa dilakukan pada halaman ini adalah:</p>
                                    <ul>
                                        <li>Anda Dapat membuat unit untuk item yang dipilih</li>
                                        <li>Melakukan drag pada unit untuk menentukan posisi level dari unit</li>
                                        <li>Pada Ratio urutan yang pertama sistem akan otomatis melakukan set value berupa 0</li>
                                    </ul>
                                    <p style="color:red;"><i>NB: jika anda melakukan perubahan pada <b>Unit Convertion</b>, maka item unit order, unit opname, price dan status display akan tereset kembali  </i></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {{-- end: hint --}}

                {{-- custom repeater (hidden) --}}
                <div class="clone hide" style="display: none">
                    <div class="row box mb-2 ui-sortable-handle">
                        <div class="col-md-1 center mt-2 pr-0">
                            <i class="la la-sort" style="font-size: 20px; color: grey"></i>
                        </div>
                        <div class="col-md-4 pl-0">
                            <select class="form-control input-unit select-unit m-select3" name="unit[]" id="unit">
                                <option value="">-- Unit --</option>
                                @foreach ($data_unit['result'] as $item)
                                    <option value="{{$item['id']}}">{{$item['name']}}</option>
                                @endforeach
                            </select>
                            <small>Unit <span style="color:red;">*</span></small>
                        </div>
                        <div class="col-md-2">
                            <input type="text" class="form-control input-unit" placeholder="20" name="ratio[]" id="ratio">
                            <small>Ratio <span style="color:red;">*</span></small>
                        </div>
                        <div class="col-md-4">
                            <input type="text" class="form-control input-unit" placeholder="300000" name="price[]" id="price">
                            <small>Price <span style="color:red;">*</span></small>
                        </div>
                        <div class="col-md-1 center mt-2">
                            <a href="" class="bnt btn-danger ml-2"><i class="fa fa-trash"></i></a>
                            <small style="color:red;">delete</small>
                        </div>
                    </div>
                </div>

                <form class="create-unit" action="{{route('unit.convertion.store')}}" method="POST">
                    @csrf
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Item <span style="color:red;">*</span></label>
                                <select class="form-control item-select" name="item" id="item">
                                    <option value="">-- Choose Item --</option>
                                    @foreach ($data_item['result'] as $item)
                                        <option value="{{$item['id']}}" {{(old('item') == $item['id']) ? 'selected' : ''}}>{{$item['accurate_name']}}</option>
                                    @endforeach
                                </select>
                            </div>

                            {{-- repeater start --}}
                            <div class="form-group">
                                <div class="col-md-12">
                                    <div class="pull-right">
                                        <a href="#" class="add-unit"> <i class="fa fa-plus"></i> Add Unit</a>
                                    </div>
                                </div>
                            </div> <br>
                            <div class="form-group ">
                                <label> Unit <span style="color:red;">*</span></label>
                                <div class="pindah">
                                    <div class="row box mb-2 repeater">
                                        <div class="col-md-1 center mt-2 pr-0">
                                            <i class="la la-sort" style="font-size: 20px; color: grey"></i>
                                        </div>
                                        <div class="col-md-4 pl-0">
                                            <select class="form-control input-unit select-unit m-select2" name="unit[]" id="unit">
                                                <option value="">-- Unit --</option>
                                                @foreach ($data_unit['result'] as $item)
                                                    <option value="{{$item['id']}}">{{$item['name']}}</option>
                                                @endforeach
                                            </select>
                                            <small>Unit <span style="color:red;">*</span></small>
                                        </div>
                                        <div class="col-md-2">
                                            <input type="text" class="form-control input-unit" placeholder="20" name="ratio[]" id="ratio">
                                            <small>Ratio <span style="color:red;">*</span></small>
                                        </div>
                                        <div class="col-md-4">
                                            <input type="text" class="form-control input-unit" placeholder="300000" name="price[]" id="price">
                                            <small>Price <span style="color:red;">*</span></small>
                                        </div>
                                        <div class="col-md-1 center">
                                            {{-- <i href="" class="bnt btn-danger"><i class="fa fa-trash"></i></i> --}}
                                        </div>
                                    </div>
                                    <div class="increment">
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="pull-right">
                                    <button type="reset" class="btn btn-secondary">Reset</button>
                                    <button type="submit" class="btn btn-primary">Save</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>


            </div>
        </div>
    </div>
@endsection

@section('custom-style')
    <style>
        .box{
            border: 1px solid #DCDCDC;
            padding: 15px;
            background: #F8F8F8;
            border-radius: 10px;
            padding-bottom: 0px;
            padding-left: 0px;
        }
        .box:hover{
            cursor: move !important;
        }
    </style>
    <style>
        body.dragging, body.dragging * {
            cursor: move !important;
        }

        .dragged {
            position: absolute;
            opacity: 0.5;
            z-index: 2000;
        }

        ol.example li.placeholder {
            position: relative;
            /** More li styles **/
        }

        ol.example li.placeholder:before {
            position: absolute;
            /** Define arrowhead **/
        }
    </style>
@endsection
@section('custom-script')
    <script>
        $(document).ready(function() {
            $('.item-select').select2({
                placeholder: "Pilih item"
            });
        });
        $(document).ready(function() {
            $('.m-select2').select2({
                placeholder: "Pilih unit"
            });
        });
        var selected_items = [];
		var	prev_id_item;

        // $('.select-unit').map(function() {
        //     prev_id_item = $(this).val();
        // });
        // $('.create-unit').on('select2:open', '.select-unit', function(e) {
        //     prev_id_item = $(this).val();
        // });
        $('.create-unit').on('select2:open', '.select-unit', function(e) {
            prev_id_item = $(this).val();
            // console.log('prev_id_item2',prev_id_item);
		});

        $('.create-unit').on('change', '.select-unit', function() {
            var id_item = $(this).val();
            id_item = parseInt(id_item);

			var check = jQuery.inArray(id_item, selected_items);

			if ( check >= 0 && id_item != prev_id_item) {
				$(this).val(prev_id_item).trigger("change");
                // console.log('caca',$(this).val(prev_id_item).trigger("change"));

                swal.fire({
					type: 'error',
					title: 'Oops...',
					text: 'Unit sudah dipilih',
				});

            }else{
                selected_items = jQuery.grep(selected_items, function(value) {
					return value != prev_id_item;
				});
				selected_items.push(id_item);

            }
            // console.log('prev_id_item',prev_id_item);
            // console.log('check',check);
            // console.log('selected_items',selected_items);
        });
    </script>
    <script src="{{asset('js/custom/jquery-sortable.js')}}"></script>
    <script type="text/javascript">
        $(document).ready(function(e) {

            // repeater
            $(".add-unit").click(function(){
                var html = $(".clone").html();
                $(".increment").before(html);

                // cari class box yang terakhir dan daftarkan pada select2
                $('.box').last().find('.m-select3').select2({
					placeholder: "Pilih unit"
				});
            });

            // hapus repeater
            $("body").on("click",".btn-danger",function(e){
                e.preventDefault();

                // find id to param remove
                var deleted_item = $(this).parents(".box").find('.select-unit').val();
                deleted_item = parseInt(deleted_item);	// convert string to int

                // console.log("deleted_item",deleted_item)
                // remove deleted id_item
                selected_items = jQuery.grep(selected_items, function(value) {
                    return value != deleted_item;
                });

                $(this).parents(".box").remove();
            });
        });
    </script>
    <script>
        $(".pindah").sortable({
            cancel: '.input-unit',
            connectWith: ['.pindah'],
        });
    </script>
@endsection