@php

      if (session('logged_in') == 1 && session('userType') == 'Devotee') {
          $isLogin = true;
      } else {
          $isLogin = false;
      }
  @endphp
  <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({{ 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({{ 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({{ 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({{ 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({{ 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({{ 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;">

                  {{-- <a href="{{ 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> --}}

                  @if ($isLogin == true)
                      {{-- <a href="{{ url('services/serviceRequest') }}" class="btn btn-warning btn-sm mx-2"
                          style="color: white;background-color: #780914;border-radius: 5px!important;">Request For
                          Puja
                          Service</a> --}}
                  @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> --}}
                  @endif


                  @if ($isLogin)
                      <a href="{{ route('admin.dashboard') }}" class="btn btn-info btn-sm mx-2"
                          style="color: white;background-color: #780914;border-radius: 5px!important;">Welcome!
                          {{ 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>
                  @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>
                  @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-header">
                                  <h1 class="modal-title fs-5" id="staticBackdropLabel">Modal title</h1>
                                  <button type="button" class="btn-close" data-bs-dismiss="modal"
                                      aria-label="Close"></button>
                              </div> --}}
                              <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="{{ 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>
  {{-- header section --}}
  {{-- @dd($header_data) --}}
  <section>
      <div class="d-flex" id="section1" style=" ">
          {{-- background-image:url({{ asset('assets/img/header/1.png') }}) --}}
          <div class="col-md-6" id="first_section" style="">
              <img src="{{ ApiBaseUrl()['url'] . $header_data[0]['leftImage'] }}" style=" " id="logo" />

              <h2 class="head-line m-0 p-0  each-word" id="heading" style="">
                  {{-- style="font-weight: bold!important;font-size: 2.50em;font-weight: 700;font-style: normal; color:#5e805c;font-size:30px;"> --}}
                  {{ 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>
              {{-- <img src="{{ asset('assets/img/header/3.png') }}" alt="image not found"
                  style="position: absolute;margin-left: 50px !important;margin-top: -75px;" /> --}}
              <p class="text-white m-0 p-0 d-none " style="font-size:15px">
                  <!-- ============================================================= -->
                  @if (isset($header_data[0]['address']) && $header_data[0]['address'] != '')
                      <br>
                  @endif
                  <!-- ============================================================= -->
                  {{-- <span>
                      <!-- ============================================================= -->
                      @if (isset($header_data[0]['phone']) && $header_data[0]['phone'] != '')
                          <i class="fa fa-phone" style="color:white;"></i> <a
                              href='tel:{{ formatPhoneNumber($header_data[0]['phone']) }}'
                              style="color: var( --blue)!important;">+1
                              {{ formatPhoneNumber($header_data[0]['phone']) }}</a>
                      @endif
                      <!-- ============================================================= -->
                      <!-- ============================================================= -->
                      @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>
                      @endif
                      <!-- ============================================================= -->
                  </span> --}}
              </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">
                      Weekdays ⏰ : 08:30 AM to 11:30 PM &amp; 05:30 PM to
                      09:00 PM
                  </span>
                  <br />
                  <span style=" " class="time_address">
                      Weekends ⏰ : 08:00 AM to 09:00
                      PM
                  </span><br /> --}}
                  <span style="" class="time_address">
                      📱<a href='tel:{{ formatPhoneNumber($header_data[0]['phone']) }}'
                          style="color: var( --blue)!important;"> +1
                          {{ formatPhoneNumber($header_data[0]['phone']) }}</a>
                  </span>

                  <span style="" class="time_address">
                      📩<a href="mailto:{{ $header_data[0]['email'] }}" style="color: var( --blue)!important;">
                          {{ $header_data[0]['email'] }}
                      </a>
                  </span>
              </div>
              {{-- <img src="{{ asset('assets/img/header/logo.png') }}" class=" mt-3" style="height:90%;" /> --}}
              {{-- <img src="{{ ApiBaseUrl()['url'] . $header_data[0]['rightImage'] }}" style="height:70%;" /> --}}

              {{-- <p class="text-white m-0 p-0 " style="font-size:15px">
                      <!-- ============================================================= -->
                      @if (isset($header_data[0]['address']) && $header_data[0]['address'] != '')
                          <strong style="color:black"><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>
                      @endif
                      <!-- ============================================================= -->
                      <strong style="color:black;">
                          <!-- ============================================================= -->
                          @if (isset($header_data[0]['phone']) && $header_data[0]['phone'] != '')
                              <i class="fa fa-phone" style="color:black;"></i> <a
                                  href='tel:{{ formatPhoneNumber($header_data[0]['phone']) }}'
                                  style="color: var( --blue)!important;">+1
                                  {{ formatPhoneNumber($header_data[0]['phone']) }}</a>
                          @endif
                          <!-- ============================================================= -->
                          <!-- ============================================================= -->
                          @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>
                          @endif
                          <!-- ============================================================= -->
                      </strong>
                  </p> --}}

          </div>
      </div>
  </section>
  {{-- End header Section --}}