@extends('layouts.app')

@section('title', 'Services')

@section('main_title_wrapper')
<div class="main_title_wrapper category_title_section jl_cat_img_bg">
    <div class="category_image_bg_image" style="background-image: url({{ asset('images/micro-conference.jpg') }});"></div><div class="category_image_bg_ov"></div>    <div class="jl_cat_title_wrapper">
        <div class="container">
            <div class="row">
                <div class="col-md-12 main_title_col">
                    <div class="jl_cat_mid_title">
                        <h3 class="categories-title title">{{ $type_service ? $type_service->name : 'Business Opportunity' }}</h3>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{{--  <div class="main_title_wrapper category_title_section">
    <div class="container">
        <div class="row">
            <div class="col-md-12 main_title_col">
                <h1 class="categories-title title">Services {{ $type_service ? ' | '.$type_service->name : '' }}</h1>
            </div>
        </div>
    </div>
</div>  --}}
@endsection

@section('content')
<div class="jelly_homepage_builder_ jl_cus_grid_overlay padding-content">
    <div class="row">
        @forelse ($services as $service)
        <div class="col-md-6 blog_grid_post_style jl_row_1 appear_animation" style="margin-bottom: 10px; padding: 0 7px;">
            <div class="jl_grid_box_wrapper no-border-raduis" style="padding-bottom: 50% !important;margin-bottom: 0px !important;">
                @php
                    $img = $service->image ? asset('images/services/'.$service->image) : asset('images/services/default.jpg');
                @endphp
                <span class="image_grid_header_absolute" style="{{ 'background-image: url('.$img.')' }}"></span>
                <a href="{{ route('services.show', $service) }}" class="link_grid_header_absolute" title="{{ $service->titre }}"></a>                            
                <span class="meta-category-small">
                    <a class="post-category-color-text" style="background:#1b63a6;text-align:center" href="{{ route('services.type_service', $service->typeService) }}">
                        <div class="mois">{{ $service->typeService->name }}</div>
                    </a>
                </span>
            </div>

            <div class="large_post_content">                    
                <h5 class="image-post-title" style="margin-top:10px;margin-bottom:0px !important;font-size: 20px !important;">
                    <a href="{{ route('services.show', $service) }}">{{ Str::limit($service->titre, 60) }}</a>
                </h5>
                <span class="jl_post_meta" style="margin-bottom: 20px;">
                    <span class="post-date"><i class="fa fa-clock-o"></i>{{ \Carbon\Carbon::parse($service->created_at)->format('d M Y') }}</span>
                </span>
            </div>
        </div>
        @empty
            Vide
        @endforelse
    </div>
</div>

<div class="row">
    <div class="col-12">
        @if ($services)
            <div class="">
                {{ $services->links('vendor.pagination.pagination') }}
            </div>
        @endif
    </div>
</div>
@endsection

@section('css')
    <style>
        .recents-elements {
            display: none !important;
        }
    </style>
@endsection

@section('socialshare')
<div class="widget-title"><h2>Partager sur</h2></div>
<div class="social-count-plus">
    <ul class="default">
        <li class="count-facebook">
            <a class="icon" href="#" rel="nofollow noopener noreferrer" target="_blank"></a>
        </li>
        <li class="count-googleplus">
            <a class="icon" href="#" rel="nofollow noopener noreferrer" target="_blank"></a>
        </li>
        <li class="count-instagram">
            <a class="icon" href="" rel="nofollow noopener noreferrer" target="_blank"></a>
        </li>
        <li class="count-twitter">
            <a class="icon" href="" rel="nofollow noopener noreferrer" target="_blank"></a>
        </li>
    </ul>
</div>
@endsection