@extends('layouts.khtc')
@section('title')
    {{$page->title}} Testimonials
@endsection
@section('style')
    <style>

        .profile {
            width: 100%;
            height: 350px
        }

        .percentage {
            font-size: 30px
        }

        .testimonials {
            height: 350px
        }
    </style>
@endsection

@section('seo_meta')
    <meta name="description" content="{{$page->meta_description}}">
    <meta name="keywords" content="{{$page->meta_keywords}}">
@endsection
@section('breadcrumb')
    <!-- Start Page Title Area -->
    <div style="background-image:url('@if($page->banner){{asset('/uploads/'.$page->banner)}} @else {{asset('/assets/img/banner.png')}} @endif')" class="page-title-area">
        <div class="container">
            <div class="page-title-content">
                <ul>
                    <li><a href="index.php">Home</a></li>
                    <li> {{ $page->title }}</li>
                </ul>
                <h2> {{ $page->title }}</h2>
            </div>
        </div>
    </div>
    <!-- End Page Title Area -->
@endsection

@section('main')
    <!-- Start Team Area -->
    <section class="team-area ptb-100">
        <div class="container">
            <div class="section-title">
                {{--                <span class="sub-title">Make Connections</span>--}}
                <h2>{{$page->sub_heading}}</h2>
                {!! $page->body !!}
            </div>

            <div class="container mt-5 mb-5">
                <div class="d-flex justify-content-center row">
                    <div class="col-md-9">
                        <div id="carousel-1" class="carousel slide" data-ride="carousel">
                            <div class="carousel-inner">
                                @foreach($posts as $k=>$p)

                                <div class="carousel-item @if($k==0) active @endif">
                                    <div class="border rounded">
                                        <div class="row no-gutters">
                                            <div class="col-md-5"><img class="img-fluid profile" src="{{asset('/uploads/'.$p->photo)}}" height="300"></div>
                                            <div class="col-md-7">
                                                <div class="bg-white p-2 px-3 testimonials">
                                                    <p class="text-justify">{!! $p->saying !!}<br></p>
{{--                                                    <div class="d-flex justify-content-between stats border p-2">--}}
{{--                                                        <div class="d-flex flex-column align-items-center"><span class="font-weight-bold percentage text-danger">70%</span><span>Services</span></div>--}}
{{--                                                        <div class="d-flex flex-column align-items-center"><span class="font-weight-bold percentage text-success">180+</span><span>Stores</span></div>--}}
{{--                                                        <div class="d-flex flex-column align-items-center"><span class="font-weight-bold percentage text-">20+</span><span>Cities</span></div>--}}
{{--                                                    </div>--}}
                                                    <div class="d-flex align-items-center mt-3 text-success font-weight-bold">
                                                        <a href="{{url('/testimonials?id='.$p->id)}}"><span class="mr-2">read more</span></a><i class="fa fa-long-arrow-right"></i></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                    @endforeach
{{--                                <div class="carousel-item">--}}
{{--                                    <div class="border rounded">--}}
{{--                                        <div class="row no-gutters">--}}
{{--                                            <div class="col-md-5"><img class="img-fluid profile" src="https://i.imgur.com/7YDXqMG.jpg" height="300"></div>--}}
{{--                                            <div class="col-md-7">--}}
{{--                                                <div class="bg-white p-2 px-3 testimonials">--}}
{{--                                                    <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.&nbsp;<br>Duis aute irure dolor in reprehenderit.<br></p>--}}
{{--                                                    <div class="d-flex justify-content-between stats border p-2">--}}
{{--                                                        <div class="d-flex flex-column align-items-center"><span class="font-weight-bold percentage text-danger">80%</span><span>Services</span></div>--}}
{{--                                                        <div class="d-flex flex-column align-items-center"><span class="font-weight-bold percentage text-success">280+</span><span>Stores</span></div>--}}
{{--                                                        <div class="d-flex flex-column align-items-center"><span class="font-weight-bold percentage text-">200+</span><span>Cities</span></div>--}}
{{--                                                    </div>--}}
{{--                                                    <div class="d-flex align-items-center mt-3 text-success font-weight-bold"><span class="mr-2">Learn more</span><i class="fa fa-long-arrow-right"></i></div>--}}
{{--                                                </div>--}}
{{--                                            </div>--}}
{{--                                        </div>--}}
{{--                                    </div>--}}
{{--                                </div>--}}
{{--                                <div class="carousel-item">--}}
{{--                                    <div class="border rounded">--}}
{{--                                        <div class="row no-gutters">--}}
{{--                                            <div class="col-md-5"><img class="img-fluid profile" src="https://i.imgur.com/8s9FZSp.jpg" height="300"></div>--}}
{{--                                            <div class="col-md-7">--}}
{{--                                                <div class="bg-white p-2 px-3 testimonials">--}}
{{--                                                    <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.&nbsp;<br>Duis aute irure dolor in reprehenderit.<br></p>--}}
{{--                                                    <div class="d-flex justify-content-between stats border p-2">--}}
{{--                                                        <div class="d-flex flex-column align-items-center"><span class="font-weight-bold percentage text-danger">50%</span><span>Services</span></div>--}}
{{--                                                        <div class="d-flex flex-column align-items-center"><span class="font-weight-bold percentage text-success">1800+</span><span>Stores</span></div>--}}
{{--                                                        <div class="d-flex flex-column align-items-center"><span class="font-weight-bold percentage text-">200+</span><span>Cities</span></div>--}}
{{--                                                    </div>--}}
{{--                                                    <div class="d-flex align-items-center mt-3 text-success font-weight-bold"><span class="mr-2">Learn more</span><i class="fa fa-long-arrow-right"></i></div>--}}
{{--                                                </div>--}}
{{--                                            </div>--}}
{{--                                        </div>--}}
{{--                                    </div>--}}
{{--                                </div>--}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="particles-js-circle-bubble-3"></div>
    </section>

    <!-- End Team Area -->
@endsection
@section('script')
@endsection