<!-- Container Principal -->
<div x-data="parametrizacionForm" class="bg-white rounded-lg shadow">
    <div class="container mx-auto p-6 w-full">
        <h1 class="text-2xl font-bold mb-4">Parametrización del sitio web</h1>
        <p class="mb-4 text-sm">Gestión de parametrización del sitio web</p>

        <div x-show="loading" class="fixed inset-0 bg-gray-800 bg-opacity-75 flex z-50 justify-center items-center">
            <img src="../img/loading.gif" alt="Cargando..." class="w-16 h-16" />
        </div>

        <!-- Inicio del contenedor de grid -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <!-- Sección General -->
            <div class="p-6 rounded-lg border w-full shadow">
                <h2 class="text-xl font-bold mb-2">General</h2>
                <!-- Contenido de la sección General -->
                <label class="block mb-2" for="logo">Logo</label>
                <input type="file" id="logo" @change="handleFileChange($event, 'logo')"
                    class="border border-gray-300 rounded w-full p-2 mb-2" accept="image/*">
                <p x-show="logo_path" class="mb-2 text-sm text-gray-600">
                    Logo actual: <a :href="`/${logo_path}`" target="_blank" class="text-blue-500 underline"
                        x-text="logo_path.split('/').pop()"></a>
                </p>

                <!--<label class="block mb-2" for="video_institucional">Video institucional</label>
                <input type="file" id="video_institucional" @change="handleFileChange($event, 'video_institucional')" class="border border-gray-300 rounded w-full p-2 mb-2" accept="video/*">
                <p x-show="video_institucional_path" class="mb-2 text-sm text-gray-600">
                    Logo actual: <a :href="`/${video_institucional_path}`" target="_blank" class="text-blue-500 underline" x-text="video_institucional_path.split('/').pop()"></a>
                </p>-->

                <label class="block mb-2" for="descripcion_seo">Descripción SEO</label>
                <textarea type="text" id="descripcion_seo" x-model="descripcion_seo"
                    placeholder="Ingrese la descripción SEO"
                    class="border border-gray-300 rounded w-full p-2 mb-4"></textarea>

                <label class="block mb-2" for="email">Correo electrónico</label>
                <input type="email" id="email" x-model="email" placeholder="Ingrese el correo electrónico"
                    class="border border-gray-300 rounded w-full p-2 mb-4">

                <label class="block mb-2" for="enlace_pagar_ahora">Enlace de Pagar Ahora</label>
                <input type="url" id="enlace_pagar_ahora" x-model="enlace_pagar_ahora"
                    placeholder="Ingrese el enlace de pago" class="border border-gray-300 rounded w-full p-2 mb-4">

                <label class="block mb-2" for="imagen_resena">Imagen de la Reseña</label>
                <input type="file" id="imagen_resena" @change="handleFileChange($event, 'imagen_resena')"
                    class="border border-gray-300 rounded w-full p-2 mb-4" accept="image/*">
                <!-- Mostrar imagen actual de la reseña -->
                <p x-show="imagen_resena_path" class="mb-2 text-sm text-gray-600">
                    Imagen actual: <a :href="`/${imagen_resena_path}`" target="_blank" class="text-blue-500 underline"
                        x-text="imagen_resena_path.split('/').pop()"></a>
                </p>

                <!-- Botón de Guardar para esta sección -->
                <div class="mt-4 text-right">
                    <button @click.prevent="submitUpdateGeneral"
                        class="bg-[#8eb02f] text-white px-4 py-2 rounded">Guardar General</button>
                </div>
            </div>

            <!-- Sección Documentos -->
            <div class="p-6 rounded-lg border w-full shadow">
                <h2 class="text-xl font-bold mb-2">Documentos</h2>
                <!-- Contenido de la sección Documentos -->
                <label class="block mb-2" for="contrato_condiciones">Contrato Condiciones</label>
                <input type="file" id="contrato_condiciones" @change="handleFileChange($event, 'contrato_condiciones')"
                    class="border border-gray-300 rounded w-full p-2 mb-2" accept=".pdf">
                <!-- Mostrar contrato de condiciones actual -->
                <p x-show="contrato_condiciones_path" class="mb-2 text-sm text-gray-600">
                    Archivo actual: <a :href="`/${contrato_condiciones_path}`" target="_blank"
                        class="text-blue-500 underline" x-text="contrato_condiciones_path.split('/').pop()"></a>
                </p>

                <label class="block mb-2" for="proteccion_datos">Protección de Datos</label>
                <input type="file" id="proteccion_datos" @change="handleFileChange($event, 'proteccion_datos')"
                    class="border border-gray-300 rounded w-full p-2 mb-2" accept=".pdf">
                <!-- Mostrar protección de datos actual -->
                <p x-show="proteccion_datos_path" class="mb-2 text-sm text-gray-600">
                    Archivo actual: <a :href="`/${proteccion_datos_path}`" target="_blank"
                        class="text-blue-500 underline" x-text="proteccion_datos_path.split('/').pop()"></a>
                </p>

                <label class="block mb-2" for="contrato_condiciones_descripcion">Descripción de Condiciones</label>
                <input type="text" id="contrato_condiciones_descripcion" x-model="contrato_condiciones_descripcion"
                    placeholder="Ingrese la descripción" class="border border-gray-300 rounded w-full p-2 mb-4">

                <label class="block mb-2" for="proteccion_datos_descripcion">Descripción de Protección de Datos</label>
                <input type="text" id="proteccion_datos_descripcion" x-model="proteccion_datos_descripcion"
                    placeholder="Ingrese la descripción" class="border border-gray-300 rounded w-full p-2 mb-4">

                <!-- Botón de Guardar para esta sección -->
                <div class="mt-4 text-right">
                    <button @click.prevent="submitUpdateDocumentos"
                        class="bg-[#8eb02f] text-white px-4 py-2 rounded">Guardar Documentos</button>
                </div>
            </div>

            <!-- Sección Redes Sociales -->
            <div class="p-6 rounded-lg border w-full shadow">
                <h2 class="text-xl font-bold mb-2">Redes Sociales</h2>
                <!-- Contenido de la sección Redes Sociales -->
                <label class="block mb-2" for="enlace_facebook">Enlace Facebook</label>
                <input type="url" id="enlace_facebook" x-model="enlace_facebook"
                    placeholder="Ingrese el enlace de Facebook" class="border border-gray-300 rounded w-full p-2 mb-4">

                <label class="block mb-2" for="enlace_instagram">Enlace Instagram</label>
                <input type="url" id="enlace_instagram" x-model="enlace_instagram"
                    placeholder="Ingrese el enlace de Instagram" class="border border-gray-300 rounded w-full p-2 mb-4">

                <label class="block mb-2" for="enlace_whatsapp">Whatsapp Principal</label>
                <input type="url" id="enlace_whatsapp" x-model="enlace_whatsapp"
                    placeholder="Ingrese el número de Whatsapp" class="border border-gray-300 rounded w-full p-2 mb-4">

                <!-- Campo Select para Estado -->
                <label class="block mb-2" for="estado_redes">Estado</label>
                <select id="estado_redes" x-model="estado_redes" class="border border-gray-300 rounded w-full p-2 mb-4">
                    <option value="true">Activo</option>
                    <option value="false">Inactivo</option>
                </select>

                <!-- Botón de Guardar para esta sección -->
                <div class="mt-4 text-right">
                    <button @click.prevent="submitUpdateRedes" class="bg-[#8eb02f] text-white px-4 py-2 rounded">Guardar
                        Redes Sociales</button>
                </div>
            </div>

            <!-- Sección FNB (ocupa el ancho completo) 
            <div class="p-6 rounded-lg border w-full shadow">
                <h2 class="text-xl font-bold mb-2">FNB</h2>
                
                <label class="block mb-2" for="email_notificaciones_fnb">Email Notificaciones FNB</label>
                <input type="email" id="email_notificaciones_fnb" x-model="email_notificaciones_fnb" placeholder="Ingrese el correo" class="border border-gray-300 rounded w-full p-2 mb-2">
                <label class="block mb-2" for="descripcion_fnb">Descripción</label>
                <textarea type="text" id="descripcion_fnb" x-model="descripcion_fnb" placeholder="Ingrese la descripción FNB" class="border border-gray-300 rounded w-full p-2 mb-4"></textarea>

                <label class="block mb-2" for="donde_comprar_fnb">Dónde Comprar FNB</label>
                <input type="file" id="donde_comprar_fnb" @change="handleFileChange($event, 'donde_comprar_fnb')" class="border border-gray-300 rounded w-full p-2 mb-4" accept=".pdf">
                
                <p x-show="donde_comprar_fnb_path" class="mb-2 text-sm text-gray-600">
                    Archivo actual: <a :href="`/${donde_comprar_fnb_path}`" target="_blank" class="text-blue-500 underline" x-text="donde_comprar_fnb_path.split('/').pop()"></a>
                </p>

                
                <div class="mt-4 text-right">
                    <button @click.prevent="submitUpdateFNB" class="bg-[#8eb02f] text-white px-4 py-2 rounded">Guardar FNB</button>
                </div>
            </div>-->

            <!-- Sección FNB (ocupa el ancho completo) -->
            <div class="p-6 rounded-lg border w-full shadow">
                <h2 class="text-xl font-bold mb-2">Importancia del pago</h2>
                <!-- Contenido de la sección FNB -->
                <label class="block mb-2" for="descripcion">Descripción</label>
                <textarea type="text" id="descripcion" x-model="descripcion" placeholder="Ingrese la descripción SEO"
                    class="border border-gray-300 rounded w-full p-2 mb-4"></textarea>

                <label class="block mb-2" for="descripcion_cuadro_azul">Descripción del cuadro azul</label>
                <textarea type="text" id="descripcion_cuadro_azul" x-model="descripcion_cuadro_azul"
                    placeholder="Ingrese la descripción SEO"
                    class="border border-gray-300 rounded w-full p-2 mb-4"></textarea>

                <!-- Botón de Guardar para esta sección -->
                <div class="mt-4 text-right">
                    <button @click.prevent="submitUpdateImportancia"
                        class="bg-[#8eb02f] text-white px-4 py-2 rounded">Guardar importancia del Pago</button>
                </div>
            </div>

        </div>
        <!-- Fin del contenedor de grid -->
    </div>

    <!-- Alpine.js Script -->
    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('parametrizacionForm', () => ({
                logo: null,
                descripcion_seo: '',
                email: '',
                enlace_pagar_ahora: '',
                contrato_condiciones: null,
                proteccion_datos: null,
                contrato_condiciones_descripcion: '',
                proteccion_datos_descripcion: '',
                enlace_facebook: '',
                enlace_instagram: '',
                enlace_whatsapp: '',
                email_notificaciones_fnb: '',
                donde_comprar_fnb: null,
                loading: false,
                logo_path: '',
                video_institucional: null,
                video_institucional_path: '',
                contrato_condiciones_path: '',
                proteccion_datos_path: '',
                donde_comprar_fnb_path: '',
                descripcion: '',
                descripcion_cuadro_azul: '',
                descripcion_fnb: '',
                estado_redes: true,
                imagen_resena: null,
                imagen_resena_path: '',
                id_dato: 0,

                init() {
                    this.loadData();
                },

                loadData() {
                    this.loading = true;
                    fetch('/loadparametrizacionweb')
                        .then(response => response.json())
                        .then(data => {
                            if (data) {
                                this.id_dato = data.ID;
                                this.descripcion_seo = data.descripcion_seo;
                                this.email = data.email;
                                this.enlace_pagar_ahora = data.enlace_pagar_ahora;
                                this.contrato_condiciones_descripcion = data.contrato_condiciones_descripcion;
                                this.proteccion_datos_descripcion = data.proteccion_datos_descripcion;
                                this.enlace_facebook = data.enlace_facebook;
                                this.enlace_instagram = data.enlace_instagram;
                                this.enlace_whatsapp = data.enlace_whatsapp;
                                this.email_notificaciones_fnb = data.email_notificaciones_fnb;
                                this.logo_path = data.logo;
                                this.video_institucional_path = data.video_institucional;
                                this.contrato_condiciones_path = data.contrato_condiciones;
                                this.proteccion_datos_path = data.proteccion_datos;
                                this.donde_comprar_fnb_path = data.donde_comprar_fnb;
                                this.descripcion = data.descripcion;
                                this.descripcion_cuadro_azul = data.descripcion_cuadro_azul;
                                this.descripcion_fnb = data.descripcion_fnb;
                                this.estado_redes = data.estado_redes;
                                this.imagen_resena_path = data.imagen_resena;
                            }
                        })
                        .catch(error => console.error('Error:', error))
                        .finally(() => {
                            this.loading = false;
                        });
                },

                handleFileChange(event, field) {
                    if (field === 'imagen_resena') {
                        this.imagen_resena = event.target.files[0];
                    } else if (field === 'logo') {
                        this.logo = event.target.files[0];
                    } else if (field === 'contrato_condiciones') {
                        this.contrato_condiciones = event.target.files[0];
                    } else if (field === 'proteccion_datos') {
                        this.proteccion_datos = event.target.files[0];
                    } else if (field === 'donde_comprar_fnb') {
                        this.donde_comprar_fnb = event.target.files[0];
                    } else if (field === 'video_institucional') {
                        this.video_institucional = event.target.files[0];
                    }
                },


                // Funciones de actualización para cada sección
                submitUpdateGeneral() {
                    this.loading = true;
                    const formData = new FormData();
                    formData.append('descripcion_seo', this.descripcion_seo);
                    formData.append('email', this.email);
                    formData.append('enlace_pagar_ahora', this.enlace_pagar_ahora);
                    if (this.logo) formData.append('logo', this.logo);
                    //if (this.video_institucional) formData.append('video_institucional', this.video_institucional);
                    if (this.imagen_resena) formData.append('imagen_resena', this.imagen_resena);
                    fetch('/app/parametrizacion-web/'+this.id_dato, {
                        method: 'PUT',
                        body: formData
                    })
                        .then(response => response.json())
                        .then(() => {
                            this.loadData();
                        })
                        .catch(error => console.error('Error:', error))
                        .finally(() => {
                            this.loading = false;
                        });
                },



                submitUpdateDocumentos() {
                    this.loading = true;
                    const formData = new FormData();
                    formData.append('contrato_condiciones_descripcion', this.contrato_condiciones_descripcion);
                    formData.append('proteccion_datos_descripcion', this.proteccion_datos_descripcion);
                    if (this.contrato_condiciones) formData.append('contrato_condiciones', this.contrato_condiciones);
                    if (this.proteccion_datos) formData.append('proteccion_datos', this.proteccion_datos);

                    fetch('/app/parametrizacion-web/'+this.id_dato, {
                        method: 'PUT',
                        body: formData
                    })
                        .then(response => response.json())
                        .then(() => {
                            this.loadData();
                        })
                        .catch(error => console.error('Error:', error))
                        .finally(() => {
                            this.loading = false;
                        });
                },

                submitUpdateRedes() {
                    this.loading = true;
                    const formData = new FormData();
                    formData.append('enlace_facebook', this.enlace_facebook);
                    formData.append('enlace_instagram', this.enlace_instagram);
                    formData.append('enlace_whatsapp', this.enlace_whatsapp);
                    formData.append('estado_redes', this.estado_redes);

                    fetch('/app/parametrizacion-web/'+this.id_dato, {
                        method: 'PUT',
                        body: formData
                    })
                        .then(response => response.json())
                        .then(() => {
                            this.loadData();
                        })
                        .catch(error => console.error('Error:', error))
                        .finally(() => {
                            this.loading = false;
                        });
                },

                submitUpdateFNB() {
                    this.loading = true;
                    const formData = new FormData();
                    formData.append('email_notificaciones_fnb', this.email_notificaciones_fnb);
                    formData.append('descripcion_fnb', this.descripcion_fnb);
                    if (this.donde_comprar_fnb) formData.append('donde_comprar_fnb', this.donde_comprar_fnb);

                    fetch('/app/parametrizacion-web/'+this.id_dato, {
                        method: 'PUT',
                        body: formData
                    })
                        .then(response => response.json())
                        .then(() => {
                            this.loadData();
                        })
                        .catch(error => console.error('Error:', error))
                        .finally(() => {
                            this.loading = false;
                        });
                },

                submitUpdateImportancia() {
                    this.loading = true;
                    const formData = new FormData();
                    formData.append('descripcion', this.descripcion);
                    formData.append('descripcion_cuadro_azul', this.descripcion_cuadro_azul);

                    fetch('/app/parametrizacion-web/'+this.id_dato, {
                        method: 'PUT',
                        body: formData
                    })
                        .then(response => response.json())
                        .then(() => {
                            this.loadData();
                        })
                        .catch(error => console.error('Error:', error))
                        .finally(() => {
                            this.loading = false;
                        });
                },

            }));
        });
    </script>

</div>