@extends('layouts.app')

@section('title', 'Tambah Layanan Internet Rumahan')

@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 Layanan Internet Rumahan</h1>
            <p class="text-muted mb-0">Tambah layanan internet PPPoE baru untuk pelanggan</p>
        </div>
        <a href="{{ route('layanan-pppoes.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 Layanan</h5>
                </div>
                <div class="card-body">
                    <form action="{{ route('layanan-pppoes.store') }}" method="POST" enctype="multipart/form-data" id="layananForm">
                        @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="mikrotik_id" class="form-label">Mikrotik <span class="text-danger">*</span></label>
                                <select name="mikrotik_id" id="mikrotik_id" class="form-select @error('mikrotik_id') is-invalid @enderror" required>
                                    <option value="">Pilih Mikrotik</option>
                                    @foreach($mikrotiks as $mikrotik)
                                        <option value="{{ $mikrotik->id }}" {{ old('mikrotik_id') == $mikrotik->id ? 'selected' : '' }}>
                                            {{ $mikrotik->name }} ({{ $mikrotik->host }})
                                        </option>
                                    @endforeach
                                </select>
                                @error('mikrotik_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="pppoe_profile" class="form-label">Profile PPPoE <span class="text-danger">*</span></label>
                                <div class="position-relative">
                                    <select name="pppoe_profile" id="pppoe_profile" class="form-select @error('pppoe_profile') is-invalid @enderror" required>
                                        <option value="">Pilih Mikrotik terlebih dahulu</option>
                                    </select>
                                    <div id="profileLoading" class="position-absolute top-50 end-0 translate-middle-y me-3" style="display: none;">
                                        <div class="spinner-border spinner-border-sm text-primary" role="status">
                                            <span class="visually-hidden">Loading...</span>
                                        </div>
                                    </div>
                                </div>
                                @error('pppoe_profile')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <div class="form-text">
                                    <button type="button" id="refreshProfiles" class="btn btn-sm btn-outline-secondary mt-1" style="display: none;">
                                        <i class="fas fa-sync-alt"></i> Refresh Profiles
                                    </button>
                                </div>
                            </div>

                            <div class="col-md-12 mb-3">
                                <label for="nama_layanan" class="form-label">Nama Layanan <span class="text-danger">*</span></label>
                                <input type="text" name="nama_layanan" id="nama_layanan" class="form-control @error('nama_layanan') is-invalid @enderror" 
                                       value="{{ old('nama_layanan') }}" placeholder="Contoh: Internet Rumahan 10 Mbps" required>
                                @error('nama_layanan')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

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

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

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

                            <div class="col-md-6 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" placeholder="0">
                                <div class="form-text">Urutan tampil di daftar layanan (0 = paling atas)</div>
                                @error('urutan')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- Pengaturan Tampil -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="fw-bold text-primary mb-3">
                                    <i class="fas fa-eye"></i> Pengaturan Tampil
                                </h6>
                            </div>
                            
                            <div class="col-md-4 mb-3">
                                <label for="tampil_register" class="form-label">Tampil di Register <span class="text-danger">*</span></label>
                                <select name="tampil_register" id="tampil_register" class="form-select @error('tampil_register') is-invalid @enderror" required>
                                    <option value="1" {{ old('tampil_register', '1') == '1' ? 'selected' : '' }}>Ya</option>
                                    <option value="0" {{ old('tampil_register') == '0' ? 'selected' : '' }}>Tidak</option>
                                </select>
                                <div class="form-text">Apakah layanan ini ditampilkan di halaman pendaftaran?</div>
                                @error('tampil_register')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </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">
                                <div class="form-check form-switch mt-4 pt-2">
                                    <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">
                                        <strong>Layanan Unggulan</strong>
                                    </label>
                                </div>
                                <div class="form-text">Tandai sebagai layanan unggulan untuk ditampilkan lebih menonjol</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 Layanan
                                </h6>
                            </div>
                            
                            <div class="col-12 mb-3">
                                <label for="gambar_layanan" class="form-label">Upload Gambar</label>
                                <input type="file" name="gambar_layanan" id="gambar_layanan" class="form-control @error('gambar_layanan') is-invalid @enderror" 
                                       accept="image/*" onchange="previewImage(this)">
                                <div class="form-text">Format: JPG, PNG, GIF. Maksimal 2MB. Ukuran optimal: 400x300 pixel</div>
                                @error('gambar_layanan')
                                    <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>

                        <!-- Keterangan -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="fw-bold text-primary mb-3">
                                    <i class="fas fa-file-alt"></i> Keterangan & Syarat
                                </h6>
                            </div>
                            
                            <div class="col-12 mb-3">
                                <label for="keterangan" class="form-label">Keterangan / Syarat & Ketentuan</label>
                                <textarea name="keterangan" id="keterangan" class="form-control @error('keterangan') is-invalid @enderror" 
                                          rows="5" placeholder="Masukkan keterangan layanan, fitur tambahan, atau syarat & ketentuan">{{ old('keterangan') }}</textarea>
                                @error('keterangan')
                                    <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 Layanan
                            </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">Langkah Pengisian:</h6>
                        <ol class="mb-3">
                            <li>Pilih Mikrotik yang aktif</li>
                            <li>Pilih Profile PPPoE dari Mikrotik</li>
                            <li>Isi nama layanan yang menarik</li>
                            <li>Tentukan kecepatan download/upload</li>
                            <li>Set harga per bulan</li>
                            <li>Konfigurasi pengaturan tampil</li>
                        </ol>
                        
                        <h6 class="fw-bold">Tips:</h6>
                        <ul class="mb-0">
                            <li>Gunakan nama yang mudah dipahami pelanggan</li>
                            <li>Upload gambar menarik untuk promosi</li>
                            <li>Jelaskan fitur unggulan di keterangan</li>
                            <li>Set urutan sesuai prioritas tampil</li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- Info Profile PPPoE -->
            <div class="card border-0 shadow-sm mb-4" id="profileInfo" style="display: none;">
                <div class="card-header bg-white border-bottom">
                    <h6 class="card-title mb-0">
                        <i class="fas fa-router text-primary"></i> Info Profile PPPoE
                    </h6>
                </div>
                <div class="card-body">
                    <div id="profileDetails" class="small"></div>
                </div>
            </div>

            <!-- Referensi Harga -->
            <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-tags text-success"></i> Referensi Harga
                    </h6>
                </div>
                <div class="card-body">
                    <div class="small">
                        <div class="d-flex justify-content-between mb-2">
                            <span>5 Mbps:</span>
                            <span class="fw-bold">Rp 100.000</span>
                        </div>
                        <div class="d-flex justify-content-between mb-2">
                            <span>10 Mbps:</span>
                            <span class="fw-bold">Rp 150.000</span>
                        </div>
                        <div class="d-flex justify-content-between mb-2">
                            <span>20 Mbps:</span>
                            <span class="fw-bold">Rp 200.000</span>
                        </div>
                        <div class="d-flex justify-content-between mb-2">
                            <span>50 Mbps:</span>
                            <span class="fw-bold">Rp 350.000</span>
                        </div>
                        <div class="d-flex justify-content-between">
                            <span>100 Mbps:</span>
                            <span class="fw-bold">Rp 500.000</span>
                        </div>
                        <hr class="my-2">
                        <p class="mb-0 text-muted">*Harga dapat disesuaikan dengan kondisi pasar lokal</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// Toast notification function
function showToast(message, type = 'info') {
    // Create toast element
    const toast = document.createElement('div');
    toast.className = `toast align-items-center text-white bg-${type === 'error' ? 'danger' : (type === 'success' ? 'success' : (type === 'warning' ? 'warning' : 'info'))} 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>
    `;
    
    // Add to toast container
    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);
    
    // Initialize Bootstrap toast
    if (typeof bootstrap !== 'undefined' && bootstrap.Toast) {
        const bsToast = new bootstrap.Toast(toast);
        bsToast.show();
    } else {
        // Fallback if Bootstrap is not available
        toast.style.display = 'block';
        setTimeout(() => {
            toast.remove();
        }, 5000);
    }
    
    // Remove toast after it's hidden
    toast.addEventListener('hidden.bs.toast', function() {
        toast.remove();
    });
}

$(document).ready(function() {
    // Setup CSRF token for AJAX requests
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
            'X-Requested-With': 'XMLHttpRequest'
        }
    });

    console.log('Layanan PPPoE Create Page Loaded');
    console.log('CSRF Token:', $('meta[name="csrf-token"]').attr('content'));

    // Refresh profiles function
    function loadProfiles(mikrotikId, refresh = false) {
        var profileSelect = $('#pppoe_profile');
        var profileInfo = $('#profileInfo');
        
        console.log('Loading profiles for Mikrotik:', mikrotikId, 'Refresh:', refresh);
        
        // Clear and disable profile select
        profileSelect.html('<option value="">Loading...</option>').prop('disabled', true);
        profileInfo.hide();
        $('#profileLoading').show();
        $('#refreshProfiles').hide();
        
        // Clear speed fields
        $('#kecepatan_download').val('');
        $('#kecepatan_upload').val('');
        
        var requestData = { mikrotik_id: mikrotikId };
        if (refresh) requestData.refresh = 1;
        
        $.ajax({
            url: '{{ route("api.layanan-pppoes.pppoe-profiles") }}',
            type: 'GET',
            data: requestData,
            dataType: 'json',
            timeout: 30000,
            beforeSend: function(xhr) {
                console.log('Sending AJAX request...');
            },
            success: function(data) {
                console.log('AJAX Success:', data);
                
                if (data.error) {
                    console.error('API Error:', data.error);
                    profileSelect.html('<option value="">Error: ' + data.error + '</option>');
                    showToast(data.error, 'error');
                    return;
                }
                
                var options = '<option value="">Pilih Profile PPPoE</option>';
                
                if (Array.isArray(data) && data.length > 0) {
                    data.forEach(function(profile) {
                        var rateLimit = profile.rate_limit || '';
                        var displayText = profile.name;
                        
                        if (rateLimit) {
                            displayText += ' (' + rateLimit + ')';
                        }
                        
                        options += '<option value="' + profile.name + '" ' +
                                  'data-rate="' + rateLimit + '" ' +
                                  'data-local="' + (profile.local_address || '') + '" ' +
                                  'data-remote="' + (profile.remote_address || '') + '">' + 
                                  displayText + '</option>';
                    });
                    showToast((refresh ? 'Refreshed: ' : 'Loaded: ') + data.length + ' PPPoE profiles', 'success');
                } else {
                    options += '<option value="">Tidak ada profile ditemukan</option>';
                    showToast('Tidak ada profile PPPoE ditemukan', 'warning');
                }
                
                profileSelect.html(options).prop('disabled', false);
                $('#profileLoading').hide();
                $('#refreshProfiles').show();
            },
            error: function(xhr, status, error) {
                var errorMessage = 'Gagal memuat profile PPPoE';
                
                if (xhr.status === 503) {
                    try {
                        var response = JSON.parse(xhr.responseText);
                        errorMessage = response.error + (response.details ? '\n' + response.details : '');
                    } catch (e) {
                        errorMessage = 'Mikrotik tidak dapat diakses';
                    }
                } else if (xhr.status === 500) {
                    try {
                        var response = JSON.parse(xhr.responseText);
                        errorMessage = response.error || 'Server error';
                    } catch (e) {
                        errorMessage = 'Server error: ' + error;
                    }
                } else if (status === 'timeout') {
                    errorMessage = 'Request timeout. Koneksi ke Mikrotik lambat.';
                }
                
                profileSelect.html('<option value="">Error loading profiles</option>');
                showToast(errorMessage, 'error');
                $('#profileLoading').hide();
                $('#refreshProfiles').show();
            }
        });
    }
    
    // Load PPPoE profiles when Mikrotik is selected
    $('#mikrotik_id').change(function() {
        var mikrotikId = $(this).val();
        if (mikrotikId) {
            loadProfiles(mikrotikId);
        } else {
            $('#pppoe_profile').html('<option value="">Pilih Mikrotik terlebih dahulu</option>').prop('disabled', true);
            $('#refreshProfiles').hide();
        }
    });
    
    // Refresh profiles button
    $('#refreshProfiles').click(function() {
        var mikrotikId = $('#mikrotik_id').val();
        if (mikrotikId) {
            loadProfiles(mikrotikId, true);
        }
    });


    // Show profile details when profile is selected
    $('#pppoe_profile').change(function() {
        var selectedOption = $(this).find('option:selected');
        var profileName = selectedOption.val();
        var rateLimit = selectedOption.data('rate');
        var localAddress = selectedOption.data('local');
        var remoteAddress = selectedOption.data('remote');
        var profileInfo = $('#profileInfo');
        var profileDetails = $('#profileDetails');
        
        console.log('Profile selected:', profileName, rateLimit);
        
        if (profileName && profileName !== '') {
            var details = '<div class="mb-2"><strong>Profile:</strong> ' + profileName + '</div>';
            
            if (rateLimit && rateLimit !== '') {
                details += '<div class="mb-2"><strong>Rate Limit:</strong> ' + rateLimit + '</div>';
                
                // Auto-fill speed based on rate limit
                if (rateLimit.includes('/')) {
                    var speeds = rateLimit.split('/');
                    if (speeds.length >= 2) {
                        var upload = speeds[0].trim();
                        var download = speeds[1].trim();
                        $('#kecepatan_upload').val(upload);
                        $('#kecepatan_download').val(download);
                        console.log('Auto-filled speeds:', upload, download);
                    }
                }
            }
            
            if (localAddress && localAddress !== '') {
                details += '<div class="mb-2"><strong>Local Address:</strong> ' + localAddress + '</div>';
            }
            
            if (remoteAddress && remoteAddress !== '') {
                details += '<div class="mb-2"><strong>Remote Address:</strong> ' + remoteAddress + '</div>';
            }
            
            profileDetails.html(details);
            profileInfo.show();
        } else {
            profileInfo.hide();
        }
    });
    
    // Test API endpoint availability on page load (disabled to prevent 500 errors)
    // setTimeout(function() {
    //     console.log('Testing API endpoint availability...');
    //     
    //     $.ajax({
    //         url: '{{ route("api.layanan-pppoes.pppoe-profiles") }}',
    //         type: 'GET',
    //         data: { mikrotik_id: 'test' },
    //         timeout: 5000,
    //         success: function(data) {
    //             console.log('API endpoint is accessible');
    //         },
    //         error: function(xhr, status, error) {
    //             console.log('API endpoint test result:');
    //             console.log('Status:', xhr.status);
    //             if (xhr.status === 422) {
    //                 console.log('✓ API endpoint is accessible (validation error expected for test data)');
    //             } else if (xhr.status === 401) {
    //                 console.log('⚠️ Authentication required - make sure you are logged in');
    //             } else {
    //                 console.log('✗ API endpoint issue:', error);
    //             }
    //         }
    //     });
    // }, 1000);
});

// 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('layananForm').reset();
        document.getElementById('imagePreview').style.display = 'none';
        document.getElementById('profileInfo').style.display = 'none';
        document.getElementById('pppoe_profile').innerHTML = '<option value="">Pilih Mikrotik terlebih dahulu</option>';
        document.getElementById('pppoe_profile').disabled = true;
    }
}


</script>
@endpush
@endsection