@extends('layouts.frontend')
@section('headerMeta')
<title>{{ $metaTitle }}</title>

<meta name="title" content="{{ $metaTitle }}">
<meta name="description" content="{{ $metaDescription }}">
<meta name="keywords" content="{{ $metaKeywords }}">

<meta name='og:title' content="{{ $metaTitle }}">
<meta name='og:image' content="{{ asset( $metaImage) }}">
<meta name='og:site_name' content="{{ $metaTitle }}">
<meta name='og:description' content="{{ $metaDescription }}">
@endsection

@section('content')
@include('layouts.frontend-partial.breadcrumb')

<section class="sectionGap lg:pt-16">
    <div class="container ">
        <div class="grid lg:grid-cols-12 items-start gap-6 md:gap-8 lg:gap-10">
            <div data-aos="fade-up" data-aos-duration="1000"
                class="bg-gray-50 lg:col-span-12 aspect-video lg:aspect-[16/6] rounded-xl md:rounded-2xl lg:rounded-3xl overflow-hidden">

                @if (!empty($info->images))
                <img src="{{ asset($info->images) }}" class="size-full object-cover object-top"
                    alt="{{ $info->tag_title }}">
                @endif
            </div>

            <div class="bg-[#f6f3fe] lg:col-span-4 p-5 rounded lg:sticky lg:top-20">
                <h4 class="text-2xl text-darkblue font-semibold mb-5">
                    All Services
                </h4>

                <div class="space-y-3">
                    @foreach ($services as $service)
                    <a href="{{ url('service', $service->page_url) }}"
                        class="group py-4 px-6 bg-white rounded text-darkblue hover:bg-primary hover:text-white duration-300 flex items-center justify-between {{request()->segment(2) == $service->page_url ? '!bg-primary text-white shadow-lg' : ''}}">
                        <h5 class="text-lg font-semibold ">
                            {{ !empty($service->serviceCategory->name) ? $service->serviceCategory->name : '' }}
                        </h5>
                        <span class="text-2xl group-hover:text-white group-hover:translate-x-1 duration-300">
                            {!! config('icons.arrowRightLine') !!}
                        </span>
                    </a>
                    @endforeach
                </div>
            </div>

            <div class="grid gap-10 lg:col-span-8">
                <div class="space-y-3" data-aos="fade-up" data-aos-duration="1000">
                    <h1 class="sectionTitle lg:text-4xl mb-2">
                        {{ !empty($info->title) ? $info->title : '' }}
                    </h1>

                    <p>{{ !empty($info->subtitle) ? $info->subtitle : '' }}</p>

                    <div>
                        {{ !empty($info->short_description) ? $info->short_description : '' }}
                        <p>{{ !empty($info->tag_title) ? $info->tag_title : '' }}</p>
                    </div>

                    @if (!empty($info->tags) && $info->tags != 'null')
                    @php($feature = json_decode($info->tags))
                    <ul
                        class="grid {{ count($feature) > 10 ? 'lg:grid-cols-3 md:grid-cols-2' : (count($feature) > 5 ? ' md:grid-cols-2' : 'grid-cols-1') }} ">
                        @foreach ($feature as $tag)
                        <li class="relative text-lg flex items-center gap-2 mb-2.5">
                            <svg class="text-primary" stroke="currentColor" fill="currentColor" stroke-width="0"
                                viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M19.965 8.521C19.988 8.347 20 8.173 20 8c0-2.379-2.143-4.288-4.521-3.965C14.786 2.802 13.466 2 12 2s-2.786.802-3.479 2.035C6.138 3.712 4 5.621 4 8c0 .173.012.347.035.521C2.802 9.215 2 10.535 2 12s.802 2.785 2.035 3.479A3.976 3.976 0 0 0 4 16c0 2.379 2.138 4.283 4.521 3.965C9.214 21.198 10.534 22 12 22s2.786-.802 3.479-2.035C17.857 20.283 20 18.379 20 16c0-.173-.012-.347-.035-.521C21.198 14.785 22 13.465 22 12s-.802-2.785-2.035-3.479zm-9.01 7.895-3.667-3.714 1.424-1.404 2.257 2.286 4.327-4.294 1.408 1.42-5.749 5.706z">
                                </path>
                            </svg>
                            {{ !empty($tag) ? $tag : '' }}
                        </li>
                        @endforeach
                    </ul>
                    @endif

                    <div class="lg:pt-5 ">
                        <a class="primary-btn" data-text="Get Started" href="{{ url('contact') }}"
                            title="service button">
                            Get Started
                        </a>
                    </div>
                </div>
                <div data-aos="fade-up" data-aos-duration="1000"
                    class="prose-ul:p-0 prose-ol:p-0  prose-ol:grid prose-ul:grid lg:prose-ul:grid-cols-2 lg:prose-ol:grid-cols-2 prose-ul:gap-x-24 prose-li:pb-1 prose-ul:pt-4 prose-ul:pb-6 lg:prose-ul:pb-10 prose-h1:serviceSubTitle  prose-h2:serviceSubTitle  prose-h3:serviceSubTitle  prose-h3:text-3xl prose-h4:text-2xl prose-h5:text-xl  prose-li:list-disc prose-ol:list-inside  prose-ul:list-inside prose-h1:font-body prose-h2:font-body prose-h3:font-body prose-h4:font-body prose-li:mb-2 prose-p:mb-2">
                    {!! (!empty($info->description) ? $info->description : "") !!}
                </div>
            </div>
        </div>
    </div>
</section>

{{-- Pricing Section --}}
@include('layouts.frontend-partial.pricing')

@endsection