@extends('backend.layouts.app')
@section('content')
<div class="row">
    <div class="card-body pt-0">
        <form action="{{route('venues.update', $venue->id)}}" method="POST" enctype="multipart/form-data">
            @csrf
            @METHOD('PUT')
            <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">Edit 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" id="name" value="{{$venue->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">
                                    @if ($venue->image !== NULL)
                                    <span class="input-group-text" id="image"><img src="{{asset('uploads/venues/'. $venue->image)}}" width="30" height="30" /></span>
                                    @endif
                                    <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">{!! $venue->address !!}</textarea>
                                    @error('address') 
                                        <span class="text-danger">
                                            {{ $message }}
                                        </span> 
                                    @enderror
                                </div>
                            </div>
                            <input type="hidden" name="latitude" value="{{$venue->latitude}}">
                            <input type="hidden" name="longitude" value="{{$venue->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="{{$venue->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="{{$venue->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="{{$venue->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="{{$venue->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="{{$venue->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="{{$venue->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="{{$venue->website}}">
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="text-end">
                                    <button type="submit" class="btn btn-primary">Update</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: {{$venue->latitude}},
        lng: {{$venue->longitude}},
      }, {
        zoom: 13
    });

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