@extends('layouts.app')

@section('content')

    <section class="header-inner ">
        <div class="container ">
            <div class="row">
                <div class="col-12 col-md-10 mx-auto  text-center text-lg-left">
                    <div class="row">
                        <div class="col-12 col-lg-10">
                            <h2 class="text-white">{{ $post->name }}</h2>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <section class="space-pt">
        <div class="container container-md post-news">
            <div class="row">
                <div class="col-12 col-lg-10 mx-auto">
                    <div class="row">
                        {{-- left  side --}}
                        <div class="col-12 col-lg-8">
                            <div class="image-wrap mt-4 mb-3">
                                <img class="img-fluid w-100" src="{{ $post->getAssetThumbnail() }}" alt="">
                            </div>

                            <div class="w-100 mb-4 mt-4" style="float: left">

                                @if ($post->views)
                                    <span class="btn btn-sm btn-sm-social btn-sm-facebook btn-caption ">
                                        <i class="fa fa-fw fa-eye"></i> {{ $post->views }}
                                        views
                                    </span>
                                @endif

                                <a id="fb_share" class="btn btn-sm btn-sm-social btn-sm-facebook btn-caption " target="_blank" href="https://twitter.com/expomedics">
                                    <i class="fab fa-facebook-square"></i> Facebook
                                </a>

                                <a id="in_share" class="btn btn-sm btn-sm-social btn-sm-linkedin btn-caption" target="_blank" href="https://www.linkedin.com/company/expomedics/">
                                    <i class="fab fa-linkedin "></i> Linkedin
                                </a>

                                <a id="tw_share" class="btn btn-sm btn-sm-social btn-sm-dark btn-dark btn-caption " target="_blank" href="https://twitter.com/intent/tweet?text={{ rawurlencode($post->name) }}&url={{ urlencode(url()->full()) }}">
                                    <i class="fa-brands fa-x-twitter"></i> Post
                                </a>

                                <div class="fb-like"
                                     data-href="https://www.facebook.com"
                                     data-width="120px"
                                     data-layout="standard"
                                     data-action="like"
                                     data-size="large"
                                     data-share="true">
                                </div>

                            </div>

                            <div class="blog-post-content mt-4">
                                {!! $post->content !!}
                            </div>

                            @if ($post->cta_link)
                                <div class="row my-5">
                                    <div class="col-12 text-center">
                                        <a class="btn btn-primary" href="{{ $post->cta_link }}">{{ $post->cta_name }}</a>
                                    </div>
                                </div>
                            @endif
                        </div>
                        {{-- right side --}}
                        <div class="col-12 col-lg-4 mt-4">
                            <div class="sidebar">

                                <x-widget.banner-slide-ad limit="2"/>

                                <x-widget.latest-news-list :limit="5" :category="[1]"/>

                                <x-widget.jobs-slide-ad :limit="10" :id-jobs="[2061,2051,2044,2037,2036,2025,2008,1893,1890,1878,1633,1624,1493,1933]"/>

                                <x-widget.banner-slide-ad group="news" limit="2"/>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </section>

    <form id="form-update-view" action="{{ route('blog.news.ajax.update_view') }}">
        @csrf
        <input type="hidden" name="post_id" value="{{ $post->id }}">
    </form>

    @include('blocks.banner_job_count')

@endsection

@push('inline-scripts')
    <script>
        $(document).ready(function () {
            $('.image-link').magnificPopup({
                type: 'image',
                gallery: {
                    enabled: true
                }
            });
        });

        $('.blog-post-content').find('img').removeAttr('height');
    </script>
@endpush

@push('inline-scripts')
    <script>
        let storage = window.localStorage;
        let views = storage.getItem('page_views');

        let $form = $('#form-update-view');

        views = (views) ? JSON.parse(views) : [];

        $.ajax({
            type: 'POST',
            url: $form.attr('action'),
            data: $form.serializeArray(),
            success: function (r) {

                var post_id = r.post_id;

                views.push(post_id);

                storage.setItem('page_views', JSON.stringify(views));
            },
            error: function (e) {
                var e = e.responseJSON;

                console.error(e);

            },
            async: false
        });
    </script>
@endpush

@push('inline-scripts')
    <!-- Load Facebook SDK for JavaScript -->
    <div id="fb-root"></div>
    <script async defer crossorigin="anonymous" src="https://connect.facebook.net/ro_RO/sdk.js#xfbml=1&version=v23.0&appId=1747876822206475"></script>
@endpush