@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="row-fluid">
        <!-- BEGIN PAGE TITLE & BREADCRUMB-->
        <h3 class="page-title">
            Status
        </h3>
        <ul class="breadcrumb">
            <li>
                <i class="icon-home"></i>
                <a href="#">Dashboard</a> 
                <i class="icon-angle-right"></i>
            </li>
            <li><a href="#">Masters</a><i class="icon-angle-right"></i></li>
            <li><a href="#">Status</a></li>
            
        </ul>
        <!-- END PAGE TITLE & BREADCRUMB-->
    </div>
    @if(Session::has('flash_message'))
            <div class="row-fluid">
            <div class="span12">
                <p class="alert {{ Session::get('alert-class', 'alert-info') }}">{{ Session::get('flash_message') }}</p>
            </div> 
            </div>   
        @endif
  
    <div class="row-fluid">
        <div class="span12">
            <div class="portlet box green">
                <div class="portlet-title">
                    <div class="caption"><i class="icon-globe"></i>Status Records</div>
                    <div class="tools">
                        <a href="javascript:;" class="reload"></a>
                        <a href="javascript:;" class="remove"></a>
                    </div>
                </div>
                <div class="portlet-body">
                   <div class="clearfix">
                            <div class="btn-group pull-right">
                               <a href="{{ url('/admin/status/create') }}" class="btn green btn-sm" title="Add New Status">
                                    <i class="icon-plus" aria-hidden="true"></i> Add New Status
                                </a>
                            </div>
                        </div>
                <table class="table table-bordered table-hover table-full-width statustable" id="table1">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Order</th>
                        <th>Color</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($status as $item)
                        <tr id="item-{{ $item->id }}">
                            <td width="30%">{{ $item->type }}</td>
                            <!--td width="20%"><input type="text" name="order" id="{{'order'.$item->id}}" value= "{{$item->order}}">
                            </td-->
                            <td width="20%">{{$item->order}}</td>
                            
                            @if($item->order == 1)<td style="background-color: #f2f2f2 "><p>Gray</p></td>
                            @endif
                            @if(($item->order == 2)||($item->order == 3)||($item->order == 4))<td style="background-color:  #FF8C00 "><p>Orange</p></td>
                            @endif
                            @if($item->order == 5)<td style="background-color:  #008000 "><p>Green</p></td>
                            @endif
                            </td>
                            <td>
                            @if($item->status == 1)
                            <p class="label label-success">Active</p>
                            @endif
                            @if($item->status == 0)
                            <p class="label label-warning">Inavtive</p>
                            @endif
                            </td>
                            
                            <td>
                                <a href="{{ url('/admin/status/' . $item->id . '/edit') }}" title="Edit Status"><button class="btn purple btn-xs edittype"><i class="icon-edit" aria-hidden="true"></i></button></a>
                            
                            </td>
                            

                            <!--td width="20%"><button class="btn purple btn-primary editStatus" data-id={{$item->id}}><i class="icon-edit" aria-hidden="true"></i></button></td-->
                        </tr>
                    @endforeach
                </tbody>
            </table>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- jQuery UI -->
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
    /*
    $("tbody").on('click', '.editStatus', function() {
        
        var id = $(this).data('id');
        var statusval = $(this).data('status');
        
        $.ajax({
            url : "{{ URL::to('updateStatus') }}" + '/' + id + '/' + statusval,
            success: function(response) { 
                 
                location.reload();
            }
        });
    });
    */
    $( "tbody" ).sortable({
    // Cancel the drag when selecting contenteditable items, buttons, or input boxes
    cancel: ":input,button,[contenteditable]",
    // Set it so rows can only be moved vertically
    axis: "y",
    // Triggered when the user has finished moving a row
    update: function (event, ui) {
        // sortable() - Creates an array of the elements based on the element's id. 
        // The element id must be a word separated by a hyphen, underscore, or equal sign. For example, <tr id='item-1'>
        var data = $(this).sortable('serialize');
        
        //alert(data); //<- Uncomment this to see what data will be sent to the server
 
        // AJAX POST to server
        $.ajax({
            url: "{{ URL::to('sortOrder') }}",
            data: data,
            type: 'POST',
            success: function(response) {
            // alert(response); <- Uncomment this to see the server's response
        }
        });
    }
});
});


</script>
@endsection