<?php $this->load->view('website/partials/header'); ?>

        <!--Start Breadcrumb Area-->
        <section class="breadcrumb-area">
            <div class="breadcrumb-area-bg" style="background-image: url(<?php echo base_url('assets/website/assets/images/backgrounds/breadcrumb-area-bg.jpg'); ?>);"></div>
            <div class="container">
                <div class="row">
                    <div class="col-xl-12">
                        <div class="inner-content">
                            <div class="title" data-aos="fade-right" data-aos-easing="linear" data-aos-duration="500">
                                <h2>Contact Us</h2>
                            </div>
                            <div class="breadcrumb-menu" data-aos="fade-left" data-aos-easing="linear" data-aos-duration="500">
                                <ul>
                                    <li><a href="<?php echo site_url(); ?>">Home</a></li>
                                    <li class="active">Contact Us</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!--End Breadcrumb Area-->


        <!--Start Contact Info-->
        <section style="padding: 80px 0;">
            <div class="container">
                <div class="row">
                    <!--Start Single Contact Info-->
                    <div class="col-xl-4 col-lg-4 col-md-12 mb-4">
                        <div class="text-center" style="padding: 40px 30px; background: white; border-radius: 15px; box-shadow: 0 5px 20px rgba(0,0,0,0.08); height: 100%;">
                            <div style="width: 70px; height: 70px; margin: 0 auto 25px; background: #667eea; border-radius: 15px; display: flex; align-items: center; justify-content: center;">
                                <svg width="35" height="35" fill="white" viewBox="0 0 24 24">
                                    <path d="M12 20.9l4.95-4.95a7 7 0 1 0-9.9 0L12 20.9zm0 2.828l-6.364-6.364a9 9 0 1 1 12.728 0L12 23.728zM12 13a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 2a4 4 0 1 1 0-8 4 4 0 0 1 0 8z"/>
                                </svg>
                            </div>
                            <h3 style="font-size: 20px; font-weight: 600; margin-bottom: 15px;">Our Location</h3>
                            <p style="color: #6c757d; font-size: 15px; line-height: 1.6; margin: 0;">123 Financial District<br>New York, NY 10004<br>United States</p>
                        </div>
                    </div>
                    <!--End Single Contact Info-->

                    <!--Start Single Contact Info-->
                    <div class="col-xl-4 col-lg-4 col-md-12 mb-4">
                        <div class="text-center" style="padding: 40px 30px; background: white; border-radius: 15px; box-shadow: 0 5px 20px rgba(0,0,0,0.08); height: 100%;">
                            <div style="width: 70px; height: 70px; margin: 0 auto 25px; background: #f093fb; border-radius: 15px; display: flex; align-items: center; justify-content: center;">
                                <svg width="35" height="35" fill="white" viewBox="0 0 24 24">
                                    <path d="M9.366 10.682a10.556 10.556 0 0 0 3.952 3.952l.884-1.238a1 1 0 0 1 1.294-.296 11.422 11.422 0 0 0 4.583 1.364 1 1 0 0 1 .921.997v4.462a1 1 0 0 1-.898.995c-.53.055-1.064.082-1.602.082C9.94 21 3 14.06 3 5.5c0-.538.027-1.072.082-1.602A1 1 0 0 1 4.077 3h4.462a1 1 0 0 1 .997.921A11.422 11.422 0 0 0 10.9 8.504a1 1 0 0 1-.296 1.294l-1.238.884zm-2.522-.657l1.9-1.357A13.41 13.41 0 0 1 7.647 5H5.01c-.006.166-.009.333-.009.5C5 12.956 11.044 19 18.5 19c.167 0 .334-.003.5-.01v-2.637a13.41 13.41 0 0 1-3.668-1.097l-1.357 1.9a12.442 12.442 0 0 1-1.588-.75l-.058-.033a12.556 12.556 0 0 1-4.702-4.702l-.033-.058a12.442 12.442 0 0 1-.75-1.588z"/>
                                </svg>
                            </div>
                            <h3 style="font-size: 20px; font-weight: 600; margin-bottom: 15px;">Phone Number</h3>
                            <p style="color: #6c757d; font-size: 15px; line-height: 1.6; margin: 0;"><a href="tel:<?php echo str_replace([' ', '(', ')', '-'], '', $support_phone ?? '+1 (800) 123-4567'); ?>" style="color: #667eea; text-decoration: none;"><?php echo $support_phone ?? '+1 (800) 123-4567'; ?></a><br>Available 24/7</p>
                        </div>
                    </div>
                    <!--End Single Contact Info-->

                    <!--Start Single Contact Info-->
                    <div class="col-xl-4 col-lg-4 col-md-12 mb-4">
                        <div class="text-center" style="padding: 40px 30px; background: white; border-radius: 15px; box-shadow: 0 5px 20px rgba(0,0,0,0.08); height: 100%;">
                            <div style="width: 70px; height: 70px; margin: 0 auto 25px; background: #4facfe; border-radius: 15px; display: flex; align-items: center; justify-content: center;">
                                <svg width="35" height="35" fill="white" viewBox="0 0 24 24">
                                    <path d="M3 3h18a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm9.06 8.683L5.648 6.238 4.353 7.762l7.72 6.555 7.581-6.56-1.308-1.513-6.285 5.439z"/>
                                </svg>
                            </div>
                            <h3 style="font-size: 20px; font-weight: 600; margin-bottom: 15px;">Email Address</h3>
                            <p style="color: #6c757d; font-size: 15px; line-height: 1.6; margin: 0;"><a href="mailto:<?php echo $support_email ?? 'info@meridianbank.com'; ?>" style="color: #667eea; text-decoration: none;"><?php echo $support_email ?? 'info@meridianbank.com'; ?></a><br>We respond within 24 hours</p>
                        </div>
                    </div>
                    <!--End Single Contact Info-->
                </div>
            </div>
        </section>
        <!--End Contact Info-->


        <!--Start Contact Page-->
        <section style="padding: 80px 0; background: #f8f9fa;">
            <div class="container">
                <div class="row">
                    <div class="col-xl-8 col-lg-7">
                        <div style="background: white; padding: 50px; border-radius: 15px; box-shadow: 0 5px 20px rgba(0,0,0,0.08);">
                            <div class="mb-4">
                                <p style="color: #667eea; font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px;">Get In Touch</p>
                                <h2 style="font-size: 32px; font-weight: 700; margin-bottom: 10px;">Send Us a Message</h2>
                            </div>
                            
                            <div id="contact-message" style="display: none; padding: 15px; border-radius: 10px; margin-bottom: 20px;"></div>
                            
                            <form id="contact-form" method="post" action="<?php echo site_url('website/send_contact'); ?>">
                                <div class="row">
                                    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 mb-3">
                                        <input type="text" name="name" placeholder="Your Name" required 
                                               style="width: 100%; padding: 15px 20px; border: 1px solid #e0e0e0; border-radius: 10px; font-size: 15px;">
                                    </div>
                                    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 mb-3">
                                        <input type="email" name="email" placeholder="Email Address" required 
                                               style="width: 100%; padding: 15px 20px; border: 1px solid #e0e0e0; border-radius: 10px; font-size: 15px;">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 mb-3">
                                        <input type="text" name="phone" placeholder="Phone Number" 
                                               style="width: 100%; padding: 15px 20px; border: 1px solid #e0e0e0; border-radius: 10px; font-size: 15px;">
                                    </div>
                                    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 mb-3">
                                        <select name="subject" required 
                                                style="width: 100%; padding: 15px 20px; border: 1px solid #e0e0e0; border-radius: 10px; font-size: 15px; background: white;">
                                            <option value="" disabled selected>Select Subject</option>
                                            <option>Account Inquiry</option>
                                            <option>Technical Support</option>
                                            <option>Card Services</option>
                                            <option>Transfer Issues</option>
                                            <option>Bill Payment</option>
                                            <option>General Feedback</option>
                                            <option>Other</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-xl-12 col-lg-12 mb-3">
                                        <textarea name="message" placeholder="Write Message" required rows="5"
                                                  style="width: 100%; padding: 15px 20px; border: 1px solid #e0e0e0; border-radius: 10px; font-size: 15px; resize: vertical;"></textarea>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-xl-12 col-lg-12">
                                        <button type="submit" id="submit-btn"
                                                style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 15px 40px; border: none; border-radius: 10px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s;">
                                            <span id="btn-text">Send Message</span>
                                            <span id="btn-loading" style="display: none;">
                                                <svg width="20" height="20" fill="white" viewBox="0 0 24 24" style="animation: spin 1s linear infinite; display: inline-block; vertical-align: middle;">
                                                    <path d="M12 2a10 10 0 1 0 10 10h-2a8 8 0 1 1-8-8V2z"/>
                                                </svg>
                                                Sending...
                                            </span>
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>

                    <div class="col-xl-4 col-lg-5">
                        <div style="background: white; padding: 40px 30px; border-radius: 15px; box-shadow: 0 5px 20px rgba(0,0,0,0.08); height: 100%;">
                            <h3 style="font-size: 22px; font-weight: 600; margin-bottom: 30px;">Banking Hours</h3>
                            <ul style="list-style: none; padding: 0; margin: 0 0 30px 0;">
                                <li style="padding: 20px 0; border-bottom: 1px solid #e0e0e0;">
                                    <h4 style="font-size: 16px; font-weight: 600; margin-bottom: 5px; color: #2d3748;">Online Banking</h4>
                                    <p style="color: #6c757d; font-size: 14px; margin: 0;">24 hours / 7 days a week</p>
                                </li>
                                <li style="padding: 20px 0; border-bottom: 1px solid #e0e0e0;">
                                    <h4 style="font-size: 16px; font-weight: 600; margin-bottom: 5px; color: #2d3748;">Customer Support</h4>
                                    <p style="color: #6c757d; font-size: 14px; margin: 0;">24 hours / 7 days a week</p>
                                </li>
                                <li style="padding: 20px 0;">
                                    <h4 style="font-size: 16px; font-weight: 600; margin-bottom: 5px; color: #2d3748;">Branch Hours</h4>
                                    <p style="color: #6c757d; font-size: 14px; margin: 0;">Mon - Fri: 9:00 AM - 5:00 PM<br>Sat: 9:00 AM - 1:00 PM</p>
                                </li>
                            </ul>
                            <div>
                                <h4 style="font-size: 16px; font-weight: 600; margin-bottom: 15px; color: #2d3748;">Follow Us</h4>
                                <ul style="list-style: none; padding: 0; margin: 0; display: flex; gap: 10px;">
                                    <li><a href="#" style="width: 40px; height: 40px; background: #667eea; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: white; text-decoration: none; transition: all 0.3s;"><i class="fab fa-facebook-f"></i></a></li>
                                    <li><a href="#" style="width: 40px; height: 40px; background: #667eea; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: white; text-decoration: none; transition: all 0.3s;"><i class="fab fa-twitter"></i></a></li>
                                    <li><a href="#" style="width: 40px; height: 40px; background: #667eea; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: white; text-decoration: none; transition: all 0.3s;"><i class="fab fa-instagram"></i></a></li>
                                    <li><a href="#" style="width: 40px; height: 40px; background: #667eea; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: white; text-decoration: none; transition: all 0.3s;"><i class="fab fa-linkedin-in"></i></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!--End Contact Page-->

        <style>
            @keyframes spin {
                0% { transform: rotate(0deg); }
                100% { transform: rotate(360deg); }
            }
            #submit-btn:hover {
                transform: translateY(-2px);
                box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
            }
        </style>

        <script>
        document.getElementById('contact-form').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const form = this;
            const submitBtn = document.getElementById('submit-btn');
            const btnText = document.getElementById('btn-text');
            const btnLoading = document.getElementById('btn-loading');
            const messageDiv = document.getElementById('contact-message');
            
            // Disable button and show loading
            submitBtn.disabled = true;
            btnText.style.display = 'none';
            btnLoading.style.display = 'inline-block';
            
            // Submit form via AJAX
            fetch(form.action, {
                method: 'POST',
                body: new FormData(form),
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(response => response.json())
            .then(data => {
                // Show message
                messageDiv.style.display = 'block';
                if (data.success) {
                    messageDiv.style.background = '#d4edda';
                    messageDiv.style.color = '#155724';
                    messageDiv.style.border = '1px solid #c3e6cb';
                    messageDiv.textContent = data.message;
                    form.reset();
                } else {
                    messageDiv.style.background = '#f8d7da';
                    messageDiv.style.color = '#721c24';
                    messageDiv.style.border = '1px solid #f5c6cb';
                    messageDiv.textContent = data.message;
                }
                
                // Reset button
                submitBtn.disabled = false;
                btnText.style.display = 'inline-block';
                btnLoading.style.display = 'none';
                
                // Hide message after 5 seconds
                setTimeout(() => {
                    messageDiv.style.display = 'none';
                }, 5000);
            })
            .catch(error => {
                messageDiv.style.display = 'block';
                messageDiv.style.background = '#f8d7da';
                messageDiv.style.color = '#721c24';
                messageDiv.style.border = '1px solid #f5c6cb';
                messageDiv.textContent = 'An error occurred. Please try again.';
                
                // Reset button
                submitBtn.disabled = false;
                btnText.style.display = 'inline-block';
                btnLoading.style.display = 'none';
            });
        });
        </script>


        <!--Start Google Map-->
        <section class="google-map">
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3024.2219901290355!2d-74.00369368400567!3d40.71312937933185!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25a165bedccab%3A0x2cb2ddf003b5ae01!2sWall%20Street%2C%20New%20York%2C%20NY%2C%20USA!5e0!3m2!1sen!2s!4v1634567890123!5m2!1sen!2s" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
        </section>
        <!--End Google Map-->

<?php $this->load->view('website/partials/footer'); ?>
