@extends('admin.layouts.main')

@section('title')
{{ $movement->movement_title }} - {{ @trans('movement.details') }}
@endsection

@section('content')

<main>
    <div class="two-col">

        @include("admin.common.sidebar")

        <div class="right-sec detail-page">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="javascript:void(0)">{{ @trans('movement.movement') }}</a></li>
                    <li class="breadcrumb-item active" aria-current="page">
                        @if(request()->input('tab') == 'published')
                            <a href="{{ route('admin.movement.publishedpageload', ['panel' => Session::get('panel')]) }}">{{ @trans('movement.published_articles') }}</a>
                        @else
                            <a href="{{ route('admin.movement.indexpageload', ['panel' => Session::get('panel')]) }}">{{ @trans('movement.pending_articles') }}</a>
                        @endif
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">{{ @trans('movement.detail') }}</li>
                </ol>
            </nav>
            
            <div class="bg-white profile-header">
                <div class="profile-detail">
                    <div class="person-details">
                        <div class="about pl-0">
                            <h2 class="cndidate-name">{{$movement->movement_title}}</h2>
                            <div class="candidate-tags">
                                @if($movement->does_contain_audio == 1)
                                <a href="javascript:void(0)" class="pt-2 art-type"><span class="material-icons title-font">audiotrack</span></a>
                                @endif
                                @if($movement->does_contain_video == 1)
                                <a href="javascript:void(0)" class="pt-2 art-type"><span class="material-icons title-font">videocam</span></a>
                                @endif
                                
                            </div>
                        </div>
                    </div>

                    <div class="ml-auto detail-statistics">
                        <div class="stat text-center">
                            <span>{{$movement->count_like}}</span>
                            <p><span class="material-icons title-font mr-1">favorite</span></p>
                        </div>
                        <div class="stat text-center">
                            <span>{{$movement->count_save}}</span>
                            <p><span class="material-icons title-font gray">bookmark</span></p>
                        </div>
                        <div class="stat text-center">
                            <span>{{$movement->count_share}}</span>
                            <p><span class="material-icons title-font mr-1">share</span></p>
                        </div>
                        <div class="stat text-center">
                            <span>{{$movement->count_read}}</span>
                            <p><span class="material-icons mr-2">visibility</span></p>
                        </div>
                    </div>
                    @if($movement->status == 2 || $movement->status == 3) 
                    <div class="detail-actions text-right">
                        <a href="{{ route('admin.movement.approve',['panel' => session('panel'), 'id' => $movement->id ])}}"
                            class="btn btn-em approveArticle">{{ @trans('movement.approve') }}</a>                    
                    </div>               
                    <div class="detail-actions text-right">
                        <a href="javascript:void(0)" class="btn btn-em" id="myBtn">{{ @trans('movement.reject') }}</a>
                    </div>
                    @endif


                </div>
                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" data-toggle="tab" href="#detail">{{ @trans('movement.details') }}</a>
                    </li>
                </ul>
            </div>

            <div class="detail-content mt-4">
                <!-- Tab panes -->
                <div class="tab-content box">
                    <div id="detail" class="tab-pane fade show active">
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="btn-group float-right mt-3" role="group">
                                    <!-- <label class="control-label1" style="font-size: var(--extrasmall-font); padding-right: 10px;">{{ @trans('movement.hot_off_the_press') }}</label> -->
                                @permission('movement-mfr-write')
                                
                                <!-- <label class="switch">
                                    <input type="checkbox" @click="toggleStatus({{$movement->id}})"
                                        :checked=hot_off_press>
                                    <span class="slider round"></span>
                                </label> -->                                       
                                @endpermission

                              
                                </div>
                                
                                
                                <div>
                                    <div style="float: left; width: 83%">

                                        <h3 class="detail-heading">{{ @trans('movement.details') }}</h3>
                                    </div>
                                    <div style="float: right; border: ">
                                        <div class="detail-actions text-right">
                                            <a href="{{route('front.movement.movementpreview', ['slug' => $movement->slug])}}" target="_blank" class="btn btn-em">{{ @trans('movement.preview_movement') }}</a>
                                        </div>
                                    </div>
                                </div>
                                <div style="clear: both;"></div>
                                                             
                                <div class="info">
                                    <div class="form-group">
                                        <label class="control-label">{{ @trans('movement.movement_title') }}</label>
                                        <p class="display-info">{{$movement->movement_title}}</p>
                                    </div>
                                    <div class="form-group">
                                       <label class="control-label">{{ @trans('movement.series') }}</label>
                                        <p class="display-info">{{$movement->series->series_name}}</p>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label">{{ @trans('movement.category') }}</label>
                                        <p class="display-info">{{$seriesCategory->name}}</p>
                                    </div>
                                     <div class="form-group">
                                        <label class="control-label">{{ @trans('movement.mover') }}</label>
                                        <p class="display-info">{{$movement->mover->first_name. ' '.$movement->mover->last_name}}</p>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label">{{ @trans('movement.created_date') }}</label>
                                        <p class="display-info">{{ $movement->created_at}}</p>
                                    </div>
                                     @if($movement->status != 2)
                                    <div class="form-group">
                                        <label class="control-label">{{ @trans('movement.hot_off_the_press') }}</label>
                                        <p class="display-info">@if($movement->hot_off_press == '1' ) Yes @else No @endif</p>
                                    </div>
                                    @endif
                                    <div class="form-group" style="width: 560px;">
                                        <label class="control-label">{{ @trans('movement.topics') }}</label>
                                        <p class="display-info admintags">
                                            {!! $topicsdata !!}
                                        </p>
                                    </div>
                                    


                                   
                                   
                                </div>
                                <div>
                                    <div class="form-group">
                                        <label class="control-label">{{ @trans('movement.cover_image') }}</label>
                                    </div>
                                    <div class="form-group" style="text-align: center;"> 
                                        @if($movement->cover_image != '')                        
                                            <img src="{{ config('custom.download.url')}}{{ config('custom.upload.movement.movement') }}/{{$movement->mover_user_id}}/{{$movement->id}}/{{$movement->cover_image}}" alt="{{$movement->movement_title}}" height="470px" style="text-align: center;"  />
                                        @endif
                                    </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</main>

@endsection



@push('pageModals')
@include('admin.components.modal_delete_js')
@endpush
@include('admin.modules.movement.modals.reject_reason')
@push('pageJs')
<script>
    var movement_indexUrl = "{{route('admin.movement.index',['panel' => Session::get('panel') ])}}";
    var movement_deleteUrl = "{{route('admin.movement.destroy',['panel' => Session::get('panel'),'id' => null])}}";
    var toggle_status_url = "{{route('admin.movement.toggle_status',['panel' => Session::get('panel'),'id' => null])}}";
    @if(Session::has('message'))
    Snackbar.show({
        pos: 'bottom-right',
        text: "{!! session('message') !!}",
        actionText: 'Okay'
    });
    @endif
</script>

<script type="text/javascript">
$(document).ready(function () {

     // Attach Button click event listener 
    $("#myBtn").click(function(){

         // show Modal
         $('#modalBlacklist').modal({backdrop: 'static', keyboard: false});
        //  $('#modalBlacklist').modal('show');

    });


    $('.approveArticle').on('click', function() {
        $(this).addClass('disabled');
        $(this).text('Please Wait...')
    });
});
    
function initFrmReject()
{
    
    $('#frmReject').validate({
        rules: {
            reject_reason : 'required'
        },
        messages: {
            reject_reason: {
                required: "{{ @trans('movement.reject_reason_is_required') }}"
            }
        }
    })
    if($('#reject_reason').val() != '')
    {
        $(".submitBtn").html("Please Wait...");
    }
} 
</script>

@endpush