@extends('website.layouts.master')

@section('title')
    {{__('website-trans.Services')}}
@endsection

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

    <!-- ============================================================== -->
    <!-- services Page -->
    <!-- ============================================================== -->
    <div class="container one Projects-page ">
        <div class="text-center my-5">
            <div class="site-header">
                <h2 class="site-blue-text">{{__('website-trans.Services')}}</h2>
                <div class="her-line"></div>
                <div class="ver-line"></div>
            </div>
        </div>
        <div class="">
            <div class="grid-cards">
                <!-- card -->
                @foreach($services as $service)
                    <div class="card">
{{--                        <img--}}
{{--                            src="{{storage_path('app/public/projects/September2021/F4QfAV9vP8PX8pEwpUjo.jpg')}}"--}}
{{--                            alt="img-1" title="card image">--}}
                        <img
                            src="{{asset('dashboard/assets/img/uploads/departments_services/'.$service->image->filename)}}"
                            alt="img-1" title="card image">

                        <div class="card-body">
                            <h3 class="title-card"> {{App::getLocale() == 'ar'? $service->name_ar : $service->name_en}} </h3>
                            <p>{!!Str::limit(App::getLocale() == 'ar'? $service->description_ar : $service->description_en, 70)!!}</p>
                        </div>
                        <div class="card-footer">
                            <a href="{{route('servicesDetails', $service->id)}}">{{__('website-trans.more')}}</a>
                        </div>
                    </div>
                @endforeach

            <!-- card -->
                {{--                <div class="card">--}}
                {{--                    <img--}}
                {{--                        src="https://images.unsplash.com/photo-1600880292203-757bb62b4baf?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixid=MnwxfDB8MXxyYW5kb218fHx8fHx8fHwxNjIzMzQzNjkw&ixlib=rb-1.2.1&q=80&w=600"--}}
                {{--                        alt="img-2" title="card image">--}}
                {{--                    <div class="card-body">--}}
                {{--                        <h3 class="title-card">--}}
                {{--                            Lorem ipsum dolor--}}
                {{--                        </h3>--}}
                {{--                        <p>Suspendisse et commodo velit. Suspendisse porttitor, nisi ac luctus suscipit, risus dolor--}}
                {{--                            facilisis ligula--}}
                {{--                        </p>--}}
                {{--                    </div>--}}
                {{--                    <div class="card-footer">--}}
                {{--                        <a href="#">Click here</a>--}}
                {{--                    </div>--}}
                {{--                </div>--}}

                {{--                <!-- card -->--}}
                {{--                <div class="card">--}}
                {{--                    <img--}}
                {{--                        src="https://images.unsplash.com/photo-1538688273852-e29027c0c176?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixid=MnwxfDB8MXxyYW5kb218fHx8fHx8fHwxNjIzMzQzNjEx&ixlib=rb-1.2.1&q=80&w=600"--}}
                {{--                        alt="img-3" title="card image">--}}
                {{--                    <div class="card-body">--}}
                {{--                        <h3 class="title-card">--}}
                {{--                            Lorem ipsum dolor--}}
                {{--                        </h3>--}}
                {{--                        <p>Cras maximus eros eleifend luctus interdum. Vestibulum tincidunt nisi eget turpis faucibus,--}}
                {{--                            sit amet ultrices tortor tempor.--}}
                {{--                        </p>--}}
                {{--                    </div>--}}
                {{--                    <div class="card-footer">--}}
                {{--                        <a href="#">Click here</a>--}}
                {{--                    </div>--}}
                {{--                </div>--}}
                {{--                <!-- card -->--}}
                {{--                <div class="card">--}}
                {{--                    <img--}}
                {{--                        src="https://images.unsplash.com/photo-1507206130118-b5907f817163?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixid=MnwxfDB8MXxyYW5kb218fHx8fHx8fHwxNjIzMzQzMjIz&ixlib=rb-1.2.1&q=80&w=600"--}}
                {{--                        alt="img-1" title="card image">--}}
                {{--                    <div class="card-body">--}}
                {{--                        <h3 class="title-card">--}}
                {{--                            Lorem ipsum dolor sit amet--}}
                {{--                        </h3>--}}
                {{--                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in vulputate dui. Curabitur--}}
                {{--                            orci augue, finibus vel imperdiet eu, posuere ac eros.--}}
                {{--                        </p>--}}
                {{--                    </div>--}}
                {{--                    <div class="card-footer">--}}
                {{--                        <a href="#">Click here</a>--}}
                {{--                    </div>--}}
                {{--                </div>--}}
                {{--                <!-- card -->--}}
                {{--                <div class="card">--}}
                {{--                    <img--}}
                {{--                        src="https://images.unsplash.com/photo-1600880292203-757bb62b4baf?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixid=MnwxfDB8MXxyYW5kb218fHx8fHx8fHwxNjIzMzQzNjkw&ixlib=rb-1.2.1&q=80&w=600"--}}
                {{--                        alt="img-2" title="card image">--}}
                {{--                    <div class="card-body">--}}
                {{--                        <h3 class="title-card">--}}
                {{--                            Lorem ipsum dolor--}}
                {{--                        </h3>--}}
                {{--                        <p>Suspendisse et commodo velit. Suspendisse porttitor, nisi ac luctus suscipit, risus dolor--}}
                {{--                            facilisis ligula--}}
                {{--                        </p>--}}
                {{--                    </div>--}}
                {{--                    <div class="card-footer">--}}
                {{--                        <a href="#">Click here</a>--}}
                {{--                    </div>--}}
                {{--                </div>--}}
                {{--                <!-- card -->--}}
                {{--                <div class="card">--}}
                {{--                    <img--}}
                {{--                        src="https://images.unsplash.com/photo-1538688273852-e29027c0c176?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixid=MnwxfDB8MXxyYW5kb218fHx8fHx8fHwxNjIzMzQzNjEx&ixlib=rb-1.2.1&q=80&w=600"--}}
                {{--                        alt="img-3" title="card image">--}}
                {{--                    <div class="card-body">--}}
                {{--                        <h3 class="title-card">--}}
                {{--                            Lorem ipsum dolor--}}
                {{--                        </h3>--}}
                {{--                        <p>Cras maximus eros eleifend luctus interdum. Vestibulum tincidunt nisi eget turpis faucibus,--}}
                {{--                            sit amet ultrices tortor tempor.--}}
                {{--                        </p>--}}
                {{--                    </div>--}}
                {{--                    <div class="card-footer">--}}
                {{--                        <a href="#">Click here</a>--}}
                {{--                    </div>--}}
                {{--                </div>--}}
            </div>
        </div>
    </div>
    <!-- ============================================================== -->
    <!-- Projects Page End -->
    <!-- ============================================================== -->

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

@section('js')
@endsection