@extends ('backend.layouts.app')
@section('title', 'Custom Video')
@section('content')
    <div class="box box-info">
        <div class="box-header with-border card-header">
            <h3 class="box-title" style="display: block;">Custom Video</h3>
            <span>
                <p id="message"></p>
            </span>

            <div class="box-header with-border">
                <div class="box-tools pull-right">
                    <div class="btn-group">
                        <button type="button" data-toggle="dropdown" class="btn btn-primary btn-flat dropdown-toggle">
                            Action <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span>
                        </button>
                        <ul role="menu" class="dropdown-menu">
                            <li><a href="{{ url('admin/custom/add_video') }}"><i class="fa fa-plus"></i> Add Custom
                                    Video</a></li>
                        </ul>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>

            <div class="box-body">
                <div class="table-responsive data-table-wrapper">
                    <!-- 🔄 Loader -->
                    <div id="loading-spinner" style="display:none; text-align:center;">
                        <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
                        <span>Loading videos...</span>
                    </div>

                    <table id="articles-table" class="table table-condensed table-hover table-bordered">
                        <thead>
                            <tr>

                                <th>Video Id</th>
                                <th>Video Title</th>
                                <th>Sequence</th>
                                <th>{{ trans('labels.backend.articles.table.pub') }}</th>
                                <th>Delete</th>
                                {{-- <th>Move</th> --}}
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('after-scripts')
    <script src="https://storage.googleapis.com/e4m-news-photo/news-photo/cms-js/dataTable.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    <script>
        $.noConflict();
        jQuery(document).ready(function($) {
            const spinner = $('#loading-spinner');

            function fetch_data() {
                spinner.show();

                $.ajax({
                    url: "{{ url('admin/custom/fetch_data_video') }}",
                    method: "POST",
                    data: {
                        id: $('#newsletterId').val(),
                        _token: "{{ csrf_token() }}"
                    },
                    dataType: "json",
                    success: function(data) {
                        let html = '';
                        for (let count = 0; count < data.length; count++) {
                            html += '<tr id="view_' + data[count].videoId + '">';
                            html += '<td>' + data[count].videoId + '</td>';
                            html += '<td>' + data[count].title + '</td>';
                            html += '<td>' + data[count].sequence + '</td>';
                            html += '<td>' + data[count].publishedAt + '</td>';
                            html += '<td>';
                            html += '<a href="/admin/deletecustomvideo/' + data[count].videoId +
                                '" onclick="return confirm(\'Are you sure you want to delete this video?\')" class="btn btn-danger btn-sm">Delete</a>';
                            html += '</td>';
                            html += '</tr>';
                        }
                        $('#articles-table tbody').html(html);
                    },
                    complete: function() {
                        spinner.hide();
                    }
                });
            }

            // Initial call
            fetch_data();

            // Drag and drop
            $("#articles-table tbody").sortable({
                helper: "clone",
                update: function(event, ui) {
                    let data = $(this).sortable('serialize');
                    $.ajax({
                        url: '{{ url('/admin/custom/sort') }}',
                        method: 'POST',
                        data: data + '&_token={{ csrf_token() }}',
                        success: function(response) {
                            console.log('Sequence updated');
                            fetch_data();
                        },
                        error: function(xhr) {
                            console.error(xhr.responseText);
                        }
                    });
                }
            }).disableSelection();

            // Move on bottom
            $(document).on('click', '.moveonbottom', function() {
                const id = $(this).data("id");
                swal({
                    title: "Are you sure?",
                    text: "Sure to remove the article from top news?",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonText: "Yes, Do it!",
                    confirmButtonColor: "#ec6c62"
                }, function() {
                    $.ajax({
                        url: "{{ url('admin/articles/move_databottom') }}",
                        method: "POST",
                        data: {
                            type: 'pin',
                            id: id,
                            _token: "{{ csrf_token() }}"
                        },
                        success: function(data) {
                            fetch_data();
                        }
                    }).done(function(data) {
                        swal("Done!", data, "success");
                    }).error(function(data) {
                        swal("Oops", data, "error");
                    });
                });
            });
        });
    </script>
@endsection