@extends('layouts.software')
@section('body')

<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <h6 class="card-title mb-4 titlcust">Location Master</h6>
                    </div>
                </div>
                <form action="{{ url('software/masters/location/update/' . $locations->id) }}" class="outer-repeater" method="POST">
                    @csrf
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="control-label">Select Country</label>
                                <select id="country" class="form-control select2" name="country">
                                    <option value="">Select Country</option>
                                    <!-- Dynamic Countries will be appended here -->
                                </select>
                                @error('country')
                                <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="control-label">Select City</label>
                                <select id="city" class="form-control select2" name="city">
                                    <option value="">Select City</option>
                                    <!-- Dynamic Cities will be appended here -->
                                </select>
                                @error('city')
                                <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="form-group">
                                <label>Area</label>
                                <input class="form-control" type="text" name="area" value="{{ old('area', $locations->area) }}">
                                @error('area')
                                <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <button class="btn btn-cust1 float-right" type="submit">Update Location</button>
                </form>
            </div>
        </div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
    const apiToken = "ZYojHw7jxI0Br3lkP8bJZehVTOFcY2ojwGoTC6jLT-2LuYo4gO7SufMMHhCgvd0QjVY";
    const userEmail = "mrabdullah000321@gmail.com";
    let authToken;

    // Fetch the authorization token
    $.ajax({
        url: 'https://www.universal-tutorial.com/api/getaccesstoken',
        method: 'GET',
        headers: {
            "Accept": "application/json",
            "api-token": apiToken,
            "user-email": userEmail
        },
        success: function(response) {
            authToken = response.auth_token;
            fetchCountries(authToken); // Fetch countries after getting the token
        },
        error: function(jqXHR) {
            console.error("Error fetching token:", jqXHR);
            alert("Failed to fetch authorization token. Please try again.");
        }
    });

    // Function to fetch countries
    function fetchCountries(authToken) {
        $.ajax({
            url: 'https://www.universal-tutorial.com/api/countries',
            method: 'GET',
            headers: {
                "Authorization": "Bearer " + authToken,
                "Accept": "application/json"
            },
            success: function(data) {
                var countrySelect = $('#country');
                data.sort((a, b) => a.country_name.localeCompare(b.country_name));
                data.forEach(function(country) {
                    countrySelect.append('<option value="' + country.country_name + '">' + country.country_name + '</option>');
                });
                // Set the selected country
                countrySelect.val("{{ old('country', $locations->country) }}").change(); // Trigger change to load cities
            },
            error: function(jqXHR) {
                console.error("Error fetching countries:", jqXHR);
                alert("Failed to fetch countries. Please try again.");
            }
        });
    }

    // When a country is selected, fetch its states
    $('#country').change(function() {
        var countryName = $(this).val();
        $('#city').html('<option value="">Select City</option>');

        if (countryName) {
            $.ajax({
                url: `https://www.universal-tutorial.com/api/states/${countryName}`,
                method: 'GET',
                headers: {
                    "Authorization": "Bearer " + authToken,
                    "Accept": "application/json"
                },
                success: function(data) {
                    var citySelect = $('#city');
                    if (data.length > 0) {
                        data.forEach(function(state) {
                            citySelect.append('<option value="' + state.state_name + '">' + state.state_name + '</option>');
                        });
                    } else {
                        alert("No states found for this country.");
                    }
                    // Set the selected city
                    citySelect.val("{{ old('city', $locations->city) }}");
                },
                error: function(jqXHR) {
                    console.error("Error fetching states:", jqXHR);
                    alert("Failed to fetch states. Please try again.");
                }
            });
        }
    });
});
</script>

@endsection