djid_sirani_ios/Sirani/View/Help/HelpVC.swift

//
//  HelpVC.swift
//  Sirani
//
//  Created by Anhar Solehudin on 24/03/19.
//  Copyright © 2019 Anhar Solehudin. All rights reserved.
//

import UIKit
import WebKit

class HelpVC: UIViewController {

    @IBOutlet weak var dropdown1: UIImageView!
    @IBOutlet weak var lineWv1: UIView!
    @IBOutlet weak var wv1: WKWebView!
    
    // View Lifecycles
    override var preferredStatusBarStyle: UIStatusBarStyle {
        return .lightContent
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // Auto-expand and style the view
        self.lineWv1.isHidden = false
        self.wv1.isHidden = false
        self.dropdown1.rotates(-.pi)
        
        // Dynamic height adjustment for WKWebView
        for constraint in wv1.constraints {
            if constraint.firstAttribute == .height {
                constraint.constant = 1350
            }
        }
        
        let htmlContent = """
        <!DOCTYPE html>
        <html>
        <head>
            <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'>
            <style>
                * { box-sizing: border-box; margin: 0; padding: 0; }
                body {
                    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
                    background-color: #F8FAFD;
                    color: #1A1D26;
                    padding: 16px;
                    line-height: 1.5;
                }
                .hero-banner {
                    background: linear-gradient(135deg, #1B4389 0%, #003399 100%);
                    color: white;
                    padding: 20px;
                    border-radius: 16px;
                    margin-bottom: 16px;
                    box-shadow: 0 4px 12px rgba(27, 67, 137, 0.2);
                }
                .hero-title { font-size: 18px; font-weight: bold; margin-bottom: 4px; }
                .hero-subtitle { font-size: 13px; opacity: 0.9; }
                
                .card {
                    background: white;
                    border-radius: 16px;
                    padding: 18px;
                    margin-bottom: 14px;
                    border: 1px solid #EAEFF7;
                    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
                }
                .card-title {
                    font-size: 15px;
                    font-weight: bold;
                    color: #1B4389;
                    margin-bottom: 12px;
                    display: flex;
                    align-items: center;
                    gap: 8px;
                }
                .contact-row {
                    display: flex;
                    align-items: flex-start;
                    padding: 10px 0;
                    border-bottom: 1px solid #F1F4F9;
                }
                .contact-row:last-child { border-bottom: none; }
                .contact-icon {
                    font-size: 18px;
                    width: 32px;
                    flex-shrink: 0;
                }
                .contact-info { flex: 1; }
                .contact-label { font-size: 11px; font-weight: bold; color: #78879B; text-transform: uppercase; margin-bottom: 2px; }
                .contact-val { font-size: 14px; font-weight: 600; color: #1A1D26; word-break: break-word; }
                .contact-val a { color: #1B4389; text-decoration: none; }
                
                .btn-map {
                    display: inline-block;
                    margin-top: 10px;
                    background-color: #EBF2FC;
                    color: #1B4389;
                    font-size: 13px;
                    font-weight: bold;
                    padding: 8px 14px;
                    border-radius: 20px;
                    text-decoration: none;
                }
                
                .time-grid {
                    display: grid;
                    grid-template-columns: 1fr;
                    gap: 10px;
                    margin-top: 6px;
                }
                .time-box {
                    background: #F8FAFD;
                    border: 1px solid #EAEFF7;
                    border-radius: 12px;
                    padding: 12px;
                }
                .time-box-title { font-size: 12px; font-weight: bold; color: #1B4389; margin-bottom: 4px; }
                .time-item { font-size: 13px; color: #4B5563; margin-top: 3px; }
                
                .link-pill {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    background: #F8FAFD;
                    border: 1px solid #EAEFF7;
                    border-radius: 12px;
                    padding: 12px 14px;
                    margin-bottom: 8px;
                    text-decoration: none;
                    color: #1A1D26;
                    font-size: 13px;
                    font-weight: 600;
                }
                .link-pill span { color: #1B4389; font-weight: bold; }
                
                .footer-section {
                    background: #4B6375;
                    color: white;
                    border-radius: 16px;
                    padding: 20px;
                    margin-top: 16px;
                    margin-bottom: 30px;
                    text-align: center;
                }
                .footer-brand { font-size: 15px; font-weight: bold; margin-bottom: 4px; }
                .footer-dept { font-size: 12px; opacity: 0.9; margin-bottom: 2px; }
                .footer-kemen { font-size: 12px; font-weight: 600; opacity: 0.95; }
                .footer-ver {
                    display: inline-block;
                    background: rgba(255, 255, 255, 0.15);
                    padding: 4px 12px;
                    border-radius: 12px;
                    font-size: 11px;
                    margin-top: 10px;
                }
                .footer-addr { font-size: 11px; opacity: 0.8; margin-top: 10px; line-height: 1.4; }
            </style>
        </head>
        <body>
            <!-- Hero Banner -->
            <div class="hero-banner">
                <div class="hero-title">Pusat Layanan & Bantuan</div>
                <div class="hero-subtitle">Sertifikasi Perangkat Telekomunikasi (SIRANI)</div>
            </div>

            <!-- Kantor Layanan Card -->
            <div class="card">
                <div class="card-title">🏢 Kantor Layanan Terpadu</div>
                <div class="contact-row">
                    <div class="contact-icon">📍</div>
                    <div class="contact-info">
                        <div class="contact-label">Alamat Kantor</div>
                        <div class="contact-val">
                            Gedung Menara Danareksa, Lantai UG<br>
                            Jl. Medan Merdeka Selatan no. 14 Jakarta 10110, Indonesia
                        </div>
                        <a href="https://maps.google.com/?q=-6.180472,106.826722" class="btn-map" target="_blank">📍 Buka di Google Maps</a>
                    </div>
                </div>
            </div>

            <!-- Saluran Kontak Card -->
            <div class="card">
                <div class="card-title">📞 Saluran Kontak Layanan</div>
                
                <div class="contact-row">
                    <div class="contact-icon">🎧</div>
                    <div class="contact-info">
                        <div class="contact-label">Call Center</div>
                        <div class="contact-val"><a href="tel:159">159</a></div>
                    </div>
                </div>
                
                <div class="contact-row">
                    <div class="contact-icon">✉️</div>
                    <div class="contact-info">
                        <div class="contact-label">Email Pelayanan</div>
                        <div class="contact-val"><a href="mailto:callcenter_djid@komdigi.go.id">callcenter_djid@komdigi.go.id</a></div>
                    </div>
                </div>
                
                <div class="contact-row">
                    <div class="contact-icon">💬</div>
                    <div class="contact-info">
                        <div class="contact-label">WhatsApp Pelayanan (WAYAN)</div>
                        <div class="contact-val"><a href="https://wa.me/628111100159">08111100159</a></div>
                    </div>
                </div>
            </div>

            <!-- Waktu Layanan Card -->
            <div class="card">
                <div class="card-title">⏰ Waktu Jam Layanan</div>
                <div class="time-grid">
                    <div class="time-box">
                        <div class="time-box-title">🏢 Loket Pelayanan (Menara Danareksa)</div>
                        <div class="time-item">📅 <b>Senin - Kamis:</b> 08.00 - 16.00 WIB</div>
                        <div class="time-item">📅 <b>Jumat:</b> 08.00 - 16.30 WIB</div>
                    </div>
                    <div class="time-box">
                        <div class="time-box-title">🎧 Contact Center 159</div>
                        <div class="time-item">📅 <b>Senin - Jumat:</b> 07.00 - 17.00 WIB</div>
                    </div>
                </div>
            </div>

            <!-- Regulasi & Dokumen Card -->
            <div class="card">
                <div class="card-title">📄 Regulasi & Template Dokumen</div>
                <a href="https://sertifikasi.postel.go.id/regulasi" class="link-pill" target="_blank">
                    <span>Regulasi (UU, PP, Permen, Kepdir)</span> &rarr;
                </a>
                <a href="https://sertifikasi.postel.go.id/template" class="link-pill" target="_blank">
                    <span>Surat Pernyataan Kesediaan Mematuhi Ketentuan</span> &rarr;
                </a>
                <a href="https://sertifikasi.postel.go.id/template" class="link-pill" target="_blank">
                    <span>Deklarasi Kesesuaian (DoC)</span> &rarr;
                </a>
                <a href="https://sertifikasi.postel.go.id/template" class="link-pill" target="_blank">
                    <span>Deklarasi Keamanan IMEI</span> &rarr;
                </a>
                <a href="https://sertifikasi.postel.go.id/template" class="link-pill" target="_blank">
                    <span>Rangkuman Referensi Halaman LHU</span> &rarr;
                </a>
                <a href="https://sertifikasi.postel.go.id/panduan" class="link-pill" target="_blank">
                    <span>Panduan Penggunaan (Customer & Public)</span> &rarr;
                </a>
            </div>

            <!-- Footer Hak Cipta -->
            <div class="footer-section">
                <div class="footer-brand">Hak Cipta © 2026</div>
                <div class="footer-dept">Direktorat Layanan Infrastruktur Digital</div>
                <div class="footer-dept">Direktorat Jenderal Infrastruktur Digital</div>
                <div class="footer-kemen">Kementerian Komunikasi dan Digital</div>
                <div class="footer-ver">v202607282017 (Build: 2026.08.29)</div>
                <div class="footer-addr">
                    Gedung Menara Danareksa, Lantai UG<br>
                    Jl. Medan Merdeka Selatan No. 14, Jakarta Pusat 10110, Indonesia
                </div>
            </div>
        </body>
        </html>
        """
        
        wv1.navigationDelegate = self
        wv1.loadHTMLString(htmlContent, baseURL: nil)
    }
    
    @IBAction func onTitleOneTapped(_ sender: Any) {
        if self.wv1.isHidden {
            UIView.animate(withDuration: 0.25, delay: 0, options: .curveEaseOut, animations: {
                self.lineWv1.isHidden = false
                self.lineWv1.layoutIfNeeded()
                self.wv1.isHidden = false
                self.wv1.layoutIfNeeded()
                self.dropdown1.rotates(-.pi)
            })
        } else {
            UIView.animate(withDuration: 0, delay: 0, options: .curveEaseIn, animations: {
                self.lineWv1.isHidden = true
                self.lineWv1.layoutIfNeeded()
                self.wv1.isHidden = true
                self.wv1.layoutIfNeeded()
                self.dropdown1.rotates(0.0)
            })
        }
    }
}

extension UIView {
    func rotates(_ toValue: CGFloat, duration: CFTimeInterval = 0.3) {
        let animation = CABasicAnimation(keyPath: "transform.rotation")
        animation.toValue = toValue
        animation.duration = duration
        animation.isRemovedOnCompletion = false
        animation.fillMode = CAMediaTimingFillMode.forwards
        self.layer.add(animation, forKey: nil)
    }
}

extension HelpVC: WKNavigationDelegate {
    func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
        if navigationAction.navigationType == .linkActivated {
            guard let url = navigationAction.request.url else {
                decisionHandler(.allow)
                return
            }
            
            let components = URLComponents(url: url, resolvingAgainstBaseURL: false)
            if components?.scheme == "http" || components?.scheme == "https" || components?.scheme == "mailto" || components?.scheme == "tel"
            {
                if UIApplication.shared.canOpenURL(url) {
                    if #available(iOS 10.0, *) {
                        UIApplication.shared.open(url)
                    } else {
                        UIApplication.shared.openURL(url)
                    }
                    decisionHandler(.cancel)
                } else {
                    decisionHandler(.allow)
                }
            } else {
                decisionHandler(.allow)
            }
        } else {
            decisionHandler(.allow)
        }
    }
}