@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">
                                    <input type="text" name="latitude" placeholder="Lat" id="latitude"/>
                                    <input type="text" name="longitude" placeholder="Long" id="longitude"/>
                                </li>
                                <div class="pull-right">
                                    <input type="text" name="name" id="border" value="" placeholder="Border Name"
                                           class="input-large"/>
                                    <a class="btn add_border"> 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">Action</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($borders as $index=> $border)
                                <tr>
                                    <td>{{++$index}}</td>
                                    <td>
                                    <span id="quantity{{$border->id}}" style="display:none">
                                        <input type="text" class="span4" id="dataquantity{{$border->id}}"
                                               value="{{$border->name}}"> </span>
                                        <span class="" id="quantityvalue{{$border->id}}">{{$border->name}}</span>
                                    </td>
                                    <td style="width: 220px">
                                        <div class="btn-group">
                                            <a class="btn btn-mini" id="editDetails{{$border->id}}"
                                               onclick="editDetails({{$border->id}})" data-toggle="modal"
                                               style="margin-right: 4px;">Edit</a>
                                            <a onclick="editSave({{$border->id}});" id="editsave{{$border->id}}"
                                               class="btn btn-mini"
                                               style="display:none;margin-right: 4px">
                                                Save </a>
                                            <button onclick="showDeleteModal({{$border->id}},'{{$border->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>
    <script type="text/javascript">

        //    initializePlaceSearch(document.getElementById('border'));

        var location_id_ = document.getElementById('border');
        google.maps.event.addDomListener(window, 'load', initialize(location_id_));

        $("#border").on('change', function () {
            var geocoder = new google.maps.Geocoder();
            geocoder.geocode({
                'address': $('#border').val()
            }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    $('#latitude').val(results[0].geometry.location.lat());
                    $('#longitude').val(results[0].geometry.location.lng());
                } else {
                    alert("Something got wrong " + status);
                }
            });
        });

        jQuery(document).ready(function () {
            jQuery(".add_border").click(function () {
                if (jQuery("#border").val() != '') {
                    jQuery.ajax({
                        url: '{{ route('settings.borders.store') }}',
                        type: 'post',
                        data: {
                            name: jQuery('#border').val(),
                            latitude: jQuery('#latitude').val(),
                            longitude: jQuery('#longitude').val()
                        },
                        success: function (data) {
                            location.reload();
                        }
                    });
                }
            });
        });
        function editSave(argument) {
            var target = document.getElementById('dyntable');
            jQuery.ajax({
                url: '{{ route('settings.borders.update') }}',
                type: 'post',
                data: {
                    'border_id': argument,
                    'border': jQuery('#dataquantity' + argument).val(),
                },
                cache: false,
                success: function (html) {
                    jQuery('#messege_add').html(html);
                    location.reload();
                }
            });
        }

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

                }

            });
        }
        function CategoryRemove(argument) {
            jQuery.ajax({
                url: '{{ route('settings.borders.destroy') }}',
                type: 'post',
                data: {
                    'border_id': argument,//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