# Admin Panel — Stories + Info Sections

## 1. Stories (Hikayeler)

Anasayfadaki kayan hikaye/tanıtım kartları. Instagram stories benzeri yapı.

### API Endpoints

| Method | Endpoint | Auth | Açıklama |
|--------|----------|------|----------|
| `GET` | `/v1/stories` | public | Aktif hikayeler (order_index sıralı) |
| `GET` | `/admin/stories` | sanctum | Tüm hikayeler |
| `POST` | `/admin/stories` | sanctum | Yeni hikaye oluştur |
| `GET` | `/admin/stories/{id}` | sanctum | Hikaye detayı |
| `PUT` | `/admin/stories/{id}` | sanctum | Hikaye güncelle |
| `DELETE` | `/admin/stories/{id}` | sanctum | Hikaye sil |

### Response Formatı

```json
{
  "data": [
    {
      "id": 1,
      "title": "25 Yılı Aşkın Deneyim",
      "badge": "Tanıtım",
      "content": "1998'den bu yana 15.000+ denizci yetiştirdik...",
      "image": "/storage/stories/hakkimizda.jpg",
      "cta_text": "Hakkımızda",
      "cta_url": "/kurumsal/hakkimizda",
      "order_index": 0,
      "is_active": true,
      "created_at": "...",
      "updated_at": "..."
    }
  ]
}
```

### Veri Modeli

| Alan | Tip | Açıklama |
|------|-----|----------|
| `title` | string (zorunlu) | Hikaye başlığı |
| `badge` | string (nullable) | Üst etiket: "Tanıtım", "Yeni Dönem", vb. |
| `content` | text (zorunlu) | Hikaye içeriği |
| `image` | string (nullable) | Görsel path (storage/stories/) |
| `cta_text` | string (nullable) | Buton metni: "Hakkımızda", "Detaylı Bilgi" |
| `cta_url` | string (nullable) | Buton linki: "/kurumsal/hakkimizda" |
| `order_index` | integer | Sıralama (0'dan başlar) |
| `is_active` | boolean | Aktif/pasif |

### Admin Panel Form

```
┌─────────────────────────────────────────────────┐
│ Hikaye Düzenle                                   │
├─────────────────────────────────────────────────┤
│ Başlık:     [25 Yılı Aşkın Deneyim          ]  │
│ Etiket:     [Tanıtım                         ]  │
│ İçerik:     ┌─────────────────────────────────┐ │
│             │ 1998'den bu yana 15.000+...      │ │
│             └─────────────────────────────────┘ │
│ Görsel:     [📷 Dosya Seç] hakkimizda.jpg      │
│ Buton:      [Hakkımızda    ] [/kurumsal/hak..]  │
│ Sıralama:   [0]                                  │
│ Aktif:      [✅ Toggle]                          │
│                                    [Kaydet]      │
└─────────────────────────────────────────────────┘
```

#### Form Alanları:
| Alan | Bileşen | Açıklama |
|------|---------|----------|
| title | TextInput | Zorunlu, max 255 |
| badge | TextInput | İsteğe bağlı, max 100 |
| content | Textarea | Zorunlu |
| image | FileUpload | storage/public/stories, preview göster |
| cta_text | TextInput | İsteğe bağlı, max 100 |
| cta_url | TextInput (url) | İsteğe bağlı, max 255 |
| order_index | NumberInput | Varsayılan 0 |
| is_active | Toggle | Varsayılan true |

#### Tablo Sütunları:
| Sütun | Açıklama |
|-------|----------|
| Görsel | Küçük thumbnail |
| Başlık | title |
| Etiket | badge (badge bileşeni) |
| Buton | cta_text (varsa göster) |
| Sıralama | order_index |
| Aktif | is_active (toggle/icon) |

---

## 2. Info Sections (Tanıtım Bölümleri)

Anasayfadaki 2 adet metin+görsel tanıtım bölümü. Settings tablosunda `info_sections` grubu altında saklanır.

### API Erişimi

Mevcut settings endpoint'inden gelir:

```
GET /api/v1/settings
GET /api/v1/settings/info_sections
```

### Response (settings/info_sections):

```json
{
  "info_section_1_badge": "Neden Boğaziçi Denizcilik?",
  "info_section_1_title": "Uluslararası Standartlarda Eğitim",
  "info_section_1_body": "Uzun açıklama metni...",
  "info_section_1_quote": "Denizcilik eğitiminde kalite...",
  "info_section_1_quote_author": "Kpt. Murat Aydın, Kurucu",
  "info_section_1_image": "/storage/uploads/info-1.jpg",
  "info_section_2_badge": "Simülatör Destekli Eğitim",
  "info_section_2_title": "Teoriden Pratiğe",
  "info_section_2_body": "Uzun açıklama metni...",
  "info_section_2_image": "/storage/uploads/info-2.jpg"
}
```

### Alanlar

**Bölüm 1 (6 alan):**
| Key | Type | Label |
|-----|------|-------|
| `info_section_1_badge` | text | Bölüm 1 — Etiket |
| `info_section_1_title` | text | Bölüm 1 — Başlık |
| `info_section_1_body` | textarea | Bölüm 1 — İçerik |
| `info_section_1_quote` | text | Bölüm 1 — Alıntı |
| `info_section_1_quote_author` | text | Bölüm 1 — Alıntı Yazarı |
| `info_section_1_image` | image | Bölüm 1 — Görsel |

**Bölüm 2 (4 alan):**
| Key | Type | Label |
|-----|------|-------|
| `info_section_2_badge` | text | Bölüm 2 — Etiket |
| `info_section_2_title` | text | Bölüm 2 — Başlık |
| `info_section_2_body` | textarea | Bölüm 2 — İçerik |
| `info_section_2_image` | image | Bölüm 2 — Görsel |

### Admin Panel — Ayarlar Sayfası

Mevcut Settings sayfasına yeni bir **"Tanıtım Bölümleri"** sekmesi ekle:

```
/admin/settings
├── ... (mevcut sekmeler)
└── Tanıtım Bölümleri → info_sections
    ├── Bölüm 1
    │   ├── Etiket:         [Neden Boğaziçi Denizcilik?]
    │   ├── Başlık:         [Uluslararası Standartlarda...]
    │   ├── İçerik:         [textarea — uzun metin]
    │   ├── Alıntı:         [Denizcilik eğitiminde kalite...]
    │   ├── Alıntı Yazarı:  [Kpt. Murat Aydın, Kurucu]
    │   └── Görsel:         [📷 FileUpload]
    └── Bölüm 2
        ├── Etiket:         [Simülatör Destekli Eğitim]
        ├── Başlık:         [Teoriden Pratiğe]
        ├── İçerik:         [textarea — uzun metin]
        └── Görsel:         [📷 FileUpload]
```

Kaydet: `PUT /admin/settings` ile dot notation:
```json
{
  "settings": {
    "info_sections.info_section_1_badge": "Neden Boğaziçi Denizcilik?",
    "info_sections.info_section_1_title": "Uluslararası Standartlarda Eğitim",
    "info_sections.info_section_1_body": "...",
    "info_sections.info_section_1_image": "/storage/uploads/info-1.jpg"
  }
}
```

---

## Frontend Kullanım Özeti

### Stories
```tsx
// Anasayfa
const { data: stories } = await fetch('/api/v1/stories');

{stories.map(story => (
  <StoryCard
    key={story.id}
    title={story.title}
    badge={story.badge}
    content={story.content}
    image={getImageUrl(story.image)}
    ctaText={story.cta_text}
    ctaUrl={story.cta_url}
  />
))}
```

### Info Sections
```tsx
// Settings'ten al
const settings = await fetch('/api/v1/settings');
const info1 = {
  badge: settings.info_sections?.info_section_1_badge,
  title: settings.info_sections?.info_section_1_title,
  body: settings.info_sections?.info_section_1_body,
  quote: settings.info_sections?.info_section_1_quote,
  quoteAuthor: settings.info_sections?.info_section_1_quote_author,
  image: settings.info_sections?.info_section_1_image,
};

// Bölüm 1 — görsel solda, metin sağda
<InfoSection {...info1} imagePosition="left" />

// Bölüm 2 — görsel sağda, metin solda (reverse)
<InfoSection {...info2} imagePosition="right" />
```