<?php $__env->startSection('style'); ?>
    <link href="/assets/ht/css/main.css" rel="stylesheet" type="text/css"/>

    <style>
        .seo_preview {
            display: block;
            min-height: 100px;
        }

        .seo_title #render_seo_title {
            color: #1e0fbe;
            font-size: 18px;
            font-weight: 400;
            line-height: 1.2;
        }

        .seo_title{
            display: inline-block;
            overflow: hidden;
            width: 100%;
            vertical-align: top;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .seo_preview {
            position: relative;
            background-color: #fff;
            box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
        }

        .seo_heading {
            margin: 0 0 15px;
            padding: 8px 20px;
            color: #555;
            font-family: "Open Sans", sans-serif;
            font-size: 15px;
            font-weight: 300;
        }

        .seo_preview_view {
            width: 50%;
            max-width: 100%;
            padding: 0 20px;
        }

        .seo_url {
            width: 50%;
            line-height: 1;
            white-space: nowrap;
        }

        #render_seo_url {
            color: #006621;
            font-style: normal;
        }

        #render_seo_description {
            color: #777;
        }

        .text-dot {
            display: block;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>

    <link href="/assets/css/fileinput.min.css" rel="stylesheet" type="text/css"/>
    <link href="/assets/pages/css/search.min.css" rel="stylesheet" type="text/css"/>
    <link href="/assets/global/plugins/bootstrap-toastr/toastr.min.css" rel="stylesheet" type="text/css"/>
    <link href="/css/bootstrap-tagsinput.css" rel="stylesheet" type="text/css"/>
    <style>
        .form-horizontal .form-group {
            margin-left: 0px;
            margin-right: 0px;
        }

        .col-lg-6 {
            padding-left: 0px;
        }

        .bien-the .portlet.light {
            padding-left: 0px;
            padding-right: 0px;
        }

        .xoa-bien-the {
            text-align: center;
            vertical-align: middle !important;
            cursor: pointer;
        }

        .xoa-bien-the i {
            font-size: 21px;
            color: red;
        }

        .img-input .div-img {
            width: 100%;
            margin-bottom: 5px;
            margin-top: 10px;
            height: 140px;
            background-size: cover !important;
        }

        .img-input .col-lg-3 {
            padding-left: 0px;
        }

        .img-input input[type="file"] {
            display: none;
        }

        .custom-file-upload {
            border: 1px solid #ccc;
            display: inline-block;
            padding: 6px 12px;
            cursor: pointer;
        }

        .img-input span {
            position: absolute;
            right: 22px;
            top: 18px;
        }

        .img-input span i {
            font-size: 23px;
            color: #fff;
            text-shadow: 1px 0px 0px #5d5d5d, -1px 0px 0px #5d5d5d, 0px 1px 0px #5d5d5d, 0px -1px 0px #5d5d5d, 1px 1px #5d5d5d, -1px -1px 0px #5d5d5d, 1px -1px 0px #5d5d5d, -1px 1px 0px #5d5d5d;
        }

        .bootstrap-tagsinput .tag [data-role="remove"]::after {
            content: "*" !important;
        }

        .bootstrap-tagsinput .tag {
            font-size: 13px;
        }

        .span-pro {
            position: absolute;
            right: 110px;
            z-index: 999;
            top: 10px;
        }
        .product-select-name {
            display: block;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .pop-up .span-pro {
            display: none;
        }

        .span-pro i {
            font-size: 23px;
            color: #fff;
            text-shadow: 1px 0px 0px #000, -1px 0px 0px #000, 0px 1px 0px #000, 0px -1px 0px #000, 1px 1px #000, -1px -1px 0px #000, 1px -1px 0px #000, -1px 1px 0px #000;
        }

        .slide-bsp .tile-thumbnail {
            position: relative;
        }
    </style>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('styles'); ?>
    <link href="/assets/global/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css" rel="stylesheet" type="text/css" />
    <?php $__env->stopSection(); ?>

<?php $__env->startSection('content'); ?>
    <?php echo $__env->make('admin.flash_message', \Illuminate\Support\Arr::except(get_defined_vars(), array('__data', '__path')))->render(); ?>
    <div class="col-md-12">
        <h3>Cập nhật <?php echo e($blog->name); ?></h3>

        <form action="<?php echo e(url('admin/blog/update', ['id' => $blog->id])); ?>" class="form-horizontal" method="post" enctype="multipart/form-data">
            <div class="form-body">
                <?php echo e(csrf_field()); ?>

                <div class="form-group">
                    <label class="col-md-2 control-label">Tiêu đề</label>
                    <div class="col-md-9">
                        <input type="text" name="title" class="form-control" id="title" placeholder="Điền tiêu đề"
                               value="<?php echo e($blog->title); ?>">
                    </div>
                </div>


                <div class="form-group">
                    <label class="col-md-2 control-label">Ảnh đại diện</label>
                    <div class="col-md-9">


                        <div class="fileinput fileinput-new"
                             data-provides="fileinput">

                            <div class="fileinput-new thumbnail"
                                 style="width: 200px; height: 180px;">
                                <img id="inp-image-web2"
                                     src="<?php echo e($blog->image_url); ?>"
                                     alt=""></div>
                            <div class="fileinput-preview fileinput-exists thumbnail"
                                 style="max-width: 200px; max-height: 150px;"></div>
                            <div>
                                                                            <span class="btn default btn-file">
                                                                                <span class="fileinput-new"> Chọn hình ảnh </span>
                                                                                <span class="fileinput-exists"> Thay đổi </span>
                                                                                <input type="file" name="image"> </span>
                                <a href="javascript:;"
                                   class="btn default fileinput-exists"
                                   data-dismiss="fileinput"> Xóa </a>
                            </div>
                        </div>

                    </div>
                </div>

                <div class="form-group">
                    <label class="col-md-2 control-label">Nội dung</label>
                    <div class="col-md-9">
                    <textarea class="form-control ckeditor" placeholder="Điền miêu tả"
                              name="content"><?php echo $blog->content; ?> </textarea>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-2 control-label">Danh mục</label>
                    <div class="col-md-9">
                    <select class="form-control select2" multiple name="categories[]">

                        <?php  \App\Components\Functions::printSelect(null, '', $selectedCategories); ?>

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

                <div class="form-group">
                    <label class="col-md-2 control-label">Có được hiển thị ?</label>
                    <div class="col-md-9">
                        <div class="mt-checkbox-inline">
                            <label class="mt-checkbox mt-checkbox-outline">
                                <input type="checkbox" name="status" <?php if($blog->status): ?> checked <?php endif; ?>>
                                <span></span>
                            </label>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-md-2 control-label">Nổi bật ?</label>
                    <div class="col-md-9">
                        <div class="mt-checkbox-inline">
                            <label class="mt-checkbox mt-checkbox-outline">
                                <input type="checkbox" name="is_featured" <?php if($blog->is_featured): ?> checked <?php endif; ?>>
                                <span></span>
                            </label>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-md-2 control-label">Có phải bài khuyến mại ?</label>
                    <div class="col-md-9">
                        <div class="mt-checkbox-inline">
                            <label class="mt-checkbox mt-checkbox-outline">
                                <input type="checkbox" name="is_sale" <?php if($blog->is_sale): ?> checked <?php endif; ?>>
                                <span></span>
                            </label>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-2 control-label">Thời gian bắt đầu - kết thúc KM</label>
                    <div class="col-md-9">
                        <div class="row">
                            <div class="col-md-4">
                                <input type="text" name="start_date" class="form-control date-picker"
                                       value="<?php echo e(optional($blog->start_date)->format('d/m/Y')); ?>">
                            </div>
                            <div class="col-md-4">
                                <input type="text" name="end_date" class="form-control date-picker"
                                       value="<?php echo e(optional($blog->end_date)->format('d/m/Y')); ?>">
                            </div>
                        </div>


                    </div>
                </div>

                <div class="col-md-12">
                    <div class="portlet box red">
                        <div class="portlet-title">
                            <div class="caption">SEO</div>
                            
                            
                            
                        </div>
                        <div class="portlet-body" style="display: block;">

                            <section class="seo_preview">
                                <div class="seo_preview_view">
                                    <div class="seo_title">
                                <span id="render_seo_title">
                                        Vui lòng cung cấp tiêu đề
                                </span>
                                    </div>
                                    <div class="seo_url">
                                 <span id="render_seo_url">
                                    <?php echo e(Request::getHost()); ?>

                                </span>
                                    </div>
                                    <div class="seo_description text-dot">
                                     <span id="render_seo_description">
                                          <?php echo e(old('meta_description')); ?>

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

                            </section>
                            <section class="seo_preview" style="padding-bottom: 20px">
                                <div class="form-body">
                                    <div class="form-group">
                                        <label class="col-md-2 control-label">Seo title</label>
                                        <div class="col-md-8">
                                            <input class="form-control" required id="input_seo_title" placeholder="Seo title" value="<?php echo e($blog->meta_title); ?>" name="meta_title">
                                            <?php if($errors->has('meta_title')): ?>
                                                <div class="error" style="color: red"><?php echo e($errors->first('meta_title')); ?></div>
                                            <?php endif; ?>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-body">
                                    <div class="form-group">
                                        <label class="col-md-2 control-label">Slug</label>
                                        <div class="col-md-8">
                                            <input class="form-control" required id="input_seo_slug" placeholder="Slug" value="<?php echo e($blog->slug); ?>" name="slug">
                                            <?php if($errors->has('slug')): ?>
                                                <div class="error" style="color: red"><?php echo e($errors->first('slug')); ?></div>
                                            <?php endif; ?>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-body">
                                    <div class="form-group">
                                        <label class="col-md-2 control-label">Meta description</label>
                                        <div class="col-md-8">
                                            <textarea class="form-control" id="input_seo_description" placeholder="Meta description" name="meta_description"><?php echo e($blog->meta_description); ?></textarea>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-body">
                                    <div class="form-group">
                                        <label class="col-md-2 control-label">keyword</label>
                                        <div class="col-md-8">
                                            <textarea class="form-control" placeholder="keyword" name="meta_keywords"><?php echo e($blog->meta_keywords); ?></textarea>
                                        </div>
                                    </div>
                                </div>
                            </section>

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


            </div>
            <div class="form-actions">
                <div class="row">
                    <div class="col-md-offset-4 col-md-8">
                        <button type="submit" class="btn green">Cập nhật</button>

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

        <!-- MODAL EDIT CATEGORY -->
    </div>

<?php $__env->stopSection(); ?>
<?php $__env->startPush('scripts'); ?>
<script type="text/javascript" src="/assets/global/plugins/jquery-ui/jquery-ui.min.js"></script>
<script type="text/javascript" src="/assets/global/plugins/bootstrap-tagsinput/bootstrap-tagsinput.min.js"></script>
<script type="text/javascript" src="/assets/global/plugins/bootstrap-toastr/toastr.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/assets/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js" type="text/javascript"></script>

<script type="application/javascript">

    $("#title").on('keyup', function (e) {
        $("#input_seo_slug").val(convertToSlug($(this).val()))
        $("#input_seo_title").val($(this).val())
    });

    function convertToSlug(str) {
        str = str.replace(/^\s+|\s+$/g, ''); // trim
        str = str.toLowerCase();

        // remove accents, swap ñ for n, etc
        var from = "ãàáäâẽèéëêìíïîõòóöôùúüûñç·/_,:;";
        var to   = "aaaaaeeeeeiiiiooooouuuunc------";
        for (var i = 0, l = from.length; i < l; i++) {
            str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i));
        }

        str = str.replace(/[^a-z0-9 -]/g, '') // remove invalid chars
            .replace(/\s+/g, '-') // collapse whitespace and replace by -
            .replace(/-+/g, '-'); // collapse dashes

        return str;
    }

    $('#title').bind('input', function () {
        var title = $(this).val();
        if(!title) {
            title = 'Vui lòng cung cấp tiêu đề';
        }
        $('#render_seo_title').html(title);
    });

    $('#input_seo_description').bind('input',function () {
        var content = $(this).val();
        if(!content){
            content = 'Vui lòng cung cấp meta description';
        }
        $('#render_seo_description').html(content);
    });




    $(document).on('click', '.span-pro', function (e) {
        var product_id = $(this).attr('data-product-id');
        $('.slide-bsp').slick('destroy');

        $('#slide-' + product_id).remove();

        $('.slide-bsp').slick(getSliderSettings());

        products = jQuery.grep(products, function (value) {
            return value != product_id;
        });

        $('#products_bsp').val(products);
    });

    // thêm danh mục

    $(document).on('click', '.create_new_category', function (e) {
        e.preventDefault();
        var new_category = $('.new_category').val();

        if (new_category == '') {
            alert('Điền tên danh mục mới')
        } else {
            $.ajax({
                url : '<?php echo e(url("admin/add-new-category-post")); ?>',
                method : "post",
                data : {
                    new_category:new_category,
                },
                dataType : "html",
                success : function (response)
                {
                    $("#list-categories").html(response);
                    $('.new_category').val('');
                }
            });
        }
    });

    $(document).on('click', '.edit-category', function (e) {
        e.preventDefault();
        var id_category = $(this).attr('data-id');
        var name_category = $(this).attr('data-name');
        $("#id_category").val(id_category);
        $("#name_category").val(name_category);
    });

    $(document).on('click', '#btn_edit_category', function () {
        var data = $('#edit_category_form').serialize();
        $.ajax({
            url: $('#edit_category_form').attr('action'),
            type: $('#edit_category_form').attr('method'),
            data: data,
            dataType: 'json',
            success: function (res){
                if (res.status == 1){
                    $("#editCategory").modal('hide');
                    swal({
                        title: "Thành công!",
                        text: "Sửa nhóm công việc!",
                        type: "success",
                        showConfirmButton: true
                    });
                    $("#list-categories").html(res.html);
                } else {
                    alert('Có lỗi xảy ra, xin thử lại sau');
                }
            }
        });
    });

    $(document).on('click', '.remove-category', function (e) {
        e.preventDefault();
        var category_id = $(this).attr('data-id');

        bootbox.confirm({
            message: 'Bạn có chắc chắn muốn xóa danh mục này ?',
            buttons: {
                confirm: {
                    label: 'Xóa',
                    className: 'btn-success',
                },
                cancel: {
                    label: 'Không',
                    className: 'btn-danger'
                }
            },
            callback: function(result)
            {
                if(result)
                {
                    $.ajax({
                        url : '<?php echo e(url("admin/remove-category-post")); ?>',
                        method : "post",
                        data : {
                            category_id:category_id,
                        },
                        dataType : "html",
                        success : function (response)
                        {
                            $("#list-categories").html(response);
                        }
                    });
                }
            }
        });
    });

    $(document).on('click', '.choose-category', function (e) {
        e.preventDefault();
        var id_category = $(this).attr('data-id');
        var name_category = $(this).attr('data-name');
        $("#category_id").val(id_category);
        $("#category_name").text(name_category);
    });

    $('.date-picker').datepicker({
        format: 'dd/mm/yyyy',
        autoclose: true

    });

    var data = [{
        id: 'book',
        text: 'Book',
        children: [{
            id: 'book1',
            text: 'c.Book1'
        }, {
            id: 'book2',
            text: 'c.Book2'
        }]
    }];

    $('.js-example-data-array').select2({data:data});

</script>

<?php $__env->stopPush(); ?>

<?php echo $__env->make('admin', \Illuminate\Support\Arr::except(get_defined_vars(), array('__data', '__path')))->render(); ?>