@extends('client.layouts.app')

@section('content')

    <!-- home section -->
    <section class="home-3 bg-light" id="home">
        <!-- start container -->
        <div class="container-fluid position-relative">
            <!-- start row -->
            <div class=" side-img img bg-primary">
                <div class="bg-overlay-gradiant"></div>
                <div class="home-slider position-relative" id="home-slider">

                    @foreach ($sliders as $slider)
                        <div class="item ">
                            <div class="testi-box position-relative overflow-hidden">
                                <div class="row justify-content-center align-items-center">
                                    <div class="col-lg-11 ">
                                        <img src="{{ asset('/'.str_replace('/xxx/', '/500/', $slider['image'])) }}" alt="" class="img-fluid">
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach

                </div>

            </div>
            <div class="container position-relative hero-img">
                <div class="row">
                    <div class="col-lg-6 col-12 mt-3 pt-2">
                        <div class="content">
                            <h6 class="text-primary">{{ $setting['name'] }}</h6>
                            <h3 class="display-5 fw-bold mt-3">{{ $setting['tagline'] }}</h3>
                            <p class="text-muted mt-3">
                                {{ $setting['description'] }}
                            </p>

                        </div>
                        <!-- end about detail -->
                    </div><!-- end col -->
                </div>
                <!--end row-->
            </div>
            <!-- end row -->
        </div>
        <!-- end container -->
    </section>
    <!-- end home section -->


    <!-- start features -->
    <div class="section features" id="fitur">
        <!-- start container -->
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-6">
                    <div class="title text-center mb-5">
                        <h6 class="mb-0 fw-bold text-primary">{{ $setting['name'] }}</h6>
                        <h2 class="f-40">Fitur dan Layanan </h2>
                    </div>
                </div>
            </div>

            <div class="row justify-content-center">

                <div class="col-lg-12">

                    <div class="tab-content mt-2" id="pills-tabContent">
                        <div class=" " id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
                            <div class="row align-items-center">
                                <div class="col-lg-4 order-lg-first" style="margin-top: 30px;">

                                    @foreach ($features as $feature)
                                        @if ($loop->index < count($features) / 2)
                                            <div class="features-item text-start text-lg-end">
                                                <div class="icon avatar-sm text-center ms-lg-auto rounded-circle">
                                                    <i class="mdi {{ $feature['class'] }} f-24"></i>
                                                </div>
                                                <div class="content">
                                                    <h5>{{ $feature['name'] }}</h5>
                                                    <p>{!! $feature['description'] !!}</p>
                                                </div>
                                            </div>
                                        @endif
                                    @endforeach

                                </div>
                                <div class="col-lg-4">
                                    <img src="{{ asset('/'.str_replace('/xxx/', '/500/', $setting['feature_image'])) }}" alt="" class="img-fluid">
                                </div>
                                <div class="col-lg-4 order-last">

                                    @foreach ($features as $feature)
                                        @if ($loop->index + 1 > count($features) / 2)
                                            <div class="features-item">
                                                <div class="icon avatar-sm text-center rounded-circle">
                                                    <i class="mdi {{ $feature['class'] }} f-24"></i>
                                                </div>
                                                <div class="content">
                                                    <h5>{{ $feature['name'] }}</h5>
                                                    <p>{!! $feature['description'] !!}</p>
                                                </div>
                                            </div>
                                        @endif
                                    @endforeach

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

                    </div>
                </div>
            </div>
        </div>
        <!-- end container -->
    </div>
    <!-- end features -->

@endsection