@extends('layouts.main_without_top_button')
@section('contentinner')
@section('title')
    Route Borders
@stop
@section('navigation')
    <ul class="breadcrumb">
        <li><a href="{{route('home')}}">Dashboard</a> <span class="divider">/</span></li>
        <li class="active">Route Borders</li>
    </ul>
@stop
<div class="tabbable">
    @include('settings.routes.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">
                            <div class="pull-right">
                                <select data-placeholder="Select Route Name..." style="width:250px" class="chzn-select"
                                        name="route_id" id="route_id"
                                        tabindex="2">
                                    <option value="" id="border"></option>
                                    @foreach($routes as $route)
                                        <option value="{{$route->id}}">{{$route->route}}</option>
                                    @endforeach
                                </select>
                                <select data-placeholder="Select Border Name..." style="width:250px" class="chzn-select"
                                        name="border_id" id="border_id"
                                        tabindex="2">
                                    <option value="" id="border"></option>
                                    @foreach($borders as $border)
                                        <option value="{{$border->id}}">{{$border->name}}</option>
                                    @endforeach
                                </select>
                                <a class="add_border btn " style="margin-top: -18px;margin-bottom: 10px;">Add Border</a>
                            </div>
                        </ul>
                        <span class="clearall"></span>
                    </div><!--msghead-->
                    <table class="table table-striped table-bordered table-condensed" id="dyntable">
                        <thead>
                        <tr>
                            <th style="width: 30px">SNO.</th>
                            <th class="head0">Name</th>
                            <th class="head0">Route</th>
                            <th class="head0">Action</th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach($routeborders as $index=> $routeborder)
                            <tr>
                                <td>{{++$index}}</td>
                                <td>
                                    <span id="quantity{{$routeborder->id}}" style="display:none">
                                     <select data-placeholder="Select Border Name..." style="width:250px"
                                             class="chzn-selec"
                                             name="border_id" id="border_id{{$routeborder->id}}"
                                             tabindex="2">
                                         <option value="" id="border"></option>
                                         @foreach($borders as $border)
                                             {{$selected = ($border->id == $routeborder->border_id) ? 'selected' : ''}}
                                             <option {{$selected}} value="{{$border->id}}">{{$border->name}}</option>
                                         @endforeach
                                     </select>
                                    </span>
                                    <span id="border_name{{$routeborder->id}}">{{$routeborder->border->name}} </span>
                                </td>
                                <td>
                                    <span id="descript{{$routeborder->id}}" style="display:none">
                                    <select data-placeholder="Select Route Name..." style="width:250px"
                                            class="chzn-selec"
                                            name="route_id" id="route_id{{$routeborder->id}}"
                                            tabindex="2">
                                        <option value="" id="border"></option>
                                        @foreach($routes as $route)
                                            {{$selected = ($route->id == $routeborder->route_id) ? 'selected' : ''}}
                                            <option {{$selected}} value="{{$route->id}}">{{$route->route}}</option>
                                        @endforeach
                                    </select>
                                    </span>
                                    <span id="routename{{$routeborder->id}}">{{$routeborder->routeName}} </span>
                                </td>
                                <td style="width: 220px">
                                    <div class="btn-group">
                                        <a class="btn btn-mini" id="editDetails{{$routeborder->id}}"
                                           onclick="editDetails({{$routeborder->id}})" data-toggle="modal"><i
                                                    class="icon-edit" style="margin-right: 4px"></i>Edit</a>
                                        <a onclick="editSave({{$routeborder->id}});" id="editsave{{$routeborder->id}}"
                                           class="btn btn-mini" style="display:none;margin-right: 4px">
                                            Save </a>
                                        <button onclick="deleteRecordFn('{{$routeborder->id}}');"
                                                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>
<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery(".add_border").click(function () {
            if (jQuery("#route_id").val() != '' & jQuery("#border_id").val() != '') {
                jQuery.ajax({
                    url: '{{ route('settings.route-borders.store') }}',
                    type: 'post',
                    data: {'route_id': jQuery('#route_id').val(), 'border_id': jQuery('#border_id').val()},
                    success: function (data) {
                        console.log(data);
                        jQuery("#route_id").val('').trigger("change");
                        jQuery("#border_id").val('').trigger("change");
                        jQuery("#approximately_days").val('');
                        if (data.state === 'Done') {
                            jQuery.jGrowl(data.msg);
                        } else if (data.state === 'Fail') {
                            jQuery.jGrowl(data.msg);
                        } else {
                            var num = 0;
                            jQuery.each(data, function (k, v) {
                                field = k.substr(0, k.indexOf("."));
                                field = jQuery('select[name="' + field + '[]"]').addClass('has-error');
                                if (num == 0) jQuery.jGrowl(v);
                                num++;
                            });
                        }
                    }
                });
            }
        });
    });
    function editSave(argument) {
        var target = document.getElementById('dyntable');

        jQuery.ajax({
            url: '{{ route('settings.route-borders.update') }}',
            type: 'post',
            data: {
                'id': argument,
                'border_id': jQuery('#border_id' + argument).val(),
                'route_id': jQuery('#route_id' + argument).val()
            },
            success: function (html) {
                jQuery('#messege_add').html(html);
                location.reload();
            }
        });
    }

    function deleteRecordFn(id) {
        swal({
                    title: "Are you sure?",
                    text: "You will not be able to recover this imaginary file!",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "Yes, delete it!",
                    closeOnConfirm: false
                },
                function () {
                    swal({title: "", text: "", timer: 0, showConfirmButton: false});
                    var route = "{{ route('settings.route-borders.destroy', ':id') }}". replace(':id', id);
                    jQuery.ajax({
                        url: route,
                        type: 'DELETE',
                        success: function (data) {
                            console.log(data.state + ' ' + data.msg);
                            if (data.state === 'Done') {
                                jQuery.jGrowl(data.msg);
                            }
                            else if (data.state === 'Fail') {
                                jQuery.jGrowl(data.msg);
                            }
                            else {
                                jQuery.jGrowl('Something went wrong!');
                            }
                            location.reload();
                        },
                        error: function (data) {
                            console.log(data);
                        }
                    });
                });
    }


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

        jQuery('#quantity' + argument).show();
        jQuery('#border_name' + argument).hide();


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