# Fitur Galeri Produk

## Deskripsi
Setiap produk sekarang memiliki galeri foto yang dapat dikelola oleh university. Galeri ini akan tampil di halaman detail produk publik dan dapat diatur urutannya.

## Backend API Endpoints

### University Routes (Authenticated)
Semua endpoint ini memerlukan autentikasi sebagai university dan berada di prefix `/api/university`.

#### 1. Lihat Galeri Produk
```
GET /api/university/products/{product_id}/gallery
```
Response:
```json
{
  "data": [
    {
      "id": 1,
      "product_id": 5,
      "image": "http://127.0.0.1:8000/storage/products/gallery/xxx.jpg",
      "sort_order": 1,
      "created_at": "2026-01-15T10:00:00.000000Z",
      "updated_at": "2026-01-15T10:00:00.000000Z"
    }
  ]
}
```

#### 2. Upload Gambar Tunggal
```
POST /api/university/products/{product_id}/gallery
Content-Type: multipart/form-data

Body:
- image: file (required, jpg/jpeg/png/webp, max 2MB)
- sort_order: integer (optional)
```

#### 3. Upload Multiple Gambar
```
POST /api/university/products/{product_id}/gallery/multiple
Content-Type: multipart/form-data

Body:
- images[]: array of files (required, max 10 files, each max 2MB)
```

#### 4. Update Gambar
```
PUT /api/university/products/{product_id}/gallery/{image_id}
Content-Type: multipart/form-data

Body:
- image: file (optional, untuk replace gambar)
- sort_order: integer (optional, untuk ubah urutan)
```

#### 5. Reorder Galeri
```
POST /api/university/products/{product_id}/gallery/reorder
Content-Type: application/json

Body:
{
  "images": [
    { "id": 1, "sort_order": 1 },
    { "id": 2, "sort_order": 2 },
    { "id": 3, "sort_order": 3 }
  ]
}
```

#### 6. Hapus Gambar
```
DELETE /api/university/products/{product_id}/gallery/{image_id}
```

### Public Routes
Galeri otomatis di-include saat mengakses endpoint produk publik:

```
GET /api/products/{product_id}
```

Response akan include:
```json
{
  "id": 5,
  "title": "Buku Example",
  "image": "http://127.0.0.1:8000/storage/products/xxx.jpg",
  "images": [
    {
      "id": 1,
      "product_id": 5,
      "image": "http://127.0.0.1:8000/storage/products/gallery/yyy.jpg",
      "sort_order": 1
    }
  ],
  ...
}
```

## Frontend Components

### 1. ProductGalleryModal (University Dashboard)
**File:** `src/components/university/ProductGalleryModal.jsx`

Component ini digunakan di halaman University > Products untuk mengelola galeri:
- Upload gambar tunggal atau multiple
- Drag & drop untuk reorder
- Delete gambar
- Preview galeri

**Usage:**
```jsx
<ProductGalleryModal
  open={openGalleryModal}
  productId={selectedProductId}
  onClose={() => setOpenGalleryModal(false)}
/>
```

### 2. ProductGallery (Public Product Detail)
**File:** `src/components/product/ProductGallery.jsx`

Component ini menampilkan galeri foto di halaman detail produk:
- Grid layout responsif (2/3/4 kolom)
- Lightbox view dengan navigasi keyboard
- Thumbnail strip
- Zoom on hover

**Usage:**
```jsx
<ProductGallery product={product} />
```

### 3. ProductInfo Update
**File:** `src/components/product/ProductInfo.jsx`

Sudah diupdate untuk menampilkan thumbnail galeri di bawah gambar utama dengan:
- Navigasi arrow
- Thumbnail clickable
- Dot indicators
- Smooth transition

## Database Schema

### Table: product_images
```sql
CREATE TABLE product_images (
  id BIGINT UNSIGNED PRIMARY KEY AUTO_INCREMENT,
  product_id BIGINT UNSIGNED NOT NULL,
  image VARCHAR(255) NOT NULL,
  sort_order INT DEFAULT 0,
  created_at TIMESTAMP NULL,
  updated_at TIMESTAMP NULL,
  FOREIGN KEY (product_id) REFERENCES products(id) ON DELETE CASCADE
);
```

## Cara Menggunakan

### Untuk University:
1. Login sebagai university
2. Masuk ke menu **Produk Saya**
3. Klik tombol **Galeri** pada produk yang ingin dikelola
4. Upload gambar dengan cara:
   - Klik area upload
   - Atau drag & drop file
   - Bisa upload multiple sekaligus (max 10)
5. Atur urutan dengan drag & drop gambar
6. Hapus gambar yang tidak diinginkan dengan klik icon trash

### Untuk Customer:
1. Buka halaman detail produk
2. Galeri akan tampil di 3 tempat:
   - **Thumbnail di bawah gambar utama** (di bagian ProductInfo)
   - **Section Galeri Produk** dengan grid layout
   - **Lightbox view** saat klik gambar di galeri
3. Navigasi galeri:
   - Klik thumbnail untuk ganti gambar
   - Gunakan arrow button
   - Keyboard: ← → untuk navigasi, Esc untuk tutup

## File Structure

### Backend
```
app/
├── Http/Controllers/Api/
│   ├── University/
│   │   └── ProductGalleryController.php (NEW)
│   └── ProductController.php (updated)
├── Models/
│   ├── ProductImage.php (updated with accessor)
│   └── Product.php (already has images() relation)
routes/
└── api.php (added gallery routes)
```

### Frontend
```
src/
├── components/
│   ├── university/
│   │   └── ProductGalleryModal.jsx (NEW)
│   └── product/
│       ├── ProductGallery.jsx (NEW)
│       └── ProductInfo.jsx (updated)
├── pages/
│   ├── university/
│   │   └── Products.jsx (updated)
│   └── ProductDetail.jsx (updated)
└── services/
    └── universityProductService.js (added gallery functions)
```

## Notes
- Gambar disimpan di `storage/app/public/products/gallery/`
- Format yang didukung: JPG, JPEG, PNG, WEBP
- Max size per gambar: 2MB
- Max upload multiple: 10 gambar sekaligus
- Soft delete cascade: menghapus produk akan otomatis menghapus semua galeri
- URL gambar otomatis ditambahkan prefix storage URL via Eloquent accessor