@extends('frontend.layouts.app')

@section('title')
    User Guide - {{ config('app.name') }}
@endsection

@section('content')
    <!-- Start breadcrumb section -->
    <section class="hero__slider--section">
        <div class="slider__thumbnail--style5 position-relative">
            <img class="slider__thumbnail--img__style5 banner-height" src="assets/img/faq/call-center.png" alt="slider-img">
            <div class="hero__content--style5 text-center banner-text-center">
                <h2 class="hero__content--style5__title h1 userguide">Authenticity and Warranty Status Check</h2>
            </div>
        </div>
    </section>

    <!-- End breadcrumb section -->

    <!-- faq page section start -->
    <section class="faq__section section--padding bg-dark-green">

        <div class="container faq-section">
            <div class="row row-cols-1">
                <div class="col">
                    <div class="breadcrumb__content text-center">
                        <h1 class="breadcrumb__content--title">User Guide</h1>
                        <ul class="breadcrumb__content--menu d-flex justify-content-center">
                            <li class="breadcrumb__content--menu__items"><a href="{{ route('frontend.index') }}">Home</a>
                            </li>
                            <li class="breadcrumb__content--menu__items"><span>User Guide</span></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>



        <div class="container faq-section2">
            <div class="faq__section--inner userguidesection">
                <div class="face__step one">
                    @if ($data)
                        @foreach ($data as $section)
                            <div class="row">
                                <div class="col">
                                    <h2>{{ $section['name'] }}</h2>
                                </div>

                                @foreach ($section['details'] as $details)
                                    <div class="single__product--wrapper userguide mb-4">
                                        <div class="d-flex align-items-center">
                                            <div class="col-md-1">
                                                <div class="">
                                                    <div class="swiper-wrapper">

                                                        <div class="single__product--thumbnail">
                                                            <a class="single__product--thumbnail__link">
                                                                <img class="single__product--thumbnail__img"
                                                                    src="{{ $details->image }}" alt="userguide-img">
                                                            </a>
                                                        </div>


                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-8">
                                                <div class="single__product--content userguide-content">
                                                    <h3 class="single__product--title">{{ $details->title }}</h3>
                                                    <div>
                                                        <p>{{ $details->detail }}</p>
                                                    </div>


                                                </div>
                                            </div>
                                            <div class="col">
                                                <div class="float-right">
                                                    <div class="swiper-wrapper">

                                                        <div class="single__product--thumbnail">
                                                            <a class="single__product--thumbnail__link"
                                                                href="{{ $details->document }}" download>

                                                                <img src="assets/img/userguide/dwldicon.png"
                                                                    alt="downloadicon">

                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @endforeach
                    @endif

                </div>
            </div>
        </div>
    </section>
    <!-- faq page section end -->


    <!-- End shipping section -->
@endsection