@extends('layout.app')

@section('title', 'Tambah Pelanggan - Sistem Manajemen ISP')

@section('content')
<x-material-page-header 
    title="Tambah Pelanggan" 
    :action="route('pelanggan.index')" 
    actionLabel="Kembali" 
    actionIcon="arrow_back"
/>

<div class="container-fluid py-4">
    <div class="row">
        <div class="col-12">
            <div class="card mb-4" style="border: none; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);">
                <div class="card-header pb-3">
                    <h6 class="mb-0 font-weight-bold d-flex align-items-center" style="font-size: 0.875rem; color: #344767;">
                        <i class="material-symbols-rounded me-2" style="font-size: 20px; line-height: 1; color: #5e72e4;">person_add</i> Form Tambah Pelanggan (3 Step)
                    </h6>
                </div>

                <div class="card-body pt-3">
                    <!-- Step Indicator -->
                    <div class="step-indicator mb-4">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="step-item active" data-step="1">
                                    <div class="step-number">1</div>
                                    <div class="step-title">Data Pelanggan</div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="step-item" data-step="2">
                                    <div class="step-number">2</div>
                                    <div class="step-title">Data Jaringan</div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="step-item" data-step="3">
                                    <div class="step-number">3</div>
                                    <div class="step-title">Infrastruktur</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <style>
                        .step-indicator {
                            padding: 20px 0;
                        }
                        .step-item {
                            text-align: center;
                            padding: 15px;
                            border-radius: 8px;
                            transition: all 0.3s;
                            cursor: pointer;
                            opacity: 0.5;
                        }
                        .step-item.active {
                            opacity: 1;
                            background: #f8f9fa;
                            border: 2px solid #1976d2;
                        }
                        .step-item.completed {
                            opacity: 1;
                            background: #d4edda;
                            border: 2px solid #43a047;
                        }
                        .step-number {
                            width: 40px;
                            height: 40px;
                            border-radius: 50%;
                            background: #e9ecef;
                            color: #6c757d;
                            display: inline-flex;
                            align-items: center;
                            justify-content: center;
                            font-weight: bold;
                            margin-bottom: 10px;
                            transition: all 0.3s;
                        }
                        .step-item.active .step-number {
                            background: #1976d2;
                            color: white;
                        }
                        .step-item.completed .step-number {
                            background: #43a047;
                            color: white;
                        }
                        .step-title {
                            font-weight: 600;
                            color: #32325d;
                        }
                        .step-content {
                            display: none;
                        }
                        .step-content.active {
                            display: block;
                        }
                    </style>
                    @if(session('error'))
                    <div class="alert alert-danger alert-dismissible fade show text-white" role="alert">
                        <span class="alert-icon"><i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">error</i></span>
                        <span class="alert-text"><strong>Error:</strong> {{ session('error') }}</span>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                    @endif
                    
                    @if($errors->any())
                    <div class="alert alert-danger alert-dismissible fade show text-white" role="alert">
                        <span class="alert-icon"><i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">error</i></span>
                        <span class="alert-text">
                            <strong>Terjadi kesalahan:</strong>
                            <ul class="mb-0 mt-2">
                                @foreach($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </span>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                    @endif
                    
                    <div class="alert alert-info text-white">
                        <i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">info</i>
                        <strong>Informasi:</strong> Nomor pelanggan akan otomatis digenerate setelah data disimpan.
                    </div>
                    
                <form method="POST" action="{{ route('pelanggan.store') }}" enctype="multipart/form-data" id="pelangganForm">
                    @csrf
                    
                    <!-- STEP 1: DATA PELANGGAN -->
                    <div class="step-content active" id="step1">
                        <h6 class="mb-4"><i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">person</i> Step 1: Data Pelanggan</h6>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="input-group input-group-outline mb-3">
                                <label class="form-label">Nama Lengkap <span class="text-danger">*</span></label>
                                <input type="text" class="form-control @error('nama') is-invalid @enderror" 
                                       id="nama" name="nama" value="{{ old('nama') }}" required>
                                @error('nama')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="input-group input-group-outline mb-3">
                                <label class="form-label">Nomor Telepon (WhatsApp) <span class="text-danger">*</span></label>
                                <input type="text" class="form-control @error('nomor_telepon') is-invalid @enderror" 
                                       id="nomor_telepon" name="nomor_telepon" value="{{ old('nomor_telepon') }}" required>
                                <div id="nomor_telepon_feedback" class="invalid-feedback d-none"></div>
                                <small id="nomor_telepon_help" class="form-text text-muted d-none"></small>
                                @error('nomor_telepon')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="input-group input-group-outline mb-3">
                                <label class="form-label">Email</label>
                                <input type="email" class="form-control @error('email') is-invalid @enderror" 
                                       id="email" name="email" value="{{ old('email') }}">
                                <div id="email_feedback" class="invalid-feedback d-none"></div>
                                <small id="email_help" class="form-text text-muted d-none"></small>
                                @error('email')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="input-group input-group-outline mb-3">
                                <label class="form-label">Tipe Pelanggan <span class="text-danger">*</span></label>
                                <select class="form-control @error('tipe_pelanggan') is-invalid @enderror" 
                                        id="tipe_pelanggan" name="tipe_pelanggan" required>
                                    <option value="">Pilih Tipe Pelanggan</option>
                                    <option value="Rumahan" {{ old('tipe_pelanggan') == 'Rumahan' ? 'selected' : '' }}>Rumahan</option>
                                    <option value="Kantor" {{ old('tipe_pelanggan') == 'Kantor' ? 'selected' : '' }}>Kantor</option>
                                    <option value="RT" {{ old('tipe_pelanggan') == 'RT' ? 'selected' : '' }}>RT</option>
                                    <option value="Reseller" {{ old('tipe_pelanggan') == 'Reseller' ? 'selected' : '' }}>Reseller</option>
                                </select>
                                @error('tipe_pelanggan')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    
                    <div class="input-group input-group-outline mb-3">
                        <label class="form-label">Alamat <span class="text-danger">*</span></label>
                        <textarea class="form-control @error('alamat') is-invalid @enderror" 
                                  id="alamat" name="alamat" rows="3" required>{{ old('alamat') }}</textarea>
                        @error('alamat')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="row">
                        <div class="col-md-4">
                            <div class="input-group input-group-outline mb-3">
                                <label class="form-label">Area <span class="text-danger">*</span></label>
                                <select class="form-control @error('area_id') is-invalid @enderror" 
                                        id="area_id" name="area_id" required>
                                    <option value="">Pilih Area</option>
                                    @foreach($areas as $area)
                                    <option value="{{ $area->id }}" {{ old('area_id') == $area->id ? 'selected' : '' }}>
                                        {{ $area->full_address }}
                                    </option>
                                    @endforeach
                                </select>
                                @error('area_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="input-group input-group-outline mb-3">
                                <label class="form-label">RT</label>
                                <input type="text" class="form-control @error('rt') is-invalid @enderror" 
                                       id="rt" name="rt" value="{{ old('rt') }}">
                                @error('rt')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="input-group input-group-outline mb-3">
                                <label class="form-label">RW</label>
                                <input type="text" class="form-control @error('rw') is-invalid @enderror" 
                                       id="rw" name="rw" value="{{ old('rw') }}">
                                @error('rw')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="input-group input-group-outline mb-3">
                                <label class="form-label">Paket Internet <span class="text-danger">*</span></label>
                                <select class="form-control @error('paket_id') is-invalid @enderror" 
                                        id="paket_id" name="paket_id" required>
                                    <option value="">Pilih Paket</option>
                                    @foreach($paket as $p)
                                    <option value="{{ $p->id }}" {{ old('paket_id') == $p->id ? 'selected' : '' }}>
                                        {{ $p->nama_paket }} - {{ $p->formatted_price }}
                                    </option>
                                    @endforeach
                                </select>
                                @error('paket_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="input-group input-group-outline mb-3">
                                <label class="form-label">Status Layanan <span class="text-danger">*</span></label>
                                <select class="form-control @error('status_layanan') is-invalid @enderror" 
                                        id="status_layanan" name="status_layanan" required>
                                    <option value="">Pilih Status</option>
                                    <option value="Pelanggan Baru" {{ old('status_layanan', 'Pelanggan Baru') == 'Pelanggan Baru' ? 'selected' : '' }}>Pelanggan Baru</option>
                                    <option value="Aktif" {{ old('status_layanan') == 'Aktif' ? 'selected' : '' }}>Aktif</option>
                                    <option value="Suspend" {{ old('status_layanan') == 'Suspend' ? 'selected' : '' }}>Suspend</option>
                                    <option value="Berhenti" {{ old('status_layanan') == 'Berhenti' ? 'selected' : '' }}>Berhenti</option>
                                    <option value="Nonaktif" {{ old('status_layanan') == 'Nonaktif' ? 'selected' : '' }}>Nonaktif</option>
                                </select>
                                @error('status_layanan')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-4">
                            <div class="input-group input-group-outline mb-3">
                                <label class="form-label">Tanggal Registrasi <span class="text-danger">*</span></label>
                                <input type="date" class="form-control @error('tanggal_registrasi') is-invalid @enderror" 
                                       id="tanggal_registrasi" name="tanggal_registrasi" value="{{ old('tanggal_registrasi', date('Y-m-d')) }}" required>
                                @error('tanggal_registrasi')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="input-group input-group-outline mb-3">
                                <label class="form-label">Tanggal Aktif <span class="text-danger">*</span></label>
                                <input type="date" class="form-control @error('tanggal_aktif') is-invalid @enderror" 
                                       id="tanggal_aktif" name="tanggal_aktif" value="{{ old('tanggal_aktif') }}" required>
                                @error('tanggal_aktif')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                                <small class="text-muted">Tanggal mulai aktif layanan</small>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="input-group input-group-outline mb-3">
                                <label class="form-label">Tanggal Tagihan</label>
                                <input type="date" class="form-control @error('tanggal_tagihan') is-invalid @enderror" 
                                       id="tanggal_tagihan" name="tanggal_tagihan" value="{{ old('tanggal_tagihan') }}">
                                @error('tanggal_tagihan')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                                <small class="text-muted">Tanggal generate tagihan</small>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="tanggal_isolir_otomatis" class="form-label">Tanggal Isolir Otomatis</label>
                                <input type="date" class="form-control @error('tanggal_isolir_otomatis') is-invalid @enderror" 
                                       id="tanggal_isolir_otomatis" name="tanggal_isolir_otomatis" value="{{ old('tanggal_isolir_otomatis') }}">
                                @error('tanggal_isolir_otomatis')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="text-muted">Jika telat bayar, akan diisolir pada tanggal ini</small>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label class="form-label">Perkiraan Periode Berlangganan</label>
                                <input type="text" class="form-control" 
                                       id="periode_preview" 
                                       value="-" 
                                       readonly 
                                       style="background-color: #f8f9fa;">
                                <small class="text-muted">Akan dihitung otomatis dari tanggal aktif</small>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group mb-3">
                                <label for="biaya_tambahan_1" class="form-label">Biaya Tambahan 1</label>
                                <input type="number" step="0.01" class="form-control @error('biaya_tambahan_1') is-invalid @enderror" 
                                       id="biaya_tambahan_1" name="biaya_tambahan_1" value="{{ old('biaya_tambahan_1', 0) }}" min="0">
                                <input type="text" class="form-control mt-2" 
                                       id="keterangan_biaya_tambahan_1" name="keterangan_biaya_tambahan_1" 
                                       value="{{ old('keterangan_biaya_tambahan_1') }}" 
                                       placeholder="Keterangan biaya tambahan 1">
                                @error('biaya_tambahan_1')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group mb-3">
                                <label for="biaya_tambahan_2" class="form-label">Biaya Tambahan 2</label>
                                <input type="number" step="0.01" class="form-control @error('biaya_tambahan_2') is-invalid @enderror" 
                                       id="biaya_tambahan_2" name="biaya_tambahan_2" value="{{ old('biaya_tambahan_2', 0) }}" min="0">
                                <input type="text" class="form-control mt-2" 
                                       id="keterangan_biaya_tambahan_2" name="keterangan_biaya_tambahan_2" 
                                       value="{{ old('keterangan_biaya_tambahan_2') }}" 
                                       placeholder="Keterangan biaya tambahan 2">
                                @error('biaya_tambahan_2')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group mb-3">
                                <label for="diskon" class="form-label">Diskon</label>
                                <input type="number" step="0.01" class="form-control @error('diskon') is-invalid @enderror" 
                                       id="diskon" name="diskon" value="{{ old('diskon', 0) }}" min="0">
                                @error('diskon')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group mb-3">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="prorata_enabled" name="prorata_enabled" value="1" {{ old('prorata_enabled') ? 'checked' : '' }}>
                                    <label class="form-check-label" for="prorata_enabled">
                                        <strong>Prorata</strong> - Hitung prorata jika pasang di tengah bulan
                                    </label>
                                </div>
                                <small class="text-muted">Jika diaktifkan, tagihan akan dihitung prorata berdasarkan tanggal aktif</small>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="latitude" class="form-label">Latitude</label>
                                <div class="input-group">
                                    <input type="number" step="any" class="form-control @error('latitude') is-invalid @enderror" 
                                           id="latitude" name="latitude" value="{{ old('latitude') }}" readonly>
                                    <div class="input-group-append">
                                        <button type="button" class="btn bg-gradient-primary mb-0" id="getLocationBtn">
                                            <i class="material-symbols-rounded me-1" style="font-size: 18px; vertical-align: middle;">my_location</i> Ambil dari GPS
                                        </button>
                                    </div>
                                </div>
                                <small class="text-muted">Klik tombol untuk mendapatkan koordinat GPS otomatis</small>
                                @error('latitude')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="longitude" class="form-label">Longitude</label>
                                <input type="number" step="any" class="form-control @error('longitude') is-invalid @enderror" 
                                       id="longitude" name="longitude" value="{{ old('longitude') }}" readonly>
                                @error('longitude')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    
                    <!-- Step 1 Navigation -->
                    <div class="row mt-4">
                        <div class="col-12 text-end">
                            <button type="button" class="btn bg-gradient-primary mb-0" onclick="nextStep(2)">
                                Lanjut ke Step 2 <i class="material-symbols-rounded ms-1" style="font-size: 18px; vertical-align: middle;">arrow_forward</i>
                            </button>
                        </div>
                    </div>
                    </div>
                    <!-- END STEP 1 -->
                    
                    <!-- STEP 2: DATA JARINGAN (PPPoE/Mikrotik) -->
                    <div class="step-content" id="step2">
                        <h6 class="mb-4"><i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">router</i> Step 2: Data Jaringan (PPPoE/Mikrotik)</h6>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="mikrotik_id" class="form-label">Pilih Mikrotik <span class="text-danger">*</span></label>
                                    <select class="form-control @error('mikrotik_id') is-invalid @enderror" 
                                            id="mikrotik_id" name="mikrotik_id" required>
                                        <option value="">Pilih Mikrotik</option>
                                        @foreach($mikrotikConfigs ?? [] as $mikrotik)
                                        <option value="{{ $mikrotik->id }}" {{ old('mikrotik_id') == $mikrotik->id ? 'selected' : '' }}>
                                            {{ $mikrotik->nama }} ({{ $mikrotik->ip_address }})
                                        </option>
                                        @endforeach
                                    </select>
                                    @error('mikrotik_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    
                    <!-- PPPoE Section -->
                    <div class="card mb-4">
                        <div class="card-header pb-0 pt-3">
                            <h6 class="mb-0">
                                <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">image</i>Upload Foto
                            </h6>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group mb-3">
                                        <label for="foto" class="form-label">Foto Pelanggan</label>
                                        <input type="file" class="form-control @error('foto') is-invalid @enderror" 
                                               id="foto" name="foto" accept="image/*">
                                        <label class="form-label" for="foto">Pilih foto pelanggan...</label>
                                        <small class="text-muted">Format: JPG, PNG, JPEG (Max: 5MB)</small>
                                        <div id="fotoPreview" class="mt-3" style="display: none;">
                                            <img id="previewFoto" src="" alt="Preview" class="img-thumbnail" style="max-width: 300px; max-height: 300px;">
                                        </div>
                                        @error('foto')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group mb-3">
                                        <label for="foto_ktp" class="form-label">Foto KTP</label>
                                        <input type="file" class="form-control @error('foto_ktp') is-invalid @enderror" 
                                               id="foto_ktp" name="foto_ktp" accept="image/*">
                                        <label class="form-label" for="foto_ktp">Pilih foto KTP...</label>
                                        <small class="text-muted">Format: JPG, PNG, JPEG (Max: 5MB)</small>
                                        <div id="fotoKtpPreview" class="mt-3" style="display: none;">
                                            <img id="previewFotoKtp" src="" alt="Preview" class="img-thumbnail" style="max-width: 300px; max-height: 300px;">
                                        </div>
                                        @error('foto_ktp')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group mb-3">
                                        <label for="foto_rumah" class="form-label">Foto Rumah Depan</label>
                                        <input type="file" class="form-control @error('foto_rumah') is-invalid @enderror" 
                                               id="foto_rumah" name="foto_rumah" accept="image/*">
                                        <label class="form-label" for="foto_rumah">Pilih foto rumah...</label>
                                        <small class="text-muted">Format: JPG, PNG, JPEG (Max: 5MB)</small>
                                        <div id="fotoRumahPreview" class="mt-3" style="display: none;">
                                            <img id="previewFotoRumah" src="" alt="Preview" class="img-thumbnail" style="max-width: 300px; max-height: 300px;">
                                        </div>
                                        @error('foto_rumah')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group mb-3">
                                        <label for="foto_instalasi" class="form-label">Foto Instalasi</label>
                                        <input type="file" class="form-control @error('foto_instalasi') is-invalid @enderror" 
                                               id="foto_instalasi" name="foto_instalasi" accept="image/*">
                                        <label class="form-label" for="foto_instalasi">Pilih foto instalasi...</label>
                                        <small class="text-muted">Format: JPG, PNG, JPEG (Max: 5MB)</small>
                                        <div id="fotoInstalasiPreview" class="mt-3" style="display: none;">
                                            <img id="previewFotoInstalasi" src="" alt="Preview" class="img-thumbnail" style="max-width: 300px; max-height: 300px;">
                                        </div>
                                        @error('foto_instalasi')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    @if(config('librenms.enabled'))
                    <div class="form-group mb-3">
                        <label for="librenms_port_id" class="form-label">LibreNMS Port ID</label>
                        <input type="number" 
                               class="form-control @error('librenms_port_id') is-invalid @enderror" 
                               id="librenms_port_id" 
                               name="librenms_port_id" 
                               value="{{ old('librenms_port_id') }}" 
                               placeholder="ID port di LibreNMS">
                        <small class="text-muted">Opsional: ID port di LibreNMS untuk monitoring bandwidth</small>
                        @error('librenms_port_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    @endif
                    
                    <!-- PPPoE Section -->
                    <div class="card mb-4">
                        <div class="card-header pb-0 pt-3">
                            <h6 class="mb-0">
                                <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">router</i>Akun PPPoE
                            </h6>
                        </div>
                        <div class="card-body">
                            <div class="form-group mb-3">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="create_pppoe" name="create_pppoe" value="1" {{ old('create_pppoe') ? 'checked' : '' }}>
                                    <label class="form-check-label" for="create_pppoe">
                                        <strong>Buat akun PPPoE di MikroTik</strong>
                                    </label>
                                </div>
                                <small class="text-muted">Centang untuk membuat akun PPPoE langsung saat pelanggan dibuat</small>
                            </div>
                            
                            @php
                                $pppoeProfileDetails = $pppoeProfileDetails ?? [];
                                $pppoeDefaultLocalAddress = $pppoeDefaultLocalAddress ?? null;
                                $oldProfileValue = old('profile_pppoe');
                                $initialProfileLocalAddress = $pppoeDefaultLocalAddress;
                                if ($oldProfileValue && isset($pppoeProfileDetails[$oldProfileValue]['local_address'])) {
                                    $initialProfileLocalAddress = $pppoeProfileDetails[$oldProfileValue]['local_address'];
                                }
                            @endphp
                            <div id="pppoeFields" style="display: none;">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group mb-3">
                                            <label for="username_pppoe" class="form-label">Username PPPoE <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control @error('username_pppoe') is-invalid @enderror" 
                                                   id="username_pppoe" name="username_pppoe" value="{{ old('username_pppoe') }}" 
                                                   placeholder="Masukkan username PPPoE">
                                            @error('username_pppoe')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                            <small class="text-muted">Username untuk login PPPoE</small>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group mb-3">
                                            <label for="password_pppoe" class="form-label">Password PPPoE <span class="text-danger">*</span></label>
                                            <input type="password" class="form-control @error('password_pppoe') is-invalid @enderror" 
                                                   id="password_pppoe" name="password_pppoe" 
                                                   placeholder="Minimal 6 karakter">
                                            @error('password_pppoe')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                            <small class="text-muted">Password minimal 6 karakter</small>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group mb-3">
                                            <label for="remote_address_pppoe" class="form-label">Remote Address PPPoE <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control @error('remote_address_pppoe') is-invalid @enderror"
                                                   id="remote_address_pppoe" name="remote_address_pppoe"
                                                   value="{{ old('remote_address_pppoe') }}"
                                                   placeholder="Contoh: 10.10.10.10 atau nama IP pool">
                                            @error('remote_address_pppoe')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                            <small class="text-muted">Nilai ini akan dikirim ke field <code>remote-address</code> di MikroTik.</small>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group mb-3">
                                            <label for="profile_local_address_display" class="form-label">Local Address PPPoE</label>
                                            <input type="text"
                                                   class="form-control"
                                                   id="profile_local_address_display"
                                                   value="{{ old('local_address_pppoe', $initialProfileLocalAddress) ?? '' }}"
                                                   placeholder="Pilih profile PPPoE untuk melihat local address"
                                                   readonly>
                                            <input type="hidden"
                                                   id="local_address_pppoe"
                                                   name="local_address_pppoe"
                                                   value="{{ old('local_address_pppoe', $initialProfileLocalAddress) ?? '' }}">
                                            <small class="text-muted">Ditampilkan otomatis berdasarkan profile PPPoE yang dipilih.</small>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group mb-3">
                                            <label for="profile_pppoe" class="form-label">Profile PPPoE <span class="text-danger">*</span></label>
                                            @if(!empty($pppoeProfiles) && count($pppoeProfiles) > 0)
                                                <select class="form-control @error('profile_pppoe') is-invalid @enderror" 
                                                        id="profile_pppoe" name="profile_pppoe" required>
                                                    <option value="">Pilih Profile</option>
                                                    @foreach($pppoeProfiles as $profile)
                                                        <option value="{{ $profile }}" {{ old('profile_pppoe', 'default') == $profile ? 'selected' : '' }}>
                                                            {{ $profile }}
                                                        </option>
                                                    @endforeach
                                                    <option value="__custom__">-- Masukkan Manual --</option>
                                                </select>
                                                <input type="text" class="form-control mt-2 @error('profile_pppoe') is-invalid @enderror" 
                                                       id="profile_pppoe_custom" name="profile_pppoe_custom" 
                                                       value="{{ old('profile_pppoe_custom') }}" 
                                                       placeholder="Masukkan nama profile manual" 
                                                       style="display: none;">
                                            @else
                                                <input type="text" class="form-control @error('profile_pppoe') is-invalid @enderror" 
                                                       id="profile_pppoe" name="profile_pppoe" value="{{ old('profile_pppoe', 'default') }}" 
                                                       placeholder="default" required>
                                            @endif
                                            @error('profile_pppoe')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                            @if($mikrotikError)
                                                <small class="text-warning">Tidak dapat memuat profile dari MikroTik: {{ $mikrotikError }}</small>
                                            @elseif(!empty($pppoeProfiles) && count($pppoeProfiles) > 0)
                                                <small class="text-muted">Pilih profile yang ada di MikroTik atau pilih "Masukkan Manual" untuk profile baru. Profile akan dibuat otomatis jika belum ada.</small>
                                            @else
                                                <small class="text-muted">Masukkan nama profile. Profile akan dibuat otomatis di MikroTik jika belum ada (contoh: default)</small>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group mb-3">
                                            <label for="comment_pppoe" class="form-label">Comment PPPoE</label>
                                            <input type="text" class="form-control @error('comment_pppoe') is-invalid @enderror" 
                                                   id="comment_pppoe" name="comment_pppoe" value="{{ old('comment_pppoe') }}" 
                                                   placeholder="Komentar opsional">
                                            @error('comment_pppoe')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                            <small class="text-muted">Komentar untuk user PPPoE (opsional)</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Step 2 Navigation -->
                    <div class="row mt-4">
                        <div class="col-12">
                            <button type="button" class="btn bg-gradient-secondary mb-0" onclick="prevStep(1)">
                                <i class="material-symbols-rounded me-1" style="font-size: 18px; vertical-align: middle;">arrow_back</i> Kembali ke Step 1
                            </button>
                            <button type="button" class="btn bg-gradient-primary mb-0 float-end" onclick="nextStep(3)">
                                Lanjut ke Step 3 <i class="material-symbols-rounded ms-1" style="font-size: 18px; vertical-align: middle;">arrow_forward</i>
                            </button>
                        </div>
                    </div>
                    </div>
                    <!-- END STEP 2 -->
                    
                    <!-- STEP 3: INFRASTRUKTUR PELANGGAN -->
                    <div class="step-content" id="step3">
                        <h6 class="mb-4"><i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">business</i> Step 3: Infrastruktur Pelanggan</h6>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="odp_id" class="form-label">Pilih ODP <span class="text-danger">*</span></label>
                                    <select class="form-control @error('odp_id') is-invalid @enderror" 
                                            id="odp_id" name="odp_id" required>
                                        <option value="">Pilih ODP</option>
                                        @foreach($odpList ?? [] as $odp)
                                        <option value="{{ $odp->id }}" data-ports="{{ $odp->jumlah_port ?? 0 }}" {{ old('odp_id') == $odp->id ? 'selected' : '' }}>
                                            {{ $odp->nama }} - {{ $odp->keterangan ?? '' }}
                                        </option>
                                        @endforeach
                                    </select>
                                    @error('odp_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="text-muted">Pilih ODP yang akan digunakan</small>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="odp_port" class="form-label">Port ODP <span class="text-danger">*</span></label>
                                    <select class="form-control @error('odp_port') is-invalid @enderror" 
                                            id="odp_port" name="odp_port" required>
                                        <option value="">Pilih Port</option>
                                    </select>
                                    @error('odp_port')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="text-muted">Port yang tersedia akan muncul setelah memilih ODP</small>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="modem_onu" class="form-label">Modem / ONU</label>
                                    <input type="text" class="form-control @error('modem_onu') is-invalid @enderror" 
                                           id="modem_onu" name="modem_onu" value="{{ old('modem_onu') }}" 
                                           placeholder="Contoh: ZTE F660, Huawei HG8245H">
                                    @error('modem_onu')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="kabel_dropcore" class="form-label">Kabel Dropcore</label>
                                    <input type="text" class="form-control @error('kabel_dropcore') is-invalid @enderror" 
                                           id="kabel_dropcore" name="kabel_dropcore" value="{{ old('kabel_dropcore') }}" 
                                           placeholder="Contoh: 50m, 100m">
                                    @error('kabel_dropcore')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="latitude" class="form-label">Koordinat Pelanggan (Latitude)</label>
                                    <div class="input-group">
                                        <input type="number" step="any" class="form-control @error('latitude') is-invalid @enderror" 
                                               id="latitude" name="latitude" value="{{ old('latitude') }}" readonly>
                                        <div class="input-group-append">
                                            <button type="button" class="btn btn-primary" id="getLocationBtn">
                                                <i class="fas fa-map-marker-alt"></i> Ambil dari GPS
                                            </button>
                                        </div>
                                    </div>
                                    <small class="text-muted">Klik tombol untuk mendapatkan koordinat GPS otomatis</small>
                                    @error('latitude')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="longitude" class="form-label">Koordinat Pelanggan (Longitude)</label>
                                    <input type="number" step="any" class="form-control @error('longitude') is-invalid @enderror" 
                                           id="longitude" name="longitude" value="{{ old('longitude') }}" readonly>
                                    @error('longitude')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        
                        <div class="alert alert-info text-white">
                            <i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">map</i>
                            <strong>Peta:</strong> Koordinat akan digunakan untuk menampilkan pelanggan di peta. 
                            Klik tombol "Ambil dari GPS" untuk mendapatkan koordinat otomatis.
                        </div>
                        
                        <!-- Foto Upload Section -->
                        <div class="card mb-4">
                            <div class="card-header pb-0 pt-3">
                                <h6 class="mb-0">
                                    <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">image</i>Upload Dokumen & Foto
                                </h6>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group mb-3">
                                            <label for="foto_ktp" class="form-label">Foto KTP <span class="text-danger">*</span></label>
                                            <div class="custom-file">
                                                <input type="file" class="custom-file-input @error('foto_ktp') is-invalid @enderror" 
                                                       id="foto_ktp" name="foto_ktp" accept="image/*" required>
                                                <label class="custom-file-label" for="foto_ktp">Pilih foto KTP...</label>
                                            </div>
                                            <small class="text-muted">Format: JPG, PNG, JPEG (Max: 5MB)</small>
                                            <div id="fotoKtpPreview" class="mt-3" style="display: none;">
                                                <img id="previewFotoKtp" src="" alt="Preview" class="img-thumbnail" style="max-width: 300px; max-height: 300px;">
                                            </div>
                                            @error('foto_ktp')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group mb-3">
                                            <label for="foto_rumah" class="form-label">Foto Rumah Depan <span class="text-danger">*</span></label>
                                            <div class="custom-file">
                                                <input type="file" class="custom-file-input @error('foto_rumah') is-invalid @enderror" 
                                                       id="foto_rumah" name="foto_rumah" accept="image/*" required>
                                                <label class="custom-file-label" for="foto_rumah">Pilih foto rumah...</label>
                                            </div>
                                            <small class="text-muted">Format: JPG, PNG, JPEG (Max: 5MB)</small>
                                            <div id="fotoRumahPreview" class="mt-3" style="display: none;">
                                                <img id="previewFotoRumah" src="" alt="Preview" class="img-thumbnail" style="max-width: 300px; max-height: 300px;">
                                            </div>
                                            @error('foto_rumah')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group mb-3">
                                            <label for="foto" class="form-label">Foto Pelanggan</label>
                                            <div class="custom-file">
                                                <input type="file" class="custom-file-input @error('foto') is-invalid @enderror" 
                                                       id="foto" name="foto" accept="image/*">
                                                <label class="custom-file-label" for="foto">Pilih foto pelanggan...</label>
                                            </div>
                                            <small class="text-muted">Format: JPG, PNG, JPEG (Max: 5MB)</small>
                                            <div id="fotoPreview" class="mt-3" style="display: none;">
                                                <img id="previewFoto" src="" alt="Preview" class="img-thumbnail" style="max-width: 300px; max-height: 300px;">
                                            </div>
                                            @error('foto')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group mb-3">
                                            <label for="foto_instalasi" class="form-label">Foto Instalasi</label>
                                            <div class="custom-file">
                                                <input type="file" class="custom-file-input @error('foto_instalasi') is-invalid @enderror" 
                                                       id="foto_instalasi" name="foto_instalasi" accept="image/*">
                                                <label class="custom-file-label" for="foto_instalasi">Pilih foto instalasi...</label>
                                            </div>
                                            <small class="text-muted">Format: JPG, PNG, JPEG (Max: 5MB)</small>
                                            <div id="fotoInstalasiPreview" class="mt-3" style="display: none;">
                                                <img id="previewFotoInstalasi" src="" alt="Preview" class="img-thumbnail" style="max-width: 300px; max-height: 300px;">
                                            </div>
                                            @error('foto_instalasi')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        @if(config('librenms.enabled'))
                        <div class="form-group mb-3">
                            <label for="librenms_port_id" class="form-label">LibreNMS Port ID</label>
                            <input type="number" 
                                   class="form-control @error('librenms_port_id') is-invalid @enderror" 
                                   id="librenms_port_id" 
                                   name="librenms_port_id" 
                                   value="{{ old('librenms_port_id') }}" 
                                   placeholder="ID port di LibreNMS">
                            <small class="text-muted">Opsional: ID port di LibreNMS untuk monitoring bandwidth</small>
                            @error('librenms_port_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        @endif
                        
                        <!-- Step 3 Navigation -->
                        <div class="row mt-4">
                            <div class="col-12">
                                <button type="button" class="btn bg-gradient-secondary mb-0" onclick="prevStep(2)">
                                    <i class="material-symbols-rounded me-1" style="font-size: 18px; vertical-align: middle;">arrow_back</i> Kembali ke Step 2
                                </button>
                                <a href="{{ route('pelanggan.index') }}" class="btn bg-gradient-secondary mb-0 me-2 float-end">
                                    <i class="material-symbols-rounded me-1" style="font-size: 18px; vertical-align: middle;">close</i> Batal
                                </a>
                                <button type="submit" class="btn bg-gradient-success mb-0 float-end">
                                    <i class="material-symbols-rounded me-1" style="font-size: 18px; vertical-align: middle;">save</i> Simpan Pelanggan
                                </button>
                            </div>
                        </div>
                    </div>
                    <!-- END STEP 3 -->
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
$(document).ready(function() {
    const pppoeProfileDetails = @json($pppoeProfileDetails ?? []);
    const defaultProfileLocalAddress = @json($pppoeDefaultLocalAddress);
    
    function updateProfileLocalAddressDisplay(profileName) {
        const $localAddressInput = $('#profile_local_address_display');
        const $localAddressHidden = $('#local_address_pppoe');
        if (!$localAddressInput.length) {
            return;
        }
        
        if (profileName === '__custom__') {
            profileName = null;
        }
        
        let localAddress = '';
        if (profileName && pppoeProfileDetails[profileName] && pppoeProfileDetails[profileName].local_address) {
            localAddress = pppoeProfileDetails[profileName].local_address;
        } else if (defaultProfileLocalAddress) {
            localAddress = defaultProfileLocalAddress;
        }
        
        $localAddressInput.val(localAddress || '');
        if ($localAddressHidden.length) {
            $localAddressHidden.val(localAddress || '');
        }
    }
    
    // GPS Location Handler
    $('#getLocationBtn').on('click', function() {
        const btn = $(this);
        const originalText = btn.html();
        
        btn.prop('disabled', true).html('<i class="material-symbols-rounded" style="font-size: 18px; vertical-align: middle;">hourglass_empty</i> Mengambil lokasi...');
        
        if (!navigator.geolocation) {
            alert('Geolocation tidak didukung oleh browser Anda.');
            btn.prop('disabled', false).html(originalText);
            return;
        }
        
        navigator.geolocation.getCurrentPosition(
            function(position) {
                const lat = position.coords.latitude;
                const lng = position.coords.longitude;
                
                $('#latitude').val(lat.toFixed(8));
                $('#longitude').val(lng.toFixed(8));
                
                btn.prop('disabled', false).html('<i class="material-symbols-rounded" style="font-size: 18px; vertical-align: middle;">check_circle</i> Lokasi diperoleh');
                setTimeout(function() {
                    btn.html(originalText);
                }, 2000);
            },
            function(error) {
                let errorMsg = 'Gagal mendapatkan lokasi: ';
                switch(error.code) {
                    case error.PERMISSION_DENIED:
                        errorMsg += 'Akses lokasi ditolak. Silakan izinkan akses lokasi di pengaturan browser.';
                        break;
                    case error.POSITION_UNAVAILABLE:
                        errorMsg += 'Informasi lokasi tidak tersedia.';
                        break;
                    case error.TIMEOUT:
                        errorMsg += 'Waktu permintaan lokasi habis.';
                        break;
                    default:
                        errorMsg += 'Terjadi kesalahan yang tidak diketahui.';
                        break;
                }
                alert(errorMsg);
                btn.prop('disabled', false).html(originalText);
            },
            {
                enableHighAccuracy: true,
                timeout: 10000,
                maximumAge: 0
            }
        );
    });
    
    // Auto-trigger GPS on page load (optional, can be removed if you want manual trigger)
    // Uncomment below if you want automatic GPS detection on page load
    // setTimeout(function() {
    //     $('#getLocationBtn').click();
    // }, 1000);
    
    // Photo Preview Handler - Generic function
    function setupPhotoPreview(inputId, previewId, labelSelector) {
        $(inputId).on('change', function(e) {
            const file = e.target.files[0];
            if (file) {
                // Update file label (if exists)
                const label = $(this).next('label');
                if (label.length) {
                    label.html(file.name);
                }
                
                // Validate file size (5MB)
                if (file.size > 5 * 1024 * 1024) {
                    alert('Ukuran file terlalu besar. Maksimal 5MB.');
                    $(this).val('');
                    const label = $(this).next('label');
                    if (label.length) {
                        label.html('Pilih foto...');
                    }
                    $(previewId).hide();
                    return;
                }
                
                // Validate file type
                if (!file.type.match('image.*')) {
                    alert('File harus berupa gambar.');
                    $(this).val('');
                    const label = $(this).next('label');
                    if (label.length) {
                        label.html('Pilih foto...');
                    }
                    $(previewId).hide();
                    return;
                }
                
                // Show preview
                const reader = new FileReader();
                reader.onload = function(e) {
                    $(previewId + ' img').attr('src', e.target.result);
                    $(previewId).show();
                };
                reader.readAsDataURL(file);
            } else {
                $(this).next(labelSelector).html('Pilih foto...');
                $(previewId).hide();
            }
        });
    }
    
    // Setup preview untuk semua foto
    setupPhotoPreview('#foto', '#fotoPreview', '.custom-file-label');
    setupPhotoPreview('#foto_ktp', '#fotoKtpPreview', '.custom-file-label');
    setupPhotoPreview('#foto_rumah', '#fotoRumahPreview', '.custom-file-label');
    setupPhotoPreview('#foto_instalasi', '#fotoInstalasiPreview', '.custom-file-label');
    
    // Toggle PPPoE fields
    $('#create_pppoe').on('change', function() {
        if ($(this).is(':checked')) {
            $('#pppoeFields').slideDown();
            $('#username_pppoe, #password_pppoe, #profile_pppoe, #remote_address_pppoe').prop('required', true);
        } else {
            $('#pppoeFields').slideUp();
            $('#username_pppoe, #password_pppoe, #profile_pppoe, #remote_address_pppoe').prop('required', false);
        }
    });
    
    // Initialize on page load
    if ($('#create_pppoe').is(':checked')) {
        $('#pppoeFields').show();
        $('#username_pppoe, #password_pppoe, #profile_pppoe, #remote_address_pppoe').prop('required', true);
    }
    
    // Handle profile dropdown change
    $('#profile_pppoe').on('change', function() {
        let selectedProfile = $(this).val();
        if (selectedProfile === '__custom__') {
            $('#profile_pppoe_custom').show().prop('required', true);
            $(this).prop('required', false);
            $(this).val(''); // Clear select value
        } else {
            $('#profile_pppoe_custom').hide().prop('required', false).val('');
            $(this).prop('required', true);
        }
        updateProfileLocalAddressDisplay(selectedProfile);
    });
    
    // Handle custom profile input
    $('#profile_pppoe_custom').on('input', function() {
        if ($(this).val()) {
            $('#profile_pppoe').val('__custom__');
        }
        updateProfileLocalAddressDisplay(null);
    });
    
    // On form submit, copy custom value to profile_pppoe if custom is used
    $('form').on('submit', function() {
        if ($('#profile_pppoe').val() === '__custom__' || $('#profile_pppoe_custom').is(':visible') && $('#profile_pppoe_custom').val()) {
            var customValue = $('#profile_pppoe_custom').val();
            if (customValue) {
                // Create hidden input with the custom value
                $('<input>').attr({
                    type: 'hidden',
                    name: 'profile_pppoe',
                    value: customValue
                }).appendTo($(this));
                $('#profile_pppoe').removeAttr('name'); // Remove name from select
            }
        }
    });
    
    updateProfileLocalAddressDisplay($('#profile_pppoe').val());
    
    // Calculate and display estimated periode berlangganan based on tanggal aktif
    // Periode: dari tanggal aktif ke tanggal yang sama di bulan berikutnya
    function updatePeriodePreview() {
        var tanggalAktif = $('#tanggal_aktif').val();
        if (tanggalAktif) {
            var date = new Date(tanggalAktif);
            
            // Periode awal = tanggal aktif
            var yearAwal = date.getFullYear();
            var monthAwal = String(date.getMonth() + 1).padStart(2, '0');
            var dayAwal = String(date.getDate()).padStart(2, '0');
            var formattedAwal = dayAwal + '/' + monthAwal + '/' + yearAwal;
            
            // Periode akhir = tanggal aktif + 1 bulan (tanggal yang sama, bulan berikutnya)
            var dateAkhir = new Date(date);
            dateAkhir.setMonth(dateAkhir.getMonth() + 1);
            var yearAkhir = dateAkhir.getFullYear();
            var monthAkhir = String(dateAkhir.getMonth() + 1).padStart(2, '0');
            var dayAkhir = String(dateAkhir.getDate()).padStart(2, '0');
            var formattedAkhir = dayAkhir + '/' + monthAkhir + '/' + yearAkhir;
            
            var periodeText = formattedAwal + ' - ' + formattedAkhir;
            $('#periode_preview').val(periodeText);
        } else {
            $('#periode_preview').val('-');
        }
    }
    
    // Update periode preview when tanggal aktif changes
    $('#tanggal_aktif').on('change', function() {
        updatePeriodePreview();
    });
    
    // Initial calculation
    updatePeriodePreview();
    
    // Realtime validation for nomor telepon
    let nomorTeleponTimeout;
    $('#nomor_telepon').on('input', function() {
        clearTimeout(nomorTeleponTimeout);
        const nomorTelepon = $(this).val().trim();
        const $input = $(this);
        const $feedback = $('#nomor_telepon_feedback');
        const $help = $('#nomor_telepon_help');
        
        if (nomorTelepon.length < 10) {
            $input.removeClass('is-invalid is-valid');
            $feedback.addClass('d-none');
            $help.addClass('d-none');
            return;
        }
        
        nomorTeleponTimeout = setTimeout(function() {
            $.ajax({
                url: '{{ route("pelanggan.check-nomor-telepon") }}',
                method: 'GET',
                data: {
                    nomor_telepon: nomorTelepon
                },
                success: function(response) {
                    if (response.available) {
                        $input.removeClass('is-invalid').addClass('is-valid');
                        $feedback.removeClass('d-block').addClass('d-none');
                        $help.removeClass('d-none text-danger').addClass('text-success').text('✓ ' + response.message);
                    } else {
                        $input.removeClass('is-valid').addClass('is-invalid');
                        $feedback.removeClass('d-none').addClass('d-block').text(response.message);
                        $help.removeClass('d-none text-success').addClass('text-danger').text('✗ ' + response.message);
                    }
                },
                error: function() {
                    $input.removeClass('is-invalid is-valid');
                    $feedback.addClass('d-none');
                    $help.addClass('d-none');
                }
            });
        }, 500); // Debounce 500ms
    });
    
    // Realtime validation for email
    let emailTimeout;
    $('#email').on('input', function() {
        clearTimeout(emailTimeout);
        const email = $(this).val().trim();
        const $input = $(this);
        const $feedback = $('#email_feedback');
        const $help = $('#email_help');
        
        if (!email) {
            $input.removeClass('is-invalid is-valid');
            $feedback.addClass('d-none');
            $help.addClass('d-none');
            return;
        }
        
        // Basic email format check
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!emailRegex.test(email)) {
            $input.removeClass('is-valid').addClass('is-invalid');
            $feedback.removeClass('d-none').addClass('d-block').text('Format email tidak valid');
            $help.removeClass('d-none text-success').addClass('text-danger').text('✗ Format email tidak valid');
            return;
        }
        
        emailTimeout = setTimeout(function() {
            $.ajax({
                url: '{{ route("pelanggan.check-email") }}',
                method: 'GET',
                data: {
                    email: email
                },
                success: function(response) {
                    if (response.available) {
                        $input.removeClass('is-invalid').addClass('is-valid');
                        $feedback.removeClass('d-block').addClass('d-none');
                        $help.removeClass('d-none text-danger').addClass('text-success').text('✓ ' + response.message);
                    } else {
                        $input.removeClass('is-valid').addClass('is-invalid');
                        $feedback.removeClass('d-none').addClass('d-block').text(response.message);
                        $help.removeClass('d-none text-success').addClass('text-danger').text('✗ ' + response.message);
                    }
                },
                error: function() {
                    $input.removeClass('is-invalid is-valid');
                    $feedback.addClass('d-none');
                    $help.addClass('d-none');
                }
            });
        }, 500); // Debounce 500ms
    });
    
    // Step Navigation Functions
    function showStep(step) {
        // Hide all steps
        $('.step-content').removeClass('active');
        // Show selected step
        $('#step' + step).addClass('active');
        
        // Update step indicator
        $('.step-item').removeClass('active completed');
        for (let i = 1; i < step; i++) {
            $('.step-item[data-step="' + i + '"]').addClass('completed');
        }
        $('.step-item[data-step="' + step + '"]').addClass('active');
    }
    
    function nextStep(step) {
        // Validate current step before proceeding
        const currentStep = step - 1;
        if (currentStep === 1) {
            // Validate Step 1
            const requiredFields = ['nama', 'nomor_telepon', 'area_id', 'paket_id', 'tanggal_aktif', 'tanggal_registrasi'];
            let isValid = true;
            requiredFields.forEach(function(field) {
                const $field = $('#' + field);
                if ($field.length && $field.prop('required') && !$field.val()) {
                    $field.addClass('is-invalid');
                    isValid = false;
                } else {
                    $field.removeClass('is-invalid');
                }
            });
            
            if (!isValid) {
                alert('Mohon lengkapi semua field yang wajib diisi di Step 1');
                return;
            }
        } else if (currentStep === 2) {
            // Validate Step 2 - minimal mikrotik harus dipilih
            if (!$('#mikrotik_id').val()) {
                alert('Mohon pilih Mikrotik di Step 2');
                $('#mikrotik_id').addClass('is-invalid');
                return;
            }
        }
        
        showStep(step);
        // Scroll to top
        $('html, body').animate({ scrollTop: 0 }, 300);
    }
    
    function prevStep(step) {
        showStep(step);
        // Scroll to top
        $('html, body').animate({ scrollTop: 0 }, 300);
    }
    
    // Load ODP Ports when ODP is selected
    $('#odp_id').on('change', function() {
        const odpId = $(this).val();
        const $portSelect = $('#odp_port');
        $portSelect.html('<option value="">Loading...</option>');
        
        if (!odpId) {
            $portSelect.html('<option value="">Pilih Port</option>');
            return;
        }
        
        // Get selected ODP data
        const selectedOption = $(this).find('option:selected');
        const totalPorts = parseInt(selectedOption.data('ports')) || 8; // Default 8 ports
        
        // Load used ports from API
        $.ajax({
            url: '{{ route("pelanggan.get-odp-ports") }}',
            method: 'GET',
            data: { odp_id: odpId },
            success: function(response) {
                const usedPorts = response.used_ports || [];
                let options = '<option value="">Pilih Port</option>';
                
                for (let i = 1; i <= totalPorts; i++) {
                    const isUsed = usedPorts.includes(i);
                    const disabled = isUsed ? 'disabled' : '';
                    const usedLabel = isUsed ? ' (Terpakai)' : '';
                    options += `<option value="${i}" ${disabled}>Port ${i}${usedLabel}</option>`;
                }
                
                $portSelect.html(options);
            },
            error: function() {
                // Fallback: show all ports
                let options = '<option value="">Pilih Port</option>';
                for (let i = 1; i <= totalPorts; i++) {
                    options += `<option value="${i}">Port ${i}</option>`;
                }
                $portSelect.html(options);
            }
        });
    });
});
</script>
@endsection