<script setup lang="ts">
import Modal from '@/Components/Common/Modal.vue';
import employee from '@/routes/employee';
import { useForm } from '@inertiajs/vue3';

const props = defineProps<{
    show: boolean;
}>();

const emit = defineEmits(['close']);

const form = useForm({
    reason: '',
});

const submit = () => {
    form.post(employee.salaryCertificates.store.url(), {
        preserveScroll: true,
        onSuccess: () => {
            form.reset();
            emit('close');
        },
    });
};
</script>

<template>
    <Modal :show="show" @close="emit('close')" max-width="md">
        <div class="p-6">
            <h2 class="text-lg font-bold text-slate-900 dark:text-white">
                {{ __('Request Salary Certificate') }}
            </h2>
            <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">
                {{ __('Please provide a reason for requesting the salary certificate.') }}
            </p>

            <form @submit.prevent="submit" class="mt-6 space-y-4">
                <div>
                    <label for="reason" class="block text-sm font-medium text-slate-700 dark:text-slate-300">
                        {{ __('Reason for Request') }}
                    </label>
                    <textarea
                        id="reason"
                        v-model="form.reason"
                        rows="4"
                        class="mt-1 block w-full rounded-xl border border-slate-300 bg-white px-3 py-2 text-slate-900 shadow-sm outline-none focus:border-transparent focus:ring-2 focus:ring-(--brand-primary) dark:border-slate-700 dark:bg-slate-800 dark:text-white"
                        placeholder="e.g., Personal loan application, Visa processing..."
                    ></textarea>
                    <p v-if="form.errors.reason" class="mt-1 text-xs text-red-500">{{ form.errors.reason }}</p>
                </div>

                <div class="mt-6 flex justify-end gap-3">
                    <button
                        type="button"
                        @click="emit('close')"
                        class="rounded-xl border border-slate-300 bg-white px-4 py-2 text-sm font-bold text-slate-700 hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-700"
                    >
                        {{ __('Cancel') }}
                    </button>
                    <button
                        type="submit"
                        :disabled="form.processing"
                        class="rounded-xl bg-(--brand-primary) px-4 py-2 text-sm font-bold text-white shadow-lg hover:brightness-110 disabled:opacity-50"
                    >
                        {{ form.processing ? __('Submitting...') : __('Submit Request') }}
                    </button>
                </div>
            </form>
        </div>
    </Modal>
</template>
