@extends('site.layout.app')
@section('keywords')
<meta name="description" content="{!!$caseConfig->meta_description!!}">
@endsection
@section('style')
<link rel="stylesheet" type="text/css" href="/css/case.css?v=1772617842">
@endsection

@section('content')

<div id="case-page">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="row  case-distance">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
                        <h2 class="font-color-blue">{{$mainConfig['fieldJson']['Case-title']}}</h2>
                        <h5 class="font-color-gray">{{$caseConfig['fieldJson']['Case-content']}}</h5>
                    </div>
                    <!-- /.col -->
                </div>
                <!-- /.row -->
                <ul id="myTab" class="nav nav-tabs">
                    <li class="active"><a href="#left" data-toggle="tab" class="font-color-gray">{{$caseConfig['fieldJson']['img-left-title']}}</a>
                    </li>
                    <li><a href="#right" data-toggle="tab" class="font-color-gray">{{$caseConfig['fieldJson']['img-right-title']}}</a>
                    </li>
                </ul>
                <div id="myTabContent" class="tab-content">
                    <div class="tab-pane fade in active" id="left">
                        <div class="row case-spacing ">
                            @foreach ($caseConfig->fieldJson['case-img'] as $case)
                            <div class="col-sm-4">

                                <div class="team-member ">
                                    <a href="{!!$case['href']!!}">
                                        <figure class="profile-pic">
                                            <img src="{!!$case['img']!!}" alt=""
                                                 class="portfolio-pic img-responsive img-thumbnail">
                                        </figure>
                                        <div class="details">{!!$case['img-name']!!}</div>
                                    </a>
                                </div>

                            </div>
                            <!-- /.col -->
                            @endforeach
                        </div>
                        <!-- /.row -->
                        <div class="col-lg-12 col-md-12 col-xs-12 text-center">
                            <a href="/zh-hk/connection">
                                <button type="submit" class="btn btn-default btn-lg " id="made-button">
                                    {{$mainConfig['fieldJson']['made-button']}}
                                </button>
                            </a>
                        </div>
                    </div>
                    <!-- /.tab-pane-->
                    <div class="tab-pane fade in " id="right">
                        <div class="single-item">
                            <div class="client-content">
                                <div class="row">
                                            @foreach ($caseConfig->fieldJson['rotation-img'] as $rotation)
                                            <div class="col-lg-2 col-sm-4   ">
                                                <img src="{!!$rotation['img']!!} " style="width: 100%;">
                                                    <h4 class="title" >{!!$rotation['title']!!}</h4>
                                                    <div class="content" >{!!$rotation['content']!!}</div>
                                            </div>
                                            @endforeach
<!--                                        <div class="regular slider">-->
<!--                                            @foreach ($caseConfig->fieldJson['rotation-img'] as $rotation)-->
<!--                                            <div class="col-md-4 col-xs-12">-->
<!--                                                <img src="{!!$rotation['img']!!} ">-->
<!--                                                <h4 class="title">{!!$rotation['title']!!}</h4>-->
<!--                                                <div class="content">{!!$rotation['content']!!}</div>-->
<!--                                            </div>-->
<!--                                            @endforeach-->
<!--                                        </div>-->
                                    </div>
                                    <!-- /.col -->
                                </div>
                                <!-- /.row -->
                                <div class="row text-center feature-pd-one ">
                                    @foreach ($caseConfig->fieldJson['rotation'] as $rotation)
                                    <div class="col-lg-12 col-md-12 text-center">
                                        <p class="font-color-gray">{!!$rotation['img-first-content']!!}</p>
                                        <p class="font-color-gray">{!!$rotation['img-second-content']!!}</p>
                                        <p class="font-color-gray">{!!$rotation['img-third-content']!!}</p>
                                    </div>
                                    @endforeach
                                    <!-- /.col-->
                                </div>
                            </div>
                            <!-- /.single-item -->

                        <!-- /.tab-pane -->
                        <div class="col-lg-12 col-md-12 col-xs-12 text-center">
                            <a href="/zh-hk/connection">
                                <button type="submit" class="btn btn-default btn-lg made-button" id="more-button">
                                    {{$mainConfig['fieldJson']['more-button']}}
                                </button>
                            </a>
                        </div>
                    </div>
                    <!-- /.tab-pane-->
                </div>
                <!-- /.myTabContent-->
            </div>
        </div>
    </div>
    <!-- /.container-->
</div>
<!-- /.case-page-->
@endsection