@extends('layouts.app')

@section('title', $service["main_title"])

@section('content')

<!-- =======================
Main Banner START -->
<section class="position-relative overflow-hidden pb-3 pt-xl-9">
    <!-- Big text decoration -->
    <div class="text-end position-absolute top-0 end-0 mt-md-6 me-n4">
        <h6 class="mb-0" style="font-size:350px; opacity:0.03;">SYS</h6>
        <h6 class="mb-0" style="font-size:350px; opacity:0.03;">TEM</h6>
    </div>

    <div class="container position-relative pt-5">
        <div class="row">
            <!-- Hero Title and content -->
            <div class="col-lg-7 mb-6 mb-lg-0">
                <!-- Title -->
                <h1 class="display-4 lh-base mb-4">{{ $service['main_title'] }}</h1>
                <p class="mb-4">{{ $service['main_description'] }}</p>
                <hr class="my-4 my-sm-6"> <!-- Divider -->

                <!-- Product options -->
                <div class="row g-4 align-items-center">
                    @include('layouts.formulaire')
                </div>
            </div>

            <!-- Hero Image -->
            <div class="col-sm-10 col-lg-5 position-relative px-5 mx-auto">
                <img src="{{ $service['featured_image'] }}" alt="hero-img">

                <!-- Navigation decoration -->
                <div class="position-absolute top-0 start-0">
                    <div class="position-relative">
                        <button type="button" class="btn btn-white btn-ripple btn-round text-primary z-index-1" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="{{ $service['client_slogan'] }}">
                            <i class="bi bi-plus-lg"></i>
                        </button>
                        <!-- SVG decoration -->
                        <figure class="position-absolute top-50 start-50 mt-n1">
                            <svg width="249" height="69" viewBox="0 0 249 69" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M244 66V1H0" stroke="#DCE0E5" />
                                <circle class="fill-primary" cx="244" cy="64" r="5" />
                            </svg>
                        </figure>
                    </div>
                </div>

                <!-- Navigation decoration -->
                <div class="position-absolute bottom-0 end-0 me-lg-4 me-xl-8 mb-lg-9 mb-xl-7">
                    <div class="position-relative">
                        <button type="button" class="btn btn-white btn-ripple btn-round text-primary z-index-1 mb-0 mt-n1" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="{{ $service['client_slogan'] }}">
                            <i class="bi bi-plus-lg"></i>
                        </button>
                        <!-- SVG decoration -->
                        <figure class="position-absolute bottom-100 end-100 mb-n3">
                            <svg width="175" height="90" viewBox="0 0 175 90" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M5 4V89H175" stroke="#DCE0E5" />
                                <circle class="fill-primary" cx="5" cy="5" r="5" transform="rotate(180 5 5)" />
                            </svg>
                        </figure>
                    </div>
                </div>
            </div>
        </div> <!-- Row END -->
    </div>
</section>

<!-- =======================
Client START -->
<section class="pb-0 bg-light">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-md-3 mb-2 mb-md-0">
                <h5 class="pe-6">{{ $service['client_slogan'] }}</h5>
            </div>

            <div class="col-md-9">
                <!-- Slider START -->
                @include('layouts.client')
                <!-- Slider END -->
            </div>
        </div> <!-- Row END -->
    </div>
</section>
<!-- =======================
Client END -->

<section class="bg-light">
    <div class="container">
        <!-- Title -->
        <div class="inner-container-small text-center mb-4 mb-sm-6">
            <h2>{{ $service['features_title'] }}</h2>
            <p class="mb-0">{{ $service['features_description'] }}</p>
        </div>

        <!-- Feature START -->
        <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 g-5 g-lg-6">
            @for ($i = 1; $i <= 6; $i++) <!-- item -->
                <div class="col">
                    <div class="card card-body bg-transparent text-center p-0">
                        <span class="h4 text-primary"><i class="bi bi-{{ $service['argument_icon' . $i] }}"></i></span>
                        <h6 class="mb-2">{{ $service['argument' . $i] }}</h6>
                        <p class="mb-0">{{ $service['argument_description' . $i] }}</p>
                    </div>
                </div>
                @endfor
        </div>
        <!-- Feature END -->
    </div>
</section>

<!-- =======================
Steps START -->
<section class="pb-0">
    <div class="container">
        <!-- Title -->
        <div class="inner-container-small text-center mb-4 mb-sm-5">
            <h2 class="mb-4">{{ $service['steps_title'] }}</h2>
            <p class="mb-0">{{ $service['steps_description'] }}</p>
        </div>
        <!-- Slider items -->
        <div class="slider-service">
            @for ($i = 1; $i <= 3; $i++) <!-- Step item -->
                <div class="slider-item p-3">
                    <div class="card bg-light overflow-hidden p-4 p-sm-5 h-100">
                        <!-- Card body -->
                        <div class="card-body p-0 pb-5">
                            <!-- Number -->
                            <div class="icon-lg bg-dark rounded-circle fw-bold text-white mb-3">{{ sprintf('%02d', $i) }}</div>
                            <h5>{{ $service['step_title' . $i] }}</h5>
                            <p class="heading-color">{{ $service['step_description' . $i] }}</p>
                        </div>

                        <!-- Card footer -->
                        <div class="card-footer bg-transparent p-0 d-flex justify-content-center align-items-center">
                            <img src="{{ $service['step_image' . $i] }}" alt="img" class="img-fluid rounded-3 shadow">
                        </div>
                    </div>
                </div>
                @endfor
        </div>
        <!-- Slider Pagination -->
        <div class="swiper-pagination swiper-pagination-primary position-relative mt-4"></div>
    </div> <!-- Slider END -->
</section>
<!-- =======================
Steps END -->

<section class="position-relative overflow-hidden">
    <div class="container position-relative">
        <div class="row align-items-center">
            <!-- feature image -->
            <div class="col-12"></div>

            <!-- feature content -->
            <div class="col-12 ms-auto position-relative order-lg-2">
                <h2 class="mb-4 mb-md-5 text-center">{{ $service['faq_title'] }}</h2>
                <p class="mb-4 mb-md-5 text-center">{{ $service['faq_description'] }}</p>

                <!-- Accordion START -->
                <div class="accordion accordion-icon accordion-bg-light" id="accordionFaq">
                    @foreach ($service['faqs'] as $index => $faq)
                    <!-- Item -->
                    <div class="accordion-item mb-3">
                        <div class="accordion-header font-base" id="heading-{{ $index }}">
                            <button class="accordion-button fw-semibold rounded {{ $index != 0 ? 'collapsed' : '' }}" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-{{ $index }}" aria-expanded="{{ $index == 0 ? 'true' : 'false' }}" aria-controls="collapse-{{ $index }}">
                                {{$faq['question'] }}
                            </button>
                        </div>
                        <!-- Body -->
                        <div id="collapse-{{ $index }}" class="accordion-collapse collapse {{ $index == 0 ? 'show' : '' }}" aria-labelledby="heading-{{ $index }}" data-bs-parent="#accordionFaq">
                            <div class="accordion-body mt-3 pb-0">
                                {{$faq['answer'] }}
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
                <!-- Accordion END -->
            </div>

        </div> <!-- Row END -->
        <hr class="my-6 opacity-1"> <!-- Divider -->
    </div>
</section>

@endsection