@section('title', 'Services - PYPA'){{-- Site Main Section --}}
@section('seo_section')
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Services | {{ \App\Models\InfoSection::pluck('site_title')->first() }}</title>
    <meta name="robots" content="index, follow">
    <meta name="description"
        content="{{ \App\Models\InfoSection::pluck('site_title')->first() }} offers a comprehensive range of customer care support services, including operator and dispatcher services tailored for cab firms across the United Kingdom. Our solutions ensure efficient operations and outstanding customer satisfaction.">
    <meta name="keywords"
        content="Customer Care Services, Dispatcher Services, Operator Services, UK Cab Firms, Cab Operations, Professional Support, Customer Satisfaction, {{ \App\Models\InfoSection::pluck('site_title')->first() }} Services">
    <meta name="robots" content="follow, index, max-snippet:-1, max-video-preview:-1, max-image-preview:large">
    <link rel="canonical" href="{{ route('services') }}">
    <meta property="og:locale" content="en_US">
    <meta property="og:type" content="website">
    <meta property="og:title"
        content="Services | {{ \App\Models\InfoSection::pluck('site_title')->first() }} - Comprehensive Customer Care Solutions">
    <meta property="og:description"
        content="{{ \App\Models\InfoSection::pluck('site_title')->first() }} offers a comprehensive range of customer care support services, including operator and dispatcher services tailored for cab firms across the United Kingdom. Our solutions ensure efficient operations and outstanding customer satisfaction.">
    <meta property="og:url" content="{{ route('services') }}">
    <meta property="og:site_name" content="{{ \App\Models\InfoSection::pluck('site_title')->first() }}">
    <meta property="og:updated_time" content="{{ now() }}">
    <meta property="og:image" content="{{ Storage::disk('public')->url('frontend/logo/' . $infoSection->logo) }}">
    <meta property="og:image:secure_url"
        content="{{ Storage::disk('public')->url('frontend/logo/' . $infoSection->logo) }}">
    <meta property="og:image:width" content="1379">
    <meta property="og:image:height" content="1379">
    <meta property="og:image:alt" content="{{ \App\Models\InfoSection::pluck('site_title')->first() }} Logo">
    <meta property="og:image:type" content="image/jpeg">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title"
        content="Services | {{ \App\Models\InfoSection::pluck('site_title')->first() }} - Comprehensive Customer Care Solutions">
    <meta name="twitter:description"
        content="{{ \App\Models\InfoSection::pluck('site_title')->first() }} offers a comprehensive range of customer care support services, including operator and dispatcher services tailored for cab firms across the United Kingdom. Our solutions ensure efficient operations and outstanding customer satisfaction.">
    <meta name="twitter:image" content="{{ Storage::disk('public')->url('frontend/logo/' . $infoSection->logo) }}">
    <meta name="twitter:label1" content="Expertise">
    <meta name="twitter:data1" content="Customer Care Support">
    <meta name="twitter:label2" content="Focus Area">
    <meta name="twitter:data2" content="Cab Operations">
    <script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "Organization",
    "name": "{{\App\Models\InfoSection::pluck('site_title')->first()}}",
    "url": "https://kreashionsoftwarehouse.com",
    "logo": "{{Storage::disk('public')->url('frontend/logo/'.$infoSection->logo)}}",
    "description": "{{\App\Models\InfoSection::pluck('site_title')->first()}} offers a comprehensive range of customer care support services, including operator and dispatcher services tailored for cab firms across the United Kingdom. Our solutions ensure efficient operations and outstanding customer satisfaction.",
    "contactPoint": {
      "@type": "ContactPoint",
      "telephone": "{{\App\Models\InfoSection::pluck('phone')->first()}}",
      "contactType": "Customer Service",
      "areaServed": "United Kingdom",
      "availableLanguage": ["English"]
    },
    "aggregateRating": {
      "@type": "AggregateRating",
      "ratingValue": "5",
      "bestRating": "5",
      "ratingCount": "150"
    }
}
</script>
@endsection

@extends('frontend.layout.main')
@section('main-section')
    <div class="sub-banner-section-outer">

        {{-- Preloader --}}
        <x-frontend.preloader></x-frontend.preloader>
        <!--  Preloader End -->

        <!-- Theme Switcher Start -->
        <div class="switch-theme-mode">
            <label id="switch" class="switch">
                <input type="checkbox" onchange="toggleTheme()" id="slider">
                <span class="slider round"></span>
            </label>
        </div>
        <!-- Theme Switcher End -->

        <!-- Custom Cursor -->
        <div class="cursor style-one"></div>
        <div class="cursor-inner style-one"></div>
        <!-- MAIN HEADER -->
        <x-frontend.navbar></x-frontend.navbar>
        <!-- BANNER -->
        {{-- BreadCrumb --}}
        <x-frontend.bread-crumb>
            <x-slot name="image">images/hero-slide-2.jpg</x-slot>
            <x-slot name="title">Services</x-slot>
            <li class="position-relative fs-xx-14 d-inline-block">Services</li </x-frontend.bread-crumb>
    </div>

    <!-- Hospital Section Start -->
    <div class="container style-one">
        <div class="row">
            <div class="col-xxl-12 col-xl-8 order-xl-2 order-xl-1 ps-xxl-4">
                <div class="hospital-card-wrap ">
                    @forelse ($services as $service)
                        @if ($service->is_active)
                    @php
                            $shareUrl = route('singleservice', ['slug' => $service->slug]) 
                                                    @endphp
                            <div class="hospital-card style-five round-20 mb-30 transition">
                                <div class="hospital-img position-relative round-10 "
                                    style="height:400px !important; object-fit:cover; overflow:hidden;">
                                    <img src="{{ asset('storage/products/' . $service->image) }}"
                                        alt="{{ $service->title }}" class="round-10">

                                    <div class="share-action d-flex flex-wrap position-absolute">
                                        <div class="share-btn position-relative">
                                            <span
                                                class="d-flex flex-column align-items-center justify-content-center round-5 bg-white text-title fs-22">
                                                <i class="ri-share-line"></i>
                                            </span>
                                            <ul class="social-profile list-unstyled mb-0 transition">
                                                <li>
                                                    <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode($shareUrl) }}"
                                                       target="_blank"
                                                       class="d-flex flex-column align-items-center justify-content-center round-5 transition">
                                                        <i class="ri-facebook-fill"></i>
                                                    </a>
                                                </li>

                                                <!-- X (Twitter) -->
                                                <li>
                                                    <a href="https://twitter.com/intent/tweet?url={{ urlencode($shareUrl) }}"
                                                       target="_blank"
                                                       class="d-flex flex-column align-items-center justify-content-center round-5 transition">
                                                        <i class="ri-twitter-x-line"></i>
                                                    </a>
                                                </li>

                                                <!-- WhatsApp -->
                                                <li>
                                                    <a href="https://wa.me/?text={{ urlencode($shareUrl) }}"
                                                       target="_blank"
                                                       class="d-flex flex-column align-items-center justify-content-center round-5 transition">
                                                        <i class="ri-whatsapp-fill"></i>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>

                                    </div>

                                </div>

                                <div class="hospital-info">
                                    
                                    <h3 class="fs-24 fw-extrabold mb-15">
                                        <a href="{{ route('singleservice', ['slug' => $service->slug]) }}"
                                            class="text-title hover-text-primary link-hover-primary transition">
                                            {{ $service->title }}
                                        </a>
                                    </h3>

                                    <p class="mb-15">
                                        {!! $service->short_desc !!}
                                    </p>

                                    @if ($service->show_price)
                                        <div class="mb-15">
                                            @if ($service->sale_price && $service->sale_price != $service->price)
                                                <span class="text-decoration-line-through">
                                                    PKR {{ $service->price }}
                                                </span>
                                                <span class="fw-bold ms-2">
                                                    PKR {{ $service->sale_price }}
                                                </span>
                                            @else
                                                <span class="fw-bold">
                                                    PKR {{ $service->price }}
                                                </span>
                                            @endif
                                        </div>
                                    @endif
                                    {{-- {{ route('services.show', $service->slug) }} --}}
                                    <a href=" {{ route('singleservice', ['slug' => $service->slug]) }}"
                                        class="btn style-three font-secondary fw-semibold position-relative z-1 round-10">
                                        <span>
                                            View Details
                                            <img src="{{ asset('images/long-arrow-right-green.svg') }}" alt="Icon"
                                                class="transition icon-left">
                                        </span>
                                        <img src="{{ asset('images/long-arrow-right-green.svg') }}" alt="Icon"
                                            class="transition icon-right">
                                    </a>
                                </div>
                            </div>
                        @endif
                    @empty
                        <div class="col-12 text-center">
                            <p class="text-muted">No services available at the moment.</p>
                        </div>
                    @endforelse


                </div>

            </div>
        </div>
    </div>
    <!-- Hospital Section End -->

    <!-- Brand Section Start -->
    
    <!-- Brand Section End -->


    <x-frontend.footer></x-frontend.footer>

    <!-- Back to Top -->
    <div id="progress-wrap" class="progress-wrap style-one">
        <svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
            <path id="progress-path" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
        </svg>
    </div>
@endsection