Viewing file:  header-top.blade.php (12.41 KB) -rw-r--r--
Select action/file-type:
 (+) |  (+) |  (+) | Code (+) | Session (+) |  (+) | SDB (+) |  (+) |  (+) |  (+) |  (+) |  (+) |
<div class="header-top bg-primary-800 dark:bg-gray-800 border-b border-primary-600 dark:border-primary-800 text-white/80">
<div class="container">
<div class="py-1.5 lg:hidden border-b">
<button type="button" data-modal-target="locationModal" data-modal-toggle="locationModal"
class="inline-flex gap-1.5 items-center heading-07 transition-all duration-300 text-white/80 hover:text-white">
<x-svg.search-location-icon width="20" height="20" />
@if (selected_country())
<span>{{ selected_country()->name }}</span>
@else
<span>{{ __('all_country') }}</span>
@endif
</button>
</div>
<div class="flex gap-3 justify-between items-center py-1.5">
<ul class="lg:!inline-flex hidden flex-wrap gap-5 items-center">
<li>
<a href="{{ route('frontend.priceplan') }}"
class="heading-07 transition-all duration-300 text-white/80 hover:text-white">{{ __('pricing_plan') }}</a>
</li>
<!-- City List Modal Trigger Button Start -->
<li>
<button type="button" data-modal-target="locationModal" data-modal-toggle="locationModal"
class="inline-flex gap-1.5 items-center heading-07 transition-all duration-300 text-white/80 hover:text-white">
<x-svg.search-location-icon width="20" height="20" />
@if (selected_country())
<span>{{ selected_country()->name }}</span>
@else
<span>{{ __('all_country') }}</span>
@endif
</button>
</li>
<!-- City List Modal Trigger Button End -->
</ul>
<!-- City List Modal Start -->
<div id="locationModal" tabindex="-1" aria-hidden="true"
class="hidden overflow-y-auto overflow-x-hidden bg-black/50 fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
<div class="relative w-full max-w-2xl max-h-full mx-4">
<!-- Modal content -->
<div class="relative bg-white dark:bg-gray-700 rounded-lg shadow pb-6">
<h2 class="text-gray-900 heading-07 px-6 pt-6 pb-3">{{ __('select_your_country') }}</h2>
<form class="px-6 pb-3">
<div>
<div class="relative mt-2 rounded-md shadow-sm">
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
<x-svg.search-icon stroke="var(--primary-500)" />
</div>
<input id="search-input" type="text" placeholder="Search Country" name="location"
value="" autocomplete="off"
class="block w-full rounded-md border-0 py-1.5 pl-10 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
</div>
</div>
</form>
<div class="city-list h-80 px-6 pb-6 overflow-y-auto no-scrollbar overflow-x-auto">
<ul>
<li>
<a class="flex gap-2 px-3 py-2 hover:bg-primary-50 transition-all duration-300 text-gray-600 dark:text-gray-200 body-base-400"
href="{{ route('frontend.set.country', ['country' => 'all_country']) }}">
<i class="fa-solid fa-globe"></i>
{{ __('all_country') }}
</a>
</li>
@foreach ($headerCountries as $country)
<li id="lang-dropdown-item">
<a class="flex gap-2 px-3 py-2 hover:bg-primary-50 transition-all duration-300 text-gray-600 dark:text-gray-200 body-base-400"
href="{{ route('frontend.set.country', ['country' => $country->id]) }}">
<i class="flag-icon {{ $country->icon }}"></i>
{{ $country->name }}
</a>
</li>
@endforeach
</ul>
</div>
</div>
</div>
</div>
<!-- City List Modal End -->
<div class="inline-flex lg:hidden flex-wrap gap-3 items-center">
<button @click="mobileMenu = true">
<x-svg.menu-icon />
</button>
<button @click="searchbar = !searchbar">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M21 21L15.0001 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z"
stroke="var(--gray-100)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</div>
<div class="inline-flex gap-4 items-center">
<button id="darkModeToggle" class="bg-white text-primary-500 border border-gray-100 p-1 rounded-full">
<span id="icon">
<!-- Custom SVG for Light Mode -->
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-4 h-4">
<path stroke-linecap="round" stroke-linejoin="round"
d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" />
</svg>
</span>
</button>
@if ($setting->currency_changing && count($headerCurrencies))
@php
$currency_count = count($headerCurrencies) && count($headerCurrencies) > 1;
$current_currency_code = currentCurrencyCode();
$current_currency_symbol = currentCurrencySymbol();
@endphp
<span class="relative" x-data="{ currencyDropdown: false }" @click.outside="currencyDropdown = false">
<button @click="currencyDropdown = !currencyDropdown"
class="inline-flex heading-07 tarnsition-all duration-300 hover:text-white py-1.5 gap-1.5 items-center"
:class="currencyDropdown ? 'text-white' : ''" type="button">
<span>
{{ $current_currency_code }}
</span>
<x-svg.arrow-down-icon />
</button>
@if ($currency_count)
<div class="currDropdown" x-show="currencyDropdown" x-transition x-cloak
@click.outside="currencyDropdown=false">
<ul
class="bg-white flex flex-col py-2 rounded-md border border-gray-100 drop-shadow-[drop-shadow(0px_8px_8px_rgba(28,33,38,0.03))_drop-shadow(0px_20px_24px_rgba(28,33,38,0.08))] min-w-[12rem] relative after:absolute after:border after:border-r-transparent after:border-b-transparent after:border-gray-200 after:rounded ltr:after:right-10 rtl:after:left-10 after:bg-white after:top-[-7.8px] after:h-4 after:w-4 after:transform after:rotate-[45deg] after:content-['']">
@foreach ($headerCurrencies as $currency)
<li>
<a href="{{ route('changeCurrency', $currency->code) }}"
class="hover:bg-primary-50 py-1 px-4 transition-all duration-300 flex text-gray-700 body-md-400 {{ $current_currency_code === $currency->code ? 'bg-primary-50' : '' }}">
{{ $currency->code }} ({{ $currency->symbol }})
</a>
</li>
@endforeach
</ul>
</div>
@endif
</span>
@endif
@if ($language_enable && $setting->language_changing)
<span class="relative" x-data="{ langDropdown: false }" @click.outside="langDropdown = false">
<button @click="langDropdown = !langDropdown"
class="inline-flex heading-07 tarnsition-all duration-300 hover:text-white py-1.5 gap-1.5 items-center"
:class="langDropdown ? 'text-white' : ''" type="button">
<span>
{{ currentLanguage() ? currentLanguage()->name : 'Default' }}
</span>
<x-svg.arrow-down-icon />
</button>
<!-- Dropdown menu -->
<div class="langDropdown " x-show="langDropdown" x-transition x-cloak
@click.outside="langDropdown=false">
<ul
class="bg-white flex flex-col py-2 rounded-md border border-gray-100 drop-shadow-[drop-shadow(0px_8px_8px_rgba(28,33,38,0.03))_drop-shadow(0px_20px_24px_rgba(28,33,38,0.08))] min-w-[12rem] relative after:absolute after:border after:border-r-transparent after:border-b-transparent after:border-gray-200 after:rounded ltr:after:right-10 rtl:after:left-10 after:bg-white after:top-[-7.8px] after:h-4 after:w-4 after:transform after:rotate-[45deg] after:content-['']">
@foreach ($languages as $lang)
<li>
<a href="{{ route('changeLanguage', $lang->code) }}"
class="hover:bg-primary-50 py-1 px-4 transition-all duration-300 flex text-gray-700 body-md-400 {{ currentLanguage()->name == $lang->name ? 'bg-primary-50' : '' }}">
{{ $lang->name }}
</a>
</li>
@endforeach
</ul>
</div>
</span>
@endif
</div>
</div>
</div>
</div>
@push('js')
<script>
document.addEventListener("DOMContentLoaded", function() {
// Select the input field and the list items
const searchInput = document.getElementById("search-input");
const countryListItems = document.querySelectorAll(".city-list ul li");
// Add an event listener to the input field
searchInput.addEventListener("input", function() {
const inputValue = searchInput.value.toLowerCase().trim(); // Trim whitespace
// Sort the list items based on input matching the first word
countryListItems.forEach(function(item) {
const countryName = item.textContent.toLowerCase();
const firstWord = countryName.split(" ")[0];
if (firstWord === inputValue) {
item.style.display = "block";
} else if (countryName.includes(inputValue)) {
item.style.display = "block";
} else {
item.style.display = "none";
}
});
});
});
</script>
@endpush
|