@extends('layouts.main_without_top_button')
@section('title')
    Borders
@stop
@section('navigation')
    <ul class="breadcrumb">
        <li><a href="{{route('home')}}">Dashboard</a> <span class="divider">/</span></li>
        <li class="active">Borders</li>
    </ul>
@stop
@section('contentinner')
<div class="tabbable">
    @include('routes.settings.routes.includes.profile')
    <div class="tab-content">
        <div id="glyphs" class="tab-pane active">
            <div class="row-fluid" style="margin-bottom: 8px;">
                <div class="span12  profile-left">
                    <div class="msghead" style="margin-bottom: 4px;margin-top: -20px;">
                        <ul class="msghead_menu">
                            <li class="right btn-group">
                                <a class="btn" onclick="modelShow('addRoute')">CREATE NEW</a>
                            </li>
                        </ul>
                        <span class="clearall"></span>
                    </div><!--msghead-->
                    <table class="table table-striped table-bordered table-condensed" id="dyntable">
                        <thead>
                        <tr>
                            <th style="width: 50px">S/N</th>
                            <th class="head0">On Route Cost</th>
                            <th class="head0">Action</th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach($costs as $index=>$cost)
                            <tr>
                                <td>{{$index+1}}</td>
                                <td>
                                     <span id="quantity{{$cost->id}}" style="display:none">
                                        <input type="text" class="span4" id="dataquantity{{$cost->id}}"
                                               value="{{$cost->name}}"> </span>
                                    <span class="" id="quantityvalue{{$cost->id}}">{{$cost->name}}</span>
                                </td>

                                <td style="width: 220px">
                                    <div class="btn-group">
                                        <a class="btn btn-mini" id="editDetails{{$cost->id}}"
                                           onclick="editDetails({{$cost->id}})" data-toggle="modal"
                                           style="margin-right: 4px">Edit</a>
                                        <a onclick="editSave({{$cost->id}});" id="editsave{{$cost->id}}" class="btn"
                                           style="display:none;margin-right: 4px">
                                            Save </a>
                                        <button onclick="showDeleteModal({{$cost->id}},'{{$cost->name}}');" id=""
                                                class="btn btn-mini btn-danger"><i class="icon-trash"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>

                        @endforeach
                        </tbody>
                    </table>
                </div><!--span6-->
            </div><!--row-fluid-->
        </div><!--tab-pane-->
    </div>
</div>


<div aria-hidden="false" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" class="modal hide fade in"
     id="addRoute">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">New Route Cost</h3>
    </div>

    {!! Form::open(array('route' => 'settings.route-pre-defined-expenses.store', 'class' => 'stdform','files'=>true)) !!}
    {{--<form class="stdform" method="post" action="{{ route('vehicle.create') }}">--}}
    <div class="modal-body">
        <div class="row-fluid">
            <div class="span12">
                <div class="span6">
                    <label class="control-label span4" for="Category">Name</label>

                    <div class="controls span8">
                        <input type="text" name="name" id='name' placeholder="" value=""
                               class="input-xlarge"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">CLOSE</button>
        {{--<button class="btn" id="add_more_cost">ADD MORE</button>--}}
        <button class="btn btn-primary" name="submit" type="submit">SAVE</button>
    </div>
    </form>
</div>


<script type="text/javascript">
    //        jQuery('#add_more_cost').on();
    function editSave(argument) {
        jQuery.ajax({
            url: '{{ route('settings.route-pre-defined-expenses.update') }}',
            type: 'post',
            data: {
                cost_id: argument,
                name: jQuery('#dataquantity' + argument).val(),
            },
            success: function (html) {
                location.reload();
            }
        });
    }

    function showDeleteModal(cost_id, name) {
        jConfirm('Are You sure you want to delete ' + name, 'DELETE', function (r) {
            if (r == true) {
                CategoryRemove(cost_id);
            } else {

            }
        });
    }
    function CategoryRemove(cost_id) {
        jQuery.ajax({
            url: '{{ route('settings.route-pre-defined-expenses.destroy') }}',
            type: 'post',
            data: {
                'cost_id': cost_id,//popup_ok
            },
            success: function (data) {
                location.reload();
            }
        });
    }
    function editDetails(argument) {
        jQuery('#quantity' + argument).show();
        jQuery('#quantityvalue' + argument).hide();

        jQuery('#country_name' + argument).show();
        jQuery('#country_namevalue' + argument).hide();

        jQuery('#editsave' + argument).show();
        jQuery('#editDetails' + argument).hide();

        jQuery('#descript' + argument).show();
        jQuery('#descriptionvalue' + argument).hide();
    }
</script>
@stop