<?php
require_once __DIR__ . '/../includes/auth.php';
require_once __DIR__ . '/../includes/functions.php';
require_once __DIR__ . '/../classes/Customer.php';
require_once __DIR__ . '/../classes/Branch.php';
require_once __DIR__ . '/../classes/MikroTik.php';

requireRole('branch_admin');
$pageTitle = 'Edit Pelanggan';

$db = db();

// Ambil info cabang user
$currentUserId = currentUserId();
$userBranchId = null;
$userBranchName = 'Unknown';

try {
    $stmt = $db->prepare("SELECT u.branch_id, b.name as branch_name 
                          FROM users u LEFT JOIN branches b ON u.branch_id = b.id 
                          WHERE u.id = ?");
    $stmt->execute([$currentUserId]);
    $row = $stmt->fetch();
    $userBranchId = $row ? (int)$row['branch_id'] : null;
    $userBranchName = $row['branch_name'] ?? 'Unknown';
} catch (\Throwable $e) {}

if (!$userBranchId) {
    redirect('/branch/dashboard.php', '❌ Akun tidak terdaftar di cabang.', 'error');
}

$id = (int)($_GET['id'] ?? 0);
$customer = Customer::find($id);

if (!$customer || (int)$customer['branch_id'] !== $userBranchId) {
    redirect('/branch/customers.php', '❌ Pelanggan tidak ditemukan atau bukan milik cabang Anda', 'error');
}

$packages = $db->query("SELECT * FROM packages WHERE status='active' ORDER BY name")->fetchAll();

// ⭐ HITUNG INFORMASI JATUH TEMPO & MASA AKTIF
$installationDate = $customer['installation_date'] ?? $customer['created_at'] ?? date('Y-m-d');
$installationDate = date('Y-m-d', strtotime($installationDate));

// Jatuh tempo = tanggal instalasi + 1 bulan
$dueDate = date('Y-m-d', strtotime('+1 month', strtotime($installationDate)));
$activeUntil = $customer['active_until'] ?? date('Y-m-d 23:59:59', strtotime('+1 month', strtotime($installationDate)));

// Format tanggal dalam Bahasa Indonesia
$hariIndonesia = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu'];
$bulanIndonesia = [
    1 => 'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni',
    'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'
];
$bulanShort = [
    1 => 'Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun',
    'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'
];

function formatTanggal($dateStr, $hariIndonesia, $bulanIndonesia) {
    $timestamp = strtotime($dateStr);
    $hari = $hariIndonesia[date('w', $timestamp)];
    $tanggal = date('j', $timestamp);
    $bulan = $bulanIndonesia[(int)date('n', $timestamp)];
    $tahun = date('Y', $timestamp);
    return "$hari, $tanggal $bulan $tahun";
}

function formatTanggalShort($dateStr, $bulanShort) {
    $timestamp = strtotime($dateStr);
    return date('j', $timestamp) . ' ' . $bulanShort[(int)date('n', $timestamp)] . ' ' . date('Y', $timestamp);
}

// Hitung countdown jatuh tempo
$today = strtotime('today');
$dueDay = strtotime($dueDate);
$daysDiff = floor(($dueDay - $today) / 86400);

if ($daysDiff > 0) {
    $dueCountdown = "$daysDiff hari lagi";
    $dueStatusClass = 'warning';
    $dueStatusIcon = '⏳';
} elseif ($daysDiff == 0) {
    $dueCountdown = 'HARI INI!';
    $dueStatusClass = 'danger';
    $dueStatusIcon = '🔥';
} else {
    $daysOverdue = abs($daysDiff);
    $dueCountdown = "Terlambat $daysOverdue hari";
    $dueStatusClass = 'danger';
    $dueStatusIcon = '⚠️';
}

// Hitung sisa masa aktif
$now = time();
$activeUntilTs = strtotime($activeUntil);
$daysLeftActive = floor(($activeUntilTs - $now) / 86400);

if ($daysLeftActive > 7) {
    $activeStatus = "Aktif $daysLeftActive hari lagi";
    $activeClass = 'success';
} elseif ($daysLeftActive > 0) {
    $activeStatus = "Segera habis ($daysLeftActive hari)";
    $activeClass = 'warning';
} elseif ($daysLeftActive == 0) {
    $activeStatus = "Habis HARI INI";
    $activeClass = 'danger';
} else {
    $activeStatus = "Expired " . abs($daysLeftActive) . " hari lalu";
    $activeClass = 'danger';
}

// Cek koneksi MikroTik
$mtConnected = false;
try {
    $mt = new MikroTik($userBranchId);
    $mt->connect();
    $mtConnected = empty($mt->lastError);
} catch (\Throwable $e) {
    $mtConnected = false;
}

$error = '';
if ($_SERVER['REQUEST_METHOD'] === 'POST' && verifyCsrf($_POST['csrf_token'] ?? '')) {
    try {
        // ⭐ due_day TIDAK diambil dari form (sudah otomatis dari installation_date)
        $updateData = [
            'name' => $_POST['name'],
            'phone' => $_POST['phone'],
            'email' => $_POST['email'] ?? null,
            'address' => $_POST['address'] ?? null,
            'package_id' => $_POST['package_id'],
            'ip_address' => $_POST['ip_address'] ?? null,
        ];
        
        Customer::update($id, $updateData);
        
        // Jika PPPoE username berubah, update di MikroTik
        $newUsername = trim($_POST['pppoe_username'] ?? '');
        $syncSuccess = true;
        $syncMsg = '';
        
        if ($newUsername && $newUsername !== $customer['pppoe_username']) {
            try {
                $mt = new MikroTik($userBranchId);
                $mt->removeSecret($customer['pppoe_username']);
                $addResult = $mt->addSecret(
                    $newUsername,
                    $customer['pppoe_password'],
                    $customer['pppoe_profile'] ?? 'default',
                    $customer['pppoe_service'] ?? 'pppoe',
                    "Customer: {$_POST['name']}"
                );
                
                if ($addResult['success']) {
                    Customer::update($id, ['pppoe_username' => $newUsername]);
                    $syncMsg = ' dan sinkron ke MikroTik berhasil';
                } else {
                    $syncSuccess = false;
                    $syncMsg = ' tapi GAGAL sync ke MikroTik: ' . ($addResult['error'] ?? 'Unknown error');
                }
            } catch (\Throwable $e) {
                $syncSuccess = false;
                $syncMsg = ' tapi GAGAL sync ke MikroTik: ' . $e->getMessage();
            }
        }
        
        logActivity($currentUserId, 'edit_customer', "Edit pelanggan: {$_POST['name']}");
        $icon = $syncSuccess ? '✅' : '⚠️';
        redirect('/branch/customers.php', "$icon Pelanggan berhasil diupdate$syncMsg");
    } catch (\Throwable $e) {
        $error = 'Error: ' . $e->getMessage();
    }
}

require __DIR__ . '/../includes/header.php';
require __DIR__ . '/../includes/sidebar.php';
?>

<style>
/* === NAVBAR MODERN === */
.navbar-modern {
    background: linear-gradient(135deg, #0066CC 0%, #00B4FF 100%);
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.navbar-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.burger-btn {
    background: rgba(255,255,255,0.15);
    border: none;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    transition: all 0.3s ease;
}

.burger-btn:hover {
    background: rgba(255,255,255,0.25);
    transform: scale(1.05);
}

.navbar-title {
    color: white;
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0;
}

.navbar-subtitle {
    color: rgba(255,255,255,0.85);
    font-size: 0.78rem;
    margin: 0;
}

.navbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.navbar-badge {
    background: rgba(255,255,255,0.2);
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* === MAIN CONTENT === */
.main-content {
    padding: 16px;
    max-width: 900px;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    gap: 20px; /* jarak antar div */
}

.page-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #003D7A;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.page-title i {
    color: #0066CC;
}

.branch-badge {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    color: #003D7A;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.customer-badge {
    background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
    color: #f57c00;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* === ALERT MODERN === */
.alert-modern {
    padding: 12px 16px;
    border-radius: 10px;
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.88rem;
    border: 2px solid;
}

.alert-modern.success { background: #e8f5e9; border-color: #a5d6a7; color: #2e7d32; }
.alert-modern.danger { background: #ffebee; border-color: #ef9a9a; color: #c62828; }
.alert-modern.warning { background: #fff8e1; border-color: #ffe082; color: #f57c00; }
.alert-modern.info { background: #e3f2fd; border-color: #90caf9; color: #1565c0; }

.alert-modern i {
    font-size: 1.1rem;
    margin-top: 2px;
    flex-shrink: 0;
}

/* === FORM CARD === */
.form-card {
    background: white;
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    overflow: hidden;
}

.form-card-header {
    background: linear-gradient(135deg, #0066CC 0%, #00B4FF 100%);
    color: white;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-weight: 600;
    font-size: 0.95rem;
}

.form-card-header .header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.form-card-header .customer-number {
    background: rgba(255,255,255,0.2);
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: 'Courier New', monospace;
}

.form-card-body {
    padding: 16px 20px;
}

/* === SECTION DIVIDER === */
.form-section {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px dashed #e8f4f8;
}

.form-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.92rem;
    font-weight: 700;
    color: #003D7A;
    margin: 0 0 12px;
}

.section-title i {
    color: #0066CC;
    font-size: 1rem;
}

.section-title .section-badge {
    margin-left: auto;
    font-size: 0.7rem;
    padding: 2px 8px;
    background: #e3f2fd;
    color: #1565c0;
    border-radius: 10px;
    font-weight: 600;
}

/* === FORM GRID === */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

.form-grid.single {
    grid-template-columns: 1fr;
}

.form-group {
    margin: 0;
}

.form-label-modern {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: #003D7A;
    margin-bottom: 6px;
    font-size: 0.82rem;
}

.form-label-modern i {
    color: #0066CC;
    font-size: 0.9rem;
}

.form-label-modern .required {
    color: #DC3545;
    margin-left: 2px;
}

.form-control-modern,
.form-select-modern {
    width: 100%;
    padding: 9px 12px;
    border: 2px solid #e8f4f8;
    border-radius: 10px;
    font-size: 0.88rem;
    transition: all 0.3s ease;
    background: #f8fafc;
    font-family: inherit;
    box-sizing: border-box;
}

.form-control-modern:focus,
.form-select-modern:focus {
    outline: none;
    border-color: #0066CC;
    background: white;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

.form-control-modern[readonly] {
    background: #f0f0f0;
    color: #666;
    cursor: not-allowed;
}

textarea.form-control-modern {
    resize: vertical;
    min-height: 50px;
}

.form-hint {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: 4px;
    font-size: 0.72rem;
    color: #999;
}

/* === ⭐ SCHEDULE INFO BOX (READ-ONLY) === */
.schedule-info-box {
    background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
    border: 2px solid #ce93d8;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

.schedule-info-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    font-weight: 700;
    color: #6a1b9a;
    margin-bottom: 12px;
}

.schedule-info-title i {
    font-size: 1.1rem;
}

.schedule-info-title .lock-badge {
    margin-left: auto;
    background: #6a1b9a;
    color: white;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.68rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.schedule-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 10px;
    align-items: center;
}

.schedule-item {
    text-align: center;
    padding: 12px 10px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border: 2px solid transparent;
}

.schedule-item.installation {
    border-color: #42a5f5;
}

.schedule-item.due-date {
    border-color: #ffa726;
}

.schedule-item.active-until {
    border-color: #66bb6a;
}

.schedule-item-icon {
    font-size: 1.5rem;
    margin-bottom: 6px;
}

.schedule-item-label {
    font-size: 0.68rem;
    color: #666;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.3px;
    margin-bottom: 6px;
}

.schedule-item-date {
    font-size: 0.85rem;
    font-weight: 700;
    color: #003D7A;
    margin-bottom: 4px;
    line-height: 1.3;
}

.schedule-item.installation .schedule-item-date {
    color: #1565c0;
}

.schedule-item.due-date .schedule-item-date {
    color: #ef6c00;
}

.schedule-item.active-until .schedule-item-date {
    color: #2e7d32;
}

.schedule-item-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 700;
    margin-top: 4px;
}

.schedule-item-status.warning {
    background: #fff3cd;
    color: #856404;
}

.schedule-item-status.danger {
    background: #f8d7da;
    color: #842029;
}

.schedule-item-status.success {
    background: #d1e7dd;
    color: #0f5132;
}

.schedule-arrow {
    font-size: 1.5rem;
    color: #9c27b0;
    text-align: center;
    font-weight: 700;
}

.schedule-note {
    margin-top: 12px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.6);
    border-radius: 8px;
    font-size: 0.78rem;
    color: #6a1b9a;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.schedule-note i {
    margin-top: 2px;
    flex-shrink: 0;
}

/* === INFO/WARNING BOX === */
.info-box {
    background: #e3f2fd;
    border-left: 3px solid #0066CC;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.8rem;
    color: #1565c0;
    margin-top: 8px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.info-box i {
    margin-top: 2px;
    flex-shrink: 0;
}

.info-box code {
    background: rgba(255,255,255,0.6);
    padding: 1px 6px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-weight: 700;
    color: #003D7A;
}

.warning-box {
    background: #fff8e1;
    border-left: 3px solid #FF9900;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.8rem;
    color: #f57c00;
    margin-top: 8px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.warning-box i {
    margin-top: 2px;
    flex-shrink: 0;
}

.current-value {
    background: #fff8e1;
    border-left: 3px solid #FF9900;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.78rem;
    color: #f57c00;
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.current-value strong {
    color: #003D7A;
    font-family: 'Courier New', monospace;
}

/* === BUTTONS === */
.btn-modern {
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
}

.btn-modern.primary {
    background: linear-gradient(135deg, #0066CC 0%, #00B4FF 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
}

.btn-modern.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 102, 204, 0.4);
}

.btn-modern.secondary {
    background: white;
    color: #666;
    border: 2px solid #e8f4f8;
}

.btn-modern.secondary:hover {
    background: #f8fafc;
    border-color: #0066CC;
    color: #0066CC;
}

.btn-group-modern {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed #e8f4f8;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .navbar-modern {
        padding: 12px 15px;
    }
    
    .navbar-title {
        font-size: 1rem;
    }
    
    .navbar-subtitle, .navbar-badge {
        display: none;
    }
    
    .main-content {
        padding: 12px;
    }
    
    .page-title {
        font-size: 1.2rem;
    }
    
    .form-card-body {
        padding: 14px 16px;
    }
    
    .form-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .btn-group-modern {
        flex-direction: column;
    }
    
    .btn-modern {
        width: 100%;
        padding: 11px;
    }
    
    .form-control-modern,
    .form-select-modern {
        padding: 10px 12px;
        font-size: 0.9rem;
    }
    
    /* Schedule grid responsive */
    .schedule-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .schedule-arrow {
        transform: rotate(90deg);
        font-size: 1.2rem;
    }
    
    .schedule-item {
        padding: 10px 8px;
    }
    
    .schedule-item-date {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .navbar-modern {
        padding: 10px 12px;
    }
    
    .burger-btn {
        width: 36px;
        height: 36px;
        font-size: 1.1rem;
    }
    
    .navbar-title {
        font-size: 0.95rem;
    }
    
    .main-content {
        padding: 10px;
    }
    
    .page-title {
        font-size: 1.1rem;
    }
    
    .form-card-header {
        padding: 12px 16px;
        font-size: 0.9rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    
    .form-card-body {
        padding: 12px 14px;
    }
    
    .form-section {
        margin-bottom: 12px;
        padding-bottom: 12px;
    }
    
    .section-title {
        font-size: 0.88rem;
    }
    
    .form-label-modern {
        font-size: 0.8rem;
    }
    
    .schedule-info-box {
        padding: 12px;
    }
    
    .schedule-info-title {
        font-size: 0.82rem;
    }
    
    .schedule-item-icon {
        font-size: 1.2rem;
    }
}
</style>

<!-- Navbar -->

<div class="content-wrapper">
<div class="main-content">
<div class="navbar-modern">
    <div class="navbar-left">
        <button class="burger-btn" onclick="toggleSidebar()">
            <i class="bi bi-list"></i>
        </button>
        <div>
            <h1 class="navbar-title">Edit Pelanggan</h1>
            <p class="navbar-subtitle">
                <i class="bi bi-building"></i> <?= htmlspecialchars($userBranchName) ?>
            </p>
        </div>
    </div>
    <div class="navbar-right">
        <span class="navbar-badge">
            <i class="bi bi-pencil-square"></i> Edit Mode
        </span>
    </div>
</div>    <h2 class="page-title">
        <i class="bi bi-person-lines-fill"></i>
        <span>Edit Pelanggan</span>
        <span class="branch-badge">
            <i class="bi bi-building"></i>
            <?= htmlspecialchars($userBranchName) ?>
        </span>
        <span class="customer-badge">
            <i class="bi bi-person-circle"></i>
            <?= htmlspecialchars($customer['name']) ?>
        </span>
    </h2>

    <?php if ($error): ?>
        <div class="alert-modern danger">
            <i class="bi bi-exclamation-circle-fill"></i>
            <div><?= htmlspecialchars($error) ?></div>
        </div>
    <?php endif; ?>

    <?php if (!$mtConnected): ?>
        <div class="alert-modern warning">
            <i class="bi bi-exclamation-triangle-fill"></i>
            <div>
                <strong>MikroTik tidak terhubung.</strong> Perubahan username PPPoE mungkin tidak sinkron ke router.
            </div>
        </div>
    <?php endif; ?>

    <!-- FORM CARD -->
    <div class="form-card">
        <div class="form-card-header">
            <div class="header-left">
                <i class="bi bi-pencil-square"></i>
                <span>Form Edit Pelanggan</span>
            </div>
            <span class="customer-number">
                <i class="bi bi-hash"></i> <?= htmlspecialchars($customer['customer_number']) ?>
            </span>
        </div>
        

                <!-- SECTION 2: DATA PELANGGAN -->
                <div class="form-section">
                    <h3 class="section-title">
                        <i class="bi bi-person-fill"></i>
                        <span>Data Pelanggan</span>
                    </h3>
                    
                    <div class="form-grid">
                        <div class="form-group">
                            <label class="form-label-modern">
                                <i class="bi bi-person"></i>
                                Nama Lengkap <span class="required">*</span>
                            </label>
                            <input type="text" name="name" class="form-control-modern" 
                                   value="<?= htmlspecialchars($customer['name']) ?>" required>
                        </div>
                        <div class="form-group">
                            <label class="form-label-modern">
                                <i class="bi bi-telephone"></i>
                                No. HP <span class="required">*</span>
                            </label>
                            <input type="text" name="phone" class="form-control-modern" 
                                   value="<?= htmlspecialchars($customer['phone']) ?>" required>
                        </div>
                    </div>
                    
                    <div class="form-grid">
                        <div class="form-group">
                            <label class="form-label-modern">
                                <i class="bi bi-envelope"></i>
                                Email
                            </label>
                            <input type="email" name="email" class="form-control-modern" 
                                   value="<?= htmlspecialchars($customer['email'] ?? '') ?>">
                        </div>
                        <div class="form-group">
                            <label class="form-label-modern">
                                <i class="bi bi-calendar-event"></i>
                                Jatuh Tempo (Otomatis)
                            </label>
                            <input type="text" class="form-control-modern" readonly
                                   value="<?= formatTanggal($dueDate, $hariIndonesia, $bulanIndonesia) ?>"
                                   style="background: #fff8e1; color: #ef6c00; font-weight: 700; cursor: not-allowed;">
                            <small class="form-hint">
                                <i class="bi bi-lock-fill"></i>
                                Otomatis dari tanggal instalasi (tidak bisa diubah)
                            </small>
                        </div>
                    </div>
                    
                    <div class="form-grid single">
                        <div class="form-group">
                            <label class="form-label-modern">
                                <i class="bi bi-geo-alt"></i>
                                Alamat
                            </label>
                            <textarea name="address" class="form-control-modern" rows="2"><?= htmlspecialchars($customer['address'] ?? '') ?></textarea>
                        </div>
                    </div>
                </div>

                <!-- SECTION 3: PPPoE CONFIGURATION -->
                <div class="form-section">
                    <h3 class="section-title">
                        <i class="bi bi-router-fill"></i>
                        <span>Konfigurasi PPPoE</span>
                        <span class="section-badge"><?= $mtConnected ? '🟢 MikroTik OK' : '🔴 Offline' ?></span>
                    </h3>
                    
                    <div class="warning-box" style="margin-bottom: 12px;">
                        <i class="bi bi-exclamation-triangle-fill"></i>
                        <span>Mengubah username PPPoE akan mempengaruhi koneksi internet pelanggan. Pastikan pelanggan sudah tahu.</span>
                    </div>
                    
                    <div class="form-grid single">
                        <div class="form-group">
                            <label class="form-label-modern">
                                <i class="bi bi-person-badge"></i>
                                Username PPPoE
                            </label>
                            <input type="text" name="pppoe_username" class="form-control-modern" 
                                   value="<?= htmlspecialchars($customer['pppoe_username']) ?>" 
                                   placeholder="Kosongkan jika tidak ingin mengubah">
                            <div class="current-value">
                                <i class="bi bi-info-circle"></i>
                                Username saat ini: <strong><?= htmlspecialchars($customer['pppoe_username']) ?></strong>
                            </div>
                            <?php if (!empty($customer['pppoe_password'])): ?>
                                <div class="info-box" style="margin-top: 6px;">
                                    <i class="bi bi-key-fill"></i>
                                    <span>Password: <code><?= htmlspecialchars($customer['pppoe_password']) ?></code> (tidak dapat diubah di form ini)</span>
                                </div>
                            <?php endif; ?>
                        </div>
                    </div>
                    
                    <div class="form-grid single">
                        <div class="form-group">
                            <label class="form-label-modern">
                                <i class="bi bi-hdd-network"></i>
                                IP Address (Opsional)
                            </label>
                            <input type="text" name="ip_address" class="form-control-modern" 
                                   value="<?= htmlspecialchars($customer['ip_address'] ?? '') ?>" 
                                   placeholder="192.168.1.100">
                            <small class="form-hint">
                                <i class="bi bi-info-circle"></i>
                                Kosongkan jika menggunakan IP dinamis
                            </small>
                        </div>
                    </div>
                </div>

                <!-- SECTION 4: PAKET INTERNET -->
                <div class="form-section">
                    <h3 class="section-title">
                        <i class="bi bi-box-fill"></i>
                        <span>Paket Internet</span>
                    </h3>
                    
                    <div class="form-grid single">
                        <div class="form-group">
                            <label class="form-label-modern">
                                <i class="bi bi-speedometer2"></i>
                                Paket <span class="required">*</span>
                            </label>
                            <select name="package_id" class="form-select-modern" required>
                                <?php foreach ($packages as $p): ?>
                                    <option value="<?= $p['id'] ?>" <?= $p['id'] == $customer['package_id'] ? 'selected' : '' ?>>
                                        <?= htmlspecialchars($p['name']) ?> - Rp <?= number_format($p['price']) ?>
                                        <?= $p['speed'] ? '(' . htmlspecialchars($p['speed']) . ')' : '' ?>
                                    </option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                    </div>
                </div>

                <!-- BUTTONS -->
                <div class="btn-group-modern">
                    <button type="submit" class="btn-modern primary">
                        <i class="bi bi-save-fill"></i>
                        <span>Update & Sinkronkan</span>
                    </button>
                    <a href="/branch/customers.php" class="btn-modern secondary">
                        <i class="bi bi-x-circle"></i>
                        <span>Batal</span>
                    </a>
                </div>
            </form>
        </div>
    </div>
</div>
</div>
<script>
function toggleSidebar() {
    const sidebar = document.getElementById('sidebar');
    const overlay = document.getElementById('sidebarOverlay');
    if (sidebar && overlay) {
        sidebar.classList.toggle('active');
        overlay.classList.toggle('active');
        document.body.style.overflow = sidebar.classList.contains('active') ? 'hidden' : '';
    }
}
</script>

<?php require __DIR__ . '/../includes/footer.php'; ?>