{% extends 'base.html' %}

{% block content %}
{% include 'rapor/rapor_nawbar_bst.html' %}

<div class="container mt-4">
    <div class="d-flex justify-content-center mb-4 gap-2">
        <a href="?filtre=bugun" class="btn btn-outline-primary {% if secili_filtre == 'bugun' %}active{% endif %}">Bugün</a>
        <a href="?filtre=son7gun" class="btn btn-outline-primary {% if secili_filtre == 'son7gun' %}active{% endif %}">Son 7 Gün</a>
        <a href="?filtre=buay" class="btn btn-outline-primary {% if secili_filtre == 'buay' %}active{% endif %}">Bu Ay</a>
        <form method="get" class="row g-2 mb-4 justify-content-center">
          <input type="hidden" name="filtre" value="{{ secili_filtre }}">
          <div class="col-auto">
            <select name="musteri" class="form-select" onchange="this.form.submit()">
              <option value="">Tüm Müşteriler</option>
              {% for m in tum_musteriler %}
                <option value="{{ m }}" {% if aktif_musteri == m %}selected{% endif %}>{{ m }}</option>
              {% endfor %}
            </select>
          </div>
          <div class="col-auto">
            <select name="urun" class="form-select" onchange="this.form.submit()">
              <option value="">Tüm Ürünler</option>
              {% for u in tum_urunler %}
                <option value="{{ u }}" {% if aktif_urun == u %}selected{% endif %}>{{ u }}</option>
              {% endfor %}
            </select>
          </div>
        </form>
    </div>

    <h2 class="mb-4 text-center">Üretim Raporları</h2>
    <div class="row">
        <!-- 1. Günlük Üretim -->
        <div class="col-md-6 mb-4">
            <div class="card shadow-sm">
                <div class="card-body">
                    <h5 class="card-title text-center"> {{ rapor_baslik }} Günlük Üretimi </h5>
                    {% if gunluk_uretim|length > 0 %}
                      <canvas id="gunlukUretimChart" height="300"></canvas>
                      <p class="text-center mt-3 fw-bold text-primary">
                        Toplam Üretim: {{ toplam_uretim_miktari|floatformat:0 }} adet
                      </p>
                    {% else %}
                      <p class="text-center text-muted">Gösterilecek veri bulunamadı.</p>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- 2. Günlük Net Kâr -->
        <div class="col-md-6 mb-4">
            <div class="card shadow-sm">
                <div class="card-body">
                    <h5 class="card-title text-center"> {{ rapor_baslik }}Günlük Net Kâri </h5>
                    {% if kar_tablosu|length > 0 %}
                      <canvas id="gunlukKarChart" height="300"></canvas>
                      <p class="text-center mt-3 fw-bold text-success">
                        Toplam Net Kâr: {{ toplam_net_kar|floatformat:2 }} €
                      </p>
                    {% else %}
                      <p class="text-center text-muted">Gösterilecek veri bulunamadı.</p>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- 3. Müşteri Bazlı Ciro -->
        <div class="col-md-6 mb-4">
            <div class="card shadow-sm">
                <div class="card-body">
                    <h5 class="card-title text-center">{{ rapor_baslik }} Müşteri Bazlı Cirosu</h5>
                    {% if musteri_ciro_listesi|length > 0 %}
                      <canvas id="musteriCiroChart" height="300"></canvas>
                      <p class="text-center mt-3 fw-bold text-warning">
                        Toplam Ciro: {{ toplam_musteri_cirosu|floatformat:2 }} €
                      </p>
                    {% else %}
                      <p class="text-center text-muted">Gösterilecek veri bulunamadı.</p>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- 4. Müşteri Bazlı Üretim -->
        <div class="col-md-6 mb-4">
            <div class="card shadow-sm">
                <div class="card-body">
                    <h5 class="card-title text-center">{{ rapor_baslik }}Müşteri Bazlı Üretimi</h5>
                    {% if musteri_uretim|length > 0 %}
                      <canvas id="musteriUretimChart" height="300"></canvas>
                      <p class="text-center mt-3 fw-bold text-info">
                        Toplam Müşteri Üretimi: {{ toplam_musteri_uretimi|floatformat:0 }} adet
                      </p>
                    {% else %}
                      <p class="text-center text-muted">Gösterilecek veri bulunamadı.</p>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- 5. Müşteri Bazlı Net Kâr -->
        <div class="col-md-6 mb-4">
          <div class="card shadow-sm">
            <div class="card-body">
              <h5 class="card-title text-center"> {{ rapor_baslik }}Müşteri Bazlı Net Kâri </h5>
              {% if musteri_kar_listesi|length > 0 %}
                <canvas id="musteriKarChart" height="300"></canvas>
                <p class="text-center mt-2 text-muted" style="font-size:.9em">
                  Not: Sabit merkezi giderler dikkate alınmamıştır.
                </p>
                <p class="text-center mt-2 fw-bold text-danger">
                  Toplam Müşteri Net Kârı: {{ toplam_musteri_kari|floatformat:2 }} €
                </p>
              {% else %}
                <p class="text-center text-muted">Gösterilecek veri bulunamadı.</p>
              {% endif %}
            </div>
          </div>
        </div>
        
        <!-- ... Geçmiş Aylar Özeti tablosu bittiği yerin altına EKLE -->
        <div class="row">
          <!-- A) Geçmiş Aylar — Toplamlar (çoklu seri) -->
          <div class="col-md-12 mb-4">
            <div class="card shadow-sm">
              <div class="card-body">
                <h5 class="card-title text-center">Geçmiş Aylar — Toplamlar</h5>
                <canvas id="aylikToplamlarChart" height="320"></canvas>
                <p class="text-center mt-2 text-muted" style="font-size:.9em">
                  Not: Kâr = Ciro − Gider
                </p>
              </div>
            </div>
          </div>
        
          <!-- B) Geçmiş Aylar — Müşteri Bazlı (ay seçici + grafikleri) -->
          <div class="col-md-12 mb-4">
            <div class="card shadow-sm">
              <div class="card-body">
                <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
                  <h5 class="card-title m-0">Geçmiş Aylar — Müşteri Bazlı</h5>
                  <div class="d-flex align-items-center gap-2">
                    <label for="aySec" class="form-label m-0">Ay seç:</label>
                    <select id="aySec" class="form-select form-select-sm"></select>
                  </div>
                </div>
                <div class="row mt-3">
                  <div class="col-lg-4 mb-3">
                    <canvas id="musteriAylikCiroChart" height="280"></canvas>
                  </div>
                  <div class="col-lg-4 mb-3">
                    <canvas id="musteriAylikKarChart" height="280"></canvas>
                  </div>
                  <div class="col-lg-4 mb-3">
                    <canvas id="musteriAylikUretimChart" height="280"></canvas>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
    </div>
</div>

<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>
<script>
const gunlukUretimData   = {{ gunluk_uretim|safe }};
const karTablosu         = {{ kar_tablosu|safe }};
const musteriCiro        = {{ musteri_ciro_listesi|safe }};
const musteriUretim      = {{ musteri_uretim|safe }};
const musteriKarListesi  = {{ musteri_kar_listesi|safe }};

function drawBarChart(id, labels, data, label, colorFn=null) {
  new Chart(document.getElementById(id), {
    type: 'bar',
    data: {
      labels: labels,
      datasets: [{
        label: label,
        data: data,
        backgroundColor: colorFn ? data.map(colorFn) : 'rgba(13,110,253,.7)'
      }]
    },
    plugins:[ChartDataLabels],
    options:{
      responsive:true,
      scales:{y:{beginAtZero:true}},
      plugins:{
        datalabels:{
          anchor:'end', align:'start',
          formatter:v=>v.toLocaleString('tr-TR',{maximumFractionDigits:2}),
          color:'#000', font:{weight:'bold',size:11}
        }
      }
    }
  });
}

/* 1. Günlük Üretim */
if (gunlukUretimData.length)
  drawBarChart('gunlukUretimChart',
    gunlukUretimData.map(x=>x.uretim_tarihi),
    gunlukUretimData.map(x=>x.toplam_miktar),
    'Günlük Üretim (adet)'
  );

/* 2. Günlük Net Kâr */
if (karTablosu.length)
  drawBarChart('gunlukKarChart',
    karTablosu.map(x => x.tarih),
    karTablosu.map(x => x.net_kar),
    'Günlük Net Kâr (€)',
    v => parseFloat(v) < 0 ? 'rgba(220,53,69,.7)' : 'rgba(13,110,253,.7)'
  );

/* 3. Müşteri Bazlı Ciro */
if (musteriCiro.length)
  drawBarChart('musteriCiroChart',
    musteriCiro.map(x=>x.musteri_adi),
    musteriCiro.map(x=>x.toplam_ciro),
    'Müşteri Bazlı Ciro (€)'
  );

/* 4. Müşteri Bazlı Üretim */
if (musteriUretim.length)
  drawBarChart('musteriUretimChart',
    musteriUretim.map(x=>x.musteri_adi),
    musteriUretim.map(x=>x.toplam_miktar),
    'Müşteri Bazlı Üretim'
  );

/* 5. Müşteri Bazlı Net Kâr */
if (musteriKarListesi.length)
  drawBarChart('musteriKarChart',
    musteriKarListesi.map(x=>x.musteri_adi),
    musteriKarListesi.map(x=>x.net_kar),
    'Müşteri Bazlı Net Kâr (€)',
    v => parseFloat(v) < 0 ? 'rgba(220,53,69,.7)' : 'rgba(13,110,253,.7)'
  );


/* ==== AYLAR İÇİN GRAFİKLER ==== */
const aylikOzetler = {{ aylik_ozetler|safe }};
const aylikOzetlerMusteri = {{ aylik_ozetler_musteri|safe }};

/* Yardımcı: chart destroy guard */
function resetChart(chartRef) {
  if (chartRef && chartRef.destroy) chartRef.destroy();
}

/* ---- A) Geçmiş Aylar — Toplamlar (çoklu seri) ---- */
(function drawMonthlyTotals() {
  if (!Array.isArray(aylikOzetler) || aylikOzetler.length === 0) return;

  const labels = aylikOzetler
    .map(x => `${x.yil}-${String(x.ay).padStart(2,'0')}`)
    .reverse(); // eskiden yeniye yerine yeniye doğru istiyorsan kaldır

  const uretim = aylikOzetler.map(x => Number(x.toplam_uretim) || 0).reverse();
  const ciro   = aylikOzetler.map(x => Number(x.toplam_ciro)   || 0).reverse();
  const gider  = aylikOzetler.map(x => Number(x.toplam_gider)  || 0).reverse();
  const kar    = aylikOzetler.map(x => Number(x.toplam_kar)    || 0).reverse();

  const ctx = document.getElementById('aylikToplamlarChart');
  if (!ctx) return;

  // Çoklu dataset (2 bar + 1 bar + 1 line)
  new Chart(ctx, {
    data: {
      labels,
      datasets: [
        { type: 'bar',  label: 'Üretim (adet)', data: uretim },
        { type: 'bar',  label: 'Ciro (€)',      data: ciro   },
        { type: 'bar',  label: 'Gider (€)',     data: gider  },
        { type: 'line', label: 'Kâr (€)',       data: kar    },
      ]
    },
    plugins:[ChartDataLabels],
    options:{
      responsive:true,
      scales:{ y:{ beginAtZero:true } },
      plugins:{
        legend:{ position:'top' },
        datalabels:{
          anchor:'end', align:'top',
          formatter:v=>v.toLocaleString('tr-TR',{maximumFractionDigits:2}),
          rotation:-90, offset:4,
          font:{size:10}
        },
        tooltip: {
          callbacks: {
            label(ctx) {
              const v = Number(ctx.parsed.y ?? ctx.raw ?? 0);
              const ds = ctx.dataset.label || '';
              return `${ds}: ${v.toLocaleString('tr-TR', {maximumFractionDigits:2})}`;
            }
          }
        }
      }
    }
  });
})();

/* ---- B) Geçmiş Aylar — Müşteri Bazlı (ay seçici + 3 grafik) ---- */
let custCiroChart, custKarChart, custUretimChart;

function uniqueMonthPairs(rows) {
  const seen = new Set();
  const out = [];
  // En yeni aylar önde dursun
  rows.slice().sort((a,b) =>
    (b.yil - a.yil) || (b.ay - a.ay)
  ).forEach(r => {
    const key = `${r.yil}-${String(r.ay).padStart(2,'0')}`;
    if (!seen.has(key)) { seen.add(key); out.push({key, yil:r.yil, ay:r.ay}); }
  });
  return out;
}

function filterByMonth(rows, yil, ay) {
  return rows.filter(r => r.yil === yil && r.ay === ay);
}

function fillMonthSelect(selectEl, pairs) {
  selectEl.innerHTML = '';
  pairs.forEach(p => {
    const opt = document.createElement('option');
    opt.value = `${p.yil}-${String(p.ay).padStart(2,'0')}`;
    opt.textContent = `${p.yil}-${String(p.ay).padStart(2,'0')}`;
    selectEl.appendChild(opt);
  });
}

function drawCustomerMonthlyCharts(selectedY, selectedM) {
  const rows = filterByMonth(aylikOzetlerMusteri, selectedY, selectedM);
  const labels = rows.map(r => r.musteri_adi);

  const ciro   = rows.map(r => Number(r.toplam_ciro)   || 0);
  const kar    = rows.map(r => Number(r.toplam_kar)    || 0);
  const uretim = rows.map(r => Number(r.toplam_uretim) || 0);

  // CIRO
  resetChart(custCiroChart);
  custCiroChart = new Chart(document.getElementById('musteriAylikCiroChart'), {
    type: 'bar',
    data: { labels, datasets:[{ label:'Ciro (€)', data: ciro }] },
    plugins:[ChartDataLabels],
    options:{
      scales:{ y:{ beginAtZero:true } },
      plugins:{
        datalabels:{
          anchor:'end', align:'start',
          formatter:v=>v.toLocaleString('tr-TR',{maximumFractionDigits:2}),
          font:{size:10}
        }
      }
    }
  });

  // KAR (negatifler kırmızı görünsün)
  resetChart(custKarChart);
  custKarChart = new Chart(document.getElementById('musteriAylikKarChart'), {
    type: 'bar',
    data: { labels, datasets:[{
      label:'Kâr (€)',
      data: kar,
      backgroundColor: kar.map(v => (parseFloat(v)<0 ? 'rgba(220,53,69,.7)' : 'rgba(13,110,253,.7)'))
    }]},
    plugins:[ChartDataLabels],
    options:{
      scales:{ y:{ beginAtZero:true } },
      plugins:{
        datalabels:{
          anchor:'end', align:'start',
          formatter:v=>v.toLocaleString('tr-TR',{maximumFractionDigits:2}),
          font:{size:10}
        }
      }
    }
  });

  // URETIM
  resetChart(custUretimChart);
  custUretimChart = new Chart(document.getElementById('musteriAylikUretimChart'), {
    type: 'bar',
    data: { labels, datasets:[{ label:'Üretim (adet)', data: uretim }] },
    plugins:[ChartDataLabels],
    options:{
      scales:{ y:{ beginAtZero:true } },
      plugins:{
        datalabels:{
          anchor:'end', align:'start',
          formatter:v=>v.toLocaleString('tr-TR',{maximumFractionDigits:0}),
          font:{size:10}
        }
      }
    }
  });
}

// Ay seçiciyi hazırla
(function initCustomerMonthlyUI() {
  const sel = document.getElementById('aySec');
  if (!sel || !Array.isArray(aylikOzetlerMusteri) || aylikOzetlerMusteri.length===0) return;

  const pairs = uniqueMonthPairs(aylikOzetlerMusteri);
  fillMonthSelect(sel, pairs);

  // Varsayılan: en yeni ay (ilk seçenek)
  const [defY, defM] = (pairs[0] ? [pairs[0].yil, pairs[0].ay] : [null, null]);
  if (defY) {
    sel.value = `${defY}-${String(defM).padStart(2,'0')}`;
    drawCustomerMonthlyCharts(defY, defM);
  }

  sel.addEventListener('change', e => {
    const [y, m] = e.target.value.split('-').map(x => parseInt(x, 10));
    drawCustomerMonthlyCharts(y, m);
  });
})();
</script>
{% endblock %}