@extends('adminlte::page')

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

@section('content')
    <div class="row">
        <!-- left column -->
        <div class="col-md-12">
            <!-- general form elements -->
            <div class="box box-primary ">
                <div class="box-header with-border">
                    <h3 class="box-title">Add Reason</h3>
                </div>
                <form role="form" enctype="multipart/form-data" method="POST" action="{{ route('reasons.store') }}" autocomplete="off">
                    @csrf
                    <div class="form-group col-md-6">
                    <label>Select Main Category</label>
                    <select class="form-control" id="main_category" name="main_category_id">
                        <option value="">Select Main Category</option>
                        @foreach($mainCategory as $category)
                            <option value="{{ $category->id }}">{{ $category->title }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="form-group col-md-6">
                    <label>Country</label>
                    <select class="form-control" id="country" name="countryselect">
                        <option value="">Select Country</option>
                        <option value="usa">USA</option>
                        <option value="uk">UK</option>                       
                        <option value="india">India</option>                       
                    </select>
                </div>

                <div class="form-group col-md-12">
                    <label>Select Sub Category</label>
                    <select class="form-control" id="sub_category" name="category_id">
                        <option value="">Select Sub Category</option>
                        {{-- Dynamically loaded via JavaScript --}}
                    </select>
                </div>



                    <div class="box-body">
                        <div class="form-group">
                            <label>Name</label>
                            <input type="text" class="form-control" name="name" placeholder="Name"
                                   value="{{ old('name') }}" required>
                        </div>
                    </div>
                    <div class="box-body">
                        <div class="form-group">
                            <label for="country">Country</label>
                            <select class="form-control" name="country" id="country1" required>
                                <option value="uk" {{ old('country') == 'uk' ? 'selected' : '' }}>UK</option>
                                <option value="usa" {{ old('country') == 'usa' ? 'selected' : '' }}>USA</option>
                                <option value="india" {{ old('country') == 'india' ? 'selected' : '' }}>India</option>
                            </select>
                        </div>
                    </div>
                    <div class="box-body">
                        <div class="form-group">
                            <label>Visament Fee</label>
                            <input type="number" class="form-control" name="visament_fee" placeholder="Visament Fee"
                                value="{{ old('visament_fee') }}" step="0.01" required>
                        </div>
                    </div>
                    <div class="box-body">
                        <div class="form-group">
                            <label>Government Fee</label>
                            <input type="number" class="form-control" name="government_fee" placeholder="Government Fee"
                                   value="{{ old('name') }}" step="0.01" required>
                        </div>
                    </div>
                    <div class="box-footer">
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </div>
                </form>
            </div>
            <!-- /.box -->
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>



<script>
    function loadSubcategories() {
        var mainCategoryId = $('#main_category').val();
        var country = $('#country').val();

        console.log(country);

        if (mainCategoryId && country) {
            $.ajax({
                url: '{{ route("reasons.subcategory", "") }}/' + mainCategoryId,
                type: 'GET',
                data: {
                    main_category_id: mainCategoryId,
                    country: country
                },
                success: function (data) {
                    $('#sub_category').empty().append('<option value="">Select Sub Category</option>');
                    $.each(data, function (index, item) {
                        $('#sub_category').append('<option value="' + item.id + '">' + item.name + '</option>');
                    });
                }
            });
        } else {
            $('#sub_category').empty().append('<option value="">Select Sub Category</option>');
        }
    }

    $('#main_category, #country').on('change', loadSubcategories);
</script>


@stop