{% extends "base.html" %}
{% from "macros.jinja" import window_vars with context %}

{% block scripts %}
{{ window_vars(user) }}
<script src="{{ static_url_for('payroll/static', path='js/index.js') }}"></script>
{% endblock %}

{% block page %}
<div class="row q-col-gutter-md">
  <div class="col-12">

    <div class="row items-center q-mb-md">
      <div class="col">
        <h4 class="q-my-none">Payroll</h4>
        <p class="text-caption q-my-none" :style="{opacity: 0.7}">
          Recurring payouts from a wallet you control into an employee's wallet.
        </p>
      </div>
      <div class="col-auto">
        <q-btn unelevated color="primary" icon="add" label="New payroll line"
          @click="openContractDialog"></q-btn>
      </div>
    </div>

    <q-card>
      <q-tabs v-model="tab" align="left"
        active-color="primary" indicator-color="primary" class="text-grey">
        <q-tab name="contracts" icon="event_repeat" label="Contracts"></q-tab>
        <q-tab name="ledger" icon="receipt_long" label="Payout ledger"></q-tab>
      </q-tabs>
      <q-separator></q-separator>

      <q-tab-panels v-model="tab" animated>

        <!-- ------------------------------------------------ contracts -->
        <q-tab-panel name="contracts">
          <q-table flat dense :rows="contracts" :columns="contractsColumns"
            row-key="id" :loading="contractsLoading"
            :pagination="{rowsPerPage: 25}">

            <template v-slot:body-cell-next="props">
              <q-td :props="props">
                <span v-if="props.row.next_payday">
                  ${ props.row.next_payday }
                </span>
                <span v-else :style="{opacity: 0.5}">—</span>
              </q-td>
            </template>

            <template v-slot:body-cell-progress="props">
              <q-td :props="props">
                ${ props.row.periods_done }<span :style="{opacity: 0.5}">
                  / ${ props.row.total_periods === null ? '∞' : props.row.total_periods }
                </span>
              </q-td>
            </template>

            <template v-slot:body-cell-status="props">
              <q-td :props="props">
                <q-chip dense square :color="statusColour(props.row.status)"
                  text-color="white" :label="props.row.status">
                  <q-tooltip v-if="props.row.paused_reason">
                    ${ props.row.paused_reason }
                  </q-tooltip>
                </q-chip>
                <q-icon v-if="props.row.paused_reason" name="error_outline"
                  color="negative" size="xs" class="q-ml-xs">
                  <q-tooltip>
                    Paused by payroll, not by you — the unpaid periods are
                    still owed and resuming will settle them.
                  </q-tooltip>
                </q-icon>
              </q-td>
            </template>

            <template v-slot:body-cell-actions="props">
              <q-td :props="props" class="q-gutter-xs">
                <q-btn flat dense round icon="event" size="sm"
                  @click="showSchedule(props.row)">
                  <q-tooltip>Upcoming paydays</q-tooltip>
                </q-btn>
                <q-btn flat dense round icon="receipt_long" size="sm"
                  @click="showLedgerFor(props.row)">
                  <q-tooltip>Payout history</q-tooltip>
                </q-btn>
                <q-btn flat dense round icon="edit" size="sm"
                  @click="openEditDialog(props.row)">
                  <q-tooltip>Edit terms</q-tooltip>
                </q-btn>
                <q-btn v-if="props.row.status === 'active'"
                  flat dense round icon="bolt" size="sm" color="primary"
                  @click="payNow(props.row)">
                  <q-tooltip>Pay the next period now</q-tooltip>
                </q-btn>
                <q-btn v-if="props.row.status === 'active'"
                  flat dense round icon="pause" size="sm"
                  @click="transition(props.row, 'pause')">
                  <q-tooltip>Pause</q-tooltip>
                </q-btn>
                <q-btn v-if="props.row.status === 'paused'"
                  flat dense round icon="play_arrow" size="sm" color="positive"
                  @click="resumeContract(props.row)">
                  <q-tooltip>Resume</q-tooltip>
                </q-btn>
                <q-btn v-if="props.row.status === 'active' || props.row.status === 'paused'"
                  flat dense round icon="block" size="sm" color="warning"
                  @click="cancelContract(props.row)">
                  <q-tooltip>Cancel for good</q-tooltip>
                </q-btn>
                <q-btn flat dense round icon="delete" size="sm" color="negative"
                  @click="deleteContract(props.row)">
                  <q-tooltip>Delete the row and its schedule position</q-tooltip>
                </q-btn>
              </q-td>
            </template>

            <template v-slot:no-data>
              <div class="full-width row justify-center q-pa-lg"
                :style="{opacity: 0.6}">
                No payroll lines yet.
              </div>
            </template>
          </q-table>
        </q-tab-panel>

        <!-- --------------------------------------------------- ledger -->
        <q-tab-panel name="ledger">
          <div class="row q-col-gutter-sm q-mb-md items-end">
            <div class="col-12 col-md-4">
              <q-select outlined dense clearable v-model="ledgerFilter.contract_id"
                :options="contractOptions" emit-value map-options
                label="Contract" @update:model-value="getPayouts"></q-select>
            </div>
            <div class="col-6 col-md-2">
              <q-select outlined dense clearable v-model="ledgerFilter.status"
                :options="['paid', 'failed', 'skipped']"
                label="Status" @update:model-value="getPayouts"></q-select>
            </div>
            <div class="col-6 col-md-2">
              <q-input outlined dense v-model="ledgerFilter.since"
                mask="####-##-##" label="Payday from" @blur="getPayouts"></q-input>
            </div>
            <div class="col-6 col-md-2">
              <q-input outlined dense v-model="ledgerFilter.until"
                mask="####-##-##" label="Payday to" @blur="getPayouts"></q-input>
            </div>
            <div class="col-6 col-md-2">
              <q-btn outline color="primary" icon="download" label="CSV"
                type="a" :href="ledgerCsvHref"></q-btn>
            </div>
          </div>

          <q-table flat dense :rows="payouts" :columns="payoutsColumns"
            row-key="id" :loading="payoutsLoading"
            :pagination="{rowsPerPage: 25}">

            <template v-slot:body-cell-status="props">
              <q-td :props="props">
                <q-chip dense square :color="statusColour(props.row.status)"
                  text-color="white" :label="props.row.status"></q-chip>
              </q-td>
            </template>

            <template v-slot:body-cell-rate="props">
              <q-td :props="props">
                <span v-if="props.row.rate">
                  ${ Math.round(props.row.rate).toLocaleString() }
                  <span :style="{opacity: 0.6, fontSize: '0.8em'}">
                    ${ props.row.rate_source }
                  </span>
                </span>
                <span v-else :style="{opacity: 0.4}">—</span>
              </q-td>
            </template>

            <template v-slot:body-cell-detail="props">
              <q-td :props="props">
                <span :style="{opacity: 0.75, fontSize: '0.85em'}">
                  ${ props.row.detail }
                </span>
              </q-td>
            </template>

            <template v-slot:no-data>
              <div class="full-width row justify-center q-pa-lg"
                :style="{opacity: 0.6}">
                Nothing paid yet. Failures and skips land here too.
              </div>
            </template>
          </q-table>
        </q-tab-panel>

      </q-tab-panels>
    </q-card>
  </div>
</div>

<!-- ================================================ new contract -->
<q-dialog v-model="contractDialog.show">
  <q-card style="width: 640px; max-width: 95vw">
    <q-card-section>
      <div class="text-h6">New payroll line</div>
    </q-card-section>
    <q-card-section class="q-gutter-md">

      <q-select outlined dense v-model="contractDialog.data.employee_id"
        :options="userOptions" emit-value map-options
        label="Employee *"
        @update:model-value="contractDialog.data.employee_wallet = null">
      </q-select>

      <q-select outlined dense v-model="contractDialog.data.employee_wallet"
        :options="employeeWalletOptions" emit-value map-options
        :disable="!contractDialog.data.employee_id"
        label="Pay into (their wallet) *"
        hint="Only wallets belonging to the selected employee">
      </q-select>

      <q-select outlined dense v-model="contractDialog.data.source_wallet"
        :options="sourceWalletOptions" emit-value map-options
        label="Pay from (your wallet) *"></q-select>

      <div class="row q-col-gutter-sm">
        <div class="col-7">
          <q-input outlined dense type="number" step="any"
            v-model.number="contractDialog.data.amount" label="Amount *"></q-input>
        </div>
        <div class="col-5">
          <q-select outlined dense use-input input-debounce="0"
            v-model="contractDialog.data.currency"
            :options="currencyFilter" @filter="filterCurrencies"
            label="Currency"
            hint="Fiat is priced in sats at each payout"></q-select>
        </div>
      </div>

      <div class="row q-col-gutter-sm">
        <div class="col-6">
          <q-select outlined dense v-model="contractDialog.data.frequency"
            :options="frequencyOptions" emit-value map-options
            label="Frequency"></q-select>
        </div>
        <div class="col-6">
          <q-input outlined dense v-model="contractDialog.data.start_date"
            mask="####-##-##" label="First payday *"
            hint="Anchors every later payday">
            <template v-slot:append>
              <q-icon name="event" class="cursor-pointer">
                <q-popup-proxy cover transition-show="scale">
                  <q-date v-model="contractDialog.data.start_date"
                    mask="YYYY-MM-DD"></q-date>
                </q-popup-proxy>
              </q-icon>
            </template>
          </q-input>
        </div>
      </div>

      <div class="row items-center q-col-gutter-sm">
        <div class="col-auto">
          <q-toggle v-model="contractDialog.data.open_ended"
            label="Open-ended"></q-toggle>
        </div>
        <div class="col">
          <q-input outlined dense type="number"
            v-model.number="contractDialog.data.total_periods"
            :disable="contractDialog.data.open_ended"
            label="Number of payments"></q-input>
        </div>
      </div>

      <q-input outlined dense v-model="contractDialog.data.label"
        label="Label" hint="Shown in this table, e.g. 'Alice — dev retainer'"></q-input>
      <q-input outlined dense v-model="contractDialog.data.memo"
        label="Payment memo" hint="What the employee sees on the payment"></q-input>

      <div class="row q-col-gutter-sm">
        <div class="col-7">
          <q-select outlined dense v-model="contractDialog.data.pricing_mode"
            :options="pricingModes" emit-value map-options
            :disable="contractDialog.data.currency === 'sat'"
            label="Pricing"
            hint="'Rate on the payday' only differs for a payday in the past"></q-select>
        </div>
        <div class="col-5">
          <q-input outlined dense type="number" step="any"
            v-model.number="contractDialog.data.manual_rate"
            :disable="contractDialog.data.pricing_mode !== 'manual'"
            :label="'Rate (' + contractDialog.data.currency + '/BTC)'"></q-input>
        </div>
      </div>

      <q-toggle v-model="contractDialog.data.backfill"
        label="Pay paydays that already passed">
        <q-tooltip>
          Off by default: a back-dated start normally means "we pay on the
          15th", not "send five months of back-pay now".
        </q-tooltip>
      </q-toggle>

      <q-separator></q-separator>

      <div v-if="preview">
        <div class="text-subtitle2 q-mb-xs">Next paydays</div>
        <div class="row q-gutter-xs">
          <q-chip v-for="d in preview.paydays" :key="d" dense square outline
            :label="d"></q-chip>
          <q-chip v-if="preview.truncated" dense square outline label="…"></q-chip>
        </div>
        <div class="q-mt-sm" :style="{opacity: 0.7, fontSize: '0.9em'}">
          <span v-if="preview.ends_on">
            ${ preview.total_periods } payment(s), ending ${ preview.ends_on }.
          </span>
          <span v-else>Open-ended — pays until paused or cancelled.</span>
        </div>
      </div>
    </q-card-section>

    <q-card-actions align="right">
      <q-btn flat label="Cancel" v-close-popup></q-btn>
      <q-btn color="primary" label="Create" :loading="contractDialog.saving"
        :disable="!canSaveContract" @click="saveContract"></q-btn>
    </q-card-actions>
  </q-card>
</q-dialog>

<!-- ======================================================= edit -->
<q-dialog v-model="editDialog.show">
  <q-card style="width: 480px; max-width: 95vw">
    <q-card-section>
      <div class="text-h6">Edit terms</div>
      <div class="text-caption" :style="{opacity: 0.7}">
        The employee, the source wallet and the start date are fixed. Changing
        them would rewrite what past payouts were for. Cancel and re-create
        instead.
      </div>
    </q-card-section>
    <q-card-section class="q-gutter-md">
      <div class="row q-col-gutter-sm">
        <div class="col-7">
          <q-input outlined dense type="number" step="any"
            v-model.number="editDialog.data.amount" label="Amount"></q-input>
        </div>
        <div class="col-5">
          <q-select outlined dense use-input input-debounce="0"
            v-model="editDialog.data.currency"
            :options="currencyFilter" @filter="filterCurrencies"
            label="Currency"></q-select>
        </div>
      </div>
      <q-select outlined dense v-model="editDialog.data.frequency"
        :options="frequencyOptions" emit-value map-options
        label="Frequency"></q-select>
      <div class="row items-center q-col-gutter-sm">
        <div class="col-auto">
          <q-toggle v-model="editDialog.data.open_ended" label="Open-ended"></q-toggle>
        </div>
        <div class="col">
          <q-input outlined dense type="number"
            v-model.number="editDialog.data.total_periods"
            :disable="editDialog.data.open_ended"
            label="Number of payments"></q-input>
        </div>
      </div>
      <div class="row q-col-gutter-sm">
        <div class="col-7">
          <q-select outlined dense v-model="editDialog.data.pricing_mode"
            :options="pricingModes" emit-value map-options
            label="Pricing"></q-select>
        </div>
        <div class="col-5">
          <q-input outlined dense type="number" step="any"
            v-model.number="editDialog.data.manual_rate"
            :disable="editDialog.data.pricing_mode !== 'manual'"
            label="Rate per BTC"></q-input>
        </div>
      </div>
      <q-input outlined dense v-model="editDialog.data.label" label="Label"></q-input>
      <q-input outlined dense v-model="editDialog.data.memo"
        label="Payment memo"></q-input>
    </q-card-section>
    <q-card-actions align="right">
      <q-btn flat label="Cancel" v-close-popup></q-btn>
      <q-btn color="primary" label="Save" @click="saveEdit"></q-btn>
    </q-card-actions>
  </q-card>
</q-dialog>

<!-- ==================================================== pay now -->
<q-dialog v-model="payNowDialog.show">
  <q-card style="width: 460px; max-width: 95vw">
    <q-card-section>
      <div class="text-h6">Pay the next period now</div>
      <div v-if="payNowDialog.contract" class="text-caption"
        :style="{opacity: 0.7}">
        ${ payNowDialog.contract.label || payNowDialog.contract.employee_username }
        — ${ payNowDialog.contract.amount } ${ payNowDialog.contract.currency },
        payday <strong>${ payNowPayday || '—' }</strong>.
        The period is consumed even if its payday has not arrived yet.
      </div>
    </q-card-section>
    <q-card-section class="q-gutter-md">
      <q-select outlined dense v-model="payNowDialog.pricing_mode"
        :options="pricingModes" emit-value map-options
        label="Price it at"></q-select>

      <div v-if="payNowDialog.pricing_mode === 'payday' && !payNowIsBackdated"
        class="text-caption" :style="{opacity: 0.8}">
        Payday ${ payNowPayday } has not passed, so there is no historical
        rate to look up — this will be priced at the current rate.
      </div>
      <div v-else-if="payNowDialog.pricing_mode === 'payday'"
        class="text-caption" :style="{opacity: 0.8}">
        Will convert at what BTC was worth on ${ payNowPayday }.
      </div>
      <q-input outlined dense type="number" step="any"
        v-model.number="payNowDialog.manual_rate"
        :disable="payNowDialog.pricing_mode !== 'manual'"
        label="Rate per BTC"
        hint="e.g. 100000 for 100,000 per BTC"></q-input>
    </q-card-section>
    <q-card-actions align="right">
      <q-btn flat label="Cancel" v-close-popup></q-btn>
      <q-btn color="primary" label="Pay now" :loading="payNowDialog.loading"
        :disable="payNowDialog.pricing_mode === 'manual' && !payNowDialog.manual_rate"
        @click="confirmPayNow"></q-btn>
    </q-card-actions>
  </q-card>
</q-dialog>

<!-- =================================================== schedule -->
<q-dialog v-model="scheduleDialog.show">
  <q-card style="width: 420px; max-width: 95vw">
    <q-card-section>
      <div class="text-h6">Upcoming paydays</div>
      <div v-if="scheduleDialog.contract" class="text-caption"
        :style="{opacity: 0.7}">
        ${ scheduleDialog.contract.label || scheduleDialog.contract.employee_username }
        — ${ scheduleDialog.contract.amount } ${ scheduleDialog.contract.currency }
        ${ scheduleDialog.contract.frequency }
      </div>
    </q-card-section>
    <q-card-section>
      <div v-if="scheduleDialog.preview">
        <div class="row q-gutter-xs">
          <q-chip v-for="d in scheduleDialog.preview.paydays" :key="d"
            dense square outline :label="d"></q-chip>
        </div>
        <div v-if="!scheduleDialog.preview.paydays.length" :style="{opacity: 0.6}">
          No paydays left.
        </div>
        <div class="q-mt-sm" :style="{opacity: 0.7, fontSize: '0.9em'}">
          <span v-if="scheduleDialog.preview.ends_on">
            Ends ${ scheduleDialog.preview.ends_on }.
          </span>
          <span v-else>Open-ended.</span>
        </div>
      </div>
      <q-spinner v-else color="primary"></q-spinner>
    </q-card-section>
    <q-card-actions align="right">
      <q-btn flat label="Close" v-close-popup></q-btn>
    </q-card-actions>
  </q-card>
</q-dialog>
{% endblock %}