{% extends "layout/ver_baru/base_admin.html" %}
{% load humanize %}
{% block content %}

<div class="container mx-auto px-4 py-6">
  <h2 class="text-center text-white p-3 rounded bg-red-600 font-bold text-xl mb-6">
    Laporan Laba Rugi
  </h2>

  <!-- Form Pilih Periode -->
  <div class="max-w-3xl mx-auto mb-6">
    <div class="bg-white shadow rounded-lg p-4">
      <form method="get" class="flex flex-wrap items-center justify-center gap-3">
        <select class="border border-red-500 rounded px-3 py-2" name="bulan" id="bulan" required>
          <option value="">-- Bulan --</option>
          <option value="01" {% if bulan == "01" %}selected{% endif %}>Januari</option>
          <option value="02" {% if bulan == "02" %}selected{% endif %}>Februari</option>
          <option value="03" {% if bulan == "03" %}selected{% endif %}>Maret</option>
          <option value="04" {% if bulan == "04" %}selected{% endif %}>April</option>
          <option value="05" {% if bulan == "05" %}selected{% endif %}>Mei</option>
          <option value="06" {% if bulan == "06" %}selected{% endif %}>Juni</option>
          <option value="07" {% if bulan == "07" %}selected{% endif %}>Juli</option>
          <option value="08" {% if bulan == "08" %}selected{% endif %}>Agustus</option>
          <option value="09" {% if bulan == "09" %}selected{% endif %}>September</option>
          <option value="10" {% if bulan == "10" %}selected{% endif %}>Oktober</option>
          <option value="11" {% if bulan == "11" %}selected{% endif %}>November</option>
          <option value="12" {% if bulan == "12" %}selected{% endif %}>Desember</option>
        </select>

        <select class="border border-red-500 rounded px-3 py-2" name="tahun" id="tahun" required>
          <option value="">-- Tahun --</option>
          {% for th in tahun_list %}
          <option value="{{ th }}" {% if th|stringformat:"s" == tahun %}selected{% endif %}>{{ th }}</option>
          {% endfor %}
        </select>

        <button type="submit"
          class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded shadow">
          Tampilkan
        </button>
      </form>
    </div>
  </div>

  <!-- Tabs -->
  <div x-data="{ tab: 'pendapatan' }">
    <div class="border-b mb-4 flex space-x-2">
      <button @click="tab='pendapatan'" :class="tab==='pendapatan' ? 'bg-red-600 text-white' : 'text-red-600'"
        class="px-4 py-2 rounded-t font-medium">
        Pendapatan
      </button>
      <button @click="tab='beban'" :class="tab==='beban' ? 'bg-red-600 text-white' : 'text-red-600'"
        class="px-4 py-2 rounded-t font-medium">
        Beban
      </button>
      <button @click="tab='ringkasan'" :class="tab==='ringkasan' ? 'bg-red-600 text-white' : 'text-red-600'"
        class="px-4 py-2 rounded-t font-medium">
        Ringkasan
      </button>
    </div>

    <!-- PENDAPATAN -->
    <div x-show="tab==='pendapatan'" class="bg-white shadow rounded-lg p-4">
      <h5 class="text-red-600 font-bold mb-2">Pendapatan</h5>
      <table class="w-full border text-sm">
        <tr class="bg-red-100 font-bold">
          <td class="px-3 py-2">Total Pendapatan</td>
          <td class="px-3 py-2 text-right">{{ total_pendapatan|intcomma }}</td>
        </tr>
        <tr><td class="px-3 py-1">Indihome</td><td class="px-3 py-1 text-right">{{ pendapatan_indihome|intcomma }}</td></tr>
        <tr><td class="px-3 py-1">Billing</td><td class="px-3 py-1 text-right">{{ pendapatan_billing|intcomma }}</td></tr>
        <tr><td class="px-3 py-1">Modem</td><td class="px-3 py-1 text-right">{{ pendapatan_modem|intcomma }}</td></tr>
        <tr><td class="px-3 py-1">Fee</td><td class="px-3 py-1 text-right">{{ pendapatan_fee|intcomma }}</td></tr>
        <tr><td class="px-3 py-1">Indibiz</td><td class="px-3 py-1 text-right">{{ pendapatan_indibiz|intcomma }}</td></tr>
        <tr><td class="px-3 py-1">Bunga</td><td class="px-3 py-1 text-right">{{ pendapatan_bunga|intcomma }}</td></tr>
      </table>
    </div>

    <!-- BEBAN -->
    <div x-show="tab==='beban'" class="bg-white shadow rounded-lg p-4">
      <h5 class="text-red-600 font-bold mb-2">Beban</h5>
      <table class="w-full border text-sm">
        <tr class="bg-red-100 font-bold">
          <td class="px-3 py-2">Total Beban</td>
          <td class="px-3 py-2 text-right">{{ total_beban|intcomma }}</td>
        </tr>
        <tr><td class="px-3 py-1">Fee Sales Indihome</td><td class="px-3 py-1 text-right">{{ beban_fee_sales_indihome|intcomma }}</td></tr>
        <tr><td class="px-3 py-1">Fee Sales Orbit</td><td class="px-3 py-1 text-right">{{ beban_fee_sales_orbit|intcomma }}</td></tr>
        <tr><td class="px-3 py-1">Gaji Komisaris</td><td class="px-3 py-1 text-right">{{ beban_gaji_komisaris|intcomma }}</td></tr>
        <tr><td class="px-3 py-1">Gaji Direktur</td><td class="px-3 py-1 text-right">{{ beban_gaji_direktur|intcomma }}</td></tr>
        <!-- dst… (lanjutkan seperti data beban kamu di atas, semua pakai <tr><td class="px-3 py-1">Nama</td><td class="px-3 py-1 text-right">{{ var }}</td></tr>) -->
      </table>
    </div>

    <!-- RINGKASAN -->
    <div x-show="tab==='ringkasan'" class="bg-white shadow rounded-lg p-4">
      <h5 class="text-red-600 font-bold mb-2">Ringkasan Laba Rugi</h5>
      <table class="w-full border text-sm">
        <tr><td class="px-3 py-2">Total Pendapatan</td><td class="px-3 py-2 text-right">{{ total_pendapatan|intcomma }}</td></tr>
        <tr><td class="px-3 py-2">Total Beban</td><td class="px-3 py-2 text-right">{{ total_beban|intcomma }}</td></tr>
        <tr class="{% if laba_rugi >= 0 %}bg-green-100 font-bold{% else %}bg-red-100 font-bold{% endif %}">
          <td class="px-3 py-2">Laba Rugi</td>
          <td class="px-3 py-2 text-right">{{ laba_rugi|intcomma }}</td>
        </tr>
      </table>
    </div>
  </div>
</div>

<!-- Alpine.js untuk tab -->
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>

{% endblock %}