@props(['selectedDepartmentId', 'selectedPostId'])

<div class="grid grid-cols-1 md:grid-cols-2 gap-5">
    <div class="">
        <x-label for="" class="{{ $errors->has('industry_id') ? 'text-red-600' : '' }}">Sector</x-label>
    {{-- {{ $abc }} --}}
            <select name="industry_id" id="industry_id" class="block p-2.5 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">
            <option value="">Select Sector</option>
            @foreach ($industries as $industry)
            <option value="{{ $industry->id }}" {{ (trim($selectedDepartmentId) == trim($industry->id)) ? 'selected' : '' }}>{{ $industry->name }}</option>
        @endforeach
        </select>
        @error('industry_id')
        <p class="mt-2 text-sm text-negative-600">The Industry Is required.</p>
        @enderror
    </div>
    <div class="">
        <x-label for="" class="{{ $errors->has('department_post_id') ? 'text-red-600' : '' }}">Post</x-label>
        <select name="department_post_id" id="department_post_id" class="block p-2.5 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">
            <option value="">Select Post</option>
        </select>
    </div>
</div>
@push('custom-scripts')
<script type="module">
                    $(document).ready(function() {
                        $('#industry_id').on('change', function() {
                            var industry_id = this.value;
                            // var state = $('#state option:selected' ).text();
                            $('#department_post_id').html('');
                            $.ajax({
                                url: "{{ url('get-posts-by-industry') }}",
                                type: "POST",
                                data: {
                                    industry_id: industry_id,
                                    _token: '{{ csrf_token() }}'
                                },
                                dataType: 'json',
                                success: function(result) {
                                    $('#department_post_id').html('<option value="">Select Post</option>');
                                    var selectedPostId = '{{ $selectedPostId }}';
                                    // console.log(selectedPost);
                                    $.each(result.departmentPosts, function(key, value) {
                                        // console.log(value.city);
                                        if (selectedPostId == value.id) {
                                            $("#department_post_id").append('<option value="' +
                                                value.id + '" selected>' + value.post +
                                                '</option>');
                                        } else {
                                            $("#department_post_id").append('<option value="' +
                                                value.id + '">' + value.post + '</option>');
                                        }
                                    });
                                }
                            });
                        });
                        $("#industry_id").trigger("change");

                    });

//                     $(document).ready(function(){
// $('#industry_id').on('change', function(){
// var industry = this.value;
// $('#department_post_id').html('');
// $.ajax({
// url: "{{ url('get-posts-by-industry') }}",
// type: "POST",
// data: {industry: industry,_token: '{{ csrf_token() }}'},
// dataType: 'json',
// success: function(result){
//     $('#department_post_id').html('<option value="">Select Post</option>');
//     // console.log(result);
//     $.each(result.cities,function(key,value){
//         // console.log(value.post);
// $("#department_post_id").append('<option value="'+value.post+'">'+value.post+'</option>');
// });
// }
// });
// });
//     });

</script>
    @endpush