@extends('layouts/microfin_layout')
@section('title', '| Product Priority Configuration')
<style>
    .glyphicon-move {
        cursor: move;
        cursor: -webkit-grabbing;
    }
    .productPriorityWrap .list-group .list-group-item {
        padding: 3px 27px;
        font-size: 11px;
        border-bottom: 2px solid #ffffff ;
        border-radius: 5px;
    }
    div#regularLoan {
        height: 320px;
        overflow-x: scroll;
        background-color: #fff;
    }

    div#productList {
        min-height: 60vh;
        background-color: #fff;
    }
    #productList .list-group-item.regularLoanItem,#productList .list-group-item.onetimeLoanItem {
        padding: 5px 15 5 15;
        background-color: #b1bacf8c;
    }
    #productList .list-group-item.savingsitem {
        padding: 5px 15 5 15;
        background-color: #93b99a96;

    }
    #regularLoan.list-group .list-group-item, #onetimeLoan.list-group .list-group-item {
        padding: 3px 27px;
        font-size: 11px;
        background-color: #b1bacf8c;
    }

    #savingsProductPriority.list-group .list-group-item {
        padding: 3px 27px;
        font-size: 11px;
        background-color: #93b99a96;
    }


    .customH4{
        text-align: center;
        background-color: #070808;
        color: #fff;
        padding: 5px;
    }

    input[type=date], input[type=time], input[type=datetime-local], input[type=month] {
        height: 20px;
        width: 89px;
    }

    span.effectDateWrap {
        position: absolute;
        right: 15%;
    }
    #regularLoan .effectDateWrap,#onetimeLoan .effectDateWrap,#savingsProductPriority .effectDateWrap,#regularLoan .priority,#onetimeLoan .priority,#savingsProductPriority .priority{
        display: none;
    }
    .dateWrap {
        display: flex;
        margin-bottom: 15px;
    }
    .laonproductWrap {
        text-align: center;
        border-bottom: 2px solid;
    }
    div#savingsProductPriority {
        height: 308px;
        overflow-y: auto;
    }

</style>
@section('content')
    <div class="container">
        <div class="row">
            @if(session('message'))
                <div class="alert alert-{{session('status') }} alert-dismissible text-center">
                    {{ session('message') }}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            @endif
        </div>
        <div class="row productPriorityWrap">
            <div class="col-md-4">
                <div>
                    <h4 class='customH4'>Loan Product List</h4>

                        @php $count = ''; @endphp
                        @foreach ($loanProducts as $item)
                        <div id="@if($item->name == 'Regular'){{'regularLoan'}}@else{{'onetimeLoan'}}@endif" class="list-group">
                            <div  class="laonproductWrap "> {{$item->name}}
                            </div>
                                @foreach($item->Products as $childItem)
                                <div class="list-group-item @if($item->name == 'Regular') regularLoanItem @else onetimeLoanItem @endif item-move">
                                    <input type="hidden" value="loan" name="productType[]">
                                    <input type="hidden" value="{{$childItem->id}}" name="productId[]">
                                    <span class="badge priority">{{$count}}</span>
                                    <span class="glyphicon glyphicon-move" aria-hidden="true"></span>
                                    {{$childItem->name}}

                                </div>
                                @endforeach


                        </div>
                        @endforeach


                </div>

                <div>
                    <h4 class='customH4'>Savings Product List</h4>
                    <div id="savingsProductPriority" class="list-group">
                        @php $count = ''; @endphp
                        @foreach ($savingsProducts as $item)

                            <div class="laonproductWrap"> {{$item->name}}
                            </div>
                            @foreach($item->Products as $childItem)
                            <div class="list-group-item savingsitem item-move">
                                <input type="hidden" value="savings" name="productType[]">
                                <input type="hidden" value="{{$childItem->id}}" name="productId[]">
                                <span class="badge priority">{{$count}}</span>
                                <span class="glyphicon glyphicon-move" aria-hidden="true"></span>
                                {{$childItem->name}}

                            </div>
                            @endforeach
                        @endforeach

                    </div>

                </div>


            </div>

            <div class="col-md-8">
                <center> <h4 class='customH4'>Product Wise Collection Priority Config</h4></center>
                <form method="post" action="{{url('/productPriorityConfig/store')}}">
                    @csrf
                    <div class="dateWrap">
                            <span>Effective Date: </span><input type="text" class="form-control " id="effectiveDate" style="width: 107px;
                            height: 23px;" value="@if(isset($priorityConfig->effective_date)) {{date('d-m-Y',strtotime($priorityConfig->effective_date))}} @else {{date('d-m-Y')}} @endif"  name="effective_date"/>
                    </div>
                    <div id="productList" class="list-group">
                        <input type="hidden" value="{{$priorityConfig->id??''}}" name="configId">
                        @php $count = 0; @endphp
                        @if(isset($priorityConfig->config_data) && count($priorityConfig->config_data)>0)
                        @foreach ($priorityConfig->config_data as $item)
                            <div class="list-group-item @if($item->product_type == "loan") regularLoanItem @else savingsitem @endif item-move">
                                <input type="hidden" value="{{$item->product_type}}" name="productType[]">
                                <input type="hidden" value="{{$item->product_id}}" name="productId[]">
                                <span class="badge priority">Priority: {{$item->priority_order}}</span>
                                <span class="glyphicon glyphicon-move" aria-hidden="true"></span>
                                {{ $item->product_name }}


                            </div>
                        @endforeach
                        @endif
                    </div>
                    <input type="submit" value="save" class="btn btn-success" style="float: right;" />
                    <a href="{{url('productPriorityConfig')}}"> <button type="button"  class="btn btn-default" style="float: right;" >Back</button> </a>
                </form>
            </div>
        </div>

    </div>



    <!-- Latest Sortable -->
    <script src="https://raw.githack.com/SortableJS/Sortable/master/Sortable.js"></script>


    <script>
        $(document).ready(function() {

            $('#effectiveDate').datepicker({
                dateFormat: 'dd-mm-yy',
                changeYear: true,
                changeMonth: true,
                onSelect: function(){
                    thisDate = $("#effectiveDate").datepicker('getDate');
                }
            });

            // List with handle
            Sortable.create(savingsProductPriority, {
                group: {
                    name: 'savingsProductPriority',
                    put: function (to, from, item) {


                        if (item.classList.contains('savingsitem')) {
                            return true;
                        } else {
                            return false;
                        }
                    },
                    pull: true
                },
                handle: '.item-move',
                animation: 150
            });

            Sortable.create(regularLoan, {
                group: {
                    name: 'regularLoan',
                    put: function (to, from, item) {
                            if (item.classList.contains('regularLoanItem')) {
                                return true;
                            }else{
                                return false;
                            }
                    },
                    pull: true
                },
                handle: '.item-move',
                animation: 150,
            });

            Sortable.create(onetimeLoan, {
                group: {
                    name: 'onetimeLoan',
                    put: function (to, from, item) {
                            if (item.classList.contains('onetimeLoanItem')) {
                                return true;
                            }else{
                                return false;
                            }
                    },
                    pull: true
                },
                handle: '.item-move',
                animation: 150,
            });




            Sortable.create(productList, {
                group: {
                    name: 'productList',
                    put: ['regularLoan','onetimeLoan','savingsProductPriority'],

                    pull: true
                },
                handle: '.item-move',
                animation: 150,
                onEnd: function (evt) {
                    // Reorder the priority values on drag and drop
                    var items = evt.to.children;
                    for (var i = 0; i < items.length; i++) {
                        var priorityElement = items[i].querySelector('.badge.priority');
                        if (priorityElement) {
                            priorityElement.textContent = 'Priority: ' + (i);
                        }
                    }
                },
                onAdd: function (evt) {
                    // Reorder the priority values when a new item is added
                    var items = evt.to.children;
                    for (var i = 0; i < items.length; i++) {
                        var priorityElement = items[i].querySelector('.badge.priority');
                        if (priorityElement) {
                            priorityElement.textContent = 'Priority: ' + (i );
                        }
                    }
                }
            });


        });
    </script>
@endsection