@extends('layouts.user-panel')

@section('head')
    <!-- Theme JS files -->

    <!-- /theme JS files -->
    {{--    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>--}}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
    <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />

    {{--    <script src="https://cdn.ckeditor.com/4.13.1/full/ckeditor.js"></script>--}}
    <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" />
    <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" />

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>
    <meta name="csrf-token" content="{{ csrf_token() }}" />
@stop

@section('nav')
    {{--    @include('admin-panel/includes/navbar')--}}
@stop

@section('content')
    <!-- Vertical form options -->
    <div class="row">
        <div class="col-md-12">

            <div id="jsGrid"></div>
            <div id="dialog" title="Image Full Size View">
                <img id="imagePreview" />
            </div>

        </div>
    </div>
@endsection

@section('scripts')
    <script>
        $.ajaxSetup({

            headers: {

                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')

            }

        });
        $("#dialog").dialog({
            modal: true,
            autoOpen: false,
            position: {
                my: "center",
                at: "center",
                of: $("#jsgrid")
            },
            width      : "auto",
            height     : "auto",
        });
        var clients = [
            { "Name": "Otto Clay", "Age": 25, "Country": 1, "Address": "Ap #897-1459 Quam Avenue", "Married": false },
            { "Name": "Connor Johnston", "Age": 45, "Country": 2, "Address": "Ap #370-4647 Dis Av.", "Married": true },
            { "Name": "Lacey Hess", "Age": 29, "Country": 3, "Address": "Ap #365-8835 Integer St.", "Married": false },
            { "Name": "Timothy Henson", "Age": 56, "Country": 1, "Address": "911-5143 Luctus Ave", "Married": true },
            { "Name": "Ramona Benton", "Age": 32, "Country": 3, "Address": "Ap #614-689 Vehicula Street", "Married": false }
        ];

        var countries = [
            { Name: "", Id: 0 },
            { Name: "United States", Id: 1 },
            { Name: "Canada", Id: 2 },
            { Name: "United Kingdom", Id: 3 }
        ];

        $("#jsGrid").jsGrid({
            width: "100%",
            height: "800px",

            inserting: true,
            editing: false,
            sorting: true,
            paging: true,
            filtering: true,
            deleteConfirm: "Do you really want to delete the client?",
            autoload: true,

            controller: {
                loadData: function ( filter) {
                    // console.log(datass);
                    var criteria = filter;
                    var d = $.Deferred();

                    if(!filter.title){
                        // d.resolve(datass);
                        $.ajax({
                            url: "{{route('user.displayBlogApi')}}",
                            // dataType: "json",
                            // data: {filter},
                            // type: "POST"
                        }).done(function (response) {
                            // console.log(response);
                            var res = [];
                            if(criteria.title !== "")
                            {
                                response.forEach(function(element) {
                                    if(element.title.indexOf(criteria.title) > -1){
                                        res.push(element);
                                        response = res;
                                    }
                                }, this);
                            }
                            else res = response;

                            d.resolve(res);

                        });
                        return d.promise();
                    }
                    else{
                        // d.resolve(datass);
                        $.ajax({
                            url: "getBlogApi/?search="+filter.title,
                            // dataType: "json",
                            // data: {filter},
                            // type: "POST"

                        }).done(function (response) {
                            // console.log(response);

                            d.resolve(response);
                        });

                        return d.promise();
                    }

                },
                deleteItem: function(item){
                    var d = $.Deferred();
                    $.ajax({
                        url: "delBlogApi",
                        type: "post",
                        data: item,
                        // dataType: "json",

                        // type: "POST"
                    }).done(function (response) {
                        // console.log(response);
                        d.resolve(response);

                    });
                    return d.promise();
                },
            },

            fields: [
                { name: "title", type: "text", width: 150, validate: "required" },
                // { name: "Age", type: "number", width: 50 },
                // { name: "preview_img", type: "text", width: 200 },
                {
                    name: "preview_img",
                    itemTemplate: function(val, item) {
                        var val_pic = '{{route('/')}}/' +val;
                        console.log("tMM", item);
                        return $("<img>").attr("src", val_pic ).css({ height: 50, width: 50 }).on("click", function() {
                            $("#imagePreview").attr("src", val_pic);
                            $("#dialog").dialog("open");
                        });
                    },
                    insertTemplate: function() {
                        var insertControl = this.insertControl = $("<input>").prop("type", "file");
                        return insertControl;
                    },
                    insertValue: function() {
                        return this.insertControl[0].files[0];
                    },
                    align: "center",
                    width: 120
                },
                // { name: "Country", type: "select", items: countries, valueField: "Id", textField: "Name" },
                // { name: "Married", type: "checkbox", title: "Is Married", sorting: false },
                {
                    name: "edit",
                    // type: "control",
                    width: 30,
                    itemTemplate: function(value, item) {
                        var $text = $("<p>").text(item.MyField);
                        var $link = $("<a>").attr("href", item.edit).text("Edit Item");
                        return $("<div>").append($text).append($link);
                    }
                },
                {
                    type: "control",
                    editButton: false,
                    deleteButton: true,

                }
            ]
        });
    </script>
@stop