<?php
defined('BASEPATH') or exit('No direct script access allowed');
?>

<!-- Contact Start -->
<div class="container-xxl py-5">
    <div class="container px-lg-5">

        <div class="row g-5">

            <!-- Formulario -->
            <div class="col-lg-7 col-md-12 wow fadeInUp" data-wow-delay="0.1s">
                <div class="highlight-pill mb-3">
                    <i class="fas fa-paper-plane me-1"></i> Envianos tu consulta
                </div>
                <div class="section-title position-relative mb-4 pb-4">
                    <h1 class="mb-2">Ponerse en contacto</h1>
                    <p class="text-muted mb-0">Completá el formulario y te respondemos a la brevedad posible.</p>
                </div>

                <form action="<?php echo base_url('contacto/enviar'); ?>" method="post" id="formContacto" class="contact-form">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <div class="contact-field">
                                <label class="contact-label">Su Nombre</label>
                                <div class="contact-input-wrap">
                                    <i class="fas fa-user contact-input-icon"></i>
                                    <input type="text" class="form-control contact-input" placeholder="Ej: Juan Pérez" name="nombre" id="nombre">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="contact-field">
                                <label class="contact-label">Email</label>
                                <div class="contact-input-wrap">
                                    <i class="fas fa-envelope contact-input-icon"></i>
                                    <input type="email" class="form-control contact-input" placeholder="correo@empresa.com" name="email" id="email">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="contact-field">
                                <label class="contact-label">Asunto</label>
                                <div class="contact-input-wrap">
                                    <i class="fas fa-tag contact-input-icon"></i>
                                    <input type="text" class="form-control contact-input" placeholder="¿En qué te podemos ayudar?" name="asunto" id="asunto">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="contact-field">
                                <label class="contact-label">Teléfono</label>
                                <div class="contact-input-wrap">
                                    <i class="fas fa-phone contact-input-icon"></i>
                                    <input type="text" class="form-control contact-input" placeholder="(+595) 981 000 000" name="telefono" id="telefono">
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="contact-field">
                                <label class="contact-label">Mensaje</label>
                                <div class="contact-input-wrap">
                                    <i class="fas fa-comment-dots contact-input-icon" style="top:18px;"></i>
                                    <textarea class="form-control contact-input" rows="5" placeholder="Contanos los detalles de tu consulta..." name="mensaje" id="mensaje"></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <button type="submit" class="btn btn-primary w-100 py-3 fw-bold">
                                <i class="fas fa-paper-plane me-2"></i>Enviar Mensaje
                            </button>
                        </div>
                    </div>
                </form>
            </div>

            <!-- Info de contacto -->
            <div class="col-lg-5 col-md-12 wow fadeInRight" data-wow-delay="0.3s">
                <div class="h-100 d-flex flex-column gap-4 pt-lg-5 mt-lg-4">

                    <div class="contact-info-card">
                        <div class="contact-info-icon">
                            <i class="fas fa-map-marker-alt fa-lg text-primary"></i>
                        </div>
                        <div>
                            <div class="contact-info-label">Dirección</div>
                            <div class="contact-info-value">
                                <?php echo anchor($this->config->item('maps_url'), $this->config->item('address'), ['target' => '_blank', 'style'=>'text-decoration:none; color:inherit;']); ?>
                            </div>
                        </div>
                    </div>

                    <div class="contact-info-card">
                        <div class="contact-info-icon">
                            <i class="fas fa-phone-alt fa-lg text-primary"></i>
                        </div>
                        <div>
                            <div class="contact-info-label">Teléfono / WhatsApp</div>
                            <div class="contact-info-value">
                                <?php echo anchor($this->config->item('whatsapp'), $this->config->item('phone'), ['target' => '_blank', 'style'=>'text-decoration:none; color:inherit;']); ?>
                            </div>
                        </div>
                    </div>

                    <div class="contact-info-card">
                        <div class="contact-info-icon">
                            <i class="fas fa-envelope fa-lg text-primary"></i>
                        </div>
                        <div>
                            <div class="contact-info-label">Email</div>
                            <div class="contact-info-value"><?php echo $this->config->item('email'); ?></div>
                        </div>
                    </div>

                    <div class="p-4 rounded-4 wow fadeInUp" data-wow-delay="0.5s"
                         style="background:linear-gradient(135deg,var(--primary),#0dd604);color:#fff;text-align:center;margin-top:auto;">
                        <i class="fab fa-whatsapp fa-3x mb-3 d-block" style="opacity:0.9;"></i>
                        <h5 class="fw-bold mb-2 text-white">¿Preferís por WhatsApp?</h5>
                        <p style="opacity:0.85;font-size:0.88rem;" class="mb-3">Respondemos más rápido por este canal.</p>
                        <a href="<?php echo $this->config->item('whatsapp'); ?>" target="_blank"
                           class="btn px-5 py-2 fw-bold" style="background:#fff;color:var(--primary);border-radius:50px;">
                            Chatear ahora
                        </a>
                    </div>

                </div>
            </div>

        </div>
    </div>
</div>
<!-- Contact End -->

<script>
    const formContacto = document.getElementById('formContacto');
    formContacto.addEventListener('submit', (e) => {
        e.preventDefault();
        sendForm(e.target).then(response => {
            if (response.status) {
                Swal.fire({
                    title: 'Gracias por su mensaje!',
                    text: 'Hemos recibido su mensaje. Te contestaremos en la brevedad posible',
                    icon: 'info',
                    confirmButtonText: 'OK, gracias!'
                }).then(() => {
                    window.location = response.redirect;
                });
            } else {
                Swal.fire({
                    title: 'Error!',
                    text: response.error.message,
                    icon: 'error',
                    confirmButtonText: 'OK, gracias!'
                });
            }
        });
    });
</script>
