@extends('layouts.acorn.acorn_admin_app')
@section('header_styles')
@endsection

@section('top_button')
    <div class="col-12 col-md-5 d-flex align-items-start justify-content-end">
        <a href="{{ route('admin-service-request-pending-requests-add-new-individual-client-service-request') }}"
            class="btn btn-outline-primary btn-icon btn-icon-start w-100 w-md-auto add-datatable">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"
                stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                class="acorn-icons acorn-icons-plus undefined">
                <path d="M10 17 10 3M3 10 17 10"></path>
            </svg>
            Add New Individual Client Service Request
        </a>
    </div>
@endsection

@section('content')
    <div class="row">
        <div class="mb-5">
            <form id="filterForm" class="ic-request-form-wrapper">
                <div class="row">
                    <div class="col-lg-2">
                        <input type="text" id="search_text" name="search_text" placeholder="Search"
                            class="form-control" />
                    </div>

                    <div class="col-lg-2">
                        <select id="division_id" class="form-control" class="">
                        </select>
                    </div>
                    <div class="col-lg-2">
                        <select id="service_category_id" name="service_category_id" placeholder="Select Category"
                            class="form-control select2Basic">
                        </select>
                    </div>
                    <div class="col-lg-2">
                        <select id="service_sub_category_id" name="service_sub_category_id"
                            placeholder="Select Sub Category" class="form-control select2Basic">
                        </select>
                    </div>
                    <div class="col-lg-2">
                        <select id="service_id" name="service_id" placeholder="Select Service"
                            class="form-control select2Basic">
                        </select>
                    </div>

                    <div class="col">
                        <button type="submit" class="btn btn-primary btn-sm">Search</button>
                        <button type="submit" id="rest_btn" class="btn btn-warning btn-sm">Reset</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="row">
        @include('admin/service_request/pending_request/individual_clients/list')
    </div>
@endsection

@section('footer_scripts')
    <script type="text/javascript">
        $(document).ready(function() {

            $('#division_id').select2({
                ajax: {
                    method: 'POST',
                    url: "{{ route('admin-load-division-list-json') }}",
                    data: function(params) {
                        var query = {
                            search: params.term,
                            type: 'public',
                            permission_code: 'ADD_INDIVIDUAL_PENDING_SERVICE_REQUEST'
                        }
                        return query;
                    },
                    dataType: 'json',
                    processResults: function(data) {
                        return {
                            results: data,
                        };
                    },
                },
                placeholder: 'Select Division',
            });

            $('#service_category_id').select2({
                ajax: {
                    method: 'POST',
                    data: function(params) {
                        var query = {
                            search: params.term,
                            type: 'public',
                            division_id: $('#division_id').val(),
                            permission_code: 'ADD_INDIVIDUAL_PENDING_SERVICE_REQUEST'
                        }
                        return query;
                    },
                    url: "{{ route('admin-load-service-category-list-json-by-division-id') }}",
                    dataType: 'json',
                    processResults: function(data) {
                        return {
                            results: data,
                        };
                    },
                },
                placeholder: 'Select Service Category',
            });

            $('#service_sub_category_id').select2({
                ajax: {
                    method: 'POST',
                    data: function(params) {
                        var query = {
                            search: params.term,
                            type: 'public',
                            service_category_id: $('#service_category_id').val(),
                            permission_code: 'ADD_INDIVIDUAL_PENDING_SERVICE_REQUEST'
                        }
                        return query;
                    },
                    url: "{{ route('admin-load-service-sub-category-list-json-by-service-category-id') }}",
                    dataType: 'json',
                    processResults: function(data) {
                        return {
                            results: data,
                        };
                    },
                },
                placeholder: 'Select Service Sub Category',
            });

            $('#service_id').select2({
                ajax: {
                    method: 'POST',
                    data: function(params) {
                        var query = {
                            search: params.term,
                            type: 'public',
                            service_sub_category_id: $('#service_sub_category_id').val(),
                            permission_code: 'ADD_INDIVIDUAL_PENDING_SERVICE_REQUEST'
                        }
                        return query;
                    },
                    url: "{{ route('admin-load-service-list-json-by-service-sub-category-id') }}",
                    dataType: 'json',
                    processResults: function(data) {
                        return {
                            results: data,
                        };
                    },
                },
                placeholder: 'Select Service',
            });


            $('#division_id').on('select2:select', function(e) {

                $('#service_category_id').val('');
                $('#service_category_id').text('');

                $('#service_sub_category_id').val('');
                $('#service_sub_category_id').text('');

                $('#service_id').val('');
                $('#service_id').text('');

            });

            $('#service_category_id').on('select2:select', function(e) {

                $('#service_sub_category_id').val('');
                $('#service_sub_category_id').text('');

                $('#service_id').val('');
                $('#service_id').text('');

            });

            $('#service_sub_category_id').on('select2:select', function(e) {

                $('#service_id').val('');
                $('#service_id').text('');

            });



        });
    </script>
@endsection