  <?php

      if (session('logged_in') == 1 && session('userType') == 'Devotee') {
          $isLogin = true;
      } else {
          $isLogin = false;
      }
  ?>
  <style type="text/css">
      #topbar {
          background-color: #fff8e1 !important;

          padding: 9px 0;
      }

      #topbar .contact-info i a,
      #topbar .contact-info i span {
          color: white;
      }


      #logo-2 {
          float: right;
          height: 200px;
          margin: 8px 0px 8px 0px;
      }

      .head-line {
          color: #fff;
          font-weight: 500;
      }

      .head-line2 {
          color: #fff;
          font-size: 1.125em !important;
          font-weight: 600;
          font-style: normal;
          font-family: "Open Sans", sans-serif !important;
      }

      .row {
          margin-right: 0px !important;
          margin-left: 0px !important;
      }

      .image-grid {
          max-width: 100%;
          width: 85px;
          height: auto;
          padding: 0px;
          margin: 5px;
          border: 2px solid #F2BF11;
          border-radius: 9px;
      }

      a:hover {
          color: #2b2320;
          text-decoration: none;
      }

      .project-name {
          margin-bottom: 0px !important;
          font-family: "Open Sans", sans-serif !important;
          text-shadow: none !important;
          color: var(--blue) !important;
          font-weight: 1000 !;
          font-style: normal;
          font-size: 35px;
      }

      .sub-heading {
          font-size: 22px;
          font-weight: bold;
          color: #100837;
      }

      .tagline {
          margin-bottom: 0px !important;
          font-family: "Open Sans", sans-serif !important;
          text-shadow: none !important;
          color: var(--blue) !important;
          font-weight: bold !important;
          font-style: normal;
          font-size: 28px;
      }

      .first-letter {
          /*    color: red!important;*/
          font-size: 47px !important;
      }

      #section1 {
          /* background-image: url(<?php echo e(asset('assets/img/header/2.png')); ?>);
          background-size: cover;
          background-repeat: no-repeat; */
      }

      #first_section {
          background-color: #097633;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-wrap: wrap;
          flex-direction: row;
          align-content: stretch;
      }

      #logo {
          height: auto;
          width: 160px;
      }

      #heading {
          font-family: math;
          font-weight: bolder;
          color: #fff6cc;
          font-size: 36px;
      }

      #sub_heading {
          position: absolute;
          margin-left: -390px !important;
          margin-top: 20px;
          font-weight: 800 !important;
      }

      #tamil {
          color: #ededb8;
          position: absolute;
          margin-left: 180px !important;
          margin-top: -75px;
          font-weight: 900;
      }

      #second_section {
          background-image: url(<?php echo e(asset('assets/img/header/4.png')); ?>);
          background-size: cover;
          background-repeat: no-repeat;
      }


      #third_section {
          background-color: #d1994c;
          display: flex;
          align-items: center;
          justify-content: space-around;
      }

      .time_address {
          color: white;
          font-weight: 600;
      }

      /* header media query */
      @media(max-width:1350px) {
          #section1 {
              display: flex !important;
              flex-direction: row;
              align-content: space-around;
              flex-wrap: nowrap;
              justify-content: space-evenly;
              align-items: stretch;
              height: 130px;
          }

          #third_section {
              /* display: none; */
          }

          .time_address {
              font-size: 12px !important;
          }

          #second_section {
              background-image: url(<?php echo e(asset('assets/img/header/4.png')); ?>);
              background-size: cover;
              background-repeat: no-repeat;
          }

          .first-letter {
              font-size: 40px !important;
          }

          #heading {
              font-size: 28px !important;
              margin-top: 22px !important;
              margin-left: 20px !important;
          }

          #sub_heading {
              /* display: none; */
              margin-top: 22px;
              font-size: 13px;
              margin-left: -284px !important;
          }

          #logo {
              height: auto !important;
              width: 100px !important;
          }

          #tamil {
              color: #ededb8;
              position: absolute;
              margin-left: 101px !important;
              margin-top: -30px;
              font-weight: 300;
          }
      }



      @media (max-width: 1200px) {
          #section1 {

              display: flex !important;
              flex-direction: row;
              align-content: space-around;
              flex-wrap: nowrap;
              justify-content: space-evenly;
              align-items: stretch;
              height: 80px;
          }

          #third_section {
              /* display: none; */
          }

          .time_address {
              font-size: 8px !important;
          }

          #second_section {
              background-image: url(<?php echo e(asset('assets/img/header/4.png')); ?>);
              background-size: cover;
              background-repeat: no-repeat;
          }

          .first-letter {
              font-size: 15px !important;
          }

          #heading {
              font-size: 14px !important;
              margin-top: 22px !important;
              margin-left: 20px !important;
          }

          #sub_heading {
              /* display: none; */
              margin-top: 16px;
              font-size: 10px;
              margin-left: -170px !important;
          }

          #logo {
              height: auto !important;
              width: 69px !important;
          }

          #tamil {
              color: #ededb8;
              position: absolute;
              margin-left: 101px !important;
              margin-top: -12px;
              /* font-weight: 100; */
              font-size: 9px !important;
          }
      }

      @media (max-width: 992px) {
          #section1 {

              display: flex !important;
              flex-direction: row;
              align-content: space-around;
              flex-wrap: nowrap;
              justify-content: space-evenly;
              align-items: stretch;
              height: 80px;
          }

          #third_section {
              /* display: none; */
          }

          .time_address {
              font-size: 8px !important;
          }

          #second_section {
              background-image: url(<?php echo e(asset('assets/img/header/4.png')); ?>);
              background-size: cover;
              background-repeat: no-repeat;
          }

          .first-letter {
              font-size: 15px !important;
          }

          #heading {
              font-size: 14px !important;
              margin-top: 22px !important;
              margin-left: 20px !important;
          }

          #sub_heading {
              /* display: none; */
              margin-top: 16px;
              font-size: 10px;
              margin-left: -165px !important;
          }

          #logo {
              height: auto !important;
              width: 69px !important;
          }

          #tamil {
              color: #ededb8;
              position: absolute;
              margin-left: 101px !important;
              margin-top: -9px;
              /* font-weight: 100; */
              font-size: 9px !important;
          }
      }

      @media (max-width: 768px) {
          #section1 {
              background-image: url(<?php echo e(asset('assets/img/header/1.png')); ?>);
              background-size: cover;
              background-repeat: no-repeat;
              display: flex !important;
              flex-direction: row;
              align-content: space-around;
              flex-wrap: nowrap;
              justify-content: space-evenly;
              align-items: stretch;
              height: 80px;
          }

          #third_section {
              /* display: none; */
          }

          .time_address {
              font-size: 8px !important;
          }

          #second_section {
              display: none !important;
          }

          .first-letter {
              font-size: 15px !important;
          }

          #heading {
              font-size: 14px !important;
              margin-top: 22px !important;
              margin-left: 20px !important;
          }

          #sub_heading {
              /* display: none; */
              margin-top: 16px;
              font-size: 8px;
              margin-left: -158px !important;
          }

          #logo {
              height: auto !important;
              width: 69px !important;
          }

          #tamil {
              color: #ededb8;
              position: absolute;
              margin-left: 101px !important;
              margin-top: -11px;
              font-weight: 600 !important;
          }
      }


      @media (max-width: 575px) {
          #section1 {
              background-size: unset;
              background-repeat: no-repeat;
              display: flex !important;
              flex-direction: row;
              align-content: space-around;
              flex-wrap: nowrap;
              justify-content: space-evenly;
              align-items: stretch;
          }

          #third_section {
              display: none;
          }

          #second_section {
              display: none !important;
          }

          .first-letter {
              font-size: 15px !important;
          }

          #heading {
              font-size: 10px !important;
              margin-top: 4px !important;
              margin-left: 20px !important;
          }

          #sub_heading {
              /* display: none; */
              margin-top: 12px;
              margin-left: -124px !important;
              font-size: 7px;
          }

          #logo {
              height: auto !important;
              width: 46px !important;
              margin-top: 10px !important;
          }

          #tamil {
              color: #ededb8;
              position: absolute;
              margin-left: 68px !important;
              margin-top: -25px;
              /* font-weight: 100 !important; */
              font-size: 7px !important;
          }
      }

      @media (max-width: 375px) {
          #section1 {

              display: flex !important;
              flex-direction: row;
              align-content: space-around;
              flex-wrap: nowrap;
              justify-content: space-evenly;
              align-items: stretch;
          }

          #third_section {
              display: none;

          }

          #second_section {
              display: none !important;
          }

          .first-letter {
              font-size: 15px !important;
          }

          #heading {
              font-size: 10px !important;
              margin-top: 21px !important;
              margin-left: 20px !important;
          }

          #sub_heading {
              margin-top: 17px;
          }

          #logo {
              height: auto !important;
              width: 46px !important;
          }

          #tamil {
              color: #ededb8;
              position: absolute;
              margin-left: 71px !important;
              margin-top: -7px;
              font-weight: 400;
          }
      }
  </style>
  <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): ?>
                      
                  <?php else: ?>
                      
                  <?php endif; ?>


                  <?php if($isLogin): ?>
                      <a href="<?php echo e(route('admin.dashboard')); ?>" class="btn btn-info btn-sm mx-2"
                          style="color: white;background-color: #780914;border-radius: 5px!important;">Welcome!
                          <?php echo e(session('refDataName')); ?></a>
                      <a href="#" data-bs-toggle="modal" data-bs-target="#logoutModal"><i
                              class="fa fa-sign-out text-white fa-2x"></i></a>
                  <?php else: ?>
                      <a href="javascript:void(0)" data-bs-toggle="modal" data-bs-target="#loginModal"
                          data-bs-whatever="@mdo" class="btn btn-info btn-sm"
                          style="color: white;background-color: #780914;border-radius: 5px!important;">SIGN IN</a>
                  <?php endif; ?>



                  <style type="text/css">
                      .modal-backdrop {
                          opacity: 0.5 !important;
                      }
                  </style>
                  <!-- Modal -->
                  <div class="modal fade" id="logoutModal" data-bs-backdrop="static" data-bs-keyboard="false"
                      tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                      <div class="modal-dialog">
                          <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="<?php echo e(route('admin.logout')); ?>" class="btn btn-danger mx-4">Logout</a>
                                      <button class="btn btn-primary" data-bs-dismiss="modal">Cancel</button>
                                  </div>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </section>
  
  
  <section>
      <div class="d-flex" id="section1" style=" ">
          
          <div class="col-md-6" id="first_section" style="">
              <img src="<?php echo e(ApiBaseUrl()['url'] . $header_data[0]['leftImage']); ?>" style=" " id="logo" />

              <h2 class="head-line m-0 p-0  each-word" id="heading" style="">
                  
                  <?php echo e(strtoupper($header_data[0]['refDataName'])); ?>


              </h2>
              <span style="color:#ededb8; font-size:20px!important;"><a id="sub_heading" style="">A
                      Heritage
                      For World Tamils</a>
              </span>
              <span id="tamil" style=" ">
                  கேரோலினா
                  முருகன் கோவில்</span>
              
              <p class="text-white m-0 p-0 d-none " style="font-size:15px">
                  <!-- ============================================================= -->
                  <?php if(isset($header_data[0]['address']) && $header_data[0]['address'] != ''): ?>
                      <br>
                  <?php endif; ?>
                  <!-- ============================================================= -->
                  
              </p>

          </div>
          <div class="col-md-1 d-flex " style="" id="second_section">
              <div class="footer-divider d-none"
                  style="border-style: solid;border-width: 2px 2px 2px 2px;border-color: #b78433;box-shadow: 0px 0px 10px 0px rgb(216 16 16 / 21%);transform: rotate(110deg);margin: 79px 41px;width: 165px;">

              </div>
          </div>
          <div class="col-md-5 text-start " id="third_section"
              style="
              /* background: linear-gradient(135deg, #d1994c 0%, #016d21 13%, #006c20 13%, #198754 61%, #d1994c 100%); */">
              <div>
                  
                  <span style="" class="time_address">
                      📱<a href='tel:<?php echo e(formatPhoneNumber($header_data[0]['phone'])); ?>'
                          style="color: var( --blue)!important;"> +1
                          <?php echo e(formatPhoneNumber($header_data[0]['phone'])); ?></a>
                  </span>

                  <span style="" class="time_address">
                      📩<a href="mailto:<?php echo e($header_data[0]['email']); ?>" style="color: var( --blue)!important;">
                          <?php echo e($header_data[0]['email']); ?>

                      </a>
                  </span>
              </div>
              
              

              

          </div>
      </div>
  </section>
  
<?php /**PATH D:\project\vaap\carolinamurugantemple\resources\views/includes/topbar.blade.php ENDPATH**/ ?>