@extends('layouts.app')
@section('content')
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>Shows Detail</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="#">Shows</a></li>
                        <li class="breadcrumb-item active">Shows Detail</li>
                    </ol>
                </div>
            </div>
        </div>
    </section>

    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    @if (session('success') || session('error'))
                        <div class="alert {{ session('success') ? 'alert-success' : 'alert-danger' }}">
                            {{ session('success') ?? session('error') }}
                        </div>
                    @endif
                    <div class="card card-primary">
                        <form method="post" action="{{ route('admin.shows.store') }}" enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" name="status">
                            <input type="hidden" name="highlight_status" value="1">
                            <input type="hidden" id="latitude" name="latitude" value="{{ old('latitude') }}">
                            <input type="hidden" id="longitude" name="longitude" value="{{ old('longitude') }}">
                            <div class="card-body">
                                <div class="form-group">
                                    <label for="link">Vibe</label>
                                    <select class="form-control" id="link" name="vibe">
                                        <option value="">Select Vibe</option>
                                        @foreach ($vibe as $val)
                                            <option value="{{ $val->id }}">
                                                {{ $val->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('vibe')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="form-group">
                                    <label for="title">Name</label>
                                    <input type="text" class="form-control" id="title" name="name"
                                        value="{{ old('name') }}">
                                    @error('name')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label for="instagram">Instagram</label>
                                    <input type="url" class="form-control" name="instagram"
                                        value="{{ old('instagram') }}">
                                    @error('instagram')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="form-group">
                                    <label for="facebook">Facebook</label>
                                    <input type="url" class="form-control" name="facebook" id="facebook"
                                        value="{{ old('facebook') }}">
                                    @error('facebook')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="form-group">
                                    <label for="youtube">YouTube</label>
                                    <input type="url" class="form-control" name="youtube" id="youtube"
                                        value="{{ old('youtube') }}">
                                    @error('youtube')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="form-group">
                                    <label for="tiktok">TikTok</label>
                                    <input type="url" class="form-control" name="tiktok" id="tiktok"
                                        value="{{ old('tiktok') }}">
                                    @error('tiktok')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="form-group">
                                    <label for="bio">Bio</label>
                                    <textarea type="text" class="form-control" name="bio" id="bio">{{ old('bio') }}</textarea>
                                    @error('bio')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="form-group">
                                    <label for="location">Address</label>
                                    <input type="text" class="form-control" name="address" id="location" value="{{ old('address') }}">
                                </div>

                                <div class="form-group">
                                    <label for="map_location">Map Location</label>
                                    <input type="text" class="form-control" name="map_location" id="map_location" value="{{ old('map_location') }}">
                                </div>

                                <div class="form-group">
                                    <label for="img1">Image 1</label>
                                    <input type="file" class="form-control" name="img1" id="img1">
                                </div>

                                <div class="form-group">
                                    <label for="img2">Image 2</label>
                                    <input type="file" class="form-control" name="img2" id="img2">
                                </div>

                                <div class="form-group">
                                    <label for="img3">Image 3</label>
                                    <input type="file" class="form-control" name="img3" id="img3">
                                </div>

                                <div class="form-group">
                                    <label for="profile_img">Profile Photo</label>
                                    <input type="file" class="form-control" name="profile_img" id="profile_img">
                                    @error('profile_img')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                                </div>

                            </div>
                            <div class="card-footer">
                                <button type="submit" class="btn btn-primary">Submit</button>
                            </div>
                        </form>

                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection
@push('page_scripts')
    <script
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAAlsWW4P_jWEKbCBfW64LRQq_ZgPX8zA8&libraries=places&callback=initAutocomplete"
        async defer></script>
    <script>
        function initAutocomplete() {
            const locationInput = document.getElementById("location-input");

            // Initialize autocomplete for the location input
            const locationAutocomplete = new google.maps.places.Autocomplete(locationInput, {
                types: ["geocode"], // Allow only geocoded addresses
                componentRestrictions: { country: "us" } // Restrict to US locations
            });

            const latInput = document.getElementById("latitude");
            const lngInput = document.getElementById("longitude");

            // Listen for the place_changed event
            locationAutocomplete.addListener("place_changed", function () {
                const selectedPlace = locationAutocomplete.getPlace();

                if (selectedPlace.geometry) {
                    const lat = selectedPlace.geometry.location.lat();
                    const lng = selectedPlace.geometry.location.lng();

                    // Set latitude and longitude in hidden inputs
                    latInput.value = lat;
                    lngInput.value = lng;

                    console.log("Latitude:", lat, "Longitude:", lng);
                } else {
                    console.log("No geometry available for the selected place.");
                }
            });

            // Prevent form submission on Enter
            locationInput.addEventListener("keydown", function (event) {
                if (event.key === "Enter") {
                    event.preventDefault();
                }
            });
        }

        // Initialize the autocomplete after DOM is loaded
        document.addEventListener('DOMContentLoaded', function () {
            initAutocomplete();
        });
    </script>
@endpush