<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Data Antrian Pasien</title>
  <!-- Favicon -->
  <link rel="shortcut icon" href="{{url('design/img/svg/Logo_Original.png')}}">
  <!-- Bootstrap -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <!-- Custom styles -->
  <link rel="stylesheet" href="{{url('design/css/style.min.css')}}">
  <link rel="stylesheet" href="{{url('design/fonts/stylesheet.css')}}">
  <!-- Fontawesome -->
  <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" />
  <!-- Project Style -->
  <link rel="stylesheet" href="{{url('design/css/project-style.css')}}">
  <!-- <meta name="csrf-token" content="{{ csrf_token() }}"> -->

</head>

<body>
  <div class="layer"></div>
  <!-- ! Body -->
  <div class="page-flex">
    <!-- ! Sidebar -->
    @include('component.sidebar')
    <div class="main-wrapper">
      <!-- ! Main nav -->
      @include('component.navbar')
      <!-- ! Main -->
      <main class="main users chart-page">
        <div class="container">
          <h2 class="main-title">Data Antrian Pasien</h2>
          <div class="row justify-content-center">
            <div class="col-md-10">
              <div id="app" class="white-block position-relative">
                <div class="preloader">
                  <div class="loading">
                    <div class="spinner-border" role="status">
                      <span class="sr-only">Loading...</span>
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col-6">
                    <p class="stat-cards-info__num mb-3" style="font-size: 22px;">Data Antrian Pasien</p>
                  </div>
                  <div class="col-6">
                    <div class="search-wrapper float-end">
                      <i data-feather="search" aria-hidden="true"></i>
                      <input type="text" class="search_bar" v-model="search" placeholder="Cari" required>
                    </div>
                  </div>
                </div>
                <table class="table table-striped table-hover" id="data-antrian">
                  <thead>
                    <tr>
                      <th style="width: 15%;">No. Antrian</th>
                      <th scope="col">Nama</th>
                      <th style="width: 15%;">Umur</th>
                      <th style="width: 25%;">Aksi</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr class="align-middle" v-for="(row, index) in rows" :key="row.a_id">
                      <th scope="row">
                        @{{index + 1}}
                      </th>
                      <td>
                        @{{row['dp_nama']}}
                      </td>
                      <td>
                        @{{row['usia']}}
                      </td>
                      <td style="height: 60px">
                        <label class="switch">
                          <input type="checkbox" v-if="row.a_status === 'Antri'" data-toggle="toggle" v-on:click="updateAntrian(row.a_id, row.a_status)">
                          <input type="checkbox" checked v-if="row.a_status === 'Skip'" data-toggle="toggle" v-on:click="updateAntrian(row.a_id, row.a_status)">
                          <div class="slider round"></div>
                        </label>
                        <a v-bind:href="`{{url('penangananPasien')}}/${ row.a_id }`" type="button" class="btn btn-success">Selesai</a>
                        <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#deleteModal" @click="deleteData(row, index)">Hapus</button>
                      </td>
                    </tr>
                  </tbody>
                </table>

                <!-- modal -->
                <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
                  <div class="modal-dialog">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h5 class="modal-title" id="deleteModalLabel">Hapus Data Antrian</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                      </div>
                      <div class="modal-body">
                        <div class="mb-3">
                          <p>No. Antrian</p>
                          <h5 v-html="no_antrian"></h5>
                        </div>
                        <div class="mb-3">
                          <p>No. Rekam Medis</p>
                          <h5 v-html="no_rm"></h5>
                        </div>
                        <div class="mb-3">
                          <p>Nama</p>
                          <h5 v-html="nama"></h5>
                        </div>
                        <div class="mb-3">
                          <p>Tahun</p>
                          <h5 v-html="usia"> </h5>
                        </div>
                        <div class="mb-3">
                          <p>Alamat</p>
                          <h5 v-html="alamat"></h5>
                        </div>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-small btn-danger" data-bs-dismiss="modal" v-on:click="delData(this.id)">Hapus</button>
                      </div>
                    </div>
                  </div>
                </div>

              </div>
            </div>
          </div>
        </div>
      </main>
      <!-- ! Footer -->
      @include('component.footer')
    </div>
  </div>

  <!-- jQuery -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <!-- Bootstrap -->
  <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.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/js/bootstrap4-toggle.min.js"></script>
  <!-- Chart library -->
  <script src="{{url('design/plugins/chart.min.js')}}"></script>
  <!-- Icons library -->
  <script src="{{url('design/plugins/feather.min.js')}}"></script>
  <!-- Custom scripts -->
  <script src="{{url('design/js/script.js')}}"></script>

  <!-- Vue.JS -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

  <!-- Notiflix -->
  <script src="https://cdn.jsdelivr.net/npm/notiflix@3.0.1/dist/notiflix-aio-3.0.1.min.js"></script>

  <script>
    $("#antrian").addClass("intro");

    $(document).ready(function() {
      $(".preloader").fadeOut(400);
    });
  </script>

  <script>
    let url = '{{url("antrianDelete")}}';

    new Vue({
      el: '#app',
      data: () => ({
        search: null,
        column: null,
        modal: null,
        data: null,
        id: null,
        no_antrian: null,
        nama: null,
        usia: null,
        no_rm: null,
        alamat: null,
        items: [],
        total: null
      }),
      computed: {
        rows: function() {
          let result = this.items
          if (!this.search)
            return result

          const search = this.search.toLowerCase()

          const filter = event =>
            event.dp_nama.toLowerCase().includes(search) ||
            event.usia.toLowerCase().includes(search)

          return result.filter(filter)
        }
      },
      methods: {
        deleteData: function(row, index) {
          this.id = row.a_id;
          this.no_antrian = index + 1;
          this.no_rm = row.dp_no_rm;
          this.nama = row.dp_nama;
          this.usia = row.usia;
          this.alamat = row.dp_alamat;
        },
        updateAntrian: function(id, status) {
          if (status == "Antri") {
            let formData = {
              'a_status': "Skip",
            };
            axios.put('{{url("updateStatusAntrian")}}/' + id, formData)
            this.upDate;
          } else {
            let formData = {
              'a_status': "Antri",
            };
            axios.put('{{url("updateStatusAntrian")}}/' + id, formData)
            this.upDate;
          }
        },
        delData: function(id) {
          axios.delete('{{url("antrianDelete")}}/' + this.id);
          Notiflix.Notify.success('Data berhasil dihapus', {
            useFontAwesome: true,
            fontSize: "15px",
            borderRadius: "10px",
          });
          this.upDate;
        },
        upDate: function() {
          axios.get('{{url("antrian/data")}}')
            .then(response => this.items = response.data['data'])
        }
      },
      mounted() {
        this.upDate();
        this.timer = setInterval(this.upDate, 1000);
      }
    })
  </script>

  @include('component.notif')

</body>

</html>