@extends('layouts.frontend')
@section('title', $page->meta_title)
@section('meta_description', $page->meta_description)
@section('meta_keywords', $page->meta_keyword)
@section('json-ld', Breadcrumbs::view('breadcrumbs::json-ld', 'services'))
@section('content')
<!-- kv-services -->
<div id="kv-services">@include('frontend.module.kv-services')</div>
<!-- ./kv-services -->
<div class="container breadcrumbs">
    {{ Breadcrumbs::render('services') }}
</div>
<main class="main services">
    <div class="container mt-md-6 mb-md-10">
        <div class="row">
            @foreach ($list_1->blockDetail as $k => $v)
            @if ($k > 0 && ($k % 3) == 0)
                @foreach ($list_2->blockDetail as $key => $val)
                @if (($key) == (($k / 3) - 1))
                <div class="col-12 my-2 my-md-4">
                    <div class="card card-service">
                        <img class="care-img d-none d-md-block" src="{{ asset($val->pic) }}">
                        <img class="care-img d-md-none" src="{{ asset($val->pic) }}">
                        <div class="card-img-overlay d-flex flex-column justify-content-end p-0">
                            <div class="box text-md-center">
                                <div class="card-title">{{ $val->title }}</div>
                                <p class="card-text">
                                    {{ $val->description }}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                @endif
                @endforeach
            @endif
            <div class="col-12 col-md-4 my-2 my-md-4">
                <div class="card card-service">
                    <img class="care-img" src="{{ asset($v->pic) }}">
                    <div class="card-img-overlay d-flex flex-column justify-content-end p-0">
                        <div class="box short-box">
                            <div class="card-title">{{ $v->title }}</div>
                            <p class="card-text">{{ $v->description }}</p>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
            @foreach ($list_2->blockDetail as $k => $v)
            @if (floor(count($list_1->blockDetail) / 3) <= $k)
            <div class="col-12 my-2 my-md-4">
                <div class="card card-service">
                    <img class="care-img d-none d-md-block" src="{{ asset($v->pic) }}">
                    <img class="care-img d-md-none" src="{{ asset($v->pic) }}">
                    <div class="card-img-overlay d-flex flex-column justify-content-end p-0">
                        <div class="box text-md-center">
                            <div class="card-title">{{ $v->title }}</div>
                            <p class="card-text">
                                {{ $v->description }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            @endif
            @endforeach
        </div>
    </div>
</main>
@stop
@section('js')
{{-- <!-- module include -->
<script src="/assets/js/function/module.js"></script>
<script>
    $("#kv-services").load("/module/kv-services.html");
</script>

<!-- single -->
<script>
    $('.slick-nav').slick();
    $.home();
</script> --}}
@stop