@extends('website.includes.master')

@section('title')
    Services Detail
@endsection

@section('content')

    <style>
        .service-page {
            position: relative;
            display: block;
            padding: 8px 0 45px;
            background: #ffffff;
            overflow: hidden;
            z-index: 10;
        }
        .service-details__content .text-box1 {
            position: relative;
            display: block;
            margin-top: 10px;
        }
    </style>

    <style>
        .service-details__content .img-box1:hover::after {
             -webkit-animation: none !important;
             animation: none !important;
        }
    </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><a href="{{ route('services') }}">Services</a></li>
                            </ul>
                        </div>
                        <div class="title" data-aos="fade-up" data-aos-easing="linear" data-aos-duration="1500">
                            {{--                            <h2>{{ $service->heading }}</h2>--}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--End breadcrumb area-->


    <!--Start Service Details area -->
    <section class="service-page">
        <div class="container">
            <div class="row">

                <!--Start Service Details Sidebar -->
                <div class="col-xl-4 col-lg-5 order-box-2">
                    <div class="service-details__sidebar">

                        <div class="view-all-service">
                            <ul class="service-pages">
                                @forelse($allservices as $allservice)
                                    <li class="@if($allservice->id==$service->id) active @endif">
                                        <a href="{{ route('servicesdetail',$allservice->id) }}">
                                            {{ $allservice->heading }} <span class="icon-right-arrow"></span>
                                        </a>
                                    </li>
                                @empty
                                @endforelse
                            </ul>
                        </div>

                        <div class="service-details-contact-info text-center">
                            <div class="sidebar-info-box-bg"
                                 style="background-image: url({{URL::to('website/assets/images/sidebar/sidebar-info-box-bg.jpg')}});"></div>
                            <a href="tel:{{ $setting->phone }}">
                                <div class="icon">
                                    <span class="icon-phone-call"></span>
                                </div>
                            </a>
                            {{--                            <h3>Contact with<br> us for any<br> advice</h3>--}}
                            <h3>{{ $websitesetting->service_detail_test }}</h3>
                            <h2><a href="tel:{{ $setting->phone }}">{{ $setting->phone }}</a></h2>
                        </div>


                    </div>
                </div>
                <!--End Service Details Sidebar -->

                <!--Start Service Details Content -->
                <div class="col-xl-8 col-lg-7 order-box-1">
                    <div class="service-details__content">
                        <div class="img-box-outer">
                            <div class="img-box1">
                                <img src="{{URL::asset('admin/assets/uploads/'.$service->image)}}" alt=""/>
                            </div>
                            <div class="icon">
                                <span class="{{ $service->icon }}"></span>
                            </div>
                        </div>

                        <div class="text-box1">
                            <h2>{{ $service->heading }}</h2>
                            <p>
                                {!! $service->about !!}
                            </p>
                        </div>

                        <div class="single-sidebar-box">
                            <div class="sidebar-title">
                                <h3>Tags</h3>
                            </div>
                            <div class="popular-tag-box">
                                <ul class="popular-tag">
                                    @if(!empty($service->service_tags_data))
                                        @foreach($service->service_tags_data as $service_tags)
                                            <li><a>{{ $service_tags->tag }}</a></li>
                                        @endforeach
                                    @endif
                                </ul>
                            </div>
                        </div>

                        <div class="text-box4">
                            <div class="row">
                                <div class="col-xl-12">
                                    {!! $service->description !!}
                                </div>
                            </div>
                        </div>

                        @if(!empty($service->service_images))
                            <div class="row">
                                @forelse($service->service_images as $service_image)
                                    <div class="col-md-6 mb-3">
                                        <img src="{{URL::asset('admin/assets/uploads/'.$service_image->image)}}"
                                             style="width:100%;height:300px" alt="{{ $service->heading }}">
                                    </div>
                                @empty
                                @endforelse
                            </div>
                        @endif


                    </div>
                </div>
                <!--End Service Details Content -->

            </div>
        </div>
    </section>
    <!--End Service Details area -->

@endsection