@extends('front.layouts.master')
@section('main_content')
<!--==============================
Breadcrumb Area
==============================-->
<section class="breadcrumb__area fix" data-background="{{ asset('uploads/'.$global_setting->banner) }}">
    <div class="breadcrumb__bg-shape"></div>
    <div class="container">
        <div class="row">
            <div class="col-xl-12 d-flex justify-content-center">
                <div class="breadcrumb__content">
                    <h3 class="title">{{ $global_page_item->services_page_title }}</h3>
                </div>
            </div>
            <div class="col-xl-12 d-flex justify-content-center">
                <div class="breadcrumb-wrap">
                    <nav class="breadcrumb">
                        <span property="itemListElement" typeof="ListItem">
                            <a href="{{ url('/') }}">{{ __('Home') }}</a>
                        </span>
                        <span class="breadcrumb-separator">/</span>
                        <span property="itemListElement" typeof="ListItem">{{ $global_page_item->services_page_title }}</span>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- breadcrumb-area-end -->


<!--==============================
Service Area
==============================-->
<section class="service-area-1 pt-120 pb-120 position-relative">
    <div class="container">
        <div class="row gy-30 justify-content-center">
    @foreach($services as $service)
    <div class="col-lg-4 col-md-6">
        <div class="service-card style4">
            <div class="box-content">
                <div class="box-icon">
                    {!! $service->icon_code !!}
                </div>

                <h3 class="box-title">
                    <a href="{{ route('service',$service->slug) }}">{{ $service->name }}</a>
                </h3>

                <p class="box-text">
                    {!! nl2br($service->short_description) !!}
                </p>

                <!-- Call To Action Button -->
                <div class="tg-button-wrap mt-20">
                    <a href="https://wa.me/2348133524698?text=Hello%20Coach%20Makarios,%20I%20would%20like%20to%20register%20my%20business.%20Please%20guide%20me." class="btn" target="_blank" >
                        <span class="btn-text">
                            Request Service
                        </span>
                    </a>
                </div>

            </div>
        </div>
    </div>
    @endforeach
</div>
        @if($services->hasPages())
        <div class="row gy-30">
            <div class="col-md-12 d-flex justify-content-center">
                <div class="pagination__wrap mt-60">
                    <ul class="list-wrap d-flex flex-wrap">
                        @php
                            $current = $services->currentPage();
                            $last = $services->lastPage();
                        @endphp
                        @if(!$services->onFirstPage())
                            <li>
                                <a href="{{ $services->previousPageUrl() }}" class="page-numbers">
                                    <svg width="15" height="13" viewBox="0 0 15 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M6 1L0 7M0 7L6 13M0 7H15" stroke="currentColor" stroke-width="1.5"/>
                                    </svg>
                                </a>
                            </li>
                        @endif
                        @for($page=1;$page<=$last;$page++)
                            @if($page === $current)
                                <li><span class="page-numbers current">{{ sprintf('%02d', $page) }}</span></li>
                            @else
                                <li><a href="{{ $services->url($page) }}" class="page-numbers">{{ sprintf('%02d', $page) }}</a></li>
                            @endif
                        @endfor
                        @if($services->hasMorePages())
                            <li>
                                <a href="{{ $services->nextPageUrl() }}" class="page-numbers">
                                    <svg width="15" height="13" viewBox="0 0 15 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M9 1L15 7M15 7L9 13M15 7H0" stroke="currentColor" stroke-width="1.5"/>
                                    </svg>
                                </a>
                            </li>
                        @endif
                    </ul>
                </div>
            </div>
        </div>
        @endif
    </div>
</section>
<!--======== / Service Section ========-->

<!--==============================
Faq Area
==============================-->
<section class="faq-area pt-120 pb-120" style="background: linear-gradient(135deg,#f5f7fa,#e4ecf7);">
    <div class="container">

        <!-- Section Heading -->
        <div class="row justify-content-center text-center mb-50">
            <div class="col-lg-8">
                <div class="section-title">
                    <h2>Frequently Asked Questions</h2>
                    <p>Find answers to some of the most common questions about our services.</p>
                </div>
            </div>
        </div>

        <div class="row gy-5 gx-80 justify-content-between align-items-center">
            <div class="col-xl-12">
                <div class="accordion-area accordion" id="faqAccordion">

                    @foreach($faqs as $key => $faq)
                    <div class="accordion-card {{ $key == 0 ? 'active' : '' }}">
                        
                        <div class="accordion-header" id="collapse-item-{{ $key+1 }}">
                            <button class="accordion-button {{ $key != 0 ? 'collapsed' : '' }}" 
                                type="button" 
                                data-bs-toggle="collapse" 
                                data-bs-target="#collapse-{{ $key+1 }}" 
                                aria-expanded="{{ $key == 0 ? 'true' : 'false' }}" 
                                aria-controls="collapse-{{ $key+1 }}">
                                
                                {{ $loop->iteration < 10 ? '0'.$loop->iteration : $loop->iteration }}. 
                                {{ $faq->question }}

                            </button>
                        </div>

                        <div id="collapse-{{ $key+1 }}" 
                             class="accordion-collapse collapse {{ $key == 0 ? 'show' : '' }}" 
                             aria-labelledby="collapse-item-{{ $key+1 }}" 
                             data-bs-parent="#faqAccordion">

                            <div class="accordion-body">
                                <p class="faq-text">
                                    {!! nl2br($faq->answer) !!}
                                </p>
                            </div>

                        </div>

                    </div>
                    @endforeach

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

    </div>
</section>
<!--======== / Faq Section ========-->

@if($payments->count())

<section class="payment-section mt_50">

<div class="container">

<h3 class="text-center mb-5 text-white">Bank Transfer Details</h3>

<div class="row">

@foreach($payments as $payment)

<div class="col-md-6 mb-4">

<div class="payment-card">

<p><strong>Bank Name:</strong> {{ $payment->bank_name }}</p>

<p><strong>Account Name:</strong> {{ $payment->account_name }}</p>

<p><strong>Account Number:</strong> {{ $payment->account_number }}</p>

</div>

</div>

@endforeach

</div>

</div>

</section>

@endif

@endsection