<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <!--<link rel="preconnect" href="https://fonts.googleapis.com">-->
    <!--<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>-->
    <!--<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">-->
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="font.css">
    <!-- <link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css"> -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap5.min.css"></link>
    <link rel="icon" href="img/favicon.ico">
    <title>Dashboard | <%= title %></title>
  </head>
  <body>
    <div class="container">
      <div class="row mx-auto">
        <%- include('header') %>
        <div class="col-6 col-lg-4 mx-auto">
          <a class="btn btn-primary" href="/add"><i class="fas fa-plus"></i> Tambah Data</a>
        </div>
        <div class="col-6 col-lg-4 mx-auto">
          <button class="btn btn-danger float-end" id="btnLogout"><i class="fas fa-sign-out-alt"></i> Logout</button>
        </div>
        <div class="col-12 col-lg-10 mt-3 mx-auto">
          <div class="table-responsive">
            <table class="table table-striped" id="tabel">
              <thead>
                <tr>
                  <th scope="col">Kode</th>
                  <th scope="col">Nama</th>
                  <th scope="col">Keterangan</th>
                  <th scope="col" class="sorting_disabled">Aksi</th>
                </tr>
              </thead>
              <tbody>
                <% 
                tanamans.forEach((tanaman) => { %>
                <tr>  
                  <td scope="row"><%= tanaman.kode %></th>
                  <td><%= tanaman.nama %></td>
                  <td><%= tanaman.keterangan %></td>
                  <td class="text-center">
                    <a href="/ubah/<%= tanaman.kode %>" class='btn btn-success badge m-1'><i class="fas fa-edit"></i> Ubah</a>
                    <button class='btn btn-danger badge m-1 confirmation' kode="<%= tanaman.kode %>"><i class="fas fa-trash-alt"></i> Hapus</button>
                  </td>
                </tr>
                <% }) %>
              </tbody>
            </table>
          </div>
        </div>
        <%- include('footer') %>
      </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    <script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap5.min.js"></script>
    <script src="https://cdn.datatables.net/plug-ins/1.10.25/dataRender/ellipsis.js"></script>
    <script>
      $(document).ready(function() {
        $('#tabel').DataTable({
          "aoColumnDefs" : [ {
            "bSortable" : false,
            "aTargets" : [ "sorting_disabled" ]
          } ],
          "language": {
            "lengthMenu": "Menampilkan _MENU_ data per halaman",
            "zeroRecords": "Data tidak ditemukan",
            "info": "Menampilkan halaman _PAGE_ dari _PAGES_",
            "infoEmpty": "Data kosong! Mohon tambah data terlebih dahulu",
            "infoFiltered": "(Disaring dari _MAX_ total data)",
            "search": "Cari data",
            "paginate": {
              "previous": "Sebelumnya",
              "next": "Selanjutnya"
            }
          }
        });
      } );
    </script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.1.2/dist/sweetalert2.all.min.js"></script>
      <% if (typeof msg != 'undefined') {
        if(msg.length !== 0) { %>
          <script>
            Swal.fire(
              'Berhasil',
              '<%= msg %>',
              'success'
            )
          </script>
        <% } 
      }%>
    <script>
      $('.confirmation').on('click', function () {
        const kode = $(this).attr('kode')
        console.log(kode)
        Swal.fire({
          title: `Apakah Anda yakin ingin menghapus ${kode}?`,
          text: "Data yang sudah dihapus tidak dapat dikembalikan lagi!",
          icon: 'warning',
          showCancelButton: true,
          cancelButtonColor: '#d33',
          confirmButtonText: 'Ya, hapus data',
          cancelButtonText: 'Batal'
        }).then((result) => {
          if (result.isConfirmed) {
            window.location.href = `/hapus/${kode}`
          }
        })
      });
      
      $('#btnLogout').on('click', function () {
        Swal.fire({
          title: `Apakah Anda yakin ingin logout?`,
          icon: 'question',
          showCancelButton: true,
          confirmButtonText: 'Ya, logout',
          cancelButtonText: 'Batal'
        }).then((result) => {
          if (result.isConfirmed) {
            window.location.href = `/logout`
          }
        })
      });
    </script>
  </body>
</html>
