@extends('layouts.app')

@section('content')
    @include('includes.sub_header', ['page_name' => ' SERVICES', 'page_title' => 'OUR SERVICES'])

    <div id="content">
        <div class="container pt-4">
            @forelse($services as $category => $servicesOnly)
                <div class="service-container">
                    <h2 class="fw-bold text-secondary std-h2 text-uppercase mb-0">
                        {{ getServiceCategoryName($category) }}
                    </h2>
                    <hr />
                    <div class="row g-lg-5 g-4">
                        @foreach ($servicesOnly as $service)
                            <div class="col-md-6">
                                <h3><span class="id-color fw-bold">{{ $service->name }}</span></h3>
                                <a class="d-block overflow-hidden" href="{{ $service->image }}">
                                    <img src="{{ $service->image }}" class="img-responsive service-img"
                                        alt="{{ $service->slug }}" />
                                </a>
                                <div class="spacer-single"></div>
                                <a href="{{ route('services.show', $service->slug) }}" class="btn-line btn-fullwidth">MORE
                                    DETAILS</a>
                            </div>
                        @endforeach
                    </div>
                </div>
                <div class="spacer-double"></div>
            @empty
                <div class="service-container">
                    <h2 class="fw-bold text-secondary std-h2 text-uppercase mb-0">
                        CONCEPT DESIGN
                    </h2>
                    <hr />
                    <div class="row g-lg-5 g-4">
                        <div class="col-md-6">
                            <h3><span class="id-color fw-bold">Interior</span> Design</h3>
                            <a class="d-block overflow-hidden" href="#">
                                <img src="images/misc/pic_3.jpg" class="img-responsive service-img" alt="" />
                            </a>
                            <div class="spacer-single"></div>
                            <a href="service-1.html" class="btn-line btn-fullwidth">MORE DETAILS</a>
                        </div>
                        <div class="col-md-6">
                            <h3><span class="id-color fw-bold">Exterior</span> Design</h3>
                            <a class="d-block overflow-hidden" href="#">
                                <img src="images/misc/pic_1.jpg" class="img-responsive service-img" alt="" />
                            </a>
                            <div class="spacer-single"></div>
                            <a href="service-2.html" class="btn-line btn-fullwidth">MORE DETAILS</a>
                        </div>
                    </div>
                </div>
                <div class="spacer-double"></div>
                <div class="service-container">
                    <h2 class="fw-bold text-secondary std-h2 text-uppercase mb-0">
                        DETAILED DESIGN
                    </h2>
                    <hr />
                    <div class="row g-lg-5 g-4">
                        <div class="col-md-6">
                            <h3><span class="id-color fw-bold">Civil</span> Works</h3>
                            <a class="d-block overflow-hidden" href="#">
                                <img src="images/misc/pic_3.jpg" class="img-responsive service-img" alt="" />
                            </a>
                            <div class="spacer-single"></div>
                            <a href="service-1.html" class="btn-line btn-fullwidth">MORE DETAILS</a>
                        </div>
                        <div class="col-md-6">
                            <h3><span class="id-color fw-bold">MEP</span> WORKS</h3>
                            <a class="d-block overflow-hidden" href="#">
                                <img src="images/misc/pic_1.jpg" class="img-responsive service-img" alt="" />
                            </a>
                            <div class="spacer-single"></div>
                            <a href="service-2.html" class="btn-line btn-fullwidth">MORE DETAILS</a>
                        </div>
                    </div>
                </div>
                <div class="spacer-double"></div>
                <div class="service-container">
                    <h2 class="fw-bold text-secondary std-h2 text-uppercase mb-0">
                        OTHER SERVICES
                    </h2>
                    <hr />
                    <div class="row g-lg-5 g-4">
                        <div class="col-md-6">
                            <h3>
                                <span class="id-color fw-bold">PROJECT</span> MANAGEMENT
                            </h3>
                            <a class="d-block overflow-hidden" href="#">
                                <img src="images/misc/pic_3.jpg" class="img-responsive service-img" alt="" />
                            </a>
                            <div class="spacer-single"></div>
                            <a href="service-1.html" class="btn-line btn-fullwidth">MORE DETAILS</a>
                        </div>
                        <div class="col-md-6">
                            <h3><span class="id-color fw-bold">Execution</span> Service</h3>
                            <a class="d-block overflow-hidden" href="#">
                                <img src="images/misc/pic_1.jpg" class="img-responsive service-img" alt="" />
                            </a>
                            <div class="spacer-single"></div>
                            <a href="service-2.html" class="btn-line btn-fullwidth">MORE DETAILS</a>
                        </div>
                    </div>
                </div>
            @endforelse

        </div>
    </div>
    <section id="view-all-projects" class="call-to-action bg-color text-center mt-5" data-speed="5" data-type="background"
        aria-label="view-all-projects">
        <a href="{{ route('contact.index') }}" class="btn btn-line black btn-big">Get Quotation</a>
    </section>
@endsection

@section('scripts')
@endsection