@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 bxs-user-account" 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'=>'operator','akses'=>request()->has('access') ? request()->input('access') : null])}} ">Lihat Detail</a>
              </div>
            </div>
          </div>
          <span class="fw-semibold d-block mb-1">Operator</span>
          <h3 class="card-title mb-2">{{$operator}}</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-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;text-align: center;border-collapse: separate;
              border-spacing: 4px; /* Jarak antar sel */
              table-layout: fixed;" 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;text-align: center;border-collapse: separate;
            border-spacing: 4px; /* Jarak antar sel */
            table-layout: fixed;" cellpadding="0" cellspacing="0" border="1">
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
</div>
</div>
<div class="row">
  <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() {
    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]]
    });

    function get_reminder() {
      $.ajax({
        type: "GET",
        url: "{{route('getkamar_dashboardview')}}",
        success: function(response) {
          const lantai1 = response.lantai_1 || [];
          const lantai2 = response.lantai_2 || [];
          const sewa = response.sewa || [];
          let runningText = "";

          let 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;
        const runningTeks = response.sewa || [];
          

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

          function generateTable(data, maxRows = 6) {
            if (data.length === 0) {
              return "<tbody><tr><td colspan='6' class='text-center'>Tidak ada data</td></tr></tbody>";
            }

            let columns = Math.ceil(data.length / maxRows);
            let matrix = Array.from({ length: maxRows }, () => Array(columns).fill(null));

            for (let i = 0; i < data.length; i++) {
              let row = i % maxRows;
              let col = Math.floor(i / maxRows);
              matrix[row][col] = data[i];
            }

            let tableHtml = "<tbody>";
            for (let row = 0; row < maxRows; row++) {
              tableHtml += "<tr>";
              for (let col = 0; col < columns; col++) {
                let item = matrix[row][col];
                if (item) {
                  let bgColor = item.status_kamar === 'Belum Terpakai' ? "#71dd37" : "#ff3e1d";
                  tableHtml += `<td style="background:${bgColor};"><span style="font-size:15px;">${item.nomor_kamar}</span></td>`;
                } else {
                  tableHtml += "<td></td>";
                }
              }
              tableHtml += "</tr>";
            }
            tableHtml += "</tbody>";

            return tableHtml;
          }

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

          $("#myTable").html(generateTable(lantai1, 6));
          $("#myTable2").html(generateTable(lantai2, 6));
          $("#running_text").html(runningText);

          var newData = sewa.map(item => [item.nik, item.tanggal_masuk, item.name, item.nomor_kamar]);

          penyewaanTable.clear();
          penyewaanTable.rows.add(newData);
          penyewaanTable.draw(false);
        },
        error: function(response) {
          console.error("Error get notifikasi:", response);
        },
        complete: function() {
          setTimeout(get_reminder, 8000);
        }
      });
    }

    get_reminder();
  });

</script>
@endsection