@extends('layouts.app')

@section('content')
	@if(session()->has('success'))
		<div class="alert alert-success">
			{{ session()->get('success') }}
		</div>
	@endif
	<div class="container-fluid">
		<div class="row justify-content-between align-items-center">
			<div class="col-auto">
				<h1>Add new blog post</h1>
			</div>
			<div class="col-auto">
				<a href="{{ route('admin.posts.index') }}" class="btn btn-secondary"><i class="fas fa-chevron-left"></i> Back to Posts</a>
			</div>
		</div>
		<hr>

		<div class="row">
			<div class="col-md-12">
				<form method="post" action="{{ route('admin.posts.add')}}" enctype="multipart/form-data">
					@csrf
					<div class="row">
						<div class="col-md-8">
							<div class="form-group">
								<label for="title">Title</label>
								<input type="text" name="title" id="title" class="form-control @error('title') is-invalid @enderror" />

								@error('title')
								<span class="invalid-feedback">{{ $message }}</span>
								@enderror
							</div>

							<div class="form-group">
								<label for="subheading">Subheading</label>
								<input type="text" name="subheading" id="subheading" class="form-control @error('subheading') is-invalid @enderror" />

								@error('subheading')
								<span class="invalid-feedback">{{ $message }}</span>
								@enderror
							</div>
						</div>

						<div class="col-md-4">
							<div class="form-group">
								<label for="featured_image">Featured Image</label>
								<input type="file" name="featured_image" id="featured_image" class="form-control-file @error('featured_image') is-invalid @enderror" />

								@error('featured_image')
								<span class="invalid-feedback">{{ $message }}</span>
								@enderror
							</div>
							<div class="form-check mb-4">
								<input type="checkbox" name="is_published" id="is_published" class="form-check-input @error('is_published') is-invalid @enderror" value="1">
								<label for="is_published" class="form-check-label">Is published</label>
								@error('is_published')
								<span class="invalid-feedback">{{ $message }}</span>
								@enderror
							</div>
							<div class="form-check mb-4">
								<input type="checkbox" name="is_featured" id="is_featured" class="form-check-input @error('is_featured') is-invalid @enderror" value="1">
								<label for="is_featured" class="form-check-label">Is featured</label>

								@error('is_featured')
								<span class="invalid-feedback">{{ $message }}</span>
								@enderror
							</div>

							<div class="form-check mb-4">
								<input type="checkbox" name="pinned" id="pinned" class="form-check-input @error('pinned') is-invalid @enderror" value="1">
								<label for="pinned" class="form-check-label">Pinned Post</label>

								@error('pinned')
								<span class="invalid-feedback">{{ $message }}</span>
								@enderror
							</div>
							<div class="form-check mb-4">
								<input class="form-check-input @error('is_scheduled') is-invalid @enderror" type="checkbox" value="1" name="is_scheduled" id="is_scheduled">
								<label class="form-check-label" for="is_scheduled">
									Is scheduled?
								</label>
								<input type="datetime-local" name="scheduled_at" id="scheduled_at" class="form-control @error('scheduled_at') is-invalid @enderror" />
								@error('is_scheduled')
								<span class="invalid-feedback">{{ $message }}</span>
								@enderror
							</div>

							<div class="form-group">
								<label for="category_id">Post Category</label>
								<select name="post_category_id" id="post_category_id" class="form-control @error('category_id') is-invalid @enderror">
									<option value="">-- Select Category --</option>
									@foreach ($categories as $category)
										<option value="{{ $category->id }}">{{ $category->name }}</option>
									@endforeach
								</select>

								@error('category_id')
								<span class="invalid-feedback">{{ $message }}</span>
								@enderror
							</div>

						</div>
					</div>

					<div class="form-group">
						<label for="content">Content</label>
						<textarea name="content" id="content" class="form-control @error('content') is-invalid @enderror"></textarea>

						@error('content')
						<span class="invalid-feedback">{{ $message }}</span>
						@enderror
					</div>

					<h2>SEO</h2>

					<div class="form-group">
						<label for="meta_title">Meta Title</label>
						<input type="text" name="meta_title" id="meta_title" class="form-control @error('meta_title') is-invalid @enderror" maxlength="60">
						<span class="text-muted"><span id="metaTitleCounter">60</span> characters remaining</span>

						@error('meta_title')
						<span class="invalid-feedback">{{ $message }}</span>
						@enderror
					</div>

					<div class="form-group">
						<label for="meta_description">Meta Description</label>
						<input type="text" name="meta_description" id="meta_description" class="form-control @error('meta_description') is-invalid @enderror" maxlength="255">
						<span class="text-muted"><span id="metaDescriptionCounter">255</span> characters remaining</span>

						@error('meta_description')
						<span class="invalid-feedback">{{ $message }}</span>
						@enderror
					</div>

					<button type="submit" class="btn btn-primary">Create</button>
				</form>
			</div>
		</div>
	</div>
@endsection

@section('footer-scripts')
	{{--	<script src="{{ asset('ckeditor/ckeditor.js') }}"></script>--}}
	<script type="text/javascript">
		{{--setTimeout(function(){--}}
		{{--    CKEDITOR.replace( 'content', {--}}
		{{--        filebrowserUploadUrl: "https://steven.photos/cms/post-admin/ck-upload-image?_token={{csrf_token()}}",--}}
		{{--        filebrowserUploadMethod: 'form'--}}
		{{--    });--}}
		{{--}, 400);--}}

		Laraberg.init('content', {
			laravelFilemanager: true
		});
	</script>
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script>
		$(document).ready(function() {
			// Set up character count for meta title
			var metaTitleMaxChars = 60;
			var metaTitleCountEl = $('#metaTitleCounter');

			$('#meta_title').keyup(function() {
				var metaTitleLength = $(this).val().length;
				var charsLeft = metaTitleMaxChars - metaTitleLength;

				metaTitleCountEl.text(charsLeft);
				if (charsLeft < 0) {
					metaTitleCountEl.addClass('text-danger');
				} else {
					metaTitleCountEl.removeClass('text-danger');
				}
			});

			// Set up character count for meta description
			var metaDescMaxChars = 150;
			var metaDescCountEl = $('#metaDescriptionCounter');

			$('#meta_description').keyup(function() {
				var metaDescLength = $(this).val().length;
				var charsLeft = metaDescMaxChars - metaDescLength;

				metaDescCountEl.text(charsLeft);
				if (charsLeft < 0) {
					metaDescCountEl.addClass('text-danger');
				} else {
					metaDescCountEl.removeClass('text-danger');
				}
			});
		});
	</script>
@endsection