@extends('layouts.index')

@section('content')
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/36.0.1/classic/ckeditor.js"></script>
<style>
.note-editable { /*background-color: wheat !important; Important to override CKEditor styles */color: #000; /* Text color */padding: 10px;}
</style>
<div class="content-body">
    <!-- row -->
    <div class="container-fluid">
        <div class="form-head d-flex mb-3 mb-md-2 align-items-start">
            <div class="me-auto d-none d-lg-block">
                <h3 class="font-w600 m-0">Add Blog</h3>
            </div>
            @if(session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
            @endif
        </div>

        <!-- Add Doctor Form -->
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <form action="{{route('admin.blog-submit')}}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <div class="mb-3">
                                <label for="blog_pic" class="form-label">Blog Picture</label>
                                <input type="file" class="form-control" id="profile_pic" name="blog_pic" required>
                            </div>
                            <div class="mb-3">
								<label for="medical_license" class="form-label">Title</label>
								<input type="text" class="form-control" id="medical_license" name="title" required>
							</div>
							<div class="mb-3">
								<label for="work_experience" class="form-label">Description</label>
								<textarea id="summernote" name="description" required></textarea>
							</div>
                            <div class="mb-3">
								<label for="work_experience" class="form-label">Short Description</label>
								<textarea id="" class="form-control" name="short_description" required></textarea>
							</div>

							<div class="mb-3">
								<label for="medical_license_slug" class="form-label">Slug</label>
								<input type="text" class="form-control" id="medical_license_slug" name="slug" required>
							</div>

							<div class="mb-3">
                                <label for="medical_license" class="form-label">Meta Title</label>
                                <input type="text" class="form-control" id="medical_license" name="meta_title">
                            </div>
							<div class="mb-3">
                                <label for="medical_license" class="form-label">Meta Keyword</label>
                                <input type="text" class="form-control" id="medical_license" name="meta_keyword">
                            </div>
							<div class="mb-3">
                                <label for="medical_license" class="form-label">Meta Description</label>
                                <input type="text" class="form-control" id="medical_license" name="meta_description">
                            </div>
							<div class="mb-3">
						
								<select class="form-select" id="meta_description" name="status" required>
									<option value="">Status</option>
									<option value="active">Active</option>
									<option value="inactive">Inactive</option>
								</select>
							</div>

                            <button type="submit" class="btn btn-primary">Submit</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        const titleInput = document.getElementById('medical_license');
        const slugInput = document.getElementById('medical_license_slug');

        titleInput.addEventListener('input', function() {
            const title = titleInput.value.trim().toLowerCase().replace(/[^\w\s]/g, '-').replace(/\s+/g, '-');
            slugInput.value = title;
        });
    });
</script>



<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js"></script>

<script>
  $('#summernote').summernote({
	placeholder: 'Hello stand alone ui',
	tabsize: 2,
	height: 120,
	toolbar: [
	  ['style', ['style']],
	  ['font', ['bold', 'underline', 'clear']],
	  ['color', ['color']],
	  ['para', ['ul', 'ol', 'paragraph']],
	  ['table', ['table']],
	  ['insert', ['link', 'picture', 'video']],
	  ['view', ['fullscreen', 'codeview', 'help']]
	]
  });
</script>

	
	
	
	
	
	

@endsection