@extends('admin.component.layout')
@section('extended_css')
@stop
@section('content')
<div class="row">
    <div class="col-12">
        <div class="loading" align="center" style="display: none;">
          <img src="{!! asset('img/loading.gif') !!}" width="40px">
        </div>
        <div class="card main-layer">
            <div class="card-body">
                <div class="row py-3">
                    <div class="col-md-4 col-sm-12 col-xs-12 form-inline main-layer pl-3 mb-3">
                        <button type="button" class="btn btn-rounded btn-primary btn-add">
                            <i class="fa fa-plus"></i> &nbsp; Tambah 
                        </button>
                    </div>
                    <div class="col-md-8 col-sm-12 col-xs-12 main-layer panelSearch mb-3">
                        <div class="form-inline pos-absolute float-lg-right">
                            <div class="form-group">
                                <select class="form-control-sm form-control input-s-sm inline v-middle option-search" id="search-option">
                                </select>
                            </div>
                            <div class="form-group">
                                <input type="text" class="form-control-sm form-control" placeholder="Search" id="search">
                            </div>
                        </div>
                    </div>
                </div>
                <div class='clearfix'></div>
                <div class="table-rep-plugin">
                    <div class="table-responsive b-0">
                        <table id="datagrid" class="table table-striped"></table>
                    </div>
                    <footer class="panel-footer py-2">
                        <div class="row">
                            <div class="col-sm-1 hidden-xs">
                                <select class="input-sm form-control input-s-sm inline v-middle option-page" id="option"></select>
                            </div>
                            <div class="col-sm-6 text-center">
                                <small class="text-muted inline m-t-sm m-b-sm" id="info"></small>
                            </div>
                            <div class="col-sm-5 text-right text-center-xs">
                                <ul class="pagination pagination-sm justify-content-center float-r m-t-0 m-b-0" id="paging"></ul>
                            </div>
                        </div>
                    </footer>
                </div>
            </div>
        </div>
    </div>
    <div class="col-12 other-page"></div>
    <div class="col-12 modal-dialog"></div>
</div>
@stop
@section('extended_js')
<script type="text/javascript">
    var datagrid = $("#datagrid").datagrid({
      url                   : "{!! route('VideoDatagrid') !!}",
      primaryField          : 'id_video',
      rowNumber             : true,
      rowCheck              : false,
      searchInputElement    : '#search',
      searchFieldElement    : '#search-option',
      pagingElement         : '#paging',
      optionPagingElement   : '#option',
      pageInfoElement       : '#info',
      itemsPerPage           : 5,
      columns               : [
        {field: 'judul_video', title: 'Judul Video', editable: false, sortable: true, width: 200, align: 'left', search: true},
        {field: 'video', title: 'Video', sortable: false, width: 240, align: 'center', search: false,
          rowStyler: function(rowData, rowIndex) {
            return video(rowData, rowIndex);
          }
        },
        {field: 'menu', title: 'Menu', sortable: false, width: 240, align: 'center', search: false,
          rowStyler: function(rowData, rowIndex) {
            return menu(rowData, rowIndex);
          }
        }
      ]
    });

    $(document).ready(function() {
      datagrid.run();
    });

    $('.btn-add').click(function(){
      $('.main-layer').hide();
      $('.loading').show();
      $.post("{!! route('VideoForm') !!}").done(function(data){
        if(data.status == 'success'){
            $('.loading').hide();
            $('.other-page').html(data.content).fadeIn();
        } else {
            $('.main-layer').show();
        }
      });
    });

    function menu(rowData, rowIndex) {
        var menu = '';
        menu += '<a onclick="updated('+rowIndex+')" class="btn btn-warning btn-sm mr-1" href="javascript:void(0);"><i class="fa fa-edit"></i> Edit</a>'+
         '<a onclick="deleted('+rowIndex+')" class="btn btn-danger btn-sm mr-1" href="javascript:void(0);"><i class="fa fa-trash"></i> hapus</a>';
        return menu;
    }

    function video(rowData, rowIndex) {
        var frame = '';
        frame += '<iframe width="290" height="144" src="'+rowData.embed_youtube.replace('watch?v=', 'embed/')+'" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';
        return frame;
    }

    function updated(rowIndex){
        var rowData = datagrid.getRowData(rowIndex);
        $('.main-layer').hide();
        $('.loading').show();
        $.post("{!! route('VideoForm') !!}",{id:rowData.id_video}).done(function(data){
            if(data.status == 'success'){
                $('.other-page').html(data.content).fadeIn();
                $('.loading').hide();
            } else {
                $('.main-layer').show();
            }
        });
    }

    function deleted(rowIndex){
        var rowData = datagrid.getRowData(rowIndex);
        swal(
        {
            title: "Apa anda yakin menghapus Data ini?",
            text: "Data akan dihapus dari sistem dan tidak dapat dikembalikan!",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "Saya yakin!",
            cancelButtonText: "Batal!",
            closeOnConfirm: true
        },
        function(){
            $.post("{!! route('hapusVideo') !!}", {id:rowData.id_video}).done(function(data){
                if(data.status == 'success'){
                    swal("Berhasil", data.message, "success");
                    datagrid.reload();
                    $('.main-layer').show();
                    $('.loading').hide();
                }else if(data.status == 'error'){
                    swal("Maaf!", data.message, "error");
                    datagrid.reload();
                }
            });
        }
        );
    }
</script>
@stop