@extends('layout.user')
@section('content')

        <div class="row">
            <div class="col-md-7"   style="border-right: 1px solid lightgray;">
                <div class="page-title">
                    <div class="left-column">
                        <h4>Contact</h4>
                        <p>Please fill out the form below to contact <b>{{\App\AppConstants::APP_NAME}}</b> </p>
                    </div>
                </div>
                  <form class="main-form" action="{{route('policyholder.post.contactUsPage')}}" enctype="multipart/form-data" method="POST" id="contactUsPage">
            {!! csrf_field() !!}
            <div class="contact-row" >
                <div class="form-row">
                    <div class="col-60">
                        <label>First Name</label>
                        <input type="text" name="first_name" value="{{ \Illuminate\Support\Facades\Auth::user()->first_name }}" class="general-field" placeholder="Type Something "/>
                    </div>
                    <div class="col-60">
                        <label>Last Name</label>
                        <input type="text" name="last_name" value="{{ \Illuminate\Support\Facades\Auth::user()->last_name }}" class="general-field" placeholder="Type Something "/>
                    </div>
                </div>

                <div class="form-row">
                        <div class="col-60">
                            <label>Email Address</label>
                            <input type="email" name="email" value="{{ \Illuminate\Support\Facades\Auth::user()->email }}" class="general-field" placeholder="Example@gmail.com"/>
                        </div>
                        <div class="col-60">
                            <label>Phone No.</label>
                            <input id="phone_num" type="text" name="phone_no" value="{{ \Illuminate\Support\Facades\Auth::user()->phone_no }}" minlength="5" maxlength="19" class="general-field" placeholder="Type Something "/>
                        </div>
                    </div>

                <div class="form-row">
                    <div class="form-full-row">
                        <label>Message</label>
                        <textarea class="detail_msgs" name="message" id="message" placeholder="Type Something"></textarea>
                    </div>
                </div>

                <div class="form-row">
                    <label class="policy-choose-file">
                        <input style="display: none" type="file" id="myFile-contact" accept="image/jpeg,image/jpg,image/png,application/pdf" name="contact_img"/>
                        Choose File
                    </label>
                </div>
                <div id="myFile-contact-src" style="margin-bottom: 10px;">
                </div>

                <div class="form-row">
                    <div class="form-full-row">
                        <button class="btn-yellow" type="submit" id="contact-us-submit">Submit</button>
                    </div>
                </div>
            </div>
        </form>
            </div>
            <div class="col-md-5" >
                <form   style="padding: 7px 25px;">
                    <input type="text" class="white-fieldd" placeholder="Search anything"
                           onkeyup="searchFunction(this.value)"/>
                    <button class="btn-searchh" type="button"><img src="{{asset('images/search-icon.png')}}"/></button>
                </form>
                <div class="page-title">
                    <div class="left-column">
                        <h4>Frequently Asked Questions</h4>
                        <p>All you need to know about <b>{{\App\AppConstants::APP_NAME}}</b> </p>
                    </div>
                </div>
                <div id="faq-column" >
                     @if(isset($faqs[0]))
                        @foreach($faqs as $key=>$faq )
                            <div class="faq-row" >
                                <div class="form-full-row">

                                    <div class="question">
    {{--                                    <span   style="font-size:16px "><b>({{$key+1}})</b></span>--}}
                                        <i onclick="myFunction(this, {{$faq->id}})" class="fa fa-arrow-alt-circle-right faq-icon"></i>
                                        <span class="faq-q-span">
                                            <b class="faq-q-text"> {{$faq->question}}</b>
                                        </span>
                                    </div>
                                    <div   style="display: none;" id="answer-div-{{$faq->id}}">
                                        <span   style="display: flex">
                                            <span class="faq-ans-text">{{$faq->answer}}</span>
                                        </span>
                                    </div>
                                </div>
                                <hr>
                            </div>
                        @endforeach
                     @endif
                </div>
            </div>
        </div>
        <script nonce="{{config('app.nonce')}}" type="text/javascript" src="{{ asset('js/contact.js?v=').time()}}"></script>

        <script nonce="{{config('app.nonce')}}">
            function myFunction(ele , id) {


                var x = document.getElementById("answer-div-"+id);
                if (x.style.display === "none") {
                    x.style.display = "block";
                    $(ele).addClass('fa-arrow-alt-circle-down');
                    $(ele).removeClass('fa-arrow-alt-circle-right');
                } else {
                    x.style.display = "none";
                    $(ele).addClass('fa-arrow-alt-circle-right');
                    $(ele).removeClass('fa-arrow-alt-circle-down');

                }
            }

        </script>

@endsection

@section('js_file')
<script nonce="{{config('app.nonce')}}" type="text/javascript">

    var deleteImage = `<img src="{{asset('images/delete.png')}}">`;

    $("#myFile-contact").on('change', function(){
            var input = this;
            var filesAmount = input.files.length;
            var count = 0;
            var reader = new FileReader();
            let extension = input.files[0].name.split('.').pop().toLowerCase();

            let name = input.files[0].name;
            let size = Math.round(input.files[0].size/1024);

            if(input.files[0].size > '40000000'){
                showErrorToaster2(`<div><h5 style="color: red;font-weight: 500;">FILE EXCEEDS UPLOADING LIMIT<br>40 MB</h5><p style="font-weight: 500;">We recommend you divide the video into snaller segments and then upload each segment individually.</p></div>`);
                $('#myFile-contact').val('')
                return false;
            }else if ((extension == 'png' || extension == 'jpg' || extension == 'jpeg' || extension == 'bmp' || extension == 'webp') && size > 20000) { // Image size check (20MB)
                showErrorToaster3(`<div><h5 style="color: red;font-weight: 500;">FILE EXCEEDS UPLOADING LIMIT<br>20 MB</h5><p style="font-weight: 500;">Please choose an image smaller than 20 MB.</p></div>`);
                $('#myFile-contact').val('')
                return false;
            }

            if(extension == 'png' || extension == 'jpg' || extension == 'jpeg' || extension == 'bmp'|| extension == 'webp'){
                reader.onload = function (e) {
                    let html = ` <div class="photo-column policy-id-${count}">
                            <div class="photo-img"   style="background-image:url(${e.target.result});"></div>
                            <div class="photo-content">
                             <h3   style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;max-width: 260px;">${name}</h3>
                                <p>${size} Kb</p>
                            </div>
                        </div> `;

                        $('#myFile-contact-src').html(html);
                }
                reader.readAsDataURL(input.files[0]);


            } else if (extension == 'pdf' || extension == 'doc' || extension == 'docx' || extension == 'xls' || extension == 'xlsx' || extension == 'mp4' || extension == 'mov' || extension == 'flv'|| extension == 'mkv' ){
                let image_name = 'images/'+extension+'_icon.png';
                let html = `<div class="photo-column policy-id-${count}" >
                            <div class="photo-img"   style="background-image:url(${baseUrl+image_name})"></div>
                             <div class="photo-content">
                              <h3   style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;max-width: 260px;">${name}</h3>
                                <p>${size} Kb</p>
                            </div>
                        </div> `;

                    $('#myFile-contact-src').html(html);

            }

    });

    // $(document).on('click', '.delete-contact-img', function(){
    //     $('#myFile-contact').val('');
    // })

    function myFunction(ele , id) {


        var x = document.getElementById("answer-div-"+id);
        if (x.style.display === "none") {
            x.style.display = "block";
            $(ele).addClass('fa-arrow-alt-circle-down');
            $(ele).removeClass('fa-arrow-alt-circle-right');
        } else {
            x.style.display = "none";
            $(ele).addClass('fa-arrow-alt-circle-right');
            $(ele).removeClass('fa-arrow-alt-circle-down');

        }
    }

    function searchFunction(input) {
        // Declare variables
        var  filter, ul, li, a,b, i, txtValue, txtValue2;
        filter = input.toUpperCase();
        ul = document.getElementById("faq-column");
        li = ul.getElementsByClassName('faq-row');

        // Loop through all list items, and hide those who don't match the search query
        for (i = 0; i < li.length; i++) {
            a = li[i];//.getElementsByTagName("span")[1];
            b = li[i];//.getElementsByTagName("span")[2];
            txtValue = a.textContent || a.innerText;
            txtValue2 = b.textContent || b.innerText;
            if (txtValue.toUpperCase().indexOf(filter) > -1 || txtValue2.toUpperCase().indexOf(filter) > -1) {
                li[i].style.display = "";
            } else {
                li[i].style.display = "none";
            }

        }
    }

</script>

@endsection