@extends('layouts.frontend.website')

@section('content')

<section class="space-80 bg-line">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-7">
       <div  class="pb-3">
                <div class="form">
                <form action="{{ route('frontend.post.contact') }}" method="post">
                            @csrf
                            <h2 class="white text-center mb-4">Contact Us</h2>
                            @if(session('success'))
                            <div class="alert alert-success mt-4" role="alert">
                                {{ session('success') }}
                            </div>
                            @endif
                            <div class="mb-3">
                                <input type="text" class="form-control @error('name') is-invalid @enderror" placeholder="Name" name="name" value="{{ old('name') }}">
                                @error('name')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="mb-3">
                                <input type="text" class="form-control @error('email') is-invalid @enderror" placeholder="Email Address" name="email" value="{{ old('email') }}">
                                @error('email')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="mb-3">
                                <input type="text" class="form-control @error('phone') is-invalid @enderror" placeholder="Phone No" name="phone" value="{{ old('phone') }}">
                                @error('phone')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="mb-3">
                                <input type="text" class="form-control @error('location') is-invalid @enderror" placeholder="Location" name="location" id="location" value="{{ old('location') }}">
                                @error('location')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="mb-3">
                                <input type="text" name="vehicle_name" class="form-control @error('vehicle_name') is-invalid @enderror" placeholder="Vehicle Name" name="vehicle_name" value="{{ old('vehicle_name') }}">
                                @error('vehicle_name')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="mb-3">
                                <textarea class="form-control @error('description') is-invalid @enderror" placeholder="Description" name="description">{{ old('description') }}</textarea>
                                @error('description')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <input type="hidden" id="longitude" name="longitude">
                            <input type="hidden" id="latitude" name="latitude"> 

                            <div class="text-center"><button type="submit" class="btn btn-default btn-lg">Contact Us</button>

                            </div>
                        </form>
                </div>
            </div>
        </div>
        </div>
    </div>
 </section>

 <script>
        document.addEventListener('DOMContentLoaded', function () {
            let input = document.getElementById('location');
            let autocomplete = new google.maps.places.Autocomplete(input);

            autocomplete.addListener('place_changed', function () {
                let place = autocomplete.getPlace();

                if (!place.geometry) {
                    console.log("No location details available");
                    return;
                }

                // Set values in the input fields
                document.getElementById('latitude').value = place.geometry.location.lat();
                document.getElementById('longitude').value = place.geometry.location.lng();
            });
        });
    </script>

<!-- Load Google Places API -->
<script src="https://maps.googleapis.com/maps/api/js?key={{ env('GOOGLE_PLACES_API_KEY') }}&libraries=places"></script>

 @endsection