@extends('site.layouts.app')
@section('title', 'Home')
@section('content')
    <!-- START SECTION BANNER -->
    @include('site.layouts.slider')
    <!-- END SECTION BANNER -->

    <!-- END MAIN CONTENT -->
    <div class="main_content">
        <style>
            .card1 {
                background: linear-gradient(49deg, #ff0000, #be05e7);
            }

            .card1:hover {
                background: rgb(237, 36, 106);
            }
            
        </style>



        <!-- START SECTION SHOP -->
        <div class="section small_pt pb_20">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card  rouned-5 shadow py-2 px-2 card1">
                            <div class="card-body text-white">
                                <h3 class="card-title ">
                                    Introduction
                                </h3>
                               <div >
                                {!! $content->home !!}
                               </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row mt-2">
                    <div class="col-md-12">
                        <div class="heading_tab_header">
                            <div class="heading_s2">
                                <h2>Our Services</h2>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row justify-content-center">
                    <div class="col-md-12">

                        <div class="card border-danger border-2 rouned-5 shadow py-4 px-2"  >
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-lg-3 col-md-4 col-sm-3 col-xs-3 mt-3 services">
                                        <div class="item rounded-4">
                                            <div class="categories_box rounded-4">
                                                <a href="#" data-bs-toggle="modal" data-bs-target="#shopModal">
                                                    <img class="service-icon" src="{{ asset('services/shopping.png') }}"
                                                        alt="">
                                                    <span class="text-sm">Shop</span>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-md-4 col-sm-3 col-xs-3 mt-3 services">
                                        <div class="item rounded-4">
                                            <div class="categories_box rounded-4">
                                                <a href="{{ route('site.mobile.topup') }}">
                                                    <img class="service-icon" src="{{ asset('services/mobile-topup.png') }}"
                                                        alt="">
                                                    <span class="text-sm">Mobile TopUp</span>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-md-4 col-sm-3 col-xs-3 mt-3 services">
                                        <div class="item rounded-4">
                                            <div class="categories_box rounded-4">
                                                <a href="{{ route('site.money_trnasfer') }}">
                                                    <img class="service-icon"
                                                        src="{{ asset('services/money-transfer.png') }}" alt="">
                                                    <span class="text-sm">Money Transfer</span>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 mt-3 services">
                                        <div class="item rounded-4">
                                            <div class="categories_box rounded-4">
                                                <a href="{{ route('site.visa') }}">
                                                    <img class="service-icon" src="{{ asset('services/visa.png') }}"
                                                        alt="">
                                                    <span class="text-sm">Visa</span>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-md-4 col-sm-3 col-xs-3 mt-3 services">
                                        <div class="item rounded-4">
                                            <div class="categories_box rounded-4">
                                                <a href="{{ route('site.legalization') }}">
                                                    <img class="service-icon" src="{{ asset('services/legalization.png') }}"
                                                        alt="">
                                                    <span class="text-sm">Legalization</span>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-md-4 col-sm-3 col-xs-3 mt-3 services">
                                        <div class="item rounded-4">
                                            <div class="categories_box rounded-4">
                                                <a href="{{ route('site.passportnicops') }}">
                                                    <img class="service-icon"
                                                        src="{{ asset('services/passport-and-card-renewal.png') }}"
                                                        alt="">
                                                    <span class="text-sm">Passport/Nicop</span>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-md-4 col-sm-3 col-xs-3 mt-3 services">
                                        <div class="item rounded-4">
                                            <div class="categories_box rounded-4">
                                                <a href="{{ route('site.bill') }}">
                                                    <img class="service-icon"
                                                        src="{{ asset('services/utility-bill.png') }}" alt="">
                                                    <span class="text-sm">Utility Bill</span>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-md-4 col-sm-3 col-xs-3 mt-3 services">
                                        <div class="item rounded-4">
                                            <div class="categories_box rounded-4">
                                                <a href="{{ route('site.institutions') }}">
                                                    <img class="service-icon" src="{{ asset('services/education.png') }}"
                                                        alt="">
                                                    <span class="text-sm">Education</span>
                                                </a>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="section">
            <div class="container mb-2">
                <div class="row align-items-center">
                    <div class="col-lg-6">
                        <div class="about_img scene mb-4 mb-lg-0">
                            <img src="{{ asset('uploads/about/') . '/' . $content->about_image }}" alt="">
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="heading_s1">
                            <h2>Who We are</h2>
                        </div>
                        <p style="text-align: justify">
                            {!! Str::words($content->about, 100, '...') !!}
                        </p>
                        <a class="btn  btn-fill-out" href="{{ route('site.about') }}">Read More</a>

                    </div>
                </div>
            </div>
        </div>


        <div class="section bg_redon">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-md-6">
                        <div class="heading_s1 text-center">
                            <h2>Our Client Say!</h2>
                        </div>
                    </div>
                </div>
                <div class="row justify-content-center">
                    <div class="col-lg-9">
                        <div class="testimonial_wrap testimonial_style1 carousel_slider owl-carousel owl-theme nav_style2 owl-loaded owl-drag"
                            data-nav="true" data-dots="false" data-center="true" data-loop="true" data-autoplay="true"
                            data-items="1">


                            <div class="owl-stage-outer">
                                <div class="owl-stage"
                                    style="transition: all 0.25s ease 0s; width: 5688px; transform: translate3d(-2133px, 0px, 0px);">
                                    @foreach (App\Models\Testimonial::get() as $testimonial)
                                        <div class="owl-item cloned" style="width: 711px;">
                                            <div class="testimonial_box">
                                                <div class="testimonial_desc">
                                                    <p>
                                                        {{ $testimonial->message }}
                                                    </p>
                                                </div>
                                                <div class="author_wrap">
                                                    <div class="author_img">
                                                        {{-- <img src="assets/images/user_img3.jpg" alt="user_img3"> --}}
                                                    </div>
                                                    <div class="author_name">
                                                        <h6>{{ $testimonial->name }}</h6>
                                                        <span>{{ $testimonial->designation }} </span> -
                                                        <strong>{{ $testimonial->company }}</strong>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach


                                </div>
                            </div>
                            <div class="owl-nav"><button type="button" role="presentation" class="owl-prev"><i
                                        class="ion-ios-arrow-left"></i></button><button type="button"
                                    role="presentation" class="owl-next"><i class="ion-ios-arrow-right"></i></button>
                            </div>
                            <div class="owl-dots disabled"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


    </div>
    <!-- END MAIN CONTENT -->
@endsection