@extends('user.layouts.index')
<link href="{{ asset('css/main.css') }}" rel="stylesheet">
{{-- <link href="{{ asset('css/chapter.css') }}" rel="stylesheet"> --}}

@section('default')

<section>
    <div class="innerPageFaqs">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    {{-- <h1>frequently asked questions</h1> --}}
                </div>
                <div class="col-sm-12">
                    <div class="panel-group" id="accordionuu" role="tablist" aria-multiselectable="true">


                        @foreach($prooflist  as $pd)
                        {{-- <div class="panel panel-default my">
                            <div class="panel-heading" role="tab" id="headingOne">
                                <h4 class="panel-title my">

                                         {!!ucwords( $pd['description'] )!!} <br/>



                                </h4>
                            </div>

                        </div> --}}
                        <div class="row">
                            <div style="margin-top:25px">
                            <div class="col-sm-6 myimer" style="max-width:421px;">
                                {{-- {!! $pd['avatar']!!} <br/> --}}
                               <img src="{!!$pd['avatar']!!}"   class="show-product-img imgshow" style="max-width: 280px;" >


                            </div>
                            <div  class="col-sm-6 mydesss">



                            <div style="background-color: cornsilk;
                            font-size: 27px;
                      font-family: -webkit-pictograph;
                            height: fit-content;">
                                {!! $pd['title']!!} <br/>

                            </div>

                                <div  style="background-color: #f2f2f2;
                                margin-top: 52px;
                                height: fit-content;">
                                    {!! $pd['description']!!} <br/>
                                </div>
                            </div>

                            </div>



                            </div>













                        @endforeach
                    </div>
                </div>
                <div class="col-sm-12">


                </div>
            </div>
        </div>
    </div>
    {{--  --}}
    <div class="modal fade generalimgmodal in" id="" tabindex="-1" role="dialog" aria-hidden="false">
        <div class="modal-dialog modal-mg ">
        <div class="modal-content" id="confirm">
        <div class="modal-header">
        <h4 class="modal-title">Image</h4>
        </div>
        <div class="modal-body">
        <div class="row">
        <div id="my_msg_div" class="col-xs-12">
        <img class="generalimgmodalsrc" src="" style="max-width: 534px;">
        </div>
        </div>
        </div>
        <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
        </div>
        </div>
        </div>
        {{--  --}}
</section>
@endsection

@section('app_jquery')
    <script src="//cdn.ckeditor.com/4.14.1/standard/ckeditor.js"></script>
    <!-- jQuery library -->
    {{-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> --}}

    <!-- JS & CSS library of MultiSelect plugin -->
     <script src="multiselect/jquery.multiselect.js"></script>
    <link rel="stylesheet" href="multiselect/jquery.multiselect.css">


    <script>
        $('.imgshow').on('click', function(e){

var my_src = $(this).attr('src');
$(".generalimgmodalsrc").attr("src", my_src);
$('.generalimgmodal').modal('show');
});

    </script>

@endsection