{{-- <div class="crousel bg-gradient-to-t from-blue-900 to-blue-700 dark:bg-gradient-to-t dark:from-slate-900 dark:to-blue-800 dark:text-slate-400"> --}}
<div class="crousel bg-gradient-to-t from-blue-900 to-blue-700 dark:from-slate-900 dark:to-slate-900 dark:text-slate-400">
<div class="homeBg">
{{-- <div class="crousel homeBg"> --}}
    {{-- <img src="{{ URL::asset('build/assets/images/slider1.jpg') }}" alt=""> --}}
    <div class="container mx-auto p-5 flex flex-col justify-center">
        <div class=" mx-auto w-auto inline-block">
        <div
            class="py-5 text-xl sm:text-2xl md:text-3xl lg:text-4xl text-white transition-all duration-500 typewriter text-center">
            @auth
            @if (auth()->user()->role == 'Employer')
            <h1>Find, Contact & Hire Your Next Employee...</h1>
            @else
            <h1>Jobs For Anyone, Anywhere...</h1>
            @endif
            @else
            <h1>Jobs For Anyone, Anywhere...</h1>
            @endauth

        </div>

        @if (auth()->check() && auth()->user()->role == 'Employer')
            <div class="text-center text-slate-200">
                <h3 class="text-xl -mt-2 mb-3">Search CVs using targeted keywords & find your ideal candidate in seconds.</h3>
                <x-button md dark rounded class="text-2xl font-medium" label="Search Candiate"  href="{{ route('employer.search.candidates') }}" class="bg-sky-300 hover:bg-sky-400" wire:navigate />
                <h3 class="text-xl my-3">Quick & Easy Job Posting With Live Preview</h3>
                <x-button md dark rounded class="text-2xl font-medium" label="Post Job"  href="{{ route('employer.post.job', 'post-job') }}" class="bg-sky-300 hover:bg-sky-400" wire:navigate />
            </div>

        @else
        <form action="{{ route('jobs' ,['search', 'industry', 'location']) }}" method="get">
            <div class="bg-white rounded-3xl bg-opacity-15 text-gray-800 dark:text-gray-400 p-1">
                <div class="flex flex-col md:flex-row gap-3 pl-5 md:pl-10 ">
                    <div class="">
                        {{-- <label>Industry</label> --}}
                        {{-- <x-select :options="$industries" placeholder="Any Industry" option-value="industry.id" option-label="industry.name" class="bg-transparent"  wire:model.defer="industry" /> --}}
                        <select name="industry" id="industry" wire:model.defer="industry"
                            class="bg-transparent border-0 p-2 xl:text-xl focus:border-0 active:border-0">
                            <option value="">Any Industry</option>
                            @foreach ($industries as $industry1)
                                <option value="{{ $industry1->industry?->id }}">{{ $industry1->industry?->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        {{-- <label for="">Search Job</label> --}}
                        <input name="search" id="search" wire:model.defer="search" type="search"
                            class="bg-transparent border-0 p-2 xl:text-xl placeholder:text-gray-800 dark:placeholder:text-gray-400" placeholder="Search job..." autocomplete="off" />
                    </div>
                    <div class="">
                        {{-- <label for="">Location</label> --}}
                        <select name="location" id="location" wire:model.defer="location"
                            class="bg-transparent border-0 p-2 xl:text-xl">
                            <option value="">Any Location</option>
                            @foreach ($locations->sort() as $location)
                                <option value="{{ $location->location }}">{{ $location->location }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="flex justify-center md:justify-end">
                        <button type="submit" id="search" class="bg-blue-800 rounded-3xl py-1 md:py-2 text-white xl:text-xl px-5"
                        wire:click="search">Search</button>
                    </div>
                </div>
                </div>        </form>
            <div class="p-4 text-2xl opacity-80 hidden md:block text-gray-200">
            Popular Searches
        </div>
            <div class="flex justify-between items-center hidden md:block">
                <div class="px-4 py-2">
                    <x-button  dark md rounded label="Sales Jobs" href="/jobs?search=sales" class="bg-sky-600 hover:bg-sky-700" wire:navigate />
                    <x-button  dark md rounded label="Housekeeping" href="/jobs?search=housekeeping" class="bg-sky-600 hover:bg-sky-700" wire:navigate />
                    <x-button  dark md rounded label="Manager Jobs" href="/jobs?search=manager" class="bg-sky-600 hover:bg-sky-700" wire:navigate />
                    <x-button  dark md rounded label="Accountant" href="/jobs?search=accountant" class="bg-sky-600 hover:bg-sky-700" wire:navigate />
                    {{-- <x-button  outline info md rounded label="Steward Jobs" href="/jobs?search=steward" /> --}}
                </div>
            </div>

        @endif
    </div>
    </div>
</div>
</div>
@push('custom-scripts')
    <script type="module">
   $(document).ready(function(){
// console.log($('#state').eq(0).val())
// console.log($('#state').length)
        // $("#state").val("");
$('#state').on('change', function(){
var state = this.value;
// console.log(state);
// var state = $('#state option:selected' ).text();
$('#city').html('');
$.ajax({
url: "{{ url('get-cities-by-state') }}",
type: "POST",
data: {state: state,_token: '{{ csrf_token() }}'},
dataType: 'json',
success: function(result){
    $('#city').html('<option value="">Any</option>');
    // console.log(result);
    var selectedCity = '';
    $.each(result.cities,function(key,value){
        // console.log(value.city);
if(selectedCity==value.city){
    $("#city").append('<option value="'+value.city+'" selected>'+value.city+'</option>');
}else{
    $("#city").append('<option value="'+value.city+'">'+value.city+'</option>');
}
});
}
});
});
$("#state").trigger("change");

    });

</script>
@endpush