<script setup>
import { ref } from "vue";
import { Inertia } from "@inertiajs/inertia";
import { Link, useForm } from "@inertiajs/inertia-vue3";
import JetFormSection from "@/Jetstream/FormSection.vue";
import Modal from "@/components/General/FormModal.vue";
import Button from "@/Jetstream/Button";
const moment = require("moment");

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

const form = useForm({
    name: null,
    issuing_org: null,
    credential_url: null,
    does_not_expire: false,
    credential_id: null,
    start_date: null,
    end_date: null,
});

const modal = ref("modal");

const openModal = () => {
    modal.value.open();
};

const closeModal = () => {
    modal.value.close();
};

const submit = async () => {
    form.post(route("firm-profile-information.add.license"), {
        preserveScroll: true,
        onSuccess: (res) => {
            form.reset();
            closeModal();
        },
        onError: (error) => {
            console.log(error);
        },
    });
};

const editModal = ref("editModal");

const editForm = useForm({
    id: null,
    name: null,
    issuing_org: null,
    credential_url: null,
    does_not_expire: false,
    credential_id: null,
    start_date: null,
    end_date: null,
});

const openEditModal = (license) => {
    editForm.id = license.id;
    editForm.name = license.name;
    editForm.issuing_org = license.issuing_org;
    editForm.credential_url = license.credential_url;
    editForm.credential_id = license.credential_id;
    editForm.does_not_expire = !!license.does_not_expire;
    editForm.start_date = moment(license.start_date).format("YYYY-MM");
    editForm.end_date = moment(license.end_date).format("YYYY-MM");
    editModal.value.open();
};

const closeEditModal = () => {
    editModal.value.close();
};

const closedEditModal = () => {
    editForm.reset();
};

const editSubmit = async () => {
    editForm.post(
        route("firm-profile-information.edit.license", {
            id: editForm.id,
        }),
        {
            preserveScroll: true,
            onSuccess: (res) => {
                form.reset();
                closeEditModal();
            },
            onError: (error) => {
                console.log(error);
            },
        }
    );
};

const deleteSubmit = async () => {
    editForm.delete(
        route("firm-profile-information.delete.license", {
            id: editForm.id,
        }),
        {
            _method: "delete",
            preserveScroll: true,
            onSuccess: (res) => {
                editForm.reset();
                closeEditModal();
            },
            onError: (error) => {
                console.log(error);
            },
        }
    );
};
</script>

<template>
    <JetFormSection @submitted="submit">
        <template #title> {{ $t('profile.licenses') }} </template>

        <template #description> {{ $t('profile.add_license') }} </template>

        <template #form="{ valid }">
            <!-- licenses -->
            <ul
                v-if="firm.licenses.length > 0"
                class="flex flex-wrap gap-7 mt-1.5 col-span-6"
            >
                <li
                    v-for="license in firm.licenses"
                    :key="`certificate_${license.id}`"
                    class="flex w-full gap-2.5"
                >
                    <Button
                        @click="openEditModal(license)"
                        type="button"
                        size="xs"
                        buttonStyle="outline"
                        class="mb-auto"
                    >
                        <span class="flex items-center justify-center gap-1">
                            <svg
                                width="16"
                                height="17"
                                viewBox="0 0 16 17"
                                fill="none"
                                xmlns="http://www.w3.org/2000/svg"
                            >
                                <g clip-path="url(#clip0_917_36335)">
                                    <path
                                        d="M5.99984 5.16675H3.99984C3.64622 5.16675 3.30708 5.30722 3.05703 5.55727C2.80698 5.80732 2.6665 6.14646 2.6665 6.50008V12.5001C2.6665 12.8537 2.80698 13.1928 3.05703 13.4429C3.30708 13.6929 3.64622 13.8334 3.99984 13.8334H9.99984C10.3535 13.8334 10.6926 13.6929 10.9426 13.4429C11.1927 13.1928 11.3332 12.8537 11.3332 12.5001V10.5001"
                                        stroke="#222222"
                                        stroke-width="1.25"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                    />
                                    <path
                                        d="M6 10.5001H8L13.6667 4.8334C13.9319 4.56819 14.0809 4.20848 14.0809 3.8334C14.0809 3.45833 13.9319 3.09862 13.6667 2.8334C13.4015 2.56819 13.0417 2.41919 12.6667 2.41919C12.2916 2.41919 11.9319 2.56819 11.6667 2.8334L6 8.50007V10.5001Z"
                                        stroke="#222222"
                                        stroke-width="1.25"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                    />
                                    <path
                                        d="M10.6665 3.83325L12.6665 5.83325"
                                        stroke="#222222"
                                        stroke-width="1.25"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                    />
                                </g>
                                <defs>
                                    <clipPath id="clip0_917_36335">
                                        <rect
                                            width="16"
                                            height="16"
                                            fill="white"
                                            transform="translate(0 0.5)"
                                        />
                                    </clipPath>
                                </defs>
                            </svg>
                        </span>
                    </Button>
                    <span class="flex flex-col w-full">
                        <a
                            :href="license.credential_url"
                            target="_blank"
                            class="inline font-medium text-gray-300"
                        >
                            {{ license.name }}
                        </a>
                        <h4 class="text-sm text-blue-300">
                            {{ license.issuing_org }}
                        </h4>
                        <h5 class="text-xs text-gray-200">
                            {{ moment(license.start_date).format("MMMM YYYY") }}
                            -
                            {{
                                license.does_not_expire
                                    ? $t('profile.no_expiration')
                                    : moment(license.end_date).format(
                                          "MMMM YYYY"
                                      )
                            }}
                        </h5>
                    </span>
                </li>
            </ul>

            <div
                v-else
                class="w-full flex flex-col gap-2.5 items-center justify-center py-4 col-span-6"
            >
                <svg
                    width="166"
                    height="150"
                    viewBox="0 0 166 150"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                >
                    <path
                        opacity="0.2"
                        d="M4.23236 11.0338C4.23236 5.51097 8.70951 1.03381 14.2324 1.03381H130.709C136.232 1.03381 140.709 5.51097 140.709 11.0338V121.15C140.709 126.672 136.232 131.15 130.709 131.15H14.2324C8.70952 131.15 4.23236 126.672 4.23236 121.15V11.0338Z"
                        fill="#50CD89"
                    />
                    <path
                        d="M137.22 67.3247C142.216 67.3222 147.107 68.7622 151.305 71.4718C155.502 74.1814 158.829 78.0452 160.884 82.5992C162.939 87.1532 163.635 92.2037 162.89 97.144C162.144 102.084 159.988 106.704 156.681 110.449V140.288C156.682 141.121 156.47 141.94 156.064 142.668C155.658 143.395 155.073 144.006 154.363 144.442C153.653 144.879 152.844 145.125 152.012 145.159C151.179 145.193 150.352 145.012 149.61 144.634L149.026 144.277L137.22 136.026L125.414 144.277C124.732 144.754 123.94 145.047 123.112 145.13C122.285 145.212 121.45 145.081 120.688 144.75C119.925 144.418 119.26 143.896 118.757 143.234C118.253 142.572 117.928 141.793 117.812 140.969L117.766 140.288V110.436C114.463 106.691 112.311 102.073 111.567 97.1356C110.824 92.198 111.521 87.1508 113.575 82.5995C115.628 78.0482 118.952 74.1862 123.146 71.4768C127.34 68.7673 132.227 67.3257 137.22 67.3247ZM146.95 117.338C143.859 118.588 140.555 119.229 137.22 119.225C133.885 119.229 130.581 118.588 127.49 117.338V130.954L134.437 126.108C135.149 125.61 135.98 125.311 136.846 125.242C137.712 125.174 138.58 125.338 139.361 125.719L140.009 126.108L146.95 130.954V117.338ZM145.329 21.9431C149.871 21.9429 154.243 23.6757 157.552 26.7881C160.861 29.9004 162.857 34.1579 163.135 38.692L163.167 39.7818L163.174 73.8115C160.543 70.3092 157.234 67.3728 153.444 65.1776L153.437 39.7818C153.438 37.7744 152.694 35.838 151.35 34.3474C150.005 32.8567 148.156 31.9178 146.159 31.7122L145.329 31.6733H51.2702C49.2628 31.6724 47.3264 32.4161 45.8358 33.7606C44.3451 35.105 43.4062 36.9546 43.2006 38.9515L43.1617 39.7818V101.406C43.1617 105.603 46.3532 109.061 50.4399 109.469L51.2702 109.515L109.145 109.521L109.943 110.838L110.812 112.109L111.273 112.719L111.267 119.245H51.2702C46.7265 119.245 42.354 117.511 39.045 114.398C35.736 111.284 33.7399 107.025 33.464 102.49L33.4315 101.406V39.7818C33.4313 35.2392 35.1641 30.8676 38.2765 27.5587C41.3888 24.2499 45.6463 22.2531 50.1804 21.9755L51.2702 21.9431H145.329ZM137.22 77.0549C132.918 77.0549 128.793 78.7638 125.751 81.8057C122.709 84.8476 121 88.9732 121 93.2751C121 97.577 122.709 101.703 125.751 104.745C128.793 107.786 132.918 109.495 137.22 109.495C141.522 109.495 145.648 107.786 148.69 104.745C151.731 101.703 153.44 97.577 153.44 93.2751C153.44 88.9732 151.731 84.8476 148.69 81.8057C145.648 78.7638 141.522 77.0549 137.22 77.0549ZM93.4343 83.5417C94.667 83.542 95.8535 84.0103 96.7542 84.8518C97.6549 85.6933 98.2026 86.8454 98.2866 88.0752C98.3706 89.3049 97.9847 90.5208 97.2068 91.477C96.4289 92.4332 95.3171 93.0584 94.096 93.2264L93.4343 93.2719H64.2438C63.0111 93.2715 61.8246 92.8032 60.9239 91.9617C60.0232 91.1202 59.4755 89.9681 59.3915 88.7384C59.3075 87.5086 59.6934 86.2928 60.4713 85.3366C61.2491 84.3804 62.361 83.7551 63.5821 83.5871L64.2438 83.5417H93.4343ZM132.355 47.8643C133.588 47.8647 134.774 48.333 135.675 49.1745C136.576 50.016 137.123 51.168 137.207 52.3978C137.291 53.6276 136.905 54.8434 136.128 55.7996C135.35 56.7558 134.238 57.3811 133.017 57.5491L132.355 57.5945H64.2438C63.0111 57.5941 61.8246 57.1259 60.9239 56.2844C60.0232 55.4428 59.4755 54.2908 59.3915 53.061C59.3075 51.8312 59.6934 50.6154 60.4713 49.6592C61.2491 48.703 62.361 48.0778 63.5821 47.9097L64.2438 47.8643H132.355Z"
                        fill="#50CD89"
                    />
                </svg>

                <p class="text-xs text-center text-gray-200">
                    {{ $t('profile.no_licenses') }}
                </p>
            </div>
            <div class="flex items-center justify-start w-full col-span-6">
                <Button
                    @click="openModal"
                    type="button"
                    size="sm"
                    buttonStyle="outline"
                >
                    <span class="flex items-center justify-center gap-1">
                        <svg
                            width="16"
                            height="17"
                            viewBox="0 0 16 17"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                        >
                            <g clip-path="url(#clip0_917_36344)">
                                <path
                                    d="M8 3.83325V13.1666"
                                    stroke="#222222"
                                    stroke-width="1.5"
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                />
                                <path
                                    d="M3.3335 8.5H12.6668"
                                    stroke="#222222"
                                    stroke-width="1.5"
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                />
                            </g>
                            <defs>
                                <clipPath id="clip0_917_36344">
                                    <rect
                                        width="16"
                                        height="16"
                                        fill="white"
                                        transform="translate(0 0.5)"
                                    />
                                </clipPath>
                            </defs>
                        </svg>

                        {{ $t('profile.add_license') }}
                    </span>
                </Button>
            </div>
        </template>
    </JetFormSection>

    <Modal @closed="closedModal" ref="modal" :title="$t('profile.add_license')">
        <div
            class="container flex flex-col items-center justify-center w-full pb-5"
        >
            <FormKit
                form-class="w-full mt-5"
                name="tagline_form"
                type="form"
                @submit="submit"
                :actions="false"
                #default="{ state: { valid } }"
                submit-behavior="live"
            >
                <FormKit
                    id="name"
                    name="name"
                    v-model="form.name"
                    type="text"
                    required
                    :label="$t('profile.name')"
                    placeholder="Ex: Google Certified network associate"
                    validation="required|length:2,255"
                    validation-label="name"
                />
                <FormKit
                    id="issuing_org"
                    name="issuing_org"
                    v-model="form.issuing_org"
                    type="text"
                    required
                    :label="$t('profile.issuing_organization')"
                    placeholder="Ex: Google"
                    validation="required|length:2,255"
                    validation-label="issuing organization"
                />
                <FormKit
                    id="does_not_expire"
                    name="does_not_expire"
                    v-model="form.does_not_expire"
                    type="checkbox"
                    :label="$t('profile.this_credantial')"
                    validation="required"
                    validation-label="This credential does not expire"
                />
                <FormKit
                    id="start_date"
                    name="start_date"
                    v-model="form.start_date"
                    type="month"
                    required
                    :label="$t('profile.issue_date')"
                    placeholder="Ex: October 2010"
                    validation="required"
                    validation-label="start date"
                />
                <FormKit
                    :disabled="form.does_not_expire"
                    id="end_date"
                    name="end_date"
                    v-model="form.end_date"
                    type="month"
                    required
                    :label="$t('profile.expiry_date')"
                    placeholder="Ex: May 2014"
                    :validation="form.does_not_expire ? '' : 'required'"
                    validation-label="end date"
                />
                <FormKit
                    id="credential_id"
                    name="credential_id"
                    v-model="form.credential_id"
                    type="text"
                    :label="$t('profile.credential_id')"
                    validation="length:2,255"
                    validation-label="Credential ID"
                />
                <FormKit
                    id="credential_url"
                    name="credential_url"
                    v-model="form.credential_url"
                    type="text"
                    :label="$t('profile.credential_url')"
                    validation="url"
                    validation-label="Credential URL"
                />
                <div class="flex items-center justify-end w-full">
                    <FormKit
                        :loading="form.processing"
                        :disabled="!valid || form.processing"
                        type="submit"
                    >
                        {{ $t('Register.save') }}
                    </FormKit>
                </div>
            </FormKit>
        </div>
    </Modal>
    <Modal @closed="closedEditModal" ref="editModal" :title="$t('profile.edit_license')">
        <div
            class="container flex flex-col items-center justify-center w-full pb-5"
        >
            <FormKit
                form-class="w-full mt-5"
                name="projects_form"
                type="form"
                @submit="editSubmit"
                :actions="false"
                #default="{ state: { valid } }"
                submit-behavior="live"
            >
                <FormKit
                    id="name"
                    name="name"
                    v-model="editForm.name"
                    type="text"
                    required
                    :label="$t('profile.name')"
                    placeholder="Ex: Google Certified network associate"
                    validation="required|length:2,255"
                    validation-label="name"
                />
                <FormKit
                    id="issuing_org"
                    name="issuing_org"
                    v-model="editForm.issuing_org"
                    type="text"
                    required
                    :label="$t('profile.issuing_organization')"
                    placeholder="Ex: Google"
                    validation="required|length:2,255"
                    validation-label="issuing organization"
                />
                <FormKit
                    id="does_not_expire"
                    name="does_not_expire"
                    v-model="editForm.does_not_expire"
                    type="checkbox"
                    :label="$t('profile.this_credantial')"
                    validation="required"
                    validation-label="This credential does not expire"
                />
                <FormKit
                    id="start_date"
                    name="start_date"
                    v-model="editForm.start_date"
                    type="month"
                    required
                    :label="$t('profile.issue_date')"
                    placeholder="Ex: October 2010"
                    validation="required"
                    validation-label="start date"
                />
                <FormKit
                    :disabled="editForm.does_not_expire"
                    id="end_date"
                    name="end_date"
                    v-model="editForm.end_date"
                    type="month"
                    required
                    :label="$t('profile.expiry_date')"
                    placeholder="Ex: May 2014"
                    :validation="editForm.does_not_expire ? '' : 'required'"
                    validation-label="end date"
                />
                <FormKit
                    id="credential_id"
                    name="credential_id"
                    v-model="editForm.credential_id"
                    type="text"
                    :label="$t('profile.credential_id')"
                    validation="length:2,255"
                    validation-label="Credential ID"
                />
                <FormKit
                    id="credential_url"
                    name="credential_url"
                    v-model="editForm.credential_url"
                    type="text"
                    :label="$t('profile.credential_url')"
                    validation="url"
                    validation-label="Credential URL"
                />

                <div class="flex items-center justify-end w-full gap-5">
                    <Button
                        @click="deleteSubmit"
                        type="button"
                        buttonStyle="danger"
                        :loading="editForm.processing"
                        :disabled="editForm.processing"
                        size="md"
                        >{{ $t('Register.delete') }}</Button
                    >
                    <Button
                        type="submit"
                        :loading="editForm.processing"
                        :disabled="editForm.processing || !valid"
                        size="md"
                        >{{ $t('Register.save') }}</Button
                    >
                </div>
            </FormKit>
        </div>
    </Modal>
</template>
