@extends('layouts.app')

@section('content')

<div class="content-box">

<div class="d-flex justify-content-between align-items-center mb-4">
<hr>

<div class="alert alert-info">

<b>Informasi</b>

<br><br>

Dashboard ini menampilkan hasil forecasting kebutuhan stok
10 obat penelitian menggunakan algoritma
<b>Long Short-Term Memory (LSTM)</b>.

Nilai rekomendasi stok telah ditambahkan
<b>Safety Stock sebesar 20%</b>
sebagai stok pengaman untuk membantu proses
pengadaan obat pada periode forecast berikutnya.

</div>
<div>
<span class="badge bg-primary p-2">Update : {{ $tanggalForecast ?? '-' }}</span>
</div>
</div>

<div class="row g-4 mb-4">

<div class="col-lg-3 col-md-6 col-sm-12 mb-3">
<div class="dashboard-card bg-primary text-white">
<div class="card-body">
<h6>Jumlah Obat</h6>
<h2>{{ $jumlahObat }}</h2>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6 col-sm-12 mb-3">
<div class="dashboard-card bg-success text-white">
<div class="card-body">
<h6>Total Forecast Mingguan</h6>
<h2>{{ number_format($totalForecast) }}</h2>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6 col-sm-12 mb-3">
<div class="dashboard-card bg-warning">
<div class="card-body">
<h6>Permintaan Tertinggi</h6>
<strong>{{ $forecastTertinggi->nama_obat ?? '-' }}</strong><br>
{{ round($forecastTertinggi->forecast ?? 0) }} Unit
</div>
</div>
</div>

<div class="col-lg-3 col-md-6 col-sm-12 mb-3">
<div class="dashboard-card summary-card-purple">
<div class="card-body">
<h6>Permintaan Terendah</h6>
<strong>{{ $forecastTerendah->nama_obat ?? '-' }}</strong><br>
{{ round($forecastTerendah->forecast ?? 0) }} Unit
</div>
</div>
</div>

</div>

<div class="row">

<div class="col-lg-8">
<div class="card-custom">
<h5>
Grafik Forecast dan Rekomendasi Stok
</h5>

<p class="text-muted">
Periode :
@if($mulaiForecast && $akhirForecast)
    {{ $mulaiForecast->translatedFormat('d F Y') }}
    -
    {{ $akhirForecast->translatedFormat('d F Y') }}
@else
    -
@endif
</p>
<div style="height:350px">

<canvas id="forecastChart"></canvas>

</div>
</div>
<div class="alert alert-light mt-3">

<b>Keterangan Grafik</b>

<ul class="mb-0">

<li>
Forecast merupakan hasil prediksi kebutuhan obat menggunakan model LSTM.
</li>

<li>
Safety Stock dihitung sebesar
<b>20%</b>
dari nilai forecast.
</li>

<li>
Rekomendasi merupakan jumlah stok yang disarankan untuk dipersiapkan.
</li>

</ul>

</div>
</div>

<div class="col-lg-4">
<div class="card-custom">
<h5>Insight Forecast</h5>
<div class="table-responsive">
<table class="table">

<tr>
    <td>Rata-rata Forecast</td>
    <td>{{ round($rataForecast) }} Unit</td>
</tr>

<tr>
    <td>Total Forecast</td>
    <td>{{ number_format($totalForecast) }} Unit</td>
</tr>

<tr>
    <td>Total Rekomendasi</td>
    <td>{{ number_format($totalRekomendasi) }} Unit</td>
</tr>

<tr>
    <td>Periode Forecast</td>
    <td>
        {{ $mulaiForecast->translatedFormat('d F Y') }}
        -
        {{ $akhirForecast->translatedFormat('d F Y') }}
    </td>
</tr>

<tr>
    <td>Status Model</td>
    <td>
        <span class="badge bg-success">
            LSTM Aktif
        </span>
    </td>
</tr>

</table>
</div>
</table>
<hr>
<p class="text-muted">
Dashboard ini menampilkan hasil forecasting 10 obat penelitian menggunakan model LSTM yang telah dilatih.
</p>
</div>
</div>

</div>

<div class="card-custom mt-4">
<h5>

Ringkasan Forecast Periode

{{ $mulaiForecast->translatedFormat('d F Y') }}

-

{{ $akhirForecast->translatedFormat('d F Y') }}

</h5>

<div class="table-responsive">

<table class="table table-hover align-middle">

<thead class="table-dark">

<tr>
<th>No</th>
<th>Nama Obat</th>
<th>Forecast</th>
<th>Safety Stock</th>
<th>Rekomendasi</th>
<th>Status</th>
</tr>

</thead>

<tbody>

@foreach($forecast as $item)

<tr>

<td>{{ $loop->iteration }}</td>

<td>{{ $item->nama_obat }}</td>

<td>{{ round($item->forecast) }}</td>

<td>{{ round($item->forecast*0.2) }}</td>

<td>{{ $item->rekomendasi }}</td>

<td>

<td>

@if($item->forecast > 50)

    <span class="badge bg-danger">
        Permintaan Tinggi
    </span>

@elseif($item->forecast > 20)

    <span class="badge bg-warning text-dark">
        Permintaan Sedang
    </span>

@else

    <span class="badge bg-success">
        Permintaan Rendah
    </span>

@endif

</td>

</td>

</tr>

@endforeach

</tbody>

</table>

</div>

</div>

</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>

new Chart(document.getElementById('forecastChart'),{

type:'bar',

data:{

labels:@json($chartLabels),

datasets:[
{
label:'Forecast',
data:@json($chartForecast)
},
{
label:'Rekomendasi',
data:@json($chartRekomendasi)
}
]

},

options:{
responsive:true,
plugins:{
legend:{position:'bottom'}
},
scales:{
y:{beginAtZero:true}
}
}

});

</script>

@endsection