@extends('layouts.acorn.acorn_frontend_app')
@section('header_styles')
    <style>
        .service-div {
            padding: 20px;
            border: 1px solid var(--primary) !important;
        }
        .service-name{
            font-weight: bold;
        }
    </style>
@endsection
@section('content')
    <div class="row">
        <div class="col-12 mb-5 service-catalog-search-wrap">
            <h1 class="s-title">Service Catalogue Search</h1>
            <a href="{{ route('service-request-catalogue') }}" class="btn btn-outline-danger back-btn"> Back</a>
            <div class="row service-cat-search-wrap">
                <div class="col-md-3 scs1">
                    <div class="form-group">
                        <input type="text" name="search_keyword" id="search_keyword" class="form-control" autocomplete="off"
                            placeholder="Please enter service name">
                        <div id="search_keyword_err" class="error-label" style="color: red;"></div>
                    </div>
                </div>
                <div class="col-md-3 scs2">
                    <div class="form-group">
                        <select id="service_category_id" class="form-control select2Basic" placeholder="Select Category"
                            name="service_category_id">
                            <option value="">&nbsp;</option>
                            @foreach ($serviceCategories as $serviceCat)
                                <option value="{{ $serviceCat->id }}"
                                    {{ $serviceCategory && $serviceCat->id == $serviceCategory->id ? 'selected' : '' }}>
                                    {{ $serviceCat->service_category_name }}</option>
                            @endforeach
                        </select>
                        <div id="search_keyword_err" class="error-label" style="color: red;"></div>
                    </div>
                </div>
                <div class="col-md-3 scs3">
                    <div class="form-group">
                        <select id="service_sub_category_id" class="form-control select2Basic"
                            name="service_sub_category_id">
                            <option value="">&nbsp;</option>
                            @foreach ($serviceSubCategories as $serviceSubCat)
                                <option value="{{ $serviceSubCat->id }}"
                                    {{ $serviceSubCategory && $serviceSubCat->id == $serviceSubCategory->id ? 'selected' : '' }}>
                                    {{ $serviceSubCat->service_sub_category_name }}</option>
                            @endforeach
                        </select>
                        <div id="search_keyword_err" class="error-label" style="color: red;"></div>
                    </div>
                </div>
                <div class="col-md-3">
                    <button id="filter_submit_btn" class="btn btn-primary btn-sm" type="button">Search</button>
                    <button type="button" id="rest_btn" class="btn btn-warning btn-sm">Reset</button>
                </div>
            </div>
        </div>

        <!--<div class="col-1">
            <a href="{{ route('service-request-catalogue') }}" class="btn btn-outline-danger"> Back</a>
        </div>-->
    </div>
    <section id="resultList">

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

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

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

            });

            $('#service_sub_category_id').select2({
                ajax: {
                    method: 'POST',
                    data: function() {
                        return {
                            service_category_id: $('#service_category_id').val(),
                            f: 'perm',
                        };
                    },
                    url: "{{ route('client-load-service-sub-category-list-json-by-service-category-id') }}",
                    dataType: 'json',
                    processResults: function(data) {
                        return {
                            results: data,
                        };
                    },
                },
                placeholder: 'Select Service Sub Category',
            });

        });


        $("#filter_submit_btn").click(function() {
            servicesFilter();
        });

        $("#rest_btn").click(function() {
            $('#search_keyword').val('');
            $('#service_category_id').val(null).trigger("change");
            $('#service_sub_category_id').val(null).trigger("change");
            servicesFilter();
        });

        function servicesFilter() {

            var search_keyword = $("#search_keyword").val();
            var service_category_id = $("#service_category_id").val();
            var service_sub_category_id = $("#service_sub_category_id").val();
            $('.error-label').hide();
            $('.error-label').text('');
            $("#resultList").html('');
            $("#totalResuluCount").html('');

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $.ajax({
                url: '{{ route('service-request-service-filter') }}',
                type: "POST",
                data: {
                    'search_keyword': search_keyword,
                    'service_category_id': service_category_id,
                    'service_sub_category_id': service_sub_category_id
                },
                beforeSend: function() {
                    document.body.classList.add('spinner');
                },
                success: function(data) {
                    $('#resultList').html(data);
                    $('#search_keyword_err').html('');
                },
                error: function(response) {
                    var erroJson = JSON.parse(response.responseText);
                    $.each(erroJson.errors, function(key, value) {
                        $('#search_keyword_err').html(value);
                    });
                    $('.error-label').show();
                    document.body.classList.remove('spinner');
                },
                complete: function(jqXHR, textStatus) {
                    document.body.classList.remove('spinner');
                }
            });
        }

        $('#search_keyword').keypress(function(e) {
            if (e.which === 13) {
                servicesFilter();
            }
        });

        $('#service_category_id, #service_sub_category_id').change(function(e) {
            servicesFilter();
        });

        function resetFilter() {
            $('#search_keyword').val('');
            $('#service_category_id').val(null).trigger("change");
            $('#service_sub_category_id').val(null).trigger("change");
            servicesFilter();
        }
    </script>
@endsection