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

const form = useForm({
    customer_name: '',
    phone_number: '',
    device_model: '',
    imei_number: '',
    service_type: 'frp',
    note: '',
    service_price: '',
});

const submit = () => {
    form.post(route('shop.orders.store'), {
        onSuccess: () => form.reset(),
    });
};
</script>

<template>
    <ShopLayout>
        <Head title="Create Order" />

        <div class="space-y-8">
            <div class="flex items-center gap-4">
                <Link href="route('shop.orders.index')" class="rounded-lg border border-slate-700 bg-slate-800 p-2 hover:bg-slate-700">
                    <ArrowLeft :size="20" class="text-white" />
                </Link>
                <div>
                    <h2 class="text-2xl font-black text-white">Create New Order</h2>
                    <p class="text-slate-400">Submit a new unlock order</p>
                </div>
            </div>

            <form @submit.prevent="submit" class="rounded-2xl border border-slate-700 bg-slate-800/50 p-8 backdrop-blur space-y-6">
                <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
                    <!-- Customer Name -->
                    <div>
                        <label class="block text-sm font-bold text-slate-300 mb-2">Customer Name</label>
                        <input
                            v-model="form.customer_name"
                            type="text"
                            class="w-full rounded-lg border border-slate-600 bg-slate-900/50 px-4 py-2 text-white focus:border-blue-500 focus:outline-none"
                            required
                        />
                        <div v-if="form.errors.customer_name" class="mt-1 text-sm text-red-400">{{ form.errors.customer_name }}</div>
                    </div>

                    <!-- Phone Number -->
                    <div>
                        <label class="block text-sm font-bold text-slate-300 mb-2">Phone Number</label>
                        <input
                            v-model="form.phone_number"
                            type="text"
                            class="w-full rounded-lg border border-slate-600 bg-slate-900/50 px-4 py-2 text-white focus:border-blue-500 focus:outline-none"
                            required
                        />
                        <div v-if="form.errors.phone_number" class="mt-1 text-sm text-red-400">{{ form.errors.phone_number }}</div>
                    </div>

                    <!-- Device Model -->
                    <div>
                        <label class="block text-sm font-bold text-slate-300 mb-2">Device Model</label>
                        <input
                            v-model="form.device_model"
                            type="text"
                            class="w-full rounded-lg border border-slate-600 bg-slate-900/50 px-4 py-2 text-white focus:border-blue-500 focus:outline-none"
                            placeholder="iPhone 12 Pro / Samsung S21"
                            required
                        />
                        <div v-if="form.errors.device_model" class="mt-1 text-sm text-red-400">{{ form.errors.device_model }}</div>
                    </div>

                    <!-- IMEI Number -->
                    <div>
                        <label class="block text-sm font-bold text-slate-300 mb-2">IMEI Number</label>
                        <input
                            v-model="form.imei_number"
                            type="text"
                            class="w-full rounded-lg border border-slate-600 bg-slate-900/50 px-4 py-2 text-white focus:border-blue-500 focus:outline-none"
                            required
                        />
                        <div v-if="form.errors.imei_number" class="mt-1 text-sm text-red-400">{{ form.errors.imei_number }}</div>
                    </div>

                    <!-- Service Type -->
                    <div>
                        <label class="block text-sm font-bold text-slate-300 mb-2">Service Type</label>
                        <select
                            v-model="form.service_type"
                            class="w-full rounded-lg border border-slate-600 bg-slate-900/50 px-4 py-2 text-white focus:border-blue-500 focus:outline-none"
                            required
                        >
                            <option value="frp">FRP Unlock</option>
                            <option value="icloud">iCloud Unlock</option>
                            <option value="network">Network Unlock</option>
                            <option value="mdm">MDM Unlock</option>
                        </select>
                        <div v-if="form.errors.service_type" class="mt-1 text-sm text-red-400">{{ form.errors.service_type }}</div>
                    </div>

                    <!-- Service Price -->
                    <div>
                        <label class="block text-sm font-bold text-slate-300 mb-2">Service Price</label>
                        <input
                            v-model="form.service_price"
                            type="number"
                            step="0.01"
                            class="w-full rounded-lg border border-slate-600 bg-slate-900/50 px-4 py-2 text-white focus:border-blue-500 focus:outline-none"
                            required
                        />
                        <div v-if="form.errors.service_price" class="mt-1 text-sm text-red-400">{{ form.errors.service_price }}</div>
                    </div>
                </div>

                <!-- Note -->
                <div>
                    <label class="block text-sm font-bold text-slate-300 mb-2">Note (Optional)</label>
                    <textarea
                        v-model="form.note"
                        rows="4"
                        class="w-full rounded-lg border border-slate-600 bg-slate-900/50 px-4 py-2 text-white focus:border-blue-500 focus:outline-none"
                        placeholder="Any additional information about the unlock process..."
                    />
                    <div v-if="form.errors.note" class="mt-1 text-sm text-red-400">{{ form.errors.note }}</div>
                </div>

                <button
                    type="submit"
                    :disabled="form.processing"
                    class="w-full rounded-lg bg-gradient-to-r from-blue-600 to-blue-700 py-3 font-bold text-white transition-all hover:shadow-lg disabled:opacity-50"
                >
                    {{ form.processing ? 'Submitting Order...' : 'Submit Order' }}
                </button>
            </form>
        </div>
    </ShopLayout>
</template>
