<script setup>
import { ref } from "vue";
import AppLayout from "@/Layouts/AppLayout.vue";
import PrimaryButton from "@/Components/PrimaryButton.vue";
import InputLabel from "@/Components/InputLabel.vue";
import TextInput from "@/Components/TextInput.vue";
import { Link, useForm, router } from "@inertiajs/vue3";
import ActionMessage from "@/Components/ActionMessage.vue";
import DialogModal from "@/Components/DialogModal.vue";
import DataTableServer from "@/Components/DataTable/DataTableServer.vue";

const props = defineProps({
  clients: Object,
  filters: Object,
});

const Address = {
  address: "",
  country: "",
  type_id: 1,
};

const Phone = {
  nu: "",
  country_code: "00386",
  type_id: 1,
};

const formClient = useForm({
  first_name: "",
  last_name: "",
  full_name: "",
  tax_number: "",
  social_security_number: "",
  description: "",
  address: Address,
  phone: Phone,
});

//Create client drawer
const drawerCreateClient = ref(false);

// Initial search (passed to DataTable toolbar)
const initialSearch = ref(props.filters?.search || "");

//Open drawer create client
const openDrawerCreateClient = () => {
  drawerCreateClient.value = true;
};

//Close any drawer on page
const closeDrawer = () => {
  drawerCreateClient.value = false;
};

//Ajax call post to store new client
const storeClient = () => {
  formClient.post(route("client.store"), {
    onBefore: () => {
      formClient.address.type_id = Number(formClient.address.type_id);
    },
    onSuccess: () => {
      closeDrawer();
      formClient.reset();
    },
  });
};

// Formatting helpers
const fmtCurrency = (v) => {
  const n = Number(v ?? 0);
  try {
    return new Intl.NumberFormat("sl-SI", { style: "currency", currency: "EUR" }).format(
      n
    );
  } catch (e) {
    return `${n.toFixed(2)} €`;
  }
};
</script>

<template>
  <AppLayout title="Client">
    <template #header> </template>
    <div class="py-12">
      <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <div class="px-3 bg-white overflow-hidden shadow-xl sm:rounded-lg">
          <div class="mx-auto max-w-4x1 py-3 space-y-3">
            <!-- Top actions -->
            <div class="flex items-center justify-between gap-3">
              <PrimaryButton
                @click="openDrawerCreateClient"
                class="bg-blue-600 hover:bg-blue-700"
                >Dodaj</PrimaryButton
              >
            </div>

            <!-- DataTable (server-side) -->
            <DataTableServer
              :columns="[
                { key: 'nu', label: 'Št.', sortable: false, class: 'w-40' },
                { key: 'name', label: 'Naročnik', sortable: false },
                {
                  key: 'cases',
                  label: 'Primeri z aktivnimi pogodbami',
                  sortable: false,
                  align: 'right',
                },
                {
                  key: 'balance',
                  label: 'Skupaj stanje',
                  sortable: false,
                  align: 'right',
                },
              ]"
              :rows="clients.data || []"
              :meta="{
                current_page: clients.current_page,
                per_page: clients.per_page,
                total: clients.total,
                last_page: clients.last_page,
              }"
              :sort="{
                key: props.filters?.sort || null,
                direction: props.filters?.direction || null,
              }"
              :search="initialSearch"
              route-name="client"
              row-key="uuid"
              :page-size-options="[clients.per_page]"
              :only-props="['clients']"
            >
              <template #cell-nu="{ row }">
                {{ row.person?.nu || "-" }}
              </template>
              <template #cell-name="{ row }">
                <Link
                  :href="route('client.show', { uuid: row.uuid })"
                  class="text-indigo-600 hover:underline"
                >
                  {{ row.person?.full_name || "-" }}
                </Link>
                <div v-if="!row.person" class="mt-1">
                  <PrimaryButton
                    class="!py-0.5 !px-2 bg-red-500 hover:bg-red-600 text-xs"
                    @click.prevent="
                      router.post(route('client.emergencyPerson', { uuid: row.uuid }))
                    "
                    >Add Person</PrimaryButton
                  >
                </div>
              </template>
              <template #cell-cases="{ row }">
                <div class="text-right">
                  {{ row.cases_with_active_contracts_count ?? 0 }}
                </div>
              </template>
              <template #cell-balance="{ row }">
                <div class="text-right">
                  {{ fmtCurrency(row.active_contracts_balance_sum) }}
                </div>
              </template>
              <template #empty>
                <div class="p-6 text-center text-gray-500">Ni zadetkov.</div>
              </template>
            </DataTableServer>
          </div>
        </div>
      </div>
    </div>
  </AppLayout>
  <DialogModal :show="drawerCreateClient" @close="drawerCreateClient = false">
    <template #title>Novi naročnik</template>
    <template #content>
      <form @submit.prevent="storeClient">
        <div>
          <div class="col-span-6 sm:col-span-4">
            <InputLabel for="fullname" value="Naziv" />
            <TextInput
              id="fullname"
              ref="fullnameInput"
              v-model="formClient.full_name"
              type="text"
              class="mt-1 block w-full"
              autocomplete="full-name"
            />
          </div>

          <div class="col-span-6 sm:col-span-4">
            <InputLabel for="taxnumber" value="Davčna" />
            <TextInput
              id="taxnumber"
              ref="taxnumberInput"
              v-model="formClient.tax_number"
              type="text"
              class="mt-1 block w-full"
              autocomplete="tax-number"
            />
          </div>

          <div class="col-span-6 sm:col-span-4">
            <InputLabel for="socialSecurityNumber" value="Matična / Emšo" />
            <TextInput
              id="socialSecurityNumber"
              ref="socialSecurityNumberInput"
              v-model="formClient.social_security_number"
              type="text"
              class="mt-1 block w-full"
              autocomplete="social-security-number"
            />
          </div>

          <div class="col-span-6 sm:col-span-4">
            <InputLabel for="address" value="Naslov" />
            <TextInput
              id="address"
              ref="addressInput"
              v-model="formClient.address.address"
              type="text"
              class="mt-1 block w-full"
              autocomplete="address"
            />
          </div>

          <div class="col-span-6 sm:col-span-4">
            <InputLabel for="addressCountry" value="Država" />
            <TextInput
              id="addressCountry"
              ref="addressCountryInput"
              v-model="formClient.address.country"
              type="text"
              class="mt-1 block w-full"
              autocomplete="address-country"
            />
          </div>

          <div class="col-span-6 sm:col-span-4">
            <InputLabel for="addressType" value="Vrsta naslova" />
            <select
              class="block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
              id="addressType"
              v-model="formClient.address.type_id"
            >
              <option value="1">Stalni</option>
              <option value="2">Začasni</option>
              <!-- ... -->
            </select>
          </div>
          <div class="col-span-6 sm:col-span-4">
            <InputLabel for="phoneCountyCode" value="Koda države tel." />
            <select
              class="block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
              id="phoneCountyCode"
              v-model="formClient.phone.country_code"
            >
              <option value="00386">+386 (Slovenija)</option>
              <option value="00385">+385 (Hrvaška)</option>
              <option value="0039">+39 (Italija)</option>
              <option value="0036">+39 (Madžarska)</option>
              <option value="0043">+43 (Avstrija)</option>
              <option value="00381">+381 (Srbija)</option>
              <option value="00387">+387 (Bosna in Hercegovina)</option>
              <option value="00382">+382 (Črna gora)</option>
              <!-- ... -->
            </select>
          </div>
          <div class="col-span-6 sm:col-span-4">
            <InputLabel for="phoneNu" value="Telefonska št." />
            <TextInput
              id="phoneNu"
              ref="phoneNuInput"
              v-model="formClient.phone.nu"
              type="text"
              class="mt-1 block w-full"
              autocomplete="phone-nu"
            />
          </div>
          <div class="col-span-6 sm:col-span-4">
            <InputLabel for="description" value="Opis" />
            <TextInput
              id="description"
              ref="descriptionInput"
              v-model="formClient.description"
              type="text"
              class="mt-1 block w-full"
              autocomplete="description"
            />
          </div>
        </div>
        <div class="flex justify-end mt-4">
          <ActionMessage :on="formClient.recentlySuccessful" class="me-3">
            Shranjeno.
          </ActionMessage>

          <PrimaryButton
            :class="{ 'opacity-25': formClient.processing }"
            :disabled="formClient.processing"
          >
            Shrani
          </PrimaryButton>
        </div>
      </form>
    </template>
  </DialogModal>
</template>
