@extends('layouts.admin-panel')

@section('head')
    @include('admin-panel/includes/head')
    @include('admin-panel/includes/head-display')
@stop

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

@section('content')

    @include('admin-panel/includes/sidebar')

    <!-- Main content -->
    <div class="content-wrapper">

    @include('admin-panel/includes/header')

    <!-- Content area -->
        <div class="content">

            <div class="row">
                <div class="col-md-12">

                    <div class="card">
                        <div class="card-header header-elements-inline">
                            <h5 class="card-title">AniPlay Stream – Kolleksiyalar</h5>
                            <div class="header-elements">
                                <div class="list-icons">
                                    <a class="list-icons-item" data-action="collapse"></a>
                                    <a class="list-icons-item" data-action="reload"></a>
                                    <a class="list-icons-item" data-action="remove"></a>
                                </div>
                            </div>
                        </div>

                        <div class="card-body">
                            <div id="collectionStatus"></div>
                            <div id="jsGrid"></div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <!-- /content area -->

        @include('admin-panel/includes/footer')

    </div>
    <!-- /main content -->

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

        function collectionError(xhr, fallback) {
            var msg = fallback;
            try { msg = JSON.parse(xhr.responseText).message || fallback; } catch (e) {}
            $('#collectionStatus').html('<div class="alert alert-danger">' + msg + '</div>');
        }

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

            inserting: true,
            editing: true,
            sorting: true,
            paging: true,
            filtering: true,
            deleteConfirm: "Bu kolleksiyanı silmək istədiyinizə əminsiniz? Videolar kitabxanada qalacaq.",
            autoload: true,

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

                    $.ajax({
                        url: "displayBunnyCollectionsApi",
                    }).done(function (response) {
                        var res = response;
                        if (criteria.name !== "") {
                            res = response.filter(function (element) {
                                return element.name &&
                                    element.name.indexOf(criteria.name) > -1;
                            });
                        }
                        d.resolve(res);
                    }).fail(function (xhr) {
                        collectionError(xhr, "Kolleksiyalar yüklənmədi. Stream konfiqurasiyasını yoxlayın.");
                        d.resolve([]);
                    });
                    return d.promise();
                },
                insertItem: function (item) {
                    var d = $.Deferred();
                    $.ajax({
                        url: "addBunnyCollectionApi",
                        type: "post",
                        data: { name: item.name },
                    }).done(function (response) {
                        $('#collectionStatus').html(
                            '<div class="alert alert-success">' + response.message + '</div>');
                        d.resolve(response);
                    }).fail(function (xhr) {
                        collectionError(xhr, "Kolleksiya yaradıla bilmədi.");
                        d.reject();
                    });
                    return d.promise();
                },
                updateItem: function (item) {
                    var d = $.Deferred();
                    $.ajax({
                        url: "updateBunnyCollectionApi",
                        type: "post",
                        data: { id: item.guid, name: item.name },
                    }).done(function (response) {
                        $('#collectionStatus').html(
                            '<div class="alert alert-success">' + response.message + '</div>');
                        d.resolve(response);
                    }).fail(function (xhr) {
                        collectionError(xhr, "Kolleksiya yenilənə bilmədi.");
                        d.reject();
                    });
                    return d.promise();
                },
                deleteItem: function (item) {
                    var d = $.Deferred();
                    $.ajax({
                        url: "delBunnyCollectionApi",
                        type: "post",
                        data: { id: item.guid },
                    }).done(function (response) {
                        d.resolve(response);
                    }).fail(function (xhr) {
                        collectionError(xhr, "Kolleksiya silinə bilmədi.");
                        d.reject();
                    });
                    return d.promise();
                }
            },

            fields: [
                { name: "name", title: "Kolleksiya Adı", type: "text", width: 100, validate: "required" },
                { name: "guid", title: "GUID", type: "text", width: 120, editing: false, inserting: false },
                { name: "videoCount", title: "Video sayı", type: "number", width: 30, editing: false, inserting: false },
                { name: "totalSize", title: "Ölçü (MB)", type: "number", width: 30, editing: false, inserting: false },
                {
                    type: "control",
                    editButton: true,
                    deleteButton: true,
                }
            ]
        });
    </script>
@endsection