@extends('template_front')
@section('main_front')

<!-- ======= Statistik Layanan Section ======= -->
<section id="statistik" class="statistik section-bg-grey">
  <div class="container" data-aos="fade-up">

    <header class="section-header">
      <h2>Statistik Layanan</h2>
      <p>Ringkasan Data Layanan E-Klinik DPMPTSP Aceh</p>
    </header>

    <!-- ===== Summary Cards ===== -->
    <div class="row g-3 g-lg-4 mb-4 mb-lg-5">

      <div class="col-6 col-lg-3">
        <div class="stat-card stat-card-blue">
          <div class="stat-card-icon"><i class="ri-question-answer-fill"></i></div>
          <div class="stat-card-body">
            <div class="stat-card-number">{{ number_format($totalPertanyaan) }}</div>
            <div class="stat-card-label">Total Pertanyaan</div>
          </div>
        </div>
      </div>

      <div class="col-6 col-lg-3">
        <div class="stat-card stat-card-red">
          <div class="stat-card-icon"><i class="ri-alarm-warning-fill"></i></div>
          <div class="stat-card-body">
            <div class="stat-card-number">{{ number_format($totalPengaduan) }}</div>
            <div class="stat-card-label">Total Pengaduan</div>
          </div>
        </div>
      </div>

      <div class="col-6 col-lg-3">
        <div class="stat-card stat-card-green">
          <div class="stat-card-icon"><i class="ri-video-chat-fill"></i></div>
          <div class="stat-card-body">
            <div class="stat-card-number">{{ number_format($totalVC) }}</div>
            <div class="stat-card-label">Video Conference</div>
          </div>
        </div>
      </div>

      <div class="col-6 col-lg-3">
        <div class="stat-card stat-card-purple">
          <div class="stat-card-icon"><i class="ri-check-double-fill"></i></div>
          <div class="stat-card-body">
            <div class="stat-card-number">{{ number_format($totalTerjawab) }}</div>
            <div class="stat-card-label">Sudah Dijawab</div>
          </div>
        </div>
      </div>

    </div>

    <!-- ===== Charts Row ===== -->
    <div class="row g-4">

      <!-- Chart 1: Status Terjawab vs Belum -->
      <div class="col-lg-6">
        <div class="chart-card">
          <div class="chart-card-header">
            <h5><i class="ri-bar-chart-grouped-fill"></i> Status Respons Layanan</h5>
            <span class="chart-badge">Terjawab vs Belum</span>
          </div>
          <div class="chart-card-body">
            <canvas id="chartStatus"></canvas>
          </div>
        </div>
      </div>

      <!-- Chart 2: Tren Per Bulan -->
      <div class="col-lg-6">
        <div class="chart-card">
          <div class="chart-card-header">
            <h5><i class="ri-line-chart-fill"></i> Tren Layanan Per Bulan</h5>
            <span class="chart-badge">12 Bulan Terakhir</span>
          </div>
          <div class="chart-card-body">
            <canvas id="chartMonthly"></canvas>
          </div>
        </div>
      </div>

    </div>
  </div>
</section>
<!-- End Statistik Section -->

<style>
  /* ============================================
     STATISTIK SECTION STYLES
     ============================================ */
  .section-bg-grey {
    background-color: #f4f6f9;
    padding: 80px 0 60px;
  }

  /* --- Summary Cards --- */
  .stat-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(0,0,0,0.04);
  }

  .stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
  }

  .stat-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    flex-shrink: 0;
    font-size: 24px;
    color: #ffffff;
  }

  .stat-card-blue .stat-card-icon   { background: linear-gradient(135deg, #3b82f6, #2563eb); }
  .stat-card-red .stat-card-icon    { background: linear-gradient(135deg, #ef4444, #dc2626); }
  .stat-card-green .stat-card-icon  { background: linear-gradient(135deg, #10b981, #059669); }
  .stat-card-purple .stat-card-icon { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }

  .stat-card-body {
    min-width: 0;
  }

  .stat-card-number {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.1;
    color: #1e293b;
    font-family: 'Poppins', sans-serif;
  }

  .stat-card-label {
    font-size: 12px;
    font-weight: 500;
    color: #64748b;
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
  }

  @media (max-width: 575px) {
    .stat-card {
      padding: 14px 15px;
      gap: 10px;
    }
    .stat-card-icon {
      width: 42px;
      height: 42px;
      font-size: 20px;
      border-radius: 10px;
    }
    .stat-card-number {
      font-size: 20px;
    }
    .stat-card-label {
      font-size: 11px;
    }
  }

  /* --- Chart Cards --- */
  .chart-card {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.06);
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.04);
    transition: box-shadow 0.3s ease;
  }

  .chart-card:hover {
    box-shadow: 0 6px 28px rgba(0,0,0,0.1);
  }

  .chart-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px 0;
    flex-wrap: wrap;
    gap: 8px;
  }

  .chart-card-header h5 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    font-family: 'Poppins', sans-serif;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .chart-card-header h5 i {
    color: #3b82f6;
    font-size: 20px;
  }

  .chart-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    background: #eff6ff;
    color: #3b82f6;
    letter-spacing: 0.3px;
    text-transform: uppercase;
  }

  .chart-card-body {
    padding: 12px 16px 18px;
    position: relative;
    min-height: 280px;
  }

  .chart-card-body canvas {
    max-height: 300px;
  }

  @media (max-width: 575px) {
    .chart-card-header {
      padding: 14px 16px 0;
    }
    .chart-card-header h5 {
      font-size: 14px;
    }
    .chart-card-body {
      padding: 8px 10px 14px;
      min-height: 240px;
    }
    .chart-card-body canvas {
      max-height: 240px;
    }
  }
</style>

<!-- ======= question Section ======= -->
<section id="question" class="question">

  <div class="container" data-aos="fade-up">
    <div class="row gx-0">

    <header class="section-header">
      <h2>Form Pertanyaan</h2>
      <p>Ajukan Pertanyaan Anda</p>
    </header>

      
        <div class="col-lg-12">
        <form action="#" method="post" class="form-question" id="form-question" enctype="multipart/form-data">
             @csrf
          <div class="row gy-4">

            <div class="col-md-6">
              <input type="text" name="nama" id="nama" class="form-control" placeholder="Masukkan Nama" required>
                <small class="nama_error" id="nama_error"></small>
             </div>

            <div class="col-md-6">
              <input type="text" name="nik" id="nik" class="form-control" placeholder="Masukkan NIK" maxlength="16" required>
              <small class="nik_error" id="nik_error"></small>
            </div>

            <div class="col-md-8">
              <input type="text" name="alamat" id="alamat" class="form-control" placeholder="Masukkan Alamat" required>
              <small class="alamat_error" id="alamat_error"></small>
            </div>

            <div class="col-md-4 ">
              <input type="email" class="form-control" id="email" name="email" autocomplete="off" placeholder="Masukkan Email" required>
              <small class="email_error" id="email_error"></small>
            </div>

            <div class="col-md-6">
             <select name="kabupaten" id="kabupaten" class="form-select">
               <option value="" selected disabled>Pilih Kabupaten</option>
               @foreach($kabupaten as $kabupaten)
               <option value="{{$kabupaten->id}}">{{$kabupaten->nama}}</option>
               @endforeach
             </select>
              <small class="kabupaten_error" id="kabupaten_error"></small>
            </div>

            <div class="col-md-6">
            <select name="kecamatan" id="kecamatan" class="form-select">
               <option value="" selected disabled>Pilih Kecamatan</option>
               <option></option>
             </select>
             <small class="kecamatan_error" id="kecamatan_error"></small>
            </div>

            <div class="col-md-8">
              <input type="text" name="perusahaan" id="perusahaan" class="form-control" placeholder="Masukkan Nama Perusahaan" required>
              <small class="perusahaan_error" id="perusahaan_error"></small>
            </div>

            <div class="col-md-4 ">
              <input type="text" class="form-control" id="nohp" name="nohp" placeholder="Masukkan No. Hp" required>
               <small style="font-size:12px;"><i class="ri-whatsapp-line"></i> No. Handphone Akun Whatshapp (Optional)</small> 
              <small class="nohp_error" id="nohp_error"></small>
            </div>


            <!-- <div class="col-md-12">
              <input type="text" class="form-control" name="keperluan" placeholder="keperluan" required>
            </div> -->

            <div class="col-md-12">
              <textarea class="form-control my-editor" name="pertanyaan" id="pertanyaan" rows="6" placeholder="Masukkan Pertanyaan" required></textarea>
              <small class="pertanyaan_error" id="pertanyaan_error"></small>
            </div>

            <!-- <div class="col-md-12">
            <div class="col-lg-4">
            <input type="file" class="form-control" id="gambar" name="gambar" placeholder="Lampirkan Gambar" >
            </div>
              <small style="font-size:12px;"><i class="ri-attachment-line"></i> Lampirkan Foto/Screenshot</small>
            </div> -->

           <div class="col-lg-6 captcha">
           <span id="captcha">{!! captcha_img() !!}</span>
           <button type="button" class="btn btn-danger" class="reload" id="reload_captcha_pertanyaan">
            &#x21bb;
            </button><br><br>
                        <input  type="text" class="form-control" placeholder="Masukkan Captcha" name="captcha" id="kode_captcha">
            <small class="captcha_error" id="captcha_error"></small>
            </div>

            <div class="col-md-12 text-center">
              <!-- <div class="loading">Loading</div>
              <div class="error-message"></div> -->
              
             

              <div class="sent-message" id="send-message-success"></div>
              <button type="submit" class="btn-send-message btn btn-primary" id="btn-send-message"><i class="ri-send-plane-fill"></i> Kirim</button>
            </div>

          </div>
        </form>

      </div>




        

     

    </div>
  </div>
</section><!-- End question Section -->

<!-- ======= Complaint Section ======= -->
<section id="complaint" class="complaint">
  <div class="container" data-aos="fade-up">
    <div class="row gx-0">
      <header class="section-header">
        <h2>Formulir Pengaduan Masyarakat</h2>
        <p>Ajukan Pengaduan Anda</p>
      </header>
      
      <div class="col-lg-12">
        <form action="#" method="post" class="form-question" id="form-complaint" enctype="multipart/form-data">
          @csrf
          <div class="row gy-4">
            
            <!-- Personal Information -->
            <div class="col-md-12">
              <div class="section-title-container">
                <div class="section-icon">
                  <i class="ri-user-3-fill"></i>
                </div>
                <div class="section-text">
                  <h5>Identitas Pelapor</h5>
                  <p>Silakan isi data diri Anda dengan lengkap dan benar</p>
                </div>
              </div>
            </div>
            
            <div class="col-md-6">
              <input type="text" name="nama_pelapor" id="nama_pelapor" class="form-control" placeholder="Masukkan Nama Lengkap" required>
              <small class="nama_pelapor_error" id="nama_pelapor_error"></small>
            </div>
            
            <div class="col-md-3">
              <select name="jenis_kelamin" id="jenis_kelamin" class="form-select" required>
                <option value="" selected disabled>Pilih Jenis Kelamin</option>
                <option value="L">Laki-laki</option>
                <option value="P">Perempuan</option>
              </select>
              <small class="jenis_kelamin_error" id="jenis_kelamin_error"></small>
            </div>
            
            <div class="col-md-3">
              <input type="number" name="umur" id="umur" class="form-control" placeholder="Masukkan Umur" min="17" max="100" required>
              <small class="umur_error" id="umur_error"></small>
            </div>
            
            <div class="col-md-6">
              <input type="text" name="nik_pelapor" id="nik_pelapor" class="form-control" placeholder="Masukkan NIK" maxlength="16" required>
              <small class="nik_pelapor_error" id="nik_pelapor_error"></small>
            </div>
            
            <div class="col-md-6">
              <input type="email" class="form-control" id="email_pelapor" name="email_pelapor" autocomplete="off" placeholder="Masukkan Email" required>
              <small class="email_pelapor_error" id="email_pelapor_error"></small>
            </div>
            
            <div class="col-md-8">
              <input type="text" name="alamat_pelapor" id="alamat_pelapor" class="form-control" placeholder="Masukkan Alamat Lengkap" required>
              <small class="alamat_pelapor_error" id="alamat_pelapor_error"></small>
            </div>
            
            <div class="col-md-4">
              <input type="text" class="form-control" id="nohp_pelapor" name="nohp_pelapor" placeholder="Masukkan No. Hp" required>
               <small style="font-size:12px;"><i class="ri-whatsapp-line"></i> No. Handphone Akun Whatshapp (Optional)</small>
              <small class="nohp_pelapor_error" id="nohp_pelapor_error"></small>
            </div>
            
            <!-- Complaint Information -->
            <div class="col-md-12 mt-4">
              <div class="section-title-container">
                <div class="section-icon complaint-icon">
                  <i class="ri-file-text-fill"></i>
                </div>
                <div class="section-text">
                  <h5>Detail Pengaduan</h5>
                  <p>Jelaskan secara detail mengenai pengaduan yang ingin Anda sampaikan</p>
                </div>
              </div>
            </div>
            
            <div class="col-md-12">
              <input type="text" name="terlapor" id="terlapor" class="form-control" placeholder="Masukkan Nama/Instansi yang Dilaporkan" required>
              <small class="terlapor_error" id="terlapor_error"></small>
            </div>
            
            <div class="col-md-12">
              <input type="text" name="perihal_pengaduan" id="perihal_pengaduan" class="form-control" placeholder="Masukkan Perihal Pengaduan" required>
              <small class="perihal_pengaduan_error" id="perihal_pengaduan_error"></small>
            </div>
            
            <div class="col-md-12">
              <textarea class="form-control my-editor" name="deskripsi_pengaduan" id="deskripsi_pengaduan" rows="6" placeholder="Jelaskan secara detail pengaduan Anda" required></textarea>
              <small class="deskripsi_pengaduan_error" id="deskripsi_pengaduan_error"></small>
            </div>
            
            <!-- <div class="col-md-6">
              <input type="text" name="tgl_diterima" id="tgl_diterima" onkeydown="return false" class="form-control tgl_pengaduan" autocomplete="off" placeholder="Tanggal Pengaduan" required>
              <small class="tgl_diterima_error" id="tgl_diterima_error"></small>
            </div> -->
            
            <!-- <div class="col-md-6">
              <div class="form-group">
                <input type="file" class="form-control" id="lampiran" name="lampiran" accept=".jpg,.jpeg,.png,.pdf,.doc,.docx">
                <small style="font-size:12px;"><i class="ri-attachment-line"></i> Lampirkan dokumen pendukung (PDF, JPG, DOC maksimal 5MB)</small>
                <small class="lampiran_error" id="lampiran_error"></small>
              </div>
            </div> -->
            
            <div class="col-lg-6 captcha">
              <span id="captcha_complaint">{!! captcha_img() !!}</span>
              <button type="button" class="btn btn-danger reload" id="reload_captcha_complaint">
                &#x21bb;
              </button><br><br>
              <input type="text" class="form-control" placeholder="Masukkan Captcha" name="captcha" id="kode_captcha_complaint">
              <small class="captcha_error" id="captcha_error_complaint"></small>
            </div>

            <div class="col-md-12 text-center">
              <div class="sent-message" id="send-message-complaint"></div>
              <button type="submit" class="btn-send-message btn btn-primary" id="btn-send-complaint"><i class="ri-send-plane-fill"></i> Kirim</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</section><!-- End Complaint Section -->

<style>
  /* Style untuk section title yang lebih cantik */
  .section-title-container {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #0d6efd;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  }
  
  .section-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background-color: #0d6efd;
    color: white;
    border-radius: 50%;
    margin-right: 15px;
    flex-shrink: 0;
  }
  
  .section-icon i {
    font-size: 24px;
  }
  
  .complaint-icon {
    background-color: #dc3545;
  }
  
  .section-text h5 {
    margin: 0 0 5px 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
  }
  
  .section-text p {
    margin: 0;
    font-size: 14px;
    color: #6c757d;
  }
  
  /* Animasi saat hover */
  .section-title-container:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
  }
  
  /* Responsive adjustments */
  @media (max-width: 768px) {
    .section-title-container {
      flex-direction: column;
      text-align: center;
    }
    
    .section-icon {
      margin-right: 0;
      margin-bottom: 10px;
    }
  }
</style><!-- End Complaint Section -->

<!-- ======= conference Section ======= -->
<section id="conference" class="conference">
<div class="container" data-aos="fade-up">
    <div class="row gx-0">

    <header class="section-header">
      <h2>Form Permohonan Video Conference</h2>
      <p>Ajukan Video Conference</p>
    </header>

      
        <div class="col-lg-12">
        <form action="#" method="post" class="form-question" id="form-conference">
            @csrf
          <div class="row gy-4">

            <div class="col-md-6">
              <input type="text" name="nama" id="nama_c" class="form-control" placeholder="Masukkan Nama" required>
                <small class="nama_error" id="nama_error_c"></small>
             </div>

            <div class="col-md-6">
              <input type="text" name="nik" id="nik_c" class="form-control" placeholder="Masukkan NIK" maxlength="16" required>
              <small class="nik_error" id="nik_error_c"></small>
            </div>

            <div class="col-md-8">
              <input type="text" name="alamat" id="alamat_c" class="form-control"  placeholder="Masukkan Alamat" required>
              <small class="alamat_error" id="alamat_error_c"></small>
            </div>

            <div class="col-md-4 ">
              <input type="email" class="form-control" id="email_c" name="email" autocomplete="off" placeholder="Masukkan Email" required>
              <small class="email_error" id="email_error_c"></small>
            </div>

        
            <div class="col-md-8">
              <input type="text" name="perusahaan" id="perusahaan_c" class="form-control" placeholder="Masukkan Nama Perusahaan" required>
              <small class="perusahaan_error" id="perusahaan_error_c"></small>
            </div>

            <div class="col-md-4">
              <input type="text" class="form-control" id="nohp_c" name="nohp" placeholder="Masukkan No. Hp" required>
               <small style="font-size:12px;"><i class="ri-whatsapp-line"></i> No. Handphone Akun Whatshapp (Optional)</small>
              <small class="nohp_error" id="nohp_error_c"></small>
            </div>

            <div class="col-md-7">
              <input type="text" class="form-control" id="topik" name="topik" placeholder="Masukkan Topik" required>
              <small class="topik_error" id="topik_error_c"></small>
            </div>


            <div class="col-md-5">
              <input type="text" name="tgl" id="tgl_c" onkeydown="return false" class="form-control tgl_conference" autocomplete="off" placeholder="Masukkan Tgl. dan Jam Permohonan Video Conference" required>
              <small class="tgl_conference_error" id="tgl_conference_error_c"></small>
            </div>


           <div class="col-lg-6 captcha">
           <span id="captcha_c">{!! captcha_img() !!}</span>
           <button type="button" class="btn btn-danger" class="reload" id="reload_captcha_conference">
            &#x21bb;
            </button><br><br>
                        <input  type="text" class="form-control" placeholder="Masukkan Captcha" name="captcha" id="kode_captcha_c">
            <small class="captcha_error" id="captcha_error_c"></small>
            </div>

            <div class="col-md-12 text-center">
              <!-- <div class="loading">Loading</div>
              <div class="error-message"></div> -->
              
             

              <div class="sent-message btn-get-started" id="sent-request-conference"></div>
              <button type="submit" class="btn-send-message btn btn-primary" id="btn-request-conference"><i class="ri-send-plane-fill"></i> Kirim</button>
            </div>

          </div>
        </form>

      </div>




        

     

    </div>
  </div>
</section><!-- End conference Section -->

<!-- ======= Services Section ======= -->
<section id="tracking" class="services">

  <div class="container" data-aos="fade-up">

    <header class="section-header">
      <h2>Tracking Pertanyaan</h2>
      <p>Masukkan Nomor Ticket Anda Yang Telah Dikirim Ke Email</p>
    </header>

    <div class="row gy-4 justify-content-center">

  
      
      <div class="col-lg-12 text-center">
         <input type="text" autocomplete="off" name="ticket" id="ticket" class="form-control" placeholder="Masukkan Nomor Ticket dan Tekan Enter">
         
              <div class="answer"></div>
            
      </div>
   

    </div>

  </div>
</section><!-- End Services Section -->

 <!-- ======= Toturial Section ======= -->
 <section id="tutorial" class="about">

<div class="container" data-aos="fade-up">
  <div class="row gx-0">

    <div class="col-lg-6 d-flex flex-column justify-content-center" data-aos="fade-up" data-aos-delay="200">
      <div class="content">
        <h3>Tutorial</h3>
        <h2>Tentang E-Klinik DPMPTSP Aceh.</h2>
        <p>
          E-Klinik DPMPTSP Aceh adalah aplikasi layanan tanya jawab via elektronik yang memudahkan pemohon untuk bertanya tentang masalah perizinan. Pemohon juga dapat melakukan video conference untuk mendapatkan jawaban secara langsung.
        </p>
        <!-- <div class="text-center text-lg-start">
          <a href="#" class="btn-read-more d-inline-flex align-items-center justify-content-center align-self-center">
            <span>Read More</span>
            <i class="bi bi-arrow-right"></i>
          </a>
        </div> -->
      </div>
    </div>

    <div class="col-lg-6 d-flex align-items-center" data-aos="zoom-out" data-aos-delay="200">
    <video width="100%" height="340" class="img-fluid" controls>
    <source src="{{asset('assets_front/assets/video/eklinik.MP4')}}" type="video/mp4">
    </video>
    </div>

  </div>
</div>
</section><!-- End About Section -->









<!-- ======= Contact Section ======= -->
<section id="contact" class="contact">

  <div class="container" data-aos="fade-up">

    <header class="section-header">
      <h2>Hubungi Kami</h2>
      <p>Kontak</p>
    </header>

    <div class="row gy-4">

      <div class="col-lg-12">

        <div class="row gy-4">
          <div class="col-md-6">
            <div class="info-box">
              <i class="bi bi-geo-alt"></i>
              <h4>Alamat Kantor</h4>
        <p>
          Alamat: Jl. Tgk. Imeum Lueng Bata, Gampong Cot Masjid, Kecamatan Lueng Bata, Kota Banda Aceh (23246), Aceh.
          <br>
          Website: https://dpmptsp.acehprov.go.id/<br>
         
        </p>
            </div>
          </div>
          <div class="col-md-6">
            <div class="info-box">
              <i class="bi bi-telephone"></i>
              <h3>Hubungi Kami</h3>
              <p>Phone: +62 811 678 1139</p>
               <p>Fax: +62651-23171</p>

            
            </div>
          </div>
          <div class="col-md-6">
            <div class="info-box">
              <i class="bi bi-envelope"></i>
              <h3>Email :</h3>
              <p>E-Mail: dpmptspaceh@gmail.com</p>
            </div>
          </div>
          <div class="col-md-6">
            <div class="info-box">
              <i class="bi bi-clock"></i>
              <h3>Buka</h3>
              <p>Senin - Jum'at<br>8:00 Pagi - 05:00 Sore</p>
            </div>
          </div>
        </div>

      </div>

     
    </div>

  </div>
</section><!-- End Contact Section -->

<style>
  .tox-notification { display: none !important }
</style>
@endsection

@section('footer_scripts')
<link href="{{asset('assets_front/assets/css/bootstrap-datetimepicker.min.css')}}" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 <script src="{{asset('assets_backend/vendor/tinymce/js/tinymce/tinymce.min.js')}}"></script>
<script type="text/javascript" src="{{asset('/assets_backend/js/datepicker/bootstrap-datetimepicker.js')}}" charset="UTF-8"></script>
<script type="text/javascript" src="{{asset('/assets_backend/js/datepicker/locales/bootstrap-datetimepicker.fr.js')}}" charset="UTF-8"></script>
<script type="text/javascript">
 $('.tgl_conference').datetimepicker({
        //language:  'fr',
        format: 'dd-mm-yyyy hh:ii:00',
        weekStart: 1,
        // minuteStep: 40,
        todayBtn:  1,
            autoclose: 1,
            todayHighlight: 1,
            startView: 2,
            forceParse: 0
});

// Date picker for complaint form
 $('.tgl_pengaduan').datetimepicker({
    format: 'dd-mm-yyyy',
    weekStart: 1,
    todayBtn:  1,
    autoclose: 1,
    todayHighlight: 1,
    startView: 2,
    minView: 2,
    forceParse: 0
});

 tinymce.init({
      selector: 'textarea.my-editor',
      plugins: 'a11ychecker advcode casechange formatpainter linkchecker autolink lists checklist media mediaembed pageembed permanentpen powerpaste table advtable tinycomments tinymcespellchecker',
      toolbar: 'a11ycheck addcomment showcomments casechange checklist code formatpainter pageembed permanentpen table',
      toolbar_mode: 'floating',
      height: 300,
      tinycomments_mode: 'embedded',
      tinycomments_author: 'Author name',
      toolbar: 'undo redo | formatselect | ' +
                'bold italic backcolor | alignleft aligncenter ' +
                'alignright alignjustify | bullist numlist outdent indent | ' +
                'removeformat | help',
            content_css: '//www.tiny.cloud/css/codepen.min.css'
   });

// Initialize TinyMCE for complaint description
tinymce.init({
    selector: 'textarea#deskripsi_pengaduan',
    plugins: 'a11ychecker advcode casechange formatpainter linkchecker autolink lists checklist media mediaembed pageembed permanentpen powerpaste table advtable tinycomments tinymcespellchecker',
    toolbar: 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help',
    toolbar_mode: 'floating',
    height: 300,
    tinycomments_mode: 'embedded',
    tinycomments_author: 'Author name',
    content_css: '//www.tiny.cloud/css/codepen.min.css'
});

 $('#reload_captcha_pertanyaan').click(function () {
      reload_captcha_pertanyaan();
});

 $('#reload_captcha_conference').click(function () {
      reload_captcha_conference();
});

// Reload Captcha for Complaint Form
 $('#reload_captcha_complaint').click(function () {
    reload_captcha_complaint();
});

    /* Reload Captcha Pertanyaan */
    function reload_captcha_pertanyaan(){
      $.ajax({
            type: 'GET',
            url: '{{route('pengusaha.reloadCaptchaPertanyaan')}}',
            beforeSend: function() {
                $("#captcha").html('Sedang memuat data...');
            },
            success: function (data) {
                        $("#captcha").html('');
                $("#captcha").html(data.captcha);
            }
        });
    }

     /* Reload Captcha Conference */
     function reload_captcha_conference(){
      $.ajax({
            type: 'GET',
            url: '{{route('pengusaha.reloadCaptchaConference')}}',
            beforeSend: function() {
                $("#captcha_c").html('Sedang memuat data...');
            },
            success: function (data) {
                        $("#captcha_c").html('');
                $("#captcha_c").html(data.captcha);
            }
        });
    }

    // Reload Captcha for Complaint Form
   function reload_captcha_complaint(){
      $.ajax({
            type: 'GET',
            url: '{{route('pengusaha.reloadCaptchaComplaint')}}',
            beforeSend: function() {
                $("#captcha_complaint").html('Sedang memuat data...');
            },
            success: function (data) {
                $("#captcha_complaint").html('');
                $("#captcha_complaint").html(data.captcha);
            }
        });
    }
    
    /*Change Kabupaten */
    $('#kabupaten').change(function() {
      var id = $(this).val();
      $.ajax({
              type: "GET",
              url: "{{route('pengusaha.kecamatan')}}/"+id,
      beforeSend: function() { 
        $("#kecamatan").html("<i class='fa fa-spinner fa-spin'></i>");
      },
      }).done(function (data) {
        $('#kecamatan').html('');
        $('#kecamatan').empty();
        $("#kecamatan").append(data);
      });
    });

    /* Save Message Enterpreneur */
    $('#btn-send-message').click(function (e) {
    e.preventDefault();
    $.ajaxSetup({
          headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          }
    });

    var nama            = $('#nama').val();
    var nik             = $('#nik').val();
    var alamat          = $('#alamat').val();
    var kabupaten       = $('#kabupaten').val();
    var email           = $('#email').val();
    var kabupaten       = $('#kabupaten').val();
    var kecamatan       = $('#kecamatan').val();
    var perusahaan      = $('#perusahaan').val();
    var nohp            = $('#nohp').val();
    var pertanyaan      = window.parent.tinymce.get('pertanyaan').getContent();
    var captcha         = $('#kode_captcha').val();
   
    //var formData = new FormData($('#form-question')[0]);
    

    $.ajax({
            url: "{{route('pengusaha.save')}}",
            method: 'POST',
            data: {nama: nama, nik: nik, alamat:alamat, perusahaan:perusahaan, email:email, alamat:alamat, kabupaten:kabupaten, kecamatan:kecamatan, nohp:nohp, pertanyaan:pertanyaan, captcha:captcha},
            beforeSend : function(data){
                 $("#btn-send-message").html("<i class='fa fa-spinner fa-spin'></i> Data Sedang Diproses...");
                 document.getElementById("btn-send-message"). disabled = true;
            },
            success: function(data) {
               console.log(data);
               reload_captcha_pertanyaan();
        if(data.message==='success'){
          $("#send-message-success").html('<div class="alert alert-success" role="alert"><b>Pertanyaan anda berhasil terkirim ! Nomor Ticket telah dikirim ke email anda.</b></div>');
          $("#send-message-success").show('slow').delay(5000).hide('slow');
          document.getElementById('form-question').reset();
        }
        if(data.errors){
            if(data.errors.nama){
               $("#nama_error").html('<span class="has-error has-feedback" role="alert"><label for="errorInput">'+data.errors.nama+'</label></span>');
            }
            if(data.errors.nik){
              $("#nik_error").html('<span class="has-error has-feedback" role="alert"><label for="errorInput">'+data.errors.nik+'</label></span>');
            }
            if(data.errors.alamat){
              $("#alamat_error").html('<span class="has-error has-feedback" role="alert"><label for="errorInput">'+data.errors.alamat+'</label></span>');
            }
            if(data.errors.email){
              $("#email_error").html('<span class="has-error has-feedback" role="alert"><label for="errorInput">'+data.errors.email+'</label></span>');
            }
            if(data.errors.perusahaan){
              $("#perusahaan_error").html('<span class="has-error has-feedback" role="alert"><label for="errorInput">'+data.errors.perusahaan+'</label></span>');
            }
            if(data.errors.kabupaten){
              $("#kabupaten_error").html('<span class="has-error has-feedback" role="alert"><label for="errorInput">'+data.errors.kabupaten+'</label></span>');
            }
            if(data.errors.kecamatan){
              $("#kecamatan_error").html('<span class="has-error has-feedback" role="alert"><label for="errorInput">'+data.errors.kecamatan+'</label></span>');
            }
            if(data.errors.nohp){
              $("#nohp_error").html('<span class="has-error has-feedback" role="alert"><label for="errorInput">'+data.errors.nohp+'</label></span>');
            }
            if(data.errors.pertanyaan){
              $("#pertanyaan_error").html('<span class="has-error has-feedback" role="alert"><label for="errorInput">'+data.errors.pertanyaan+'</label></span>');
            }
            if(data.errors.captcha){
              $("#captcha_error").html('<span class="has-error has-feedback" role="alert"><label for="errorInput">'+data.errors.captcha+'</label></span>');
            }
            
        }else{
           
            $("#nama_error").html('');
            $("#nik_error").html('');
            $("#alamat_error").html('');
            $("#email_error").html('');
            $("#kabupaten_error").html('');
            $("#kecamatan_error").html('');
            $("#perusahaan_error").html('');
            $("#email_error").html('');
            $("#pertanyaan_error").html('');
            $("#captcha_error").html('');
            
        }
        
       

        },
        complete: function(data) {
          $("#btn-send-message").html("<i class="ri-send-plane-fill"></i> Kirim");
          document. getElementById("btn-send-message"). disabled = false;  
        },
        error: function() {
          alert('Terjadi Kesalahan, Mohon Ulangi Lagi');
          //window.location.href="{{route('home.index')}}"
        }

           
    });


    });

     /* Save Request Video Conference */
    $('#btn-request-conference').click(function (e) {
     e.preventDefault();
      $.ajaxSetup({
          headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          }
    });

    var nama            = $('#nama_c').val();
    var nik             = $('#nik_c').val();
    var alamat          = $('#alamat_c').val();
    var email           = $('#email_c').val();
    var perusahaan      = $('#perusahaan_c').val();
    var nohp            = $('#nohp_c').val();
    var topik           = $('#topik').val();
    var tgl_conference  = $('#tgl_c').val();       
    var captcha         = $('#kode_captcha_c').val();
    
    $.ajax({
            url: "{{route('pengusaha.save_req_conference')}}",
            method: 'POST',
            data: {nama: nama, nik: nik, alamat:alamat, perusahaan:perusahaan, email:email, alamat:alamat, nohp:nohp, tgl_conference:tgl_conference, captcha:captcha, topik:topik},
            beforeSend : function(data){
                 $("#btn-request-conference").html("<i class='fa fa-spinner fa-spin'></i> Data Sedang Diproses...");
                 document.getElementById("btn-request-conference"). disabled = true;
            },
            success: function(data) {
               console.log(data);
               reload_captcha_conference();
        if(data.message==='success'){
          $("#sent-request-conference").html('<div class="alert alert-success" role="alert"><b>Permohonan video conference anda berhasil terkirim ! Nomor Ticket telah dikirim ke email anda.</b></div>');
          $("#sent-request-conference").show('slow').delay(5000).hide('slow');
          document.getElementById('form-conference').reset();
        }
        
        if(data.status==='failed'){
          $("#sent-request-conference").html('<div class="alert alert-danger" role="alert"><b>'+data.message+'</b></div>');
          $("#sent-request-conference").show('slow').delay(5000).hide('slow');
        }
        if(data.errors){
            if(data.errors.nama){
               $("#nama_error_c").html('<span class="has-error has-feedback" role="alert"><label for="errorInput">'+data.errors.nama+'</label></span>');
            }
            if(data.errors.nik){
              $("#nik_error_c").html('<span class="has-error has-feedback" role="alert"><label for="errorInput">'+data.errors.nik+'</label></span>');
            }
            if(data.errors.alamat){
              $("#alamat_error_c").html('<span class="has-error has-feedback" role="alert"><label for="errorInput">'+data.errors.alamat+'</label></span>');
            }
            if(data.errors.email){
              $("#email_error_c").html('<span class="has-error has-feedback" role="alert"><label for="errorInput">'+data.errors.email+'</label></span>');
            }
            if(data.errors.perusahaan){
              $("#perusahaan_error_c").html('<span class="has-error has-feedback" role="alert"><label for="errorInput">'+data.errors.perusahaan+'</label></span>');
            }
            if(data.errors.nohp){
              $("#nohp_error_c").html('<span class="has-error has-feedback" role="alert"><label for="errorInput">'+data.errors.nohp+'</label></span>');
            }
            if(data.errors.topik){
              $("#topik_error_c").html('<span class="has-error has-feedback" role="alert"><label for="errorInput">'+data.errors.topik+'</label></span>');
            }
            if(data.errors.tgl_conference){
              $("#tgl_conference_error_c").html('<span class="has-error has-feedback" role="alert"><label for="errorInput">'+data.errors.tgl_conference+'</label></span>');
            }
            if(data.errors.captcha){
              $("#captcha_error_c").html('<span class="has-error has-feedback" role="alert"><label for="errorInput">'+data.errors.captcha+'</label></span>');
            }
            
        }else{
           
            $("#nama_error_c").html('');
            $("#nik_error_c").html('');
            $("#alamat_error_c").html('');
            $("#email_error_c").html('');
            $("#perusahaan_error_c").html('');
            $("#email_error_c").html('');
            $("#topic_error_c").html('');
            $("#tgl_conference_error_c").html('');
            $("#captcha_error_c").html('');
            
        }
        
  
        },
        complete: function(data) {
          $("#btn-request-conference").html("<i class="ri-send-plane-fill"></i> Kirim");
          document.getElementById("btn-request-conference"). disabled = false;  
        },
        error: function() {
          alert('Terjadi Kesalahan, Mohon Ulangi Lagi');
          window.location.href="{{route('home.index')}}"
        }

           
    });


     
      
    });
    
    
    // Fungsi untuk submit form pengaduan
    $('#btn-send-complaint').click(function(e) {
        e.preventDefault();
        
        // Setup CSRF token untuk AJAX
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        // Mengambil nilai dari form
        var nama_pelapor = $('#nama_pelapor').val();
        var jenis_kelamin = $('#jenis_kelamin').val();
        var umur = $('#umur').val();
        var nik_pelapor = $('#nik_pelapor').val();
        var email_pelapor = $('#email_pelapor').val();
        var alamat_pelapor = $('#alamat_pelapor').val();
        var nohp_pelapor = $('#nohp_pelapor').val();
        var terlapor = $('#terlapor').val();
        var perihal_pengaduan = $('#perihal_pengaduan').val();
        var deskripsi_pengaduan = window.parent.tinymce.get('deskripsi_pengaduan').getContent();
        var captcha = $('#kode_captcha_complaint').val();

        // Mengirim data via AJAX
        $.ajax({
            url: "{{ route('pengusaha.save_complaint') }}",
            method: 'POST',
            data: {
                nama_pelapor: nama_pelapor,
                jenis_kelamin: jenis_kelamin,
                umur: umur,
                nik_pelapor: nik_pelapor,
                email_pelapor: email_pelapor,
                alamat_pelapor: alamat_pelapor,
                nohp_pelapor: nohp_pelapor,
                terlapor: terlapor,
                perihal_pengaduan: perihal_pengaduan,
                deskripsi_pengaduan: deskripsi_pengaduan,
                captcha: captcha
            },
            beforeSend: function() {
                // Menampilkan loading state
                $("#btn-send-complaint").html("<i class='fa fa-spinner fa-spin'></i> Data Sedang Diproses...");
                document.getElementById("btn-send-complaint").disabled = true;
            },
            success: function(data) {
                console.log(data);
                
                // Reload captcha setelah submit
                $('#reload_captcha_complaint').click();
                
                if(data.message === 'success') {
                    // Menampilkan pesan sukses
                    $("#send-message-complaint").html('<div class="alert alert-success" role="alert"><b>Pengaduan anda berhasil terkirim! Nomor Tiket telah dikirim ke email Anda.</b></div>');
                    $("#send-message-complaint").show('slow').delay(5000).hide('slow');
                    
                    // Reset form
                    document.getElementById('form-complaint').reset();
                }
                
                // Menampilkan error validasi
                if(data.errors) {
                    if(data.errors.nama_pelapor) {
                        $("#nama_pelapor_error").html('<span class="has-error has-feedback" role="alert"><label for="errorInput">'+data.errors.nama_pelapor+'</label></span>');
                    } else {
                        $("#nama_pelapor_error").html('');
                    }
                    
                    if(data.errors.jenis_kelamin) {
                        $("#jenis_kelamin_error").html('<span class="has-error has-feedback" role="alert"><label for="errorInput">'+data.errors.jenis_kelamin+'</label></span>');
                    } else {
                        $("#jenis_kelamin_error").html('');
                    }
                    
                    if(data.errors.umur) {
                        $("#umur_error").html('<span class="has-error has-feedback" role="alert"><label for="errorInput">'+data.errors.umur+'</label></span>');
                    } else {
                        $("#umur_error").html('');
                    }
                    
                    if(data.errors.nik_pelapor) {
                        $("#nik_pelapor_error").html('<span class="has-error has-feedback" role="alert"><label for="errorInput">'+data.errors.nik_pelapor+'</label></span>');
                    } else {
                        $("#nik_pelapor_error").html('');
                    }
                    
                    if(data.errors.email_pelapor) {
                        $("#email_pelapor_error").html('<span class="has-error has-feedback" role="alert"><label for="errorInput">'+data.errors.email_pelapor+'</label></span>');
                    } else {
                        $("#email_pelapor_error").html('');
                    }
                    
                    if(data.errors.alamat_pelapor) {
                        $("#alamat_pelapor_error").html('<span class="has-error has-feedback" role="alert"><label for="errorInput">'+data.errors.alamat_pelapor+'</label></span>');
                    } else {
                        $("#alamat_pelapor_error").html('');
                    }
                    
                    if(data.errors.nohp_pelapor) {
                        $("#nohp_pelapor_error").html('<span class="has-error has-feedback" role="alert"><label for="errorInput">'+data.errors.nohp_pelapor+'</label></span>');
                    } else {
                        $("#nohp_pelapor_error").html('');
                    }
                    
                    if(data.errors.terlapor) {
                        $("#terlapor_error").html('<span class="has-error has-feedback" role="alert"><label for="errorInput">'+data.errors.terlapor+'</label></span>');
                    } else {
                        $("#terlapor_error").html('');
                    }
                    
                    if(data.errors.perihal_pengaduan) {
                        $("#perihal_pengaduan_error").html('<span class="has-error has-feedback" role="alert"><label for="errorInput">'+data.errors.perihal_pengaduan+'</label></span>');
                    } else {
                        $("#perihal_pengaduan_error").html('');
                    }
                    
                    if(data.errors.deskripsi_pengaduan) {
                        $("#deskripsi_pengaduan_error").html('<span class="has-error has-feedback" role="alert"><label for="errorInput">'+data.errors.deskripsi_pengaduan+'</label></span>');
                    } else {
                        $("#deskripsi_pengaduan_error").html('');
                    }
                    
                    if(data.errors.captcha) {
                        $("#captcha_error_complaint").html('<span class="has-error has-feedback" role="alert"><label for="errorInput">'+data.errors.captcha+'</label></span>');
                    } else {
                        $("#captcha_error_complaint").html('');
                    }
                } else {
                    // Menghapus semua pesan error jika tidak ada error
                    $(".nama_pelapor_error, .jenis_kelamin_error, .umur_error, .nik_pelapor_error, .email_pelapor_error, .alamat_pelapor_error, .nohp_pelapor_error, .terlapor_error, .perihal_pengaduan_error, .deskripsi_pengaduan_error, .captcha_error_complaint").html('');
                }
            },
            complete: function() {
                // Mengembalikan tombol ke state normal
                $("#btn-send-complaint").html("<i class="ri-send-plane-fill"></i> Kirim");
                document.getElementById("btn-send-complaint").disabled = false;
            },
            error: function() {
                alert('Terjadi Kesalahan, Mohon Ulangi Lagi');
                // Reload captcha jika terjadi error
                $('#reload_captcha_complaint').click();
            }
        });
    });

    

    /* Event Enter Tracking Ticket */
    $('#ticket').keypress(function(event){
        if(event.keyCode == 13){
          $.ajaxSetup({
          headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          }
         });

          var key = $("#ticket").val();
          $.ajax({
            type: 'POST',
            data: {key: key},
            url: '{{route('tracking.json')}}',
            beforeSend: function() {
                $(".answer").html('Sedang memuat data...');
            },
            success: function (data) {
                $(".answer").html('');
                $(".answer").html(data);
            }
        });
        }
    });

</script>

<!-- Chart.js CDN -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>

<!-- ==============================================
     CHART SCRIPT — AJAX METHOD (FIXED)
     Data diambil dari server via fetch(), bukan json_encode
     ============================================== -->
<script>
document.addEventListener('DOMContentLoaded', function() {

  // ===================================================
  // KONFIGURASI GLOBAL CHART.JS
  // ===================================================
  Chart.defaults.font.family  = "'Poppins', sans-serif";
  Chart.defaults.font.size    = 12;
  Chart.defaults.color        = '#64748b';
  Chart.defaults.plugins.legend.labels.usePointStyle = true;
  Chart.defaults.plugins.legend.labels.pointStyle    = 'circle';
  Chart.defaults.plugins.legend.labels.padding       = 16;

  // Warna utama
  var COLOR_BLUE   = '#3b82f6';
  var COLOR_RED    = '#ef4444';
  var COLOR_GREEN  = '#10b981';
  var COLOR_BLUE_L = 'rgba(59,130,246,0.15)';
  var COLOR_RED_L  = 'rgba(239,68,68,0.15)';
  var COLOR_GREEN_L= 'rgba(16,185,129,0.15)';

  // ===================================================
  // AJAX: AMBIL DATA CHART DARI SERVER
  // ===================================================
  fetch('{{ route("api.chart-data") }}', {
    method: 'GET',
    headers: {
      'Accept': 'application/json',
      'X-Requested-With': 'XMLHttpRequest',
      'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]') ? document.querySelector('meta[name="csrf-token"]').getAttribute('content') : ''
    }
  })
  .then(function(response) {
    if (!response.ok) throw new Error('HTTP ' + response.status);
    return response.json();
  })
  .then(function(result) {

    var statusData  = result.chartStatus;
    var monthlyData = result.chartMonthly;

    // ===================================================
    // CHART 1 — Status Terjawab vs Belum (Grouped Bar)
    // ===================================================
    var ctxStatus = document.getElementById('chartStatus');
    if (ctxStatus) {
      new Chart(ctxStatus.getContext('2d'), {
        type: 'bar',
        data: {
          labels: statusData.map(function(d) { return d.label; }),
          datasets: [
            {
              label: 'Sudah Dijawab',
              data: statusData.map(function(d) { return d.terjawab; }),
              backgroundColor: [
                'rgba(59,130,246,0.85)',
                'rgba(239,68,68,0.85)',
                'rgba(16,185,129,0.85)'
              ],
              borderColor: [COLOR_BLUE, COLOR_RED, COLOR_GREEN],
              borderWidth: 2,
              borderRadius: 6,
              borderSkipped: false,
            },
            {
              label: 'Belum Dijawab',
              data: statusData.map(function(d) { return d.belum; }),
              backgroundColor: [
                'rgba(59,130,246,0.25)',
                'rgba(239,68,68,0.25)',
                'rgba(16,185,129,0.25)'
              ],
              borderColor: [
                'rgba(59,130,246,0.5)',
                'rgba(239,68,68,0.5)',
                'rgba(16,185,129,0.5)'
              ],
              borderWidth: 2,
              borderRadius: 6,
              borderSkipped: false,
            }
          ]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          interaction: {
            mode: 'index',
            intersect: false,
          },
          plugins: {
            tooltip: {
              backgroundColor: '#1e293b',
              titleFont: { weight: '600' },
              bodyFont: { size: 13 },
              padding: 12,
              cornerRadius: 8,
              callbacks: {
                label: function(ctx) {
                  return ' ' + ctx.dataset.label + ': ' + ctx.parsed.y + ' layanan';
                }
              }
            },
            legend: {
              position: 'bottom',
            }
          },
          scales: {
            x: {
              grid: { display: false },
              ticks: { font: { weight: '500', size: 12 } }
            },
            y: {
              beginAtZero: true,
              ticks: {
                stepSize: 1,
                font: { size: 11 },
                callback: function(val) { return Number.isInteger(val) ? val : ''; }
              },
              grid: { color: 'rgba(0,0,0,0.05)' }
            }
          }
        }
      });
    }

    // ===================================================
    // CHART 2 — Tren Per Bulan (Line dengan Area)
    // ===================================================
    var ctxMonthly = document.getElementById('chartMonthly');
    if (ctxMonthly) {
      new Chart(ctxMonthly.getContext('2d'), {
        type: 'line',
        data: {
          labels: monthlyData.months,
          datasets: [
            {
              label: 'Pertanyaan',
              data: monthlyData.pertanyaan,
              borderColor: COLOR_BLUE,
              backgroundColor: COLOR_BLUE_L,
              fill: true,
              tension: 0.4,
              borderWidth: 2.5,
              pointRadius: 4,
              pointHoverRadius: 7,
              pointBackgroundColor: '#ffffff',
              pointBorderColor: COLOR_BLUE,
              pointBorderWidth: 2,
              pointHoverBorderWidth: 3,
            },
            {
              label: 'Pengaduan',
              data: monthlyData.pengaduan,
              borderColor: COLOR_RED,
              backgroundColor: COLOR_RED_L,
              fill: true,
              tension: 0.4,
              borderWidth: 2.5,
              pointRadius: 4,
              pointHoverRadius: 7,
              pointBackgroundColor: '#ffffff',
              pointBorderColor: COLOR_RED,
              pointBorderWidth: 2,
              pointHoverBorderWidth: 3,
            },
            {
              label: 'Video Conference',
              data: monthlyData.video_conference,
              borderColor: COLOR_GREEN,
              backgroundColor: COLOR_GREEN_L,
              fill: true,
              tension: 0.4,
              borderWidth: 2.5,
              pointRadius: 4,
              pointHoverRadius: 7,
              pointBackgroundColor: '#ffffff',
              pointBorderColor: COLOR_GREEN,
              pointBorderWidth: 2,
              pointHoverBorderWidth: 3,
            }
          ]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          interaction: {
            mode: 'index',
            intersect: false,
          },
          plugins: {
            tooltip: {
              backgroundColor: '#1e293b',
              titleFont: { weight: '600' },
              bodyFont: { size: 13 },
              padding: 12,
              cornerRadius: 8,
              callbacks: {
                label: function(ctx) {
                  return ' ' + ctx.dataset.label + ': ' + ctx.parsed.y + ' layanan';
                }
              }
            },
            legend: {
              position: 'bottom',
            }
          },
          scales: {
            x: {
              grid: { display: false },
              ticks: {
                font: { size: 10 },
                maxRotation: 45,
                minRotation: 0,
              }
            },
            y: {
              beginAtZero: true,
              ticks: {
                stepSize: 1,
                font: { size: 11 },
                callback: function(val) { return Number.isInteger(val) ? val : ''; }
              },
              grid: { color: 'rgba(0,0,0,0.05)' }
            }
          }
        }
      });
    }

  })
  .catch(function(error) {
    console.error('Gagal memuat data chart:', error);
  });

});
</script>
@endsection