@extends("layouts.default")

@section("title", trans("lang.post_list"))

@section("block-header")
    @lang('lang.news_',['name'=>__('lang.detail')])
    <small>
        <a class="btn btn-primary" href="{{ route('post.index') }}">@lang('lang.back')</a>
        @can('edit_technical_document')
            <a class="btn btn-primary" href="{{ route('post.edit',$news->id) }}">@lang('lang.edit')</a>
        @endcan
    </small>
@stop

@section("breadcrumb")
    @parent
    <li class="breadcrumb-item">
        <a href="{{ route('post.index') }}">@lang('lang.news_',['name'=>trans('lang.list')])</a>
    </li>
    <li class="breadcrumb-item active">
        @lang('lang.news_',['name'=>__('lang.detail')])
    </li>
@stop

@section("content")
    <!-- Basic Table -->
    <div class="row">
        <div class="col-md-8 col-sm-12">
            @includeWhen(Session::has("success"),"inc.alert")
            <div class="card">
                <div class="card-body">
                    <section class="d-flex flex-column">
                        <h2>{{ @$news->property->title }}</h2>
                        <div class="category mt-3">
                            @foreach($categories as $category)
                                <label class="badge badge-success">{{ @$category->property->name }}</label>
                            @endforeach
                            <span>{{ Helpers::dateTimeFormat(@$news->property->post_date) }}</span>
                        </div>
                        <div class="mt-3">
                            <span>@lang('lang.tags'): </span>
                            @if(isset($news->property->tags) && !empty($news->property->tags))
                                <span>{{ $news->property->tags }}</span>
                            @endif
                        </div>
                        <div class="mt-3">
                            <span>@lang('lang.youtube_link'): </span>
                            @if(isset($news->property->youtube_link) && !empty($news->property->youtube_link))
                                <span>
                                    <a href="{{$news->property->youtube_link}}" target="_blank">{{ $news->property->youtube_link }}</a>
                                </span>
                            @endif
                        </div>
                        <article class="mt-3">
                            {!! $news->property->description !!}
                        </article>
                    </section>
                </div>
            </div>
            <div class="card mt-3">
                <div class="card-body">
                    <section class="d-flex flex-column">
                        <p>Total Views: {{number_format($total_views)}}</p>
                        <p># of Unique User: {{number_format($unique_user)}}</p>
                        <p># of Male: {{number_format($total_male_view)}}</p>
                        <p># of Female: {{number_format($total_female_view)}}</p>
                    </section>
                    <section class="d-flex flex-column">
                        <div class="combo-chart" id="chart"></div>
                    </section>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">@lang('lang.picture')</h5>
                </div>
                <div class="card-body">
                    <img class="img img-fluid img-thumbnail"
                         src="{{ Helpers::setImageSrc(@$news->property->feature_image->path) }}" alt="">
                </div>
            </div>
            <div class="card mt-3">
                <div class="card-header">
                    <h5 class="mb-0">@lang('lang.attachment')</h5>
                </div>
                <div class="card-body">
                    @if(!empty(@$news->property->attachment->name))
                        <p>
                            <a href="{{ Helpers::setImageSrc(@$news->property->attachment->path) }}"
                               download="{{  @$news->property->attachment->name }}">
                                {{  @$news->property->attachment->name }}
                            </a>
                        </p>
                    @else
                        <p>@lang('lang.empty',['name'=>__('lang.attachment')])</p>
                    @endif

                </div>
            </div>
        </div>
    </div>
    <style type="text/css">
        .combo-chart { height: 350px; }
    </style>
@stop

@section('script')
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
    var view_data = {!! $last_12_month_views !!};
    google.charts.load('current', {'packages':['corechart']});
    google.charts.setOnLoadCallback(drawTransaction);
    function drawTransaction(){
        var data = google.visualization.arrayToDataTable(view_data);
        var options = {
            title : '# of Views for Last 12 Months',
            chartArea : {'left':50, 'width': '90%', 'height': '70%'},
            legend: {'position': 'bottom'},
            seriesType: 'bars',
            series: {1: {type: 'line'}}
        };
        var chart = new google.visualization.ComboChart(document.getElementById('chart'));
        chart.draw(data, options);
    }
</script>
@stop