@extends('layouts.master')
@section('title', 'PetroERP- An ERP for Petrol Pumps')
@section('content')
    <section class="content-header">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-6">
                    <h5>App Menus</h5>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item">
                            <a href="#">Basic Settings</a>
                        </li>
                        <li class="breadcrumb-item active">App Menus</li>
                    </ol>
                </div>
            </div>
        </div>
    </section>
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">New App Menus</h3>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="btn-toolbar">
                                    <a href="/appmenus" class="btn btn-gray">Active List</a>
                                    <a href="/appmenus/dlist" class="btn btn-gray">Deactive List</a>
                                    <a href="/appmenus/create" class="btn btn-gray active">Add App Menu</a>
                                </div>
                            </div>
                        </div> 
                        <div class="card-body">
                            {!! Form::open(['action' => 'AppMenusController@searchUser', 'method' => 'GET', 'class' => 'form-horizontal','data-parsley-validate']) !!}
                                <div class="row form-group space-top">
                                    {{Form::label('userType', 'Select User', ['class'=>'required col-md-2'])}}
                                    <div class="col-md-4">
                                        <select name="userType" class="form-control" required>
                                            <option value="00">Super admin</option>
                                            <option value="11">Pump Owner</option>
                                            <option value="12">Pump Manager</option>
                                            <option value="13">Pump DSM</option>
                                            <option value="21">Transporter</option>
                                            <option value="22">Transporter Manager</option>
                                        </select>
                                    </div>
                                    <div class="col-md-2">
                                        <span class="input-group-btn">
                                            {{Form::submit('Search', ['class'=>'btn btn-primary col-md-offset-2'])}}
                                        </span>
                                    </div>
                                </div>
                               
                            {!! Form::close() !!}  
                            <style>
                                .selected{background-color:green;}
                            </style>    
                            <div class="row">     
                                @if($appmenus)     
                                    <input type="hidden" value="{{$i=$j=$k=0}}">                         
                                    <div class="table-entry table-responsive tableFixHead">
                                        <table  id="sort" class="grid table" title="Kurt Vonnegut novels">
                                            <thead>
                                                <tr>
                                                    <th class="index">Serial No</th>
                                                    <th>Title</th>
                                                    <th>Description</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach($appmenus as $menu) 
                                                    
                                                    @if($menu->parentId == 0)  
                                                        <input type="hidden" value="{{$i++}}">     
                                                        <input type="hidden" value="{{$k=$menu->id}}">     
                                                        <tr tableId="{{$menu->id}}" dod="parent" id="asd">
                                                            <td class="index"><b>{{$i}}.0</b></td>
                                                            <td><b>{{$menu->title}}</b></td>
                                                            <td><b>{{$menu->description}}</b></td>
                                                        <input type="hidden" value="{{$j=1}}"> 
                                                        </tr>  
                                                    @else 
                                                        <tr tableId="child{{$k}}" id="asasasd">
                                                            <td class="index">{{$i}}.{{$j}}</td>
                                                            <td>{{$menu->title}}</td>
                                                            <td>{{$menu->description}}</td>
                                                        </tr>                           
                                                        <input type="hidden" value="{{$j++}}">                          
                                                    @endif 
                                                </tr>                       
                                                @endforeach
                                            </tbody>
                                        </table>
                                        <script>
                                            // var fixHelperModified = function(e, tr) {
                                            //     var $originals = tr.children();
                                            //     var $helper = tr.clone();
                                            //     $helper.children().each(function(index) {
                                            //         $(this).width($originals.eq(index).width())
                                            //     });
                                            //     return $helper;
                                            // },
                                            //     updateIndex = function(e, ui) {
                                            //         $('td.index', ui.item.parent()).each(function (i) {
                                            //             $(this).html(i + 1);
                                            //         });
                                            //     };

                                            // $("#sort tbody").sortable({
                                            //     helper: fixHelperModified,
                                            //     stop: updateIndex
                                            // }).disableSelection();

                                             jQuery("#sort tbody").on('click', 'tr', function () {

                                                    $(this).toggleClass('selected');
                                                    var dod = $(this).attr("dod");
                                                    
                                                    if(dod == "parent") 
                                                    {
                                                        var parent = "child"+$(this).attr("tableId");
                                                        $("[tableId="+parent+"]").attr("class", "ui-sortable-handle selected");
                                                    }               
                                                    
                                                });
                                                $.ui.sortable.prototype._rearrange = function (event, i, a, hardRefresh) {
                                                    a ? a[0].appendChild(this.placeholder[0]) : (i.item[0].parentNode) ? i.item[0].parentNode.insertBefore(this.placeholder[0], (this.direction === "down" ? i.item[0] : i.item[0].nextSibling)) : i.item[0];
                                                    this.counter = this.counter ? ++this.counter : 1;
                                                    var counter = this.counter;
                                                    this._delay(function () {
                                                        if (counter === this.counter) {
                                                            this.refreshPositions(!hardRefresh); 
                                                        }
                                                    });
                                                }
                                                jQuery('#sort tbody').sortable({
                                                    connectWith: "tbody",
                                                    delay: 150, 
                                                    revert: 0,
                                                    helper: function (e, item) {
                                                                
                                                        var helper = $('<tr/>');
                                                        if (!item.hasClass('selected')) {
                                                            item.addClass('selected').siblings().removeClass('selected');
                                                        }
                                                        var elements = item.parent().children('.selected').clone();
                                                        item.data('multidrag', elements).siblings('.selected').remove();
                                                        return helper.append(elements);
                                                    },
                                                    stop: function (e, info) {
                                                       info.item.after(info.item.data('multidrag')).remove();
                                                        updateIndex
                                                    },
                                                    sort: function (e, ui) {
                                                    jQuery("tr").removeClass('selected');
                                                    }
                                                    
                                                });

                                                // updateIndex = function(e, ui) {
                                                //     $('td.index', ui.item.parent()).each(function (i) {
                                                //         $(this).html(i + 1);
                                                //     });
                                                // };

                                        </script>
                                    </div>
                                @endif   
                            </div>                                    
                                                    
                              
                            </div>
                        </div>                                              
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection