<template>
  <div>
    <!-- Breadcrumb Header -->
    <div class="breadcrumb-header justify-content-between">
      <div class="my-auto">
        <h4 class="page-title">Quản lý đối soát</h4>
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="javascript:void(0);">Trang chủ</a></li>
          <li class="breadcrumb-item active" aria-current="page">Quản lý đối soát</li>
        </ol>
      </div>
    </div>

    <div class="row row-sm">
      <div class="col-xl-12">
        <div class="card">
          <div class="card-body">
            <div class="panel panel-primary tabs-style-2">
              <div class="tab-menu-heading">
                <div class="tabs-menu1">
                  <!-- Tabs -->
                  <ul class="nav panel-tabs main-nav-line">
                    <li>
                      <a 
                        href="#customers" 
                        class="nav-link me-1" 
                        :class="{ active: activeTab === 'customers' }"
                        data-bs-toggle="tab"
                        @click="switchTab('customers')"
                      >
                        <i class="fe fe-users me-1"></i>
                        Khách hàng cần đối soát
                        <span v-if="customerCount > 0" class="badge bg-primary ms-2">{{ customerCount }}</span>
                      </a>
                    </li>
                    <li>
                      <a 
                        href="#slips" 
                        class="nav-link me-1" 
                        :class="{ active: activeTab === 'slips' }"
                        data-bs-toggle="tab"
                        @click="switchTab('slips')"
                      >
                        <i class="fe fe-file-text me-1"></i>
                        Phiếu đối soát
                        <span v-if="slipCount > 0" class="badge bg-info ms-2">{{ slipCount }}</span>
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="panel-body tabs-menu-body main-content-body-right border">
                <div class="tab-content">
                  <!-- Tab Khách hàng cần đối soát -->
                  <div 
                    class="tab-pane" 
                    :class="{ active: activeTab === 'customers' }"
                    id="customers"
                  >
                    <CustomerReconciliationList 
                      v-if="activeTab === 'customers'" 
                      @update-count="updateCustomerCount"
                    />
                  </div>

                  <!-- Tab Phiếu đối soát -->
                  <div 
                    class="tab-pane" 
                    :class="{ active: activeTab === 'slips' }"
                    id="slips"
                  >
                    <CustomerReconciliationSlipList 
                      v-if="activeTab === 'slips'" 
                      @update-count="updateSlipCount"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import CustomerReconciliationList from './CustomerReconciliationList.vue'
import CustomerReconciliationSlipList from './CustomerReconciliationSlipList.vue'

const route = useRoute()
const router = useRouter()

// Active tab state
const activeTab = ref('customers')
const customerCount = ref(0)
const slipCount = ref(0)

// Switch tab
const switchTab = (tab) => {
  activeTab.value = tab
  // Update URL query parameter without reloading
  router.push({ 
    query: { ...route.query, tab } 
  })
}

// Update counts from child components
const updateCustomerCount = (count) => {
  customerCount.value = count
}

const updateSlipCount = (count) => {
  slipCount.value = count
}

// Initialize from URL query parameter
onMounted(() => {
  const tabFromQuery = route.query.tab
  if (tabFromQuery === 'slips' || tabFromQuery === 'customers') {
    activeTab.value = tabFromQuery
  }
})
</script>

<style scoped>
/* Minimal custom styles - most styling comes from tabs-style-2 */
</style>
