@extends('userPanel.layout.master')

@section('title','Blog-create')

@section('stylesheet')

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<style>

.ck-editor__editable_inline{

    height: 300px;
}

</style>
@endsection


@section('content')


 <!-- if blog create successfully then show success alert -->
@if(Session::get('success'))     
       <script>   
        Swal.fire({
                icon: 'success',
                title: 'Done',
                text: 'task has been done',
            })

   </script>  
      @endif

<!-- Page Heading -->
<h1 class="h3 mb-4 text-gray-800">Create Blog</h1>

<!-- Basic Card Example -->
<div class="card shadow mb-4">
    <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
        <h6 class="m-0 font-weight-bold text-primary">Create Blog</h6>
      <!-- <a href="{{url('/blog')}}">  <button class="btn btn-sm float-right btn-dark" >Return back</button></a> -->

    </div>
    <!-- <div class="card-body">    The styling for this basic card example is created by using default Bootstrap    </div> -->
 

    @if(count($errors) !=0)


<div class="alert alert-danger alert-dismissible fade show" role="alert">
  <strong>There are {{count($errors)}} errors !</strong> Please correct the error to proceed form
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

@endif

      <!-- DataTales Example -->
  <div class="card shadow mb-4">
                        <div class="card-header py-3">
                            <!-- <h6 class="m-0 font-weight-bold text-primary">DataTables Example</h6> -->
                        </div>
                        <div class="card-body">

                        <form action="{{url('user/blogCreate')}}" method="POST" enctype="multipart/form-data">
                        @csrf
    <div class="row">
      <div class="col">
          <label>Blog Title</label>
        <input type="text" class="form-control " id="title" placeholder="Enter title" name="title" value="{{old('title')}}">
        @error('title')
    <small class="text-danger">{{ $message }}</small>
    @enderror
      </div>
      <div class="col">
      <label> URL</label>
        <input type="text" class="form-control" placeholder="Enter url" name="url" value="{{old('url')}}">
        @error('url')
    <small class="text-danger">{{ $message }}</small>
    @enderror
      </div>
    </div>
        <br>

    <div class="row">
      <div class="col">
      <label> Select Category</label>
        <select name="category" id="category" class="form-control">
    <option value="">Select category</option>

    @foreach($catetorylist as $catelist)

    <option  {{old('category')== $catelist->id ? 'selected' : '' }} value="{{$catelist->id}}" required>{{$catelist->name}}</option>

    @endforeach
   
        </select>
        @error('category')
        <small class="text-danger">{{ $message }}</small>
         @enderror       
      
      </div>



      <div class="col">
      <label> Select Tag</label>
        <select name="tag[]" class="form-control tag" multiple="multiple">    
    @foreach($tagslist as $Tlist)

    <option  @if(old('tag')) {{ in_array($Tlist->id, old('tag'))? 'selected' : '' }}   @endif     value="{{$Tlist->id}}" > {{$Tlist->name}}</option>

    @endforeach

        </select>
        @error('tag')
        <small class="text-danger">{{ $message }}</small>
         @enderror
      </div>
    
    </div>
        <br>
    


        <div class="row">
      <div class="col">
          <label>Image upload</label>
        <input type="file" class="form-control-file" id="image"  name="image" >
        @error('image')
        <small class="text-danger">{{ $message }}</small>
         @enderror
      </div>
      <div class="col">
      <label> Image Alt Text</label>
        <input type="text" class="form-control" placeholder="Enter Image Alt Text" name="alt" value="{{old('alt')}}" >
        @error('alt')
        <small class="text-danger">{{ $message }}</small>
         @enderror
      </div>
    </div>
        <br>


    <div class="row">
      <div class="col">
          <label>Meta</label>
        <input type="text" class="form-control" id="meta"  name="meta" placeholder="Ex: this is my first blog" value="{{old('meta')}}">
        @error('meta')
        <small class="text-danger">{{ $message }}</small>
         @enderror
      </div>     
    </div>
        <br>

    <div class="row">
      <div class="col">
          <label>Short discription </label>
        <textarea name="short_description" class="form-control" rows="5" > {{old('short_description')}}</textarea>
        @error('short_description')
        <small class="text-danger">{{ $message }}</small>
         @enderror
      </div>     
    </div>
        <br>

    <div class="row">
      <div class="col">
          <label>Discription </label>
        <textarea name="description" class="form-control" id="editor" >{{old('description')}}</textarea>
        @error('description')
        <small class="text-danger">{{ $message }}</small>
         @enderror
      
      </div>     
    </div>
        <br>

    <!-- <div class="row">
      <div class="col">
          <label>Publish </label>
        <input type="checkbox" name="active" class="form-control-input" checked >
      </div>     
    </div> -->
        <br>

<button type="submit" name="submit"  class="btn btn-md btn-success">Click To Create Blog </button>

   
  </form>

                        
                          
                        </div>
                    </div>

`



    
</div>

@endsection



@section('script')

<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/29.2.0/classic/ckeditor.js"></script>

<script type="text/javascript">

$(".tag").select2({
    placeholder: "Select a state",
    allowClear: true
});

// ckeditor
ClassicEditor
                                .create( document.querySelector( '#editor' ) )
                                .then( editor => {
                                        console.log( editor );
                                } )
                                .catch( error => {
                                        console.error( error );
                                } );
                   

</script>

@endsection