@extends('admin.layouts.main')
@section('content')
    <div class="col-md-12 col-sm-12 col-xs-12">
        <h2>
            Create Event
        </h2>
    </div>
    <div class="col-md-12 col-sm-12 col-xs-12 gmn-updates">
        <div class="col-md-12 col-sm-12 admin-panel">
            <form class="event_form"  enctype="multipart/form-data ">
                <input type="hidden" name="event_id" value="" class="event_id">
                <input type="hidden" name="form_type" value="create" class="form_type" id="form_type">
                <div class="col-md-12 col-sm-12 admin-sub-section">
                    <div class="col-md-12 col-sm-12 sub-section-title-band">
                        <h4 class="block_title">Category</h4>
                    </div>
                    <div class="col-md-6 col-sm-6 sub-section-content">
                        <div class="row">
                            <div class="col-md-8">
                                <select  class="form-control category" name="category" >
                                    <option value="">Select</option>
                                    @foreach ($category as $key => $value)
                                        <option value="{{$value->name}}" data-parent="{{$value->id}}">{{$value->name}}</option>
                                    @endforeach
                                </select>
                                <span class="text-danger category_e "></span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-sm-6 sub-section-content">
                        <div class="row">
                            <div class="col-md-8">
                                <select  class="form-control" name="sub_category" id="sub_category">
                                    <option value="">Select sub-category</option>
                                </select>
                                <span class="text-danger sub_category_e "></span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-12 col-sm-12 admin-sub-section">
                    <div class="col-md-12 col-sm-12 sub-section-title-band">
                        <h4 class="block_title">Header</h4>
                    </div>
                    <div class="col-md-12 col-sm-12 sub-section-content">
                        <div class="form-group">
                            <label for="email">Headline
                                <span class="mandatory">*</span>
                            </label>
                            <input type="text" name="heading" class="form-control input-sm" id="headline" />
                            <span class="text-danger heading_e "></span>
                        </div>
                        <div class="form-group hidden">
                            <label for="" class="">URL
                                <span class="mandatory">*</span>
                            </label>

                            <div class="input-group col-md-12">
                                <div class="input-group-prepend">
                                    <div class="input-group-text" id="basic-addon3">
                                        https://ssugsg.com/events/
                                    </div>
                                </div>
                                <input type="text" name="url" class="form-control input-sm" id="headline" aria-describedby="basic-addon3" />
                            </div>

                            <has-error :form="EventForm" field="url"></has-error>
                        </div>
                        <div class="form-group">
                            <label for="pwd">Subhead </label>
                            <input type="text" name="sub_heading" class="form-control input-sm" id="Subhead" />
                            <!-- <has-error :form="EventForm" field="sub_heading"></has-error> -->
                        </div>

                        <div class="row" style="padding-top:10px;">
                            <div class="col-xs-12 col-sm-3 col-md-3 pad-l-0 pad-r-0">
                                <div class="form-group">
                                    <label for="pwd">Event start date and time
                                        <span class="mandatory">*</span>
                                    </label>
                                    <input type="text" name="start_date"  id="start_date" class="form-control input-sm" placeholder="" > 
                                   
                                    <span class="text-danger start_date_e "></span>
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-3 col-md-3 pad-r-0">
                                <div class="form-group">
                                    <label for="pwd">Event end date and time
                                        {{-- <span class="mandatory">*</span> --}}
                                    </label>
                                   <input type="text" name="end_date"  id= "end_date" class="form-control input-sm" placeholder="" >
                                   <span class="text-danger end_date_e "></span>
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-3 col-md-3 pad-r-0">
                                <div class="form-group">
                                    <label for="pwd">Event registration last
                                        date
                                        {{-- <span class="mandatory">*</span> --}}
                                    </label>
                                   <input type="text" name="reg_end_date"  id="reg_end_date" class="form-control input-sm" placeholder="" > 
                                    <span class="text-danger reg_end_date_e "></span>
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-3 col-md-3 pad-r-0">
                                <div class="form-group">
                                    <label for="pwd">Event Type
                                    </label>
                                <span class="mandatory">*</span>
                                    <select  class="form-control" name="location">
                                        <option value="">Select</option>
                                        <option value="Conference">Conference</option>
                                        <option value="Webinar">Webinar</option>
                                        <option value="Round table">Round table</option>
                                        <option value="On-demand">On-demand</option>
                                        <option value="Virtual Event">Virtual Event</option>
                                        <option value="Virtual Launch">Virtual Launch</option>
                                        {{-- <option value="SIG Meeting">SIG meeting</option>
                                        <option value="Others">Others</option> --}}
                                    </select>
                                    <span class="text-danger location_e "></span>
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-12 col-md-12 pad-l-r-0">
                            <div class="form-group">
                                <label for="pwd">Event address
                                </label>
                                <!-- <span class="mandatory" v-if="Mand">*</span> -->
                                    <textarea
                                        class="form-control"
                                        name="address"
                                        id="address"
                                        cols="30"
                                        rows="5"
                                    ></textarea>
                                    <span class="text-danger address_e "></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 col-sm-12 admin-sub-section">
                    <div class="col-md-12 col-sm-12 sub-section-title-band">
                        <h4 class="block_title">Content</h4>
                    </div>
                    <div class="col-md-12 col-sm-12 sub-section-content pad-l-r-0">
                        <div class="row">
                            <div class="col-xs-12 col-sm-12 col-md-12 ">
                                <div class="form-group">
                                    <label for="pwd">Description
                                        <span class="mandatory">*</span>
                                    </label>
                                    <textarea
                                        class="form-control"
                                        name="descriptions"
                                        id="textarea"
                                        cols="30"
                                        rows="5"
                                    ></textarea>
                                    <input type="hidden" name="description" id="descriptionss">
                                    <span class="text-danger description_e "></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 col-sm-12 admin-sub-section">
                    <div class="row" style="padding-top:10px;">
                        <div class="col-md-12 col-sm-12 sub-section-title-band">
                            <h4 class="block_title">Images</h4>
                        </div>
                        <div class="col-xs-12 col-sm-6 col-md-6">
                            <div class="form-group">
                                <label for="pwd">Thumb Image
                                    <span class="mandatory">*</span> <span class="img-size">(600 width x 454 height)</span>
                                </label>
                                <input type="file" name=""  id="display_image" class="form-control input-sm" placeholder="" > 
                                <input type="test" class="form-control input-sm hidden" name="display_image" id="display_image_val" />
                                <input type="hidden" class="form-control input-sm " name="display_image_old" id="" />

                                <span class="text-danger display_image_e "></span>
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-6 col-md-6 pad-r-0">
                            <div class="form-group">
                                <label for="pwd">Banner Image
                                    <span class="mandatory">*</span> <span class="img-size">(1140 width x 300 height)</span>
                                </label>
                            <input type="file" name=""  id= "banner_image" class="form-control input-sm" placeholder="" >
                            <input type="test" class="form-control input-sm hidden" name="banner_image" id="banner_image_val" />
                            <input type="hidden" class="form-control input-sm " name="banner_image_old" id="banner_image_old" />

                            <span class="text-danger banner_image_e "></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 col-sm-12 admin-sub-section">
                    <div class="row" style="padding-top:10px;">
                        <div class="col-md-12 col-sm-12 sub-section-title-band">
                            <h4 class="block_title">Media Title</h4>
                        </div>
                        <div class="col-xs-12 col-sm-6 col-md-6">
                            <div class="form-group">
                                <label for="Thumb Image title tag">Thumb Image Title
                                </label>
                                <input type="text" class="form-control input-sm " name="display_image_title" id="display_image_title"  />
                                <span class="text-danger display_image_title_e "></span>
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-6 col-md-6 pad-r-0">
                            <div class="form-group">
                                <label for="Banner Image title tag">Banner Image Title
                                </label>
                            <input type="text" class="form-control input-sm " name="banner_image_title" id="banner_image_title" />
                            <span class="text-danger banner_image_title_e "></span>
                            </div>
                        </div>
                    </div>
                </div> 
                  
                <div class="col-md-12 col-sm-12 admin-sub-section">
                    <div class="col-md-12 col-sm-12 sub-section-title-band">
                        <h4 class="block_title">Watch Video</h4>
                        <a href="javascript://" class="video_form_reset pull-right">Reset</a>
                    </div>
                    <div class="col-md-12 col-sm-12 sub-section-content pad-l-r-0 video_section">
                        <div class="row">
                            <div class="col-xs-12 col-sm-12 col-md-12">
                                <div class="form-group">
                                    <label for="pwd">Video display image
                                        <!-- <span class="mandatory">*</span> -->
                                        :
                                    </label>
                                    
                                    <input type="file" class="form-control input-sm" name="" id="video_display_image" />
                                    <input type="test" class="form-control input-sm hidden" name="video_display_image" id="video_display_image_val" />
                                    <input type="hidden" class="form-control input-sm " name="video_display_image_old" id="" />
                                    <span class="text-danger video_display_image_e "></span>
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-12 col-md-12">
                                <div class="form-group">
                                    <label for="banner_image">Video link
                                        <!-- <span class="mandatory">*</span> -->
                                    </label>
                                    <input type="text" class="form-control input-sm" name="video_link" />
                                    <span class="text-danger video_link_e "></span>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-12 col-sm-12 col-md-12">
                                <div class="form-group">
                                    <label for="banner_image">Video CTA text
                                        <!-- <span class="mandatory">*</span> -->
                                    </label>
                                    <input type="text" class="form-control input-sm" name="video_cta_text" />
                                            <span class="text-danger video_cta_text_e "></span>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-12 col-sm-12 col-md-12">
                                <div class="form-group">
                                    <label for="pwd">Video description</label>
                                    <span>(Limit: 700
                                        charecters)</span>
                                    <textarea  name="video_description" :maxlength="700" class="form-control input-sm">
                                        </textarea>
                                        <span class="text-danger video_description_e "></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {{-- <div class="col-md-12 col-sm-12 admin-sub-section">
                    <div class="col-md-12 col-sm-12 sub-section-title-band">
                        <h4 class="block_title">View Images</h4>
                    </div>
                    <div class="col-md-12 col-sm-12 sub-section-content pad-l-r-0">
                        <div class="row">
                            <div class="col-xs-12 col-sm-12 col-md-12">
                                <div class="form-group">
                                    <label for="pwd" style="padding-right:10px;">Album display image
                                        <!-- <span class="mandatory">*</span> -->
                                        :
                                    </label>
                                    <input type="file" class="form-control input-sm" name="gallery_dp_image" id="gallery_dp_image" />
                                    <input type="test" class="form-control input-sm hidden" name="gallery_dp_image" id="gallery_dp_image_val" />
                                    <input type="test" class="form-control input-sm hidden" name="gallery_dp_image_old" id="gallery_dp_image_val" />
                                    <span class="text-danger gallery_dp_image_e "></span>
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-12 col-md-12">
                                <div class="form-group">
                                    <label for="banner_image">Album link
                                        <!-- <span class="mandatory">*</span> -->
                                    </label>
                                    <input type="text" class="form-control input-sm" name="gallery_link" />
                                            <span class="text-danger gallery_link_e "></span>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-12 col-sm-12 col-md-12">
                                <div class="form-group">
                                    <label for="banner_image">Album CTA text
                                        <!-- <span class="mandatory">*</span> -->
                                    </label>
                                    <input type="text" class="form-control input-sm" name="gallery_text" />
                                            <span class="text-danger gallery_text_e "></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div> --}}
                    <div class="col-md-12 col-sm-12 admin-sub-section">
                        @include('admin.common.important_links')
                     </div>
                     <div>
                    @php
                    $social_img = "";
                    $social_title = "";
                    $social_desc = "";
                    @endphp
                    @include('admin.common.socialshare_form')
                </div>
                <div class="col-md-12 col-sm-12 admin-sub-section">
                    <div class="col-md-12 col-sm-12 sub-section-title-band">
                        <h4 class="block_title">Acknowledgement email copy</h4>
                    </div>
                      <div class="col-md-12 col-sm-12 sub-section-content pad-l-r-0">
                        <div class="row">
                            <div class="col-xs-12 col-sm-12 col-md-12 ">
                                <div class="form-group">
                                    Subject <span class="mandatory">*</span> 
                                 <input type="text" class="form-control input-sm" name="email_subject" />
                                    <span class="text-danger email_subject_e "></span>
                                </div>
                                <div class="form-group">
                                    <label for="pwd">Content
                                        <span class="mandatory">*</span>
                                    </label>
                                    <textarea
                                        class="form-control textarea"
                                        name="email_content"
                                        id="email_content"
                                        cols="30"
                                        rows="5"
                                    ></textarea>
                                    <span class="text-danger email_content_e "></span>
                                </div>
                            </div>
                        </div>
                      </div>

                </div>
                <div class="col-md-12 col-sm-12 admin-sub-section">
                    <div class="col-md-12 col-sm-12 sub-section-title-band">
                        <h4 class="block_title">Presenter</h4>
                    </div>
                    <div class="col-md-12 col-sm-12 sub-section-content pad-l-r-0">
                        <div class="row">
                            <div class="col-xs-12 col-sm-12 col-md-12 ">
                                <div class="form-group">
                                    <label for="pwd">Select Presenter</label>
                                    <select  class="form-control" name="presenter">
                                        <option value="">Select </option>
                                        @foreach($authors as $author)
                                        <option value="{{ $author->id }}">{{ $author->fname .' '. $author->lname}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    @php
                        $tags = '';
                        $tags_list = [];
                    @endphp
                    @include('admin.common.tags_form')
                </div>
                <div>
                    @php
                        $content_by='';
                    @endphp
                    @include('admin.common.content_by')   
                </div>
            </form>
                <div class="col-xs-12 col-sm-12 col-md-12 pad-l-r-0">
                    <div class="form-group ">
                        <a href="javascript://" data-url="/admin/event/create" data-form-name="event_form" type="submit" class="btn btn-default gmf-btn-primary btn-admin-create">
                            Create
                        </a>
                        <button type="reset" class="btn btn-warning gmf-btn-primary white  btn-admin-cancel">
                            Cancel
                        </button>
                    </div>
                </div>
@endsection
@push('script')
<script>
    var descValue,
        org_cat = "Events",
    gettags_val=[];
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" ></script>
<!-- <script src="//cdn.ckeditor.com/4.16.2/standard/ckeditor.js"></script> -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="{{asset('asset/js/admin/common/assets.js')}}"></script>
<script type="text/javascript" src="{{asset('asset/js/admin/common/convert_image.js')}}"></script>
<script type="text/javascript" src="{{asset('asset/js/admin/common/cta.js')}}"></script>
<script type="text/javascript" src="{{asset('asset/js/admin/common/create_content.js')}}"></script>
<script type="text/javascript" src="{{asset('asset/js/admin/common/category_drop_down.js')}}"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/29.2.0/classic/ckeditor.js"></script>

<script>
     $('.video_form_reset').click(function(){
        $('.video_section').find("input[type=text],input[type=file], textarea").val("");
    });
    cta_html('external','click')
    ClassicEditor
        .create( document.querySelector( '#textarea' ),{
            cloudServices: {
                tokenUrl: "https://growthmattersnow.com/ck_editor.php",
                uploadUrl: 'https://41984.cke-cs.com/easyimage/upload/'
            }
        } )
        .then( editor => {
            descValue = editor;
            editor.model.document.on( 'change:data', () => {
                var desc = lenghtcut(descValue.getData(),300);
                $('.social_desc').html(desc);
                $('.social_desc_val').val(desc);
            } );
        } )
        .catch( error => {
            console.error( error );
        } );
</script>
<script>
     var offset_top= $('.event_form').offset().top;
     var class_name = "";
    // CKEDITOR.replace("textarea");
    // CKEDITOR.instances["textarea"].setData("<h1> data to render</h1>")
    $(function() {
        $('#start_date,#end_date,#reg_end_date').datetimepicker({
            // minDate: new Date(),
            format: 'DD-MM-YYYY HH:mm:ss',
            icons: { 
                previous: "fa fa-chevron-left", 
                next: "fa fa-chevron-right", 
                up: 'fa fa-angle-up',
                down: 'fa fa-angle-down',
                time: 'fa fa-clock-o',
            },
        });
    });
   $(".gmn-menu .events").addClass('active')
</script>
@endpush
@push('style')
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" />
<style>
    .addon-label {
    width: 100%;
    position: relative;
}
</style>
@endpush