309 lines
14 KiB
PHP
309 lines
14 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
|
|
|
<title>Ellia Cellular</title>
|
|
<meta content="" name="description">
|
|
<meta content="" name="keywords">
|
|
|
|
<!-- Favicons -->
|
|
<link href="{{ asset('assets/img/favicon.png') }}" rel="icon">
|
|
<link href="{{ asset('assets/img/apple-touch-icon.png') }}" rel="apple-touch-icon">
|
|
|
|
<!-- Google Fonts -->
|
|
<link href="https://fonts.gstatic.com" rel="preconnect">
|
|
<link
|
|
href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Nunito:300,300i,400,400i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i"
|
|
rel="stylesheet">
|
|
|
|
<!-- Tambahkan ini di bagian <head> atau sebelum penutup </body> -->
|
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
|
|
|
|
|
<!-- Vendor CSS Files -->
|
|
<link href="{{ asset('assets/vendor/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">
|
|
<link href="{{ asset('assets/vendor/bootstrap-icons/bootstrap-icons.css') }}" rel="stylesheet">
|
|
<link href="{{ asset('assets/vendor/boxicons/css/boxicons.min.css') }}" rel="stylesheet">
|
|
<link href="{{ asset('assets/vendor/quill/quill.snow.css') }}" rel="stylesheet">
|
|
<link href="{{ asset('assets/vendor/quill/quill.bubble.css') }}" rel="stylesheet">
|
|
<link href="{{ asset('assets/vendor/remixicon/remixicon.css') }}" rel="stylesheet">
|
|
<link href="{{ asset('assets/vendor/simple-datatables/style.css') }}" rel="stylesheet">
|
|
|
|
<!-- Template Main CSS File -->
|
|
<link href="{{ asset('assets/css/style.css') }}" rel="stylesheet">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!-- ======= Header ======= -->
|
|
@include('header')
|
|
<!-- ======= Sidebar ======= -->
|
|
@include('sidebar')
|
|
|
|
<main id="main" class="main">
|
|
<div class="pagetitle">
|
|
<h1>Sampel Data Awal</h1>
|
|
<nav>
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Home</a></li>
|
|
<li class="breadcrumb-item">Data Mining</li>
|
|
<li class="breadcrumb-item">Sampel Data</li>
|
|
</ol>
|
|
</nav>
|
|
</div><!-- End Page Title -->
|
|
|
|
<div class="alert alert-info alert-dismissible fade show" role="alert">
|
|
<strong>Keterangan:</strong>
|
|
<ol class="mb-0 ps-3">
|
|
<li>Sampel Data berfungsi untuk mengumpulkan data penjualan berdasarkan bulanan dan mingguan.</li>
|
|
<li>Klik tombol Ambil Sampel Data kemudian pilih Bulan dan Tahun.</li>
|
|
<li>Klik tombol Reset Sampel Data untuk menghapus sampel data yang ada atau sudah diambil.</li>
|
|
<li>Pilih Brand berfungsi untuk menampilkan sampel data dari brand yang ingin ditampilkan.</li>
|
|
</ol>
|
|
{{-- <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> --}}
|
|
</div>
|
|
|
|
<section class="section">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Sampel Data</h5>
|
|
<div class="mb-1 d-flex align-items-center">
|
|
<form method="GET" action="{{ route('sample.index') }}" class="mb-3">
|
|
<label for="entriesPerBrand" class="form-label">Pilih Brand:</label>
|
|
<select name="brand" id="entriesPerBrand" class="form-select w-auto d-inline"
|
|
onchange="this.form.submit()">
|
|
@foreach ($brands as $b)
|
|
<option value="{{ $b->id }}"
|
|
{{ $brand == $b->id ? 'selected' : '' }}>
|
|
{{ $b->nama_brand }}
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
</form>
|
|
</div>
|
|
<div class="d-flex justify-content-end align-items-center mb-3 gap-2">
|
|
{{-- Tombol Reset Sample Data --}}
|
|
<form action="{{ route('sample.reset') }}" method="POST">
|
|
@csrf
|
|
<button type="submit" class="btn btn-danger">
|
|
Reset Sampel Data
|
|
</button>
|
|
</form>
|
|
|
|
{{-- Tombol Ambil Sample Data --}}
|
|
{{-- <form action="{{ route('sample.generate') }}" method="POST">
|
|
@csrf
|
|
<button type="submit" class="btn btn-success" {{ $hasData ? 'disabled' : '' }}>
|
|
Ambil Sampel Data
|
|
</button>
|
|
</form> --}}
|
|
|
|
<!-- Tombol untuk membuka modal -->
|
|
<button type="button" class="btn btn-success" data-bs-toggle="modal"
|
|
data-bs-target="#ambilSampleModal" {{ $hasData ? 'disabled' : '' }}>
|
|
Ambil Sampel Data
|
|
</button>
|
|
|
|
</div>
|
|
<table class="table table-striped table-bordered" id="sampleTable">
|
|
<thead>
|
|
<tr>
|
|
<th rowspan="2">Bulan & Tahun</th>
|
|
<th colspan="4">Minggu</th>
|
|
</tr>
|
|
<tr>
|
|
<th>Ke-1</th>
|
|
<th>Ke-2</th>
|
|
<th>Ke-3</th>
|
|
<th>Ke-4</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@if ($hasData)
|
|
@foreach ($data as $row)
|
|
<tr>
|
|
<td>{{ $row['bulan'] }}</td>
|
|
@foreach ($row['minggu'] as $nilai)
|
|
<td>{{ $nilai ?? '' }}</td>
|
|
@endforeach
|
|
</tr>
|
|
@endforeach
|
|
@else
|
|
<tr>
|
|
<td colspan="5" class="text-center">Belum ada data yang tersedia.</td>
|
|
</tr>
|
|
@endif
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main><!-- End #main -->
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="ambilSampleModal" tabindex="-1" aria-labelledby="ambilSampleModalLabel"
|
|
aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<form action="{{ route('sample.generate') }}" method="POST">
|
|
@csrf
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="ambilSampleModalLabel">Tentukan Bulan & Tahun</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="alert alert-info alert-dismissible fade show" role="alert">
|
|
<strong>Keterangan:</strong>
|
|
<ol class="mb-0 ps-3">
|
|
<li>Tentukan bulan dan tahun yang akan digunakan untuk memprediksi 1 tahun ke depan selama 4 bulan.
|
|
</li>
|
|
<li>Pilih Bulan dan Tahun maka akan menampilkan sampel data selama 1 tahun berdasarkan
|
|
bulan yang dipilih.</li>
|
|
<li>Klik tombol Ambil Data untuk konfirmasi pengambilan sampel data.</li>
|
|
<li>Klik tombol Batal untuk membatalkan pengambilan sampel data.</li>
|
|
</ol>
|
|
{{-- <button type="button" class="btn-close" data-bs-dismiss="alert"
|
|
aria-label="Close"></button> --}}
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="bulan" class="form-label">Bulan</label>
|
|
<select name="bulan" id="bulan" class="form-select" required>
|
|
@php
|
|
$bulanIndonesia = [
|
|
1 => 'Januari',
|
|
2 => 'Februari',
|
|
3 => 'Maret',
|
|
4 => 'April',
|
|
5 => 'Mei',
|
|
6 => 'Juni',
|
|
7 => 'Juli',
|
|
8 => 'Agustus',
|
|
9 => 'September',
|
|
10 => 'Oktober',
|
|
11 => 'November',
|
|
12 => 'Desember',
|
|
];
|
|
@endphp
|
|
|
|
@foreach ($bulanIndonesia as $key => $nama)
|
|
<option value="{{ $key }}">{{ $nama }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="tahun" class="form-label">Tahun</label>
|
|
<input type="number" name="tahun" id="tahun" class="form-control"
|
|
value="{{ now()->year }}" required min="2000" max="2100">
|
|
</div>
|
|
|
|
<div class="alert alert-info alert-dismissible fade show" role="alert" id="sampelAlert">
|
|
<div><strong>Sampel Data yang akan muncul:</strong></div>
|
|
<div id="sampelText" class="mt-1"></div>
|
|
<div class="mt-2">
|
|
<strong>Untuk memprediksi brand smartphone terlaris:</strong>
|
|
<div id="infoPrediksi" class="mt-1 text-muted"></div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="submit" class="btn btn-primary">Ambil Data</button>
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- ======= Footer ======= -->
|
|
@include('footer')
|
|
|
|
<a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i
|
|
class="bi bi-arrow-up-short"></i></a>
|
|
|
|
<!-- Vendor JS Files -->
|
|
<script src="{{ asset('assets/vendor/apexcharts/apexcharts.min.js') }}"></script>
|
|
<script src="{{ asset('assets/vendor/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
|
|
<script src="{{ asset('assets/vendor/chart.js/chart.umd.js') }}"></script>
|
|
<script src="{{ asset('assets/vendor/echarts/echarts.min.js') }}"></script>
|
|
<script src="{{ asset('assets/vendor/quill/quill.js') }}"></script>
|
|
<script src="{{ asset('assets/vendor/simple-datatables/simple-datatables.js') }}"></script>
|
|
<script src="{{ asset('assets/vendor/tinymce/tinymce.min.js') }}"></script>
|
|
<script src="{{ asset('assets/vendor/php-email-form/validate.js') }}"></script>
|
|
|
|
<!-- Template Main JS File -->
|
|
<script src="{{ asset('assets/js/main.js') }}"></script>
|
|
|
|
<style>
|
|
#sampleTable th,
|
|
#sampleTable td {
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
}
|
|
</style>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
const bulanSelect = document.getElementById('bulan');
|
|
const tahunInput = document.getElementById('tahun');
|
|
const sampelText = document.getElementById('sampelText');
|
|
const infoPrediksi = document.getElementById('infoPrediksi');
|
|
|
|
const bulanMap = {
|
|
1: 'Januari',
|
|
2: 'Februari',
|
|
3: 'Maret',
|
|
4: 'April',
|
|
5: 'Mei',
|
|
6: 'Juni',
|
|
7: 'Juli',
|
|
8: 'Agustus',
|
|
9: 'September',
|
|
10: 'Oktober',
|
|
11: 'November',
|
|
12: 'Desember',
|
|
};
|
|
|
|
function updateSampelText() {
|
|
const bulanAwal = parseInt(bulanSelect.value);
|
|
const tahunAwal = parseInt(tahunInput.value);
|
|
|
|
if (!bulanAwal || !tahunAwal) return;
|
|
|
|
const bulanAkhir = (bulanAwal + 11) % 12 || 12;
|
|
const tahunAkhir = bulanAwal + 11 > 12 ? tahunAwal + 1 : tahunAwal;
|
|
|
|
// Untuk prediksi: bulan setelah 12 bulan sampel
|
|
const bulanPrediksiAwal = (bulanAwal + 12 - 1) % 12 + 1;
|
|
const tahunPrediksiAwal = bulanAwal + 12 > 12 ? tahunAwal + 1 : tahunAwal + Math.floor((bulanAwal + 11) / 12);
|
|
const bulanPrediksiAkhir = (bulanPrediksiAwal + 3 - 1) % 12 + 1;
|
|
const tahunPrediksiAkhir = bulanPrediksiAwal + 3 > 12 ? tahunPrediksiAwal + 1 : tahunPrediksiAwal;
|
|
|
|
sampelText.innerText = `Bulan ${bulanMap[bulanAwal]} ${tahunAwal} - ${bulanMap[bulanAkhir]} ${tahunAkhir}`;
|
|
infoPrediksi.innerText =
|
|
`Bulan ${bulanMap[bulanPrediksiAwal]} ${tahunPrediksiAwal} - ${bulanMap[bulanPrediksiAkhir]} ${tahunPrediksiAkhir}`;
|
|
}
|
|
|
|
bulanSelect.addEventListener('change', updateSampelText);
|
|
tahunInput.addEventListener('input', updateSampelText);
|
|
window.addEventListener('DOMContentLoaded', updateSampelText);
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html>
|