@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="mb-5" style="position: absolute; right: 0px; padding-right: 60px;">
        <div class="col-1">
            <a href="{{ route('service-request-catalogue') }}" class="btn btn-outline-danger"> Back</a>
        </div>
    </div>-->
    <div class="row">
        <div class="col-12 mb-5">
            <center>
                <h1>Explore Our Services Sub Categories</h1>
                <p>SLSI has 58+ years of experience with providing wide area of specialty services listed below.</p>
            </center>
            <a href="{{ route('service-request-catalogue') }}" class="btn btn-outline-danger" style="float: right;"> Back</a>
        </div>
    </div>

    <div class="row service-subcategory-wrapper">
        @if ($serviceSubCategories->count() != 0)
            @foreach ($serviceSubCategories as $serviceSubCategory)
                <!--<div class="col-12 col-lg-4 col-md-3 mb-5 service-subcat-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">
                                    {{ $serviceSubCategory->service_sub_category_name }}
                                </div>
                                <p style="font-size: 0.7rem">
                                    {{ $serviceSubCategory->ServiceCategory['service_category_name'] }}</p>
                                <a href="{{ url('/service-catalogue/' . Str::slug($serviceSubCategory->ServiceCategory->service_category_name, '-') . '/' . Str::slug($serviceSubCategory->service_sub_category_name, '-') . '/services') }}"
                                    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-4 col-md-3 mb-5 service-subcat-box">
                    <div class="card">
                        <div class="card-body">
                               <div class="col-12 cta-3 text-black title">
                                    {{ $serviceSubCategory->service_sub_category_name }}
                                </div>
                                <p style="font-size: 0.7rem">
                                    {{ $serviceSubCategory->ServiceCategory['service_category_name'] }}</p>
                                <a href="{{ url('/service-catalogue/' . Str::slug($serviceSubCategory->ServiceCategory->service_category_name, '-') . '/' . Str::slug($serviceSubCategory->service_sub_category_name, '-') . '/services') }}"
                                    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 ($serviceSubCategories->count() == 0)
            @php
                $url = request()->path();
                $urlParts = explode('/', $url);
                $categoryName = end($urlParts);
                $categoryName = str_replace('-', ' ', $categoryName);
                $categoryName = ucwords($categoryName);
            @endphp

            <div class="row">
                <div class="col-12 text-center">
                    <h4 class="text-danger">No records were found</h4>
                </div>
                {{-- <div class="col-12 text-center">
                    <p class="text-danger">{{ $categoryName }} Category</p>
                </div> --}}
            </div>
        @endif

    </div>




    {{-- <div class="row">
        @foreach ($serviceCategories as $serviceCategory)
            <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">
                                {{ $serviceCategory->service_category_name }}
                            </div>
                            <a href="{{ url('/service-catalogue/' . Str::slug($serviceCategory->service_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> --}}
@endsection
@section('footer_scripts')
    <script type="text/javascript"></script>
@endsection