@extends('layouts.app')

@section('styles')
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">
@endsection

@section('content')

    <!-- PAGE-HEADER -->
    <div class="page-header">
        <h1 class="page-title">Blogs</h1>
        <div>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
                <li class="breadcrumb-item active" aria-current="page">Blogs</li>
            </ol>
        </div>
    </div>
    <!-- PAGE-HEADER END -->

    <!-- ROW-1 OPEN -->
    @canany(['blogs-create', 'blogs-edit'])
        <div class="row">
            <div class="col-lg-12 col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Add Blogs</h3>
                    </div>
                    <div class="card-body">
                        <form method="POST" id="createForm" class="myform" enctype="multipart/form-data">
                            <input id="blog_id" name="blog_id" type="hidden" value="">
                            @csrf
                            <div class="form-row">

                                <div class="col-xl-6 mb-3">
                                    <label for="blog_title">Blog Title *</label>
                                    <input data-parsley-required-message="Blog Title Required" type="text"
                                        class="form-control" name="blog_title" id="blog_title" value="" required>

                                </div>
                                <div class="col-xl-6 mb-3">
                                    <label for="author">Author *</label>
                                    <input data-parsley-required-message="Author Required" type="text" class="form-control"
                                        name="author" id="author" value="" required>

                                </div>

                                <div class="col-xl-6 mb-3">
                                    <label for="image">Blog Thumbnail Image
                                        ({{ str_replace(',', 'x', env('BLOG_IMAGE_TSIZE')) }}px)
                                        *</label>
                                    <input data-parsley-required-message="Blog Thumbnail Image Required" type="file"
                                        class="form-control image" name="thumb_image" id="thumb_image" value="">
                                    <img src="" class="show-image" id="thumb_img" width="100px">
                                </div>

                                <div class="col-xl-6 mb-3">
                                    <label for="image">Blog Image
                                        ({{ str_replace(',', 'x', env('BLOG_IMAGE_SIZE')) }}px)
                                        *</label>
                                    <input data-parsley-required-message="Blog Image Required" type="file"
                                        class="form-control image" name="image" id="image" value="">
                                    <img src="" class="show-image" id="img" width="100px">

                                </div>

                                <div class="col-xl-12 mb-3">
                                    <label for="blog_description">Blog Description *</label>
                                    <textarea data-parsley-required-message="Blog Description Required" type="text" class="form-control summernote"
                                        name="blog_description" id="blog_description" required></textarea>

                                </div>

                                <div class="col-xl-6 mb-3">
                                    <label for="meta_title">Meta Title *</label>
                                    <input data-parsley-required-message="Meta Title Required" type="text"
                                        class="form-control" name="meta_title" id="meta_title" value="" required>
                                </div>
                                <div class="col-xl-6 mb-3">
                                    <label for="meta_keywords">Meta Keywords *</label>
                                    <input data-parsley-required-message="Meta Keywords Required" type="text"
                                        class="form-control" name="meta_keywords" id="meta_keywords" value="" required>
                                </div>
                                <div class="col-xl-6 mb-3">
                                    <label for="meta_description">Meta Description *</label>
                                    <textarea data-parsley-required-message="Meta Description Required" class="form-control" name="meta_description"
                                        id="meta_description" required></textarea>
                                </div>
                            </div>
                            @can('blogs-create')
                                <a id="create_btn" href="#"
                                    onclick="createOrUpdate('{{ url('/admin/add_blog') }}', 'createForm', '', 'table_datatable','')"
                                    class="btn custom-btn-success"><i class="fa fa-save"></i> Save</a>
                            @endcan
                            @can('blogs-edit')
                                <a id="update_btn" style="display: none" href="#"
                                    onclick="createOrUpdate('{{ url('/admin/update_blog') }}', 'createForm', '', 'table_datatable','')"
                                    class="btn custom-btn-success"><i class="fa fa-save"></i> Update</a>
                            @endcan
                        </form>
                    </div>
                </div>
            </div>
        </div>
    @endcanany
    <!-- /ROW-1 CLOSED -->

    <!-- Row -->
    @can('blogs-list')
        <div class="row row-sm">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">View Blogs</h3>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-bordered text-nowrap border-bottom dataTable no-footer "
                                style="width: 100% !important;" id="table_datatable">
                                <thead class="text-center">
                                    <tr>
                                        <th class="wd-15p border-bottom-0">#</th>
                                        <th class="wd-15p border-bottom-0">Blog</th>
                                        <th class="wd-15p border-bottom-0">Author</th>
                                        <th class="wd-15p border-bottom-0">Image</th>
                                        <th class="wd-15p border-bottom-0">Added By</th>
                                        <th class="wd-10p border-bottom-0">Actions</th>
                                    </tr>
                                </thead>

                            </table>

                            <div class="col-sm-12 col-md-12">
                            </div>
                        </div>
                    </div>


                </div>

            </div>
        </div>
    @endcan
    <!-- End Row -->

    <!-- Modal -->
    <div class="modal  fade" id="smallmodal" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Delete</h5>
                    <button class="btn-close text-danger" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>Do you want to delete the Blogs ?</p>
                </div>
                <div class="modal-footer">
                    <button class="btn custom-btn-warning" data-bs-dismiss="modal">Close</button>
                    <button onclick="delete_item()" class="btn custom-btn-danger">Delete</button>
                </div>
            </div>
        </div>
    </div>

    {{-- #########################View Modal################################### --}}
    <div class="modal fade show" id="largemodal" tabindex="-1" role="dialog" aria-modal="true"
        style="display: none;">
        <div class="modal-dialog modal-lg " role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" style="font-weight: bold;" id="view_modal_title">Blog Details</h5>
                    <button class="btn-close text-danger" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body" id="view_modal_body">

                </div>
                <div class="modal-footer">
                    <button class="btn custom-btn-warning" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    {{-- #########################End Of View Modal############################ --}}






@endsection
@section('scripts')
    {{-- ################################Jquery Datatable########################### --}}
    {{-- <script src="{{asset('assets/jquery-datatable/jquery.min.js')}}"></script> --}}
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/jquery-datatable/jquery.dataTables.css?v3') }}">
    <script src="{{ asset('assets/jquery-datatable/jquery.dataTables.js') }}"></script>
    {{-- ########################################################################## --}}
    {{-- <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script> --}}


    <script>
        function append_features_fn() {
            var appedcount = $("#appendcount").val();
            var appedcount = parseInt(appedcount) + 1;
            $("#appendcount").val(appedcount);
            $("#append_features_div").append('<div class="col-xl-5 mb-3 remove_new_' + appedcount +
                ' remove_all_serv"><label for="validationTooltip01">More Details*</label><textarea data-parsley-required-message="Features Required" type="text" class="form-control" name="more_details[]" value="" required></textarea></div><div class="col-xl-5 mb-3 remove_new_' +
                appedcount +
                ' remove_all_serv"><label for="validationTooltip01">More Details Arabic*</label><textarea data-parsley-required-message="Features Arabic Required" type="text" class="form-control" name="more_details_ar[]" value="" required></textarea></div><div class="col-xl-2 mb-3 remove_new_' +
                appedcount + ' remove_all_serv"><button style="margin-top: 28px;" onclick="remove_features_fn(' +
                appedcount + ')" type="button" class="btn btn-danger">x</button></div>');
        }

        function remove_features_fn(remove_id) {
            $(".remove_new_" + remove_id).remove();
        }
    </script>

    <!-- INTERNAL SUMMERNOTE Editor JS -->
    <script src="{{ asset('assets/plugins/summernote/summernote1.js') }}"></script>
    <script src="{{ asset('assets/js/summernote.js') }}"></script>

    <script>
        var token = $("meta[name=csrf-token]").attr("content");
        var datatable_name = "table_datatable";


        $('.summernote').summernote();

        $('#table_datatable').DataTable({
            "responsive": true,
            "serverSide": true,
            "ordering": true,
            "searching": true,
            "bLengthChange": true,
            "info": false,
            "bSort": true,
            "order": [
                [0, 'desc']
            ],
            "columnDefs": [{
                    "targets": [0, 4],
                    "orderable": true
                },
                {
                    "className": "text-center",
                    "targets": [0, 3, 4]
                },
                {
                    "className": "text-left",
                    "targets": []
                }

            ],
            "displayLength": 10,
            "ajax": {
                "url": "/admin/blog_datatable",
                "type": "post",
                "data": function(data) {
                    data._token = token;

                    return data;

                }
            },
            "AutoWidth": true,
            "columns": [{
                    "data": "blog_id",
                    "name": "blog_id"
                },
                {
                    "data": "blog_title",
                    "name": "blog_title"
                },
                {
                    "data": "author",
                    "name": "author"
                },
                {
                    "data": "blog_id",
                    "name": "blog_id"
                },
                {
                    "data": "name",
                    "name": "name"
                },
                {
                    "data": "blog_id",
                    "name": "blog_id"
                },
            ],

            "fnCreatedRow": function(nRow, aData, iDataIndex) {
                var info = this.dataTable().api().page.info();
                var page = info.page;
                var length = info.length;
                var index = (page * length + (iDataIndex + 1));
                var action = "";

                var image = '<a href="/uploads/blogs/' + aData.blog_image +
                    '" target="_blank"><img style="width:102px;" src="/uploads/blogs/' + aData
                    .blog_thumb_image +
                    '"></a>';

                var action = action + '&nbsp;<button title="View"  onclick=View(' + aData.blog_id +
                    ') id="bEdit" type="button" class="btn btn-sm custom-btn-success"><span class="fe fe-eye"> </span></button>';
                //Edit Action
                @can('blogs-edit')
                    var action = action + '&nbsp;<button title="Edit"  onclick=edit(' + aData.blog_id +
                        ') id="bEdit" type="button" class="btn btn-sm custom-btn-info"><span class="fe fe-edit"> </span></button>';
                @endcan
                //Delete Action
                @can('blogs-delete')
                    var action = action + '&nbsp;<button title="Delete" onclick="delete_modal(' + aData
                        .blog_id +
                        ')" id="bDel" type="button" class="btn  btn-sm custom-btn-danger"><span class="fe fe-trash-2"> </span></button>';
                @endcan
                $('td:eq(0)', nRow).html(index);
                $('td:eq(3)', nRow).html(image);
                $('td:eq(5)', nRow).html(action);
            }
        });

        // #################### Edit Blog ############################
        function edit(id) {
            $.ajax({
                type: 'POST',
                data: {
                    "_token": token,
                    "id": id
                },
                url: '/admin/edit_blog',
                success: function(result) {
                    console.log(result);
                    $('#blog_id').val(result.blog_id);
                    $('#author').val(result.author);
                    $('#blog_title').val(result.blog_title);
                    $('#meta_title').val(result.meta_title);
                    $('#meta_description').val(result.meta_description);
                    $('#meta_keywords').val(result.meta_keywords);
                    $('#blog_description').summernote("code",result.blog_description);
                    $('#img').attr("src", "/uploads/blogs/" + result.blog_image);
                    $('#thumb_img').attr("src", "/uploads/blogs/" + result.blog_thumb_image);

                    $('#create_btn').hide();
                    $('#update_btn').show();
                    $("#image").attr("required", false);
                    $('#back-to-top').click();

                }
            })
        }
        // #################### End Of Edit Blog ####################


        function View(id) {
            $.ajax({
                type: 'POST',
                data: {
                    "_token": token,
                    "id": id
                },
                url: '/admin/view_blog',
                success: function(result) {
                    $('#view_modal_body').html(result);
                    $('#largemodal').modal('show');
                }
            })
        }


        // #################### Delete Blog ##########################
        function delete_modal(id) {
            $('#blog_id').val(id);
            $('#smallmodal').modal('show');
        }

        function delete_item() {
            var id = $('#blog_id').val();
            $.ajax({
                type: 'POST',
                data: {
                    "_token": token,
                    "id": id
                },
                url: '/admin/delete_blog',
                success: function(result) {
                    $('#smallmodal').modal('hide');
                    toast(result, datatable_name);
                }
            })
        }
        // #################### End Of Delete Blog ##################
    </script>
@endsection