@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>Edit Post: {{ $post->title }}</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.update', $post->id) }}" enctype="multipart/form-data">
					@csrf
					@method('PUT')
					<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" value="{{ old('title', $post->title) }}">

								@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" value="{{ old('subheading', $post->subheading) }}">

								@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

								@if ($post->featured_image)
									<div class="mt-2">
										<img src="https://cdn.stevenhardy.digital/steven-photos/{{$post->featured_image}}" alt="{{ $post->title }}" width="100" class="img-fluid">
									</div>
								@endif
							</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" @if(old('is_published', $post->is_published)) checked @endif 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" @if(old('is_featured', $post->is_featured)) checked @endif 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" @if(old('pinned', $post->pinned)) checked @endif value="1">
									<label for="pinned" class="form-check-label">Pinned</label>

									@error('pinned')
									<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 }}" @if(old('category_id', $post->post_category_id) == $category->id) selected @endif>{{ $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">{{ old('content', $post->content) }}</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" value="{{ old('meta_title', $post->meta_title) }}" maxlength="60">
						<span class="text-muted"><span id="metaTitleCounter">{{ 60 - strlen($post->meta_title) }}</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" value="{{ old('meta_description', $post->meta_description) }}" maxlength="255">
						<span class="text-muted"><span id="metaDescriptionCounter">{{ 255 - strlen($post->meta_description) }}</span> characters remaining</span>

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

					<button type="submit" class="btn btn-primary">Update</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