<template>
    <section class="container mt-5 mb-5">
        <div class="container-contact">
            <div class="container-contact-info col-12 col-lg-6 py-4 px-5">
                <div class="location mb-2 mt-5">
                    <div class="icon">
                        <span><i class="bi bi-geo-alt"></i></span>
                    </div>
                    <div class="info">
                        <h3>Ubicación</h3>
                        <p>Calle 71 norte, Spmz 92 mz 7 entre ruta 5 y pnte. 42, C.P. 77516, Cancún, Quintana Roo</p>
                    </div>
                </div>
                <div class="phone-numbers mb-2">
                    <div class="icon">
                        <span><i class="bi bi-telephone"></i></span>
                    </div>
                    <div class="info">
                        <h3>Teléfonos</h3>
                        <div class="text-center phones">
                            <a :href="'tel:' + phone.number" class="text-center mb-3 d-inline-block"
                                v-for="(phone, index) in phones" :key="index">{{ phone.label }}</a>
                        </div>
                    </div>
                </div>
                <div class="location mb-2">
                    <div class="icon">
                        <span><i class="bi bi-envelope-at"></i></span>
                    </div>
                    <div class="info">
                        <h3>Correo electrónico</h3>
                        <a href="mailto:leviathansoluciones@gmail.com" class="nav-link">{{ runtime_config.public.email
                            }}</a>
                    </div>
                </div>

                <div class="social mb-5 mt-5">
                    <div class="socials">
                        <NuxtLink :to="runtime_config.public.facebook" class="nav-link" target="_blank">
                            <i class="bi bi-facebook"></i>
                            <span>Leviathán</span>
                        </NuxtLink>
                        <NuxtLink :to="runtime_config.public.instagram" class="nav-link" target="_blank">
                            <i class="bi bi-instagram"></i>
                            <span>@leviatanlimpiezaoceanica</span>
                        </NuxtLink>
                    </div>
                </div>

            </div>
            <div class="col-12 col-lg-6 py-4 px-5 container-form-contact">
                <form @submit.stop.prevent="send">
                    <h3 class="text-white text-center">Envíanos un mensaje</h3>
                    <div class="form-floating mb-3 mt-5">
                        <input type="text" class="form-control" id="name" placeholder="Ej. Fernando pérez" v-model="name">
                        <label for="name">Nombre</label>
                        <span class="text-danger"><small>{{errors.name}}</small></span>
                    </div>
                    <div class="form-floating mb-3">
                        <input type="tel" class="form-control" id="phone" placeholder="Ej. +52 998 2461 357" v-model="phone_number">
                        <label for="phone">Número de teléfono</label>
                        <span class="text-danger"><small>{{errors.phone_number}}</small></span>
                    </div>
                    <div class="form-floating mb-3">
                        <input type="email" class="form-control" id="email" placeholder="name@example.com" v-model="email">
                        <label for="email">Correo electrónico</label>
                        <span class="text-danger"><small>{{errors.email}}</small></span>
                    </div>
                    <div class="form-floating mb-3">
                        <textarea class="form-control" placeholder="Ej. Me gustaría más información" id="message"
                            style="height: 150px" v-model="message"></textarea>
                        <label for="message">Mensaje</label>
                        <span class="text-danger"><small>{{errors.message}}</small></span>
                    </div>
                    <div class="container-form-button">
                        <button type="submit" class="btn" @disabled="is_loading_send">{{ is_loading_send ? 'Enviando...' : 'Enviar' }}</button>
                    </div>
                </form>
            </div>

        </div>
    </section>
</template>

<script setup lang="ts">
import Swal from 'sweetalert2';
import { useField, useForm } from 'vee-validate';
import * as Yup from 'yup';
import type { FormContact } from '~/interface/form_contact.interface';

const contactStore = useContactStore();
const { sendMail } = contactStore;

const runtime_config = useRuntimeConfig();
const phones = ref<any>(runtime_config.public.phones);
const is_loading_send = ref(false);
const route = useRoute();

onMounted(async () => {
    if (route.query['message']) {
        setValues({
            message: 'Me gustaría saber más sobre '+route.query['message'].toString().toLowerCase()
        });
    }
})


const { handleSubmit, setValues, values, errors, resetForm } = useForm<FormContact>({
  validationSchema: Yup.object({
    name: Yup.string().required('El nombre es obligatorio.'),
    phone_number: Yup.string().required('El número telefónico es obligatorio.'),
    email: Yup.string().email().required('El correo electrónico es obligatorio.'),
    message: Yup.string().required('El mensaje es obligatorio.'),
  }),
  initialValues: {
    name: '',
    phone_number: '',
    email: '',
    message: '',
  },
});

const { value: name } = useField('name');
const { value: phone_number } = useField('phone_number');
const { value: email } = useField('email');
const { value: message } = useField('message');

const send = handleSubmit(async values => {
    is_loading_send.value = true;

    const response = await sendMail(values);

    if(response) {
        Swal.fire({
            icon: 'success',
            title: '¡Éxito!',
            text: 'En breve nos contactaremos con usted'
        });
        resetForm();
    } else {
        Swal.fire({
            icon: 'error',
            title: '¡Error!',
            text: 'Ha ocurrido un error, por favor, inténtelo más tarde'
        });
    }

    setTimeout(() => {
        is_loading_send.value = false;
    }, 2000)
})

</script>

<style scoped lang="scss">
.form-floating > label {
    z-index: 0;
}

.container-contact {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column-reverse;
    background-image: url('/images/secondary.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right;

    .container-contact-info {
        background: #113755;

        .location,
        .phone-numbers {
            display: flex;
            gap: 5px;
            padding: 0px 10px;

            .info {
                color: white;
                padding-top: 5px;

                h3 {
                    margin-bottom: 0px;
                    font-size: 25px;
                }

                p {
                    text-align: justify;
                }

                .phones {
                    display: flex;
                    flex-direction: column;
                    margin-top: 10px;
                }
            }
        }

        .socials {
            display: flex;
            justify-content: center;
            flex-direction: column;
            gap: 20px;
            padding: 0px 10px;

            a {
                display: flex;
                align-items: center;
                gap: 10px;
                font-size: 25px;
                transition: all 300ms ease;

                span {
                    font-size: 17px;
                }
                &:hover {
                    cursor: pointer;
                    color: rgb(211, 211, 211);
                }
            }
        }
    }

    .icon {
        i {
            color: white;
            font-size: 25px;
        }
    }

    a {
        text-decoration: none;
        color: white;
        transition: all 300ms ease;

        &:hover {
            color: rgb(192, 192, 192)
        }
    }

    .container-form-contact {
        form {

            input,
            textarea {
                background: #113755;
                border: 1px solid #113755;
                color: white;
            }

            label {
                color: white;
            }

            .form-floating>.form-control:focus~label,
            .form-floating>.form-control:not(:placeholder-shown)~label,
            .form-floating>.form-select~label {
                color: rgba($color: #ccc, $alpha: 1.0);
            }

            .form-floating>.form-control-plaintext~label::after,
            .form-floating>.form-control:focus~label::after,
            .form-floating>.form-control:not(:placeholder-shown)~label::after,
            .form-floating>.form-select~label::after {
                background: transparent;
            }
        }

        .container-form-button {
            display: flex;
            justify-content: flex-end;

            button {
                background: #B4590A;
                color: #FFF;
                padding: 5px 30px;
            }
        }
    }
}

@media (min-width: 992px) {
    .container-contact {
        flex-direction: row;
    }

    .container-form-contact {
        form {
            padding: 0px 20px;
        }
    }

    .location,
    .phone-numbers,
    .socials {
        padding: 0px 20px;
    }
}
</style>