<style>
/* Body */
@import url("//fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap");
body.dark-mode {
    font-family:'Inter', sans-serif;
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
            
            
            
        }
.container .curr_conv{
     width: 100%;
     border-style:none;
   
    
    border-radius: 12px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
        }
/* Import Google Fonts */
@import url("//fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap");

/* Span Tag */
.curr_conv p > span{
 font-family:'Inter', sans-serif;
 font-style:normal !important;
 font-size:20px !important;
}

/* Italic Tag */
.curr_conv p i{
 font-family:'Inter', sans-serif;
}
.button-1{
    height:unset !important;
}
.form__submit{
    height:unset !important;
    width:unset !important;
}
/* Update rates */
#update-rates{
 font-family:'Inter', sans-serif;
 background: linear-gradient(145deg, #007bff, #0056b3); /* Light gradient */
    color: #ffffff;
    padding: 14px 28px;
    font-size: 14px;
    font-weight: 500;
    border: none;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: background 0.3s ease, transform 0.2s ease;
}
#update-rates:hover {
  background: linear-gradient(145deg, #0056b3, #003c82);
    transform: translateY(-2px);
}
/* Add currency */
#add-currency{
 font-family:'Inter', sans-serif;
 background: linear-gradient(145deg, #007bff, #0056b3); /* Light gradient */
    color: #ffffff;
    padding: 14px 28px;
    font-size: 14px;
    font-weight: 500;
    border: none;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: background 0.3s ease, transform 0.2s ease;
}
#add-currency:hover {
    background: linear-gradient(145deg, #0056b3, #003c82);
    transform: translateY(-2px);
}
.toggle__input:checked + .toggle-track .toggle-indicator{
    background: linear-gradient(145deg, #007bff, #0056b3) !important; /* Light gradient */
    
}
.toggle .toggle-track .toggle-indicator{
    background: linear-gradient(145deg, #007bff, #0056b3) !important; /* Light gradient */
}
/* Heading */
.currencies center h4{
 font-family:'Inter', sans-serif;
 color:#333 !important;
}
/* Import Google Fonts */
@import url("//fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap");

/* Label */
.grid .form__group label{
 font-family:'Inter', sans-serif;
}

/* Cur rate */
#cur_rate{
 font-family:'Inter', sans-serif;
}

/* Button */
.grid .form__group .delete-currency{
 font-family:'Inter', sans-serif;
}

/* Button */
.grid .form__group .btn-sm{
 font-family:'Inter', sans-serif;
}
/* Currencies */
.container .curr_conv .currencies{
 border-style:none !important;
}
/* Span Tag */
p:nth-child(3) > span:nth-child(1){
 display:none;
}

/* Toggle track */
.container p:nth-child(3) .toggle-track{
 display:none;
}
/* Import Google Fonts */
@import url("//fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap");

/* Italic Tag */
.curr_conv small i{
 font-family:'Inter', sans-serif;
 font-size:14px;
}
/* Heading */
.curr_conv center h4{
 font-size:20px;
 line-height:1.5em;
}

/* Import Google Fonts */
@import url("//fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap");

/* Cur rate */
#cur_rate{
  display: flex;
    align-items: center;
    background-color: #e9ecef; /* Light input background */
    border-radius: 8px;
    padding: 12px;
    color: #333; /* Dark text color */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    min-height: 50px;
}

/* Inv rate */
#inv_rate{
  display: flex;
    align-items: center;
    background-color: #e9ecef; /* Light input background */
    border-radius: 8px;
    padding: 12px;
    color: #333; /* Dark text color */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    min-height: 50px;
}
/* Symbol */
#symbol{
  display: flex;
    align-items: center;
    background-color: #e9ecef; /* Light input background */
    border-radius: 8px;
    padding: 12px;
    color: #333; /* Dark text color */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    min-height: 50px;
}

/* Pos */
#sym_pos{
text-transform:capitalize;
 display: flex;
    align-items: center;
    background-color: #e9ecef; /* Light input background */
    border-radius: 8px;
    padding: 12px;
    color: #333; /* Dark text color */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    min-height: 50px;
}

/* Enable */
#enable{
 text-transform:capitalize;
 display: flex;
    align-items: center;
    background-color: #e9ecef; /* Light input background */
    border-radius: 8px;
    padding: 12px;
    color: #333; /* Dark text color */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    min-height: 50px;
}

/* Form  group */
.curr_conv form .form__group{
 font-family:'Inter', sans-serif;
}

/* Toggle indicator */
.toggle .toggle-track .toggle-indicator{
 background-color:#3c3c3c !important;
}

/* Button */
.curr_conv form .delete-currency{
 background: linear-gradient(145deg, #c71f1f, #e04d4d); /* Gradient background for a professional look */
  color: #ffffff; /* Text color */
  padding: 14px 28px; /* Padding for consistency with primary button */
  font-size: 14px; /* Font size */
  font-weight: 500; /* Font weight */
  border: none; /* Remove default border */
  border-radius: 5px; /* Slightly rounded corners */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Subtle shadow for depth */
  transition: background 0.3s ease, transform 0.2s ease; /* Smooth transition for hover effects */
}
.curr_conv form .delete-currency:hover {
  background: linear-gradient(145deg, #e04d4d, #f76c6c); /* Darker gradient on hover */
  transform: translateY(-2px); /* Slight lift effect */
}
/* Button */
.curr_conv form .btn-sm{
 background: linear-gradient(145deg, #007bff, #0056b3); /* Light gradient */
    color: #ffffff;
    padding: 14px 28px;
    font-size: 14px;
    font-weight: 500;
    border: none;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: background 0.3s ease, transform 0.2s ease;
}
.curr_conv form .btn-sm:hover {
    background: linear-gradient(145deg, #0056b3, #003c82);
    transform: translateY(-2px);
}

/* Cur rate */
#cur_rate{
 border-style:none;
}

/* Inv rate */
#inv_rate{
 border-style:none;
}

/* Symbol */
#symbol{
 border-style:none;
}

/* Pos */
#sym_pos{
 border-style:none;
}

/* Enable */
#enable{
 border-style:none;
}
/* Modal content */
#modalDiv .modal-lg .modal-content{
 min-height:250px;
 transform:translatex(0px) translatey(0px);
}

/* Button */
.mt-2 .form-group .btn-success{
 background: linear-gradient(145deg, #007bff, #0056b3); /* Light gradient */
    color: #ffffff;
    padding: 14px 28px;
    font-size: 14px;
    font-weight: 500;
    border: none;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: background 0.3s ease, transform 0.2s ease;
}
.mt-2 .form-group .btn-success:hover {
  background: linear-gradient(145deg, #0056b3, #003c82);
    transform: translateY(-2px);
}
/* Select */
.mt-2 .form-group select{
 text-transform:capitalize;
 display: flex;
    align-items: center;
    
    border-radius: 8px;
    padding: 12px;
  
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
    min-height:50px;
}








</style>
<div class="col-md-8">
<?php if(empty($settings["site_base_currency"])){ ?>
<div style="border:1px solid black;border-radius:10px;" class="col-md-8">
<h3 class="set-currency">Choose Base Currency</h3>
<div class="form-group">
<select id="choose_currency" class="select">
<?php echo base64_decode(file_get_contents($_SERVER["DOCUMENT_ROOT"]."/currencies.txt"));?>
</select>
<div class="warning-msg">
  <i class="fa fa-warning"></i>
 You can only change your base currency first time you install panel. It cannot be changed later.
</div>
<a class="btn btn-success" id="site_currency_btn" href="#" data-toggle="modal" data-target="#confirmChange" data-href="<?php echo site_url("admin/settings/currency-manager/INR");?>">Set Currency to Indian Rupee (INR)</a>
</div>
<?php  } else {

$t = $conn->prepare("SELECT * FROM currencies");
$t->execute();
$t = $t->fetchAll(PDO::FETCH_ASSOC);

$content .= "";
for($i = 0;$i < count($t);$i++){
$cur_id = $t[$i]["id"];
$cur_name = $t[$i]["currency_name"];
$cur_code = $t[$i]["currency_code"];
$cur_symbol = $t[$i]["currency_symbol"];
$sym_pos = $t[$i]["symbol_position"];
$is_enable = $t[$i]["is_enable"];
$cur_rate = $t[$i]["currency_rate"];
$cur_inv_rate = $t[$i]["currency_inverse_rate"];

if($i !== 0){
$content .= '<div style="border:1px solid lightgrey;border-radius:5px;padding:15px;margin-bottom:10px;" class="currencies">
<center><h4 style="color:#A555EC;" class="sansita">'.$cur_name.'</h4></center>

<form>
<div class="grid">
<div class="form__group grid__col">
<label class="form__group-title" for="cur_rate">Rate</label>
<div class="form__controls">
<input type="hidden" name="id" value="'.$cur_id.'">
<input id="cur_rate" name="cur_rate" class="form__input form-control input-sm" type="text" value="'.$cur_rate.'">
</div>
</div>

<div class="form__group grid__col">
<label class="form__group-title" for="inv_rate">Inverse Rate</label>
<div class="form__controls">
<input id="inv_rate" name="inv_rate" class="form__input form-control input-sm" type="text" value="'.$cur_inv_rate.'">
</div>
</div>


<div class="form__group grid__col">
<label class="form__group-title" for="symbol">Symbol</label>
<div class="form__controls">
<input id="symbol" name="symbol" class="form__input form-control input-sm" type="text" value="'.$cur_symbol.'">
</div>
</div>

<div class="form__group grid__col">
<label class="form__group-title" for="sym_pos">Symbol Position</label>
<div class="form__controls">
<select id="sym_pos" name="sym_pos"  class="form-control"><option value="left" ';
if($sym_pos == "left"){
    $content .= 'selected'; 
}
$content .= '>Before Currency Value</option><option value="right" ';
if($sym_pos == "right"){
    $content .= 'selected'; 
}
 $content .= '>After Currency Value</option></select>
</div></div>
<div class="form__group grid__col">
<label class="form__group-title" for="enable">Status</label>
<div class="form__controls">
<select id="enable" name="enable"  class="form-control"><option value="1" ';
if($is_enable == "1"){
    $content .= 'selected';
}
$content .= '>Active</option><option value="0" ';
if($is_enable == "0"){
    $content .= 'selected';
}

$content .= '>Inactive</option></select></div></div>
<div class="form__group grid__col">
<label class="form__group-title">Delete</label>
<div class="form__controls">
<button style="width:100%;background-color:#D90429;color:#fff;" type="button" data-currency-id="'.$cur_id.'" class="btn delete-currency">Delete</button>
</div>
<br>
</div>
<div class="form__group">
<input class="form__submit btn btn-sm currency-values-save-changes" name="save_changes"  type="submit" value="Save Changes"></div></div>
</form>
<br>
<hr>

</div>';
}
}
?>



<div class="curr_conv col-md-8">
<br>
<p><span style="font-size:19px;font-weight:bold;font-style:italic;">Currency Converter</span>
<label class="toggle" for="activate_deactivate_curr_conv">
<input type="checkbox" class="toggle__input" id="activate_deactivate_curr_conv" <?php if($settings["site_currency_converter"] == "1"){
echo "checked";
}?>/>
<span class="toggle-track">
<span class="toggle-indicator">
<span class="checkMark">
<svg viewBox="0 0 24 24" id="ghq-svg-check" role="presentation" aria-hidden="true">
<path d="M9.86 18a1 1 0 01-.73-.32l-4.86-5.17a1.001 1.001 0 011.46-1.37l4.12 4.39 8.41-9.2a1 1 0 111.48 1.34l-9.14 10a1 1 0 01-.73.33h-.01z"></path>
</svg></span></span></span></label></p>
<br>
<small><?php
echo "<i>( Last Updated : ".str_replace(["am","pm"],["AM","PM"],date("j F Y, g:i a",strtotime($settings["last_updated_currency_rates"]))) ." )</i>";
 ?></small>
<br>
<br>
<button class="button-1 update-rates" id="update-rates" role="button">Update Rates</button>
<?php 

$currency_codes = $conn->prepare("SELECT currency_code FROM currencies WHERE currency_code!=:code AND is_enable=1");
$currency_codes->execute(["code"=>$settings["site_base_currency"]]);
$currency_codes = $currency_codes->fetchAll(PDO::FETCH_ASSOC);

$count = count($currency_codes);

if($count <= 15){
  
echo '<button class="button-1 add-currency" id="add-currency" id="update-rates" role="button" data-toggle="modal" data-target="#modalDiv" data-action="site-add-currency">Add Currency</button>';
} elseif($count > 15) {
echo '<div style="background-color:rgba(217, 4, 41,0.2);padding:7px;border-radius:4px;margin-top:10px;"><p style="color:#D90429;">
You can add maximum 15 currencies in the currency converter. Delete / Deactivate some from below to add more.</p></div>';
}

?>
<br>
<hr>



<?php echo $content;?>



</div>

<?php } ?>
</div>
</div>
<br/><br/><br/>
<div class="modal modal-center fade" id="confirmChange" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static">
   <div class="modal-dialog modal-dialog-center" role="document">
      <div class="modal-content">
         <div class="modal-body text-center">
            <h4>Are you sure you want to set this currency?</h4>
            <div align="center">
               <a class="btn btn-primary" href="" id="confirmYes">Yes</a>
               <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
            </div>
         </div>
      </div>>
   </div>
</div>