@extends('user.layout.main')

@section('title', 'Pusat Bantuan - PeGas')

@section('content')
    <div class="container-fluid py-4">
        <div class="card shadow mb-4 border-0 bg-primary text-white overflow-hidden">
            <div class="card-body p-0">
                <div class="row no-gutters align-items-center">
                    <div class="col-lg-8 p-5">
                        <h1 class="display-5 fw-bold font-weight-bold">Pusat Bantuan & Dukungan</h1>
                        <p class="lead mb-0">Temukan panduan penggunaan sistem atau hubungi admin jika mengalami kendala.</p>
                    </div>
                    <div class="col-lg-4 text-right pr-5 d-none d-lg-block">
                        <i class="fas fa-headset fa-8x opacity-25"></i>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-xl-7 col-lg-6 mb-4">
                <div class="card shadow h-100">
                    <div class="card-header py-3 bg-white border-bottom">
                        <h5 class="m-0 font-weight-bold text-primary">
                            <i class="fas fa-book-open mr-2"></i> Panduan Penggunaan Sistem
                        </h5>
                    </div>
                    <div class="card-body p-4">
                        <div class="accordion" id="accordionPanduan">
                            <div class="card border-bottom mb-2">
                                <div class="card-header p-0 bg-white" id="headingZero">
                                    <button
                                        class="btn btn-link btn-block text-left p-3 text-decoration-none font-weight-bold"
                                        type="button" data-toggle="collapse" data-target="#collapseZero">
                                        1. Mengenal Sistem PeGas
                                    </button>
                                </div>
                                <div id="collapseZero" class="collapse show" data-parent="#accordionPanduan">
                                    <div class="card-body text-gray-700">
                                        <p><b>PeGas (Prediksi Gas)</b> adalah sistem yang dirancang khusus untuk pangkalan
                                            LPG guna membantu merencanakan stok LPG 3 Kg menggunakan kecerdasan buatan
                                            (<b>Machine Learning</b>). Sistem ini memanfaatkan data historis penjualan untuk
                                            menghasilkan prediksi jumlah stok yang diperlukan dalam periode tertentu di masa
                                            depan.</p>
                                    </div>
                                </div>
                            </div>

                            <div class="card border-bottom mb-2">
                                <div class="card-header p-0 bg-white" id="headingOne">
                                    <button
                                        class="btn btn-link btn-block text-left p-3 text-decoration-none collapsed font-weight-bold"
                                        type="button" data-toggle="collapse" data-target="#collapseOne">
                                        2. Penjelasan Menu & Fitur
                                    </button>
                                </div>
                                <div id="collapseOne" class="collapse" data-parent="#accordionPanduan">
                                    <div class="card-body text-gray-700">
                                        <ul class="pl-3">
                                            <li class="mb-3"><b>Profile dan logout:</b> Berada di pojok kanan atas, klik
                                                logo di pojok kanan atas, lalu terdapat dua opsi, pertama profile yaitu menu
                                                dimana Anda dapat mengelola informasi pribadi dan preferensi akun. kedua
                                                logout untuk mengakhiri sesi dan keluar dari sistem. Untuk Instruksi lebih detail ditunjukkan oleh panah pada gambar</li>
                                            <img src="{{ asset('img/panduan/menu-profile1.jpg') }}"
                                                class="img-fluid rounded shadow-sm border mt-2" alt="Menu PeGas">
                                            <img src="{{ asset('img/panduan/menu-profile2.jpg') }}"
                                                class="img-fluid rounded shadow-sm border mt-2" alt="Menu PeGas">
                                            <img src="{{ asset('img/panduan/menu-profile3.jpg') }}"
                                                class="img-fluid rounded shadow-sm border mt-2" alt="Menu PeGas">
                                            <li class="mb-3"><b>Dashboard:</b> Ringkasan cepat penjualan, saran stok, dan
                                                grafik tren.</li>
                                            <img src="{{ asset('img/panduan/menu-dashboard.jpg') }}"
                                                class="img-fluid rounded shadow-sm border mt-2" alt="Menu PeGas">
                                            <li class="mb-3"><b>Master Data:</b> Tempat untuk inputan data penjualan yang
                                                digunakan dalam proses prediksi. menu ini penting untuk bisa melakukan
                                                sebuah prediksi.</li>
                                            <img src="{{ asset('img/panduan/menu-master-data.jpg') }}"
                                                class="img-fluid rounded shadow-sm border mt-2" alt="Menu PeGas">
                                            <li class="mb-3"><b>Prediksi:</b> Inti sistem untuk menghitung estimasi stok
                                                masa depan.</li>
                                            <img src="{{ asset('img/panduan/menu-prediksi.jpg') }}"
                                                class="img-fluid rounded shadow-sm border mt-2" alt="Menu PeGas">
                                            <li class="mb-3"><b>Riwayat:</b> Menyimpan hasil prediksi dalam format
                                                bulanan/Excel.</li>
                                            <img src="{{ asset('img/panduan/menu-riwayat.jpg') }}"
                                                class="img-fluid rounded shadow-sm border mt-2" alt="Menu PeGas">
                                            <li><b>Bantuan:</b> Layanan bantuan kendala teknis.</li>
                                            <img src="{{ asset('img/panduan/menu-bantuan.jpg') }}"
                                                class="img-fluid rounded shadow-sm border mt-2" alt="Menu PeGas">
                                        </ul>
                                    </div>
                                </div>
                            </div>

                            <div class="card border-bottom mb-2">
                                <div class="card-header p-0 bg-white" id="headingMaster">
                                    <button
                                        class="btn btn-link btn-block text-left p-3 text-decoration-none collapsed font-weight-bold"
                                        type="button" data-toggle="collapse" data-target="#collapseMaster">
                                        3. Cara Mengelola Master Data Penjualan
                                    </button>
                                </div>
                                <div id="collapseMaster" class="collapse" data-parent="#accordionPanduan">
                                    <div class="card-body text-gray-700">
                                        <p>Master data penjualan merupakan bahan utama dalam proses prediksi stok. Data
                                            penjualan digunakan untuk bisa memproses prediksi jumlah stok. Data yang
                                            diinputan minimal 1 tahun atau 365 hari.</p>
                                        <p>Berikut cara input data penjualan untuk prediksi:</p>
                                        <ul class="pl-3">
                                            <li class="mb-2"><b>Tambah Manual:</b> Masukkan jumlah tabung setiap hari
                                                (Minggu diisi 0). Untuk instruksi Lebih lanjut, ditunjukkan oleh panah pada gambar</li>
                                            <img src="{{ asset('img/panduan/master-data-manual6.jpg') }}"
                                                class="img-fluid rounded shadow-sm border mt-2" alt="Input Master Data">
                                            <img src="{{ asset('img/panduan/master-data-manual4.jpg') }}"
                                                class="img-fluid rounded shadow-sm border mt-2" alt="Input Master Data">
                                            <img src="{{ asset('img/panduan/master-data-manual5.jpg') }}"
                                                class="img-fluid rounded shadow-sm border mt-2" alt="Input Master Data">
                                            <li class="mb-2"><b>Import Excel:</b> Gunakan untuk input data dalam jumlah
                                                besar. pilih file excel dengan header sesuai ketentuan. Untuk instruksi Lebih lanjut, ditunjukkan oleh panah pada gambar</li>
                                            <img src="{{ asset('img/panduan/master-data-import2.jpg') }}"
                                                class="img-fluid rounded shadow-sm border mt-2" alt="Input Master Data">
                                            <img src="{{ asset('img/panduan/master-data-import.jpg') }}"
                                                class="img-fluid rounded shadow-sm border mt-2" alt="Input Master Data">
                                            <li><b>Verifikasi:</b> Klik siapkan agar status akun menjadi "Terverifikasi".
                                                Ini digunakan agar data siap dilakukan prediksi. Untuk instruksi Lebih lanjut, ditunjukkan oleh panah pada gambar</li>
                                            <img src="{{ asset('img/panduan/siapkan-prediksi.jpg') }}"
                                                class="img-fluid rounded shadow-sm border mt-2" alt="Input Master Data">
                                            <img src="{{ asset('img/panduan/master-data-verifikasi.jpg') }}"
                                                class="img-fluid rounded shadow-sm border mt-2" alt="Input Master Data">
                                            <li><b>Edit & Hapus Data Per Bulan:</b> Klik icon mata Untuk melihat detail data dan merubahnya jika ingin dirubah. Klik icon sampah untuk menghapus data per bulan. Untuk instruksi Lebih lanjut, ditunjukkan oleh panah pada gambar</li>
                                            <img src="{{ asset('img/panduan/edit-master-data.jpg') }}"
                                                class="img-fluid rounded shadow-sm border mt-2" alt="Input Master Data">
                                            <img src="{{ asset('img/panduan/edit-master-data2.jpg') }}"
                                                class="img-fluid rounded shadow-sm border mt-2" alt="Input Master Data">
                                            <li><b class="text-danger">Hapus Semua Data:</b> Hapus semua data jika ingin mengosongkan data yang sudah tersimpan. <b>Hati-hati saat menghapus semuadata!. Karena data yang terhapus tidak dapat kembali. anda harus mengisinya kembali</b></li>
                                            <img src="{{ asset('img/panduan/hapus-semua-data.jpg') }}"
                                                class="img-fluid rounded shadow-sm border mt-2" alt="Input Master Data">
                                        </ul>
                                    </div>
                                </div>
                            </div>

                            <div class="card border-bottom mb-2">
                                <div class="card-header p-0 bg-white" id="headingTwo">
                                    <button
                                        class="btn btn-link btn-block text-left p-3 text-decoration-none collapsed font-weight-bold"
                                        type="button" data-toggle="collapse" data-target="#collapseTwo">
                                        4. Cara Melakukan Prediksi jumlah Stok
                                    </button>
                                </div>
                                <div id="collapseTwo" class="collapse" data-parent="#accordionPanduan">
                                    <div class="card-body text-gray-700">
                                        <ol class="pl-3">
                                            <li>Masuk ke menu <b>Prediksi</b>.</li>
                                            <li>Klik tombol <b>"Lakukan Prediksi Baru"</b>. Untuk instruksi Lebih lanjut, ditunjukkan oleh panah pada gambar</li>
                                            <img src="{{ asset('img/panduan/prediksi-baru2.jpg') }}"
                                                class="img-fluid rounded shadow-sm border mt-2" alt="Langkah Prediksi">
                                            <img src="{{ asset('img/panduan/prediksi-baru.jpg') }}"
                                                class="img-fluid rounded shadow-sm border mt-2" alt="Langkah Prediksi">
                                            <li>hasil prediksi bisa dilihat pada chart dan tabel. Untuk instruksi Lebih lanjut, ditunjukkan oleh panah pada gambar</li>
                                            <li>Untuk chart bisa dipilih berdasarkan rentang waktu. Untuk instruksi Lebih lanjut, ditunjukkan oleh panah pada gambar</li>
                                            <img src="{{ asset('img/panduan/prediksi-hasil1.jpg') }}"
                                                class="img-fluid rounded shadow-sm border mt-2" alt="Langkah Prediksi">
                                            <li>Untuk tabel bisa ditampilkan berdasarkan filter tertentu. Untuk instruksi Lebih lanjut, ditunjukkan oleh panah pada gambar</li>
                                            <img src="{{ asset('img/panduan/prediksi-hasil2.jpg') }}"
                                                class="img-fluid rounded shadow-sm border mt-2" alt="Langkah Prediksi">
                                        </ol>
                                    </div>
                                </div>
                            </div>

                            <div class="card border-bottom mb-2">
                                <div class="card-header p-0 bg-white" id="headingThree">
                                    <button
                                        class="btn btn-link btn-block text-left p-3 text-decoration-none collapsed font-weight-bold"
                                        type="button" data-toggle="collapse" data-target="#collapseThree">
                                        5. Cara Menyimpan & Mengunduh Laporan
                                    </button>
                                </div>
                                <div id="collapseThree" class="collapse" data-parent="#accordionPanduan">
                                    <div class="card-body text-gray-700">
                                        <ol class="pl-3">
                                            <li>Buka menu <b>Riwayat</b>.</li>
                                            <li>Hasil prediksi sudah terbagi berdasarkan per bulan selama 180 hari. hasil
                                                prediksi juga bisa di download dengan klik tombol <b>Excel</b> dengan format
                                                excel dan sudah dibagi otomatis per bulan.</li>
                                            <li>Klik tombol <b>Excel</b> pada bulan yang diinginkan.</li>
                                            <li class="text-danger font-weight-bold">Terdapat tombol hapus untuk
                                                membersihkan hasil prediksi lama.</li>
                                            <li>Untuk instruksi Lebih lanjut, ditunjukkan oleh panah pada gambar</li>
                                            <img src="{{ asset('img/panduan/riwayat.jpg') }}"
                                                class="img-fluid rounded shadow-sm border mt-2" alt="Unduh Laporan">
                                        </ol>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-5 col-lg-6 mb-4">
                <div class="card shadow h-100">
                    <div class="card-header py-3 bg-white border-bottom d-flex justify-content-between align-items-center">
                        <h5 class="m-0 font-weight-bold text-dark">Riwayat Tiket Bantuan</h5>
                        <div>
                            <button type="button" class="btn btn-sm btn-light border shadow-sm mr-2"
                                onclick="location.reload()">
                                <i class="fas fa-sync-alt"></i>
                            </button>
                            <button class="btn btn-sm btn-primary shadow-sm" data-toggle="modal"
                                data-target="#modalBantuan">
                                <i class="fas fa-plus fa-sm text-white mr-1"></i> Buat Tiket
                            </button>
                        </div>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-hover mb-0">
                                <thead class="bg-gray-100">
                                    <tr>
                                        <th class="border-0 px-4 py-3" style="width: 70%">Pesan</th>
                                        <th class="border-0 px-4 py-3 text-center">Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($helpdesks as $item)
                                        <tr>
                                            <td class="px-4 py-3">
                                                <div class="small text-gray-500 mb-1"><i
                                                        class="far fa-calendar-alt mr-1"></i>
                                                    {{ $item->created_at->format('d M Y') }}</div>
                                                <div class="font-weight-bold text-dark">
                                                    {{ Str::limit($item->message, 50) }}</div>

                                                @if ($item->reply)
                                                    <div class="mt-2">
                                                        <button
                                                            class="btn btn-sm btn-outline-primary rounded-pill px-3 py-0"
                                                            style="font-size: 0.7rem" data-toggle="collapse"
                                                            data-target="#detailReply{{ $item->id }}">
                                                            <i class="fas fa-comment-dots mr-1"></i> Lihat Jawaban
                                                        </button>
                                                        <div id="detailReply{{ $item->id }}" class="collapse mt-2">
                                                            <div
                                                                class="p-3 bg-light rounded border-left-primary small shadow-sm">
                                                                <p class="text-dark mb-0" style="white-space: pre-line;">
                                                                    {{ $item->reply }}</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endif
                                            </td>
                                            <td class="px-4 py-3 text-center align-middle">
                                                @if ($item->reply)
                                                    <span
                                                        class="badge badge-success badge-pill px-3 shadow-sm">Selesai</span>
                                                @else
                                                    <span
                                                        class="badge badge-warning badge-pill px-3 shadow-sm text-white">Menunggu</span>
                                                @endif
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="2" class="text-center py-5 text-muted">
                                                <i class="fas fa-inbox fa-3x mb-3 d-block opacity-25"></i>
                                                Belum ada riwayat bantuan.
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalBantuan" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content border-0 shadow">
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title font-weight-bold">Kirim Pesan Bantuan</h5>
                    <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form action="{{ route('user.bantuan.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-body p-4">
                        <div class="form-group">
                            <label class="font-weight-bold text-dark">Nama</label>
                            <input type="text" class="form-control bg-light border-0"
                                value="{{ auth()->user()->name }}" readonly>
                        </div>
                        <div class="form-group">
                            <label class="font-weight-bold text-dark">Pesan / Keluhan <span
                                    class="text-danger">*</span></label>
                            <textarea name="message" class="form-control" rows="4" placeholder="Jelaskan kendala Anda..." required></textarea>
                        </div>
                        <div class="form-group mb-0">
                            <label class="font-weight-bold text-dark">Lampiran Foto <span class="text-muted small">(Maks
                                    5MB: JPG, JPEG, PNG)</span></label>
                            <div class="custom-file">
                                <input type="file" name="attachment"
                                    class="custom-file-input @error('attachment') is-invalid @enderror" id="customFile"
                                    accept=".jpg,.jpeg,.png">
                                <label class="custom-file-label" for="customFile">Pilih file...</label>
                            </div>
                            @error('attachment')
                                <span class="invalid-feedback d-block font-weight-bold mt-1" role="alert">
                                    <small class="text-danger">{{ $message }}</small>
                                </span>
                            @enderror
                        </div>
                    </div>
                    <div class="modal-footer border-0 p-4">
                        <button type="button" class="btn btn-secondary px-4" data-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-primary px-4 shadow-sm">Kirim Pesan</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    @if (session('verified_first_time'))
        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
        <script>
            document.addEventListener("DOMContentLoaded", function() {
                Swal.fire({
                    icon: 'success',
                    title: 'Akun Berhasil Diverifikasi!',
                    text: 'Selamat datang di PeGas! Silakan baca panduan sebelum mulai.',
                    confirmButtonText: 'Mulai Panduan',
                    confirmButtonColor: '#4e73df',
                    allowOutsideClick: false
                }).then((result) => {
                    if (result.isConfirmed) {
                        document.getElementById('accordionPanduan').scrollIntoView({
                            behavior: 'smooth'
                        });
                    }
                });
            });
        </script>
    @endif

    @if (session('success'))
        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
        <script>
            document.addEventListener("DOMContentLoaded", function() {
                Swal.fire({
                    icon: 'success',
                    title: 'Berhasil',
                    text: "{{ session('success') }}",
                    timer: 2000,
                    showConfirmButton: false
                });
            });
        </script>
    @endif

    <script>
        document.querySelector('.custom-file-input').addEventListener('change', function(e) {
            var fileName = document.getElementById("customFile").files[0].name;
            var nextSibling = e.target.nextElementSibling;
            nextSibling.innerText = fileName;
        });
    </script>
@endsection
