@extends('back.layouts.pages-layout')
@section('pageTitle', isset($pageTitle) ? $pageTitle: 'Add New Event')
@section('content')
<div class="page-header d-print-none">
    <div class="container-xl">
      <div class="row g-2 align-items-center">
        <div class="col">
          <h2 class="page-title">
            Add New Event
          </h2>
        </div>
      </div>
    </div>
  </div>

  <div class="page-body">
    <div class="container-xl">
  <form action="{{route('author.events.create-event')}}" method="POST" enctype="multipart/form-data">
    @csrf
    <div class="card">
        <div class="card-body">
            <div class="row">
                <div class="col-md-9">
                    <div class="mb-3">
                        <label class="form-label">Title</label>
                        <input type="text" class="form-control" name="title" placeholder="Enter title">
                        <span class="text-danger">@error('title')
                          {{$message}}
                        @enderror</span>
                      </div>
                      <div class="mb-3">
                        <label class="form-label">Location</label>
                        <input type="text" class="form-control" name="location" placeholder="Enter location of the event">
                        <span class="text-danger">@error('location')
                          {{$message}}
                        @enderror</span>
                      </div>
                      <div class="mb-3">
                        <label class="form-label">Product Description</label>
                        <textarea class="ckeditor form-control" name="description" rows="6" placeholder="Content.." id="description"></textarea>
                        <span class="text-danger error-text description_error">@error('description')
                          {{$message}}
                        @enderror</span>
                    </div>
                </div>
                <div class="col-md-3">
                  <div class="mb-3">
                    <label class="form-label">Start Date</label>
                    <div class="input-icon mb-2">
                      <input class="form-control " name="startdate" placeholder="Select a date" id="datepicker-icon" value="2024-05-20">
                      <span class="input-icon-addon">
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z"></path><path d="M16 3v4"></path><path d="M8 3v4"></path><path d="M4 11h16"></path><path d="M11 15h1"></path><path d="M12 15v3"></path></svg>
                      </span>
                    </div>
                    
                    <span class="text-danger">@error('startdate')
                      {{$message}}
                    @enderror</span>
                  </div>
                  <div class="mb-3">
                    <label class="form-label">End Date</label>
                    <div class="input-icon mb-2">
                      <input class="form-control " name="enddate" placeholder="Select a date" id="datepicker-icon" value="2024-05-20">
                      <span class="input-icon-addon">
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z"></path><path d="M16 3v4"></path><path d="M8 3v4"></path><path d="M4 11h16"></path><path d="M11 15h1"></path><path d="M12 15v3"></path></svg>
                      </span>
                    </div>
                      <span class="text-danger">@error('enddate')
                        {{$message}}
                      @enderror</span>
                  </div>

                  <div class="mb-3">
                    <label class="form-label">Time</label>
                    <input type="text" name="starttime" class="form-control" data-mask="00:00:00" data-mask-visible="true" placeholder="00:00:00" autocomplete="off">
                    <span class="text-danger">@error('starttime')
                      {{$message}}
                    @enderror</span>
                  </div>
                      <div class="mb-3">
                        <div class="form-label">Featured Image</div>
                        <input type="file" class="form-control" name="featured_image">
                        <span class="text-danger error-text featured_image_error">@error('featured_image')
                          {{$message}}
                        @enderror</span>
                      </div>
                      <button type="submit" class="btn btn-primary">Save Event</button>
                </div>
            </div>
        </div>
    </div>
  </form>
</div>
</div>
@endsection

@push('scripts')
<script src="{{asset('/ckeditor/ckeditor/ckeditor.js')}}"></script>
<script>
  ClassicEditor
      .create( document.querySelector( '#description' ),{
            ckfinder: {
                uploadUrl: '{{route('author.posts.ckeditor.upload').'?_token='.csrf_token()}}',
            }
        })
        .catch( error => {
              
        } );
</script>
<script>
    $(function(){
        $('input[type="file"][name="featured_image"]').ijaboViewer({
            preview:'#image-previewer',
            imageShape:'rectangular',
            allowedExtensions:['jpg','jpeg','png'],
            onErrorShape:function(message,element){
                alert(message);
            },
            onInvalidType:function(message,element){
                alert(message);
            }
        });

        
    }); 
</script>
    
@endpush