@props(['industries'])
<div class="crousel homeBg">
    {{-- <img src="{{ URL::asset('build/assets/images/slider1.jpg') }}" alt=""> --}}
    <div class="container mx-auto p-5 w-full md:w-2/3 lg:w-1/2">
        <div
            class="py-5 text-xl sm:text-2xl md:text-3xl lg:text-4xl text-gray-100 transition-all duration-500 opacity-75 typewriter">
            @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>

    <form action="{{ route('search') }}" wire:submit.prevent="submit">
            <div class="flex flex-col">
                    <div class="text-xl ">Search
                        @auth

                            @unless (auth()->user()->role == 'Employer' || auth()->user()->role == 'Institute')
                            Job
                                {{-- <label for="search">
                                    <input type="radio" name="search" id="search" value="Job" checked>
                                    Job</label> --}}
                            @endunless
                            @unless (auth()->user()->role !== 'Employer')
                            Candidate
                                {{-- <label for="search">
                                    <input type="radio" name="search" id="search" value="Candidate" checked>
                                    Candidate</label> --}}
                                {{-- {{ Form::radio('search', 'Candidate', true) }}&nbsp;&nbsp;{!! Form::label('', 'Candidate') !!} --}}
                            @endunless
                            @unless (auth()->user()->role !== 'Institute')
                            Employer
                                {{-- <label for="search">
                                    <input type="radio" name="search" id="search" value="Employer" checked>
                                    Employer</label> --}}
                                {{-- {{ Form::radio('search', 'Employer', true) }}&nbsp;&nbsp;{!! Form::label('', 'Employer') !!} --}}
                            @endunless
                            @unless (auth()->user()->role == 'Employer')
                                {{-- <x-input name="query"></x-input> --}}
                                {{-- {!! Form::text('query', null, ['class' => 'form-control tranparentBg']) !!} --}}
                            @endunless
                        @else
                        Job
                            {{-- <label for="search">
                                <input type="radio" name="search" id="search" value="Job" checked>
                                Job</label> --}}

                        @endauth

                    </div>
                <div>
                    <input name="query" type="search" class="rounded-lg w-full bg-white bg-opacity-50 border-gray-300" placeholder="Search here..." />
                </div>
                <div class="flex flex-row space-x-5 space-y-5 w-full">
                    <div class="w-1/3 mt-5">
                        <label>Industry</label>
                        <select name="industry" id="industry" wire:model.defer="industry"
                            class="block p-2 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 shadow-sm focus:ring-primary-500 focus:border-primary-500 bg-opacity-50">
                            <option value="">Select Industry</option>
                            @foreach ($industries as $industry)
                                <option value="{{ $industry->slug }}">{{ $industry->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="w-1/3">
                        <label for="">State</label>
                        <select name="state" id="state"
                            class="block p-2 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 shadow-sm focus:ring-primary-500 focus:border-primary-500 bg-opacity-50">
                            <option value="">Select State</option>
                            @foreach ($states as $state)
                                <option value="{{ $state }}">{{ $state }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="w-1/3">
                        <label for="">City</label>
                        <select name="city" id="city"
                            class="block p-2 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 shadow-sm focus:ring-primary-500 focus:border-primary-500 bg-opacity-50">
                            <option value="">Select City</option>
                        </select>
                    </div>
                </div>
                <div class="flex flex-row justify-center mt-5">
                    <button type="submit" class="bg-red-800 rounded-lg p-2 text-white text-xl px-5">Search</button>
                </div>
            </div>
        </form>

    </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