<!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>
