```blade
@extends('layouts.app')

@section('title', 'Add Product')

@section('content')
<div class="row mb-none-30">
    <div class="col-lg-12 mb-30">
        <div class="card shadow-sm">
            <div class="card-body">
                <form action="{{ route('product.store') }}" method="POST" class="needs-validation" novalidate id="productForm">
                    @csrf
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label for="category" class="font-weight-bold">@lang('Category')</label>
                                <select class="form-control" name="category" id="category" required>
                                    <option value="" selected>@lang('Select Category')</option>
                                    @foreach ($categories as $category)
                                        <option value="{{ $category->id }}">{{ $category->name }}</option>
                                    @endforeach
                                </select>
                                @error('category') <span class="text-danger">{{ $message }}</span> @enderror
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label for="sub_category_id" class="font-weight-bold">@lang('Sub-Category')</label>
                                <select class="form-control" name="sub_category_id" id="sub_category_id" required>
                                    <option value="" selected>@lang('Select Sub-Category')</option>
                                </select>
                                @error('sub_category_id') <span class="text-danger">{{ $message }}</span> @enderror
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label for="asin" class="font-weight-bold">@lang('ASIN')</label>
                                <input type="text" name="asin" id="asin" value="{{ old('asin') }}" class="form-control" placeholder="@lang('Enter ASIN')" required>
                                @error('asin') <span class="text-danger">{{ $message }}</span> @enderror
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label for="manufacturer" class="font-weight-bold">@lang('Manufacturer')</label>
                                <input type="text" name="manufacturer" id="manufacturer" value="{{ old('manufacturer') }}" class="form-control" placeholder="@lang('Enter Manufacturer')">
                                @error('manufacturer') <span class="text-danger">{{ $message }}</span> @enderror
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label for="part_number" class="font-weight-bold">@lang('Part Number')</label>
                                <input type="text" name="part_number" id="part_number" value="{{ old('part_number') }}" class="form-control" placeholder="@lang('Enter Part Number')">
                                @error('part_number') <span class="text-danger">{{ $message }}</span> @enderror
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label for="source_link" class="font-weight-bold">@lang('Source Link')</label>
                                <input type="url" name="source_link" id="source_link" value="{{ old('source_link') }}" class="form-control" placeholder="@lang('Enter Source Link')">
                                @error('source_link') <span class="text-danger">{{ $message }}</span> @enderror
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label for="status" class="font-weight-bold">@lang('Status')</label>
                                <select class="form-control" name="status" id="status" required>
                                    <option value="" selected disabled>@lang('Select Status')</option>
                                    <option value="1">@lang('Active')</option>
                                    <option value="0">@lang('Inactive')</option>
                                </select>
                                @error('status') <span class="text-danger">{{ $message }}</span> @enderror
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="form-group float-send">
                                <button type="submit" class="btn btn-primary btn-block btn-lg">@lang('Create')</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('breadcrumb-plugins')
<div class="d-flex justify-content-between align-items-center">
    <h3>@lang('Dashboard / Add Product')</h3>
    <a href="{{ route('product.index') }}" class="btn btn-sm btn-primary box-shadow1 text-small">
        <i class="las la-angle-double-left"></i> @lang('Go Back')
    </a>
</div>
@endpush

@push('style')
<style>
    .form-group {
        margin-bottom: 1.5rem;
    }
    .form-control {
        border-radius: 4px;
        border: 1px solid #ced4da;
        padding: 0.5rem 0.75rem;
        display: block !important; /* Ensure dropdown is visible */
    }
    .form-control:focus {
        border-color: #007bff;
        box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
    }
    select.form-control {
        appearance: auto; /* Restore default dropdown arrow */
        background-color: #fff;
    }
    .text-danger {
        font-size: 0.875rem;
        margin-top: 0.25rem;
    }
    .card {
        border: none;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    .btn-primary {
        padding: 0.5rem 1.5rem;
        border-radius: 4px;
    }
</style>
@endpush

@push('script')
<script>
    $(document).ready(function() {
        

        // Ensure status dropdown is visible
        $('#status').css('display', 'block');

        // Dynamic sub-category fetch
        $('#category').change(function() {
            var categoryId = $(this).val();
            console.log('Category changed to:', categoryId);
            if (categoryId) {
                $.ajax({
                    url: '{{ route('product.getSubCategories', ':category_id') }}'.replace(':category_id', categoryId),
                    method: 'GET',
                    success: function(data) {
                        console.log('Sub-categories fetched:', data);
                        $('#sub_category_id').empty();
                        $('#sub_category_id').append('<option value="" selected>@lang("Select Sub-Category")</option>');
                        $.each(data, function(index, subCategory) {
                            $('#sub_category_id').append('<option value="' + subCategory.id + '">' + subCategory.name + '</option>');
                        });
                    },
                    error: function(xhr) {
                        console.error('Failed to fetch sub-categories:', xhr.responseText);
                        alert('Failed to fetch sub-categories.');
                    }
                });
            } else {
                $('#sub_category_id').empty();
                $('#sub_category_id').append('<option value="" selected>@lang("Select Sub-Category")</option>');
            }
        });

      
    });
</script>
@endpush