@extends("front.$version.layout")

@section('pagename')
    -
    @if (empty($category))
        {{ __('All') }}
    @else
        {{ $category->name }}
    @endif
    {{ __('Services') }}
@endsection

@section('meta-keywords', "$be->services_meta_keywords")
@section('meta-description', "$be->services_meta_description")

@section('breadcrumb-title', convertUtf8($bs->service_title))
@section('breadcrumb-subtitle', convertUtf8($bs->service_subtitle))
@section('breadcrumb-link', __('Services'))

@section('content')
<style>
    body {
        font-family: 'Hind Siliguri', sans-serif !important;
    }

    .service-card {
        background: #fff;
        border-radius: 0.75rem;
        box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.08);
        transition: all 0.3s ease-in-out;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .service-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.12);
    }

    .service-img-wrapper img {
        border-top-left-radius: 0.75rem;
        border-top-right-radius: 0.75rem;
        object-fit: cover;
        height: 200px;
        width: 100%;
    }

    .service-txt {
        padding: 1.25rem;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }

    .service-title a {
        font-size: 1.25rem;
        font-weight: 600;
        color: #212529;
        text-decoration: none;
        transition: color 0.2s;
    }

    .service-title a:hover {
        color: #198754;
    }

    .service-summary {
        color: #6c757d;
        margin-top: 0.5rem;
        margin-bottom: 1rem;
        flex-grow: 1;
    }

    .readmore-btn {
        background: #198754;
        border: none;
        border-radius: 0.375rem;
        padding: 0.5rem 1rem;
        font-weight: 500;
    }

    .readmore-btn:hover {
        background: #157347;
    }

    /* Sidebar styling */
    .category-widget {
        background: #fff;
        border-radius: 0.75rem;
        box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.08);
        padding: 1.25rem;
        margin-bottom: 2rem;
    }

    .category-widget h4 {
        font-size: 1.25rem;
        font-weight: 600;
        margin-bottom: 1rem;
        border-bottom: 2px solid #e9ecef;
        padding-bottom: 0.5rem;
    }

    .category-widget ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .category-widget li {
        margin-bottom: 0.75rem;
    }

    .category-widget li a {
        text-decoration: none;
        color: #495057;
        transition: color 0.2s;
    }

    .category-widget li a:hover {
        color: #198754;
    }

    .category-widget .active {
        background: #198754;
        border-radius: 0.5rem;
        padding: 0.5rem 0.75rem;
    }

    .category-widget .active a {
        color: #fff !important;
        font-weight: 600;
    }

    .subscribe-section {
        background: #198754;
        border-radius: 0.75rem;
        color: white;
        padding: 1.5rem;
        text-align: center;
    }

    .subscribe-section h3 {
        font-weight: 600;
        margin: 0.75rem 0;
    }

    .subscribe-form input[type="email"] {
        width: 100%;
        padding: 0.5rem;
        border-radius: 0.375rem;
        border: none;
        margin-bottom: 0.75rem;
    }

    .subscribe-form input[type="submit"] {
        background: #fff;
        color: #198754;
        border: none;
        padding: 0.5rem 1rem;
        border-radius: 0.375rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s;
    }

    .subscribe-form input[type="submit"]:hover {
        background: #e9ecef;
    }
</style>

<div class="service-section py-5">
    <div class="container">
        <div class="row g-4">
            <!-- Service List -->
            <div class="col-lg-8">
                <div class="row g-4">
                    @if (count($services) == 0)
                        <div class="col-12 bg-light py-5 rounded text-center">
                            <h3>{{ __('NO SERVICE FOUND') }}</h3>
                        </div>
                    @else
                        @foreach ($services as $service)
                            <div class="col-md-6">
                                <div class="service-card h-100">
                                    <div class="service-img-wrapper">
                                        <img class="lazy img-fluid"
                                             data-src="{{ asset('assets/front/img/services/' . $service->main_image) }}"
                                             alt="">
                                    </div>
                                    <div class="service-txt">
                                        <h4 class="service-title">
                                            <a @if ($service->details_page_status == 1)
                                                   href="{{ route('front.servicedetails', [$service->slug]) }}"
                                               @endif>
                                                {{ convertUtf8(strlen($service->title)) > 18 
                                                    ? convertUtf8(substr($service->title, 0, 18)) . '...' 
                                                    : convertUtf8($service->title) }}
                                            </a>
                                        </h4>
                                        <p class="service-summary">
                                            {{ strlen($service->summary) > 120 
                                                ? mb_substr($service->summary, 0, 120, 'utf-8') . '...' 
                                                : $service->summary }}
                                        </p>
                                        @if ($service->details_page_status == 1)
                                            <a href="{{ route('front.servicedetails', [$service->slug]) }}"
                                               class="readmore-btn btn btn-success mt-auto">{{ __('Read More') }}</a>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    @endif
                </div>

                <!-- Pagination -->
                <div class="row mt-5">
                    <div class="col-md-12 d-flex justify-content-center">
                        <nav>
                            {{ $services->appends(['category' => request()->input('category'), 'term' => request()->input('term')])->links() }}
                        </nav>
                    </div>
                </div>
            </div>

            <!-- Sidebar -->
            <div class="col-lg-4">
                @if (serviceCategory())
                    <div class="category-widget">
                        <h4>{{ __('Categories') }}</h4>
                        <ul>
                            @foreach ($scats as $scat)
                                <li class="{{ $scat->id == request()->input('category') ? 'active' : '' }}">
                                    <a href="{{ route('front.services', ['category' => $scat->id, 'term' => request()->input('term')]) }}">
                                        {{ convertUtf8($scat->name) }}
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <div class="subscribe-section">
                    <span class="fw-medium">{{ __('SUBSCRIBE') }}</span>
                    <h3>{{ __('SUBSCRIBE FOR NEWSLETTER') }}</h3>
                    <form id="subscribeForm" class="subscribe-form" action="{{ route('front.subscribe') }}" method="POST">
                        @csrf
                        <div class="form-element">
                            <input name="email" type="email" placeholder="{{ __('Email') }}">
                        </div>
                        <p id="erremail" class="text-danger mb-2 err-email"></p>
                        <div class="form-element">
                            <input type="submit" value="{{ __('Subscribe') }}">
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection