@extends('layouts.acorn.acorn_frontend_app')
@section('header_styles')
    <style>
        .hover-img-scale-up:hover {
            transform: scale(1.05);
        }

        .row {
            justify-content: center;
        }

        .card:hover {
            transform: scale(1.05);
        }

        .card-img-overlay {
            background-color: white !important;
        }

        .view-service-btn:hover {
            color: var(--primary) !important;
            background-color: var(--light-text) !important;
            box-shadow: initial !important;
            border: 1px solid var(--primary) !important;
        }
        .hover-img-scale-up{
            border: 1px solid var(--primary);
        }
    </style>
@endsection
@section('content')
    <div class="row">
        <div class="col-12 mb-5">
            <center>
                <h1>Explore Our Services Categories</h1>
                <p>{{ env('MAIL_FROM_SHORT_NAME') }} has 58+ years of experience with providing wide area of specialty services listed below.</p>
            </center>
        </div>
        
    </div>

    {{-- <div class="row">
        @foreach ($serviceSubCategories as $serviceSubCategory)
            <div class="col-12 col-md-3 mb-5">
                <div class="card w-100 sh-18 sh-md-22 hover-img-scale-up">
                    <div class="card-img-overlay d-flex flex-column justify-content-between col-12"
                        style="background-color: white;">
                        <div class="d-flex flex-column h-100 justify-content-between align-items-start">
                            <div class="col-12 cta-3 text-black">
                                {{ $serviceSubCategory->service_sub_category_name }}
                            </div>
                            <a href="{{ url('/service-catalogue/' . Str::slug($serviceSubCategory->service_sub_category_name, '-') . '/services') }}"
                                class="btn btn-icon btn-icon-start stretched-link btn-xl btn-outline-primary sw-30">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"
                                    fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
                                    stroke-linejoin="round" class="acorn-icons acorn-icons-chevron-right undefined">
                                    <path d="M7 4L12.6464 9.64645C12.8417 9.84171 12.8417 10.1583 12.6464 10.3536L7 16">
                                    </path>
                                </svg>
                                <span>View Services</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div> --}}

    <div class="mb-5">
        <div class="col-1">
            <a href="{{ route('service-request-service-list') }}" class="btn btn-primary"> Advanced Search</a>
        </div>
    </div>
    <div class="row service-category-wrapper">
        @if ($serviceCategories->count() != 0)
            @foreach ($serviceCategories as $serviceCategory)
                <!--<div class="col-12 col-lg-3 col-md-4 mb-5 service-cat-box">
                    <div class="card w-100 sh-18 sh-md-22 hover-img-scale-up">
                        <div class="card-img-overlay d-flex flex-column justify-content-between col-12">
                            <div class="d-flex flex-column h-100 justify-content-between align-items-start">
                                <div class="col-12 cta-3 text-black">
                                    {{ $serviceCategory->service_category_name }}
                                </div>
                                <a href="{{ url('/service-catalogue/' . Str::slug($serviceCategory->service_category_name, '-')) }}"
                                    class="btn scat-btn btn-icon btn-icon-start stretched-link btn-xl btn-primary sw-30 view-service-btn">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                                        viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5"
                                        stroke-linecap="round" stroke-linejoin="round"
                                        class="acorn-icons acorn-icons-chevron-right undefined">
                                        <path d="M7 4L12.6464 9.64645C12.8417 9.84171 12.8417 10.1583 12.6464 10.3536L7 16">
                                        </path>
                                    </svg>
                                    <span>View Services</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>-->

                <div class="col-12 col-lg-3 col-md-4 mb-5 service-cat-box">
                    <div class="card">
                        <div class="card-body">
                                <div class="col-12 cta-3 text-black title">
                                    {{ $serviceCategory->service_category_name }}
                                </div>
                                <a href="{{ url('/service-catalogue/' . Str::slug($serviceCategory->service_category_name, '-')) }}"
                                    class="btn scat-btn btn-icon btn-icon-start stretched-link btn-xl btn-primary sw-30 view-service-btn">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                                        viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5"
                                        stroke-linecap="round" stroke-linejoin="round"
                                        class="acorn-icons acorn-icons-chevron-right undefined">
                                        <path d="M7 4L12.6464 9.64645C12.8417 9.84171 12.8417 10.1583 12.6464 10.3536L7 16">
                                        </path>
                                    </svg>
                                    <span>View Services</span>
                                </a>
                            </div>
                    </div>
                </div>

            @endforeach
        @elseif ($serviceCategories->count() == 0)
            <div class="row">
                <div class="col-12 text-center">
                    <h4 class="text-danger">No records were found</h4>
                </div>
            </div>
        @endif
    </div>
@endsection
@section('footer_scripts')
    <script type="text/javascript"></script>
@endsection