<script setup lang="ts">
import { useForm, Head } from '@inertiajs/vue3';
import type {BreadcrumbItem} from "@/types";
import AppLayout from "@/layouts/AppLayout.vue";

const breadcrumbs: BreadcrumbItem[] = [
    {
        title: 'Статистика монтажников',
        href: '/installers/stats',
    },
];

const props = defineProps(['request']);

const form = useForm({
    rating: 5,
    comment: '',
});

const submit = () => {
    form.post(`/requests/${props.request.id}/rate`);
};
</script>

<template>
    <Head title="Заявки на монтаж" />

    <AppLayout :breadcrumbs="breadcrumbs">
        <div class="flex h-full flex-1 flex-col gap-4 rounded-xl p-4">
            <div class="max-w-lg mx-auto p-4">
                <h2 class="text-xl font-bold mb-4">Оценка монтажника</h2>

                <form @submit.prevent="submit" class="space-y-4">
                    <div>
                        <label>Оценка (1-5)</label>
                        <input type="number" min="1" max="5" step="0.5" v-model="form.rating" class="w-full border rounded p-2" />
                    </div>

                    <div>
                        <label>Комментарий</label>
                        <textarea v-model="form.comment" class="w-full border rounded p-2"></textarea>
                    </div>

                    <button type="submit" class="bg-green-600 text-white px-4 py-2 rounded">Оценить</button>
                </form>
            </div>
        </div>
    </AppLayout>
</template>

<style scoped>

</style>
