@extends('layouts.app')

@section('page-site-title')
{{trans('areas.page_title')}}
@endsection

@section('page-title')
{{trans('areas.content_title')}}
@endsection

@section('page_navbar')
@include('layouts.widgets.page-navbar')
@endsection

@section('page_breadcrumb')
@include('layouts.widgets.page-breadcrumb')
@endsection

@section('page_side')
@include('layouts.widgets.page-side')
@endsection

@section('page-content')
    <div class="row">
        <div class="col-md-6 ">
            <!-- BEGIN SAMPLE FORM PORTLET-->
            <div class="portlet light bordered">
                <div class="portlet-title">
                    <div class="caption font-red-sunglo">
                        <i class="icon-settings font-red-sunglo"></i>
                        <span class="caption-subject bold uppercase"> {{trans('areas.map')}}</span>
                    </div>

                </div>
                <div class="portlet-body form"  style="height: 349px;">
                    <input id="pac-input" class="controls" type="text"
                           placeholder="Enter a location">

                    <div id="map"></div>
                </div>
            </div>
            <!-- END SAMPLE FORM PORTLET-->
        </div>
        <div class="col-md-6 ">
            <!-- BEGIN SAMPLE FORM PORTLET-->
            <div class="portlet light bordered">
                <div class="portlet-title">
                    <div class="caption">
                        <i class="icon-settings font-dark"></i>
                        <span class="caption-subject font-dark sbold uppercase">{{trans('areas.location')}}</span>
                    </div>

                </div>
                <div class="portlet-body form">
                    <form class="form-horizontal" role="form" action="{{route('towersData')}}" method="post" name="towes_details" id="towes_details">
                        <div class="form-body">
                            {!! csrf_field() !!}
                            <div class="alert alert-danger display-hide">
                                <button class="close" data-close="alert"></button>
                                <span> لابد من ادخال البيانات بطريقة صحيحة</span>
                            </div>
                            <div class="form-group">
                                <label class="col-md-3 control-label">{{trans('areas.longitude')}}</label>
                                <div class="col-md-9">
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                            <i class="fa fa-envelope"></i>
                                        </span>
                                        <input type="text" name="longitude" class="form-control" placeholder="43.848817" id="longitude"> </div>
                                        <span class="help-block"> {{trans('areas.longitude_details')}} </span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-3 control-label">{{trans('areas.latitude')}}</label>
                                <div class="col-md-9">
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                            <i class="fa fa-envelope"></i>
                                        </span>
                                        <input type="text" name="latitude" class="form-control" placeholder="25.760136" id="latitude"> </div>
                                        <span class="help-block"> {{trans('areas.latitude_details')}} </span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-3 control-label">{{trans('areas.distance')}}</label>
                                <div class="col-md-9">
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                            <i class="fa fa-envelope"></i>
                                        </span>
                                        <input type="number" name="distance" class="form-control" placeholder="1"> </div>
                                        <span class="help-block"> {{trans('areas.distance_details')}} </span>
                                </div>
                            </div>
                        </div>
                        <div class="form-actions">
                            <div class="row">
                                <div class="col-md-offset-3 col-md-9">
                                    <button type="submit" class="btn green">{{trans('areas.view_towers')}}</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('page-footer-js')
<script type="application/javascript">
    var js_lang = {!! json_encode(trans('common.js_lang'))  !!};
    var model_js_lang = {!! json_encode(trans('areas.js_lang'))  !!};
    var urls = {!! json_encode($urls) !!};
    var token_code='{{csrf_token()}}';
    var user_id = '{{Auth::user()->id}}';
</script>
<script src="{{ asset('assets/models/js/Common.js')}}" type="text/javascript"></script>
<script type="text/javascript" src="{{ metronic('global/plugins/jquery-validation/js/jquery.validate.min.js')}}"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCpW05rDFXWRD0CLSXs_sZFsKXyJpMQATM&libraries=places&callback=initMap" async defer></script>
<script src="{{ asset('assets/models/js/Areas.js')}}" type="text/javascript"></script>
@endsection

@section('page-heads')
    <link href="{{ asset('assets/models/css/Areas.css') }}" rel="stylesheet" type="text/css" />
@endsection