@extends('admin.master')

@section('title', __('Stories'))

@section('content')

<div class="row main" id="stories">
	<div class="ui menu shadowless">		
		<a id="bulk-delete" @click="deleteItems" :href="routes.delete+ids.join()" class="item" :class="{disabled: isDisabled}">
			{{ __('Delete') }}
		</a>

		<a class="item export">{{ __('Export') }}</a>

		<div class="ui pointing dropdown link item">
			<span class="default text">{{ __('Category') }}</span>
			<i class="dropdown icon"></i>
			<div class="menu">
				<a href="{{ route('stories') }}" class="item">{{ __('All Categories') }}</a>
				@if(isset($categories) && $categories && $categories->count() > 0)
					@foreach($categories as $category)
						@if($category && isset($category->id) && isset($category->name))
						<a href="{{ route('stories', ['category_id' => $category->id]) }}" class="item">{{ $category->name }}</a>
						@endif
					@endforeach
				@else
					<div class="item disabled">{{ __('No categories available') }}</div>
				@endif
			</div>
		</div>

		<div class="right menu">
			<form action="{{ route('stories') }}" method="get" id="search" class="ui transparent icon input item">
        		<input class="prompt" type="text" name="keyword" placeholder="{{ __('Search') }}..." value="{{ request('keyword') }}">
        		<i class="search link icon" onclick="$('#search').submit()"></i>
      		</form>
			<a href="{{ route('stories.create') }}" class="item ml-1">{{ __('Add') }}</a>
		</div>
	</div>

	@if(session('user_message'))
	<div class="ui message fluid rounded-corner">
		<i class="close icon"></i>
		{{ session('user_message') }}
	</div>
	@endif
	
	<div class="table wrapper items stories">
		<table class="ui unstackable celled basic table">
			<thead>
				<tr>
					<th>
						<div class="ui fitted checkbox">
						  <input type="checkbox" @change="selectAll">
						  <label></label>
						</div>
					</th>
					<th class="four columns wide">
						<a href="{{ route('stories', ['orderby' => 'title', 'order' => request('order') === 'asc' ? 'desc' : 'asc']) }}">{{ __('Title') }}</a>
					</th>
					<th>{{ __('Cover') }}</th>
					<th>{{ __('Category') }}</th>
					<th>
						<a href="{{ route('stories', ['orderby' => 'price', 'order' => request('order') === 'asc' ? 'desc' : 'asc']) }}">{{ __('Price') }}</a>
					</th>
					<th>{{ __('Duration') }}</th>
					<th>{{ __('Active') }}</th>
					<th>
						<a href="{{ route('stories', ['orderby' => 'created_at', 'order' => request('order') === 'asc' ? 'desc' : 'asc']) }}">{{ __('Created at') }}</a>
					</th>
					<th>{{ __('Actions') }}</th>
				</tr>
			</thead>
			<tbody>
				@if(isset($stories) && $stories && $stories->count() > 0)
					@foreach($stories as $story)
						@if($story && isset($story->id))
						<tr>
							<td class="center aligned">
								<div class="ui fitted checkbox select">
								  <input type="checkbox" value="{{ $story->id }}" @change="toogleId({{ $story->id }})">
								  <label></label>
								</div>
							</td>
							<td><a href="{{ route('stories.edit', $story->id) }}">{{ isset($story->title) ? Str::limit($story->title, 50) : __('Untitled Story') }}</a></td>
							<td class="center aligned">
								@if(isset($story->cover_image) && $story->cover_image)
								<img src="{{ asset('storage/' . $story->cover_image) }}" class="ui mini rounded image">
								@else
								<i class="image outline icon"></i>
								@endif
							</td>
							<td>{{ $story->category_name ?? __('Uncategorized') }}</td>
							<td class="center aligned">
								@if(isset($story->is_free) && $story->is_free)
								<span class="ui green label">{{ __('Free') }}</span>
								@else
								<span class="ui blue label">{{ config('payments.currency_symbol', '$') }}{{ $story->price ?? '0.00' }}</span>
								@endif
							</td>
							<td class="center aligned">{{ $story->duration ?? __('N/A') }}</td>
							<td class="center aligned">
								<div class="ui toggle fitted checkbox">
								  <input type="checkbox" @if(isset($story->active) && $story->active) checked @endif @change="updateActiveStatus('{{ $story->id }}')">
								  <label></label>
								</div>
							</td>
							<td class="center aligned">{{ isset($story->created_at) ? $story->created_at->format('Y-m-d H:i') : __('N/A') }}</td>
							<td class="center aligned one column wide">
								<div class="ui dropdown">
									<i class="bars icon mx-0"></i>
									<div class="menu dropdown left">
										<a href="{{ route('stories.edit', $story->id) }}" class="item">{{ __('Edit') }}</a>
										<a href="{{ route('stories.comments', $story->id) }}" class="item">{{ __('Comments') }}</a>
										<a href="{{ route('stories.destroy', $story->id) }}" class="item">{{ __('Delete') }}</a>
									</div>
								</div>
							</td>
						</tr>
						@endif
					@endforeach
				@else
					<tr>
						<td colspan="9" class="center aligned">
							<div class="ui placeholder segment">
								<div class="ui icon header">
									<i class="book icon"></i>
									{{ __('No stories found') }}
								</div>
								<div class="inline">
									<a href="{{ route('stories.create') }}" class="ui primary button">{{ __('Create New Story') }}</a>
								</div>
							</div>
						</td>
					</tr>
				@endif
						{{ config('payments.currency_symbol') }}{{ $story->price }}
						@endif
					</td>
					<td class="center aligned">{{ $story->duration ?? '-' }}</td>
					<td class="center aligned">
						<div class="ui toggle fitted checkbox">
						  <input type="checkbox" @if($story->active) checked @endif @change="updateActiveStatus('{{ $story->id }}')">
						  <label></label>
						</div>
					</td>
					<td class="center aligned">{{ $story->created_at->format('Y-m-d H:i') }}</td>
					<td class="center aligned one column wide">
						<div class="ui dropdown">
							<i class="bars icon mx-0"></i>
							<div class="menu dropdown left">
								<a href="{{ route('stories.edit', $story->id) }}" class="item">{{ __('Edit') }}</a>
								<a href="{{ route('stories.comments', $story->id) }}" class="item">{{ __('Comments') }}</a>
								<a href="{{ route('stories.destroy', $story->id) }}" class="item">{{ __('Delete') }}</a>
							</div>
						</div>
					</td>
				</tr>
				@endforeach
			</tbody>
		</table>
	</div>

	@if($stories->hasPages())
	<div class="ui fluid divider"></div>
	{{ $stories->appends(request()->input())->onEachSide(1)->links() }}
	@endif

	<form class="ui form modal export" action="{{ route('stories.export', 'all') }}" method="POST">
		<div class="header">{{ __('Export :table_name table', ['table_name' => 'Stories']) }}</div>
		<div class="content">
			<input type="hidden" name="ids" :value="ids.join()">
			<input type="hidden" name="model" value="stories">
			<table class="ui unstackable fluid basic table mt-0">
				<thead>
					<tr>
						<th>{{ __('Column') }}</th>
						<th>{{ __('Rename column') }}</th>
					</tr>
				</thead>
				<tbody>
					@foreach(['id', 'title', 'slug', 'description', 'category_id', 'price', 'is_free', 'duration', 'active', 'created_at'] as $column)
					<tr>
						<td>
							<div class="ui checked checkbox">
							  <input type="checkbox" id="{{ $column }}" name="columns[{{ $column }}][active]" checked="checked">
							  <label for="{{ $column }}">{{ $column }}</label>
							</div>
							<input type="hidden" name="columns[{{ $column }}][name]" value="{{ $column }}">
						</td>
						<td>
							<input type="text" name="columns[{{ $column }}][new_name]" placeholder="...">
						</td>
					</tr>
					@endforeach
				</tbody>				
			</table>
		</div>
		<div class="actions">
			<button class="ui yellow large circular button approve">{{ __('Export') }}</button>
			<button class="ui red circular large button cancel" type="button">{{ __('Cancel') }}</button>
		</div>
	</form>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
	let app = new Vue({
		el: '#stories',
		data: {
			routes: {
				delete: '{{ route("stories.destroy", "") }}/'
			},
			ids: [],
			isDisabled: true,
		},
		methods: {
			toogleId: function(id) {
				if(this.ids.indexOf(id) >= 0) this.ids.splice(this.ids.indexOf(id), 1);
				else this.ids.push(id);
			},
			selectAll: function() {
				$('#stories tbody .ui.checkbox.select').checkbox('toggle');
			},
			deleteItems: function() {
				if(!this.ids.length) return;

				if(confirm('{{ __("Are you sure you want to delete the selected item(s) ?") }}')) {
					$.post(this.routes.delete + this.ids.join(), {_method: 'delete'})
					.done(function(res) {
						if(res.success) {
							location.reload();
						}
					});
				}
			},
			updateActiveStatus: function(storyId) {
				$.post('{{ route("stories.active") }}', {
					id: storyId,
					active: $(`input[type="checkbox"][onchange*="${storyId}"]`).is(':checked') ? 1 : 0
				}).done(function(res) {
					if(res.success) {
						$('#stories').vNotify('success', '{{ __("Active status updated") }}');
					}
				});
			}
		},
		watch: {
			ids: function(val) {
				this.isDisabled = !val.length;
			}
		}
	});
});
</script>
@endsection