@include('admin.includes.header')
@include('admin.includes.sidebar')
<div class="main-content" id="panel">
@include('admin.includes.nav')

  <div class="header bg-primary pb-0">
    <div class="container-fluid">
      <div class="header-body">
        <div class="row align-items-center py-2">
          <div class="col-lg-6 col-7">
            <h6 class="h4 text-white d-inline-block mb-0">Blog</h6>
            <nav aria-label="breadcrumb" class="d-none d-md-inline-block ml-md-4">
              <ol class="breadcrumb breadcrumb-links breadcrumb-dark">
                <li class="breadcrumb-item"><a href="#"><i class="fas fa-home"></i></a></li>
                <li class="breadcrumb-item"><a href="#">Blog</a></li>
                <li class="breadcrumb-item active" aria-current="page">Add Blog</li>
              </ol>
            </nav>
          </div>
          <div class="col-lg-6 col-5 text-right">
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="flash-message">
            @foreach (['danger', 'warning', 'success', 'info'] as $msg)
              @if(Session::has('alert-' . $msg))
                  <p class="alert alert-{{ $msg }}" style="color:#ffff;">{{ Session::get('alert-' . $msg) }} <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a></p>
                  {{ session()->forget('alert-' . $msg) }}
                @endif
              @endforeach
        </div> <!-- end .flash-message -->
    <div class="card ">
      <div class="card-body p-4">
        <form action="{{ url('admin/Blog/add_blog')}}" method="post" class="text-center" enctype="multipart/form-data">
          {{ csrf_field() }}
          <input type="hidden" name="_token" value="{{ csrf_token() }}">
        <div class="row text-center">
          <div class="col-md-6">
            <div class="row">
                <div class="col-md-12">
                  <div class="form-group">
                    <input type="text" class="form-control form-control-sm speicalcharacter" id="title" name="title" placeholder="Title" autocomplete="off" oninput="Slug(this.value)" required>
                    <small class="text-muted">Title </small>
                  </div>
                </div>
                <div class="col-md-12">
                  <div class="form-group">
                    <input type="text" class="form-control form-control-sm specialcharacter"  id="slug" name="slug" placeholder="Slug" autocomplete="off" required onChange="Slug2(this.value)">
                    <small class="text-muted">Slug </small>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <input type="date" class="form-control form-control-sm date" id="p_date" name="p_date" placeholder="dd/mm/yyyy" value="2026-11-03">
                    <small class="text-muted">Publish Date </small>
                  </div>
                </div>
                <div class="col-md-6">
                  <!-- <div class="form-group">
                    <select class="form-control form-control-sm" name="type" id="type">
                      <option value="Blog" selected>Blog</option>
                      <option value="Study">Study Material</option>
                    </select>
                    <small class="text-muted">Display On</small>
                  </div> -->
                </div>
            </div><!--Row-->
        </div><!--COL-->
        <div class="col-md-4">
          <div class="form-group ">
            <textarea type="text" class="form-control form-control-sm" id="seo" name="seo" rows="8"></textarea>
            <small class="text-muted">Image SEO</small>
          </div>
        </div> <!-- COl -->

          <div class="col-md-2 text-center">
            <div class="row p-0 m-0 border">
                <img id="preview" style="height:180px;width:100%">
            </div>
            <div class="row pl-3 pr-3 text-center mt-2">
              <label for="image" class="custom-file-upload">Browse Image</label>
              <input type="file"  id="image" name="image" accept="image/*;capture=camera" capture="camera" onchange="document.getElementById('preview').src = window.URL.createObjectURL(this.files[0])">
                <small class="text-success text-center" id="image-name"></small>
            </div>
          </div>
        </div><!--ROW-->

        <div class="row text-center">
            <div class="col">
              <div class="form-group">
                <textarea class="form-control form-control-sm content" id="content" name="content"></textarea>
                <small class="text-muted">Content</small>
              </div>
            </div>
          </div> <!-- ROW -->
        <button type="submit" class="btn btn-primary btn-sm">Add</button>
      </form>
      </div>
    </div>

  </div> <!-- CONTAINER-FLUID => DONT DELETE-->
</div><!-- MAIN CONTENT => DONT DELETE-->

<script>
$("#image").change(function(){
  $("#image-name").text(this.files[0].name);
});
function Slug(data)
  {
    var str=data;
    var b=document.getElementById('slug').value;
    str=str.replace(/\s+/g, '-').toLowerCase();
    str=str.replace(/\W+(?!$=*&#+^)/g, '-').toLowerCase();
    str=str.replace(/\W$/, '').toLowerCase();
    document.getElementById('slug').value=str;
  }
function Slug2(data)
{
  var str=data;
  var b=document.getElementById('slug').value;
  str=str.replace(/\s+/g, '-').toLowerCase();
  str=str.replace(/\W+(?!$=*&#+^)/g, '-').toLowerCase();
  str=str.replace(/\W$/, '').toLowerCase();
  document.getElementById('slug').value=str;
}
CKEDITOR.replace('content');
</script>
@include('admin.includes.footer')