@extends('layouts.customer')

@section('title')
   Check Out
@endsection

@section('content')

<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA0y4St8UrR34p4fsCRMh0rVRDw1wqx6Qk&callback=initMap"
    type="text/javascript"></script>

@if ($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif


<meta name="csrf-token" content="{{ csrf_token() }}">

    <div class="container mt-3">
   
        <button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#addAddressModal">
 Change Address
</button>
</form>

<!-- Add Address Modal -->
<div class="modal fade" id="addAddressModal" tabindex="-1" aria-labelledby="addAddressModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addAddressModalLabel">Add or Choose Address</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <!-- Display Addresses Modal -->
                <div class="mb-3">
        <h6>Select existing address:</h6>
        @foreach($userAddresses as $address)
            <div class="mb-2">
                <input type="radio" id="address{{ $address->id }}" name="selectedAddress" value="{{ $address->id }}" required>
                <label for="address{{ $address->id }}">{{ $address->barangay }} - {{ $address->municipal }}</label>
                <button type="button" class="btn btn-danger btn-sm deleteAddressBtn" data-address-id="{{ $address->id }}">X</button>
                <meta name="csrf-token" content="{{ csrf_token() }}">

            </div>
        @endforeach
    </div>

    <!-- Edit Address Form -->
    <div id="editAddressFormContainer" style="display: none;">
        <form id="editAddressForm">
            @csrf
            <div class="mb-3">
                <label for="editBarangay" class="form-label">Barangay</label>
                <input type="text" class="form-control" id="editBarangay" name="barangay" required>
            </div>
            <div class="mb-3">
                <label for="editMunicipal" class="form-label">Municipal</label>
                <input type="text" class="form-control" id="editMunicipal" name="municipal" required>
            </div>

            <div class="mb-3">
                <label for="editSteets" class="form-label">Streets</label>
                <input type="text" class="form-control" id="editStreets" name="streets" required>
            </div>
            
            <div class="mb-3">
                <label for="editLandmark" class="form-label">Landmark</label>
                <input type="text" class="form-control" id="editLandmark" name="landmark" required>
            </div>
            
            <input type="hidden" id="editAddressId" name="address_id">
            <button type="button" class="btn btn-primary" id="updateAddressBtn">Update Address</button>
            <meta name="csrf-token" content="{{ csrf_token() }}">

        </form>
    </div>

<script>

    
  $(document).ready(function () {

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $('input[name="selectedAddress"]').change(function () {
        if ($(this).is(':checked')) {
            $('#editAddressFormContainer').show();
            var addressId = $(this).val();
            $.ajax({
                url: '/get-address/' + addressId,
                type: 'GET',
                success: function (response) {
                    $('#editBarangay').val(response.barangay);
                    $('#editMunicipal').val(response.municipal);
                    $('#editStreets').val(response.streets);
                    $('#editLdmark').val(response.landmark);

                    $('#editAddressId').val(addressId);
                },
                error: function (xhr, status, error) {
                    console.error(error);
                }
            });
        } else {
            $('#editAddressFormContainer').hide();
        }
    });
});

    $(document).ready(function () {
    // Set CSRF token for all AJAX requests
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $('.deleteAddressBtn').click(function () {
    var addressId = $(this).data('address-id');
    if (confirm('Are you sure you want to delete this address?')) {
        $.ajax({
            url: '/delete-address/' + addressId,
            type: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function (response) {
                $('#address' + addressId).remove(); 
                location.reload(); 
            },
            error: function (xhr, status, error) {
                console.error(error);
            }
        });
    }
});


$('#updateAddressBtn').click(function () {
    var addressId = $('#editAddressId').val();
    var barangay = $('#editBarangay').val();
    var municipal = $('#editMunicipal').val();
    var streets = $('#editStreets').val();
    var landmark = $('#editLandmark').val();

    $.ajax({
        url: '/update-address/' + addressId,
        type: 'PUT',
        data: {
            barangay: barangay,
            municipal: municipal,
            streets: streets


        },
        success: function (response) {
            console.log('Address updated successfully');
            location.reload(); // Reload the page
        },
        error: function (xhr, status, error) {
            console.error(error);
        }
    });
});

    });



</script>


             
                <!-- Button to choose the selected address -->
                <button type="button" class="btn btn-primary" id="selectAddressBtn">Choose Address</button>

                <hr>

                <!-- Form to add a new address -->
                <form action="{{ route('save-address') }}" method="POST" id="addAddressForm">
                    @csrf
                    <div class="mb-3">
                        <h6>Add a new address:</h6>
                    </div>
                 

                    <select name="municipal" class="form-control"  id="municipal"   id="municipalSelect" onchange="loadBarangays(this)" required>
    <option value="">Select Municipal</option>
    <option value="Baungon">Baungon</option>
    <option value="Cabanglasan">Cabanglasan</option>
    <option value="City of Malaybalay">City of Malaybalay</option>
    <option value="City of Valencia">City of Valencia</option>
    <option value="Damulog">Damulog</option>
    <option value="Dangcagan">Dangcagan</option>
    <option value="Don Carlos">Don Carlos</option>
    <option value="Impasug-ong">Impasug-ong</option>
    <option value="Kadingilan">Kadingilan</option>
    <option value="Kalilangan">Kalilangan</option>
    <option value="Kibawe">Kibawe</option>
    <option value="Kitaotao">Kitaotao</option>
    <option value="Lantapan">Lantapan</option>
    <option value="Libona">Libona</option>
    <option value="Manolo">Manolo</option>

    <option value="Malitbog">Malitbog</option>
    <option value="Maramag">Maramag</option>
    <option value="Quezon">Quezon</option>
    <option value="San Fernando">San Fernando</option>
    <option value="Sumilao">Sumilao</option>
    <option value="Talakag">Talakag</option></select>


    <label for="barangay">Barangay</label>
                        
                        <select name="barangay" class="form-control" id="barangaySelect" required>
                                    <option value="">Select Barangay</option>
                                </select>

                                <div class="mb-3">
                <label for="streets" class="form-label">Streets</label>
                <input type="text" class="form-control" id="streets" placeholder="Street Name, Building, House No." name="streets" required>
            </div>

            <div class="mb-3">
                <label for="landmark" class="form-label">Landmark</label>
                <input type="text" class="form-control" id="landmark" placeholder="Landmark (optional)" name="landmark">
            </div>

                    <div id="map" style="height: 300px;"></div>

                    <input type="hidden" name="latitude" id="latitude" class="form-control" placeholder="Latitude" readonly required>
                    <input type="hidden" name="longitude" id="longitude" class="form-control" placeholder="Longitude" readonly required>

                    <button type="submit" class="btn btn-success">Save New Address</button>
                </form>
            </div>
        </div>
    </div>
</div>


<form action="{{url('place-order')}}" method="POST">
    @csrf


    @foreach ($cartitem->groupBy('shop_id') as $shopId => $items)
    @php
                $sellerTotal = 0;
            @endphp

<div class="row">
    <div class="col-md-7">
        <div class="card border-0">
            <div class="card-body">
                <h5>Delivery Address</h5>
                <hr>
            <b>  {{Auth::user()->name}}  {{Auth::user()->last_name}} ({{Auth::user()->phone}})</b>
           <br>
            <style>
    .styled-label {
        border: none;
        background-color: transparent;
        padding: 0;
        font-size: 1rem;
        font-weight: normal;
    }
</style>
<label for="hidden_barangay">Barangay:</label>
@if(\App\Models\Addresses::where('user_id', Auth::user()->id)->where('is_active', 1)->exists())
    <input type="text" name="barangay" id="hidden_barangay" class="styled-label" value="{{ \App\Models\Addresses::where('user_id', Auth::user()->id)->where('is_active', 1)->value('barangay') }}">
@else
    <input type="text" name="barangay" id="hidden_barangay" class="styled-label" value="{{ Auth::user()->barangay }}">
@endif

<label for="hidden_municipal">Municipal:</label>
@if(\App\Models\Addresses::where('user_id', Auth::user()->id)->where('is_active', 1)->exists())
    <input type="text" name="municipal" id="hidden_municipal" class="styled-label" value="{{ \App\Models\Addresses::where('user_id', Auth::user()->id)->where('is_active', 1)->value('municipal') }}" readonly>
@else
    <input type="text" name="municipal" id="hidden_municipal" class="styled-label" value="{{ Auth::user()->municipal }}">
@endif

<div>
    <label for="hidden_streets">Street:</label>
    @if(\App\Models\Addresses::where('user_id', Auth::user()->id)->where('is_active', 1)->exists())
        <input type="text" name="streets" id="hidden_streets" class="styled-label"  value="{{ \App\Models\Addresses::where('user_id', Auth::user()->id)->where('is_active', 1)->value('streets') }}" readonly>
        @else
    <input type="text" name="street" id="hidden_streets" class="styled-label" value="{{ Auth::user()->streets }}">
        @endif
</div>

<div>
    <label for="hidden_landmark">Landmark:</label>
    @if(\App\Models\Addresses::where('user_id', Auth::user()->id)->where('is_active', 1)->exists())
        <input type="text" name="landmark" id="hidden_landmark" class="styled-label"  value="{{ \App\Models\Addresses::where('user_id', Auth::user()->id)->where('is_active', 1)->value('landmark') }}" readonly>
        @else
    <input type="text" name="landmark" id="hidden_landmark" class="styled-label" value="{{ Auth::user()->landmark }}">
        @endif
</div>

<div>
    @if(\App\Models\Addresses::where('user_id', Auth::user()->id)->where('is_active', 1)->exists())
        <input type="hidden" name="lat" id="hidden_latitude" class="styled-label"  value="{{ \App\Models\Addresses::where('user_id', Auth::user()->id)->where('is_active', 1)->value('latitude') }}" readonly>
        @else
    <input type="hidden" name="lat" id="hidden_latitude" class="styled-label" value="{{ Auth::user()->latitude }}">
        @endif
</div>

<div>
    @if(\App\Models\Addresses::where('user_id', Auth::user()->id)->where('is_active', 1)->exists())
        <input type="hidden" name="long" id="hidden_longitude" class="styled-label"  value="{{ \App\Models\Addresses::where('user_id', Auth::user()->id)->where('is_active', 1)->value('longitude') }}" readonly>
        @else
    <input type="hidden" name="long" id="hidden_longitude" class="styled-label" value="{{ Auth::user()->longitude }}">
        @endif
</div>


<script>
    $(document).ready(function () {
        $('#selectAddressBtn').click(function () {
            var selectedAddressId = $('input[name="selectedAddress"]:checked').val();

            if (selectedAddressId) {
                // Update the is_active field of the selected address to 1 and others to 0 using AJAX
                $.ajax({
                    url: '/update-address-active/' + selectedAddressId,
                    type: 'GET',
                    success: function () {
                        // Fetch details of the selected address using AJAX
                        $.ajax({
                            url: '/get-address-details/' + selectedAddressId,
                            type: 'GET',
                            success: function (response) {
                                // Set the default values for barangay, municipal, and streets inputs
                                $('#barangay').val(response.barangay);
                                $('#municipal').val(response.municipal);
                                $('#streets').val(response.streets);
                                $('#landmark').val(response.landmark);


                                // Change the display of the address
                                $('#display-address').html(response.barangay + ', ' + response.municipal + ', ' + response.streets + ', ' +  response.landmark);

                                // Reload the page
                                location.reload();
                            },
                            error: function (xhr, status, error) {
                                console.error(error);
                            }
                        });

                        $('#addAddressModal').modal('hide');
                    },
                    error: function (xhr, status, error) {
                        console.error(error);
                    }
                });
            } else {
                alert('Please select an address');
            }
        });
    });
</script>


<!-- <input type="text" name="selected_address_id" id="selected_address_id" value=""> -->

<script>
$(document).ready(function () {
    $('#selectAddressBtn').click(function () {
        var selectedAddressId = $('input[name="selectedAddress"]:checked').val();

        if (selectedAddressId) {
            // Update the selected_address_id input field with the selected address id
            $('#selected_address_id').val(selectedAddressId);

            // Fetch details of the selected address using AJAX
            $.ajax({
                url: '/get-address-details/' + selectedAddressId,
                type: 'GET',
                success: function (response) {
                    // Populate the dropdowns with the fetched data
                    $('#selected_barangay').html('<option value="' + response.barangay + '">' + response.barangay + '</option>');
                    $('#selected_municipal').html('<option value="' + response.municipal + '">' + response.municipal + '</option>');
                    $('#selected_streets').html('<option value="' + response.streets + '">' + response.streets + '</option>');
                    $('#selected_landmark').html('<option value="' + response.landmark + '">' + response.landmark + '</option>');

                    $('#selected_latitude').html('<option value="' + response.latitude + '">' + response.latitude + '</option>');
                    $('#selected_longitude').html('<option value="' + response.longitude + '">' + response.longitude + '</option>');

                    // Set the value of the hidden input fields with the selected barangay, municipal, latitude, and longitude values
                    $('#hidden_barangay').val(response.barangay || ''); // Use default value if null
                    $('#hidden_municipal').val(response.municipal || ''); // Use default value if null
                    $('#hidden_streets').val(response.streets || ''); // Use default value if null
                    $('#hidden_landmark').val(response.landmark || ''); // Use default value if null

                    $('#hidden_latitude').val(response.latitude || ''); // Use default value if null
                    $('#hidden_longitude').val(response.longitude || ''); // Use default value if null

                  
                },
                error: function (xhr, status, error) {
                    console.error(error);
                }
            });

            $('#addAddressModal').modal('hide');
        } else {
            alert('Please select an address');
        }
    });
});

</script>






                             

                            
                            
                            </div>
                    </div>
                </div>
      

@php
    $grandTotal = 0; // Initialize grand total
    $currentSellerId = null; // Initialize current seller ID
@endphp

<div class="col-md-5">
    <div class="card border-0">
        <div class="card-body">
            <h5>Order Detail</h5>
            <hr>
            @php
                $sellerTotals = [];
                $grandTotal = 0;
            @endphp
            @foreach ($cartitem as $item)
                @if ($item->status == 1)
                    @php
                        $shopId = $item->products->shop->user_id;
                        $sellerName = $item->products->shop->shop_name;
                        $sellerEmail = $item->products->shop->email;
                        $sellerMunicipal = $item->products->shop->municipal;
                        $sellerBarangay = $item->products->shop->barangay;
                        $sellerPhone = $item->products->shop->phone;


                        $sellerTotal = $item->status == 1 ? $item->products->product_prices->where('is_active', 1)->first()->price * $item->prod_qty : 0;
                        $shippingFee = $item->products->shipping_fee;

                        if (!isset($sellerTotals[$shopId])) {
                            $sellerTotals[$shopId] = [
                                'name' => $sellerName,
                                'email' => $sellerEmail,
                                'municipal' => $sellerMunicipal,
                                'barangay' => $sellerBarangay,
                                'phone' => $sellerPhone,

                                'total' => 0,
                            ];
                        }

                        $sellerTotals[$shopId]['total'] += $sellerTotal;
                        $grandTotal += $sellerTotal;
                    @endphp
                @endif
            @endforeach
            @foreach ($sellerTotals as $shopId => $sellerData)
    <tr>
        <th colspan="4">Seller Details:</th>
    </tr>
    <tr>
        <td colspan="4"><strong>{{ $sellerData['email'] }}</strong> | <strong>{{ $sellerData['phone'] }}</strong> | <strong>{{ $sellerData['barangay'] }}, {{ $sellerData['municipal'] }}</strong></td>
    </tr>

    
    <table class="table table-stripped">
        <thead>
            <tr>
                <th>Shop</th>
                <th>Product Name</th>
                <th>Quantity</th>
                <th>Price</th>
            </tr>
        </thead>
        <tbody>
        @php
            $sellerSubtotal = 0;
            $isWarning = false;
        @endphp
        @foreach ($cartitem as $item)
            @if ($item->status == 1 && $item->products->shop->user_id == $shopId)
                @php
                    // Get the authenticated user's municipal from addresses table where is_active is 1
                    $authUserMunicipal = \App\Models\Addresses::where('user_id', Auth::user()->id)
                        ->where('is_active', 1)
                        ->value('municipal');

                    // Check if the seller's municipal is not the same as the authenticated user's municipal
                    $isWarning = $item->products->shop->municipal !== $authUserMunicipal;
                @endphp
                <tr>
                    <td>{{ $sellerData['name'] }}</td>
                    <td>{{ $item->products->name }}</td>
                    <td>{{ $item->prod_qty }}</td>
                    <td>
                    @php
                        $activePrice = optional($item->products->product_prices()->where('is_active', 1)->latest('created_at')->first());
                    @endphp
                    @if ($activePrice)
                        {{ number_format($activePrice->price, 2, '.', ',') }}
                    @endif
                </td>

                </tr>
                @php
                $activePrice = optional($item->products->product_prices()->where('is_active', 1)->latest('created_at')->first());
                $sellerSubtotal += $activePrice ? $activePrice->price * $item->prod_qty : $item->products->price * $item->prod_qty;

                @endphp
            @endif
        @endforeach
        <tr>
            <td colspan="3">Total Amount:</td>
            <td id="total_price_{{ $shopId }}">₱{{ number_format($sellerSubtotal, 2, '.', ',') }}</td>
        </tr>
        <tr>
            <td colspan="3">Shipping Fee:</td>
            <td id="shipping_fee_{{ $shopId }}">₱{{ number_format($shippingFee, 2, '.', ',') }}</td>
        </tr>
        <tr>
            <td colspan="3">Grand Total:</td>
            <td id="seller_grand_total_{{ $shopId }}">₱{{ number_format($sellerSubtotal + $shippingFee, 2, '.', ',') }}</td>
        </tr>
        <tr>
            <td colspan="4">
                <label for="delivery_option_{{ $shopId }}">Mode Of Shipment</label>
                <br>
                <label><input type="radio" name="delivery_option_{{ $shopId }}" value="1" checked> For Pick up</label>
                <br>
                <label><input type="radio" name="delivery_option_{{ $shopId }}" value="2" {{ $isWarning ? 'disabled' : '' }}> For Delivery</label>
                <!-- Hidden input field to store the selected delivery option -->
                <input type="hidden" name="delivery_option_{{ $shopId }}" id="delivery_option_{{ $shopId }}_input" value="1">
            </td>
        </tr>
        @if ($isWarning)
            <tr>
                <td colspan="4" class="text-danger">Warning: Seller's municipal is different from yours. Items are for pick up only.</td>
            </tr>
        @endif
        </tbody>
    </table>

    @php
        // Fetch shipping fee from delivery_rates table where is_active=1
        $shippingRate = \App\Models\DeliveryRate::where('is_active', 1)
                            ->value('delivery_fee');
        $shippingFee = $shippingRate ? $shippingRate : 0;
    @endphp

    <script>
        $(document).ready(function () {
            $('input[type="radio"][name^="delivery_option_"]').change(function () {
                var shopId = $(this).attr('name').replace('delivery_option_', '');
                var selectedValue = $(this).val();
                $('#delivery_option_' + shopId + '_input').val(selectedValue);

                var currentSubtotal = parseFloat($('#total_price_' + shopId).text().replace('₱', '').replace(',', ''));

                if (selectedValue === '2') {
                    var newTotal = currentSubtotal + {{ $shippingFee }};
                    $('#shipping_fee_' + shopId).text('₱{{ number_format($shippingFee, 2, '.', ',') }}');
                    $('#seller_grand_total_' + shopId).text('₱' + newTotal.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,'));
                } else {
                    $('#shipping_fee_' + shopId).text('₱0.00');
                    $('#seller_grand_total_' + shopId).text('₱' + currentSubtotal.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,'));
                }
            });
        });
    </script>

<style>
    /* Increase the size of the radio buttons */
    input[type="radio"] {
        transform: scale(1.8); /* Adjust the scale factor as needed */
        margin-right: 10px; /* Add some spacing between the radio button and the label */
    }

    /* Adjust the font size of the labels */
    label {
        font-size: 17px; /* Set the desired font size */
    }
</style>


      
    </tbody>
</table>
@endforeach 


    <!-- Place Order button -->
    <button type="submit" class="btn btn-primary">Place Order</button>
</form>

</div>

@endforeach

                </div>
            </div>
        </form>
    </div>
@endsection


@section('css')

@section('css')
<style>
/* Set the size of the div element that contains the map */
#map {
  height: 350px;
  /* The height is 400 pixels */
  width:100%;
  /* The width is the width of the web page */


}
</style>
<center>

<br>
<br>
<div class="py-5">
    


</center> 


</div> 
 <div class="container mt-10"> 
</div>

 
<style>
.checkout-form input {
    font-size: 1rem;
    padding: 10px;
    font-weight: 400;
}
    
.checkout-form label {
    font-size: .9rem;
    font-weight: 700;
}
</style>


<script>$(document).ready(function () {
    $('#selectAddressBtn').click(function () {
        // Check if any address is selected
        var selectedAddressId = $('input[name="selectedAddress"]:checked').val();

        if (selectedAddressId) {
            // Fetch details of the selected address using AJAX or any method you prefer
            var selectedAddressDetails = getAddressDetails(selectedAddressId);

            $('#barangay').val(selectedAddressDetails.barangay);
            $('#municipal').val(selectedAddressDetails.municipal);

            refreshModal();

            $('#addAddressModal').modal('hide');
        } else {
            alert('Please select an address');
        }
    });

    function getAddressDetails(addressId) {
        return {
            barangay: 'Sample Barangay',
            municipal: 'Sample Municipal',
        };
    }

    function refreshModal() {
        // Implement a function to refresh dynamic elements in the modal
        // For example, you may need to update the map or other elements
    }
});
</script>

                <!-- Add this script tag after the modal content in your HTML file -->
                <script>

var map;
var markers = [];

function initMap() {
  var haightAshbury = {lat: 7.86319, lng: 125.170874};

  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 9,                        // Set the zoom level manually
    center: haightAshbury,
    mapTypeId: 'roadmap'
  });

  // This event listener will call addMarker() when the map is clicked.
  map.addListener('click', function(event) {
    if (markers.length >= 1) {
      deleteMarkers();
    }

    addMarker(event.latLng);
    document.getElementById('latitude').value = event.latLng.lat();
    document.getElementById('longitude').value = event.latLng.lng();
    geocodeLatLng(event.latLng);
  });
  
  var locationButton = document.createElement('button');
  locationButton.textContent = 'Get Current Location';
  locationButton.classList.add('custom-map-control-button');
  map.controls[google.maps.ControlPosition.TOP_RIGHT].push(locationButton);

  // This event listener will call getCurrentLocation() when the button is clicked.
  locationButton.addEventListener('click', function() {
    getCurrentLocation();
  });
}
 
function addMarker(location) {
  clearMarkers();

  var marker = new google.maps.Marker({
    position: location,
    map: map
    
  });
  markers.push(marker);
}

function setMapOnAll(map) {
  for (var i = 0; i < markers.length; i++) {
    markers[i].setMap(map);
  }
}

// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
  setMapOnAll(null);
}

// Deletes all markers in the array by removing references to them.
function deleteMarkers() {
  clearMarkers();
  markers = [];
}

// Geocode the latitude and longitude of the marker to display the address.
function geocodeLatLng(latLng) {
  var geocoder = new google.maps.Geocoder();
  geocoder.geocode({'location': latLng}, function(results, status) {
    if (status === 'OK') {
      if (results[0]) {
        document.getElementById('address').innerHTML = results[0].formatted_address;
      } else {
        document.getElementById('address').innerHTML = 'No results found';
      }
    } else {
      document.getElementById('address').innerHTML = 'Geocoder failed due to: ' + status;
    }
  });
}

// Get the current location and center the map on it
function getCurrentLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var currentLocation = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };
      map.setCenter(currentLocation);
      addMarker(currentLocation);
      document.getElementById('latitude').value = currentLocation.lat;
      document.getElementById('longitude').value = currentLocation.lng;
      geocodeLatLng(currentLocation);
    }, function() {
      handleLocationError(true, infoWindow, map.getCenter());
    });
  } else {
    handleLocationError(false, infoWindow, map.getCenter());
  }
}

// Handle errors when getting the current location
function handleLocationError(browserHasGeolocation, infoWindow, currentLocation) {
  var errorMessage = browserHasGeolocation ?
                        'Error: The Geolocation service failed.' :
                        'Error: Your browser doesn\'t support geolocation.';
  console.error(errorMessage);
}

</script>

<script>
   function loadBarangays(municipalSelect) {
        var barangaySelect = document.getElementById('barangaySelect');
        var selectedMunicipal = municipalSelect.value;

        // Clear existing options
        barangaySelect.innerHTML = '<option value="">Select Barangay</option>';

        var barangaysByMunicipal = {
          'Baungon': ['Balintad', 'Buenavista', 'Danatag', 'Kalilangan', 'Lacolac', 'Langaon', 'Liboran', 'Lingating', 'Mabuhay', 'Mabunga', 'Nicdao', 'Imbatug (Poblacion)', 'Pualas', 'Salimbalan', 'San Vicente', 'San Miguel'],

          'Cabanglasan': ['Anlogan', 'Cabulohan', 'Canangaan', 'Capinonan', 'Dalacutan', 'Freedom', 'Iba', 'Imbatug', 'Jasaan', 'Lambangan', 'Mandaing', 'Mandahikan', 'Mauswagon', 'Paradise', 'Poblacion'],

    'City of Malaybalay': ['Bangcud', 'Barangay 1 (Poblacion)', 'Barangay 2 (Poblacion)', 'Barangay 3 (Poblacion)', 'Barangay 4 (Poblacion)', 'Barangay 5 (Poblacion)', 'Barangay 6 (Poblacion)', 'Barangay 7 (Poblacion)', 'Barangay 8 (Poblacion)', 'Barangay 9 (Poblacion)', 'Barangay 10 (Poblacion)', 'Barangay 11 (Poblacion)', 'Barangay 12 (Poblacion)', 'Barangay 13 (Poblacion)', 'Barangay 14 (Poblacion)', 'Barangay 15 (Poblacion)', 'Barangay 16 (Poblacion)', 'Cabangahan', 'Caburacanan', 'Canayan', 'Capitan Angel', 'Casisang', 'Dao', 'Imbayao', 'Indalasa', 'Kalasungay', 'Kibalabag', 'Laguitas', 'Linabo', 'Magsaysay', 'Managok', 'Mapayag', 'Mapulo', 'Matin-ao', 'Merangeran', 'Mibantang', 'Patpat', 'Saint Peter', 'San Jose', 'San Martin', 'Silae', 'Simaya', 'Sinanglanan', 'Sinayawan', 'Sumpong', 'Zamboanguita'],

    'City of Valencia': ['Bagontaas', 'Banlag', 'Barobo', 'Batangan', 'Catumbalon', 'Colonia', 'Concepcion', 'Dagat-Kidavao', 'Guinoyuran', 'Kahapunan', 'Lilingayon', 'Lourdes', 'Lumbo', 'Lumayao', 'Lurogan', 'Mabuhay', 'Mailag', 'Maapag', 'Mount Nebo', 'Nabago', 'Poblacion', 'San Carlos', 'San Isidro', 'Sinabuagan', 'Sinayawan', 'Sugod', 'Tongantongan', 'Tugaya', 'Vintar'],
    'Damulog': ['Aludas', 'Angga-an', 'Dagumba-an', 'Kinapat', 'Kiraon', 'Kitingting', 'Lagandang', 'Macapari', 'Maican', 'Migcawayan', 'New Compostela', 'Old Damulog', 'Omonay', 'Poblacion (New Damulog)', 'Pocopoco', 'Sampagar', 'San Isidro'],
'Dangcagan': ['Barongcot', 'Bugwak', 'Dolorosa', 'Kapalaran', 'Kianggat', 'Lourdes', 'Macarthur', 'Miaray', 'Migcuya', 'New Visayas', 'Osmeña', 'Poblacion', 'Sagbayan', 'San Vicente'],
'Don Carlos': ['Balaoro', 'Baroy', 'Bershiba', 'Bocboc', 'Buyot', 'Cabadiangan', 'Calaocalao', 'Don Carlos Norte', 'Embayao', 'Kalubihon', 'Kasigkot', 'Kawilihan', 'Kiara', 'Kibatang', 'Mahayahay', 'Manlamonay', 'Maraymaray', 'Mauswagon', 'Minsalagan', 'New Nongnongan (Masimag)', 'New Visayas', 'Old Nongnongan', 'Pinamaloy', 'Don Carlos Sur (Poblacion)', 'Pualas', 'San Antonio East', 'San Antonio West', 'San Francisco', 'San Nicolas (Banban)', 'San Roque', 'Sinangguyan', 'Bismartz'],
'Impasug-ong': ['Bontongon', 'Bulonay', 'Capitan Bayong', 'Cawayan', 'Dumalaguing', 'Guihean', 'Hagpa', 'Impalutao', 'Kalabugao', 'Kibenton', 'La Fortuna', 'Poblacion', 'Sayawan'],
'Kadingilan': ['Bagor', 'Balukbukan', 'Be alive', 'Binoongan', 'Cabadiangan', 'Get better', 'Guided', 'Kibalagon', 'Kiulom', 'Lazy', 'Maliano', 'New Town', 'Pay ace', 'Poblacion', 'Salvation', 'San Andres', 'Sibonga'],
'Kalilangan': ['Baborawon', 'Bangbang', 'Canituan', 'Kibaning', 'Kinura', 'Lampanusan', 'Malinao', 'Ninoy Aquino', 'Pamotolon (Pamotdon)', 'Poblacion', 'Public', 'San Vicente Ferrer', 'West Poblacion'],
'Kibawe': ['Balintawak', 'Bukang Liwayway', 'Cagawasan', 'East Kibawe (Poblacion)', 'Gutapol', 'Kiorao', 'Kisawa', 'Labuagon', 'Magsaysay', 'Marapangi', 'Mascariñas', 'Natulongan', 'New Kidapawan', 'Old Kibawe', 'Palma', 'Pinamula', 'Romagooc', 'Sampaguita', 'Sanipon', 'Spring', 'Talahiron', 'Tumaras', 'West Kibawe (Poblacion)'],
'Kitaotao': ['Bagong Silang', 'Balangigay', 'Balaoro', 'Bershiba', 'Bobong', 'Bolocaon', 'Cabalantian', 'Calapaton', 'Digongan', 'Kiabo', 'Kahusayan', 'Kalumihan', 'Kauyonan', 'Kimolong', 'Kitaihon', 'Kitobo', 'Magsaysay', 'Malobalo', 'Metebagao', 'Napalico', 'Pagan', 'Panganan', 'Poblacion', 'Salvation', 'San Andres', 'San Isidro', 'San Lorenzo', 'Santo Rosario', 'Sinuda (Simod)', 'Tandong', 'Tawas', 'White Kulaman', 'Kiulom', 'Binoongan', 'Kipilas', 'East Dalurong', 'West Dalurong'],
'Lantapan': ['Alanib', 'Baclayon', 'Balila', 'Bantuanon', 'Basak', 'Bugcaon', 'Capitan Juan', 'Cawayan', 'Ka-atoan (Kaatuan)', 'Kibangay', 'Kulasihan', 'Poblacion', 'Songco', 'Victory'],
'Libona': ['Capihan', 'Crossing', 'Gango', 'Kiliog', 'Kinawe', 'Laturan', 'Maambong', 'Nangka', 'Palabucan', 'Poblacion', 'Pongol', 'San Jose', 'Santa Fe', 'Sil-ipon'],
'Malitbog': ['Kalingking', 'Kiabo', 'Mindagat', 'Omagling', 'Patpat', 'Poblacion', 'Sampiano', 'San Luis', 'Siloo', 'Santa Inez', 'Sumalsag'],
'Manolo': ['Agusan Canyon', 'Alae', 'Dahilayan', 'Dalirig', 'Damilag', 'Diclum', 'Guilang-guilang', 
'Kalugmanan', 'Kalugmanan', 'Lindaban', 'Lingion', 'Lunocan', 'Maluko', 'Mambatangan', 
'Mampayag', 'Mantibugao', 'Minsuro', 'San Miguel', 'Sankanan', 'Santiago', 'Santo Niño', 'Tankulan', 'Ticala'],
'Maramag': ['Anahawon', 'Base Camp', 'Bayabason', 'Camp 1', 'Colambugon', 'Dagumba-an', 'Danggawan', 'Dologon', 'Kisanday', 'Kuya', 'La Roxas', 'Panadtalan', 'Panalsalan', 'North Poblacion', 'South Poblacion', 'San Miguel', 'San Roque', 'Tubigon', 'Kiharong', 'Bagongsilang'],
'Quezon': ['Butong', 'Cebole', 'Delapa', 'Dumalama', 'C-Handumanan', 'Cawayan', 'Kiburiao', 'Kipaypayon', 'Lagua', 'Libertad', 'Linabo', 'Lipa', 'Lumintao', 'Magsaysay', 'Mahayag', 'Manuto', 'Merangeran', 'Mibantang', 'Minongan', 'Minsalirac', 'Minsamongan', 'Paitan', 'Palacapao', 'Pinilayan', 'Poblacion (Kiokong)', 'Puntian', 'Salawagan', 'San Isidro', 'San Jose', 'San Roque', 'Santa Cruz', 'Santa Filomena'],
'San Fernando': ['Bancasi', 'Bongabong', 'Cananga', 'Cogonan', 'Dalagsaan', 'Mabuhay', 'Poblacion', 'Sapong', 'Tigpanaloc', 'Tugbungan'],
'Sumilao': ['Kisolon', 'Culasi', 'Licoan', 'Lupiagan', 'Ocasion', 'Puntian', 'San Roque', 'San Vicente', 'Poblacion', 'Vista Villa'],
'Talakag': ['Basak', 'Baylanan', 'Cacaon', 'Colawingon', 'Cosina', 'Dagumbaan', 'Dagundalahon', 'Dominorog', 'Indulang', 'Lantud', 'Liguron', 'Lingi‑on', 'Lirongan', 'Miarayon', 'Sagaran', 'Salucot', 'San Antonio', 'San Isidro', 'San Miguel', 'San Rafael', 'Tagbak', 'Tikalaan'],

            
            // Add more cities and their corresponding barangays as needed
        };

        // Populate barangay options based on selected municipal
        if (selectedMunicipal in barangaysByMunicipal) {
            var barangays = barangaysByMunicipal[selectedMunicipal];
            for (var i = 0; i < barangays.length; i++) {
                var option = document.createElement('option');
                option.value = barangays[i];
                option.textContent = barangays[i];
                barangaySelect.appendChild(option);
            }
        }
    }
</script>