@extends('layouts.app')

@section('title', 'Tambah Paket Hotspot')

@section('content')
<div class="container-fluid">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h2 mb-1">Tambah Paket Hotspot</h1>
            <p class="text-muted mb-0">Buat paket layanan internet hotspot baru</p>
        </div>
        <a href="{{ route('layanan-hotspots.index') }}" class="btn btn-outline-secondary">
            <i class="fas fa-arrow-left"></i> Kembali
        </a>
    </div>

    <div class="row">
        <!-- Form -->
        <div class="col-lg-8">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-bottom">
                    <h5 class="card-title mb-0">Informasi Paket Hotspot</h5>
                </div>
                <div class="card-body">
                    <form action="{{ route('layanan-hotspots.store') }}" method="POST" enctype="multipart/form-data" id="hotspotForm">
                        @csrf
                        
                        <!-- Informasi Dasar -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="fw-bold text-primary mb-3">
                                    <i class="fas fa-info-circle"></i> Informasi Dasar
                                </h6>
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                <label for="nama_paket" class="form-label">Nama Paket <span class="text-danger">*</span></label>
                                <input type="text" name="nama_paket" id="nama_paket" class="form-control @error('nama_paket') is-invalid @enderror" 
                                       value="{{ old('nama_paket') }}" placeholder="Contoh: Hotspot Premium 10 Mbps" required>
                                @error('nama_paket')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="kode_paket" class="form-label">Kode Paket <span class="text-danger">*</span></label>
                                <input type="text" name="kode_paket" id="kode_paket" class="form-control @error('kode_paket') is-invalid @enderror" 
                                       value="{{ old('kode_paket') }}" placeholder="Contoh: HSP-10M" required>
                                @error('kode_paket')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-12 mb-3">
                                <label for="deskripsi" class="form-label">Deskripsi Paket</label>
                                <textarea name="deskripsi" id="deskripsi" class="form-control @error('deskripsi') is-invalid @enderror" 
                                          rows="3" placeholder="Deskripsi singkat tentang paket hotspot ini">{{ old('deskripsi') }}</textarea>
                                @error('deskripsi')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- Spesifikasi Bandwidth -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="fw-bold text-primary mb-3">
                                    <i class="fas fa-tachometer-alt"></i> Spesifikasi Bandwidth
                                </h6>
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                <label for="bandwidth_download" class="form-label">Bandwidth Download <span class="text-danger">*</span></label>
                                <input type="text" name="bandwidth_download" id="bandwidth_download" 
                                       class="form-control @error('bandwidth_download') is-invalid @enderror" 
                                       value="{{ old('bandwidth_download') }}" placeholder="Contoh: 10 Mbps" required>
                                @error('bandwidth_download')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="bandwidth_upload" class="form-label">Bandwidth Upload <span class="text-danger">*</span></label>
                                <input type="text" name="bandwidth_upload" id="bandwidth_upload" 
                                       class="form-control @error('bandwidth_upload') is-invalid @enderror" 
                                       value="{{ old('bandwidth_upload') }}" placeholder="Contoh: 5 Mbps" required>
                                @error('bandwidth_upload')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-4 mb-3">
                                <label for="kuota_data" class="form-label">Kuota Data (GB)</label>
                                <input type="number" name="kuota_data" id="kuota_data" 
                                       class="form-control @error('kuota_data') is-invalid @enderror" 
                                       value="{{ old('kuota_data') }}" min="1" placeholder="Kosongkan untuk unlimited">
                                <div class="form-text">Kosongkan untuk kuota unlimited</div>
                                @error('kuota_data')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-4 mb-3">
                                <label for="masa_aktif" class="form-label">Masa Aktif (Hari) <span class="text-danger">*</span></label>
                                <input type="number" name="masa_aktif" id="masa_aktif" 
                                       class="form-control @error('masa_aktif') is-invalid @enderror" 
                                       value="{{ old('masa_aktif', 30) }}" min="1" required>
                                @error('masa_aktif')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-4 mb-3">
                                <label for="max_device" class="form-label">Max Device <span class="text-danger">*</span></label>
                                <input type="number" name="max_device" id="max_device" 
                                       class="form-control @error('max_device') is-invalid @enderror" 
                                       value="{{ old('max_device', 1) }}" min="1" max="100" required>
                                @error('max_device')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- Jadwal Akses -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="fw-bold text-primary mb-3">
                                    <i class="fas fa-clock"></i> Jadwal Akses
                                </h6>
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                <label for="jam_mulai" class="form-label">Jam Mulai <span class="text-danger">*</span></label>
                                <input type="time" name="jam_mulai" id="jam_mulai" 
                                       class="form-control @error('jam_mulai') is-invalid @enderror" 
                                       value="{{ old('jam_mulai', '00:00') }}" required>
                                @error('jam_mulai')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="jam_selesai" class="form-label">Jam Selesai <span class="text-danger">*</span></label>
                                <input type="time" name="jam_selesai" id="jam_selesai" 
                                       class="form-control @error('jam_selesai') is-invalid @enderror" 
                                       value="{{ old('jam_selesai', '23:59') }}" required>
                                @error('jam_selesai')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-12 mb-3">
                                <label class="form-label">Hari Aktif</label>
                                <div class="row">
                                    @php
                                        $hari = [
                                            'senin' => 'Senin',
                                            'selasa' => 'Selasa', 
                                            'rabu' => 'Rabu',
                                            'kamis' => 'Kamis',
                                            'jumat' => 'Jumat',
                                            'sabtu' => 'Sabtu',
                                            'minggu' => 'Minggu'
                                        ];
                                        $oldHari = old('hari_aktif', []);
                                    @endphp
                                    @foreach($hari as $key => $label)
                                        <div class="col-md-3 mb-2">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" name="hari_aktif[]" 
                                                       value="{{ $key }}" id="hari_{{ $key }}"
                                                       {{ in_array($key, $oldHari) ? 'checked' : '' }}>
                                                <label class="form-check-label" for="hari_{{ $key }}">
                                                    {{ $label }}
                                                </label>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                                <div class="form-text">Kosongkan untuk aktif setiap hari</div>
                            </div>
                        </div>

                        <!-- Harga dan Billing -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="fw-bold text-primary mb-3">
                                    <i class="fas fa-money-bill-wave"></i> Harga dan Billing
                                </h6>
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                <label for="tipe_billing" class="form-label">Tipe Billing <span class="text-danger">*</span></label>
                                <select name="tipe_billing" id="tipe_billing" class="form-select @error('tipe_billing') is-invalid @enderror" required>
                                    <option value="">Pilih Tipe Billing</option>
                                    <option value="harian" {{ old('tipe_billing') == 'harian' ? 'selected' : '' }}>Harian</option>
                                    <option value="mingguan" {{ old('tipe_billing') == 'mingguan' ? 'selected' : '' }}>Mingguan</option>
                                    <option value="bulanan" {{ old('tipe_billing', 'bulanan') == 'bulanan' ? 'selected' : '' }}>Bulanan</option>
                                    <option value="sekali_bayar" {{ old('tipe_billing') == 'sekali_bayar' ? 'selected' : '' }}>Sekali Bayar</option>
                                </select>
                                @error('tipe_billing')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="harga_bulanan" class="form-label">Harga <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text">Rp</span>
                                    <input type="number" name="harga_bulanan" id="harga_bulanan" 
                                           class="form-control @error('harga_bulanan') is-invalid @enderror" 
                                           value="{{ old('harga_bulanan') }}" min="0" step="1000" required>
                                </div>
                                @error('harga_bulanan')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6 mb-3" id="harga_harian_group" style="display: none;">
                                <label for="harga_harian" class="form-label">Harga Harian</label>
                                <div class="input-group">
                                    <span class="input-group-text">Rp</span>
                                    <input type="number" name="harga_harian" id="harga_harian" 
                                           class="form-control @error('harga_harian') is-invalid @enderror" 
                                           value="{{ old('harga_harian') }}" min="0" step="1000">
                                </div>
                                @error('harga_harian')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6 mb-3" id="harga_mingguan_group" style="display: none;">
                                <label for="harga_mingguan" class="form-label">Harga Mingguan</label>
                                <div class="input-group">
                                    <span class="input-group-text">Rp</span>
                                    <input type="number" name="harga_mingguan" id="harga_mingguan" 
                                           class="form-control @error('harga_mingguan') is-invalid @enderror" 
                                           value="{{ old('harga_mingguan') }}" min="0" step="1000">
                                </div>
                                @error('harga_mingguan')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- Fair Usage Policy -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="fw-bold text-primary mb-3">
                                    <i class="fas fa-shield-alt"></i> Fair Usage Policy (FUP)
                                </h6>
                            </div>
                            
                            <div class="col-12 mb-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="fair_usage_policy" 
                                           id="fair_usage_policy" value="1" {{ old('fair_usage_policy') ? 'checked' : '' }}>
                                    <label class="form-check-label" for="fair_usage_policy">
                                        Aktifkan Fair Usage Policy
                                    </label>
                                </div>
                            </div>

                            <div class="col-md-6 mb-3" id="fup_threshold_group" style="display: none;">
                                <label for="fup_threshold" class="form-label">Threshold FUP (GB)</label>
                                <input type="number" name="fup_threshold" id="fup_threshold" 
                                       class="form-control @error('fup_threshold') is-invalid @enderror" 
                                       value="{{ old('fup_threshold') }}" min="1">
                                @error('fup_threshold')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6 mb-3" id="fup_speed_group" style="display: none;">
                                <label for="fup_speed" class="form-label">Speed Setelah FUP</label>
                                <input type="text" name="fup_speed" id="fup_speed" 
                                       class="form-control @error('fup_speed') is-invalid @enderror" 
                                       value="{{ old('fup_speed') }}" placeholder="Contoh: 1 Mbps">
                                @error('fup_speed')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- Portal dan Template -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="fw-bold text-primary mb-3">
                                    <i class="fas fa-globe"></i> Portal dan Template
                                </h6>
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="portal_login" 
                                           id="portal_login" value="1" {{ old('portal_login', true) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="portal_login">
                                        Gunakan Portal Login
                                    </label>
                                </div>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="portal_template" class="form-label">Template Portal <span class="text-danger">*</span></label>
                                <select name="portal_template" id="portal_template" class="form-select @error('portal_template') is-invalid @enderror" required>
                                    <option value="default" {{ old('portal_template', 'default') == 'default' ? 'selected' : '' }}>Default</option>
                                    <option value="modern" {{ old('portal_template') == 'modern' ? 'selected' : '' }}>Modern</option>
                                    <option value="classic" {{ old('portal_template') == 'classic' ? 'selected' : '' }}>Classic</option>
                                    <option value="minimal" {{ old('portal_template') == 'minimal' ? 'selected' : '' }}>Minimal</option>
                                </select>
                                @error('portal_template')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6 mb-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="auto_renewal" 
                                           id="auto_renewal" value="1" {{ old('auto_renewal') ? 'checked' : '' }}>
                                    <label class="form-check-label" for="auto_renewal">
                                        Perpanjangan Otomatis
                                    </label>
                                </div>
                            </div>
                        </div>

                        <!-- Lokasi Hotspot -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="fw-bold text-primary mb-3">
                                    <i class="fas fa-map-marker-alt"></i> Lokasi Hotspot
                                </h6>
                            </div>
                            
                            <div class="col-12 mb-3">
                                <label for="alamat_hotspot" class="form-label">Alamat Hotspot</label>
                                <textarea name="alamat_hotspot" id="alamat_hotspot" class="form-control @error('alamat_hotspot') is-invalid @enderror" 
                                          rows="3" placeholder="Alamat lengkap lokasi hotspot">{{ old('alamat_hotspot') }}</textarea>
                                @error('alamat_hotspot')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-4 mb-3">
                                <label for="radius_coverage" class="form-label">Radius Coverage</label>
                                <input type="text" name="radius_coverage" id="radius_coverage" 
                                       class="form-control @error('radius_coverage') is-invalid @enderror" 
                                       value="{{ old('radius_coverage') }}" placeholder="Contoh: 100m">
                                @error('radius_coverage')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-4 mb-3">
                                <label for="latitude" class="form-label">Latitude</label>
                                <input type="number" name="latitude" id="latitude" 
                                       class="form-control @error('latitude') is-invalid @enderror" 
                                       value="{{ old('latitude') }}" step="any" placeholder="Contoh: -6.200000">
                                @error('latitude')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-4 mb-3">
                                <label for="longitude" class="form-label">Longitude</label>
                                <input type="number" name="longitude" id="longitude" 
                                       class="form-control @error('longitude') is-invalid @enderror" 
                                       value="{{ old('longitude') }}" step="any" placeholder="Contoh: 106.816666">
                                @error('longitude')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- Mikrotik Integration -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="fw-bold text-primary mb-3">
                                    <i class="fas fa-server"></i> Integrasi Mikrotik
                                </h6>
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                <label for="mikrotik_profile" class="form-label">Profile Mikrotik</label>
                                <input type="text" name="mikrotik_profile" id="mikrotik_profile" 
                                       class="form-control @error('mikrotik_profile') is-invalid @enderror" 
                                       value="{{ old('mikrotik_profile') }}" placeholder="Nama profile di mikrotik">
                                @error('mikrotik_profile')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="mikrotik_server" class="form-label">Server Hotspot</label>
                                <input type="text" name="mikrotik_server" id="mikrotik_server" 
                                       class="form-control @error('mikrotik_server') is-invalid @enderror" 
                                       value="{{ old('mikrotik_server') }}" placeholder="Nama server hotspot">
                                @error('mikrotik_server')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- Status dan Metadata -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="fw-bold text-primary mb-3">
                                    <i class="fas fa-cog"></i> Status dan Metadata
                                </h6>
                            </div>
                            
                            <div class="col-md-4 mb-3">
                                <label for="status" class="form-label">Status <span class="text-danger">*</span></label>
                                <select name="status" id="status" class="form-select @error('status') is-invalid @enderror" required>
                                    <option value="aktif" {{ old('status', 'aktif') == 'aktif' ? 'selected' : '' }}>Aktif</option>
                                    <option value="non_aktif" {{ old('status') == 'non_aktif' ? 'selected' : '' }}>Non Aktif</option>
                                    <option value="maintenance" {{ old('status') == 'maintenance' ? 'selected' : '' }}>Maintenance</option>
                                </select>
                                @error('status')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-4 mb-3">
                                <label for="urutan" class="form-label">Urutan Tampil</label>
                                <input type="number" name="urutan" id="urutan" 
                                       class="form-control @error('urutan') is-invalid @enderror" 
                                       value="{{ old('urutan', 0) }}" min="0">
                                @error('urutan')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-4 mb-3">
                                <div class="form-check mt-4">
                                    <input class="form-check-input" type="checkbox" name="is_featured" 
                                           id="is_featured" value="1" {{ old('is_featured') ? 'checked' : '' }}>
                                    <label class="form-check-label" for="is_featured">
                                        Paket Unggulan
                                    </label>
                                </div>
                            </div>
                        </div>

                        <!-- Upload Gambar -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="fw-bold text-primary mb-3">
                                    <i class="fas fa-image"></i> Gambar Paket
                                </h6>
                            </div>
                            
                            <div class="col-12 mb-3">
                                <label for="gambar_paket" class="form-label">Upload Gambar</label>
                                <input type="file" name="gambar_paket" id="gambar_paket" 
                                       class="form-control @error('gambar_paket') is-invalid @enderror" 
                                       accept="image/*" onchange="previewImage(this)">
                                <div class="form-text">Format: JPG, PNG, GIF. Maksimal 2MB</div>
                                @error('gambar_paket')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                
                                <!-- Preview Image -->
                                <div id="imagePreview" class="mt-3" style="display: none;">
                                    <img id="preview" src="" alt="Preview" class="img-thumbnail" style="max-width: 200px;">
                                </div>
                            </div>
                        </div>

                        <!-- Syarat dan Ketentuan -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="fw-bold text-primary mb-3">
                                    <i class="fas fa-file-contract"></i> Syarat dan Ketentuan
                                </h6>
                            </div>
                            
                            <div class="col-12 mb-3">
                                <label for="syarat_ketentuan" class="form-label">Syarat dan Ketentuan</label>
                                <textarea name="syarat_ketentuan" id="syarat_ketentuan" 
                                          class="form-control @error('syarat_ketentuan') is-invalid @enderror" 
                                          rows="4" placeholder="Masukkan syarat dan ketentuan penggunaan paket">{{ old('syarat_ketentuan') }}</textarea>
                                @error('syarat_ketentuan')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-12 mb-3">
                                <label for="catatan_admin" class="form-label">Catatan Admin</label>
                                <textarea name="catatan_admin" id="catatan_admin" 
                                          class="form-control @error('catatan_admin') is-invalid @enderror" 
                                          rows="3" placeholder="Catatan internal untuk admin">{{ old('catatan_admin') }}</textarea>
                                @error('catatan_admin')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- Submit Buttons -->
                        <div class="d-flex justify-content-end gap-2">
                            <button type="button" class="btn btn-outline-secondary" onclick="resetForm()">
                                <i class="fas fa-undo"></i> Reset
                            </button>
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save"></i> Simpan Paket
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="col-lg-4">
            <!-- Panduan -->
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-white border-bottom">
                    <h6 class="card-title mb-0">
                        <i class="fas fa-info-circle text-info"></i> Panduan
                    </h6>
                </div>
                <div class="card-body">
                    <div class="small">
                        <h6 class="fw-bold">Tips Pengisian:</h6>
                        <ul class="mb-3">
                            <li>Gunakan nama paket yang jelas dan mudah dipahami</li>
                            <li>Kode paket harus unik untuk setiap paket</li>
                            <li>Bandwidth upload biasanya 50% dari download</li>
                            <li>FUP membantu mengatur penggunaan berlebihan</li>
                            <li>Portal login memberikan kontrol akses yang lebih baik</li>
                        </ul>
                        
                        <h6 class="fw-bold">Rekomendasi Harga:</h6>
                        <ul class="mb-0">
                            <li><strong>5 Mbps:</strong> Rp 50.000 - 75.000</li>
                            <li><strong>10 Mbps:</strong> Rp 75.000 - 100.000</li>
                            <li><strong>20 Mbps:</strong> Rp 100.000 - 150.000</li>
                            <li><strong>50 Mbps:</strong> Rp 150.000 - 250.000</li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- Template Paket -->
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-bottom">
                    <h6 class="card-title mb-0">
                        <i class="fas fa-magic text-primary"></i> Template Paket
                    </h6>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <button type="button" class="btn btn-outline-primary btn-sm" onclick="loadTemplate('basic')">
                            <i class="fas fa-wifi"></i> Paket Basic
                        </button>
                        <button type="button" class="btn btn-outline-success btn-sm" onclick="loadTemplate('premium')">
                            <i class="fas fa-star"></i> Paket Premium
                        </button>
                        <button type="button" class="btn btn-outline-warning btn-sm" onclick="loadTemplate('unlimited')">
                            <i class="fas fa-infinity"></i> Paket Unlimited
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
$(document).ready(function() {
    // Toggle FUP fields
    $('#fair_usage_policy').change(function() {
        if ($(this).is(':checked')) {
            $('#fup_threshold_group, #fup_speed_group').show();
        } else {
            $('#fup_threshold_group, #fup_speed_group').hide();
        }
    });

    // Toggle billing price fields
    $('#tipe_billing').change(function() {
        const value = $(this).val();
        $('#harga_harian_group, #harga_mingguan_group').hide();
        
        if (value === 'harian') {
            $('#harga_harian_group').show();
        } else if (value === 'mingguan') {
            $('#harga_mingguan_group').show();
        }
    });

    // Auto generate kode paket from nama paket
    $('#nama_paket').on('input', function() {
        const nama = $(this).val();
        const kode = nama.toUpperCase()
            .replace(/[^A-Z0-9\s]/g, '')
            .replace(/\s+/g, '-')
            .substring(0, 10);
        $('#kode_paket').val(kode);
    });

    // Initialize on page load
    $('#fair_usage_policy').trigger('change');
    $('#tipe_billing').trigger('change');
});

// Preview uploaded image
function previewImage(input) {
    if (input.files && input.files[0]) {
        const reader = new FileReader();
        reader.onload = function(e) {
            document.getElementById('preview').src = e.target.result;
            document.getElementById('imagePreview').style.display = 'block';
        };
        reader.readAsDataURL(input.files[0]);
    }
}

// Reset form
function resetForm() {
    if (confirm('Apakah Anda yakin ingin mereset form?')) {
        document.getElementById('hotspotForm').reset();
        document.getElementById('imagePreview').style.display = 'none';
        $('#fair_usage_policy').trigger('change');
        $('#tipe_billing').trigger('change');
    }
}

// Load template paket
function loadTemplate(type) {
    const templates = {
        basic: {
            nama_paket: 'Hotspot Basic 5 Mbps',
            kode_paket: 'HSP-BASIC-5M',
            deskripsi: 'Paket hotspot basic untuk kebutuhan browsing dan media sosial',
            bandwidth_download: '5 Mbps',
            bandwidth_upload: '2 Mbps',
            kuota_data: 50,
            masa_aktif: 30,
            max_device: 1,
            harga_bulanan: 50000,
            tipe_billing: 'bulanan',
            fair_usage_policy: true,
            fup_threshold: 30,
            fup_speed: '1 Mbps'
        },
        premium: {
            nama_paket: 'Hotspot Premium 20 Mbps',
            kode_paket: 'HSP-PREMIUM-20M',
            deskripsi: 'Paket hotspot premium untuk streaming dan gaming',
            bandwidth_download: '20 Mbps',
            bandwidth_upload: '10 Mbps',
            kuota_data: 200,
            masa_aktif: 30,
            max_device: 3,
            harga_bulanan: 150000,
            tipe_billing: 'bulanan',
            fair_usage_policy: true,
            fup_threshold: 150,
            fup_speed: '5 Mbps'
        },
        unlimited: {
            nama_paket: 'Hotspot Unlimited 50 Mbps',
            kode_paket: 'HSP-UNLIMITED-50M',
            deskripsi: 'Paket hotspot unlimited untuk kebutuhan bisnis',
            bandwidth_download: '50 Mbps',
            bandwidth_upload: '25 Mbps',
            kuota_data: '',
            masa_aktif: 30,
            max_device: 10,
            harga_bulanan: 300000,
            tipe_billing: 'bulanan',
            fair_usage_policy: false
        }
    };

    const template = templates[type];
    if (template) {
        Object.keys(template).forEach(key => {
            const element = document.getElementById(key);
            if (element) {
                if (element.type === 'checkbox') {
                    element.checked = template[key];
                } else {
                    element.value = template[key];
                }
            }
        });

        // Trigger change events
        $('#fair_usage_policy').trigger('change');
        $('#tipe_billing').trigger('change');
        
        showToast(`Template ${type} berhasil dimuat`, 'success');
    }
}

function showToast(message, type = 'info') {
    const toast = document.createElement('div');
    toast.className = `toast align-items-center text-white bg-${type === 'error' ? 'danger' : type} border-0`;
    toast.setAttribute('role', 'alert');
    toast.innerHTML = `
        <div class="d-flex">
            <div class="toast-body">${message}</div>
            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
        </div>
    `;
    
    let container = document.querySelector('.toast-container');
    if (!container) {
        container = document.createElement('div');
        container.className = 'toast-container position-fixed top-0 end-0 p-3';
        document.body.appendChild(container);
    }
    
    container.appendChild(toast);
    const bsToast = new bootstrap.Toast(toast);
    bsToast.show();
    
    toast.addEventListener('hidden.bs.toast', function() {
        toast.remove();
    });
}
</script>
@endpush
@endsection