<script setup>
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
import { Head, Link, useForm } from '@inertiajs/vue3';
import { ref } from 'vue';

const props = defineProps({
    config: { type: Object, required: true },
});

const previewUrl = ref(null);

const form = useForm({
    nombre_empresa: props.config.nombre_empresa ?? '',
    nombre_corto: props.config.nombre_corto ?? '',
    nombre_largo: props.config.nombre_largo ?? '',
    rfc: props.config.rfc ?? '',
    descripcion: props.config.descripcion ?? '',
    telefono: props.config.telefono ?? '',
    email: props.config.email ?? '',
    direccion: props.config.direccion ?? '',
    codigo_postal: props.config.codigo_postal ?? '',
    ciudad: props.config.ciudad ?? '',
    estado: props.config.estado ?? '',
    pais: props.config.pais ?? 'México',
    sitio_web: props.config.sitio_web ?? '',
    logo: null,
});

const onLogo = (e) => {
    const file = e.target.files?.[0] ?? null;
    form.logo = file;
    previewUrl.value = file ? URL.createObjectURL(file) : null;
};

const submit = () => {
    form.post(route('admin.ranch.config.update'), { forceFormData: true });
};
</script>

<template>
    <Head title="Configuración empresa" />

    <AuthenticatedLayout>
        <template #header><h3 class="mb-0">Configuración de empresa</h3></template>
        <template #breadcrumb>
            <li class="breadcrumb-item"><Link :href="route('dashboard')">Inicio</Link></li>
            <li class="breadcrumb-item active">Empresa</li>
        </template>

        <div class="card card-success">
            <form @submit.prevent="submit">
                <div class="card-body row g-3">
                    <div class="col-md-6">
                        <label class="form-label">Nombre empresa</label>
                        <input v-model="form.nombre_empresa" class="form-control" required />
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Nombre corto</label>
                        <input v-model="form.nombre_corto" class="form-control" required />
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">RFC</label>
                        <input v-model="form.rfc" class="form-control" />
                    </div>
                    <div class="col-12">
                        <label class="form-label">Nombre largo</label>
                        <input v-model="form.nombre_largo" class="form-control" required />
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Teléfono</label>
                        <input v-model="form.telefono" class="form-control" />
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Email</label>
                        <input v-model="form.email" type="email" class="form-control" />
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Sitio web</label>
                        <input v-model="form.sitio_web" class="form-control" />
                    </div>
                    <div class="col-md-8">
                        <label class="form-label">Dirección</label>
                        <input v-model="form.direccion" class="form-control" />
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">C.P.</label>
                        <input v-model="form.codigo_postal" class="form-control" />
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Ciudad</label>
                        <input v-model="form.ciudad" class="form-control" />
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Estado</label>
                        <input v-model="form.estado" class="form-control" />
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">País</label>
                        <input v-model="form.pais" class="form-control" />
                    </div>
                    <div class="col-12">
                        <label class="form-label">Descripción</label>
                        <textarea v-model="form.descripcion" class="form-control" rows="2" />
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Logo</label>
                        <input type="file" class="form-control" accept="image/*" @change="onLogo" />
                        <div class="mt-2">
                            <img
                                v-if="previewUrl || config.logo_url"
                                :src="previewUrl || config.logo_url"
                                alt="Logo"
                                style="max-height: 80px"
                            />
                        </div>
                    </div>
                </div>
                <div class="card-footer">
                    <button type="submit" class="btn btn-success" :disabled="form.processing">Guardar</button>
                </div>
            </form>
        </div>
    </AuthenticatedLayout>
</template>
