@extends('website.layouts.master')

@section('title')
    Services Details
@endsection

@section('content')
    <div style="height: 120px;"></div>

    <!-- ============================================================== -->
    <!-- Service Details Page -->
    <!-- ============================================================== -->
    <div class="container service-details-wrapper">
        <!-- Title -->
        <h3 class="my-5 text-center service-title">
            {{App::getLocale() == 'ar'? $service->name_ar : $service->name_en}}
        </h3>
        <!-- Slider -->
        <div class="swiper-container service-slider">
            <!-- swiper slides -->
            <div class="swiper-wrapper">
                <div class="swiper-slide"
                     style="background-image: url('{{asset('dashboard/assets/img/uploads/departments_services/'.$service->image->filename)}}');">
                </div>
{{--                <div class="swiper-slide"--}}
{{--                     style="background-image: url(https://images.unsplash.com/photo-1557804506-669a67965ba0?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80);">--}}
{{--                </div>--}}
{{--                <div class="swiper-slide"--}}
{{--                     style="background-image: url(https://images.unsplash.com/photo-1557804506-669a67965ba0?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80);">--}}
{{--                </div>--}}
            </div>
            <!-- !swiper slides -->

{{--            <!-- next / prev arrows -->--}}
{{--            <div class="swiper-button-next"></div>--}}
{{--            <div class="swiper-button-prev"></div>--}}
{{--            <!-- !next / prev arrows -->--}}

{{--            <!-- pagination dots -->--}}
{{--            <div class="swiper-pagination"></div>--}}
{{--            <!-- !pagination dots -->--}}
        </div>
        <!-- Text -->
        <p class="service-text">{!!App::getLocale() == 'ar'? $service->description_ar : $service->description_en!!}</p>
    </div>
    <!-- ============================================================== -->
    <!-- Services Details Page End -->
    <!-- ============================================================== -->

    <div style="height: 120px;"></div>
@endsection

@section('js')
@endsection