<?php
include "header_process.php";
?>
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

<title><?= htmlspecialchars($bank_name) ?> - Currency</title>

<!-- Fav Icon -->
<?php if (!empty($favicon)): ?>
      <link rel="icon" href="<?= htmlspecialchars($favicon); ?>" type="image/<?= pathinfo($favicon, PATHINFO_EXTENSION); ?>">
    <?php endif; ?>

    <!-- fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com/">

    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>

    <link href="https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&amp;display=swap"
        rel="stylesheet">

    <link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&amp;display=swap"
        rel="stylesheet">

<!-- Stylesheets -->
<link href="images/font-awesome-all.css" rel="stylesheet">
<link href="images/flaticon.css" rel="stylesheet">
<link href="images/owl.css" rel="stylesheet">
<link href="images/bootstrap.css" rel="stylesheet">
<link href="images/jquery.fancybox.min.css" rel="stylesheet">
<link href="images/animate.css" rel="stylesheet">
<link href="images/nice-select.css" rel="stylesheet">
<link href="images/elpath.css" rel="stylesheet">
<link href="images/theme-color.css" id="jssDefault" rel="stylesheet">
<link href="images/switcher-style.css" rel="stylesheet">
<link href="images/rtl.css" rel="stylesheet">
<link href="images/style.css" rel="stylesheet">
<link href="images/page-title.css" rel="stylesheet">
<link href="images/exchange.css" rel="stylesheet">
<link href="images/subscribe.css" rel="stylesheet">
<link href="images/responsive.css" rel="stylesheet">

</head>


<!-- page wrapper -->
<body>

    <div class="boxed_wrapper ltr">

    <?php include "header.php" ?>


        <!-- page-title -->
        <section class="page-title centred">
            <div class="bg-layer" style="background-image: url(images/fx.jpg);"></div>
            
            <div class="auto-container">
                <div class="content-box">
                    <h1>Currency Exchange</h1>
                    <ul class="bread-crumb clearfix">
                        <li><a href="index.html">Home</a></li>
                        <li>Currency Exchange</li>
                    </ul>
                </div>
            </div>
        </section>
        <!-- page-title end -->


        <!-- exchange-section -->
        <section class="exchange-section pt_120 pb_90 centred">
            <div class="auto-container">
                <div class="sec-title mb_70">
                    <h6>Exchange Currency</h6>
                    <h2>Foreign Exchange Rate</h2>
                </div>
				
				<div class="tab active-tab" id="tab-1">
        <div class="row clearfix" id="exchange-rates">
            <!-- Exchange blocks will be dynamically inserted here -->
        </div>
    </div>
                
            </div>
        </section>
        <!-- exchange-section end -->


        


        <!-- main-footer -->
       <?php include "footer.php" ?>
        <!-- main-footer end -->



        <!--Scroll to top-->
        <div class="scroll-to-top">
            <div>
                <div class="scroll-top-inner">
                    <div class="scroll-bar">
                        <div class="bar-inner"></div>
                    </div>
                    <div class="scroll-bar-text">Go To Top</div>
                </div>
            </div>
        </div>
        <!-- Scroll to top end -->
        
    </div>


    <!-- jequery plugins -->
    <script src="images/jquery.js"></script>
    <script src="images/bootstrap.min.js"></script>
    <script src="images/owl.js"></script>
    <script src="images/wow.js"></script>
    <script src="images/validation.js"></script>
    <script src="images/jquery.fancybox.js"></script>
    <script src="images/appear.js"></script>
    <script src="images/isotope.js"></script>
    <script src="images/parallax-scroll.js"></script>
    <script src="images/jquery.nice-select.min.js"></script>
    <script src="images/jquery.style.switcher.min.js"></script>

    <!-- main-js -->
    <script src="images/script.js"></script>
	
	 <script>
        // Base URL for public exchange rate API
        const BASE_URL = 'https://api.exchangerate-api.com/v4/latest/USD';

        // List of currencies to display
        const currencies = ['GBP', 'INR', 'CAD', 'JPY', 'AUD', 'EUR', 'KRW', 'PKR', 'SGD', 'CNY', 'BDT'];

        function fetchExchangeRates() {
            fetch(BASE_URL)
                .then(response => response.json())
                .then(data => {
                    const rates = data.rates;
                    displayExchangeRates(rates);
                })
                .catch(error => console.error('Error fetching exchange rates:', error));
        }

        function displayExchangeRates(rates) {
            const exchangeContainer = document.getElementById('exchange-rates');
            exchangeContainer.innerHTML = ''; // Clear existing content

            currencies.forEach(currency => {
                const rate = rates[currency];
                if (rate) {
                    // Adjust these values as needed
                    const sendAmount = (Math.random() * 100).toFixed(2);
                    const receiveAmount = (sendAmount * rate).toFixed(2);
                    
                    const exchangeBlock = `
                        <div class="col-lg-3 col-md-4 col-sm-12 exchange-block">
                            <div class="exchange-block-one">
                                <div class="inner-box">
                                    <h5>${currency}<i class="icon-38"></i></h5>
                                    <figure class="flag"><img src="images/flag-${currency}.png" alt="${currency} flag"></figure>
                                    <ul class="lower-box clearfix">
                                        <li><span>Send</span><span>${sendAmount} USD</span></li>
                                        <li><span>Receive</span><span>${receiveAmount} ${currency}</span></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    `;

                    exchangeContainer.insertAdjacentHTML('beforeend', exchangeBlock);
                }
            });
        }

        // Fetch exchange rates on page load
        fetchExchangeRates();
    </script>
	

</body><!-- End of .page_wrapper -->


</html>
