@extends('admin.layouts.master')
@section('content')

<br>
<br>
<div class="breadcrumbs">
	<div class="col-sm-4">
		<div class="page-header float-left">
			<div class="page-title">
				<h1>Pages</h1>
			</div>
		</div>
	</div>
</div>

    <div class="content mt-3">
		<div class="col-sm-8">
			<div class="page-header float-left">
				<div class="page-title">
					<ol class="breadcrumb text-right">
						<a href="{{url('/admin/pages')}}" class="btn btn-primary">Add page</a> 
					</ol>
				</div>
			</div>
			<div class=" float-left">
				<div class="page-title">
					<ol class="breadcrumb text-right">
						<a href="{{url('/admin/pages_details')}}" class="btn btn-primary">Pages Details</a> 
					</ol>
				</div>
			</div>
		</div>

		<div class="col-md-12">
			<div class="card">
				<div class="card-body">
			
				<form action="{{ isset($pages) ? route('pages.update', $pages->id) : route('pages.handleForm') }}" id="pagesForm" method="POST">
					@csrf
					@if(isset($pages))
						@method('POST') 
						<input type="hidden" name="pages_id" value="{{ $pages->id }}">
					@endif
					<div class="form-group">
						<label>Title</label>
						<input type="text" class="form-control" name="title" value="{{ isset($pages) ? $pages->title : '' }}">
					</div>
					<div class="form-group">
						<label>Heading</label>

						<select class="form-control custom-dropdown" name="heading">
						<option value=""></option>
						<option value="Useful Link" {{ isset($pages) && $pages->heading == 'Useful Link' ? 'selected' : '' }} > Useful Link</option>
						<option value="Terms & Agreement" {{ isset($pages) && $pages->heading == 'Terms & Agreement' ? 'selected' : '' }} > Terms & Agreement</option>
						<option value="Privacy & Policy" {{ isset($pages) && $pages->heading == 'Privacy & Policy' ? 'selected' : '' }} > Privacy & Policy</option>
					</div>

					<div class="form-group">
						<label>Content</label>
						<textarea class="cleditor" rows="15" name="content" >{{ isset($pages) ? $pages->content : '' }}</textarea>
					</div>
					<button type="submit" class="btn btn-primary" name="btn_add"><i class="fa fa-plus"></i>{{ isset($pages) ? 'Edit' : 'Add' }}</button>
				</form>		
			</div>
		</div>
	</div>

	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script>
			$(document).ready(function() {
			$('#pagesForm').submit(function(e) {
				e.preventDefault();

				var formData = $(this).serialize(); 

				$.ajax({
					type: 'POST',   
					url: $(this).attr('action'),
					data: formData,
					headers: {
						'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') // Include CSRF token
					},
					success: function(response) {
						if (response.status === 'success') {
							toastr.success(response.message);
							$('#pagesForm')[0].reset();
						} else {
							toastr.error(response.message);
						}
					},
					error: function(xhr, status, error) {
						console.error(xhr.responseText);
						alert('Something went wrong. Please try again.');
					}
				});
			});
		});
	</script>
	
@endsection