@extends('layouts.admin')
@section('content')
    <section class="content-header">
        <h1>
            Tambah Blog
        </h1>
        <ol class="breadcrumb">
            <li><a href="{{ url('dashboard') }}"><i class="fa fa-home"></i> Dashboard</a></li>
            <li><a href="{{ url('') }}">List Blog</a></li>
            <li class="active">Tambah Blog </li>
        </ol>
    </section>

    <section class="content">
        <div class="row">
            <div class="col-lg-8">
                <div class="box box-warning">
                    <!-- /.box-header -->
                    <div class="box-body">
                        <div class="form-group mb-3">
                            <label>Judul<span class="require"></span></label>
                            <input type="text" class="form-control inp-fadd" id="title" name="title"
                                placeholder="Max 110 karakter">
                        </div>
                        <div class="form-group mb-3">
                            <textarea class="form-control" id="default-editor" name="fill_content"> </textarea>
                        </div>
                        <div class="form-group mb-4">
                            <label>Deskripsi<span class="require"></span></label>
                            <textarea class="form-control inp-fadd" id="meta_description" name="meta_description" maxlength="250"
                                placeholder="Max 250 Karakter" rows="3"></textarea>
                        </div>

                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="box box-success">
                    <div class="box-body">
                        <div class="form-group mb-3">
                            <label>Kategori<span class="require"></span></label>
                            <select class="form-control select2 inp-fadd" style="width: 100%;" id="category_id"
                                name="category_id">
                                <option value="">- Pilih -</option>
                            </select>
                        </div>
                        <div class="form-group mb-3">
                            <label>Kata Kunci</label>
                            <input type="text" class="form-control inp-fadd" placeholder="Kata Kunci" id="meta_keyword"
                                name="meta_keyword">
                        </div>

                        <div class="form-group mb-3">
                            <label>Tanggal Publish</label>
                            <div class="input-group">
                                <input type="text" class="form-control datemask" id="date_post" name="date_post"
                                    placeholder="Tanggal" aria-label="StartDate">
                                <span class="input-group-addon">-</span>
                                <input type="text" class="form-control time-mask" id="time_post" name="time_post"
                                    placeholder="Jam" aria-label="EndDate">
                            </div>
                        </div>

                        <div class="form-group mb-3">
                            <label for="tags">Gambar<span class="require"></span></label>
                            <input type="hidden" class="inp-fadd" id="img_andalan" name="img_andalan">
                            <div>
                                <center>
                                    <a href="javascript:;" onclick="showModal('1')">
                                        <img id="main_img" style="border-radius: 5px" width="100%"
                                            src="{{ asset('assets/admin/images/no-image.png') }}" alt="" />
                                    </a>
                                </center>
                            </div>

                        </div>

                    </div>

                </div>
            </div>

            <div class="col-lg-12">
                <div class="form-group">
                    <button type="submit" class="btn btn-primary" id="btn-fadd" onclick="addPost()"><i class="fa fa-save"></i> Simpan & Publish</button>
                </div>
            </div>

        </div>
    </section>

    <div class="modal fade" id="md-upload">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Gambar</h4>
                </div>
                <div class="modal-body">
                    <div class="nav-tabs-custom">
                        <!-- Tabs within a box -->
                        <ul class="nav nav-tabs pull-right">
                            <li><a href="#sales-chart" data-toggle="tab"><span class="fa fa-upload"></span> Upload Gambar</a></li>
                            <li class="active"><a href="#revenue-chart" data-toggle="tab"><span class="fa fa-picture-o"></span> Bank Gambar</a></li>
                        </ul>
                        <div class="tab-content no-padding">
                            <div class="tab-pane active" id="revenue-chart" >
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="">
                                            <div class="card-body">
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label>Title</label>
                                                            <input type="text" class="form-control" id="src_title_img"
                                                                placeholder="Enter Title">
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-12">
                                                        <div class="table-responsive">
                                                            <table class="table table-bordered" id="ajax-datatables_img"
                                                                style="width: 100%">
                                                                <thead>
                                                                    <tr>
                                                                        <th width="5%">No</th>
                                                                        <th width="10%">Gambar</th>
                                                                        <th>Title</th>
                                                                        <th>Deskripsi</th>
                                                                        <th width="10%">Action</th>
                                                                    </tr>
                                                                </thead>
                                                                <tbody></tbody>
                                                            </table>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane" id="sales-chart" >
                                <form id="upload-img-form">
                                    <div class="row">
                                        <div class="col-lg-6 mb-3">
                                            <div class="form-group mb-4">
                                                <label>Gambar - <span style="color: red">Max Size 1Mb</span></label>
                                                <input type="file" class="form-control" id="img_source"
                                                    name="img_source">
                                            </div>
                                            <center>
                                                <img width="100%" id="source_img" style="border-radius: 5px"
                                                    src="{{ asset('assets/admin/images/no-image.png') }}" alt="" />
                                            </center>

                                        </div>

                                        <div class="col-lg-6 mb-3">
                                            <div class="form-group mb-4">
                                                <label>Text Alt<span class="require"></span></label>
                                                <input type="text" class="form-control" placeholder="Enter text alt" id="title_img" name="title_img">
                                            </div>
                                            <div class="form-group">
                                                <label class="form-label" for="credit">Deskripsi</label>
                                                <textarea class="form-control" name="description_img" id="description_img" cols="30" rows="5"></textarea>
                                            </div><br>
                                            <div class="form-group">
                                                <button type="submit" class="btn btn-success" id="btn-upload"><i class="fa fa-save"></i> Simpan & Gunakan</button>
                                            </div>
                                        </div>
                                    </div>
                                </form>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-de-secondary btn-sm" data-dismiss="modal">Close</button>
                </div><!--end modal-footer-->
            </div>
        </div>
    </div>

    <div class="modal fade" id="md-edit_img" tabindex="-1" role="dialog" aria-labelledby="md-edit_img" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Edit Gambar</h4>
                </div>
                <div class="modal-body">
                    <form id="edit-img-form">
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <input type="hidden" id="idImage" name="idImage">
                                    <label class="form-label" for="source">Gambar (<span style="color: red">Max Size  1Mb</span>)</label>
                                    <input type="file" class="form-control" id="eimg_source" name="eimg_source"><br>
                                    <center>
                                        <img width="100%" id="esource_img" style="border-radius: 5px"
                                            src="{{ asset('assets/admin/images/no-image.png') }}" alt="" />
                                    </center>
                                </div>
                            </div>

                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="form-label" for="caption">Title<span class="require"></span></label>
                                    <input type="text" class="form-control" placeholder="Enter text alt"  id="etitle_img" name="title_img">
                                </div>
                                <div class="form-group">
                                    <label class="form-label" for="credit">Deskripsi</label>
                                    <textarea class="form-control" name="edescription_img" id="edescription_img" cols="30" rows="5"></textarea>
                                </div><br>
                                <div class="form-group">
                                    <button type="submit" class="btn btn-primary" id="btn-edit_upload"><i class="fa fa-save"></i> Simpan</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-de-secondary btn-sm" data-bs-dismiss="modal">Close</button>
                </div><!--end modal-footer-->

            </div>
        </div>
    </div>

    <div class="modal fade" id="md-delete" tabindex="-1" role="dialog" aria-labelledby="md-delete"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Hapus Gambar</h4>
                </div>
                <div class="modal-body">
                    <img src="" id="img_delete" style="min-height:199px; border-radius:5px" width="100%"
                        alt=""><br>
                    <div class="text-center">
                        <h4 class="fs-semibold">
                            <li class="fa fa-trash"  style="width:30px;height:30px"></li>
                            Yakin Ingin Menghapus Gambar Ini ?
                        </h4>
                        <p class="text-muted fs-14 mb-4 pt-1">Gambar di hapus permanen,konten yang terkait dengan gambar
                            ini otomatis tidak akan muncul gambar</p>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-de-secondary btn-sm" data-bs-dismiss="modal">Close</button>
                            <button class="btn btn-danger" id="btn-del" onclick="del()"><i class="fa fa-trash"></i> Ya, Hapus</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <input type="hidden" id="id_img_delete">
    <input type="hidden" id="tipe_upload">
    <script>
        var table;

        $(document).ready(function() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });


            select('{{ route('seletcCategory') }}', 'category_id');

            tinymce.init({
                selector: 'textarea#default-editor',
                height: 500,
                theme: 'modern',
                menubar: false,
                //  document_base_url: DIR,
                relative_urls: false,
                remove_script_host: false,
                convert_urls: true,
                branding: false,
                plugins: ["advlist lists,link,code,table"],
                toolbar: "bold italic underline | numlist bullist | table | formatselect  | link alignleft aligncenter alignright alignjustify baca_juga insert_image embed code",
                setup: function(editor) {
                    editor.addButton('insert_image', {
                            tooltip: 'insert image',
                            icon: 'image',
                            onclick: function() {
                                $('#param-modals').val('');
                                $('#md-upload').modal('show');
                            }
                        })
                }
            });


            $("#img_source").change(function() {
                const file = this.files[0];
                if (file) {
                    let reader = new FileReader();
                    reader.onload = function(event) {
                        $("#source_img").attr("src", event.target.result);
                    };
                    reader.readAsDataURL(file);
                }
            });

            $("#eimg_source").change(function() {
                const file = this.files[0];
                if (file) {
                    let reader = new FileReader();
                    reader.onload = function(event) {
                        $("#esource_img").attr("src", event.target.result);
                    };
                    reader.readAsDataURL(file);
                }
            });

            $("#upload-img-form").on("submit", (function(e) {
                e.preventDefault();

                var tipe = $('#tipe_upload').val();
                var title_img = $("#title_img").val();
                var description_img = $("#description_img").val();
                var img_source = $("#img_source").prop('files')[0];

                var form_data = new FormData();
                form_data.append('title_img', title_img);
                form_data.append('description_img', description_img);
                form_data.append('img_source', img_source);

                $.ajax({
                    url: "{{ route('createImage') }}",
                    type: "POST",
                    data: form_data,
                    daraType: "json",
                    contentType: false,
                    processData: false,
                    cache: false,
                    beforeSend: function() {
                        $("#btn-upload").attr("disabled", "disabled");
                        $("#btn-upload").html("<i class='fa fa-spinner fa-pulse'></i> Loading...");
                    },
                    success: function(data) {
                        if (data.status == "success") {
                            if (tipe == '1') {
                                var img_upload = "{{ asset('storage/uploads/blog_cover') }}/" + data.img_konten;
                                $("#main_img").attr("src", img_upload);
                                $('#img_andalan').val(data.id);
                            } else {
                                var img = "{{ asset('storage/uploads/blog_cover') }}/" + data.img_konten;
                                tinyMCE.execCommand('mceInsertContent', false, '<img src=' + img + ' width="573" height="337" alt="' + data.title_img + '"><br><span style="font-size: 8pt;">' + data.title_img + '-' + data.description + '</span>');
                            }
                            var img = "{{ asset('assets/admin/images/no-image.png') }}";
                            $("#source_img").attr("src", img);
                            $('#md-upload').modal('toggle');
                            $("#title_img").val("");
                            $('#img_source').val("");
                            $("#description_img").val("");
                            table_img.ajax.reload(null, false);
                        }
                        notif(data.message, data.status);
                    },
                    complete: function() {
                        $("#btn-upload").removeAttr("disabled");
                        $("#btn-upload").html("<i class='fa fa-save'></i> Simpan & Gunakan");
                    }
                });
            }));

            $("#edit-img-form").on("submit", (function(e) {
                e.preventDefault();

                var id = $("#idImage").val();
                var title_img = $("#etitle_img").val();
                var description_img = $("#edescription_img").val();
                var img_source = $("#eimg_source").prop('files')[0];

                var form_data = new FormData();
                form_data.append('title_img', title_img);
                form_data.append('description_img', description_img);
                form_data.append('img_source', img_source);
                form_data.append('id', id);

                $.ajax({
                    url: "{{ route('updateImage') }}",
                    type: "POST",
                    data: form_data,
                    daraType: "json",
                    contentType: false,
                    processData: false,
                    cache: false,
                    beforeSend: function() {
                        $("#btn-edit_upload").attr("disabled", "disabled");
                        $("#btn-edit_upload").html("<i class='fa fa-spinner fa-pulse'></i> Loading...");
                    },
                    success: function(data) {
                        if (data.status == 'success') {
                            $('#md-edit_img').modal('toggle');
                            table_img.ajax.reload(null, false);
                        }
                        notif(data.message, data.status);
                    },
                    complete: function() {
                        $("#btn-edit_upload").removeAttr("disabled");
                        $("#btn-edit_upload").html("<i class='fa fa-save'></i> Simpan");
                    }
                });
            }));


            $("#src_title_img").keypress(function(e) {
                if (e.which == 13) {
                    table_img.ajax.reload(null, false);
                }
            });

            var table_img = $('#ajax-datatables_img').DataTable({
                processing: true,
                serverSide: true,
                searching: false,
                responsive: true,
                ajax: {
                    url: "{{ route('getImage') }}",
                    data: function(d) {
                        d.src_title_img = $('#src_title_img').val()
                    }
                },
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',

                    },
                    {
                        data: 'img',
                        name: 'img'
                    },
                    {
                        data: 'title',
                        name: 'title'
                    },
                    {
                        data: 'description',
                        name: 'description'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    },
                ]
            });

        });

        function showModal(type) {
            $('#md-upload').modal('show');
            $('#tipe_upload').val(type);
        }

        function addPost() {
            var title = $("#title").val();
            var fill_content = tinymce.get('default-editor').getContent();
            var time_post = $("#time_post").val();
            var date_post = $("#date_post").val();
            var img_andalan = $("#img_andalan").val();
            var meta_description = $("#meta_description").val();
            var category_id = $("#category_id").val();
            var meta_keyword = $("#meta_keyword").val();

            $.ajax({
                url: "{{ route('createBlog') }}",
                type: "POST",
                data: {
                    title,
                    fill_content,
                    time_post,
                    date_post,
                    img_andalan,
                    meta_description,
                    category_id,
                    meta_keyword,
                },
                daraType: "json",
                cache: false,
                beforeSend: function() {
                    $("#btn-fadd").attr("disabled", "disabled");
                    $("#btn-fadd").html("<i class='fa fa-spinner fa-pulse'></i> Loading...");
                },
                success: function(data) {
                    if (data.status == "success") {
                        $("#title").val("");
                        $("input[name=headling]:checked").val("n");
                        $("#time_post").val("");
                        $("#date_post").val("");
                        $("#img_andalan").val("");
                        $("#meta_description").val("");
                        $("#category_id").val("");
                        $("#category_id").trigger("change");
                        $("#meta_keyword").val("");
                        var img = "{{ asset('assets/admin/images/no-image.png') }}";
                        tinymce.get('default-editor').setContent('');
                        $("#main_img").attr("src", img);
                    }

                    notif(data.message, data.status);
                },
                complete: function() {
                    $("#btn-fadd").removeAttr("disabled");
                    $("#btn-fadd").html("<i class='fa fa-save'></i> Simpan & Publish");
                }
            });

        }

        function setImg(id) {
            var tipe = $('#tipe_upload').val();
            $.ajax({
                url: "{{ route('getbyImage') }}",
                type: "GET",
                data: {
                    id
                },
                daraType: "json",
                cache: false,
                beforeSend: function() {
                    $(".inp").attr("disabled", "disabled");
                },
                success: function(data) {
                    if (tipe == '1') {
                        var img_upload = "{{ asset('storage/uploads/blog_cover') }}/" + data.cover;
                        $("#main_img").attr("src", img_upload);
                        $('#img_andalan').val(data.id);
                        $('#md-upload').modal('hide');
                        $('#tipe_upload').val("");
                    } else {
                        var img = "{{ asset('storage/uploads/blog_cover') }}/" + data.cover;
                        tinyMCE.execCommand('mceInsertContent', false, '<img src=' + img +
                            ' width="573" height="337" alt="' + data.title +
                            '"><br><span style="font-size: 8pt;">' + data.title + '-' + data.description +
                            '</span>');
                        $('#md-upload').modal('hide');
                    }
                },
                complete: function() {
                    $(".inp").removeAttr("disabled");
                }
            });
        }

        function edit_img(id) {
            $('#md-edit_img').modal('show');
            $.ajax({
                url: "{{ route('getbyImage') }}",
                type: "GET",
                data: {
                    id
                },
                daraType: "json",
                cache: false,
                beforeSend: function() {
                    $(".inp").attr("disabled", "disabled");
                    $('#md-edti_img').modal('show');
                },
                success: function(data) {
                    $("#idImage").val(data.id);
                    $("#etitle_img").val(data.title);
                    $("#edescription_img").val(data.description);
                    if (data.cover !== "") {
                        var img = "{{ asset('storage/uploads/blog_cover') }}/" + data.cover;
                    } else {
                        var img = "{{ asset('assets/admin/images/no-image.png') }}";
                    }

                    $("#esource_img").attr("src", img);

                },
                complete: function() {
                    $(".inp").removeAttr("disabled");
                }
            });

        }

        function del() {
            var id = $("#id_img_delete").val();
            $.ajax({
                url: "{{ route('deleteImage') }}",
                type: "POST",
                data: {
                    id
                },
                daraType: "json",
                cache: false,
                beforeSend: function() {
                    $("#btn-del").attr("disabled", "disabled");
                    $("#btn-del").html("<i class='fa fa-spinner fa-pulse'></i> Loading...");
                },
                success: function(data) {
                    notif(data.message, data.status);
                    $('#md-delete').modal('toggle');
                    table_img.ajax.reload(null, false);
                },
                complete: function() {
                    $("#btn-del").removeAttr("disabled");
                    $("#btn-del").html("<i class='fa fa-trash'></i> Ya, Hapus");
                }
            });
        }

        function idImg(id, cover) {
            var img = "{{ asset('storage/uploads/blog_cover') }}/" + cover;
            $("#img_delete").attr("src", img);
            $('#md-delete').modal('show');
            $("#id_img_delete").val(id);
        }
    </script>
@endsection