<!-- Container Fluid-->
<div class="container-fluid pg-dashboard" id="container-wrapper">

  <!-- Header kecil (opsional, tidak ubah endpoint) -->
  <div class="pg-head mb-3">
    <div>
      <h1 class="pg-title mb-0">Dashboard Desain</h1>
      <div class="pg-subtitle">Ringkasan omset, transaksi, desain & konsumen</div>
    </div>
  </div>

  <!-- ====== METRIC CARDS ====== -->
  <div class="row mb-2">

    <!-- OMSET -->
    <div class="col-12 col-md-6 col-xl-4 mb-3">
      <div class="card pg-metric h-100">
        <div class="card-body" id="LoadingTotal">
          <div class="pg-metric-row">
            <div class="pg-metric-text">
              <div class="pg-metric-label">OMSET PENJUALAN HARI INI</div>
              <div class="pg-metric-value load-count">0</div>
              <div class="pg-metric-hint">Total penjualan masuk hari ini</div>
            </div>
            <div class="pg-metric-action" data-toggle='tooltip' title="Transaksi Baru [CTRL+O]">
              <a href="#" class="pg-icon-btn cek_transaksi_desain" data-id="0" data-modEdit="baru" id="cart" aria-label="Transaksi Baru">
                <i class="fa fa-fw fa-cart-plus"></i>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- PENDAPATAN -->
    <div class="col-12 col-md-6 col-xl-4 mb-3">
      <div class="card pg-metric h-100">
        <div class="card-body" id="LoadingToday">
          <div class="pg-metric-row">
            <div class="pg-metric-text">
              <div class="pg-metric-label">PENDAPATAN HARI INI</div>
              <div class="pg-metric-value load-now">0</div>
              <div class="pg-metric-hint">Cashflow masuk (hari ini)</div>
            </div>
            <div class="pg-metric-action">
              <a href="#" class="pg-icon-btn pg-icon-success" data-toggle="modal" data-target="#OpenTrx-1" data-id="0" aria-label="Lihat Transaksi">
                <i class="fa fa-shopping-cart"></i>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- PIUTANG -->
    <div class="col-12 col-md-6 col-xl-4 mb-3">
      <div class="card pg-metric h-100">
        <div class="card-body" id="LoadingBaru">
          <div class="pg-metric-row">
            <div class="pg-metric-text">
              <div class="pg-metric-label">PIUTANG HARI INI</div>
              <div class="pg-metric-value load-baru">0</div>
              <div class="pg-metric-hint">Transaksi belum lunas (hari ini)</div>
            </div>
            <div class="pg-metric-action">
              <a href="#" class="pg-icon-btn pg-icon-info" data-toggle="modal" data-target="#OpenTrx-1" data-id="baru" aria-label="Lihat Piutang">
                <i class="fa fa-shopping-cart"></i>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- DESAIN TOTAL -->
    <div class="col-12 col-md-6 col-xl-4 mb-3">
      <div class="card pg-metric h-100">
        <div class="card-body" id="Loadingdesain">
          <div class="pg-metric-row">
            <div class="pg-metric-text">
              <div class="pg-metric-label">DESAIN TOTAL</div>
              <div class="pg-metric-value load-desain">0</div>
              <div class="pg-metric-hint">Total pekerjaan desain</div>
            </div>
            <div class="pg-metric-action">
              <a href="#" class="pg-icon-btn pg-icon-warning" data-toggle="modal" data-target="#OpenTrx-1" data-id="desain" aria-label="Lihat Desain Total">
                <i class="fa fa-photo"></i>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- DESAIN HARI INI -->
    <div class="col-12 col-md-6 col-xl-4 mb-3">
      <div class="card pg-metric h-100">
        <div class="card-body" id="Loadingdesainnow">
          <div class="pg-metric-row">
            <div class="pg-metric-text">
              <div class="pg-metric-label">DESAIN HARI INI</div>
              <div class="pg-metric-value load-desainnow">0</div>
              <div class="pg-metric-hint">Pekerjaan desain masuk hari ini</div>
            </div>
            <div class="pg-metric-action">
              <a href="#" class="pg-icon-btn pg-icon-danger" data-toggle="modal" data-target="#OpenTrx-1" data-id="desainnow" aria-label="Lihat Desain Hari Ini">
                <i class="fa fa-photo"></i>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- KONSUMEN -->
    <div class="col-12 col-md-6 col-xl-4 mb-3">
      <div class="card pg-metric h-100">
        <div class="card-body" id="LoadingKonsumenAktif">
          <div class="pg-metric-row">
            <div class="pg-metric-text">
              <div class="pg-metric-label">KONSUMEN</div>
              <div class="pg-metric-value load-konsumen-total">0</div>
              <div class="pg-metric-hint">Total konsumen tersimpan</div>
            </div>
            <div class="pg-metric-action">
              <a href="#" class="pg-icon-btn pg-icon-primary" data-toggle="modal" data-target="#OpenKon" data-id="1" aria-label="Tambah Konsumen">
                <i class="fa fa-user-plus"></i>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>

  <!-- ====== CONTENT ROW (GRAFIK + INVOICE) ====== -->
  <div class="row">

    <!-- GRAFIK -->
    <div class="col-12 col-lg-8 mb-3" id="LoadingGrafik">
      <div class="card pg-panel">
        <div class="card-header pg-panel-head">
          <div class="pg-panel-left">
            <div class="pg-panel-title" id="nama_bulan_pendapatan"></div>
            <div class="pg-panel-sub">Grafik omset & performa periode</div>
          </div>

          <div class="pg-panel-actions">
            <button class="btn btn-info btn-sm" id="grafik_bulan_omset">
              <i class="fa fa-calendar"></i> Bulan
            </button>

            <div class="dropdown dropdown-select">
              <a class="btn btn-primary btn-sm dropdown-toggle" href="#" role="button" id="dropdownMenuLink"
                 data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <?=getBulan(date('m'));?>
              </a>
              <div class="dropdown-menu dropdown-menu-right shadow animated--fade-in" aria-labelledby="dropdownMenuLink">
                <div class="dropdown-header">Pilih Periode</div>
                <?php
                  $bulan = loopBulan();
                  $bulanini = date('m');
                  foreach($bulan AS $key=>$val){
                    $active = ($key==$bulanini) ? 'active' : '';
                    echo '<a class="dropdown-item '.$active.' p-0 pl-3" data-tipe="omset" data-id="'.$key.'" href="javascript:void(0);">'.$val.'</a>';
                  }
                ?>
              </div>
            </div>
          </div>
        </div>

        <div class="card-body pg-panel-body">
          <div class="pg-chart-wrap">
            <canvas class="myAreaChart" id="myAreaChartDesain"></canvas>
          </div>
        </div>
      </div>
    </div>

    <!-- INVOICE -->
    <div class="col-12 col-lg-4 mb-3">
      <div class="card pg-panel" id="LoadingInvoice">
        <div class="card-header pg-panel-head">
          <div class="pg-panel-left">
            <div class="pg-panel-title">Invoice</div>
            <div class="pg-panel-sub">Ringkasan invoice terbaru</div>
          </div>
          <a class="btn btn-danger btn-sm" href="<?=base_url('penjualan/order');?>">
            View More
          </a>
        </div>

        <div class="table-responsive pg-table">
          <table class="table align-items-center table-flush mb-0">
            <thead class="thead-light">
              <tr>
                <th>ORDER ID</th>
                <th class="text-right">STATUS</th>
                <th class="text-right">LUNAS</th>
              </tr>
            </thead>
            <tbody id="load-invoice">
              <!-- ajax -->
            </tbody>
          </table>
        </div>

        <div class="card-footer pg-panel-foot">
          <small class="text-muted">*Data terupdate otomatis dari sistem</small>
        </div>
      </div>
    </div>

  </div>
</div>

<style>
  /* =========================
     DASHBOARD DESAIN - MODERN UI
     (aman: tidak ubah logic, hanya tampilan)
  ========================== */
  .pg-dashboard{
    --pg-bg: #f5f7fa;
    --pg-card: #ffffff;
    --pg-text: #1f2937;
    --pg-dim: #6b7280;
    --pg-border: rgba(15,23,42,.08);
    --pg-shadow: 0 12px 30px rgba(0,0,0,.06);
    --pg-radius: 14px;
  }

  .pg-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:12px;
  }
  .pg-title{
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--pg-text);
    letter-spacing: .2px;
  }
  .pg-subtitle{
    font-size: .88rem;
    color: var(--pg-dim);
  }

  /* metric card */
  .pg-metric{
    border: 1px solid var(--pg-border);
    border-radius: var(--pg-radius);
    box-shadow: var(--pg-shadow);
    overflow: hidden;
  }
  .pg-metric .card-body{
    padding: 16px 16px;
  }
  .pg-metric-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 12px;
  }
  .pg-metric-label{
    font-size: .74rem;
    font-weight: 800;
    color: #334155;
    letter-spacing: .4px;
    text-transform: uppercase;
  }
  .pg-metric-value{
    margin-top: 6px;
    font-size: 1.55rem;
    font-weight: 900;
    color: #0f172a;
    line-height: 1.1;
    word-break: break-word;
  }
  .pg-metric-hint{
    margin-top: 6px;
    font-size: .85rem;
    color: var(--pg-dim);
  }

  .pg-icon-btn{
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border: 1px solid var(--pg-border);
    background: #f8fafc;
    box-shadow: 0 8px 20px rgba(0,0,0,.04);
    color: #0f172a;
    transition: transform .12s ease, box-shadow .12s ease;
  }
  .pg-icon-btn i{ font-size: 18px; }
  .pg-icon-btn:hover{
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(0,0,0,.08);
    text-decoration:none;
  }

  /* warna icon variant */
  .pg-icon-success{ background: rgba(34,197,94,.10); color: #16a34a; border-color: rgba(34,197,94,.20); }
  .pg-icon-info{ background: rgba(14,165,233,.10); color: #0284c7; border-color: rgba(14,165,233,.22); }
  .pg-icon-warning{ background: rgba(245,158,11,.12); color: #b45309; border-color: rgba(245,158,11,.22); }
  .pg-icon-danger{ background: rgba(239,68,68,.10); color: #dc2626; border-color: rgba(239,68,68,.22); }
  .pg-icon-primary{ background: rgba(59,130,246,.10); color: #2563eb; border-color: rgba(59,130,246,.22); }

  /* panel */
  .pg-panel{
    border: 1px solid var(--pg-border);
    border-radius: var(--pg-radius);
    box-shadow: var(--pg-shadow);
    overflow: hidden;
    margin-top: 0; /* override card margin-top lama */
  }
  .pg-panel-head{
    background: linear-gradient(180deg, #ffffff, #fbfdff);
    border-bottom: 1px solid var(--pg-border);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 10px;
    padding: 14px 14px;
  }
  .pg-panel-left{
    display:flex;
    flex-direction:column;
    gap: 2px;
    min-width: 0;
  }
  .pg-panel-title{
    font-weight: 900;
    color: #0f172a;
    font-size: .98rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .pg-panel-sub{
    font-size: .82rem;
    color: var(--pg-dim);
  }
  .pg-panel-actions{
    display:flex;
    align-items:center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content:flex-end;
  }
  .pg-panel-body{ padding: 14px; }
  .pg-panel-foot{ background:#fff; border-top: 1px solid var(--pg-border); }

  /* chart */
  .pg-chart-wrap{
    width:100%;
    min-height: 320px;
  }

  /* table */
  .pg-table thead th{
    font-size: .75rem;
    letter-spacing: .3px;
    text-transform: uppercase;
  }
  .pg-table tbody td{
    font-size: .9rem;
    vertical-align: middle;
  }

  /* responsive tweaks */
  @media (max-width: 576px){
    .pg-metric .card-body{ padding: 14px; }
    .pg-metric-value{ font-size: 1.35rem; }
    .pg-icon-btn{ width: 42px; height: 42px; }
    .pg-chart-wrap{ min-height: 260px; }
  }

  /* =========================
     Bersihin CSS lama yang bikin kacau
     (jangan pakai .card global lagi)
  ========================== */
</style>

<script>
  $('.cek_transaksi_desain').click(function(e){
    e.preventDefault();
    var id =  $(this).data("id")
    var mod = $(this).data('modedit');

    $.ajax({
      type: 'POST',
      url: base_url + "main/cek_akses",
      data: {id:id,mod:mod},
      dataType: "json",
      beforeSend: function () {
        $.LoadingOverlay("show", {
          background  : "rgba(165, 190, 100, 0.7)",
          fade:500,
          zIndex:100
        });
      },
      success: handle_CartDesain,
      error: function (xhr, ajaxOptions, thrownError) {
        sweet('Peringatan!!!',thrownError,'warning','warning');
      }
    });
  });

  function handle_CartDesain(result) {
    $("#OpenCart-1").addClass("in");
    if (result.status == 200) {
      $("#OpenCart-1").modal("show");
      var id = result.id;
      var permissions = result.mod;
      $("#print_pdf").attr("data-id", id);
      $("#batal_order").attr("data-id", id);
      $("#batal_order").attr("data-modEdit", "batal");
      if (
        permissions == "view" &&
        result.total_order == result.total_bayar &&
        result.total_order > 0
      ) {
        $("#print").hide();
        $("#bayarin").hide();
        $("#pending").hide();
        $("#batal_order").show();
        $("#print_pdf").show();
      } else {
        $("#print").show();
        $("#bayarin").show();
        $("#pending").show();
        $("#batal_order").hide();
        $("#print_pdf").hide();
      }
      $.ajax({
        type: "POST",
        url: base_url + "penjualan/cart",
        data: {
          id: id,
          edit: permissions,
        },
        cache: false,
        beforeSend: function () {
          $("script[src*='penjualan.js']").remove();
        },
        success: function (htmlExercise) {
          $.getScript(base_url + "assets/js/penjualan.js");
          $(".load-data").html(htmlExercise);
        },
        error: function (res, status, httpMessage) {
          $("body").loading("stop");
          console.log(res.status);
          if (res.status == 401) {
            sweet_login(httpMessage, "warning", base_url);
          } else {
            sweet("Peringatan!!!", httpMessage, "warning", "warning");
          }
        },
      });
    } else {
      Swal.fire({
        title: result.msg,
        icon: "warning",
        showDenyButton: false,
        showCancelButton: false,
        confirmButtonText: "OK",
        denyButtonText: `Don't save`,
      }).then((tx) => {
        if (tx.isConfirmed) {
          $("#OpenCart-1").modal("hide");
          $("body").loading("stop");
        } else {
          if (tx.isDenied) {
            Swal.fire("Changes are not saved", "", "info");
            $("body").loading("stop");
          }
        }
      });
    }
    $("body").loading("stop");
  }

  $('.dropdown-select').on('click', '.dropdown-menu a', function() {
    var target = $(this).html();
    var id = $(this).attr('data-id');
    var tipe = $(this).attr('data-tipe');

    if(tipe=='omset'){
      load_chart(id);
    }
    $('.dropdown-item.active').removeClass("active");
    $(this).addClass("active");
    $(this).parents('.dropdown-select').find('.dropdown-toggle').html(target + ' <span class="caret"></span>');
  });

  $(document).ready(function() {
    loadcount();baru();desain();konsumen_total();hari_ini();desainnow();
    load_chart_desain();loadinvoice();
  });

  function loadinvoice(){
    $.ajaxQueue({
      url:  base_url+"penjualan/list_invoice_desain",
      cache: false,
      beforeSend: function(){
        $("#LoadingInvoice").loading();
      },
      success: function (data) {
        $("#LoadingInvoice").loading('stop');
        $('#load-invoice').html(data);
      }
    });
  }

  function loadcount(){
    $.ajaxQueue({
      url:  base_url+"penjualan/totaltrx",
      cache: false,
      beforeSend: function(){
        $("#LoadingTotal").loading();
      },
      success: function (data) {
        $("#LoadingTotal").loading("stop");
        $('.load-count').html(data);
      }
    });
  }
  function hari_ini(){
    $.ajaxQueue({
      url:  base_url+"penjualan/hari_ini",
      cache: false,
      beforeSend: function(){
        $("#LoadingToday").loading();
      },
      success: function (data) {
        $("#LoadingToday").loading('stop');
        $('.load-now').html(data);
      }
    });
  }
  function baru(){
    $.ajaxQueue({
      url:  base_url+"penjualan/baru",
      cache: false,
      beforeSend: function(){
        $("#LoadingBaru").loading();
      },
      success: function (data) {
        $("#LoadingBaru").loading('stop');
        $('.load-baru').html(data);
      }
    });
  }
  function desain(){
    $.ajaxQueue({
      url:  base_url+"penjualan/desain",
      cache: false,
      beforeSend: function(){
        $("#Loadingdesain").loading();
      },
      success: function (data) {
        $("#Loadingdesain").loading('stop');
        $('.load-desain').html(data);
      }
    });
  }
  function desainnow(){
    $.ajaxQueue({
      url:  base_url+"penjualan/desainnow",
      cache: false,
      beforeSend: function(){
        $("#Loadingdesainnow").loading();
      },
      success: function (data) {
        $("#Loadingdesainnow").loading('stop');
        $('.load-desainnow').html(data);
      }
    });
  }
  function konsumen_total(){
    $.ajaxQueue({
      url:  base_url+"penjualan/konsumen_total",
      cache: false,
      beforeSend: function(){ $("#LoadingKonsumenAktif").loading(); },
      success: function (data) {
        $("#LoadingKonsumenAktif").loading('stop');
        $('.load-konsumen-total').html(data);
      }
    });
  }
  function searchFilter(){}
</script>
