@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')}}">
<style>
    .ck-content { min-height:500px; max-height:auto; }

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

<div class="row">
    <div class="col-md-12">
        <!-- general form elements disabled -->
        <div class="card">
            <div class="card-header">
                {{-- <h3 class="card-title">Form Event & Broadcasting</h3> --}}
            </div>
            <!-- /.card-header -->
            <form role="form" id="form">
                <div class="card-body">
                    <!-- text input -->
                    <div class="form-group">
                        <label>Event Type</label>
                        <div class="input-group">
                            <div class="radio">
                                <span>
                                <input type="radio" name="type" id="optionsRadios1" value="broadcast" >
                                    Broadcast
                                </span>
                            </div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <div class="radio">
                                <span>
                                <input type="radio" name="type" id="optionsRadios2" value="invitation" >
                                    Invitation
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12">                                
                        <div class="form-group">
                            <label>Location</label>
                            <select name="location" class="form-control">
                                <option value=""></option>
                                @foreach ($unity_locations_list as $item)
                                <option value="{{$item->id}}">{{$item->location_name}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <!-- text input -->
                    <div class="form-group">
                        <label>Title</label>
                        <input type="text" name="title" class="form-control">
                    </div>
                    <!-- text input -->
                    <div class="form-group">
                        <textarea name="message_val" style="display:none"></textarea>
                        <label>Message</label>
                        <textarea id="editor1" name="message" style="width: 100%;" class="form-controller"></textarea>
                        {{-- <input type="text" name="message" class="form-control"> --}}
                    </div>
                    <!-- text input -->
                    <div class="form-group">
                        <label>Media</label>
                        <div style="display:none">
                            <br>
                            <img id="falseinput" class="img-responsive" src="#" alt="your image" style="max-height:500px;max-width:500px;width: expression(this.width > 500 ? 500: true);"/>
                            <br>
                            <br>
                        </div>
                        <div class="input-group mb-3">
                                <div class="custom-file">
                                    <input type="file" name="media" 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>
                    </div>
                    <textarea id="base" style="display:none"></textarea>
                    <!-- text input -->

                    {{-- <div class="form-group">
                        <label>Status</label>
                        <input type="text" name="status" class="form-control">
                    </div> --}}
                    <!-- text input -->
                    <div class="form-group">
                        <label>Expiration Date</label>
                        {{-- <div class="input-group date">
                            <div class="input-group-addon">
                                <i class="fa fa-calendar"></i>
                            </div>
                            <input type="text"  name="expiration_date" class="form-control pull-right" id="datepicker">
                        </div> --}}
                        <input type="text"  name="expiration_date" class="form-control pull-right" id="datepicker">
                        {{-- <input type="text" name="expiration_date" class="form-control"> --}}
                    </div>
                    <!-- text input -->
                </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 src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script> --}}
<script>
    // $(function () {
        //Initialize Select2 Elements    
        $('[name="location"]').select2();
        // $('[name="user_group"]').select2()
        var dateObject;
        $('#datepicker').datepicker({
            autoclose: true,
            format: "yyyy-mm-dd",
            // "setDate": new Date(),
            onSelect: function(selectedDate) { }
        })

        // 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('title', $('[name="title"]').val())
            bodyFormData.append('location', $('[name="location"]').val())
            bodyFormData.append('message', myEditor.getData() != "<p>&nbsp;</p>" ? myEditor.getData() : '')
            bodyFormData.append('media', $('#base').val())
            bodyFormData.append('type', $('[name="type"]:checked').val() != undefined ? $('[name="type"]:checked').val() : "")
            bodyFormData.append('expiration_date', $('[name="expiration_date"]').val())
            // console.log(imagefile.files[0])

            // console.log(config)
            axios.post('{{route("event-broadcast-management.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