@extends('admin.layouts.app')
@section('content')
  <!-- [ breadcrumb ] start -->
  <div class="page-header">
    <div class="page-block">
      <div class="row align-items-center">
        <div class="col-md-12">
          <div class="page-header-title">
            <h5 class="m-b-10">Data Users</h5>
          </div>
          <ul class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('dashboard.index') }}">Home</a></li>
            <li class="breadcrumb-item"><a href="javascript: void(0)">Data Master</a></li>
            <li class="breadcrumb-item" aria-current="page">Data Users</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <!-- [ breadcrumb ] end -->

  <!-- [ Main Content ] start -->
  <div class="row">
    <!-- [ sample-page ] start -->
    <div class="col-sm-12">
      <div class="card">
        <div class="card-header">
          <h5>Tabel Data</h5>
        </div>
        <div class="card-body">
          <table class="table" id="table-data">
            <thead>
              <tr>
                <th>No</th>
                <th>Nama</th>
                <th>Email</th>
                <th>Role</th>
                <th>Dibuat pada</th>
                <th>Aksi</th>
              </tr>
            </thead>
            <tbody></tbody>
          </table>
        </div>
      </div>
    </div>
    <!-- [ sample-page ] end -->
  </div>
  <!-- [ Main Content ] end -->

  <!-- Modal Edit -->
  <div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="exampleModalLabel">Edit Data</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-md-6 my-1">
              <label for="edit_nama_user" class="form-label">Nama User</label>
              <input type="text" class="form-control" id="edit_nama_user" name="edit_nama_user">
            </div>
            <div class="col-md-6 my-1">
              <label for="edit_email" class="form-label">Email</label>
              <input type="text" class="form-control" id="edit_email" name="edit_email">
            </div>
            <div class="col-md-6 my-1">
              <label for="edit_role" class="form-label">Role</label>
              <select class="form-select" name="edit_role" id="edit_role">
                <option value="admin">Admin</option>
                <option value="psikolog">Psikolog</option>
                <option value="user">User</option>
              </select>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
          <button type="button" class="btn btn-primary" onclick="simpanEditData()">Simpan</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Modal Delete -->
  <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="exampleModalLabel">Hapus Data</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          Apakah anda akan menghapus data user dengan nama <span id="delete_nama"></span> ini?
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
          <button type="button" class="btn btn-danger" onclick="hapusData()">Hapus</button>
        </div>
      </div>
    </div>
  </div>
@endsection

@section('script')
  <script>
    let table = null;
    let idEdit = null;
    let idHapus = null;
    $(document).ready(function() {
      table = new DataTable("#table-data", {
        ajax: {
          url: '{{ route('users.fetchData') }}',
        },
        columns: [
          {
            data: null,
            render: function(data, type, row, meta) {
              return meta.row + 1;
            }
          },
          {
            data: 'name'
          },
          {
            data: 'email'
          },
          {
            data: 'role'
          },
          {
            data: null,
            render: function(data, type, row, meta) {
              return data.created_at.split('T')[0]
            }
          },
          {
            data: null,
            render: function(data, type, row, meta) {
              return `
                <div class="btn-group">
                  <button type="button" class="btn btn-info btn-sm rounded-circle mx-1" data-bs-toggle="modal" data-bs-target="#editModal" onclick="getDataEdit(this)" data-id="${data.id}">
                    <i class="ti ti-edit"></i>
                  </button>
                  <button class="btn btn-sm btn-danger delete-btn rounded-circle mx-1" data-bs-toggle="modal" data-bs-target="#deleteModal" onclick="getDataHapus(this)" data-id="${data.id}">
                    <i class="ti ti-trash"></i>
                  </button>
                </div>
              `;
            }
          }
        ]
      });
    });
    function fetchRowData() {
      table.ajax.reload(null, false);
    }

    function getDataEdit(btn) {
      idEdit = btn.getAttribute('data-id');
      let urlEdit = '{{ route('users.edit', ['__ID__']) }}';

      $.get(urlEdit.replace('__ID__', idEdit), function(data, status) {
        if(data.status) {
          $('#edit_nama_user').val(data.data.name);
          $('#edit_email').val(data.data.email);
          $('#edit_role').val(data.data.role);
        }
      });
    }

    function getDataHapus(btn) {
      idHapus = btn.getAttribute('data-id');
      let urlShow = '{{ route('users.show', ['__ID__']) }}';
      $.get(urlShow.replace('__ID__', idHapus), function(data, status) {
        if(data.status) {
          $('#delete_nama').html(data.data.name);
        }
      });
    }

    function simpanEditData() {
      if(idEdit != null) {
        let urlUpdate = '{{ route('users.update', ['__ID__']) }}';
        $.post(urlUpdate.replace('__ID__', idEdit), {
          '_token': document.getElementById('_token').getAttribute('value'),
          '_method': 'PUT',
          'name': $('#edit_nama_user').val(),
          'email': $('#edit_email').val(),
          'role': $('#edit_role').val()
        }, function(data, status) {
          if(data.status) {
            $('#editModal').modal('hide');
            Swal.fire({
              title: "Info",
              text: "Data berhasil ditambahkan!",
              icon: "success"
            });
            fetchRowData();
            idEdit = null;
          }
        });
      }
    }

    function hapusData() {
      if(idHapus != null) {
        let urlHapus = '{{ route('users.destroy', ['__ID__']) }}';
        $.post(urlHapus.replace('__ID__', idHapus), {
          '_token': document.getElementById('_token').getAttribute('value'),
          '_method': 'DELETE'
        }, function(data, status) {
          if(data.status) {
            $('#deleteModal').modal('hide');
            Swal.fire({
              title: "Info",
              text: "Data berhasil dihapus!",
              icon: "success"
            });
            fetchRowData();
            idHapus = null;
          }
        });
      }
    }
  </script>
@endsection