<?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/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>Thêm bài blog mới</h3>

    <form action="<?php echo e(url('admin/blog/create')); ?>" 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(old('title')); ?>">
                </div>
            </div>


            <div class="form-group clearfix">
                <label class="col-md-2 control-label">Ảnh đại diện</label>
                <div class="col-md-9">
                    <input type="file" class="post-image form-control" name="image"
                           rel="post_status_images">
                </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 e(old('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(); ?>

                    </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" checked>
                            <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" checked>
                            <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">
                            <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="">
                        </div>
                        <div class="col-md-4">
                            <input type="text" name="end_date" class="form-control date-picker"
                                   value="">
                        </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(old('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(old('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(old('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(old('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">
                    <input type="hidden" name="products_bsp" id="products_bsp">
                    <button type="submit" class="btn green">Thêm</button>

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

    <!-- MODAL EDIT CATEGORY -->
    <div id="editCategory" class="modal fade" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Sửa tên danh mục</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" id="edit_category_form" role="form" method="POST" action="<?php echo e(url('admin/edit-category-post')); ?>" enctype="multipart/form-data">
                        <?php echo csrf_field(); ?>

                        <input type="hidden" name="id_category" id="id_category" />
                        <div class="form-group">
                            <label class="col-sm-3 control-label no-padding-right">Tên danh mục</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="name_category" name="name" placeholder="Tên danh mục" value="">
                            </div>
                        </div>

                        <div class="clearfix form-actions">
                            <div class="col-md-offset-3 col-md-9">
                                <button type="button" class="btn btn-success" id="btn_edit_category">
                                    <i class="ace-icon fa fa-save bigger-110"></i>Lưu
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</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);
    });
    $('#input_seo_slug').bind('input',function () {
        var content = $(this).val();
        if(!content){
            content = 'Vui lòng cung cấp slug';
        }
        $('#input_seo_slug').html(content);
    });



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

    });

    // 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', '.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);
    });


</script>

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

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