@extends('website.includes.master')

@section('title')
    Services
@endsection

@section('content')

    <style>
        .service-page {
            position: relative;
            display: block;
            padding: 25px 0 45px;
            background: #ffffff;
            overflow: hidden;
            z-index: 10;
        }

    </style>

    <!--Start breadcrumb area paroller-->
    <section class="breadcrumb-area">
        <div class="breadcrumb-area-bg"
             style="background-image: url({{URL::asset('admin/assets/uploads/'.$banner->image)}});">
        </div>
        <div class="shape-box"></div>
        <div class="container">
            <div class="row">
                <div class="col-xl-12">
                    <div class="inner-content">

                        <div class="breadcrumb-menu">
                            <ul>
                                <li><a href="{{ route('/') }}">Home</a></li>
                                <li class="active">Services</li>
                            </ul>
                        </div>
                        <div class="title" data-aos="fade-up" data-aos-easing="linear" data-aos-duration="1500">
                            <h2>Services</h2>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--End breadcrumb area-->

    <!--Start Service Page -->
    <section class="service-page">
        <div class="container">
            <div class="row">
                @forelse($services as $service)
                    <div class="col-xl-4 col-lg-4 wow fadeInUp" data-wow-delay="00ms" data-wow-duration="1500ms">
                        <div class="single-service-style2">
                            <div class="img-holder">
                                <a href="{{ route('servicesdetail',$service->id) }}">
                                    <div class="inner">
                                        <img src="{{URL::asset('admin/assets/uploads/'.$service->image)}}"
                                             alt="{{ $service->heading }}" style="width:100%;height:350px">
                                    </div>
                                </a>
                                <div class="icon">
                                    <span class="{{ $service->icon }}"></span>
                                </div>
                            </div>
                            <div class="title-holder" style="min-height:350px;max-height:350px">
                                <h3><a href="{{ route('servicesdetail',$service->id) }}">{{ $service->heading }}</a>
                                </h3>
                                <div class="text">
                                    <p>
                                        {!! Str::limit($service->about,100) !!}
                                    </p>
                                </div>
                                <div class="row">
                                    <div class="col-md-9 col-8"></div>
                                    <div class="col-md-3 col-4">
                                        <div class="btn-box text-right justify-content-end">
                                            <a href="{{ route('servicesdetail',$service->id) }}"><span
                                                        class="icon-right-arrow"></span></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @empty
                @endforelse
            </div>
        </div>
    </section>
    <!--End Service Page-->

@endsection