@extends('web_theme::layout.main')

@php
    $title = $service && $service->title
        ? $service->title . ' Services | El DiDi Group'
        : 'Our Services | El DiDi Group';

    $description = $service && $service->description
        ? \Illuminate\Support\Str::limit(strip_tags($service->description), 150)
        : 'Explore professional services offered by El DiDi Group.';

    $ogImage = !empty($service->photo)
        ? asset($service->photo)
        : asset('themes/web/assets/images/logo.png');
@endphp

@section('title', $title)
@section('meta_description', $description)
@section('og_image', $ogImage)

@push('schema')
@php $schemas = [
    \App\Services\SchemaService::service($service),
    \App\Services\SchemaService::breadcrumb([
        ['name' => 'Home',     'url' => '/'],
        ['name' => 'Services', 'url' => '/services'],
        ['name' => $service->title, 'url' => '/service-details/' . $service->slug . '/' . $service->id],
    ]),
]; @endphp
@include('schema')
@endpush

@section('content')
    <!-- Page Title -->
    <section class="page-title">
        <div class="content" style="background-image: url('{{ asset($serviceHeaderImg) }}');">
        </div>
    </section>
    <!-- End Page Title -->

    <!-- Sidebar Page Container -->
    <div class="sidebar-page-container">
        <div class="auto-container">
            <h1 class="page-title" style="text-align: center">{{ $service->title }}</h1>
            <br><br>
            <div class="row clearfix">

                <!-- Content Side -->
                <div class="content-side col-lg-12 col-md-12 col-sm-12">
                    <div class="service-detail">
                        <div class="inner-box">
                            <div class="image">
                                <img src="{{ asset($service->photo) }}" alt="{{ $service->title }}" width="510" height="600" loading="lazy" style="aspect-ratio: 510/600;" />
                            </div>
                            <!-- Upper Box -->
                            <h4>{{ $service->title }}</h4>
                            {!! $service->description !!}
                            {{-- <div class="upper-box">
                                <div class="box-inner">
                                    <a href="request-quote.html" class="theme-btn btn-style-two"><span class="txt">Get A
                                            Quote</span></a>
                                </div>
                            </div> --}}
                        </div>
                    </div>
                </div>

                <!-- Sidebar Side -->
                {{-- <div class="sidebar-side col-lg-4 col-md-12 col-sm-12">
                    <aside class="sidebar sticky-top">

                        <!-- Search -->
                        <div class="sidebar-widget search-box">
                            <form method="get" action="{{ route('web.categories') }}">
                                <div class="form-group">
                                    <input type="search" name="search" value="{{ request('search') }}" placeholder="Search here..."
                                        required>
                                    <button type="submit"><span class="icon fa fa-search"></span></button>
                                </div>
                            </form>
                        </div>

                        <!-- Categories Widget -->
                        <div class="sidebar-widget categories-widget">
                            <div class="widget-content">
                                <!-- Sidebar Title -->
                                <div class="title-box">
                                    <h4>Product Categories</h4>
                                </div>
                                <ul class="blog-cat-two">
                                    @foreach ($all_categories as $category)
                                        <li><a href="{{ route('web.categories.show', [$category->slug, $category->id]) }}">
                                                {{ $category->name }}<span>{{ $category->products->count() }}</span></a></li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                    </aside>
                </div> --}}

            </div>
            <i class="fa fa-bar-chart" aria-hidden="true"> Visitors Counter : <span
                    class="post-views-count">{{ $service->views }}</span></i>
        </div>
    </div>
    <!-- End Sidebar Page Container -->
@endsection