@extends('templates.structure') 
@section('custom_css')
<!-- Select2 -->
<link rel="stylesheet" href="{{asset('AdminLTE-3.0.0-alpha.2/plugins/select2/select2.min.css')}}">
<!-- bootstrap datepicker -->
{{-- <link rel="stylesheet" href="{{asset('AdminLTE-3.0.0-alpha.2/plugins/datepicker/datepicker3.css')}}"> --}}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/css/tempusdominus-bootstrap-4.min.css" />
<style>
    .ck-content { min-height:300px; max-height:auto; }

</style>
@endsection
@section('content')

<div class="row">
    <div class="col-md-12">
        <!-- general form elements disabled -->
        <div class="card">
            <!-- /.card-header -->
            <form role="form" id="form">
                <div class="card-body">
                    <!-- text input -->
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Category</label>
                                <select name="category" class="form-control">                                    
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Event Name</label>
                                <input type="text" name="event_name" class="form-control">
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <textarea name="message_val" style="display:none"></textarea>
                                <label>Description</label>
                                <textarea id="editor1" name="description" style="width: 100%;" class="form-controller"></textarea>                            
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Poster</label>
                                <div style="display:none">
                                    <br>
                                    <img id="falseinput" class="img-responsive" src="#" alt="your image" style="max-height:300px;max-width:300px;width: expression(this.width > 500 ? 500: true);"/>
                                    <br>
                                    <br>
                                </div>
                                <div class="input-group mb-3">
                                    <div class="custom-file">
                                        <input type="file" name="poster" id="fileinput" type="file" accept="image/gif, image/jpeg, image/png" onchange="readURL(this);" class="custom-file-input">
                                        <label class="custom-file-label" for="inputGroupFile02" aria-describedby="inputGroupFileAddon02">Choose file</label>
                                    </div>
                                </div>
                                <small id="passwordHelpBlock" class="form-text text-muted">file max size 5MB</small>
                            </div>
                            <textarea id="base" style="display:none"></textarea>                    
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Event Date & Time</label>                                                
                                <div class="input-group date" id="datetimepicker1" data-target-input="nearest">
                                    <input type="text"  name="event_date_time" class="form-control datetimepicker-input" data-target="#datetimepicker1" data-toggle="datetimepicker"/>                            
                                </div>
                            </div>
                        </div>  
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Start Time</label>                                                
                                <div class="input-group date" id="datetimepicker2" data-target-input="nearest">
                                    <input type="text" name="start_time" class="form-control datetimepicker-input" data-target="#datetimepicker2" data-toggle="datetimepicker"/>                            
                                </div>
                            </div>
                        </div>  
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>End Time</label>                                                
                                <div class="input-group date" id="datetimepicker3" data-target-input="nearest">
                                    <input type="text" name="end_time" class="form-control datetimepicker-input" data-target="#datetimepicker3" data-toggle="datetimepicker"/>                            
                                </div>
                            </div>
                        </div>  
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Address</label>
                                <textarea name="address" class="form-control" rows="3"></textarea>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>City</label>
                                <input type="text" name="city" class="form-control">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Location Lat.</label>
                                <input type="text" name="location_lat" class="form-control">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Location Long.</label>
                                <input type="text" name="location_long" class="form-control">
                            </div>
                        </div>

                    </div>                
                                      
                </div>
                <!-- /.card-body -->
                <div class="card-footer">
                    <button type="submit" class="btn btn-info float-right">Save</button>
                    {{-- <button class="btn btn-default float-right">Cancel</button> --}}
                </div>
            </form>
        </div>
        <!-- /.card -->
    </div>
</div>
<!-- /.row -->
@endsection

@section('custom_js')
<!-- Select2 -->
<script src="{{asset('AdminLTE-3.0.0-alpha.2/plugins/select2/select2.full.min.js')}}"></script>
<script src="{{asset('AdminLTE-3.0.0-alpha.2/plugins/ckeditor/ckeditor.js')}}"></script>
<!-- bootstrap time picker -->
{{-- <script src="{{asset('AdminLTE-3.0.0-alpha.2/plugins/datepicker/bootstrap-datepicker.js')}}"></script> --}}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/js/tempusdominus-bootstrap-4.min.js"></script>
{{-- <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script> --}}
<script>
    // $(function () {

        $('#datetimepicker1').datetimepicker({
            Default: false,
            format: 'YYYY-MM-DD H:mm:ss'
        });
        $('#datetimepicker2').datetimepicker({
            Default: false,
            format: 'H:mm:ss'
        });
        $('#datetimepicker3').datetimepicker({
            Default: false,
            format: 'H:mm:ss'
        });

        $('[name="category"]').select2({
            placeholder: '',
            width: '100%',
            allowClear: true,
            ajax: {            
                url: '{{route("event-categories.datatable")}}',
                dataType: 'json',
                data: function(params) {                
                    return {                    
                        start: params.page == NaN ? 0 : (params.page-1) * 25,
                        length: 25,
                        columns: {
                            0:{
                            name: 'op.category_name',
                            orderable: true,
                            searchable: true
                            }
                        },
                        search: {value: params.term},
                        order: {0:{dir:'asc'}}
                    }
                },
                processResults: function (data, params) {
                    params.page = params.page || 1;                
                    var newData = []
                    $.each(data.data, function(key, val){
                        newData[key] = {'id' : val.id, 'text' : val.category_name};                    
                    })

                    data.results = newData;
                
                    return {
                        results: data.results,
                        pagination: {
                            more: (params.page * 25) < data.recordsFiltered
                        }
                    }

                },
                cache: true
            }
        });

        // Replace the <textarea id="editor1"> with a CKEditor
            // instance, using default configuration.
            var myEditor;
            ClassicEditor
              .create(document.querySelector('#editor1'))
              .then(function (editor) {
                // The editor instance
                myEditor = editor;
              })
              .catch(function (error) {
                console.error(error)
              })

        function readURL(input) {
			if (input.files && input.files[0]) {
				var reader = new FileReader();
				reader.onload = function (e) {
                    if(e.target.result != undefined){
                        $('#falseinput').closest('div').css('display', 'block')
                    }
					$('#falseinput').attr('src', e.target.result);
					$('#base').val(e.target.result);
				};
				reader.readAsDataURL(input.files[0]);
			}
		}



        $( "#form" ).submit(function( e ) {
            e.preventDefault()

            var bodyFormData = new FormData();
            bodyFormData.append('eventName', $('[name="event_name"]').val())
            bodyFormData.append('category', $('[name="category"]').val())
            bodyFormData.append('description', myEditor.getData() != "<p>&nbsp;</p>" ? myEditor.getData() : '')
            bodyFormData.append('poster', $('#base').val())
            // bodyFormData.append('type', $('[name="type"]:checked').val() != undefined ? $('[name="type"]:checked').val() : "")
            bodyFormData.append('address', $('[name="address"]').val())
            bodyFormData.append('city', $('[name="city"]').val())
            bodyFormData.append('event_date_time', $('[name="event_date_time"]').val())
            bodyFormData.append('start_time', $('[name="start_time"]').val())
            bodyFormData.append('end_time', $('[name="end_time"]').val())
            bodyFormData.append('location_lat', $('[name="location_lat"]').val())
            bodyFormData.append('location_long', $('[name="location_long"]').val())
            // console.log(imagefile.files[0])

            // console.log(config)
            axios.post('{{route("event.store")}}', bodyFormData, config) .then(function (response) {
                        console.log(response);
                        window.location = response.data.additional.redirect;

                    })
                    .catch(function (error) { console.log(error);
                        $('.newerror').remove()
                        var msgs = error.response.data.data.message
                        $.each(msgs, function (index, value) {
                                $('[name="'+index+'"]').closest( ".form-group" ).after('<label id="'+index+'-error" class="newerror" for="'+index+'">'+value[0]+'</label>')
                                // console.log(value[0])
                            });

                    });
        })
    // })
</script>
@endsection