@extends('template.'.config('settings.template').'.content.master')

@section('content')

    <div class="pt-3 pb-2 mb-5" style="background-color: {{$_primary_ci_color}}">
        <div class="container">

            <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
                <ol class="breadcrumb text-decoration-none">
                    <li class="breadcrumb-item"><a href="{{url('/')}}">Home</a></li>
                    <li class="breadcrumb-item"><a href="{{url('/aktuelles')}}">Aktuelles</a></li>
                    <li class="breadcrumb-item active" aria-current="page">{{$content->title}}</li>
                </ol>
            </nav>
        </div>
    </div>
    <div class="container">
        <div class="row">

            <div class="col-12 col-md-11 d-flex">
                <h1 class="mt-3 mb-2 h2">{{$content->title}}</h1>

            </div>

            <div class="fw-bolder my-4">
                {!! $content->vorschau !!}
            </div>

            <div class="col-12 text-muted small mb-3">
                <svg style="fill: currentColor;width:15px;margin-bottom: 5px;margin-right: 3px;}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M112 0c8.8 0 16 7.2 16 16V64H320V16c0-8.8 7.2-16 16-16s16 7.2 16 16V64h32c35.3 0 64 28.7 64 64v32 32V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V192 160 128C0 92.7 28.7 64 64 64H96V16c0-8.8 7.2-16 16-16zM416 192H32V448c0 17.7 14.3 32 32 32H384c17.7 0 32-14.3 32-32V192zM384 96H64c-17.7 0-32 14.3-32 32v32H416V128c0-17.7-14.3-32-32-32z"/></svg>
                Veröffentlicht: {{date('d.m.Y', strtotime($content->created_at))}}
            </div>

        </div>

        <div class="row">
            <div class="col-12 col-lg-9">
                <x-img src="{{ $content->image() }}" class="img-fluid rounded" />
                <br>
            </div>
            <div class="col-12 mb-5 mt-5 fs-5">
                {!! isset($content->neuigkeit) ? $content->neuigkeit : 'keine Angaben' !!}
            </div>
        </div>

        <div class="row mb-5">
            

            @php($otherContents = filterByContentType("News")->filter(function ($item) use ($content) { return $item->id != $content->id; }))

            @if($otherContents->isNotEmpty())
            

            <div class="col-12">
                <hr class="pb-5 mt-5">
                <h2 class="mb-4 mt-5 h3">Weitere Nachrichten</h2>
            </div>

            @foreach($otherContents->take(3) as $otherContent)

                <div class="col-12 col-md-4 mb-3">
                    <div class="card shadow-sm h-100">
                        <a href="" class="text-decoration-none">
                            <img src="https://picsum.photos/600/400" class="img-fluid card-img-top">
                        </a>

                        <div class="card-body">
                            <h3 class="h5 mb-2">
                                <a href="{{$otherContent->path}}" class="text-decoration-none">{{$otherContent->title}}</a>
                            </h3>

                            <div class="text-muted small my-3">
                                <span title="383.393.2029">
                                    <svg style="fill: currentColor;width:15px;margin-bottom: 5px;margin-right: 3px;}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M112 0c8.8 0 16 7.2 16 16V64H320V16c0-8.8 7.2-16 16-16s16 7.2 16 16V64h32c35.3 0 64 28.7 64 64v32 32V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V192 160 128C0 92.7 28.7 64 64 64H96V16c0-8.8 7.2-16 16-16zM416 192H32V448c0 17.7 14.3 32 32 32H384c17.7 0 32-14.3 32-32V192zM384 96H64c-17.7 0-32 14.3-32 32v32H416V128c0-17.7-14.3-32-32-32z"/></svg>
                                    19 hours ago
                                </span>
                            </div>
                            {!! Str::limit('Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus consequuntur cum cumque dicta eligendi et ex, fugiat id, incidunt iste iusto natus non provident quae veritatis vero vitae voluptas voluptate?', 280) !!}
                        </div>

                        <div class="card-footer text-end">
                            <a class="btn btn-sm btn-ci" href="">
                                Mehr lesen
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
                                    <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" />
                                </svg>
                            </a>
                        </div>
                    </div>
                </div>

            @endforeach
            @endif

            <!-- <div class="col-12 col-md-4 mb-3">
                <div class="card shadow-sm h-100">
                    <a href="" class="text-decoration-none">
                        <img src="https://picsum.photos/600/400" class="img-fluid card-img-top">
                    </a>

                    <div class="card-body">
                        <h3 class="h5 mb-2">
                            <a href="" class="text-decoration-none">
                                Neuigkeit

                            </a>
                        </h3>

                        <div class="text-muted small my-3">
                                <span title="383.393.2029">
                                     <svg style="fill: currentColor;width:15px;margin-bottom: 5px;margin-right: 3px;}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M112 0c8.8 0 16 7.2 16 16V64H320V16c0-8.8 7.2-16 16-16s16 7.2 16 16V64h32c35.3 0 64 28.7 64 64v32 32V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V192 160 128C0 92.7 28.7 64 64 64H96V16c0-8.8 7.2-16 16-16zM416 192H32V448c0 17.7 14.3 32 32 32H384c17.7 0 32-14.3 32-32V192zM384 96H64c-17.7 0-32 14.3-32 32v32H416V128c0-17.7-14.3-32-32-32z"/></svg>
                                19 hours ago
                                </span>

                        </div>

                        {!! Str::limit('Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus consequuntur cum cumque dicta eligendi et ex, fugiat id, incidunt iste iusto natus non provident quae veritatis vero vitae voluptas voluptate?', 280) !!}


                    </div>

                    <div class="card-footer text-end">
                        <a class="btn btn-sm btn-ci" href="">
                            Mehr lesen
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
                                <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" />
                            </svg>
                        </a>
                    </div>

                </div>
            </div>

            <div class="col-12 col-md-4 mb-3">
                <div class="card shadow-sm h-100">
                    <a href="" class="text-decoration-none">
                        <img src="https://picsum.photos/600/400" class="img-fluid card-img-top">
                    </a>

                    <div class="card-body">
                        <h3 class="h5 mb-2">
                            <a href="" class="text-decoration-none">
                                Neuigkeit

                            </a>
                        </h3>

                        <div class="text-muted small my-3">
                                <span title="383.393.2029">
                                     <svg style="fill: currentColor;width:15px;margin-bottom: 5px;margin-right: 3px;}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M112 0c8.8 0 16 7.2 16 16V64H320V16c0-8.8 7.2-16 16-16s16 7.2 16 16V64h32c35.3 0 64 28.7 64 64v32 32V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V192 160 128C0 92.7 28.7 64 64 64H96V16c0-8.8 7.2-16 16-16zM416 192H32V448c0 17.7 14.3 32 32 32H384c17.7 0 32-14.3 32-32V192zM384 96H64c-17.7 0-32 14.3-32 32v32H416V128c0-17.7-14.3-32-32-32z"/></svg>
                                19 hours ago
                                </span>

                        </div>

                        {!! Str::limit('Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus consequuntur cum cumque dicta eligendi et ex, fugiat id, incidunt iste iusto natus non provident quae veritatis vero vitae voluptas voluptate?', 280) !!}

                    </div>

                    <div class="card-footer text-end">
                        <a class="btn btn-sm btn-ci" href="">
                            Mehr lesen
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
                                <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" />
                            </svg>
                        </a>
                    </div>

                </div>
            </div> -->


        </div>
    </div>

@stop
@section('scripts')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script>
    const shareData = {
        title: "{{ $content->title }}",
        text: 'Text',
        url: window.location.href,
    }
</script>
    <script src="{{ asset('template/js/pages/news/methods.js') }}"></script>
    <script src="{{ asset('template/js/pages/news/events.js') }}"></script>
    <script src="{{ asset('template/js/pages/news/script.js') }}"></script>
    <script src="{{ asset('system/js/intlTelInput.min.js') }}"></script>
    <script>
    var input = document.querySelector(".phone");
    var iti = window.intlTelInput(input, {
        initialCountry: "de",
        geoIpLookup: function(callback) {
            $.get('https://ipinfo.io', function() {}, "jsonp").always(function(resp) {
                var countryCode = (resp && resp.country) ? resp.country : "us";
                callback(countryCode);
            });
        },
        utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.11/js/utils.min.js",
        // any initialisation options go here
    });
    $("#formPost").submit(function() {
        if (iti.isValidNumber() == false) {
            alert('Telefonnummer nicht gültig!');
            return false;
        }
        return true;
    });
</script>
@stop