@extends('layouts.app', ['title' => $name])
{{--@extends('layouts.app', ['header_title' => 'JABODETABEK', 'css_class' => 'text-center'])--}}

@section('script')
    <script>
        var stores = '{!! json_encode($stores_json) !!}';
    </script>
    {{--<script src="{{ asset('js/stores.js') }}" defer></script>--}}


@endsection

@section('style')
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet">


    <style>

        .select2 span {
            height: 35px;
            line-height: 35px;
            border-radius: 0.25rem 0 0 0.25rem;
            border-color: #ced4da;
        }

        .class-overview-selector p {
            font-size: 17px;
            line-height: 4
        }

        @media (min-width: 992px) {
            .class-overview-selector p {
                font-size: 24px
            }
        }

        .club-details .fa {
            width: 20px;
            padding-top: 2px;
            padding-right: 20px;
        }

        .class-overview-selector form {
            width: 100%;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex
        }

        @media (max-width: 991.98px) {
            .class-overview-selector form {
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                -ms-flex-direction: column;
                flex-direction: column
            }
        }

        /*.class-overview-selector form select {*/
            /*min-width: 200px*/
        /*}*/

        /*@media (max-width: 991.98px) {*/
            /*.class-overview-selector form select {*/
                /*margin-bottom: 15px*/
            /*}*/
        /*}*/

        .class-overview-selector .filter-button {
            height: 25px;
            width: 25px;
            margin: 15px;
            margin-left: auto;
            margin-right: 0
        }

        .club-details {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            margin-bottom: 30px
        }

        .club-details > div {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            background-color: #fff;
            box-shadow: 0;
            -webkit-transform: scale(1);
            -ms-transform: scale(1);
            transform: scale(1);
            -webkit-transition-property: transform, box-shadow;
            -webkit-transition-property: box-shadow, -webkit-transform;
            transition-property: box-shadow, -webkit-transform;
            transition-property: transform, box-shadow;
            transition-property: transform, box-shadow, -webkit-transform;
            -webkit-transition-duration: .4s;
            transition-duration: .4s;
            -webkit-transition-timing-function: cubic-bezier(.5, 0, .2, 1);
            transition-timing-function: cubic-bezier(.5, 0, .2, 1)
        }

        .club-details > div:hover {
            -webkit-transform: scale(1.05);
            -ms-transform: scale(1.05);
            transform: scale(1.05);
            box-shadow: 2px 4px #c0c0c0
        }


        @media (max-width: 991.98px) {
            .club-details > div:hover {
                -webkit-transform: none;
                -ms-transform: none;
                transform: none;
                box-shadow: none;
                position: relative
            }
        }

        .club-details > div:hover .view {
            opacity: 1
        }

        .club-details > div h4 {
            font-size: 16px;
            text-transform: uppercase;
            margin: 10px 0 0
        }

        .club-details > div p {
            font-size: 12px;
            color: #666
        }

        .club-details > div .redirect a {
            color: #666;
            font-size: 14px
        }

        .club-details > div .info {
            font-size: 10px;
            color: #d71619
        }

        .club-details > div .distance {
            color: #000;
            position: absolute;
            top: 0;
            right: 0;
            font-weight: bold;
        }

        .club-details > div .view {
            position: absolute;
            bottom: 0;
            right: 0;
            font-size: 12px;
            font-weight: bold;
            text-transform: uppercase;
            opacity: 0;
            margin-bottom: 10px;
            margin-right: 5px;
            -webkit-transition-property: opacity;
            transition-property: opacity;
            -webkit-transition-duration: .4s;
            transition-duration: .4s;
            -webkit-transition-timing-function: cubic-bezier(.5, 0, .2, 1);
            transition-timing-function: cubic-bezier(.5, 0, .2, 1);

        }

        .club-details {

        }

        .view a {
            color: #3d91e9;
        }

        @media (max-width: 991.98px) {
            .club-details > div .view {
                opacity: 1
            }
        }

        .club-details span.new {
            font-size: 10px;
            color: #fff;
            margin-top: -10px;
            padding-bottom: 10px;
            position: absolute;
            top: 5px;
            left: 20px;
            color: #fff;
            background: #ce021b;
            padding: 2px 10px;
            text-transform: uppercase;
            display: block;
            height: 20px
        }

        .club-details span.new:after {
            content: '';
            background: url(/-/media/Themes/Evolution-Wellness/Fitness-First/Base/Fitness-First-Basic/images/new-icon.png) no-repeat;
            background-size: 100%;
            width: 3px;
            height: 5px;
            position: absolute;
            display: block;
            z-index: 1;
            right: -3px;
            top: 0
        }

        .bg-xlight {
            background-color: #f5f5f5;
        }


        .content-wrapper {
            padding-top: 30px;
            padding-bottom: 40px;
        }

        @media (min-width: 768px) {
            .pt-md-30, .py-md-30 {
                padding-top: 30px !important;
            }

            .pl-40, .px-40 {
                padding-left: 40px !important;
            }

            .pr-40, .px-40 {
                padding-right: 40px !important;
            }
        }

        .mt-30 {
            margin-top: 30px !important;
        }


        .p-20 {
            padding: 20px;
        }

        .font-bold {
            font-weight: bold;
        }

        .pr-15 {
            padding-right: 15px;
        }

        /*.navbar{*/

        /*background-color: #1f93d0;*/
        /*}*/

        /*.navbar .navbar-toggler .menu-bar{*/
        /*background-color: #f6e114;*/
        /*}*/

        /*.navbar .navbar-nav .nav-item{*/
        /*color: #f6e114;;*/
        /*}*/

    </style>

@endsection
@section('content')
    <div class="container">
        <div class=" justify-content-center">
            <div class="col-md-12 text-center">
                <h3>JABODETABEK</h3>
            </div>


                    {{--</div>--}}
                    {{--<div class="col-md-2">--}}
                    {{--<button class="col-sm-12 btn btn-primary" style="background: rgb(61, 145, 233);">--}}
                    {{--Go--}}
                    {{--</button>--}}
                    {{--</div>--}}
            <div class="col-md-12">

                <div class="row content-wrapper bg-xlight pt-md-10 pl-40 pr-40">
                    <!--pt-md-30 mt-30 club-overview pl-40 pr-40-->
                    {{--<div class="col-sm-12" style="padding: 10px">--}}

                        {{--<form>--}}
                            {{--<div style="text-align: center; ">--}}
                                {{--<label for="'stores">Pilih Toko</label>--}}
                                {{--<select name="stores" id="stores" >--}}
                                    {{--<option value="all">Semua Toko</option>--}}
                                    {{--@foreach( $stores as $store)--}}
                                        {{--<option value={{$store['slug']}}>{{ ucfirst($store['name']) }}</option>--}}
                                    {{--@endforeach--}}
                                {{--</select>--}}
                            {{--</div>--}}
                        {{--</form>--}}

                    {{--</div>--}}
                    <div class="col-sm-12">
                        {{--<h5 class="mb-20 ml-15 font-light club-overview-count">“Showing <span class="count">19</span> of <span class="total">19</span> clubs”--}}
                        {{--</h5>--}}


                    </div>


                    @foreach($stores as $store)

                        <div class="club-details col-xs-12 col-md-6 col-xl-4">
                            <!--col-xm-4 col-sm-6-->
                            <div class="p-20 my-auto w-100" style="height: 170px;">
                                <p class="distance text-right pt-10 pr-15 font-medium d-none">{{ __('label.kilometer') }}</p>
                                <h4 class="font-medium">{{$store['name']}}</h4>
                                <span class="new d-none"></span>
                                <p class="info mb-10"></p>
                                <div class="d-flex mt-10">
                                    <span class="fa fa-map-marker"></span>
                                    <p class="font-light address">{{$store['address']}}</p>
                                    {{--<p class="font-light addressredirect"><a href="https://maps.google.com/?q={{$store['address']}}" target="_blank">{{$store['address']}}</a></p>--}}
                                </div>
                                {{--<div class="d-flex mt-10">--}}
                                {{--<span class="fa fa-phone"></span>--}}
                                {{--<p class="font-light hidden-xs">+65 6636 0820</p>--}}
                                {{--<p class="font-light visible-xs redirect"><a href="tel:+65 6636 0820">+65 6636 0820</a></p>--}}
                                {{--</div>--}}
                                <p class="view font-bold text-right pr-15">
                                    <a href="{{ url( trim($store['slug'])) }}">
                                        {{ __('heading.button_see_koran') }}
                                    </a>
                                </p>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
@endsection