@extends('backend.layouts.master')

@section('title', 'Forum List')

@section('styles')

<!-- START Datatables -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/css/dataTables.bootstrap4.min.css" integrity="sha256-LpykTdjMm+jVLpDWiYOkH8bYiithb4gajMYnIngj128=" crossorigin="anonymous" />
<!-- END Datatables -->

@endsection

@section('scripts')

<!-- START Delete Confirmation -->
<script>
$('button[name="deleteButton"]').on('click', function(e){
	var $form=$(this).closest('form');
	e.preventDefault();
	$('#deleteModal').modal({ backdrop: 'static', keyboard: false })
	.one('click', '#deleteConfirm', function (e) {
		$form.trigger('submit');
	});
});
</script>
<!-- END Delete Confirmation -->

<!-- START Datatables -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/js/jquery.dataTables.min.js" integrity="sha256-qcV1wr+bn4NoBtxYqghmy1WIBvxeoe8vQlCowLG+cng=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/js/dataTables.bootstrap4.min.js" integrity="sha256-PahDJkda1lmviWgqffy4CcrECIFPJCWoa9EAqVx7Tf8=" crossorigin="anonymous"></script>
<script src="/templates/sb-admin/5.0.2/js/sb-admin-datatables.min.js"></script>
<script type="text/javascript">
	$('#dataTable').dataTable({
		order: [[2, 'asc']],
		"columnDefs": [
			{ "targets": [5], "orderable": false }
		]
	});
</script>
<!-- END Datatables -->

@endsection

@section('content')

	<!-- Breadcrumbs -->
	<ol class="breadcrumb">
		<li class="breadcrumb-item"><a href="{{ route('backend.index') }}">Backend</a></li>
		<li class="breadcrumb-item"><a href="{{ route('backend.forum.index') }}">Forum</a></li>
		<li class="breadcrumb-item active">List</li>
	</ol>

	<h1>Forums</h1>

	<div class="card mb-3">
		<div class="card-header"><i class="fa fa-plus"></i> Create Forum</div>
		<div class="card-body">
			<form method="post" action="{{ route('backend.forum.store') }}">

				{{ csrf_field() }}

				<div class="form-row">

					<div class="form-group col-md-4">
						<label for="name">Name</label>
						<input type="text" class="form-control {{ $errors->first('name', 'is-invalid') }}" id="name" name="name" value="{{ old('name') }}" required autofocus="">
						<div class="invalid-feedback">{{ $errors->first('name') }}</div>
					</div>

					<div class="form-group col-md-4">
						<label for="sort_order">Sort Order</label>
						<input type="text" class="form-control {{ $errors->first('sort_order', 'is-invalid') }}" id="sort_order" name="sort_order" value="{{ old('sort_order') }}" required>
						<div class="invalid-feedback">{{ $errors->first('sort_order') }}</div>
					</div>

					<div class="form-group col-md-4">
						<label for="category_id">Category</label>
						<select class="form-control {{ $errors->first('category_id', 'is-invalid') }}" id="category_id" name="category_id" required >
							<option disabled selected>Select Category</option>

							@foreach($categories as $category)

								<option value="{{ $category->id }}" @if(old('category_id') == $category->id) selected="selected" @endif >{{ $category->name }}</option>

							@endforeach

						</select>
						<div class="invalid-feedback">{{ $errors->first('category_id') }}</div>
					</div>

					<div class="form-group col-md-12">
						<label for="description">Description</label>
						<!--<input type="text" class="form-control {{ $errors->first('description_OLD', 'is-invalid') }}" id="description_OLD" name="description_OLD" value="{{ old('description_OLD') }}" required>-->
						<textarea class="form-control {{ $errors->first('description', 'is-invalid') }}" id="description" name="description" rows="2" required>{{ old('description') }}</textarea>
						<div class="invalid-feedback">{{ $errors->first('description') }}</div>
					</div>

				</div>
				<div class="form-row">

					<div class="form-group col-md-4">
						<button type="submit" class="btn btn-primary">Create Forum</button> <button type="reset" class="btn btn-default">Reset Form</button>
					</div>
				</div>
			</form>
		</div>
	</div>

	<div class="card mb-3">
		<div class="card-header"><i class="fa fa-table"></i> Forum Table</div>
		<div class="card-body">
			<table class="table table-hover" id="dataTable" cellspacing="0">
				<thead>
					<tr>
						<th>ID</th>
						<th>Name</th>
						<th>Sort Odrder</th>
						<th>Slug</th>
						<th>Thread Count</th>
						<th>Created</th>
						<th class="text-right" width="135">Actions</th>
					</tr>
				</thead>
				<tbody>

					@foreach($forums as $forum)

						<tr>
							<td>{{ $forum->id }}</td>
							<td><a href="{{ route('backend.forum.show', $forum->id) }}">{{ $forum->name }}</a></td>
							<td>{{ $forum->sort_order }}</td>
							<td>{{ $forum->slug }}</td>
							<td>{{ $forum->threads_count }}</td>
							<td>{{ $forum->created_at->diffForHumans() }}</td>
							<td class="text-right">
								<form method="post" id="deleteForm" action="{{ route('backend.forum.destroy', $forum->id) }}">
									<a class="btn btn-sm btn-success" title="Show" href="{{ route('backend.forum.show', $forum->id) }}"><i class="fas fa-eye"></i></a> 
									<a class="btn btn-sm btn-primary" title="Edit" href="{{ route('backend.forum.edit', $forum->id) }}"><i class="fas fa-edit"></i></a> 
								
									{!! csrf_field() !!} 
									{!! method_field('delete') !!}

									<button class="btn btn-sm btn-danger" title="Delete" id="deleteButton" name="deleteButton" type="submit"><i class="fa fa-trash"></i></button>
								</form>
							</td>
						</tr>

					@endforeach

				</tbody>
			</table>
		</div>
	</div>

	<!-- START Delete Confirmation Modal -->
	<div class="modal fade" id="deleteModal" tabindex="-1" category="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
		<div class="modal-dialog" category="document">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="deleteModalLabel">Delete Confirmation</h5>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<div class="modal-body">
					Please confirm you would like to delete the selected forum.
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
					<button type="submit" class="btn btn-danger" id="deleteConfirm">Delete</button>
				</div>
			</div>
		</div>
	</div>
	<!-- END Delete Confirmation Modal -->

@endsection