# Fitur Peta Interaktif Jaringan Cabang

## Overview
Fitur peta interaktif menggunakan Leaflet.js untuk menampilkan lokasi semua cabang Dino Logistics di seluruh Indonesia.

## Teknologi
- **Leaflet.js 1.9.4** - Library peta interaktif open-source
- **OpenStreetMap** - Tile provider untuk peta
- **Laravel Cache** - Optimasi performa data cabang

## File yang Dimodifikasi

### Backend
1. **Migration**: `database/migrations/2026_02_10_084031_add_coordinates_to_branches_table.php`
   - Menambahkan kolom `latitude` dan `longitude` ke tabel `branches`

2. **Form Schema**: `app/Filament/Resources/Branches/Schemas/BranchForm.php`
   - Menambahkan input field untuk latitude dan longitude di admin panel
   - Field tersembunyi dalam section collapsible

3. **Controller**: `app/Http/Controllers/HomeController.php`
   - Menambahkan query `branchesWithCoordinates` untuk data peta
   - Menggunakan cache untuk optimasi performa

4. **Seeder**: `database/seeders/BranchCoordinatesSeeder.php`
   - Sample data 12 cabang dengan koordinat di kota-kota besar Indonesia

### Frontend
1. **View**: `resources/views/home.blade.php`
   - Menambahkan container peta di section "Jaringan Nasional"
   - Script Leaflet untuk inisialisasi peta dan marker

2. **Layout Header**: `resources/views/layouts/header.blade.php`
   - Menambahkan Leaflet CSS

3. **Layout Footer**: `resources/views/layouts/footer.blade.php`
   - Menambahkan Leaflet JS

4. **CSS**: `public/css/map-styles.css`
   - Styling untuk peta, marker, dan popup

## Cara Menggunakan

### 1. Jalankan Migration
```bash
php artisan migrate
```

### 2. (Optional) Seed Sample Data
```bash
php artisan db:seed --class=BranchCoordinatesSeeder
```

### 3. Tambah/Edit Cabang di Admin Panel
1. Login ke Filament admin panel
2. Buka menu "Branches"
3. Saat create/edit cabang, buka section "Lokasi Maps"
4. Masukkan koordinat latitude dan longitude
   - **Latitude**: Koordinat lintang (contoh: -6.200000 untuk Jakarta)
   - **Longitude**: Koordinat bujur (contoh: 106.816666 untuk Jakarta)

### 4. Cara Mendapatkan Koordinat
**Metode 1: Google Maps**
1. Buka Google Maps
2. Klik kanan pada lokasi yang diinginkan
3. Pilih koordinat yang muncul (akan otomatis copy)
4. Format: `latitude, longitude`

**Metode 2: Leaflet Map (Coming Soon)**
- Fitur click-to-get-coordinates bisa ditambahkan di admin panel

## Fitur Peta

### Tampilan
- **Default View**: Centered di Indonesia dengan zoom level 5
- **Marker**: Pin merah dengan icon FontAwesome
- **Popup**: Menampilkan nama cabang saat marker diklik
- **Controls**: Zoom in/out buttons
- **Responsive**: Otomatis menyesuaikan ukuran layar

### Interaksi
- **Klik marker**: Tampilkan popup nama cabang
- **Drag**: Geser peta
- **Zoom**: Scroll mouse atau tombol +/-
- **Mobile**: Touch gestures support

## Optimasi Performa
1. **Cache**: Data cabang di-cache selama 7 hari
2. **Conditional Rendering**: Peta hanya muncul jika ada cabang dengan koordinat
3. **Lazy Loading**: Marker di-load setelah peta siap

## Customization

### Ubah Default Center & Zoom
Edit di `resources/views/home.blade.php`:
```javascript
const map = L.map('branchMap').setView([-2.5, 118], 5);
// Format: .setView([latitude, longitude], zoomLevel)
```

### Ubah Warna Marker
Edit di `public/css/map-styles.css`:
```css
.marker-pin i {
    color: #dc2626; /* Ubah warna di sini */
}
```

### Ubah Tinggi Peta
Edit di `public/css/map-styles.css`:
```css
#branchMap {
    height: 500px; /* Ubah tinggi di sini */
}
```

## Troubleshooting

### Peta Tidak Muncul
1. Pastikan ada cabang dengan koordinat di database
2. Check browser console untuk error
3. Pastikan Leaflet CSS & JS ter-load dengan benar

### Marker Tidak Muncul
1. Pastikan koordinat valid (latitude: -90 to 90, longitude: -180 to 180)
2. Check data di database: `SELECT * FROM branches WHERE latitude IS NOT NULL`

### Cache Issue
Clear cache jika data tidak update:
```bash
php artisan cache:clear
```

## Future Enhancements
- [ ] Clustering untuk banyak marker
- [ ] Filter cabang by region
- [ ] Custom marker berdasarkan tipe cabang
- [ ] Info window dengan detail lengkap (alamat, telepon, dll)
- [ ] Routing/directions ke cabang terdekat
- [ ] Geolocation user untuk find nearest branch