127 lines
5.5 KiB
PHP
127 lines
5.5 KiB
PHP
@props(['name' => 'country', 'id' => 'country', 'value' => '', 'required' => false, 'error' => null, 'label' => 'Nationality'])
|
|
|
|
<div class="mb-3">
|
|
<label for="{{ $id }}" class="form-label">{{ $label }}</label>
|
|
<select id="{{ $id }}"
|
|
class="form-select country-select @error($name) is-invalid @enderror"
|
|
name="{{ $name }}"
|
|
{{ $required ? 'required' : '' }}
|
|
style="width: 100%;">
|
|
<option value="">Select {{ $label }}</option>
|
|
</select>
|
|
@if($error)
|
|
<span class="invalid-feedback" role="alert">
|
|
<strong>{{ $error }}</strong>
|
|
</span>
|
|
@endif
|
|
</div>
|
|
|
|
@push('scripts')
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const selectElement = document.getElementById('{{ $id }}');
|
|
if (!selectElement) return;
|
|
|
|
// Check if Select2 is already initialized
|
|
if ($(selectElement).hasClass('select2-hidden-accessible')) {
|
|
return;
|
|
}
|
|
|
|
// Function to get user's country based on GPS
|
|
function detectUserCountry(callback) {
|
|
if (navigator.geolocation) {
|
|
navigator.geolocation.getCurrentPosition(function(position) {
|
|
const lat = position.coords.latitude;
|
|
const lon = position.coords.longitude;
|
|
// Use a reverse geocoding API
|
|
fetch(`https://api.bigdatacloud.net/data/reverse-geocode-client?latitude=${lat}&longitude=${lon}&localityLanguage=en`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
const countryName = data.countryName;
|
|
const iso2 = data.countryCode;
|
|
callback(countryName, iso2);
|
|
})
|
|
.catch(() => {
|
|
callback('United States', 'US'); // Default if error
|
|
});
|
|
}, function() {
|
|
callback('United States', 'US'); // Default if geolocation denied
|
|
});
|
|
} else {
|
|
callback('United States', 'US'); // Default if no geolocation
|
|
}
|
|
}
|
|
|
|
// Load countries from JSON file
|
|
fetch('/data/countries.json')
|
|
.then(response => response.json())
|
|
.then(countries => {
|
|
// Clear existing options except the first one
|
|
while (selectElement.options.length > 1) {
|
|
selectElement.remove(1);
|
|
}
|
|
|
|
// Populate dropdown
|
|
countries.forEach(country => {
|
|
const option = document.createElement('option');
|
|
option.value = country.iso3;
|
|
option.textContent = country.name;
|
|
option.setAttribute('data-flag', country.flag);
|
|
selectElement.appendChild(option);
|
|
});
|
|
|
|
// Set initial value if provided
|
|
const initialValue = '{{ $value }}';
|
|
if (initialValue) {
|
|
selectElement.value = initialValue;
|
|
}
|
|
|
|
// Initialize Select2 for searchable dropdown
|
|
if (typeof $ !== 'undefined' && $.fn.select2) {
|
|
$(selectElement).select2({
|
|
templateResult: function(state) {
|
|
if (!state.id) {
|
|
return state.text;
|
|
}
|
|
const option = $(state.element);
|
|
const flagCode = option.data('flag');
|
|
return $(`<span><span class="fi fi-${flagCode} me-2"></span>${state.text}</span>`);
|
|
},
|
|
templateSelection: function(state) {
|
|
if (!state.id) {
|
|
return state.text;
|
|
}
|
|
const option = $(state.element);
|
|
const flagCode = option.data('flag');
|
|
return $(`<span><span class="fi fi-${flagCode} me-2"></span>${state.text}</span>`);
|
|
},
|
|
width: '100%'
|
|
});
|
|
|
|
// Detect user's country and set as default
|
|
detectUserCountry(function(countryName, iso2) {
|
|
// Find the country by name or iso2
|
|
let defaultIso3 = 'USA'; // Default to US
|
|
for (let country of countries) {
|
|
if (country.name.toLowerCase().includes(countryName.toLowerCase()) || country.iso2 === iso2) {
|
|
defaultIso3 = country.iso3;
|
|
break;
|
|
}
|
|
}
|
|
$(selectElement).val(defaultIso3).trigger('change');
|
|
});
|
|
}
|
|
})
|
|
.catch(error => console.error('Error loading countries:', error));
|
|
});
|
|
</script>
|
|
@endpush
|
|
|
|
@push('styles')
|
|
<style>
|
|
.country-select {
|
|
background-size: 20px 15px;
|
|
}
|
|
</style>
|
|
@endpush
|