<script setup lang="ts">
import AdminLayout from '@/Layouts/AdminLayout.vue';
import admin from '@/routes/admin';
import { Head, useForm } from '@inertiajs/vue3';
import { ArrowLeft } from 'lucide-vue-next';

const props = defineProps<{
    secondHandBuy: {
        id: number;
        customer_name: string;
        phone_number: string;
        mobile_model: string;
        imei: string;
        buy_price: number;
        condition: string;
        date: string;
    };
}>();

const form = useForm({
    customer_name: props.secondHandBuy.customer_name,
    phone_number: props.secondHandBuy.phone_number,
    mobile_model: props.secondHandBuy.mobile_model,
    imei: props.secondHandBuy.imei,
    buy_price: props.secondHandBuy.buy_price.toString(),
    condition: props.secondHandBuy.condition,
});

const submit = () => {
    form.put(admin.secondHandBuys.update.url({ secondHandBuy: props.secondHandBuy.id }));
};
</script>

<template>
    <AdminLayout>
        <Head title="Edit Second Hand Buy" />

        <div class="animate-fade-in space-y-8 pb-12">
            <div class="flex items-center gap-4">
                <Link
                    :href="admin.secondHandBuys.index.url()"
                    class="rounded-xl border border-slate-200 bg-white p-3 shadow-sm transition-colors hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-800 dark:hover:bg-slate-700"
                >
                    <ArrowLeft :size="20" />
                </Link>
                <div>
                    <h1 class="text-3xl font-black tracking-tight text-slate-900 dark:text-white">Edit Second Hand Buy</h1>
                    <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">Update second-hand buy details.</p>
                </div>
            </div>

            <form @submit.prevent="submit" class="rounded-4xl border border-slate-200/60 bg-white p-8 shadow-sm dark:border-slate-700 dark:bg-slate-800">
                <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
                    <div>
                        <label class="block text-sm font-bold text-slate-700 dark:text-slate-300">Customer Name</label>
                        <input
                            v-model="form.customer_name"
                            type="text"
                            class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2 shadow-sm focus:border-brand-500 focus:outline-none focus:ring-1 focus:ring-brand-500 dark:border-slate-600 dark:bg-slate-700 dark:text-white"
                            required
                        />
                        <div v-if="form.errors.customer_name" class="mt-1 text-sm text-red-600">{{ form.errors.customer_name }}</div>
                    </div>
                    <div>
                        <label class="block text-sm font-bold text-slate-700 dark:text-slate-300">Phone Number</label>
                        <input
                            v-model="form.phone_number"
                            type="text"
                            class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2 shadow-sm focus:border-brand-500 focus:outline-none focus:ring-1 focus:ring-brand-500 dark:border-slate-600 dark:bg-slate-700 dark:text-white"
                            required
                        />
                        <div v-if="form.errors.phone_number" class="mt-1 text-sm text-red-600">{{ form.errors.phone_number }}</div>
                    </div>
                    <div>
                        <label class="block text-sm font-bold text-slate-700 dark:text-slate-300">Mobile Model</label>
                        <input
                            v-model="form.mobile_model"
                            type="text"
                            class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2 shadow-sm focus:border-brand-500 focus:outline-none focus:ring-1 focus:ring-brand-500 dark:border-slate-600 dark:bg-slate-700 dark:text-white"
                            required
                        />
                        <div v-if="form.errors.mobile_model" class="mt-1 text-sm text-red-600">{{ form.errors.mobile_model }}</div>
                    </div>
                    <div>
                        <label class="block text-sm font-bold text-slate-700 dark:text-slate-300">IMEI</label>
                        <input
                            v-model="form.imei"
                            type="text"
                            class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2 shadow-sm focus:border-brand-500 focus:outline-none focus:ring-1 focus:ring-brand-500 dark:border-slate-600 dark:bg-slate-700 dark:text-white"
                            required
                        />
                        <div v-if="form.errors.imei" class="mt-1 text-sm text-red-600">{{ form.errors.imei }}</div>
                    </div>
                    <div>
                        <label class="block text-sm font-bold text-slate-700 dark:text-slate-300">Buy Price</label>
                        <input
                            v-model="form.buy_price"
                            type="number"
                            step="0.01"
                            class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2 shadow-sm focus:border-brand-500 focus:outline-none focus:ring-1 focus:ring-brand-500 dark:border-slate-600 dark:bg-slate-700 dark:text-white"
                            required
                        />
                        <div v-if="form.errors.buy_price" class="mt-1 text-sm text-red-600">{{ form.errors.buy_price }}</div>
                    </div>
                    <div>
                        <label class="block text-sm font-bold text-slate-700 dark:text-slate-300">Condition</label>
                        <select
                            v-model="form.condition"
                            class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2 shadow-sm focus:border-brand-500 focus:outline-none focus:ring-1 focus:ring-brand-500 dark:border-slate-600 dark:bg-slate-700 dark:text-white"
                            required
                        >
                            <option value="excellent">Excellent</option>
                            <option value="good">Good</option>
                            <option value="fair">Fair</option>
                            <option value="poor">Poor</option>
                        </select>
                        <div v-if="form.errors.condition" class="mt-1 text-sm text-red-600">{{ form.errors.condition }}</div>
                    </div>
                </div>
                <div class="mt-6 flex justify-end">
                    <button
                        type="submit"
                        :disabled="form.processing"
                        class="rounded-xl bg-brand-600 px-6 py-3 text-sm font-bold text-white transition-colors hover:bg-brand-700 disabled:opacity-50"
                    >
                        {{ form.processing ? 'Saving...' : 'Update Second Hand Buy' }}
                    </button>
                </div>
            </form>
        </div>
    </AdminLayout>
</template>