@extends('page/layout/app')

  @section('title','Dashboard')

  @section('content')
  <div class="loading" id="loading" style="display: none;">
    <h4>Loading</h4>
  </div>
  <div class="page-heading">
    <div class="page-title">
      <div class="row">
        <div class="col-12 col-md-6 order-md-1 order-first">
          <a href="{{route('dashboard_view')}}" target="_blank" class="btn btn-sm btn-primary">Dashboard View <i class="fa fa-external-link"></i></a>
        </div>
        <div class="col-12 col-md-6 order-md-2 order-last">
          <nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
            <ol class="breadcrumb">
              <li class="breadcrumb-item"><a href="">Dashboard</a></li>
              <li class="breadcrumb-item active" aria-current="page">Dashboard View Status</li>
            </ol>
          </nav>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-3 mt-2">
        <div class="card">
          <div class="card-body">
            <div class="card-title d-flex align-items-start justify-content-between">
              <div class="avatar flex-shrink-0">
                <i class="bx bx-user" style="font-size: 0.5in;"></i>
              </div>
              <div class="dropdown">
                <button
                class="btn p-0"
                type="button"
                id="cardOpt3"
                data-bs-toggle="dropdown"
                aria-haspopup="true"
                aria-expanded="false"
                >
                <i class="bx bx-dots-vertical-rounded"></i>
              </button>
              <div class="dropdown-menu dropdown-menu-end" aria-labelledby="cardOpt3">
                <a class="dropdown-item" href=" {{route('index.user',['level'=>'penghuni','akses'=>request()->has('access') ? request()->input('access') : null])}} ">Lihat Detail</a>
              </div>
            </div>
          </div>
          <span class="fw-semibold d-block mb-1">Penghuni</span>
          <h3 class="card-title mb-2">{{$penghuni}}</h3>
        </div>
      </div>
    </div>
    <div class="col-lg-3 mt-2">
      <div class="card">
        <div class="card-body">
          <div class="card-title d-flex align-items-start justify-content-between">
            <div class="avatar flex-shrink-0">
              <i class="bx bx-bed" style="font-size: 0.5in;"></i>
            </div>
            <div class="dropdown">
              <button
              class="btn p-0"
              type="button"
              id="cardOpt3"
              data-bs-toggle="dropdown"
              aria-haspopup="true"
              aria-expanded="false"
              >
              <i class="bx bx-dots-vertical-rounded"></i>
            </button>
            <div class="dropdown-menu dropdown-menu-end" aria-labelledby="cardOpt3">
              <a class="dropdown-item" href=" {{route('index.kamar',['akses'=>request()->has('access') ? request()->input('access') : null])}} ">Lihat Detail</a>
            </div>
          </div>
        </div>
        <span class="fw-semibold d-block mb-1">Semua Ranjang</span>
        <h3 class="card-title mb-2">{{$semua_kamar}}</h3>
      </div>
    </div>
  </div>
  <div class="col-lg-3 mt-2">
    <div class="card">
      <div class="card-body">
        <div class="card-title d-flex align-items-start justify-content-between">
          <div class="avatar flex-shrink-0">
            <i class="bx bx-cabinet" style="font-size: 0.5in;"></i>
          </div>
          <div class="dropdown">
            <button
            class="btn p-0"
            type="button"
            id="cardOpt3"
            data-bs-toggle="dropdown"
            aria-haspopup="true"
            aria-expanded="false"
            >
            <i class="bx bx-dots-vertical-rounded"></i>
          </button>
          <div class="dropdown-menu dropdown-menu-end" aria-labelledby="cardOpt3">
            <a class="dropdown-item" href=" {{route('index.fasilitas')}} ">Lihat Detail</a>
          </div>
        </div>
      </div>
      <span class="fw-semibold d-block mb-1">Fasilitas</span>
      <h3 class="card-title mb-2">{{count($fasilitas)}}</h3>
    </div>
  </div>
</div>
<div class="col-lg-3 mt-2">
  <div class="card">
    <div class="card-body">
      <div class="card-title d-flex align-items-start justify-content-between">
        <div class="avatar flex-shrink-0">
          <i class="bx bx-bed" style="font-size: 0.5in;"></i>
        </div>
        <div class="dropdown">
          <button
          class="btn p-0"
          type="button"
          id="cardOpt3"
          data-bs-toggle="dropdown"
          aria-haspopup="true"
          aria-expanded="false"
          >
          <i class="bx bx-dots-vertical-rounded"></i>
        </button>
        <div class="dropdown-menu dropdown-menu-end" aria-labelledby="cardOpt3">
          <a class="dropdown-item" href=" {{route('index.kamar',['keyword'=>'Belum Terpakai'])}} ">Lihat Detail</a>
        </div>
      </div>
    </div>
    <span class="fw-semibold d-block mb-1 {{$warna_text_kamar}}">Ranjang Tersedia</span>
    <h3 class="card-title mb-2 {{$warna_text_kamar}}">{{$kamar_tersedia}}</h3>
  </div>
</div>
</div>
</div>
<div class="row mt-2">
  <div class="col-lg-5">
    <div class="card">
      <div class="card-body">
        <div class="table-responsive">
          <table class="table table-bordered mt-5 text-center" id="penyewaan_table" style="width: 100%;color: #000;" cellpadding="0" cellspacing="0">
            <thead>
              <tr style="font-weight: bold;">
                <td style="text-align: center;">NIP</td>
                <td style="text-align: center;">Tanggal Masuk</td>
                <td style="text-align: center;">Nama Penghuni</td>
                <td style="text-align: center;">No Ranjang</td>
              </tr>
            </thead>
            <tbody id="penyewaan_detail">

            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
  <div class="col-lg-7">
    <div class="card">
      <div class="card-body">
        <div class="row text-center mt-5">
          <div class="col-lg-6">
            <h6 style="color: black;">RANJANG KOSONG ( AVAILABLE )</h6>
            <div class="circle circle-green">
              <h1 style="color: #000;" id="label_green"></h1>
            </div>
          </div>
          <div class="col-lg-6">
            <h6 style="color: black;">RANJANG ISI ( OCCUPIED )</h6>
            <div class="circle circle-red">
              <h1 style="color: #000;" id="label_red"></h1>
            </div>
          </div>
        </div>
        <div class="row mt-5">
          <div class="col-xl-12">
            <h4 style="color: #000;">LANTAI 1</h4>
            <div class="table-responsive">
              <table class="table table-bordered" id="myTable" style="width: 100%;color: #000;" cellpadding="0" cellspacing="0" border="1">
              </table>
            </div>
          </div>
          <div class="col-xl-12 mt-4">
            <h4 style="color: #000;">LANTAI 2</h4>
            <div class="table-responsive">
              <table class="table table-bordered" id="myTable2" style="width: 100%;color: #000;" cellpadding="0" cellspacing="0" border="1">
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="row mt-3">
  <div class="col-xl-12">
    <div class="marquee-container fixed-bottom">
      <marquee id="running_text" class="marquee" direction="left" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="10" behavior="scroll">Memuat informasi...</marquee>
    </div>
  </div>
</div>
</div>
@endsection
@section('css')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">

 .circle {
  width: 200px; /* Ukuran lingkaran */
  height: 200px; /* Ukuran lingkaran */
  border-radius: 50%; /* Membuat lingkaran */
  display: flex; /* Menggunakan flexbox untuk memusatkan konten */
  justify-content: center; /* Memusatkan konten secara horizontal */
  align-items: center; /* Memusatkan konten secara vertikal */
  margin: 20px auto; /* Margin untuk spasi */
}
.circle-green {
  background-color: #71dd37; /* Warna hijau */
  border:3px solid #000;
}
.circle-red {
  background-color: #ff3e1d; /* Warna merah */
  border:3px solid #000;
}
.table-bordered {
  border: 1px solid black !important; /* Tebal dan hitam */
}

.table-bordered td, 
.table-bordered th {
  border: 1px solid black !important; /* Pastikan semua sel memiliki border */
}

.marquee-container {
  width: 100%;
  background: #03c3ec;
  overflow: hidden;
  white-space: nowrap;
  /*position: fixed;*/
  bottom: 0; /* Menempatkan di bagian bawah */
  left: 0; /* Menempatkan di sisi kiri */
  /*padding: 10px 0;*/
}
.marquee {
  display: inline-block;
  padding: 10px; /* Padding untuk marquee */
  color: #eee;
  font-size: 24px;
  font-weight: bold;
  /*animation: marquee 10s linear infinite;*/
}

@keyframes marquee {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}
</style>
@endsection
@section('scripts')
<script>
  $(document).ready(function() {
  // Inisialisasi DataTables hanya sekali
  var penyewaanTable = $('#penyewaan_table').DataTable({
    processing: true,
    pageLength: 10,
    colReorder: true,
    responsive: true,
    searching: true,
    lengthChange: true,
    pageLength: 30,
    lengthMenu: [[30, 100, 200, 300], [30, 100, 200, 300]]
  });

  var available = 0;
  var occupied = 0;
  var total = 0;

  function get_reminder() {
    $.ajax({
      type: "GET",
      url: "{{route('getkamar_dashboardview')}}",
      success: function(response) {
        let tableHtml1 = '<table class="table table-bordered" cellpadding="6" cellspacing="0"><tbody>';
        let tableHtml2 = '<table class="table table-bordered" cellpadding="6" cellspacing="0"><tbody>';
        let runningText = "";

        const lantai1 = response.lantai_1 || [];
        const lantai2 = response.lantai_2 || [];
        const sewa = response.sewa || [];
        const runningTeks = response.sewa || [];

        total = lantai1.length + lantai2.length;
        let terpakai_1 = lantai1.filter(item => item.status_kamar === 'Terpakai').length;
        let terpakai_2 = lantai2.filter(item => item.status_kamar === 'Terpakai').length;

        available = total - (terpakai_1 + terpakai_2);
        occupied = terpakai_1 + terpakai_2;
        $("#label_green").html(available);
        $("#label_red").html(occupied);

        function generateTable(data) {
          let html = "";
          if (data.length === 0) {
            html += "<tr><td colspan='10' class='text-center'>Tidak ada data</td></tr>";
          } else {
            data.forEach((item, index) => {
              if (index % 10 === 0) {
                if (index > 0) html += "</tr>";
                html += "<tr>";
              }
              let bgColor = item.status_kamar === 'Belum Terpakai' ? "#71dd37" : "#ff3e1d";
              html += `<td style="background:${bgColor};"><span style="font-size:15px;">${item.nomor_kamar}</span></td>`;
            });

            if (data.length % 10 !== 0) html += "</tr>";
          }
          return html;
        }

        if (runningTeks.length > 0) {
          runningText = runningTeks.map(value => `${value.nik} | ${value.name} | ${value.nomor_kamar}`).join(" • ");
        } else {
          runningText = "Tidak ada informasi terbaru.";
        }

        tableHtml1 += generateTable(lantai1) + "</tbody></table>";
        tableHtml2 += generateTable(lantai2) + "</tbody></table>";

        $("#myTable").html(tableHtml1);
        $("#myTable2").html(tableHtml2);
        $("#running_text").html(runningText);

        // **PERBAIKAN UTAMA DI SINI**:
        // Ambil data lama dari DataTable
        var existingData = penyewaanTable.rows().data().toArray();

        // Buat data baru untuk dibandingkan
        var newData = sewa.map(item => [item.nik, item.tanggal_masuk, item.name, item.nomor_kamar]);

        // Bandingkan apakah ada perubahan data
        var isDataChanged = JSON.stringify(existingData) !== JSON.stringify(newData);

        if (isDataChanged) {
          penyewaanTable.clear();
          penyewaanTable.rows.add(newData);
          penyewaanTable.draw(false); // Tetap di halaman & pencarian yang sama
        }
      },
      error: function(response) {
        console.error("Error get notifikasi:", response);
      },
      complete: function() {
        setTimeout(get_reminder, 8000);
      }
    });
  }

  get_reminder();
});

</script>
@endsection