@extends('layouts.dashboard')

@section('content')
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>Add Branch</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="#">Home</a></li>
                    <li class="breadcrumb-item active">Add Branch</li>
                </ol>
            </div>
        </div>
    </div><!-- /.container-fluid -->
</section>


<section class="content">
    <div class="container-fluid">
        <div class="row">
            <!-- left column -->
            <div class="col-12 pr-0 d-flex justify-content-end">
                <button type="button" class="btn btn-sm">
                    <a href="{{ route('branch.index') }}" class="uniqbtn-btn">
                        <i class="fa fa-backward"></i>
                        <span>Back</span>
                    </a>
                </button>
            </div>
            <div class="col-md-12 mt-3">
                <!-- general form elements -->
                <div class="card">
                    <!-- <div class="card-header">
                        <div class="card-tools">

                        </div>
                    </div> -->
                    <!-- /.card-header -->
                    <!-- form start -->

                    @if (Session::has('message'))
                    <div class="col-sm-12">
                        <div class="alert  {{ Session::get('alert-class', 'alert-info') }} alert-dismissible fade show"
                            role="alert">
                            {{ Session::get('message') }}
                        </div>
                    </div>
                    @endif
                    @php $route = route('branch.add'); @endphp
                    @include('branch._form')
                </div>
                <!-- /.card -->
            </div>
            <!--/.col (left) -->
        </div>
        <!-- /.row -->
    </div><!-- /.container-fluid -->
</section>
@endsection

@push('scripts')

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCgyBWVQRs5rzEjMlWmGurrUQhnRVPXbmg&libraries=places"></script>
<script>
    function initAutocomplete() {
        // Get the input elements
        const autocompleteInput = document.getElementById('autocomplete');
        const latitudeInput = document.getElementById('latitude');
        const longitudeInput = document.getElementById('longitude');

        // Initialize Google Places Autocomplete with region restrictions
        const autocomplete = new google.maps.places.Autocomplete(autocompleteInput, {
            types: ['(regions)'],
            componentRestrictions: {
                country: "IN"
            } // Restrict to India
        });

        // Add a listener for when a place is selected
        autocomplete.addListener('place_changed', () => {
            const place = autocomplete.getPlace();

            // Check if the place has geometry (location data)
            if (place.geometry && place.geometry.location) {
                latitudeInput.value = place.geometry.location.lat();
                longitudeInput.value = place.geometry.location.lng();
            } else {
                alert('No details available for the input: ' + place.name);
            }
        });
    }

    // Initialize the autocomplete functionality
    google.maps.event.addDomListener(window, 'load', initAutocomplete);
</script>

{{-- AIzaSyCgyBWVQRs5rzEjMlWmGurrUQhnRVPXbmg --}}



@endpush