<template>
  <div class="container-fluid">
    <!-- Breadcrumb -->
    <div class="breadcrumb-header justify-content-between">
      <div class="my-auto">
        <h4 class="page-title">Hóa đơn thanh toán chuyển khoản</h4>
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="/">Trang chủ</a></li>
          <li class="breadcrumb-item">Tài chính</li>
          <li class="breadcrumb-item active" aria-current="page">Hóa đơn thanh toán chuyển khoản</li>
        </ol>
      </div>
    </div>

    <div class="row">
      <div class="col-12">
        <div class="card">
          <div class="card-header">
            <h4 class="card-title">Quản lý hóa đơn thanh toán chuyển khoản</h4>
          </div>
          <div class="card-body">
            <div class="row">
              <div class="col-md-6 mb-3">
                <router-link :to="{ name: 'transfer-payment-bill-search-customers' }"
                  class="btn btn-primary btn-lg w-100">
                  <i class="fe fe-search me-2"></i>
                  Tạo hóa đơn mới
                </router-link>
              </div>
              <div class="col-md-6 mb-3">
                <router-link :to="{ name: 'transfer-payment-bill-list' }" class="btn btn-outline-primary btn-lg w-100">
                  <i class="fe fe-list me-2"></i>
                  Danh sách hóa đơn
                </router-link>
              </div>
            </div>

            <div class="row mt-4">
              <div class="col-12">
                <div class="alert alert-info">
                  <h5><i class="fe fe-info me-2"></i>Hướng dẫn sử dụng</h5>
                  <ul class="mb-0">
                    <li><strong>Tạo hóa đơn mới:</strong> Tìm kiếm khách hàng có đơn hàng cần thu tiền cước chuyển khoản
                    </li>
                    <li><strong>Danh sách hóa đơn:</strong> Xem, quản lý và duyệt các hóa đơn đã tạo</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// Main dashboard for Transfer Payment Bill module
</script>

<style scoped>
.btn-lg {
  padding: 1rem 2rem;
  font-size: 1.1rem;
}

.card {
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  border: 1px solid rgba(0, 0, 0, 0.125);
}

.alert-info {
  background-color: #d1ecf1;
  border-color: #bee5eb;
  color: #0c5460;
}
</style>
