<?php include("admin/includes/config.php"); ?>
<div class="web_traffic_footer">
    <div class="footer-section">
        <div class="container">    
            
                        <?php
                            $query = "SELECT * FROM contacts";
                            $query_run =mysqli_query($conn, $query);
                                
                            if(mysqli_num_rows($query_run) > 0){
                                foreach($query_run as $row){   
                            ?>
            <div class="middle-portion">
                <div class="row">
                    <div class="col-lg-4 col-md-5 col-sm-6 col-12">
                        <a href="index.php">
                            <figure class="footer-logo">
                                <img src="assets/images/home1-logo.png" class="img-fluid logo-head" alt="">
                            </figure>
                        </a>
                        <p class="text-size-16 footer-text">Qorem ipsum dolor sit amet, consectetur adipiscing elit aut elit tellus luctus nec ulla corper mattis aulvinar daibus leo.</p>
                        <ul class="list-unstyled mb-0 social-icons">
                            <li><a href="#" class="text-decoration-none"><i class="fa-brands fa-facebook-f social-networks"></i></a></li>
                            <li><a href="#" class="text-decoration-none"><i class="fa-brands fa-twitter social-networks"></i></a></li>
                            <li><a href="#" class="text-decoration-none"><i class="fa-brands fa-linkedin-in social-networks"></i></a></li>
                        </ul>
                    </div>
                    <div class="col-lg-2 col-md-3 col-sm-12 col-12 d-md-block d-none">
                        <div class="links">
                            <ul class="list-unstyled mb-0">
                                <li><i class="fa-solid fa-square-full"></i><a href="index.php" class=" text-size-16 text text-decoration-none">Home</a></li>
                                <li><i class="fa-solid fa-square-full"></i><a href="about.php" class=" text-size-16 text text-decoration-none">About</a></li>
                                <li><i class="fa-solid fa-square-full"></i><a href="service.php" class=" text-size-16 text text-decoration-none">Services</a></li>
                                <li><i class="fa-solid fa-square-full"></i><a href="contact.php" class=" text-size-16 text text-decoration-none">Contact us</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6 col-12 d-sm-block">
                        <div class="icon">
                            <ul class="list-unstyled mb-0">
                                <li class="text">
                                    <i class="fa fa-phone fa-icon footer-location"></i>
                                    <a href="tel:<?php echo $row['phone']; ?>" class="mb-0 text text-decoration-none text-size-16"><?php echo $row['phone']; ?></a>
                                </li>
                                <li class="text">
                                    <i class="fa fa-envelope fa-icon footer-location"></i>
                                    <a href="mailto:<?php echo $row['email']; ?>" class="mb-0 text text-decoration-none text-size-16"><?php echo $row['email']; ?></a>
                                </li>
                                <li class="text">
                                    <i class="fa-solid fa-location-dot footer-location footer-location3"></i>
                                    <p class="text1 text-size-16"><?php echo $row['location']; ?></p>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-2 col-sm-12 col-12 d-lg-block d-none">
                    
                    <iframe src="<?php echo $row['iframe']; ?>" width="300" height="250" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                        <!-- <div class="email-form">
                            <form action="javascript:;">
                                <div class="form-group position-relative">
                                    <input type="text" class="form_style" placeholder="Enter Email:" name="email">
                                    <button><i class="send fa-sharp fa-solid fa-paper-plane"></i></button>
                                </div>
                                <div class="form-group check-box">
                                    <input type="checkbox" id="term">
                                    <label for="term">Quis autem vel eum iure reprehenderit rui in ea voluptate esse.</label>
                                </div>
                            </form>
                        </div> -->
                    </div>
                </div>
            </div>

            <?php }} ?>

            <div class="copyright">
                <div class="row">
                    <div class="col-12">
                        <p class="mb-0 text-size-16">Copyright © 2024 Keywordly All rights reserved. Design And Developed by <a href="https://saavytechnologies.com/" style="color:red;">Saavy Technologies</a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade modal-fullscreen-sm-down" id="myModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Enquiry Form</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="contactForm" method="post">
                    <div class="custom-form-container">
                        <div class="row">
                            <div class="col-md-6 mt-2">
                                <input type="text" class="form-control custom-input" name="name" placeholder="Name" required>
                            </div>
                            <div class="col-md-6 mt-2">
                                <input type="email" class="form-control custom-input" name="Email" placeholder="Email" required>
                            </div>
                            <div class="col-md-6 mt-2">
                                <input type="number" class="form-control custom-input" name="phone" placeholder="Phone" required>
                            </div>
                            <div class="col-md-6 mt-2">
                                <select name="seo" class="form-control custom-select" required>
                                    <option value="">Select</option>
                                    <option value="Seo">SEO</option>
                                    <option value="Marketing">Marketing</option>
                                </select>
                            </div>
                            <div class="col-md-12 mt-2">
                                <input type="text" class="form-control custom-input" name="url" placeholder="Website URL" required>
                            </div>
                            <div class="col-md-12 mt-2">
                                <textarea name="message" class="form-control custom-textarea" placeholder="Message" required></textarea>
                            </div>
                            <div class="col-md-12 mt-4 text-center">
                                <button type="submit" class="btn btn-primary custom-btn">Send</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<style>
    /* Custom styles for the form */
    .custom-form-container {
        /* background: linear-gradient(149deg, #ed0606, #00800075); */
        background: gray;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    }

    .custom-input, .custom-select, .custom-textarea {
        border: 1px solid #ccc;
        border-radius: 8px;
        padding: 12px;
        background-color: #fff;
        transition: all 0.3s ease;
        outline: none;
        line-height: 25px;

    }

    .custom-input:focus, .custom-select:focus, .custom-textarea:focus {
        border-color: #007bff;
        box-shadow: 0 0 8px rgba(0, 123, 255, 0.2);
    }

    .custom-textarea {
        height: 100px;
        resize: none;
    }

    .custom-btn {
        background-color: #007bff;
        border: none;
        padding: 10px 30px;
        border-radius: 25px;
        font-size: 16px;
        transition: background-color 0.3s ease;
    }

    .custom-btn:hover {
        background-color: #0056b3;
    }

    /* Adding animation */
    .modal-content {
        animation: slideIn 0.5s ease-out;
    }

    @keyframes slideIn {
        from {
            transform: translateY(50px);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    /* Responsive styling */
    @media (max-width: 768px) {
        .custom-input, .custom-select, .custom-textarea {
            font-size: 14px;
        }

        .custom-btn {
            font-size: 14px;
            padding: 8px 20px;
        }
    }
</style>

<script>
    // Show the modal after 5 seconds
    window.addEventListener('load', function () {
        setTimeout(function () {
            var myModal = new bootstrap.Modal(document.getElementById('myModal'));
            myModal.show();
        }, 5000);
    });
</script>