<template>
  <div>
    <Head :title="$t(title)" />
    <div class="max-w-3xl bg-white dark:bg-slate-800 rounded-lg shadow overflow-hidden border border-slate-200 dark:border-slate-700">
      <form @submit.prevent="update">
        <MenuFormFields
          :form="form"
          :route-options="route_options"
          :feature-options="feature_options"
          :locations="locations"
        />
        <div class="px-8 py-4 bg-slate-50 dark:bg-slate-900/50 border-t border-slate-200 dark:border-slate-700 flex justify-end">
          <loading-button :loading="form.processing" class="btn-indigo" type="submit">
            {{ $t('Update') }}
          </loading-button>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
import { Head } from '@inertiajs/vue3'
import Layout from '@/Shared/Layout.vue'
import LoadingButton from '@/Shared/LoadingButton.vue'
import MenuFormFields from '@/Pages/NavigationMenus/MenuFormFields.vue'

export default {
  layout: Layout,
  components: { Head, LoadingButton, MenuFormFields },
  props: {
    title: String,
    menu: Object,
    route_options: Array,
    feature_options: Array,
    locations: Array,
  },
  data() {
    return {
      form: this.$inertia.form({
        location: this.menu.location,
        label: this.menu.label,
        route_name: this.menu.route_name || '',
        route_params: this.menu.route_params,
        url: this.menu.url || '',
        icon: this.menu.icon || '',
        active_key: this.menu.active_key || '',
        feature_slug: this.menu.feature_slug || '',
        target: this.menu.target || '_self',
        sort_order: this.menu.sort_order,
        is_active: this.menu.is_active,
      }),
    }
  },
  methods: {
    update() {
      this.form.put(this.route('menus.update', this.menu.id))
    },
  },
}
</script>
