@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>
        @if (Session::has('success'))
            <div class="alert alert-success">
                {{ Session::get('success') }}
            </div>
        @endif
        <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">
                        <a href="{{ route('tambahFoto') }}" class="btn btn-rounded btn-primary btn-add">
                            <i class="fa fa-plus"></i> &nbsp; Tambah 
                        </a>
                    </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('FotoDatagrid') !!}",
      primaryField          : 'id_foto',
      rowNumber             : true,
      rowCheck              : false,
      searchInputElement    : '#search',
      searchFieldElement    : '#search-option',
      pagingElement         : '#paging',
      optionPagingElement   : '#option',
      pageInfoElement       : '#info',
      columns               : [
        {field: 'caption', title: 'Caption', editable: false, sortable: true, width: 200, align: 'left', search: true},
        {field: 'nama_album', title: 'Album', editable: false, sortable: true, width: 200, align: 'left', search: true},
        {field: 'gambar', title: 'Foto', sortable: false, width: 220, align: 'left', search: false,
          rowStyler: function(rowData, rowIndex) {
            return gambar(rowData, rowIndex);
          }
        },
        {field: 'menu', title: 'Menu', sortable: false, width: 250, align: 'center', search: false,
          rowStyler: function(rowData, rowIndex) {
            return menu(rowData, rowIndex);
          }
        }
      ]
    });

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

    $('#category').on('itemAdded', function(event) {
        setTimeout(function() {
            $("input[type=text]", ".bootstrap-tagsinput").val("");
        }, 1);
    });

    function gambar(rowData, rowIndex) {
        var gambar = '';
        gambar += '<img width="100" src="{{url('resources/galeri')}}/'+rowData.slug_album+'/'+rowData.foto+'" >';
        return gambar;
    }

    function menu(rowData, rowIndex) {
        var menu = '';
        menu += '<a class="btn btn-warning btn-sm mr-1" href="{{ route('tambahFoto') }}?id='+rowData.id_foto+'"><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> </a>';
        return menu;
    }

  

    
    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('hapusFoto') !!}", {id:rowData.id_foto}).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