@extends('layouts.back-end.app')

@section('title', \App\CPU\translate('Branches'))

@push('css_or_js')

@endpush

@section('content')
<style>
    .col-10{
        margin: auto;
    }
    .control-label{
        display: flex;
    }
    #map_canvas{
        height: 35rem;
        margin: 4rem auto;
        box-shadow: 1px 9px 8px 20px rgba(0, 0, 0, 0.12), 0 2px 5px 0 rgba(0, 0, 0, 0.16);
    }
</style>
<div class="row">
    <div class="col-10">
            <div class="portlet box blue ">
                <div class="portlet-title">
                    <div class="caption">
                        <i class="fa fa-user"></i> Create New Branch </div>
                    <div class="tools">
                        <a href="" class="collapse"> </a>
                        <a href="#portlet-config" data-toggle="modal" class="config"> </a>
                        <a href="" class="reload"> </a>
                        <a href="" class="remove"> </a>
                    </div>
                </div>
                <div class="portlet-body form">
                    <form role="form" action="{{route('admin.branches.store')}}" method="POST" enctype="multipart/form-data">
                           {{ csrf_field() }}
                            <div class="form-body">
                                <div class="row">
                                    <div class="col-6">
                                        <div class="form-group has-success user">
                                            <label class="control-label">Select Branch</label>
                                            <select onchange="yesnoCheck(this);" id="type" name="branch_id" class="form-control" required="required">
                                                <option disabled="" selected="">Select Type of Branch</option>
                                                <option @if(old('branch_id') == 0) selected @endif value="0">Main Branch</option>
                                                @foreach($branches as $branch)
                                                <option @if(old('branch_id') == $branch->id) selected @endif value="{{$branch->id}}">{{$branch->name}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-6">
                                        <div class="form-group has-success user">
                                            <label class="control-label">Select Type</label>
                                            <select id="type" name="type_id" class="form-control" required="required">
                                                <option disabled="" selected="">Select Type...</option>
                                                <option @if(old('type_id') == 'Branch') selected @endif value="Branch">Branch</option>
                                                <option @if(old('type_id') == 'Franchise') selected @endif value="Franchise">Franchise</option>
                                                <option @if(old('type_id') == 'Branch and Franchise') selected @endif value="Branch and Franchise">Branch and Franchise</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-6">
                                        <div class="form-group has-success user">
                                            <label class="control-label">Name</label>
                                            <input value="{{old('name')}}" type="text" name="name" class="form-control input-circle" placeholder="Please Enter Branch Name">
                                        </div>
                                    </div>

                                    <div class="col-6">
                                        <div class="form-group has-success user">
                                            <label class="control-label">Order Number</label>
                                            <input type="number" value="{{old('sort')}}" name="sort" class="form-control input-circle" placeholder="Please Enter Sort Number">
                                        </div>
                                    </div>

                                    <div class="col-6">
                                        <div class="form-group has-success user">
                                            <label class="control-label">Address</label>
                                            <input id="searchTextField" type="text" size="50" style="text-align: left;direction: ltr;" class="form-control input-circle" name="address">
                                            <div id="map_canvas"></div>
                                            <input type="hidden" name="latitude" class="MapLat" value="{{isset($product) ? $product->latitude : old('latitude')}}"  placeholder="Latitude" style="width: 161px;" >
                                            <input type="hidden" name="longitude" class="MapLon" value="{{isset($product) ? $product->longitude : old('longitude')}}" placeholder="Longitude" style="width: 161px;" >
                                        </div>
                                    </div>

                                    <div class="col-6">
                                        <div class="form-group has-success user">
                                            <label class="control-label">Contact Number</label>
                                            <input value="{{old('contact_number')}}" type="text" name="contact_number" class="form-control input-circle" placeholder="Please Enter Contact Number">
                                        </div>
                                    </div>

                                    <div class="col-6">
                                        <div class="form-actions">
                                            <a href="{{ route('admin.branches.index') }}" class="btn default">Cancel</a>
                                            <button type="submit" class="btn btn-success">Submit</button>
                                        </div>
                                    </div>

                                </div>
                            </div>
                    </form>
                </div>
            </div>
    </div>
</div>
@endsection
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
@push('script')
        <script>
            $(function() {
                var lat = 30.0444196,
                    lng = 31.2357116,
                    latlng = new google.maps.LatLng(lat, lng),
                    image = 'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png';
                //zoomControl: true,
                //zoomControlOptions: google.maps.ZoomControlStyle.LARGE,
                var mapOptions = {
                        center: new google.maps.LatLng(lat, lng),
                        zoom: 13,
                        mapTypeId: google.maps.MapTypeId.ROADMAP,
                        panControl: true,
                        panControlOptions: {
                            position: google.maps.ControlPosition.TOP_RIGHT
                        },
                        zoomControl: true,
                        zoomControlOptions: {
                            style: google.maps.ZoomControlStyle.LARGE,
                            position: google.maps.ControlPosition.TOP_left
                        }
                    },
                    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions),
                    marker = new google.maps.Marker({
                        position: latlng,
                        map: map,
                        icon: image
                    });
                var input = document.getElementById('searchTextField');
                var autocomplete = new google.maps.places.Autocomplete(input, {
                    types: ["geocode"]
                });
                autocomplete.bindTo('bounds', map);
                var infowindow = new google.maps.InfoWindow();
                google.maps.event.addListener(autocomplete, 'place_changed', function(event) {
                    infowindow.close();
                    var place = autocomplete.getPlace();
                    if (place.geometry.viewport) {
                        map.fitBounds(place.geometry.viewport);
                    } else {
                        map.setCenter(place.geometry.location);
                        map.setZoom(17);
                    }
                    moveMarker(place.name, place.geometry.location);
                    $('.MapLat').val(place.geometry.location.lat());
                    $('.MapLon').val(place.geometry.location.lng());
                });
                google.maps.event.addListener(map, 'click', function(event) {
                    $('.MapLat').val(event.latLng.lat());
                    $('.MapLon').val(event.latLng.lng());
                    infowindow.close();
                    var geocoder = new google.maps.Geocoder();
                    geocoder.geocode({
                        "latLng": event.latLng
                    }, function(results, status) {
                        console.log(results, status);
                        if (status == google.maps.GeocoderStatus.OK) {
                            console.log(results);
                            var lat = results[0].geometry.location.lat(),
                                lng = results[0].geometry.location.lng(),
                                placeName = results[0].address_components[0].long_name,
                                latlng = new google.maps.LatLng(lat, lng);
                            moveMarker(placeName, latlng);
                            $("#searchTextField").val(results[0].formatted_address);
                        }
                    });
                });

                function moveMarker(placeName, latlng) {
                    marker.setIcon(image);
                    marker.setPosition(latlng);
                    infowindow.setContent(placeName);
                    //infowindow.open(map, marker);
                }
            });
        </script>
@endpush