{{define "footer"}}
<footer>
    <div class="container">
        <div class="footer-wrap-pill">
            <div class="footer-grid">
                <div class="footer-col">
                    <div style="margin-bottom: 20px;">
                        <img src="images/Asset 7.png" alt="EHONG MODDAENG" style="height: 60px; width: auto;">
                    </div>
                    <p style="color: #ffffff; font-size: 14px;">
                        บริษัท อีฮงมดแดงมอเตอร์ จำกัด <br> 
                        จำหน่ายรถจักรยานยนต์ จำหน่ายรถจักรยานยนต์ไฟฟ้า <br> 
                        จำหน่ายเครื่องใช้ไฟฟ้า จำหน่ายเครื่องมือการเกษตร <br> 
                        ผู้นำด้านบริการเช่าซื้อครบวงจร <br>
                        ศูนย์บริการกว่า 200 สาขา ทั่วภาคอีสาน  
                    </p>
                    <div class="social-icons">
                        <a href="https://www.facebook.com/mdmotorofficial?locale=th_TH" target="_blank"><i class="ph-fill ph-facebook-logo"></i></a>
                        <a href="https://line.me/ti/p/@ehongmd" target="_blank"><i class="fa-brands fa-line"></i></a>
                        <a href="https://www.tiktok.com/@ehongmd" target="_blank"><i class="ph-fill ph-tiktok-logo"></i></a>
                        <a href="https://www.youtube.com/c/ehongmdtv" target="_blank"><i class="ph-fill ph-youtube-logo"></i></a>
                        <a href="https://www.instagram.com/ehongmoddaeng/" target="_blank"><i class="fa-brands fa-instagram"></i></a>
                    </div>
                </div>
                <div class="footer-col">
                    <h4>เมนูลัด</h4>
                    <ul><li><a href="/">หน้าแรก</a></li>
                        <li><a href="/product_motorcycle">รถจักรยานยนต์ทั้งหมด</a></li>
                        <li><a href="/product_ev">รถจักรยานยนต์ไฟฟ้าทั้งหมด</a></li>
                        <li><a href="/news">ข่าวประชาสัมพันธ์</a></li>
                        <li><a href="/product_review">สินค้าแนะนำ</a></li>
                        <li><a href="https://ehong.ezmember.org/" target="_blank">Lead Management</a></li>
                    </ul>

                </div>
                <div class="footer-col">
                    <h4>ติดต่อเรา</h4>
                    <ul>
                        <li><i class="ph-fill ph-map-pin"></i> 172 ถนนผดุงวิถี ตำบลตลาด อำเภอเมืองมหาสารคาม จังหวัดมหาสารคาม 44000</li>
                        <li><i class="ph-fill ph-phone"></i> 086-455-6789</li>
                    </ul>
                </div>
                <div class="footer-col">
                    <h4>แผนที่</h4>
                    <!-- <div style="width: 100%; height: 100px; background: #333; display: flex; align-items: center; justify-content: center; border-radius: 0 !important; color: #666;">
                        <i class="ph-fill ph-map-trifold" style="font-size: 24px;"></i> Google Map
                    </div> -->
                    <div style="width: 100%; height: 250px; background: #333; border-radius: 0 !important; overflow: hidden; position: relative;">
                    <iframe 
                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3831.7944338373445!2d103.29606811433806!3d16.179547840770866!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3122a68d56429481%3A0xa7a3e8bc09307c84!2z4Lia4Lij4Li04Lip4Lix4LiXIOC4reC4teC4ruC4h-C4oeC4lOC5geC4lOC4hyDguKrguJnguIfguI0!5e0!3m2!1sth!2sth!4v1551927966868" 
                        width="100%" 
                        height="100%" 
                        style="border:0;" 
                        allowfullscreen="" 
                        loading="lazy">
                    </iframe>
                    </div>
                </div>
            </div>
            <div style="border-top: 1px solid #ffffff; margin-top: 40px; padding-top: 20px; text-align: center; color: #ffffff; font-size: 13px;">
                &copy; 2026 Ehong Moddaeng Motor Co., Ltd. All Rights Reserved.
            </div>
        </div>
    </div>
        
    </div>
</footer>
<!-- Floating Speed Dial Menu -->
<div class="floating-speed-dial" id="speedDial">
    <div class="speed-dial-menu" id="speedDialMenu">
        <a href="/payment_channel" class="sidebar-item" title="จ่ายค่างวด">
            <i class="ph ph-credit-card"></i>
            <span>จ่ายค่างวด</span>
        </a>
        <a href="/" class="sidebar-item" title="คำนวณค่างวด">
            <i class="ph ph-calculator"></i>
            <span>คำนวณค่างวด</span>
        </a>
    </div>
    <button class="speed-dial-main-btn" onclick="toggleSpeedDial()" id="speedDialMainBtn">
        <i class="ph ph-plus"></i>
    </button>
</div>

<script>
function toggleSpeedDial() {
    const dial = document.getElementById('speedDial');
    dial.classList.toggle('active');
    
    const icon = document.querySelector('#speedDialMainBtn i');
    if (dial.classList.contains('active')) {
        icon.className = 'ph ph-x';
    } else {
        icon.className = 'ph ph-plus';
    }
}
</script>

{{end}}