@extends('admin.master')
@section('title', __('Story Categories'))
@section('content')
<div class="row main" id="story_categories">
	<div class="ui menu large shadowless">
		<a id="bulk-delete" @click="deleteItems" :href="route+ids.join()" class="item" :class="{disabled: isDisabled}">{{ __('Delete') }}</a>
		<a class="item export">{{ __('Export') }}</a>
		<div class="right menu">
			<a href="{{ route('story_categories.create') }}" class="item">{{ __('Add') }}</a>
		</div>
	</div>
	<div class="table wrapper items story_categories">
		<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>ID</th>
					<th class="five columns wide">{{ __('Name') }}</th>
					<th>{{ __('Slug') }}</th>
					<th>{{ __('Active') }}</th>
					<th>{{ __('Created at') }}</th>
					<th>{{ __('Updated at') }}</th>
					<th>{{ __('Actions') }}</th>
				</tr>
			</thead>
			<tbody>
				@if(isset($categories) && $categories && $categories->count() > 0)
					@foreach($categories as $category)
						@if($category && isset($category->id))
						<tr>
							<td class="center aligned">
								<div class="ui fitted checkbox select">
								  <input type="checkbox" value="{{ $category->id }}" @change="toogleId({{ $category->id }})">
								  <label></label>
								</div>
							</td>
							<td class="center aligned">{{ $category->id }}</td>
							<td>{{ isset($category->name) ? ucfirst($category->name) : __('Unnamed Category') }}</td>
							<td>{{ $category->slug ?? __('No slug') }}</td>
							<td class="center aligned">
								<div class="ui toggle fitted checkbox">
								  <input type="checkbox" @if(isset($category->active) && $category->active) checked @endif @change="updateActiveStatus('{{ $category->id }}')">
								  <label></label>
								</div>
							</td>
							<td class="center aligned">{{ isset($category->created_at) ? $category->created_at->format('Y-m-d H:i') : __('N/A') }}</td>
							<td class="center aligned">{{ isset($category->updated_at) ? $category->updated_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('story_categories.edit', $category->id) }}" class="item">{{ __('Edit') }}</a>
										<a href="{{ route('story_categories.destroy', $category->id) }}" class="item">{{ __('Delete') }}</a>
									</div>
								</div>
							</td>
						</tr>
						@endif
					@endforeach
				@else
					<tr>
						<td colspan="8" class="center aligned">
							<div class="ui placeholder segment">
								<div class="ui icon header">
									<i class="folder open outline icon"></i>
									{{ __('No story categories found') }}
								</div>
								<div class="inline">
									<a href="{{ route('story_categories.create') }}" class="ui primary button">{{ __('Create New Category') }}</a>
								</div>
							</div>
						</td>
					</tr>
				@endif
			</tbody>
		</table>
	</div>
	<form class="ui form modal export" action="{{ route('story_categories.export', 'all') }}" method="POST">
		<div class="header">{{ __('Export :table_name table', ['table_name' => 'Story Categories']) }}</div>
		<div class="content">
			<input type="hidden" name="ids" :value="ids.join()">
			<input type="hidden" name="model" value="story_categories">
			<table class="ui unstackable fluid basic table mt-0">
				<thead>
					<tr>
						<th>{{ __('Column') }}</th>
						<th>{{ __('Rename column') }}</th>
					</tr>
				</thead>
				<tbody>
					@foreach(['id', 'name', 'slug', 'description', 'active', 'created_at', 'updated_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: '#story_categories',
		data: {
			route: '{{ route("story_categories.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() {
				$('#story_categories tbody .ui.checkbox.select').checkbox('toggle');
			},
			deleteItems: function() {
				if(!this.ids.length) return;

				$.post('{{ route("story_categories.destroy", "") }}/' + this.ids.join(), {_method: 'delete'})
				.done(function(res) {
					if(res.success) {
						location.reload();
					}
				});
			},
			updateActiveStatus: function(categoryId) {
				$.post('{{ route("story_categories.active") }}', {
					id: categoryId,
					active: $(`input[type="checkbox"][onchange*="${categoryId}"]`).is(':checked') ? 1 : 0
				}).done(function(res) {
					if(res.success) {
						$('#story_categories').vNotify('success', '{{ __("Active status updated") }}');
					}
				});
			}
		},
		watch: {
			ids: function(val) {
				this.isDisabled = !val.length;
			}
		}
	});
});
</script>
@endsection