@extends('site.pages.build')
@section('title',__('dil.referanslar'))
@push('css')
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
    <style>
        .slick-dots{
            bottom: -1rem;
        }
        .slick-dots li button::before{
            color: #f66b70;
        }
        .slick-dots li.slick-active button::before{
            color: #be1522;
        }
    </style>
@endpush
@section('content')
    <div class="row_header">

        <div id="c2247" class="ce_element ce_id_2247 fr_default sb_ sa_">
            <div class="static_header back_resource back_resource_2247">
                <style type="text/css" scoped="scoped">
                    .back_resource_2247 {
                        background-image: url("/storage/{{ \App\Models\Admin\Component::first()->references_bg }}");
                        height: 300px;
                    }
                    @media (max-width: 1200px) {
                        .back_resource_2247 {
                            background-image: url("/storage/{{ \App\Models\Admin\Component::first()->references_bg }}");
                        }
                    }
                    @media (max-width: 768px) {
                        .back_resource_2247 {
                            background-image: url("/storage/{{ \App\Models\Admin\Component::first()->references_bg }}");
                        }
                    }
                    @media (max-width: 480px) {
                        .back_resource_2247 {
                            background-image: url("/storage/{{ \App\Models\Admin\Component::first()->references_bg }}");
                        }
                    }
                    @media (max-width: 360px) {
                        .back_resource_2247 {
                            background-image: url("/storage/{{ \App\Models\Admin\Component::first()->references_bg }}");
                        }
                    }
                </style>
                <div class="container">
                    <div class="static_header_txt static_header_p1 static_header_c1 static_header_o1">
                        <div class="headline_title">
                            {{ __('dil.referanslar') }}
                        </div>
                    </div>
                </div>
            </div>
        </div>



    </div>

    <div class="row_breadcrumb"><ul class="breadcrumb"><li class="first"><a href="/">{{ __('dil.anaSayfa') }}</a></li><li class="last">
        {{ __('dil.referanslar') }}</li></ul></div>



    <div class="row_content">
        <div class="container_x">
            <!--TYPO3SEARCH_begin-->

            <div id="c52" class="ce_element ce_id_52 fr_default sb_ sa_">
                <div class="theme_bs_container outer_container container_template_0 flex_0">
                    <div class="container">
                        <div class="row" style="margin-bottom: 5rem;">
                            <div class="ce-textpic ce-center ce-above">
                                <div class="ce-bodytext">
                                    <p>{!! \App\Models\Admin\Component::first()->references_text !!}</p>
                                </div>
                            </div>
{{--                            <div id="c2054" class="ce_element ce_id_2054 fr_default sb_3 sa_3">--}}
{{--                                <div class="theme_image">--}}
{{--                                    <img--}}
{{--                                            class="img-responsive img-default"--}}
{{--                                            src="/storage/{{ \App\Models\Admin\Component::first()->references_image }}"--}}
{{--                                            width="1140"--}}
{{--                                            height="745"--}}
{{--                                            alt=""--}}
{{--                                            title=""--}}
{{--                                    />--}}
{{--                                </div>--}}
{{--                            </div>--}}

                            <div class="sliderJs">
                                @foreach($references as $reference)
                                    <div style="margin: 15px"><img class="sliderImage" style="width: 100%" src="/storage/{{ $reference->image }}"></div>
                                @endforeach
                                {{--            <div><img class="sliderImage" src="https://via.placeholder.com/1920x1000/c2c3c2?text=1920x1000"></div>--}}
                            </div>
{{--                            @foreach($references as $reference)--}}
{{--                                <div class="col-md-4" style="margin-top: 2rem">--}}
{{--                                    <div class="news_image">--}}
{{--                                        <div class="thumbnailx news_thumb">--}}
{{--                                            <a--}}
{{--                                                    href="/storage/{{ $reference->image }}"--}}
{{--                                                    class="img_lightbox"--}}
{{--                                                    data-rel="lightcase:set_4"--}}
{{--                                            >--}}
{{--                                                <img--}}
{{--                                                        class="img-responsive"--}}
{{--                                                        src="/storage/{{ $reference->image }}"--}}
{{--                                                        width="280"--}}
{{--                                                />--}}
{{--                                            </a>--}}
{{--                                        </div>--}}
{{--                                    </div>--}}
{{--                                </div>--}}
{{--                            @endforeach--}}
                        </div>
                    </div>
                </div>
            </div>

            <!--TYPO3SEARCH_end-->
        </div>
    </div>


@endsection
@push('js')
    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
    <script>
        $(document).ready(function(){
            $('.sliderJs').slick({
                slidesToScroll: 1,
                autoplay: true,
                dots:true,
                navs:false,
                arrows: false,
                slidesToShow: 4,
                autoplaySpeed: {{ $settings->slider_time * 1000 }},
                infinite: true,
            });
        });
    </script>
@endpush