@extends('admin.root')
@section('content')
<div class="content-wrapper">
    <div class="page-header">
        <div class="page-header-content header-elements-md-inline">
            <div class="page-title d-flex">
                <h4><i class="icon-arrow-left52 mr-2"></i> <span class="font-weight-semibold">{{$menu}}</span> - {{$sub_menu}}</h4>
                <a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
            </div>

            <div class="header-elements d-none py-0 mb-3 mb-md-0">
                <div class="breadcrumb justify-content-center">
                    <a href="{{ url('admin/berita') }}" class="btn btn-light legitRipple">
                        <i class="icon-arrow-left7 mr-2"></i> Kembali
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="content pt-0">

        <div class="card">
            <div class="card-header header-elements-inline">
                <h6 class="card-title">Daftar Berita</h6>
                <div class="header-elements">
                    <div class="list-icons">
                        <a class="list-icons-item" data-action="collapse"></a>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <form action="#" id="main-form" enctype="multipart/form-data">
                    @csrf
                <fieldset class="mb-3">
                    <legend class="text-uppercase font-size-sm font-weight-bold">Formulir Berita</legend>
                    <div class="form-group row">
                        <label class="col-form-label col-lg-2">Judul Berita<span class="text-danger">*</span></label>
                        <div class="col-lg-10">
                            <input class="form-control" name="title" placeholder="E.g Pendaftaran Anggota PPI Secara Online Teleh Dibuka" type="text" required="">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-form-label col-lg-2">Foto<span class="text-danger">*</span></label>
                        <div class="col-lg-10">
                            <input type="file" name="image" accept="image/x-png,image/gif,image/jpeg" class="form-control-uniform" required="" />
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-form-label col-lg-2">Attachment</label>
                        <div class="col-lg-10">
                            <input type="file" name="attachment" class="form-control-uniform" />
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-form-label col-lg-2">Excerpt<span class="text-danger">*</span></label>
                        <div class="col-lg-10">
                            <textarea class="form-control" name="excerpt" placeholder="Tuliskan potongan / headline berita disini" required=""></textarea>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-form-label col-lg-2">Publish<span class="text-danger">*</span></label>
                        <div class="col-lg-10">
                            <select name="publish" class="form-control" required="" id="publish">
                                <option value="1">Public</option>
                                <option value="0">Private</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-form-label col-lg-2">Konten Berita<span class="text-danger">*</span></label>
                        <div class="col-lg-10">
                            <div class="summernote-height">
                            </div>
                        </div>
                    </div>
                </fieldset>
                <div class="text-right">
                    <button type="submit" class="btn btn-primary legitRipple save-data">Submit <i class="icon-paperplane ml-2"></i></button>
                </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection
@section('styles')
<style>
    [data-href] {
        cursor: pointer;
    }
</style>
@endsection
@section('scripts')
<script src="{{ url('assets/global/js/plugins/editors/summernote/summernote.min.js') }}"></script>
<script src="{{ url('assets/global/js/plugins/forms/styling/uniform.min.js') }}"></script>
<script src="{{ url('assets/global/js/plugins/notifications/pnotify.min.js') }}"></script>
<script src="{{ url('assets/global/js/validate.min.js') }}"></script>
<script src="{{ url('assets/global/js/blockui.min.js') }}"></script>
<script>
    var image = null;
    var attachment = null;

    $(".save-data").on("click", function() {
        submitData();
    });

    $("input[name=image]").on("change", function() {
        getBase64(this, 'image')
    });

    $("input[name=attachment]").on("change", function() {
        getBase64(this, 'attachment')
    });

    $('.summernote').summernote();
    $('.summernote-height').summernote({
        height: 300
    });

    jQuery.validator.addMethod("cekfile", function(value, element) {
        if (!value) return true;
        if (typeof element.files[0] !== 'undefined' && (this.optional(element) || (element.files[0].size <=
                2097152))) return true;
        return false;
    }, "Max Image File 2MB");

    $("#main-form").validate({
        errorClass: 'validation-invalid-label',
        successClass: 'validation-valid-label',
        highlight: function(element, errorClass) {
            $(element).removeClass(errorClass);
            $('#panel-message').html('');
        },
        unhighlight: function(element, errorClass) {
            $(element).removeClass(errorClass);
            $('#panel-message').html('');
        },
        errorPlacement: function(error, element) {
            if (element.parents('div').hasClass('uniform-uploader')) {
                error.appendTo(element.parent().parent());
            } else
                error.insertAfter(element);
        },
        validClass: "validation-valid-label",
        success: function(label) {
            label.remove();
        },
        rules: {
            image: {
                cekfile: true
            },
            attachment: {
                cekfile: true
            }
        },
        messages: {},
        submitHandler: function(form) {}
    });

    function getBase64(file, target) {
        var reader = new FileReader();
        reader.readAsDataURL(file.files[0]);
        reader.onload = function() {
            if (target == 'image') {
                image = reader.result.replace(/^[^,]*,/, '');
            } else if (target == 'attachment') {
                attachment = reader.result.replace(/^[^,]*,/, '');
            }
        };
        reader.onerror = function(error) {};
    }

    function submitData() {
        var fd = $("#main-form").serializeArray();
        var aHTML = $('.summernote-height').summernote('code');

        fd.push({
            name: 'description',
            value: aHTML
        }, {
            name: 'images',
            value: image
        }, {
            name: 'attachments',
            value: attachment
        });
        var apiurl = "{{url('/')}}/admin/tambah-berita";
        if ($("#main-form").valid()) {
            $.ajax({
                url: apiurl,
                type: "post",
                data: fd,
                beforeSend: function() {
                    $('.content').block({
                        message: '<i class="icon-spinner4 spinner"></i>',
                        overlayCSS: {
                            backgroundColor: '#fff',
                            opacity: 0.8,
                            cursor: 'wait'
                        },
                        css: {
                            border: 0,
                            padding: 0,
                            backgroundColor: 'none'
                        }
                    });
                },
                success: function(json) {
                    $('.content').unblock();
                    if (json.response.Status == 1) {
                        new PNotify({
                            title: 'failed!',
                            text: json.response.Message,
                            addclass: 'bg-danger'
                        });
                    } else {
                        new PNotify({
                            title: 'success!',
                            text: json.response.Message,
                            addclass: 'bg-primary'
                        });
                        window.location.href = "{{url('/')}}/admin/berita";
                    }
                },
                error: function(xhr) {
                    new PNotify({
                        title: 'Failed!',
                        text: xhr,
                        addclass: 'bg-danger'
                    });
                    $('.content').unblock();
                },
            });
        } else {
            new PNotify({
                title: 'Validasi Error!',
                text: 'Isian data masih ada yang kurang, silahkan perbaiki.',
                addclass: 'bg-danger'
            });
        }
    }
</script>
@endsection