@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> Edit 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.update',['id'=>$branch->id])}}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <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($branch->branch_id == 0) selected @endif value="0">Main Branch</option>
                                    @foreach($branches as $one)
                                        <option @if($branch->branch_id == $one->id) selected @endif value="{{$one->id}}">{{$one->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 @if($branch->type_id == 'Branch') selected @endif value="Branch">Branch</option>
                                    <option @if($branch->type_id == 'Franchise') selected @endif value="Franchise">Franchise</option>
                                    <option @if($branch->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="{{$branch->name}}" type="text" name="name" class="form-control input-circle" placeholder="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="{{$branch->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" value="{{$branch->address}}">
                                <div id="map_canvas"></div>
                                <input type="hidden" name="latitude" class="MapLat" value="{{@$branch->latitude}}"  placeholder="Latitude" style="width: 161px;" >
                                <input type="hidden" name="longitude" class="MapLon" value="{{@$branch->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="{{$branch->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>
                </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