@extends('home.layout.app')

@section('title', 'Services')

@section('content')
<main>
    <section class="our-service">
        <div class="container">
            <div class="ark__warehouse--wrap">
                <div class="ark__about__heading">
                    <h3><span class="ark__brick--red">Our
                        </span> Services</h3>
                    <p>B612 Freight Forwarder is obsessed with educating the customer, ensuring solutions get
                        implemented correctly and also with long term relationship building.
                    </p>
                </div>
                <a class="ark__btn" href="#">
                    <span class="ark__btn-text">QUOTE</span>
                    <span class="ark__btn-icon">
                        <img src="{{ asset('assets/images/btn-arrow.svg') }}" alt="icon">
                    </span>
                </a>
            </div>
        </div>
    </section>
    <div class="ark__hero--banner-img ark_aboutpage_banner">
        <img src="{{ asset('assets/images/service-banner.jpg') }}" alt="service-banner">
    </div>

    @foreach($services as $service)
    <section class="ark_service-sec ark__AboutUs--section section-padding--main">
        <div class="container">
            <div class="ark__about__inner">

                {{-- Service Title --}}
                <h2 class="ark__about__title ark__btm--spacing">
                    {{ $service->title }}
                </h2>

                <div class="ark__about__hero">

                    {{-- LEFT --}}
                    <div class="ark__about__hero-left">
                        <div class="ark__about--Forwarder-main">

                            {{-- Special Services / Bullet Points --}}
                            @if(!empty($service->list_items))
                            <div class="ark__about__special-services">
                                <h4>{{ $service->subtitle }}</h4>

                                <ul>
                                    @foreach($service->list_items as $item)
                                    <li>
                                        <span>&#10022;</span>
                                        {{ $item }}
                                    </li>
                                    @endforeach
                                </ul>
                            </div>
                            @endif

                            {{-- Gallery Thumbnails --}}
                            @if(!empty($service->gallery_images))
                            <div class="ark__about__thumbs" aria-hidden="true">
                                @foreach(array_slice($service->gallery_images, 0, 2) as $thumb)
                                <div class="ark__about__thumb">
                                    <img src="{{ asset('storage/' . $thumb) }}" alt="">
                                    <span class="ark__about__thumb-overlay"></span>
                                </div>
                                @endforeach
                            </div>
                            @endif

                        </div>
                    </div>

                    {{-- RIGHT --}}
                    <div class="ark__about__hero-right">

                        {{-- Main Image --}}
                        @if($service->main_image)
                        <div class="ark__about__hero-image">
                            <img
                                src="{{ asset('storage/' . $service->main_image) }}"
                                alt="{{ $service->title }}">
                            <span class="ark__about__image-overlay"></span>
                        </div>
                        @endif

                        {{-- Description --}}
                        <div class="service-text-wp">
                            <p class="ark__about__description">
                                {!! $service->description !!}
                            </p>
                        </div>

                    </div>

                </div>
            </div>
        </div>
    </section>
    @endforeach



</main>
@endsection