@extends('backend.layouts.app')
@section('content')
<div class="row">
    <div class="card-body pt-0">
        <form action="{{route('venues.store')}}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="row">
                <div class="col-lg-6 mx-4">
                    <div class="card">
                        <div class="card-body">
                            <div class="row mb-3">
                                <div class="col-lg-8 mb-3">
                                    <h5 class="card-title mb-2">Create Venue</h5>
                                </div>
                            </div>
                            <div class="row mb-3">
                                <div class="col-lg-4">  
                                    <label for="name" class="form-label @error('name') is-invalid @enderror">{{translate('Venue Name' )}} <span class="text-danger">*</span></label>
                                </div>
                                <div class="col-lg-8">
                                    <input type="text" name="name" class="form-control" placeholder="{{translate('Enter Venue Name')}}" id="name" value="{{old('name')}}">
                                    @error('name') 
                                        <span class="text-danger">
                                            {{ $message }}
                                        </span> 
                                    @enderror
                                </div>
                            </div>
                            <div class="row mb-3">
                                <div class="col-lg-4">  
                                    <label for="image" class="form-label">{{translate('Image ')}}<span class="text-danger">*</span></label>
                                </div>
                                <div class="col-lg-8">
                                    <input type="file" name="image" class="form-control @error('image') is-invalid @enderror">
                                    @error('image') 
                                        <span class="text-danger">
                                            {{ $message }}
                                        </span> 
                                    @enderror
                                </div>
                            </div>
                            <div class="row mb-3">
                                <div class="col-lg-4">  
                                    <label for="address" class="form-label">{{translate('Address ')}}<span class="text-danger">*</span></label>
                                </div>
                                <div class="col-lg-8">
                                    <textarea name="address" class="form-control rns-textEditor @error('address') is-invalid @enderror">{!! old('address') !!}</textarea>
                                    @error('address') 
                                        <span class="text-danger">
                                            {{ $message }}
                                        </span> 
                                    @enderror
                                </div>
                            </div>
                            <input type="hidden" name="latitude">
                            <input type="hidden" name="longitude">
                            <div class="row mb-3">
                                <div class="col-lg-4">  
                                    <label for="map" class="form-label">{{translate('Map Picker ')}}<span class="text-danger">*</span></label>
                                </div>
                                <div class="col-lg-8">
                                    <div name="map" id="map" class="gmaps"></div>
                                    @error('latitude') 
                                        <span class="text-danger">
                                            {{ $message }}
                                        </span> 
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-5">
                    <div class="card">
                        <div class="card-body">
                            <div class="row mb-3">
                                <div class="col-lg-4">  
                                    <label for="phone_number" class="form-label @error('phone_number') is-invalid @enderror">{{translate('Phone Number ')}}<span class="text-danger">*</span></label>
                                </div>
                                <div class="col-lg-8">
                                    <input type="text" name="phone_number" class="form-control" placeholder="{{translate('Enter Phone Number')}}" value="{{old('phone_number')}}">
                                    @error('phone_number') 
                                        <span class="text-danger">
                                            {{ $message }}
                                        </span> 
                                    @enderror
                                </div>
                            </div>
                            <div class="row mb-3">
                                <div class="col-lg-4">  
                                    <label for="whatsapp_number" class="form-label">{{translate("WhatsApp Number")}}</label>
                                </div>
                                <div class="col-lg-8">
                                    <input type="text" name="whatsapp_number" class="form-control" placeholder="{{translate('Enter WhatsApp Number')}}" value="{{old('whatsapp_number')}}">
                                </div>
                            </div>
                            <div class="row mb-3">
                                <div class="col-lg-4">  
                                    <label for="email" class="form-label @error('email') is-invalid @enderror">{{translate('E-Mail ')}}<span class="text-danger">*</span></label>
                                </div>
                                <div class="col-lg-8">
                                    <input type="text" name="email" class="form-control" placeholder="{{translate('Enter E-Mail')}}" value="{{old('email')}}">
                                    @error('email') 
                                        <span class="text-danger">
                                            {{ $message }}
                                        </span> 
                                    @enderror
                                </div>
                            </div>
                            <div class="row mb-3">
                                <div class="col-lg-4">  
                                    <label for="facebook_id" class="form-label">{{translate("Facebook Username")}}</label>
                                </div>
                                <div class="col-lg-8">
                                    <input type="text" name="facebook_id" class="form-control" placeholder="{{translate('Facebook Username')}}" value="{{old('facebook_id')}}">
                                </div>
                            </div>
                            <div class="row mb-3">
                                <div class="col-lg-4">  
                                    <label for="instagram_id" class="form-label">{{translate("Instagram Username")}}</label>
                                </div>
                                <div class="col-lg-8">
                                    <input type="text" name="instagram_id" class="form-control" placeholder="{{translate('Enter Instagram Username')}}" value="{{old('instagram_id')}}">
                                </div>
                            </div>
                            <div class="row mb-3">
                                <div class="col-lg-4">  
                                    <label for="twitter_id" class="form-label">{{translate("Twitter Username")}}</label>
                                </div>
                                <div class="col-lg-8">
                                    <input type="text" name="twitter_id" class="form-control" placeholder="{{translate('Enter Twitter Username')}}" value="{{old('twitter_id')}}">
                                </div>
                            </div>
                            <div class="row mb-3">
                                <div class="col-lg-4">  
                                    <label for="website" class="form-label">{{translate("Website")}}</label>
                                </div>
                                <div class="col-lg-8">
                                    <input type="text" name="website" class="form-control" placeholder="{{translate('Enter Website Name')}}" value="{{old('website')}}">
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="text-end">
                                    <button type="submit" class="btn btn-primary">Add Venue</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection
@section('script')
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAtZujFZCLv_cLB0LqYyKZlaILEtttXchg"></script>
<script src="https://unpkg.com/location-picker/dist/location-picker.min.js"></script>
<script>
$(document).ready(function(){
    var lp = new locationPicker('map', {
        lat: 28.633082,
        lng: 77.219939,
      }, {
        zoom: 11
    });

    google.maps.event.addListener(lp.map, 'idle', function (event) {
    // Get current location and show it in HTML
    var location = lp.getMarkerPosition();
    $('[name="longitude"]').val(location.lng)
    $('[name="latitude"]').val(location.lat)
  });
   
})
</script>
@endsection