@extends('reachassuree_agent_web/theme-3/layouts.main')
@section('title', $data['title'])
@section('content')

<style>
    input#search_value {
        /* border: transparent; */
        border-radius: 20px;
    }

    .form-control {
        height: 45px;
    }

    .row.searchBar {
        justify-content: end;
    }

    button.search-btn {
        background: transparent;
    }

    .ac-sub-text p {
        font-size: 14px;
    }

    .searching {
        display: flex;
        justify-content: space-between;
    }

    .position-relative {
        position: relative !important;
    }

    .search-box .search-icon {
        font-size: 20px;
        position: absolute;
        right: 20px;
        top: 0;
        line-height: 45px;
    }

    .col-lg-12.search-button {
        display: block;
    }

    .btn-primary.clear-search {
        color: #fff;
        background-color: #023E8A;
        border-color: #0d6efd;
        height: 45px;
        text-align: center;
        padding: 10px;
        border-radius: 31px;
    }

    .section-title {
        margin: -5px auto 50px !important;
        max-width: 750px;
    }

    .search-box .search-icon {
        font-size: 22px;
        position: absolute;
        right: 20px;
        top: 0;
        line-height: 54px;
    }

    .section-title .form-control {
        padding: 20px 25px !important;

    }

    .section-title .search-button .position-relative button {
        border: none !important;
    }

    .alertmsg {
        color: #4e4e4eb5;
    }

    .form-control:focus {
        border-color: #47cdc7 !important;
    }

    /* deparment wise faq */
    .container {
        margin: 10px auto;
    }

    .department .ac-label {
        background-color: #f4f4f4 !important;
        color: #213438;
    }

    .ac-label {
        font-weight: 700;
        position: relative;
        padding: .5em 1em;
        margin-bottom: .5em;
        display: block;
        cursor: pointer;
        background-color: #023e8a !important;
        color: #ffffff;
        transition: background-color .15s ease-in-out;
    }

    .ac-input:checked+label,
    .ac-label:hover {
        background-color: #999;
    }

    .ac-label:after,
    .ac-input:checked+.ac-label:after {
        content: "+";
        position: absolute;
        display: block;
        right: 0;
        top: 0;
        width: 2em;
        height: 100%;
        line-height: 2.25em;
        text-align: center;
        background-color: #6c757d3d;
        transition: background-color .15s ease-in-out;
    }

    .ac-label:hover:after,
    .ac-input:checked+.ac-label:after {
        background-color: #b5b5b5;
    }

    .ac-input:checked+.ac-label:after {
        content: "-";
    }

    .ac-input {
        display: none;
    }

    .ac-text,
    .ac-sub-text {
        opacity: 0;
        height: 0;
        margin-bottom: .5em;
        transition: opacity .5s ease-in-out;
        overflow: hidden;
    }

    .ac-input:checked~.ac-text,
    .ac-sub .ac-input:checked~.ac-sub-text {
        opacity: 1;
        height: auto;
    }

    .ac-sub .ac-label {
        background: none;
        font-weight: 600;
        padding: .5em 2em;
        margin-bottom: 0;
    }

    .ac-sub .ac-label:checked {
        background: none;
        border-bottom: 1px solid whitesmoke;
    }

    .ac-sub .ac-label:after,
    .ac-sub .ac-input:checked+.ac-label:after {
        left: 0;
        background: none;
    }

    .ac-sub .ac-input:checked+label,
    .ac-sub .ac-label:hover {
        background: none;
    }

    .ac-sub-text {
        padding: 0 1em 0 2em;
    }

    section.container {
        padding-top: 0px;
    }

    p.faq-desc {
        margin: 15px 0 15px;
    }
</style>

<!-- PAGE TITLE ================================================== -->
<section class="page-title-section top-position1 bg-img cover-background left-overlay-dark" data-overlay-dark="6" data-background="{{ asset('assets-theme3/img/banner/Hero-section-image-3.png')}}">
    <div class="container">
        <div class="page-title">
            <div class="row">
                <div class="col-md-12">
                    <h1>FAQ</h1>
                </div>
                <div class="col-md-12">
                    <ul class="ps-0">
                        <li><a href="{{ route('home.page') }}" class="text-white">Home</a></li>
                        <li><a href="{{route('faq')}}" class="text-white">FAQ</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="d-inline-block p-2 border border-width-2 border-white top-20 right-10 ani-move position-absolute rounded-circle z-index-1"></div>
    <div class="d-inline-block p-2 border border-width-2 border-white bottom-10 left-10 ani-left-right position-absolute z-index-1"></div>
    <img src="{{ asset('assets-theme3/img/content/shape5.png')}}" class="position-absolute top-20 left-5 ani-top-bottom z-index-1" alt="...">
</section>

<!-- FAQ'S ================================================== -->
<section class="pt-0">
    <div class="container">
        <div class="section-heading text-center mb-2-9 mb-lg-6 wow fadeIn" data-wow-delay="100ms">
            <span>FAQ</span>
            <h2 class="display-22 display-sm-18 display-md-16 display-lg-11 mb-0">Frequently asked questions</h2>
        </div>
        <div class="section-title">
            <form action="{{route('faq')}}" method="post" id="formfaqs" class="search-form" novalidate enctype="multipart/form-data">
                @csrf
                <div class="row searchBar search-box">
                    <div class="col-lg-12 search-button">
                        <div class="col-lg-12 position-relative">
                            <input type="search_value" class="form-control" value="" id="search_value" name="search_value" placeholder="Search" value="" required>
                            <button class="search-btn" type="button" onclick="ClearFields();" id="clear-search"><i class="far fa-window-close search-icon"></i></button>
                        </div>
                    </div>
                </div>
            </form>
        </div>

        <section class="container">
            @foreach ($data['departmantFaq'] as $key => $valuedept)
                <div class="ac department faq_box" id="d-{{$valuedept->id}}">
                    <input class="ac-input" id="ac-{{$valuedept->id}}" name="ac-{{$valuedept->id}}" type="checkbox" />
                    <label class="ac-label" for="ac-{{$valuedept->id}}">{{$valuedept->name}}</label>
                    <article class="ac-text">
                        @foreach ($data['faqs'] as $key => $value)
                            @if(($valuedept->id)==($value->department))
                                <div class="ac-sub" id="q-{{$value->id}}">
                                    <input class="ac-input" id="ac-{{$valuedept->id}}-{{$value->id}}" name="ac-{{$valuedept->id}}-{{$value->id}}" type="checkbox" />
                                    <label class="ac-label" for="ac-{{$valuedept->id}}-{{$value->id}}"> {{$value['question']}}</label>
                                    <article class="ac-sub-text">
                                        <p class="faq-desc">{{ $value['ans'] }}</p>
                                    </article>
                                </div>
                            @endif
                        @endforeach
                    </article><!--/ac-text-->
                </div><!--/ac-->
            @endforeach
        </section>

        <div class="row">
            <h5 id="message" class="text-center alertmsg"></h5>
        </div>
    </div>

    <img src="{{ asset('assets-theme3/img/content/shape6.png')}}" class="position-absolute top-0 ani-left-right right-5 d-none d-md-block" alt="...">
    <img src="{{ asset('assets-theme3/img/content/shape1.png')}}" class="position-absolute bottom-0 start-0 opacity1 ani-top-bottom" alt="...">
</section>

@endsection

@section('custom-scripts')

<script type="text/javascript">
    var dataOFFaq = @json($data['faqs']);

    function ClearFields() {
        document.getElementById("search_value").value = "";
        $(".faq_box , .ac-sub").show();
        $('#message').html("");
    }

    $(function() {
        $('#search_value').bind('input', function() {
            var searchInput = $(this).val();

            if (searchInput != "") {
                var result;

                $(".faq_box , .ac-sub").hide();

                for (var i = 0; i < dataOFFaq.length; i++) {
                    result = dataOFFaq[i]['question'].includes(searchInput);

                    if (result) {
                        $("#d-" + dataOFFaq[i]['department']).show();
                        $("#q-" + dataOFFaq[i]['id']).show();
                    } else {
                        result = dataOFFaq[i]['ans'].includes(searchInput);
                        if (result) {
                            $("#d-" + dataOFFaq[i]['department']).show();
                            $("#q-" + dataOFFaq[i]['id']).show();
                        }
                    }
                }
            } else {
                $(".faq_box , .ac-sub").show();
            }
        });
    });

    $('input[type=search_value]').keyup('change', function(e) {
        var length = $('.faq_box:not([style*="display: none"])').length;

        if (length == 0) {
            $('#message').html("No data found");
        } else {
            $('#message').html("");
        }
    });
</script>

@endsection