<script setup>
import { goTo } from "./Component";
import { router, useForm } from "@inertiajs/vue3";

import Selectable from "@/Components/Dashboard/Form/Selectable.vue";
import EditModal from "@/Components/Dashboard/Modal/Edit.vue";
import Header from "@/Components/Dashboard/Modal/Elements/Header.vue";

const emit = defineEmits(["close", "switchModal"]);

const props = defineProps({
  show: Boolean,
  model: Object,
  scores: Array,
});

const form = useForm({
  scored_id: "",
});

const update = (id) => {
  form
    .transform((data) => ({
      scored_id:
        typeof data.scored_id === "object" ? data.scored_id.id : data.scored_id,
    }))
    .put(route(goTo("update"), { id }), {
      preserveScroll: true,
      onSuccess: () => {
        Notify.success(lang("updated"));
        emit("switchModal");
        router.reload();
      },
    });
};
</script>
<template>
  <EditModal :show="show" @close="$emit('close')" @update="update(model.id)">
    <Header :title="model.main_role?.name" />
    <div class="py-2 border-b">
      <div class="p-4">
        <form>
          <div class="grid gap-6 mb-6 overflow-auto">
            <div class="bg-gray-50 p-4 rounded-lg">
              <h4 class="bg-gray-50 text-gray-700 mb-2 font-medium">
                Información:
              </h4>
              <div class="text-sm text-gray-600 space-y-1">
                <p>
                  <span class="font-medium">Rol: </span
                  >{{ model.main_role?.name }}
                </p>
                <p>
                  <span class="font-medium">Departamento: </span>
                  {{ model.main_role?.department?.name }}
                </p>
                <p>
                  <span class="font-medium">Habilidad: </span
                  >{{ model.skill?.name }}
                </p>
              </div>
            </div>

            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">
                Cambiar Puntuación
              </label>
                <Selectable
                  id="scored_id"
                  v-model="form.scored_id"
                  :options="scores"
                  :onError="form.errors.scored_id"
                  label="alias"
                  track-by="id"
                  required
                />
              <p class="text-xs text-gray-500 mt-1">
                Puntuación actual:
                <span class="font-medium"> {{ model.score?.alias }}</span>
              </p>
            </div>
          </div>
        </form>
      </div>
    </div>
  </EditModal>
</template>
