@extends('Website.Layout.App')

@push('css')
    <link href="{{ asset('assets/css/custom/all-service.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/css/custom/common.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/css/custom/service.css') }}" rel="stylesheet">
@endpush

@section('content')
<div class="jumbotron text-center bg-body-tertiary">
    <div class="container">
        <h1 class="text-body-emphasis">Services</h1>
    </div>
</div>

    <div class="container">
        <div class="row py-5">
            <div class="col-md-2 filter p-0 m-0">
                <div class="filter-by-category">
                    <h5>filter by Categories</h5>
                    <div class="list-group">
                        @foreach($categoriesData as $c)
                            <label class="list-group-item d-flex gap-2">
                            <input type="checkbox" 
                                    class="form-check-input flex-shrink-0"
                                    id="category_id_{{$c->uid}}" 
                                    name="categories[]"
                                    value="{{$c->uid}}">
                            <span>
                                {{$c->category_name}}
                            </span>
                        </label>
                        @endforeach
                    </div>
                </div>
            </div>
            <div class="col-md-10">
                <div class="services-list pb-2">
                    @foreach ($categoriesData as $c)
                        @if($c->show_on_offering==1)
                            <div class="service-category-group-div">
                                <div class="service-category-list">
                                    @if(count($c->services))
                                        @foreach ($c->services as $s)
                                            @if($s->show_on_offering==1)
                                                <div class="service-div service-div-w-300 service-div-h-150">
                                                    <a href="{{url('service/'.$s->slug)}}">
                                                        <div class="service-header">
                                                        
                                                            <div class="service-icon">
                                                                <i class="{{ $s->service_icon }}"></i>
                                                            </div>
                                                            <div class="service-name">
                                                                {{ $s->service_name }}
                                                            </div>
                                                        </div>
                                                    </a>
        
                                                    <div class="service-body">
                                                        
                                                        <div class="service-cost-div">
                                                            <div class="display-cost">
                                                                @if($s->display_cost && $s->display_cost > 0)
                                                                    <s>     
                                                                        Rs.{{ $s->display_cost }}
                                                                    </s>
                                                                @endif
                                                            </div>
                                                            <div class="service-cost">
                                                                Rs. {{ $s->service_cost }}
                                                            </div>
                                                        </div>
        
                                                    <div class="service-buttons">