<template>
  <q-page v-if="canReadFinance" class="q-pa-md">
    <div class="row q-col-gutter-sm items-end q-mb-md">
      <div class="col-12 col-sm-4 col-md-3">
        <q-input v-model="accountCode" filled dense label="Cari Kod" clearable />
      </div>
      <div class="col-12 col-sm-4 col-md-2">
        <q-input v-model="endDate" filled dense label="Son Tarih" readonly>
          <template #append>
            <q-icon name="event" class="cursor-pointer">
              <q-popup-proxy cover transition-show="scale" transition-hide="scale">
                <q-date v-model="endDate" mask="YYYY-MM-DD" locale="tr-TR" />
              </q-popup-proxy>
            </q-icon>
          </template>
        </q-input>
      </div>
      <div class="col-12 col-sm-4 col-md-3">
        <q-select
          v-model="parislemler"
          :options="parislemOptions"
          emit-value
          map-options
          multiple
          filled
          dense
          label="Parasal İşlem Tipi"
        />
      </div>
      <div class="col-auto">
        <q-btn color="primary" icon="filter_alt" label="Filtrele" :loading="store.loading" @click="load" />
      </div>
    </div>

    <div class="text-caption text-grey-7 q-mb-sm">
      Son Tarih bazlı fatura/ödeme karşılaştırma ekranı
    </div>

    <q-table
      :rows="store.masterRows"
      :columns="masterColumns"
      row-key="group_key"
      flat
      bordered
      dense
      :loading="store.loading"
      :rows-per-page-options="[25, 50, 100, 0]"
    >
      <template #body="props">
        <q-tr :props="props">
          <q-td auto-width>
            <q-btn
              size="sm"
              dense
              flat
              round
              :icon="expandedMaster[props.row.group_key] ? 'remove' : 'add'"
              @click="toggleMaster(props.row.group_key)"
            />
          </q-td>
          <q-td key="cari8" :props="props">{{ props.row.cari8 }}</q-td>
          <q-td key="cari_detay" :props="props">{{ props.row.cari_detay }}</q-td>
          <q-td key="acik_kalem_tutari_usd" :props="props" class="text-right">{{ fmt(props.row.acik_kalem_tutari_usd) }}</q-td>
          <q-td key="acik_kalem_tutari_try" :props="props" class="text-right">{{ fmt(props.row.acik_kalem_tutari_try) }}</q-td>
          <q-td key="acik_kalem_ort_vade_gun" :props="props" class="text-right">{{ fmt(props.row.acik_kalem_ort_vade_gun) }}</q-td>
          <q-td key="acik_kalem_ort_belge_gun" :props="props" class="text-right">{{ fmt(props.row.acik_kalem_ort_belge_gun) }}</q-td>
        </q-tr>

        <q-tr v-if="expandedMaster[props.row.group_key]">
          <q-td colspan="100%" class="bg-grey-1">
            <q-table
              :rows="store.getCurrenciesByMaster(props.row.group_key)"
              :columns="currencyColumns"
              row-key="group_key"
              flat
              dense
              hide-bottom
            >
              <template #body="cprops">
                <q-tr :props="cprops">
                  <q-td auto-width>
                    <q-btn
                      size="sm"
                      dense
                      flat
                      round
                      :icon="expandedCurrency[cprops.row.group_key] ? 'remove' : 'add'"
                      @click="toggleCurrency(cprops.row.group_key)"
                    />
                  </q-td>
                  <q-td key="doviz_cinsi" :props="cprops">{{ cprops.row.doviz_cinsi }}</q-td>
                  <q-td key="acik_kalem_tutari" :props="cprops" class="text-right">{{ fmt(cprops.row.acik_kalem_tutari) }}</q-td>
                  <q-td key="acik_kalem_usd" :props="cprops" class="text-right">{{ fmt(cprops.row.acik_kalem_usd) }}</q-td>
                  <q-td key="acik_kalem_try" :props="cprops" class="text-right">{{ fmt(cprops.row.acik_kalem_try) }}</q-td>
                  <q-td key="ort_gun" :props="cprops" class="text-right">{{ fmt(cprops.row.ort_gun) }}</q-td>
                  <q-td key="ort_belge_gun" :props="cprops" class="text-right">{{ fmt(cprops.row.ort_belge_gun) }}</q-td>
                </q-tr>

                <q-tr v-if="expandedCurrency[cprops.row.group_key]">
                  <q-td colspan="100%" class="bg-white">
                    <q-table
                      :rows="store.getDetailsByCurrency(cprops.row.group_key)"
                      :columns="detailColumns"
                      row-key="detail_key"
                      flat
                      dense
                      hide-bottom
                    />
                  </q-td>
                </q-tr>
              </template>
            </q-table>
          </q-td>
        </q-tr>
      </template>
    </q-table>
  </q-page>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { useStatementAgingStore } from 'src/stores/statementAgingStore'
import { usePermission } from 'src/composables/usePermission'

const { canRead } = usePermission()
const canReadFinance = canRead('finance')

const store = useStatementAgingStore()
const accountCode = ref('')
const endDate = ref(new Date().toISOString().slice(0, 10))
const parislemler = ref(['2'])

const parislemOptions = [
  { label: '1-2 hesap', value: '2' },
  { label: '1-3 hesap', value: '3' }
]

const expandedMaster = reactive({})
const expandedCurrency = reactive({})

const masterColumns = [
  { name: 'expand', label: '', field: 'expand' },
  { name: 'cari8', label: 'Cari', field: 'cari8', align: 'left' },
  { name: 'cari_detay', label: 'Cari Detay', field: 'cari_detay', align: 'left' },
  { name: 'acik_kalem_tutari_usd', label: 'Açık Kalem USD', field: 'acik_kalem_tutari_usd', align: 'right' },
  { name: 'acik_kalem_tutari_try', label: 'Açık Kalem TRY', field: 'acik_kalem_tutari_try', align: 'right' },
  { name: 'acik_kalem_ort_vade_gun', label: 'Ort Vade Gün', field: 'acik_kalem_ort_vade_gun', align: 'right' },
  { name: 'acik_kalem_ort_belge_gun', label: 'Ort Belge Gün', field: 'acik_kalem_ort_belge_gun', align: 'right' }
]

const currencyColumns = [
  { name: 'expand', label: '', field: 'expand' },
  { name: 'doviz_cinsi', label: 'Döviz', field: 'doviz_cinsi', align: 'left' },
  { name: 'acik_kalem_tutari', label: 'Açık Kalem Tutar', field: 'acik_kalem_tutari', align: 'right' },
  { name: 'acik_kalem_usd', label: 'Açık Kalem USD', field: 'acik_kalem_usd', align: 'right' },
  { name: 'acik_kalem_try', label: 'Açık Kalem TRY', field: 'acik_kalem_try', align: 'right' },
  { name: 'ort_gun', label: 'Ort Gün', field: 'ort_gun', align: 'right' },
  { name: 'ort_belge_gun', label: 'Ort Belge Gün', field: 'ort_belge_gun', align: 'right' }
]

const detailColumns = [
  { name: 'fatura_cari', label: 'Fatura Cari', field: 'fatura_cari', align: 'left' },
  { name: 'odeme_cari', label: 'Ödeme Cari', field: 'odeme_cari', align: 'left' },
  { name: 'fatura_ref', label: 'Fatura Ref', field: 'fatura_ref', align: 'left' },
  { name: 'odeme_ref', label: 'Ödeme Ref', field: 'odeme_ref', align: 'left' },
  { name: 'fatura_tarihi', label: 'Fatura Tarihi', field: 'fatura_tarihi', align: 'left' },
  { name: 'odeme_tarihi', label: 'Ödeme Tarihi', field: 'odeme_tarihi', align: 'left' },
  { name: 'eslesen_tutar', label: 'Eşleşen Tutar', field: 'eslesen_tutar', align: 'right' },
  { name: 'usd_tutar', label: 'USD Tutar', field: 'usd_tutar', align: 'right' },
  { name: 'try_tutar', label: 'TRY Tutar', field: 'try_tutar', align: 'right' },
  { name: 'gun_sayisi', label: 'Gün Sayısı', field: 'gun_sayisi', align: 'right' },
  { name: 'gun_sayisi_docdate', label: 'Belge Gün', field: 'gun_sayisi_docdate', align: 'right' },
  { name: 'gun_kur', label: 'Gün Kur', field: 'gun_kur', align: 'right' },
  { name: 'aciklama', label: 'Açıklama', field: 'aciklama', align: 'left' }
]

function fmt(v) {
  const n = Number(v)
  if (!Number.isFinite(n)) return v ?? ''
  return n.toLocaleString('tr-TR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
}

function toggleMaster(key) {
  expandedMaster[key] = !expandedMaster[key]
}

function toggleCurrency(key) {
  expandedCurrency[key] = !expandedCurrency[key]
}

async function load() {
  await store.load({
    accountcode: accountCode.value || '',
    enddate: endDate.value || '',
    parislemler: parislemler.value
  })
}

load()
</script>
