@extends('admin.layout')
@section('content')
<style>

.upload-btn-wrapper {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.btn {
  border: 2px solid gray;
  color: gray;
  background-color: white;
  padding: 8px 20px;
  border-radius: 8px;
  font-size: 20px;
  font-weight: bold;
}

.upload-btn-wrapper input[type=file] {
  font-size: 100px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}
.btn-default {
    background: #ffffff !important;
    color: #4b5359 !important;
    border: 1px solid #a2a2a2 !important;
    font-size: 1.1em !important;
}
.btn-default:hover {
    background: #002a53 !important;
    color: #ffffff !important;
   
}

    </style>
          <div class="parts form">
	<div class="main-card mb-3 card">
		<div class="card-body">
			<h5 class="card-title">{{__('Branches.Branches_Add')}}</h5>

            @if(count($errors)>0)
        <div class="alert alert-danger">
            <ul>
                @foreach($errors->all() as $error)
                    <li>{{$error}}</li>
                @endforeach
            </ul>
        </div>
    @endif                       
    {!! Form::open(['method'=>'post','action'=>'Admin\BranchesController@store','files'=>true]) !!}
    
    <div class="row">
					<div class="col-md">
                    <div class="position-relative row form-group">
                        <label for="name" class="col-sm-2 col-form-label">{{__('Branches.title_ar')}} *</label>
                        <div class="col-sm-10">
                            {!! Form::text('title_ar',null,['class'=>'form-control','placeholder'=>__('Branches.title_ar')]) !!}
                        </div>
                    </div>
                    <div class="position-relative row form-group">
                        <label for="name" class="col-sm-2 col-form-label">{{__('Branches.title_en')}} *</label>
                        <div class="col-sm-10">
                            {!! Form::text('title_en',null,['class'=>'form-control','placeholder'=>__('Branches.title_en')]) !!}
                        </div>
                    </div>
                    <div class="position-relative row form-group">
                        <label for="name" class="col-sm-2 col-form-label">{{__('Branches.adress')}} *</label>
                        <div class="col-sm-10">
                            {!! Form::text('adress',null,['class'=>'form-control','placeholder'=>__('Branches.adress')]) !!}
                        </div>
                    </div>
                    <div class="position-relative row form-group">
                        <label for="name" class="col-sm-2 col-form-label">{{__('Branches.phone')}} *</label>
                        <div class="col-sm-10">
                            {!! Form::text('phone',null,['class'=>'form-control','placeholder'=>__('Branches.phone')]) !!}
                        </div>
                    </div>
                    <div class="position-relative row form-group">
                        <label for="name" class="col-sm-2 col-form-label">{{__('Branches.times_of_work')}} *</label>
                        <div class="col-sm-10">
                            {!! Form::text('times_of_work',null,['class'=>'form-control','placeholder'=>__('Branches.times_of_work')]) !!}
                        </div>
                    </div>
                    <div class="position-relative row form-group">
                        <label for="name" class="col-sm-2 col-form-label">{{__('Branches.location_lat')}} *</label>
                        <div class="col-sm-10">
                            {!! Form::text('location_lat',null,['class'=>'form-control','id'=>'location_lat','placeholder'=>__('Branches.location_lat')]) !!}
                        </div>
                    </div>
                    <div class="position-relative row form-group">
                        <label for="name" class="col-sm-2 col-form-label">{{__('Branches.location_lon')}} *</label>
                        <div class="col-sm-10">
                            {!! Form::text('location_lon',null,['class'=>'form-control','id'=>'location_lon','placeholder'=>__('Branches.location_lon')]) !!}
                        </div>
                    </div>
                    <div id="map" style="height: 500px;width: 100%"></div>
                    <script>

                        // The following example creates a marker in Stockholm, Sweden using a DROP
                        // animation. Clicking on the marker will toggle the animation between a BOUNCE
                        // animation and no animation.

                        var marker;

                        function initMap() {
                            var map = new google.maps.Map(document.getElementById('map'), {
                                zoom: 13,
                                center: {lat: 59.325, lng: 18.070}
                            });

                            marker = new google.maps.Marker({
                                map: map,
                                draggable: true,
                                animation: google.maps.Animation.DROP,
                                position: {lat: 59.327, lng: 18.067}
                            });
                            marker.addListener('click', toggleBounce);

                            marker.addListener('drag', handleEvent);
                            marker.addListener('dragend', handleEvent);
                        }
                        function handleEvent(event) {
                            document.getElementById('location_lat').value = event.latLng.lat();
                            document.getElementById('location_lon').value = event.latLng.lng();
                        }
                        function toggleBounce() {
                            if (marker.getAnimation() !== null) {
                                marker.setAnimation(null);
                                console.log(marker);
                            } else {
                                marker.setAnimation(google.maps.Animation.BOUNCE);
                            }
                        }
                    </script>
                    <script async defer
                            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB9qEDRUSiq2dcVi9tWG9CA-4zze-Gs_2k&callback=initMap">
                    </script>
                    <div class="col-sm-12 offset-sm-2">
                        {!! Form::submit(__('General.Save'),['class'=>'btn btn-primary form-control']) !!}
                        </div>
      
    {!! Form::Close() !!}

   
            </div>
        </div>
    </div>

    
@endsection