<body>
   <link rel="stylesheet" type="text/css" href="<?=base_url('assets/css/topbar.css');?>">

<?php
  $header_data = getWebSyncsData('Header Settings', 'headerSettings', '');



if ($this->session->userdata('logged_in') == 1 && $this->session->userdata('userType') == 'Devotee') { 
  $isLogin = true;
}else{
  $isLogin = false;
} 
?>



<section id="topbar">
  <div class="row">
    <div class="col-md-7 col-sm-6 mx-auto">
      <!-- <span style="color: #ffffff;">WEEKDAYS  9:00 AM – 1:00 PM 5:00 PM – 9:00 PM &amp; WEEKENDS  9:00 AM – 9:00 PM</span> -->
    </div>
    <div class="col-md-5 col-sm-6">
      <div style="float: right;display: inline-flex;">

        <?php if($isLogin == true){  ?>
          <a href="<?php echo base_url('services') ; ?>" class="btn btn-warning btn-sm mx-2" style="color: white;background-color: #780914;border-radius: 5px!important;">Request For Puja Service</a>
        <?php }else{ ?>
          <a href="javascript:void(0)" class="btn btn-warning btn-sm mx-2" style="color: white;background-color: #780914;border-radius: 5px!important;" onclick="checkLoginStatus('REQUEST-FORM')">Request For Puja Service</a>
        <?php } ?>


        <?php if($isLogin == true){  ?>

          <a href="<?=base_url('Admin/Dashboard')?>" class="btn btn-info btn-sm mx-2" style="color: white;background-color: #780914;border-radius: 5px!important;">Welcome!&nbsp;<?=$this->session->userdata('refDataName');?></a>


          <a href="javascript:void(0)" data-toggle="modal" data-target="#logoutModal" title="Click Here Logout"><i class="fa fa-sign-out text-white fa-2x"></i></a>

        <?php }else{ ?>
          
          <a href="javascript:void(0)" onclick="checkLoginStatus();" class="btn btn-info btn-sm" style="color: white;background-color: #780914;border-radius: 5px!important;">SIGN IN</a>
        <?php } ?>




        <style type="text/css">
          .modal-backdrop
          {
            opacity:0.5 !important;
          }
        </style>
         <div class="modal fade" id="logoutModal" tabindex="-1"  role="dialog" aria-labelledby="logoutModal" aria-hidden="true" data-keyboard="false" data-backdrop="static">
          <div class="modal-dialog modal-md">
            <div class="modal-content">
              <div class="modal-body">
                <p style="font-size: 18px;" class="px-5 text-center">Alert! Are you sure you want to sign off from your self-service devotee portal. <br /></p>
              </div>
              <div class="modal-footer" style="display: flex; justify-content: space-evenly; padding: 10px 85px;">
                <div class="actionsBtns">
                  <a href="<?=base_url('logout');?>" class="btn btn-danger mx-4">Logout</a>
                  <button class="btn btn-primary" data-dismiss="modal">Cancel</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- ======= Top Bar ======= -->

<section class="header-footer-bg py-0">


  <div class="container">  
    <div class="row" id="borderimg1s">
     <div class="col-md-2 left-logo" style="display: flex;">
       <a href="<?=base_url()?>" style="display: flex;justify-content: center;"><img id="logo-1" src="<?=ApiBaseUrl()['url'].@$header_data[0]['leftImage']?>" class="img-fluid mx-auto d-block"></a>
     </div>
     <div class="col-md-8 text-center pt-0" style="display: flex; flex-direction: row; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center;">

      <!-- ============================================================= -->
      <?php if(isset($header_data[0]['refDataName']) && $header_data[0]['refDataName'] != ''){ ?>
        <h2 class="project-name each-word" <?= (isset($header_data[0]['subHeading']) && $header_data[0]['subHeading'] != '') ? '' : ''; ?>><?= $header_data[0]['refDataName'] ?></h2>
      <?php } ?>

      <?php if(isset($header_data[0]['subHeading']) && $header_data[0]['subHeading'] != ''){ ?>
       <h3 class="tagline">
        <?= @$header_data[0]['subHeading'] ?>
      </h3>
    <?php } ?>
  <!-- ============================================================= -->

    <!-- ============================================================= -->
    <?php if(isset($header_data[0]['address']) && $header_data[0]['address'] != ''){ ?>
     <strong  style="font-size:15px"><a href="https://maps.google.com/?q=<?=$header_data[0]['address']?>" style="color: var( --blue)!important;" target="_blank" rel="nofollow"><?=$header_data[0]['address']?></a>
       </strong>
       <br>
  <?php  } ?>
  <!-- ============================================================= -->


  <strong  class="media-query">

    <!-- ============================================================= -->
    <?php if(isset($header_data[0]['phone']) && $header_data[0]['phone'] != ''){ ?>
      <i class="fa fa-phone"></i>  <a href='tel:<?= formatPhoneNumber($header_data[0]['phone'])?>' style="color: var( --blue)!important;">+1 <?= formatPhoneNumber($header_data[0]['phone'])?></a> 
  <?php } ?>
  <!-- ============================================================= -->



  <!-- ============================================================= -->
  <?php if(isset($header_data[0]['email']) && $header_data[0]['email'] != ''){ ?>
    <i class="fa fa-envelope"></i>  <a href="mailto:<?=$header_data[0]['email']?>" style="color: var( --blue)!important;"><?=$header_data[0]['email']?></a>
 <?php } ?>
 <!-- ============================================================= -->


 <!-- ============================================================= -->
<!-- <?php if(isset($header_data[0]['taxId']) && $header_data[0]['taxId'] != ''){ ?>
 TAX ID : <?=$header_data[0]['taxId']?>
<?php }else{ ?>
 TAX ID : 25-1584149
 <?php } ?> -->
 <!-- ============================================================= -->


</strong>


</div>

<div class="col-md-2" style="display: flex;justify-content: start;">
 <div class="media-query">
  <a href="<?=base_url()?>"><img id="logo-2" src="<?=ApiBaseUrl()['url'].@$header_data[0]['rightImage']?>" class="img-fluid" style="height:  140px;"></a>
</div>
</div>
</div>
</div>
<script type="text/javascript">
  $(document).ready(function() {
            $(".each-word").each(function() {
                var $this = $(this);
                var htmlContent = $this.html();
                var modifiedContent = htmlContent.replace(/(?:<[^>]*>)|(\b[a-z])([a-z]+)?\b/gim, function (match, p1, p2) {
                    if (p1) {
                        return "<span class='first-letter'>" + p1 + "</span>" + (p2 || "");
                    } else {
                        return match; // Preserve HTML tags
                    }
                });
                $this.html(modifiedContent);
            });
        });
</script>
</section>
