@include('beheader')

  <link rel="stylesheet" href="{{ asset('be/plugins/jquery-ui/jquery-ui.css') }}">
  <link rel="stylesheet" href="{{ asset('be/plugins/jquery-ui/jquery-ui.theme.css') }}">
  <script src="{{ asset('be/plugins/jquery-ui/jquery-ui.js') }}"></script>
  
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1>List Artikel</h1>
          </div>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="#">User</a></li>
              <li class="breadcrumb-item active">List Artikel</li>
            </ol>
          </div>
        </div>
      </div><!-- /.container-fluid -->
    </section>

    <!-- Main content -->
    <section class="content">

      <!-- Default box -->
      <div class="card" style="padding:20px">

        <div>

          <div style="margin-bottom:15px">
            <button type="button" onClick="showDialog()">Tambah Data</button>
          </div>

          <table id="listbeartikels" class="table table-bordered table-hover">
            <thead>
              <tr>
                <th>Judul</th>
                <th>Mulai Tayang</th>
                <th>Selesai Tayang</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
               @foreach($records as $o)
                <tr>
                  <td>{{ $o->title }}</td>
                  <td>{{ $o->start_date }}</td>
                  <td>{{ $o->end_date }}</td>
                  <td>&nbsp;<a href='#' onClick="editForm('{{ $o->id }}')"><i class="far fa-edit"></i></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href='#' onClick="deleteForm('{{ $o->id }}')"><i class="far fa-trash-alt"></i></a>&nbsp;</td>
                </tr>
                @endforeach
            </tbody>
          </table>

          <div id="dialog" title="Artikel Form" style="display:none">
          </div>

        </div>
      </div>
      <!-- /.card -->

    <!-- DataTables -->
    <script src="{{ asset('be/plugins/datatables/jquery.dataTables.min.js') }}"></script>   
    <script src="{{ asset('be/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('be/plugins/datatables-responsive/js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('be/plugins/datatables-responsive/js/responsive.bootstrap4.min.js') }}"></script>

    <script language="javascript">
    <!--
        function showDialog(){
            $.ajax({
                      method: "POST",
                      url: jsBaseUrl+"beartikel/create",
                      processData: false,
                      contentType: false,
                      data: '', 
                      headers: {
                               }, 
                      beforeSend: function () {
                              },
                      success: function (oData) {
                            if (oData != ""){
                                $("#dialog").html(oData);

                                
                                    $("#dialog").dialog({
                                                        width: 300,
                                                      });
                                

                            }
                          }, 
                      error: function (xhr, ajaxOptions, thrownError) {
                                  
                            }
                      });
        }

        function editForm(id){
            var jForm = new FormData();

            jForm.append('id', id);

            openMainLoading();

            $.ajax({
                      method: "POST",
                      url: jsBaseUrl+"beartikel/edit",
                      processData: false,
                      contentType: false,
                      data: jForm, 
                      headers: {
                               }, 
                      beforeSend: function () {
                              
                              },
                      success: function (oData) {
                            closeMainLoading();

                            if (oData != ""){
                                $("#dialog").html(oData);

                                  $("#dialog").dialog({
                                                        width: 300,
                                                      });
                               
                                
                            }
                          }, 
                      error: function (xhr, ajaxOptions, thrownError) {
                                closeMainLoading();
                            }
                      });
        }

        function deleteForm(id){
            $.confirm({
                    title: "Konfirmasi Hapus Data",
                    content: 'Apakah anda yakin ingin menghapus data ?',
                    buttons: {
                        accept: {
                                    text: 'Ya',
                                    btnClass: 'btn btn-popup',
                                    action: function(){
                                                    doDeleteData(id)
                                            }
                                },
                        decline: {
                                    text: 'Tidak',
                                    btnClass: 'btn btn-popup',
                                    action: function(){
                                              
                                            }
                                }           
                    }
            }); 
        }

        function doDeleteData(id){
            var jForm = new FormData();

            jForm.append('id', id);

            openMainLoading();

            $.ajax({
                      method: "POST",
                      url: jsBaseUrl+"beartikel/delete",
                      processData: false,
                      contentType: false,
                      data: jForm, 
                      headers: {
                               }, 
                      beforeSend: function () {
                              
                              },
                      success: function (oData) {
                            closeMainLoading();

                            if (oData != ""){
                                var oOutput = oData.split("::");

                                if (oOutput[0] == "1"){
                                      $("#dialog").dialog('close');

                                      toastr.success('Data telah terhapus', '');

                                      if ( $.fn.DataTable.isDataTable('#listbeartikels') ) {
                                        $('#listbeartikels').DataTable().destroy();
                                      }
                                      
                                      $('#listbeartikels tbody').empty();
                                      
                                      $("#listbeartikels tbody").html(oOutput[1]);

                                      $('#listbeartikels').DataTable({
                                                                      "paging": true,
                                                                      "lengthChange": false,
                                                                      "searching": true,
                                                                      "ordering": true,
                                                                      "info": true,
                                                                      "autoWidth": false,
                                                                      "responsive": true,
                                                                  });
                                      
                                      
                                  } else {
                                      toastr.error('Data tidak terhapus', '');
                                  }
                              } else {
                                  toastr.error('Data tidak terhapus', '');
                              }                      
                          }, 
                      error: function (xhr, ajaxOptions, thrownError) {
                                    closeMainLoading(); 
                            }
                      });
            
        }

        function saveForm(){
            var jForm = new FormData();
            var formUrl = "";

	          if ($("#title").val() != "" && $("#description").val() != "" && $("#start_date").val() != "" && $("#end_date").val() != ""){
                jForm.append('id', $("#id").val());
                jForm.append('title', $("#title").val());
                jForm.append('description', $("#description").val());
                jForm.append('start_date', $("#start_date").val());
                jForm.append('end_date', $("#end_date").val());
                jForm.append('fileattach', $('#new_image')[0].files[0]);

                openMainLoading();
                
                if ($("input[name='id']").val() == ""){
                    jForm.append('created_by', '1');
                    formUrl = jsBaseUrl+"beartikel/store";
                } else {
                    jForm.append('updated_by', '1');
                    formUrl = jsBaseUrl+"beartikel/update";
                }
    
                $.ajax({
                      method: "POST",
                      url: formUrl,
                      processData: false,
                      contentType: false,
                      data: jForm, 
                      headers: {
                               }, 
                      beforeSend: function () {
                              
                              },
                      success: function (oData) {
                            closeMainLoading();

                            if (oData != ""){
                                var oOutput = oData.split("::");

                                if (oOutput[0] == "1"){
                                      $("#dialog").dialog('close');

                                      toastr.success('Data telah tersimpan', '');

                                      if ( $.fn.DataTable.isDataTable('#listbeartikels') ) {
                                        $('#listbeartikels').DataTable().destroy();
                                      }

                                      $('#listbeartikels tbody').empty();

                                      $("#listbeartikels tbody").html(oOutput[2]);

                                      $('#listbeartikels').DataTable({
                                                                      "paging": true,
                                                                      "lengthChange": false,
                                                                      "searching": true,
                                                                      "ordering": true,
                                                                      "info": true,
                                                                      "autoWidth": false,
                                                                      "responsive": true,
                                                                  });
                                      
                                } else {
                                    if (oOutput[1] != "" || oOutput[1] != " "){
                                        toastr.error(oOutput[1], '');
                                    } else {
                                        toastr.error('Data tidak tersimpan', '');
                                    }
                                }
                            } else {
                                toastr.error('Data tidak tersimpan', '');
                            }                            
                          }, 
                      error: function (xhr, ajaxOptions, thrownError) {
                                  closeMainLoading();

                                  console.log("error");
                            }
                      });

            } else {
                toastr.error('semua field wajib di isi', '');
            }
        }

        function closeForm(){
            $("#dialog").dialog('close');
        }

        $(function() {
                      $('#listbeartikels').DataTable({
                          "paging": true,
                          "lengthChange": false,
                          "searching": true,
                          "ordering": true,
                          "info": true,
                          "autoWidth": false,
                          "responsive": true,
                      });
        });
    //-->
    </script>

    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->

  <style>
      .ui-dialog.ui-corner-all.ui-widget.ui-widget-content.ui-front.ui-draggable.ui-resizable {
        z-index: 5012;
      }
  </style>

  @include('befooter')