@extends('pwa.template.main')

@section('content')
  <!-- Header Area -->
  <div class="header-area" id="headerArea">
    <div class="container h-100 d-flex align-items-center justify-content-between d-flex rtl-flex-d-row-r">
      <!-- Logo Wrapper -->
      <div class="logo-wrapper">
        <a href="{{ route('home') }}"><img src="{{ asset('pwa/img/icons/logo.png') }}" alt=""
            style="width: 31px; border-radius: 50%;" /></a>
      </div>
      <b class="text-black">Aplikasi Gamping Online</b>
      <div class="navbar-logo-container d-flex align-items-center">
        <!-- Cart Icon -->
        <div class="cart-icon-wrap">
          <a href="{{ route('cart') }}"><i class="fa-solid fa-bag-shopping"></i><span class=""
              id="cart-items-amount">{{ Auth::user()->cart->count_item() ?? 0}}</span></a>
        </div>
        <!-- User Profile Icon -->
        {{-- <div class="user-profile-icon ms-2">
          <a href="profile.html"><img src="{{ asset('storage/' . Auth::user()->foto) }}" alt="" /></a>
        </div> --}}
        <!-- Navbar Toggler -->
        <!--<div class="suha-navbar-toggler ms-2" data-bs-toggle="offcanvas" data-bs-target="#suhaOffcanvas"-->
        <!--  aria-controls="suhaOffcanvas">-->
        <!--  <div><span></span><span></span><span></span></div>-->
        <!--</div>-->
      </div>
    </div>
  </div>
  <div class="offcanvas offcanvas-start suha-offcanvas-wrap" tabindex="-1" id="suhaOffcanvas"
    aria-labelledby="suhaOffcanvasLabel">
    <!-- Close button-->
    <button class="btn-close btn-close-white" type="button" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    <!-- Offcanvas body-->
    <div class="offcanvas-body">
      <!-- Sidenav Profile-->
      <div class="sidenav-profile">
        <div class="user-profile">
          <img src="{{ asset('storage/' . Auth::user()->foto) }}" alt=""
            style="height: 100% !important; object-fit: cover !important;" />
        </div>
        <div class="user-info">
          <h5 class="user-name mb-1 text-white">{{ Auth::user()->nama }}</h5>
          {{-- <p class="available-balance text-white">
            Available points <span class="counter">499</span>
          </p> --}}
        </div>
      </div>
      <!-- Sidenav Nav-->
      <ul class="sidenav-nav ps-0">
        <li>
          <a href="profile.html"><i class="fa-solid fa-user"></i>My Profile</a>
        </li>
        @if (isset(Auth::user()->merchant))
          <li>
            <a href="{{ route('merchant-profile', Auth::user()->merchant) }}"><i class="fa-solid fa-store"></i>Merchant
              Saya</a>
          </li>
        @else
          <li>
            <a href="{{ route('buat-merchant') }}"><i class="fa-solid fa-store"></i>Buka Merchant</a>
          </li>
        @endif
        <li>
          <a href="{{ route('logout.action') }}"><i class="fa-solid fa-toggle-off"></i>Sign Out</a>
        </li>
      </ul>
    </div>
  </div>
  <!-- PWA Install Alert -->
  <div class="toast pwa-install-alert shadow bg-white" style="display: none;" role="alert" aria-live="assertive"
    aria-atomic="true" data-bs-delay="5000" data-bs-autohide="true" id="modal-pwa-install">
    <div class="toast-body">
      <div class="content d-flex align-items-center mb-2">
        <img src="{{ asset('pwa/img/icons/icon-192x192.png') }}" alt="" />
        <h6 class="mb-0">Unduh Aplikasi Gamping Online</h6>
        <button class="btn-close ms-auto" type="button" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
      <span class="mb-0 d-block">
        Rasakan Pengalaman User Interface yang Lebih Baik Dengan Mengunduh Aplikasi Desa Digital
      </span>
      <button class="btn btn-warning bg-gradient w-100 mt-2" id="btn-install-pwa">Unduh</button>
    </div>
  </div>
  <!-- Internet Connection Status-->
  <div class="internet-connection-status" id="internetStatus"></div>
  <!-- Footer Nav-->
  <div class="footer-nav-area bg-primary bg-gradient" id="footerNav" style="box-shadow: 0 8px 10px 10px #00000063;">
    <div class="suha-footer-nav">
      <ul class="h-100 d-flex align-items-center justify-content-between ps-0 d-flex rtl-flex-d-row-r">
        <li>
          <a href="{{ route('home') }}"
            style="display: flex; flex-direction: column; justify-content: center; align-items: center;">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
              class="bi bi-house-door-fill" viewBox="0 0 16 16" style="">
              <path
                d="M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z" />
            </svg>
            <p style="color: white;margin:0">
              Beranda
            </p>
          </a>
        </li>
        <li>
          <a href="{{ route('shop') }}"
            style="display: flex; flex-direction: column; justify-content: center; align-items: center">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
              class="bi bi-arrow-down-up" viewBox="0 0 16 16">
              <path fill-rule="evenodd"
                d="M11.5 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L11 2.707V14.5a.5.5 0 0 0 .5.5zm-7-14a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L4 13.293V1.5a.5.5 0 0 1 .5-.5z" />
            </svg>
            <p style="color: white;margin:0">
              Pasar Desa
            </p>
          </a>
        </li>
        <li>
          <a href="{{ route('laporan-warga') }}"
            style="display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; ">
            <i class="bi bi-plus"
              style="color: black;
            border-radius: 50%;
            background-color: white;
            position: absolute;
            top: -45px;
            width: 50px;
            height: 50px; font-size: 3rem; box-shadow: 0 0 9px 0 #00000063"></i>
          </a>
        </li>
        <li>
          <a href="{{ route('perizinan') }}"
            style="display: flex; flex-direction: column; justify-content: center; align-items: center">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
              class="bi bi-file-text-fill" viewBox="0 0 16 16">
              <path
                d="M12 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM5 4h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1 0-1zm-.5 2.5A.5.5 0 0 1 5 6h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zM5 8h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1 0-1zm0 2h3a.5.5 0 0 1 0 1H5a.5.5 0 0 1 0-1z" />
            </svg>
            <p style="color: white;margin:0">
              Dokumen
            </p>
          </a>
        </li>
        <li>
          <a href="{{ route('profile') }}"
            style="display: flex; flex-direction: column; justify-content: center; align-items: center">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
              class="bi bi-person-circle" viewBox="0 0 16 16">
              <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z" />
              <path fill-rule="evenodd"
                d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z" />
            </svg>
            <p style="color: white;margin:0">
              Profil
            </p>
          </a>
        </li>
      </ul>
    </div>
  </div>
  <div class="page-content-wrapper">
    @yield('app-content')
  </div>
@endsection