<!-- sidebar.vue -->
<template>
  <ul class="menu p-4 w-64 min-h-full bg-base-100 text-base-content">
    <li class="mb-4 lg-hidden">
      <router-link :to="{ name: 'home' }">
        <img v-if="settingsStore.logoDataUrl()" :src="settingsStore.logoDataUrl()!" alt="Company Logo" class="h-10 w-auto" />
        <img v-else src="../../assets/images/1.png" alt="Company Logo" class="h-10 w-auto" />
      </router-link>
    </li>
    
    <li>
      <router-link :to="{ name: 'home' }" exact-active-class="active" class="gap-3">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
          <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
        </svg>
        Home
      </router-link>
    </li>
    <!-- <li>
      <router-link :to="{ name: 'PricingHistory' }" exact-active-class="active" class="gap-3">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
          <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18L9 11.25l4.306 4.307a11.95 11.95 0 015.814-5.519l2.74-1.22m0 0l-5.94-2.28m5.94 2.28l-2.28 5.941" />
        </svg>
        Market Trends
      </router-link>
    </li> -->

    <!-- Customer Section -->
    <li>
      <details open>
        <summary class="font-bold text-lg gap-3">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
          </svg>
          Customer
        </summary>
        <ul>
          <li><router-link :to="{ name: 'customer' }" exact-active-class="active">All Customers</router-link></li>
        </ul>
      </details>
    </li>

    <!-- Delivery Section -->
    <li>
      <details open>
        <summary class="font-bold text-lg gap-3">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 18.75a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h6m-9 0H3.375a1.125 1.125 0 01-1.125-1.125V14.25m17.25 4.5a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h1.125c.621 0 1.129-.504 1.09-1.124a17.902 17.902 0 00-3.213-9.193 2.056 2.056 0 00-1.58-.86H14.25M16.5 18.75h-2.25m0-11.177v-.958c0-.568-.422-1.048-.987-1.106a48.554 48.554 0 00-10.026 0 1.106 1.106 0 00-.987 1.106v7.635m12-6.677v6.677m0 4.5v-4.5m0 0h-12" />
          </svg>
          Delivery
        </summary>
        <ul>
          <li><router-link :to="{ name: 'delivery' }" exact-active-class="active">Home</router-link></li>
          <li><router-link :to="{ name: 'deliveryMap' }" exact-active-class="active">Map</router-link></li>
          <li>
            <router-link :to="{ name: 'deliveryOutForDelivery' }" exact-active-class="active">
              Todays Tickets
              <span v-if="countsStore.today > 0" class="badge badge-secondary">{{ countsStore.today }}</span>
            </router-link>
          </li>
          <li>
            <router-link :to="{ name: 'deliveryTommorrow' }" exact-active-class="active">
              Tomorrows Tickets
              <span v-if="countsStore.tomorrow > 0" class="badge badge-secondary">{{ countsStore.tomorrow }}</span>
            </router-link>
          </li>
          <li>
            <router-link :to="{ name: 'deliveryWaiting' }" exact-active-class="active">
              Waiting Tickets
              <span v-if="countsStore.waiting > 0" class="badge badge-info">{{ countsStore.waiting }}</span>
            </router-link>
          </li>
          <li><router-link :to="{ name: 'deliveryIssue' }" exact-active-class="active">Issue Tickets</router-link></li>
          <li>
            <router-link :to="{ name: 'deliveryPending' }" exact-active-class="active">
              Pending Tickets
              <span v-if="countsStore.pending > 0" class="badge badge-warning">{{ countsStore.pending }}</span>
            </router-link>
          </li>
          <li><router-link :to="{ name: 'deliveryFinalized' }" exact-active-class="active">Finalized Tickets</router-link></li>

        </ul>
      </details>
    </li>

    <!-- Service Section -->
    <li v-if="settingsStore.settings.show_service">
      <details open>
        <summary class="font-bold text-lg gap-3">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M11.42 15.17L17.25 21A2.652 2.652 0 0021 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 11-3.586-3.586l6.837-5.63m5.108-.233c.55-.164 1.163-.188 1.743-.14a4.5 4.5 0 004.486-6.336l-3.276 3.277a3.004 3.004 0 01-2.25-2.25l3.276-3.276a4.5 4.5 0 00-6.336 4.486c.091 1.076-.071 2.264-.904 2.95l-.102.085m-1.745 1.437L5.909 7.5H4.5L2.25 3.75l1.5-1.5L7.5 4.5v1.409l4.26 4.26m-1.745 1.437l1.745-1.437m6.615 8.206L15.75 15.75M4.867 19.125h.008v.008h-.008v-.008z" />
          </svg>
          Service
        </summary>
        <ul>
          <li><router-link :to="{ name: 'ServiceCalendar' }" exact-active-class="active">Service Calendar</router-link></li>
           <li>
            <router-link :to="{ name: 'ServiceToday' }" exact-active-class="active">
              Today's Service Calls
              <span v-if="countsStore.todayService > 0" class="badge badge-secondary">{{ countsStore.todayService }}</span>
            </router-link>
          </li>
          <li>
            <router-link :to="{ name: 'ServiceHome' }" exact-active-class="active">
              Upcoming Service
              <span v-if="countsStore.upcomingService > 0" class="badge badge-info">{{ countsStore.upcomingService }}</span>
            </router-link>
          </li>
          <li><router-link :to="{ name: 'ServicePast' }" exact-active-class="active">Past Service</router-link></li>
          <li><router-link :to="{ name: 'ServicePlans' }" exact-active-class="active">Service Plans</router-link></li>
        </ul>
      </details>
    </li>

    <!-- Automatics Section -->
    <li v-if="settingsStore.settings.show_automatics">
      <details>
        <summary class="font-bold text-lg gap-3">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
          </svg>
          Automatics
        </summary>
        <ul>
          <li>
            <router-link :to="{ name: 'auto' }" exact-active-class="active">
              All Automatics
              <span v-if="countsStore.automatic > 0" class="badge badge-info">{{ countsStore.automatic }}</span>
            </router-link>
          </li>
        </ul>
      </details>
    </li>
    
    <!-- Transactions Section -->
    <li>
      <details>
        <summary class="font-bold text-lg gap-3">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 19.5z" />
          </svg>
          Transactions
        </summary>
        <ul>
          <li>
            <router-link :to="{ name: 'transactionsAuthorize' }" exact-active-class="active">
              Authorize
              <span v-if="countsStore.transaction > 0" class="badge badge-secondary">{{ countsStore.transaction }}</span>
            </router-link>
          </li>
          <li>
            <router-link :to="{ name: 'transactionsHistory' }" exact-active-class="active">
              History
            </router-link>
          </li>
        </ul>
      </details>
    </li>

    <!-- Stats Section -->
    <li v-if="settingsStore.settings.show_stats">
      <details>
        <summary class="font-bold text-lg gap-3">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" />
          </svg>
          Stats
        </summary>
        <ul>
          <li><router-link :to="{ name: 'statsDailyDeliveries' }" exact-active-class="active">Daily Deliveries</router-link></li>
          <li><router-link :to="{ name: 'statsTotals' }" exact-active-class="active">Totals Comparison</router-link></li>
          <li><router-link :to="{ name: 'statsCustomers' }" exact-active-class="active">Customer Sign-ups</router-link></li>
        </ul>
      </details>
    </li>

    <!-- Admin Section -->
    <li>
      <details>
        <summary class="font-bold text-lg gap-3">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z" />
            <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
          </svg>
          Admin
        </summary>
        <ul>
          <li><router-link :to="{ name: 'employee' }" exact-active-class="active">Employees</router-link></li>
          <li><router-link :to="{ name: 'oilprice' }" exact-active-class="active">Oil Pricing</router-link></li>
          <li><router-link :to="{ name: 'promo' }" exact-active-class="active">Promos</router-link></li>
          <li><router-link :to="{ name: 'streetManager' }" exact-active-class="active">Street Manager</router-link></li>
          <li><router-link :to="{ name: 'settings' }" exact-active-class="active">Settings</router-link></li>
        </ul>
      </details>
    </li>
  </ul>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import { useCountsStore } from '../../stores/counts';
import { useSettingsStore } from '../../stores/settings';

const countsStore = useCountsStore();
const settingsStore = useSettingsStore();

// When the sidebar is first mounted, fetch all the counts
onMounted(() => {
  countsStore.fetchSidebarCounts();
  // You can remove your other update functions if their logic is now handled elsewhere
});
</script>
