{{--
|--------------------------------------------------------------------------
| QuoteBookingForm is common Component (Can be shown in any screen)
|--------------------------------------------------------------------------
| you can show this component in any screen by referring to the following
| snippet:
|-----------
|
| @component('components.QuoteBookingForm', [])
|
| @endcomponent
|
|-------------------------------------------------------------
|
--}}
<form method="POST" action="{{ route('register') }}" id="first-quote-form">
    {{ csrf_field() }}
    <input type="hidden" class="form-control" name="case" id="case" value="first-quote" />
    <div class="form-group">
        <input type="text" class="form-control" name="name" id="name" placeholder="Name" required>
    </div>
    <div class="form-group">
        <select class="form-control" id="country" name="country_id">
            <option value="default">Select Country of residence</option>
            @foreach (\App\Http\Controllers\PassportAPI\QuoteController::getCountries() as $country)
                <option value="{{ $country['id'] }}" dial-code="{{ $country['dial_code'] }}"
                    country-code="{{ $country['country_code'] }}">{{ $country['name'] }}</option>
            @endforeach
        </select>
    </div>
    <div class="form-group">
        <select class="form-control" id="category" name="category_id">
            <option value="default">Select Your Treatment Category</option>
            @foreach (\App\Http\Controllers\PassportAPI\QuoteController::getCategories() as $category)
                <option value="{{ $category['id'] }}">{{ $category['name'] }}</option>
            @endforeach
        </select>
    </div>
    <div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">
        <input id="email" type="email" class="form-control" name="email" value="{{ old('email') }}"
            placeholder="Enter email" required>
        @if ($errors->has('email'))
            <span class="help-block">
                <p class="text-danger"><strong>{{ $errors->first('email') }}</strong></p>
            </span>
        @endif
    </div>



    <div class="form-group">
        <div class="row ">
            <div class="col-lg-2 ">
                <input style="" class="form-control" type="text" name="country_code" id="add_h_dial_code"
                    placeholder="Dial code" value="" disabled>
            </div>
            <div class="col-sm-10 "> <input class="form-control" type="tel" name="phone" id="c_f_q_frm_phone"
                    placeholder="Phone" required>
                <input type="hidden" class="form-control" name="country_code" id="country_code" value="" />
            </div>
        </div>
    </div>
    <div class="form-group ">
        <div id="recaptcha" class="g-recaptcha" data-sitekey="{{ '6LeSHVckAAAAAEy29JRI6f733mMcmlqp7woB9KGc' }}"
            name="recaptcha"></div>
        @if ($errors->has('g-recaptcha-response'))
            <span class="text-danger">{{ $errors->first('g-recaptcha-response') }}</span>
        @endif
    </div>

    <div class="form-group" style="text-align: right;">
        <button type="button" class="btn btn-primary" id="first-quote-submit">Submit</button>
    </div>
</form>

<link href="{{ asset('jquery-plugins/intl-tel-input-master/css/intlTelInput.css') }}" rel="stylesheet">
<!-- Use as a jQuery plugin -->
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script src="{{ asset('jquery-plugins/intl-tel-input-master/js/intlTelInput-jquery.js') }}"></script>
<script src="{{ asset('js/blade-components/sp_create_first_quote.js') }}"></script>
<script>
    // Function to set the default country in the dropdown
    function setDefaultCountry() {
        console.log("setDefaultCountry function called.");

        // Call a geolocation API to get user's country info
        console.log("Making API call to fetch user's location...");
        $.getJSON("https://ipapi.co/json/", function (data) {
            console.log("API call successful. Received data:", data);

            const userCountryName = data.country_name; // Example: "India"
            const userCountryCode = data.country; // Example: "IN"
            console.log("User's country name:", userCountryName);
            console.log("User's country code:", userCountryCode);

            // Find the option in the dropdown that matches the user's country name or code
            const countryDropdown = $("#country");
            console.log("Dropdown element selected:", countryDropdown);

            let matchFound = false;
            countryDropdown.find("option").each(function () {
                const optionCountryName = $(this).text().trim();
                const optionCountryCode = $(this).attr("country-code");

                console.log(`Checking option: ${optionCountryName} (Code: ${optionCountryCode})`);

                // Match either by country name or country code
                if (optionCountryName === userCountryName || optionCountryCode === userCountryCode) {
                    console.log("Match found. Setting this option as selected:", optionCountryName);

                    // Set the option as selected
                    $(this).prop("selected", true);

                    // Update the dial code input field
                    const dialCode = $(this).attr("dial-code");
                    $("#add_h_dial_code").val(dialCode);

                    // Update the hidden country code input field
                    $("#country_code").val(dialCode);

                    matchFound = true;
                    return false; // Exit the loop
                }
            });

            if (!matchFound) {
                console.warn("No matching country found in the dropdown.");
            }
        }).fail(function () {
            console.error("API call failed. Unable to fetch location.");
        });
    }

    // Call the function on page load
    $(document).ready(function () {
        console.log("Document ready. Calling setDefaultCountry...");
        setDefaultCountry();
    });
</script>