@extends('front.layouts.app')

@section('content')

    <!--Page Header Start-->
    <section class="page-header">
        <div class="page-header-bg" style="background-image: url({{asset('front/assets/images/backgrounds/page-header-bg.jpg')}})">
        </div>
        <div class="container">
            <div class="page-header__inner">
                <ul class="thm-breadcrumb list-unstyled">
                    <li><a href="{{route('arabiaMobiles.home')}}">Home</a></li>
                    <li><span>/</span></li>
                    <li><a href="services.html">Service</a></li>
                    <li><span>/</span></li>
                    <li class="active">service details</li>
                </ul>
                <h2>Service Details</h2>
            </div>
        </div>
    </section>
    <!--Page Header End-->

    <!--Service Details Start-->
    <section class="service-details">
        <div class="container">
            <div class="row">
                <div class="col-xl-4 col-lg-5">
                    <div class="service-details__left">
                        <div class="service-details__service">
                            <h3 class="service-details__title">Services</h3>
                            <ul class="service-details__service-list list-unstyled">
                                @foreach($services as $service)
                                <li class="active"><a href="{{route('arabiaMobiles.serviceDetails',$service->id)}}">{{$service->name}} <span class="fa fa-long-arrow-alt-right"></span></a></li>
                                @endforeach
                            </ul>
                        </div>
                        <div class="service-details__need-help" style="padding: 0;background: transparent;">
<a href="tel:+96179176111">
    <img src="{{asset('images/service-call.png')}}" style="max-width: 100%;">
</a>
                            {{--                            <div class="service-details__need-help-bg" style="background-image: url(assets/images/backgrounds/service-details-need-help-bg.jpg)">--}}
{{--                            </div>--}}
{{--                            <div class="service-details__need-help-icon">--}}
{{--                                <img style="height: 85px; width: 85px;" src="{{asset('front/assets/images/favicons/arabia-mobiles-colored.png')}}" alt="">--}}
{{--                            </div>--}}
{{--                            <h2 class="service-details__need-help-title">Easy solutions <br> to your tech <br> problem</h2>--}}
{{--                            <div class="service-details__need-help-contact">--}}
{{--                                <p>Have any question?</p>--}}
{{--                                <a href="tel:980009850"> <span>Free</span> +961 1 880 850</a>--}}
{{--                            </div>--}}
                        </div>
                    </div>
                </div>
                <div class="col-xl-8 col-lg-7">
                    <div class="service-details__right">
                        <div class="service-details__img text-center">
                            <h3 class="service-details__content-title">{{$serviceDetail->title}}</h3>
                            <img style="width: 60%;margin: auto" src="{{asset($serviceDetail->service_photo_details)}}" alt="">
                        </div>
                        <div class="service-details__content">
                        {!! $serviceDetail->description !!}
                        </div>
                        <ul class="list-unstyled service-details__points">
                            <li>
                                <div class="service-details__points-icon">
                                    <span class="icon-customer-service"></span>
                                </div>
                                <h4 class="service-details__points-title">{{$serviceDetail->value_one}}</h4>
                            </li>
                            <li>
                                <div class="service-details__points-icon">
                                    <span class="icon-market-analysis"></span>
                                </div>
                                <h4 class="service-details__points-title">{{$serviceDetail->value_two}}</h4>
                            </li>
                            <li>
                                <div class="service-details__points-icon">
                                    <span class="icon-technical-support"></span>
                                </div>
                                <h4 class="service-details__points-title">{{$serviceDetail->value_three}}</h4>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--Service Details End-->

@endsection