@extends('Layout.Payslipmaster')

@section('title', 'Range manager')

@section('content')

    <section id="content">
        <form role="form" class="vbox form-horizontal clearfix">
            <section class="scrollable padder">
                <ul class="breadcrumb no-border no-radius b-b b-light pull-in">
                    <li><a href="."><i class="fa fa-home"></i> Home</a></li>
                    <li class="active">Range manager</li>
                </ul>
                <section class="panel panel-default col-md-6 no-padder">
                    <header class="panel-heading font-bold clearfix">
                        Ranges
                    </header>
                    <div class="table-responsive">
                        <table class="table table-striped m-b-sm datagrid">
                            <thead>
                            <tr>
                                <th colspan="6">
                                    <div class="row clearfix">
                                        <div class="col-sm-4 m-t-xs m-b-xs">
                                            <div class="input-group search datagrid-search">
                                                <input type="text" class="input-sm form-control" placeholder="Search">
                                                <div class="input-group-btn">
                                                    <button class="btn btn-default btn-sm"><i class="fa fa-search"></i></button>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="pull-right" style="margin:5px 10px 0 0;">
                                            <a href="/ranges/create" class="btn btn-info btn-sm"><i class="fa fa-plus"></i>Create</a>
                                            <a href="/ranges" class="btn btn-info btn-sm"><i class="fa fa-refresh"></i>Refresh</a>
                                        </div>
                                    </div>
                                </th>
                            </tr>
                            <tr>
                                <th class="sortable">Range name</th>
                                <th class="sortable">Action</th>
                            </tr>
                            </thead>
                            <tbody>
                            @if ($ranges->count())
                                @foreach($ranges as $range)
                                    <tr>
                                        <td>{{ $range->range_name }}</td>
                                        <td>
                                            <a href="/ranges/{{ $range->id }}"><span class="btn btn-default btn-sm"><i class="fa fa-eye no-margin"></i></span></a>
                                            <a href="/ranges/edit/{{ $range->id }}"><span class="btn btn-default btn-sm"><i class="fa fa-edit no-margin"></i></span></a>
                                            <a href="javascript:void(0);"><span class="btn btn-danger btn-sm" onclick="deleteRange($(this), {{ $range->id }})"><i class="fa fa-trash no-margin"></i></span></a>
                                        </td>
                                    </tr>
                                @endforeach
                            @else
                                <tr>
                                    <td colspan="2" class="text-center">Nothing to display</td>
                                </tr>
                            @endif
                            </tbody>
                            <tfoot>
                            <tr>
                                <th class="row">
                                    <div class="datagrid-footer-left col-sm-6 text-center-xs m-l-n" style="display:none;">
                                        <div class="grid-controls m-t-sm">
                                            <span>
                                                <span class="grid-start"></span> -
                                                <span class="grid-end"></span> of
                                                <span class="grid-count"></span>
                                            </span>
                                            <div class="select grid-pagesize dropup" data-resize="auto">
                                                <button data-toggle="dropdown" class="btn btn-sm btn-default dropdown-toggle">
                                                    <span class="dropdown-label"></span>
                                                    <span class="caret"></span>
                                                </button>
                                                <ul class="dropdown-menu">
                                                    <li data-value="5"><a href="#">5</a></li>
                                                    <li data-value="10"><a href="#">10</a></li>
                                                    <li data-value="20" data-selected="true"><a href="#">20</a></li>
                                                    <li data-value="50"><a href="#">50</a></li>
                                                    <li data-value="100"><a href="#">100</a></li>
                                                </ul>
                                            </div>
                                            <span>Per Page</span>
                                        </div>
                                    </div>
                                    <div class="datagrid-footer-right col-sm-6 text-right text-center-xs" style="display:none;">
                                        <div class="grid-pager m-r-n">
                                            <button type="button" class="btn btn-sm btn-default grid-prevpage"><i class="fa fa-chevron-left"></i></button>
                                            <span>Page</span>m,0
                                                <div class="input-group dropdown combobox">
                                                    <input class="input-sm form-control" type="text">
                                                    <div class="input-group-btn dropup">
                                                        <button class="btn btn-sm btn-default" data-toggle="dropdown"><i class="caret"></i></button>
                                                        <ul class="dropdown-menu pull-right"></ul>
                                                    </div>
                                                </div>
                                            </div>
                                            <span>of <span class="grid-pages"></span></span>
                                            <button type="button" class="btn btn-sm btn-default grid-nextpage"><i class="fa fa-chevron-right"></i></button>
                                        </div>
                                    </div>
                                </th>
                            </tr>
                            </tfoot>
                        </table>
                    </div>
            </section>
            </section>
            <a href="#" class="hide nav-off-screen-block" data-toggle="class:nav-off-screen, open" data-target="#nav,html"></a>
        </form>
    </section>

@endsection

@section('footer-include')
    <!-- fuelux -->
    <script src="/js/libs/underscore-min.js"></script>
    <script src="/js/fuelux/fuelux.js"></script>
    {{--<script src="js/fuelux/demo.datagrid.js"></script>--}}
    <!-- select2 -->
    <script src="/js/select2/select2.min.js"></script>
@endsection

@section('j-script')
    <!-- Jquery -->
    <script>
        function deleteRange(el, id){
            if(!confirm('Are you sure you want to delete this range?')){
                return false;
            }

            let data = "rangeId=" + id;
            let deleteRequest = $.ajax({
                type:'POST',
                url:'ranges/destroy',
                data:data,
                timeout:10000,
                beforeSend:function(){
                    console.log('Started');
                    el.empty().html("<i class='fa fa-circle-o-notch fa-spin'></i>").addClass('disabled');
                },
                success:function(response){
                    el.empty().html("<i class='fa fa-trash no-margin'></i>").removeClass('disabled');
                    console.log(response);
                    if (response.status === 1){
                        el.parent().parent().parent().fadeOut();
                    }else{
                        alert(errorMessage);
                        Console.log('Request failed.');
                    }
                },
                error(x,t,m){
                    if (t === "timeout"){
                        deleteRequest.abort();
                        console.log('Request time out');
                    }
                }
            });
        }

        $(document).on('ready', function(){

        });
    </script>
@endsection