<template>
  <div class="user-profile">
    <h2>{{ user.name }}</h2>
    <p>{{ user.email }}</p>
    <button @click="updateProfile">อัปเดตโปรไฟล์</button>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'

const user = reactive({
  name: 'สมชาย ใจดี',
  email: '[email protected]'
})

const updateProfile = () => {
  // อัปเดตโปรไฟล์ผู้ใช้
  console.log('โปรไฟล์ถูกอัปเดตแล้ว!')
}
</script>

<!-- วิธี CSS แบบดั้งเดิม -->
<div class="card">
  <h2 class="card-title">สวัสดีครับ</h2>
  <p class="card-description">นี่คือคำอธิบาย</p>
  <button class="btn btn-primary">คลิกที่นี่</button>
</div>

<!-- วิธี Tailwind CSS -->
<div class="bg-white p-6 rounded-lg shadow-md">
  <h2 class="text-2xl font-bold text-gray-900 mb-2">สวัสดีครับ</h2>
  <p class="text-gray-600 mb-4">นี่คือคำอธิบาย</p>
  <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
    คลิกที่นี่
  </button>
</div>

using Microsoft.EntityFrameworkCore;

var builder = WebApplication.CreateBuilder(args);

// เพิ่ม services ลงใน container
builder.Services.AddDbContext<AppDbContext>(options =>
    options.UseSqlite("DataSource=app.db"));

builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();

var app = builder.Build();

// กำหนดค่า HTTP request pipeline
if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI();
}

app.UseHttpsRedirection();

// กำหนด API endpoints
app.MapGet("/api/products", async (AppDbContext db) =>
    await db.Products.ToListAsync())
    .WithName("GetProducts")
    .WithOpenApi();

app.MapGet("/api/products/{id}", async (int id, AppDbContext db) =>
    await db.Products.FindAsync(id) is Product product
        ? Results.Ok(product)
        : Results.NotFound())
    .WithName("GetProduct")
    .WithOpenApi();

app.MapPost("/api/products", async (Product product, AppDbContext db) =>
{
    db.Products.Add(product);
    await db.SaveChangesAsync();
    return Results.Created($"/api/products/{product.Id}", product);
})
.WithName("CreateProduct")
.WithOpenApi();

app.Run();

// Models
public class Product
{
    public int Id { get; set; }
    public string Name { get; set; } = string.Empty;
    public decimal Price { get; set; }
    public string Description { get; set; } = string.Empty;
}

public class AppDbContext : DbContext
{
    public AppDbContext(DbContextOptions<AppDbContext> options) : base(options) { }
    public DbSet<Product> Products { get; set; }
}

<template>
  <div class="container mx-auto px-4 py-8">
    <h1 class="text-3xl font-bold text-gray-900 mb-8">แคตตาล็อกสินค้า</h1>
    
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <div 
        v-for="product in products" 
        :key="product.id"
        class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow"
      >
        <div class="p-6">
          <h3 class="text-xl font-semibold text-gray-900 mb-2">
            {{ product.name }}
          </h3>
          <p class="text-gray-600 mb-4">{{ product.description }}</p>
          <div class="flex justify-between items-center">
            <span class="text-2xl font-bold text-blue-600">
              ฿{{ product.price }}
            </span>
            <button 
              @click="addToCart(product)"
              class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
            >
              เพิ่มลงตะกร้า
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { productService } from '../services/productService'

const products = ref([])

const fetchProducts = async () => {
  try {
    const response = await productService.getAll()
    products.value = response.data
  } catch (error) {
    console.error('เกิดข้อผิดพลาดในการดึงข้อมูลสินค้า:', error)
  }
}

const addToCart = (product) => {
  // เพิ่มลงตะกร้า logic
  console.log('เพิ่มลงตะกร้า:', product)
}

onMounted(() => {
  fetchProducts()
})
</script>

// services/productService.js
import axios from 'axios'

const API_BASE_URL = 'https://localhost:7070/api'

export const productService = {
  async getAll() {
    return await axios.get(`${API_BASE_URL}/products`)
  },
  
  async getById(id) {
    return await axios.get(`${API_BASE_URL}/products/${id}`)
  },
  
  async create(product) {
    return await axios.post(`${API_BASE_URL}/products`, product)
  }
}

using Microsoft.EntityFrameworkCore;
using ECommerceApp.Modules.Products;
using ECommerceApp.Modules.Orders;
using ECommerceApp.Shared.Database;

var builder = WebApplication.CreateBuilder(args);

// เพิ่ม services ลงใน container
builder.Services.AddDbContext<AppDbContext>(options =>
    options.UseSqlite(builder.Configuration.GetConnectionString("DefaultConnection")));

// เพิ่ม CORS
builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowFrontend", policy =>
    {
        policy.WithOrigins("http://localhost:3000")
              .AllowAnyHeader()
              .AllowAnyMethod();
    });
});

builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();

// ลงทะเบียน module services
builder.Services.AddProductModule();
builder.Services.AddOrderModule();

var app = builder.Build();

// กำหนดค่า HTTP request pipeline
if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI();
}

app.UseHttpsRedirection();
app.UseCors("AllowFrontend");

// แมป module endpoints
app.MapProductEndpoints();
app.MapOrderEndpoints();

app.Run();

// Modules/Products/ProductModule.cs
using Microsoft.EntityFrameworkCore;
using ECommerceApp.Shared.Database;

namespace ECommerceApp.Modules.Products;

public static class ProductModule
{
    public static IServiceCollection AddProductModule(this IServiceCollection services)
    {
        services.AddScoped<IProductService, ProductService>();
        return services;
    }

    public static WebApplication MapProductEndpoints(this WebApplication app)
    {
        var group = app.MapGroup("/api/products").WithTags("Products");

        group.MapGet("/", GetProducts);
        group.MapGet("/{id}", GetProduct);
        group.MapPost("/", CreateProduct);
        group.MapPut("/{id}", UpdateProduct);
        group.MapDelete("/{id}", DeleteProduct);

        return app;
    }

    private static async Task<IResult> GetProducts(IProductService productService)
    {
        var products = await productService.GetAllAsync();
        return Results.Ok(products);
    }

    private static async Task<IResult> GetProduct(int id, IProductService productService)
    {
        var product = await productService.GetByIdAsync(id);
        return product != null ? Results.Ok(product) : Results.NotFound();
    }

    private static async Task<IResult> CreateProduct(Product product, IProductService productService)
    {
        var createdProduct = await productService.CreateAsync(product);
        return Results.Created($"/api/products/{createdProduct.Id}", createdProduct);
    }

    private static async Task<IResult> UpdateProduct(int id, Product product, IProductService productService)
    {
        if (id != product.Id) return Results.BadRequest();
        
        var updatedProduct = await productService.UpdateAsync(product);
        return updatedProduct != null ? Results.Ok(updatedProduct) : Results.NotFound();
    }

    private static async Task<IResult> DeleteProduct(int id, IProductService productService)
    {
        var success = await productService.DeleteAsync(id);
        return success ? Results.NoContent() : Results.NotFound();
    }
}

// Modules/Products/
├── ProductModule.cs          # การกำหนดค่า module และ endpoints
├── Models/
│   ├── Product.cs           # Product entity
│   └── ProductDto.cs        # Data transfer objects
├── Services/
│   ├── IProductService.cs   # Service interface
│   └── ProductService.cs    # Service implementation
└── Data/
    └── ProductRepository.cs # Data access layer

// Modules/Orders/
├── OrderModule.cs
├── Models/
├── Services/
└── Data/

// Shared/
├── Database/
│   └── AppDbContext.cs      # Shared database context
├── Infrastructure/
│   ├── Logging/
│   └── Configuration/
└── Common/
    └── BaseEntity.cs        # Shared base classes