<?= $this->extend('layout/template') ?>
<?= $this->section('content') ?>

<style>

.visitor-page{
    padding:15px;
}

/* CARD UTAMA */
.visitor-card{
    border:none;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 8px 25px rgba(0,0,0,.08);
}


/* HEADER */
.visitor-header{
    background:linear-gradient(135deg,#007bff,#0056b3);
    padding:25px;
    color:white;
}

.header-content{
    display:flex;
    align-items:center;
    gap:18px;
}

.header-icon{
    width:60px;
    height:60px;
    background:rgba(255,255,255,.2);
    border-radius:15px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
}

.header-title h3{
    margin:0;
    font-weight:700;
}

.header-title p{
    margin:5px 0 0;
    opacity:.9;
}


/* BODY */
.visitor-body{
    padding:25px;
}


/* FILTER */
.filter-card{

    background:#f8faff;
    border-radius:15px;
    padding:22px;
    margin-bottom:25px;
    border:1px solid #e6ecf5;

}


.filter-title{

    display:flex;
    align-items:center;
    gap:12px;
    font-weight:700;
    font-size:18px;
    margin-bottom:20px;

}


.filter-title-icon{

    width:38px;
    height:38px;
    background:#007bff;
    color:white;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;

}


.filter-label{

    font-weight:600;
    margin-bottom:8px;
    display:block;
    color:#444;

}


.date-input{

    height:45px;
    border-radius:10px;

}


.btn-laporan{

    width:100%;
    height:45px;
    border-radius:10px;
    font-weight:600;

}


/* SUMMARY */

.summary-card{

    background:linear-gradient(135deg,#f1f8ff,#ffffff);
    border-radius:15px;
    padding:20px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:25px;
    border-left:5px solid #007bff;

}


.summary-left{

    display:flex;
    align-items:center;
    gap:15px;

}


.summary-icon{

    width:55px;
    height:55px;
    background:#007bff;
    color:white;
    border-radius:15px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:25px;

}


.summary-label{

    color:#666;
    font-size:14px;

}


.summary-number{

    font-size:28px;
    font-weight:700;
    color:#007bff;

}


.summary-period{

    color:#777;
    font-size:14px;

}



/* TABLE */

.table-wrapper{

    background:white;
    border-radius:15px;
    padding:10px;
    overflow:hidden;

}


.table-laporan{

    margin:0;

}


.table-laporan thead th{

    background:#007bff;
    color:white;
    border:none;
    padding:15px;
    font-size:14px;

}


.table-laporan tbody td{

    vertical-align:middle;
    padding:15px;

}


.table-laporan tbody tr:hover{

    background:#f8fbff;

}



.no-column{

    text-align:center;
    width:70px;

}


.number-circle{

    width:35px;
    height:35px;
    background:#007bff;
    color:white;
    border-radius:50%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-weight:bold;

}



/* TANGGAL */

.date-wrapper{

    display:flex;
    align-items:center;
    gap:10px;

}


.date-icon{

    width:35px;
    height:35px;
    background:#e8f2ff;
    color:#007bff;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;

}


.date-text{

    font-weight:600;

}



/* JUMLAH */

.visitor-count{

    background:#e9fff2;
    color:#198754;
    padding:8px 14px;
    border-radius:20px;
    font-weight:600;

}


/* NAMA */

.name-list{

    display:flex;
    flex-wrap:wrap;
    gap:8px;

}


.name-chip{

    background:#f1f3f5;
    padding:7px 12px;
    border-radius:20px;
    font-size:13px;
    display:inline-flex;
    align-items:center;
    gap:6px;

}



/* FOOTER TOTAL */

.total-label{

    font-weight:bold;
    text-align:right;

}


.total-badge{

    background:#007bff;
    color:white;
    padding:10px 18px;
    border-radius:20px;
    font-weight:bold;

}



/* EMPTY */

.empty-box{

    text-align:center;
    padding:50px;

}


.empty-icon{

    font-size:50px;
    color:#ccc;

}


.empty-box h6{

    margin-top:15px;
    font-size:20px;

}



/* RESPONSIVE */

@media(max-width:768px){

.summary-card{

    flex-direction:column;
    align-items:flex-start;
    gap:15px;

}

.header-title h3{

    font-size:20px;

}

}

</style>


<div class="visitor-page">


<div class="card visitor-card">


<!-- HEADER -->

<div class="visitor-header">

<div class="header-content">

<div class="header-icon">
<i class="fas fa-users"></i>
</div>


<div class="header-title">

<h3>Laporan Pengunjung Per Hari</h3>

<p>
Rekapitulasi data pengunjung perpustakaan berdasarkan tanggal
</p>

</div>

</div>

</div>



<div class="visitor-body">


<?php

$total = 0;

foreach($pengunjung as $p){

    $total += $p['total_pengunjung'];

}

?>



<!-- FILTER -->

<div class="filter-card">


<div class="filter-title">

<div class="filter-title-icon">
<i class="fas fa-filter"></i>
</div>

Filter Periode Laporan

</div>



<form method="get" action="<?= base_url('laporan/pengunjung') ?>">


<div class="row align-items-end">


<div class="col-lg-4 mb-3">

<label class="filter-label">
<i class="far fa-calendar-alt"></i>
Tanggal Mulai
</label>

<input type="date"
name="awal"
class="form-control date-input"
value="<?= $awal ?>">


</div>




<div class="col-lg-4 mb-3">

<label class="filter-label">
<i class="far fa-calendar-alt"></i>
Tanggal Akhir
</label>

<input type="date"
name="akhir"
class="form-control date-input"
value="<?= $akhir ?>">


</div>



<div class="col-lg-4 mb-3">

<button class="btn btn-primary btn-laporan">

<i class="fas fa-search"></i>
Tampilkan Laporan

</button>

</div>


</div>


</form>


</div>





<!-- SUMMARY -->


<div class="summary-card">


<div class="summary-left">


<div class="summary-icon">

<i class="fas fa-user-friends"></i>

</div>


<div>

<span class="summary-label">
Total Pengunjung Periode Ini
</span>


<div class="summary-number">

<?= $total ?> Orang

</div>


</div>


</div>


<div class="summary-period">

<i class="far fa-calendar-alt"></i>

Data berdasarkan periode dipilih

</div>


</div>






<?php if(!empty($pengunjung)): ?>


<div class="table-wrapper">


<table id="tabelPengunjung"
class="table table-hover table-laporan">


<thead>

<tr>

<th>No</th>

<th>Tanggal</th>

<th class="text-center">
Jumlah
</th>

<th>
Daftar Nama Pengunjung
</th>

</tr>

</thead>



<tbody>


<?php $no=1; ?>

<?php foreach($pengunjung as $p): ?>


<tr>


<td class="no-column">

<span class="number-circle">

<?= $no++ ?>

</span>

</td>




<td>

<div class="date-wrapper">

<div class="date-icon">

<i class="far fa-calendar-alt"></i>

</div>


<?= date('d-m-Y',strtotime($p['tanggal'])) ?>


</div>

</td>




<td class="text-center">


<span class="visitor-count">

<i class="fas fa-users"></i>

<?= $p['total_pengunjung'] ?> Orang


</span>


</td>




<td>


<?php if(!empty($p['daftar_nama'])): ?>


<div class="name-list">


<?php foreach(explode(',',$p['daftar_nama']) as $nama): ?>


<span class="name-chip">

<i class="fas fa-user"></i>

<?= esc(trim($nama)) ?>

</span>


<?php endforeach; ?>


</div>


<?php else: ?>


<span class="text-muted">
Tidak ada data nama
</span>


<?php endif; ?>


</td>


</tr>


<?php endforeach; ?>


</tbody>




<tfoot>

<tr>


<td colspan="2"
class="total-label">

Total Pengunjung

</td>



<td class="text-center">


<span class="total-badge">

<i class="fas fa-users"></i>

<?= $total ?> Orang


</span>


</td>


<td></td>


</tr>


</tfoot>



</table>


</div>



<?php else: ?>


<div class="empty-box">


<div class="empty-icon">

<i class="fas fa-user-slash"></i>

</div>


<h6>
Belum Ada Data Pengunjung
</h6>


<p>
Tidak ditemukan data pengunjung pada periode tanggal yang dipilih.
</p>


</div>



<?php endif; ?>



</div>


</div>


</div>




<script>

$(document).ready(function(){

$('#tabelPengunjung').DataTable({

responsive:true,

pageLength:10,

lengthMenu:[
[10,25,50,-1],
[10,25,50,"Semua"]
],

language:{

search:"Cari:",

searchPlaceholder:"Cari nama pengunjung...",

lengthMenu:"Tampilkan _MENU_ data",

info:"Menampilkan _START_ sampai _END_ dari _TOTAL_ data",

zeroRecords:"Data tidak ditemukan",

paginate:{

next:"›",

previous:"‹"

}

},


columnDefs:[

{

orderable:false,

targets:[0,2,3]

}

]


});


});


</script>


<?= $this->endSection() ?>