@php

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

          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;
      }

      /* header media query */
      @media (max-width: 1500px) {
          #section1 {
              background-image: url({{ asset('assets/img/header/2.png') }});
              background-size: cover;
              background-repeat: no-repeat;
          }

          #first_section {
              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: 50px !important;
              margin-top: -75px;
              font-weight: 900;
          }

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

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

      @media (max-width: 1199px) {
          #section1 {
              background-image: url({{ asset('assets/img/header/1.png') }});
              background-size: cover;
              background-repeat: no-repeat;
          }

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

          #second_section {
              display: none;
          }

          #third_section {
              display: none;
              align-items: center;
              justify-content: space-around;
          }

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

          #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: 50px !important;
              margin-top: -75px;
              font-weight: 900;
          }


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

      @media (max-width: 1199px) and (min-width: 991px) {}

      @media (max-width: 991px) {}

      @media (max-width: 768px) {}

      @media (max-width: 575px) {
          .third_section {
              display: none !important;
          }

          /* #tamil {
              color: #ededb8 !important;
              position: absolute !important;
              margin-left: 5px !important;
              margin-top: 31px !important;
              font-weight: 900 !important;
              font-size: 14px !important;
          } */
      }
  </style>
  <section id="topbar ">
      <div class="row d-none">
          <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'] }}" id="logo" style="" />

              <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>
          </div>
          <div class="col-md-1 d-flex " id="second_section" style="">
              <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="">
              <div>
                  <span class="time_address" style="">
                      Weekdays ⏰ : 08:30 AM to 11:30 PM &amp; 05:30 PM to
                      09:00 PM
                  </span>
                  <br />
                  <span class="time_address" style="">
                      Weekends ⏰ : 08:00 AM to 09:00
                      PM
                  </span><br />
                  <span style="" class="time_address">
                      Phone 📱 :&nbsp;&nbsp;<a href='tel:{{ formatPhoneNumber($header_data[0]['phone']) }}'
                          style="color: var( --blue)!important;"> +1
                          {{ formatPhoneNumber($header_data[0]['phone']) }}</a>
                  </span>
                  <br />
                  <span style="" class="time_address">
                      Email 📩 :&nbsp;<a href="mailto:{{ $header_data[0]['email'] }}"
                          style="color: var( --blue)!important;"> {{ $header_data[0]['email'] }}
                      </a>
                  </span>
              </div>

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