@extends('layouts.main')

@push('styles')
<style>
/* Bootstrap Datepicker Complete Styles - Enhanced Version with Force Override */
.datepicker {
    padding: 8px !important;
    border-radius: 8px !important;
    direction: ltr !important;
    background: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}
.datepicker table {
    margin: 0 !important;
    user-select: none !important;
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 2px !important;
}
.datepicker table thead tr:first-child th {
    cursor: pointer !important;
    padding: 8px !important;
    font-weight: 600 !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #ffffff !important;
    border: none !important;
}
.datepicker table thead tr:first-child th:hover {
    background: linear-gradient(135deg, #5568d3 0%, #65408b 100%) !important;
}
.datepicker table thead tr:last-child th {
    padding: 6px !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    color: #6c757d !important;
    background: #f8f9fa !important;
    border: none !important;
}
.datepicker td,
.datepicker th {
    text-align: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 6px !important;
    border: none !important;
    font-size: 13px !important;
}
.datepicker table tr td {
    padding: 4px !important;
}
.datepicker table tr td.day {
    color: #212529 !important;
    background: #ffffff !important;
    border: 1px solid #e9ecef !important;
    transition: all 0.2s ease !important;
    font-weight: 500 !important;
}
.datepicker table tr td.day:hover {
    background: #e7f3ff !important;
    color: #0d6efd !important;
    cursor: pointer !important;
    transform: scale(1.05) !important;
    border-color: #0d6efd !important;
}
.datepicker table tr td.old,
.datepicker table tr td.new {
    color: #adb5bd !important;
    opacity: 0.5 !important;
}
.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover {
    background: #f8f9fa !important;
    color: #ced4da !important;
    cursor: not-allowed !important;
    opacity: 0.4 !important;
}
.datepicker table tr td.today,
.datepicker table tr td.today:hover {
    background: #fff3cd !important;
    color: #856404 !important;
    border: 2px solid #ffc107 !important;
    font-weight: 700 !important;
    position: relative !important;
}
.datepicker table tr td.today:after {
    content: '' !important;
    position: absolute !important;
    bottom: 2px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 4px !important;
    height: 4px !important;
    border-radius: 50% !important;
    background: #ffc107 !important;
}
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover,
.datepicker table tr td.active.today,
.datepicker table tr td.active.today:hover {
    background: linear-gradient(135deg, #0d6efd 0%, #0257d5 100%) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border: 2px solid #0d6efd !important;
    box-shadow: 0 2px 8px rgba(13, 110, 253, 0.4) !important;
    transform: scale(1.08) !important;
    text-shadow: none !important;
}
.datepicker table tr td.range {
    background: #e7f3ff !important;
    border-radius: 0 !important;
}
.datepicker table tr td.selected,
.datepicker table tr td.selected:hover {
    background: #6c757d !important;
    color: #fff !important;
    font-weight: 600 !important;
}
.datepicker table tr td span {
    display: block !important;
    width: 23% !important;
    height: 54px !important;
    line-height: 54px !important;
    float: left !important;
    margin: 1% !important;
    cursor: pointer !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
}
.datepicker table tr td span:hover {
    background: #e7f3ff !important;
    color: #0d6efd !important;
    transform: scale(1.05) !important;
}
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover {
    background: linear-gradient(135deg, #0d6efd 0%, #0257d5 100%) !important;
    color: #fff !important;
    font-weight: 700 !important;
}
.datepicker .datepicker-switch {
    width: 145px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
}
.datepicker .prev,
.datepicker .next {
    font-size: 18px !important;
    font-weight: 700 !important;
}
.datepicker-dropdown {
    z-index: 1050 !important;
}
.datepicker-dropdown:before {
    content: '' !important;
    display: inline-block !important;
    border-left: 7px solid transparent !important;
    border-right: 7px solid transparent !important;
    border-bottom: 7px solid #dee2e6 !important;
    position: absolute !important;
    top: -7px !important;
}
.datepicker-dropdown:after {
    content: '' !important;
    display: inline-block !important;
    border-left: 6px solid transparent !important;
    border-right: 6px solid transparent !important;
    border-bottom: 6px solid #fff !important;
    position: absolute !important;
    top: -6px !important;
}
.datepicker-dropdown.datepicker-orient-left:before { left: 6px !important; }
.datepicker-dropdown.datepicker-orient-left:after { left: 7px !important; }
.datepicker-dropdown.datepicker-orient-right:before { right: 6px !important; }
.datepicker-dropdown.datepicker-orient-right:after { right: 7px !important; }
</style>
@endpush

@section('content')
    <div class="pagetitle">
        <h1>Form Pendaftaran Customer</h1>
        <nav>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="/">Home</a></li>
                <li class="breadcrumb-item"><a href="{{ route('data-customer.index') }}">Data Customer</a></li>
                <li class="breadcrumb-item active">Pendaftaran</li>
            </ol>
        </nav>
    </div><!-- End Page Title -->

    <section class="section">
        @if (session()->has('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <i class="bi bi-check-circle me-1"></i>
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        @if (session()->has('error'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <i class="bi bi-exclamation-octagon me-1"></i>
                {{ session('error') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        <div class="row">
            <div class="col-lg-10">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title">Form Pendaftaran Calon Customer</h5>
                    </div>
                    <div class="card-body">
                        <form action="{{ route('data-customer.store-registration') }}" method="POST" id="registrationForm">
                            @csrf

                            <!-- Hidden input for signature -->
                            <input type="hidden" name="ttd_cs_data" id="ttd_cs_data_form">

                            <!-- Jenis Form -->
                            <div class="mb-4">
                                <h6 class="fw-bold text-primary mb-3"><i class="bi bi-ui-checks me-2"></i>Jenis Form Pendaftaran</h6>
                                
                                <div class="row mb-3">
                                    <div class="col-md-12">
                                        <label class="form-label">Pilih Jenis Form <span class="text-danger">*</span></label>
                                        <div class="d-flex gap-4">
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="type_bayar" id="type_bayar_gratis" value="2" {{ old('type_bayar', '1') == '2' ? 'checked' : '' }} required>
                                                <label class="form-check-label fw-bold text-success" for="type_bayar_gratis">
                                                    <i class="bi bi-gift"></i> Form Gratis
                                                </label>
                                                <small class="d-block text-muted">Tanpa biaya registrasi</small>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="type_bayar" id="type_bayar_berbayar" value="1" {{ old('type_bayar', '1') == '1' ? 'checked' : '' }} required>
                                                <label class="form-check-label fw-bold text-primary" for="type_bayar_berbayar">
                                                    <i class="bi bi-cash-coin"></i> Form Berbayar
                                                </label>
                                                <small class="d-block text-muted">Dengan biaya registrasi</small>
                                            </div>
                                        </div>
                                        @error('type_bayar')
                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <!-- Data Pribadi -->
                            <div class="mb-4">
                                <h6 class="fw-bold text-primary mb-3"><i class="bi bi-person-circle me-2"></i>Data Pribadi</h6>
                                
                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <label for="name" class="form-label">Nama Lengkap <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control @error('name') is-invalid @enderror" 
                                               id="name" name="name" value="{{ old('name') }}" required>
                                        @error('name')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-md-6">
                                        <label for="no_ktp" class="form-label">Nomor KTP <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control @error('no_ktp') is-invalid @enderror" 
                                               id="no_ktp" name="no_ktp" value="{{ old('no_ktp') }}" maxlength="20" required>
                                        @error('no_ktp')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <label for="tanggal_lahir" class="form-label">Tanggal Lahir</label>
                                        <input type="date" class="form-control @error('tanggal_lahir') is-invalid @enderror" 
                                               id="tanggal_lahir" name="tanggal_lahir" value="{{ old('tanggal_lahir') }}">
                                        @error('tanggal_lahir')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-md-6">
                                        <label for="email" class="form-label">Email <span class="text-danger">*</span></label>
                                        <input type="email" class="form-control @error('email') is-invalid @enderror" 
                                               id="email" name="email" value="{{ old('email') }}" 
                                               placeholder="contoh@email.com" required>
                                        @error('email')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <label for="phone" class="form-label">Nomor Telepon <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control @error('phone') is-invalid @enderror" 
                                               id="phone" name="phone" value="{{ old('phone') }}" 
                                               placeholder="08xxxx" required>
                                        <small class="text-muted">Nomor telepon akan digunakan sebagai username</small>
                                        @error('phone')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-md-6">
                                        <label for="odp" class="form-label">Nomor ODP</label>
                                        <input type="text" class="form-control @error('odp') is-invalid @enderror" 
                                               id="odp" name="odp" value="{{ old('odp') }}" 
                                               placeholder="Contoh: ODP-001">
                                        @error('odp')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <label for="jenis_kelamin" class="form-label">Jenis Kelamin <span class="text-danger">*</span></label>
                                        <div class="mt-2">
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input @error('jenis_kelamin') is-invalid @enderror" 
                                                       type="radio" name="jenis_kelamin" id="jenis_kelamin_l" 
                                                       value="L" {{ old('jenis_kelamin') == 'L' ? 'checked' : '' }} required>
                                                <label class="form-check-label" for="jenis_kelamin_l">
                                                    Pria
                                                </label>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input @error('jenis_kelamin') is-invalid @enderror" 
                                                       type="radio" name="jenis_kelamin" id="jenis_kelamin_p" 
                                                       value="P" {{ old('jenis_kelamin') == 'P' ? 'checked' : '' }} required>
                                                <label class="form-check-label" for="jenis_kelamin_p">
                                                    Wanita
                                                </label>
                                            </div>
                                            @error('jenis_kelamin')
                                                <div class="invalid-feedback d-block">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Data Lokasi -->
                            <div class="mb-4">
                                <h6 class="fw-bold text-primary mb-3"><i class="bi bi-geo-alt-fill me-2"></i>Data Lokasi</h6>
                                
                                @include('components.region-dropdown', [
                                    'required' => true,
                                    'provinceValue' => old('province_code', ''),
                                    'regencyValue' => old('regency_code', ''),
                                    'districtValue' => old('district_code', ''),
                                    'villageValue' => old('village_code', ''),
                                ])

                                <div class="row mb-3">
                                    <div class="col-md-12">
                                        <label for="address" class="form-label">Alamat Lengkap <span class="text-danger">*</span></label>
                                        <textarea class="form-control @error('address') is-invalid @enderror" 
                                                  id="address" name="address" rows="3" required>{{ old('address') }}</textarea>
                                        @error('address')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <label for="lat" class="form-label">Latitude (Titik Koordinat) <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control @error('lat') is-invalid @enderror" 
                                               id="lat" name="lat" value="{{ old('lat') }}" 
                                               placeholder="-6.200000" required>
                                        @error('lat')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-md-6">
                                        <label for="lon" class="form-label">Longitude (Titik Koordinat) <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control @error('lon') is-invalid @enderror" 
                                               id="lon" name="lon" value="{{ old('lon') }}" 
                                               placeholder="106.816666" required>
                                        @error('lon')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <div class="col-md-12">
                                        <button type="button" class="btn btn-sm btn-info" id="getCurrentLocation">
                                            <i class="bi bi-geo-alt"></i> Ambil Lokasi Saat Ini
                                        </button>
                                        <small class="text-muted ms-2">atau masukkan koordinat secara manual</small>
                                    </div>
                                </div>
                            </div>

                            <!-- Pilihan Paket -->
                            <div class="mb-4">
                                <h6 class="fw-bold text-primary mb-3"><i class="bi bi-wifi me-2"></i>Pilihan Paket</h6>
                                
                                <div class="row">
                                    @foreach($kategoriPakets as $kategori)
                                        <div class="col-12 mb-3">
                                            <h6 class="text-secondary"><strong>{{ $kategori->nama_kategori }}</strong></h6>
                                            @foreach($kategori->paketInternet as $paket)
                                                <div class="form-check">
                                                    <input class="form-check-input paket-radio" type="radio" 
                                                           name="paket_internet_id" id="paket_{{ $paket->id }}" 
                                                           value="{{ $paket->id }}"
                                                           data-harga="{{ $paket->harga }}"
                                                           data-kategori="{{ $kategori->id }}"
                                                           data-nama="{{ $paket->nama_paket }}"
                                                           {{ old('paket_internet_id') == $paket->id ? 'checked' : '' }}>
                                                    <label class="form-check-label" for="paket_{{ $paket->id }}">
                                                        <strong>{{ $paket->nama_paket }}</strong> - {{ $paket->kecepatan }} Mbps - Rp {{ number_format($paket->harga, 2, ',', '.') }}/bulan
                                                    </label>
                                                </div>
                                            @endforeach
                                        </div>
                                    @endforeach
                                </div>

                                <input type="hidden" name="kategori_paket_id" id="kategori_paket_id" value="{{ old('kategori_paket_id') }}">
                                <input type="hidden" name="harga_paket" id="harga_paket_input" value="{{ old('harga_paket', 0) }}">
                            </div>

                            <!-- Informasi WiFi -->
                            <div class="mb-4">
                                <h6 class="fw-bold text-primary mb-3"><i class="bi bi-wifi me-2"></i>Informasi WiFi</h6>
                                
                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <label for="wifi_ssid" class="form-label">Nama WiFi (SSID)</label>
                                        <input type="text" class="form-control @error('wifi_ssid') is-invalid @enderror" 
                                               id="wifi_ssid" name="wifi_ssid" value="{{ old('wifi_ssid') }}" 
                                               placeholder="Contoh: MyHome-WiFi">
                                        @error('wifi_ssid')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                        <small class="text-muted">Nama jaringan WiFi yang akan digunakan customer</small>
                                    </div>

                                    <div class="col-md-6">
                                        <label for="wifi_password" class="form-label">Password WiFi</label>
                                        <input type="text" class="form-control @error('wifi_password') is-invalid @enderror" 
                                               id="wifi_password" name="wifi_password" value="{{ old('wifi_password') }}" 
                                               placeholder="Minimal 8 karakter">
                                        @error('wifi_password')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                        <small class="text-muted">Password untuk akses WiFi customer</small>
                                    </div>
                                </div>
                            </div>

                            <!-- Catatan & Customer Service -->
                            <div class="mb-4">
                                <h6 class="fw-bold text-primary mb-3"><i class="bi bi-sticky me-2"></i>Informasi Tambahan</h6>
                                
                                <div class="row mb-3">
                                    <div class="col-md-12">
                                        <label for="catatan" class="form-label">Catatan</label>
                                        <textarea class="form-control @error('catatan') is-invalid @enderror" 
                                                  id="catatan" name="catatan" rows="3" 
                                                  placeholder="Catatan tambahan untuk registrasi ini (opsional)">{{ old('catatan') }}</textarea>
                                        @error('catatan')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                        <small class="text-muted">Catatan khusus atau informasi tambahan mengenai customer ini</small>
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <label for="customer_service" class="form-label">Nama Customer Service</label>
                                        <input type="text" class="form-control @error('customer_service') is-invalid @enderror" 
                                               id="customer_service" name="customer_service" value="{{ old('customer_service') }}" 
                                               placeholder="Nama CS yang melayani">
                                        @error('customer_service')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                        <small class="text-muted">Nama Customer Service yang melayani registrasi ini</small>
                                    </div>
                                </div>
                            </div>

                            <!-- Detail Pembayaran -->
                            <div class="mb-4">
                                <h6 class="fw-bold text-primary mb-3"><i class="bi bi-calculator me-2"></i>Detail Pembayaran</h6>
                                
                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <label for="harga_paket_display" class="form-label">Harga Paket</label>
                                        <input type="text" class="form-control" id="harga_paket_display" readonly value="Rp 0">
                                    </div>

                                    <div class="col-md-6">
                                        <label for="diskon" class="form-label">Diskon</label>
                                        <div class="mb-2">
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" name="diskon_type" id="diskon_type_persentase" value="persentase" checked>
                                                <label class="form-check-label" for="diskon_type_persentase">
                                                    Persentase
                                                </label>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" name="diskon_type" id="diskon_type_nominal" value="nominal">
                                                <label class="form-check-label" for="diskon_type_nominal">
                                                    Nominal
                                                </label>
                                            </div>
                                        </div>
                                        <div id="diskon_persentase_container">
                                            <div class="input-group">
                                                <input type="number" class="form-control" id="diskon_persentase" name="diskon_persentase" value="{{ old('diskon_persentase', 0) }}" min="0" max="100" step="0.01">
                                                <span class="input-group-text">%</span>
                                            </div>
                                        </div>
                                        <div id="diskon_nominal_container" style="display: none;">
                                            <div class="input-group">
                                                <span class="input-group-text">Rp</span>
                                                <input type="number" class="form-control" id="diskon_nominal" name="diskon_nominal" value="{{ old('diskon_nominal', 0) }}" min="0" step="1"
                                                    oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                                            </div>
                                        </div>
                                        <input type="hidden" id="diskon_value" name="diskon_value" value="0">
                                        <small class="text-muted">Diskon akan mengurangi harga paket</small>
                                    </div>
                                </div>

                                <div class="row mb-3" id="biaya_registrasi_section">
                                    <div class="col-md-6">
                                        <label for="jum_biaya_registrasi" class="form-label">
                                            Biaya Registrasi
                                            <i class="bi bi-info-circle text-primary" data-bs-toggle="tooltip" title="Nilai dari pengaturan master sistem"></i>
                                        </label>
                                        <div class="input-group">
                                            <span class="input-group-text">Rp</span>
                                            <input type="text" class="form-control calculate-field @error('jum_biaya_registrasi') is-invalid @enderror" 
                                                   id="jum_biaya_registrasi_display" 
                                                   value="{{ number_format($biayaRegistrasi ?? 0, 0, ',', '.') }}" 
                                                   readonly>
                                            <input type="hidden" id="jum_biaya_registrasi" name="jum_biaya_registrasi" value="{{ $biayaRegistrasi ?? 0 }}">
                                            @error('jum_biaya_registrasi')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        <small class="text-muted">Nilai otomatis dari <a href="{{ route('settings.general') }}" target="_blank">pengaturan sistem</a></small>
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <label for="device_fee" class="form-label">Device Fee</label>
                                        <div class="input-group">
                                            <span class="input-group-text">Rp</span>
                                            <input type="number" class="form-control calculate-field @error('device_fee') is-invalid @enderror" 
                                                   id="device_fee" name="device_fee" 
                                                   value="{{ old('device_fee', 0) }}" min="0" step="1"
                                                   placeholder="Contoh: 100000"
                                                   oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                                            @error('device_fee')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        <small class="text-muted">Masukkan jumlah biaya device (dalam Rupiah)</small>
                                    </div>

                                    <div class="col-md-6">
                                        <label for="tambahan_lain" class="form-label">Tambahan Lain</label>
                                        <div class="input-group">
                                            <span class="input-group-text">Rp</span>
                                            <input type="number" class="form-control calculate-field @error('tambahan_lain') is-invalid @enderror" 
                                                   id="tambahan_lain" name="tambahan_lain" 
                                                   value="{{ old('tambahan_lain', 0) }}" min="0" step="1"
                                                   placeholder="Contoh: 50000"
                                                   oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                                            @error('tambahan_lain')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        <small class="text-muted">Masukkan biaya tambahan lainnya (dalam Rupiah)</small>
                                    </div>
                                </div>

                                <hr class="my-3">

                                <!-- Tanggal Jatuh Tempo -->
                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <label for="tanggal_jatuh_tempo_picker" class="form-label">
                                            <i class="bi bi-calendar-event text-danger"></i> Tanggal Jatuh Tempo Pembayaran
                                        </label>
                                        <input type="text" 
                                               class="form-control @error('tanggal_jatuh_tempo') is-invalid @enderror" 
                                               id="tanggal_jatuh_tempo_picker" 
                                               placeholder="Pilih tanggal jatuh tempo"
                                               readonly>
                                        <!-- Hidden field untuk tanggal lengkap (untuk perhitungan prorata) -->
                                        <input type="hidden" 
                                               id="tanggal_jatuh_tempo_full" 
                                               value="">
                                        <!-- Field yang dikirim ke server (hanya day) -->
                                        <input type="hidden" 
                                               name="tanggal_jatuh_tempo" 
                                               id="tanggal_jatuh_tempo" 
                                               value="{{ old('tanggal_jatuh_tempo', 1) }}">
                                        <!-- Field untuk menyimpan tanggal lengkap jatuh tempo (YYYY-MM-DD) ke database -->
                                        <input type="hidden" 
                                               name="jatuh_tempo_date" 
                                               id="jatuh_tempo_date" 
                                               value="">
                                        @error('tanggal_jatuh_tempo')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                        <small class="text-muted">Pilih tanggal jatuh tempo pembayaran bulanan. Klik untuk memilih dari kalender bulan berikutnya.</small>
                                    </div>
                                </div>

                                <hr class="my-3">

                                <!-- Info Prorata -->
                                <div class="row mb-3">
                                    <div class="col-md-12">
                                        <div class="card bg-light">
                                            <div class="card-body py-2">
                                                <h6 class="card-title mb-2"><i class="bi bi-calendar-check text-success"></i> Informasi Prorata Bulan Pertama</h6>
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <small class="text-muted">Tanggal Transaksi:</small><br>
                                                        <strong id="prorate_tanggal_transaksi">-</strong>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <small class="text-muted">Tanggal Jatuh Tempo:</small><br>
                                                        <strong id="prorate_jatuh_tempo" class="text-danger">-</strong>
                                                    </div>
                                                </div>
                                                <div class="row mt-2">
                                                    <div class="col-md-4">
                                                        <small class="text-muted">Sisa Hari Bulan Ini:</small><br>
                                                        <strong id="prorate_sisa_hari">0 hari</strong>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <small class="text-muted">Hari Bulan Berikutnya:</small><br>
                                                        <strong id="prorate_hari_berikutnya">0 hari</strong>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <small class="text-muted">Total Hari Prorata:</small><br>
                                                        <strong id="prorate_total_hari" class="text-primary">0 hari</strong>
                                                    </div>
                                                </div>
                                                <div class="row mt-2">
                                                    <div class="col-md-6">
                                                        <small class="text-muted">Harga Paket (Per Hari):</small><br>
                                                        <strong id="prorate_harga_per_hari">Rp 0</strong>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <small class="text-muted">Biaya Prorata:</small><br>
                                                        <strong id="prorate_biaya" class="text-success">Rp 0</strong>
                                                    </div>
                                                </div>
                                                <input type="hidden" name="prorate_hari" id="prorate_hari" value="0">
                                                <input type="hidden" name="prorate_biaya_value" id="prorate_biaya_value" value="0">
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <label for="sub_total" class="form-label"><strong>Sub Total</strong></label>
                                        <input type="text" class="form-control fw-bold" id="sub_total_display" readonly value="Rp 0">
                                        <input type="hidden" name="sub_total" id="sub_total">
                                    </div>

                                    <div class="col-md-6">
                                        <label for="ppn_12" class="form-label"><strong>PPN <span id="ppn_persen_label">{{ $ppnPersen ?? 12 }}</span>%</strong></label>
                                        <input type="text" class="form-control fw-bold" id="ppn_12_display" readonly value="Rp 0">
                                        <input type="hidden" name="ppn_12" id="ppn_12">
                                        <input type="hidden" id="ppn_persen" value="{{ $ppnPersen ?? 12 }}">
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <div class="col-md-12">
                                        <label for="total_bayar" class="form-label"><strong class="text-primary fs-5">TOTAL BAYAR</strong></label>
                                        <input type="text" class="form-control fw-bold fs-5 text-primary" id="total_bayar_display" readonly value="Rp 0">
                                        <input type="hidden" name="total_bayar" id="total_bayar">
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <div class="col-md-12">
                                        <label class="form-label"><strong>Terbilang:</strong></label>
                                        <div class="alert alert-info mb-0" id="terbilang_display" style="font-style: italic;">
                                            Nol Rupiah
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Signature CS Section -->
                            <div class="mb-4">
                                <h6 class="fw-bold text-primary mb-3"><i class="bi bi-pen me-2"></i>Tanda Tangan Customer Service</h6>
                                
                                <div class="row mb-3">
                                    <div class="col-md-12">
                                        <button type="button" class="btn btn-success" id="signatureButton" data-bs-toggle="modal" data-bs-target="#signaturePadModal">
                                            <i class="bi bi-pen"></i> Buat Tanda Tangan CS
                                        </button>
                                        <small class="text-muted ms-2">Klik untuk membuat tanda tangan digital</small>
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <div class="col-md-12">
                                        <div id="signaturePreview"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-12">
                                    <div class="alert alert-info">
                                        <i class="bi bi-info-circle me-2"></i>
                                        <strong>Catatan:</strong>
                                        <ul class="mb-0 mt-2">
                                            <li>Customer akan didaftarkan dengan status <strong>Calon Customer</strong></li>
                                            <li>Username akan otomatis menggunakan nomor telepon</li>
                                            <li>Password default: <strong>123456</strong> (customer dapat mengubahnya nanti)</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-12">
                                    <button type="submit" class="btn btn-primary me-2">
                                        <i class="bi bi-save me-1"></i> Simpan Pendaftaran
                                    </button>
                                    <a href="{{ route('data-customer.index') }}" class="btn btn-secondary">
                                        <i class="bi bi-arrow-left me-1"></i> Kembali
                                    </a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

    @include('components.signature-pad-modal')
@endsection

@push('scripts')
<!-- Bootstrap Datepicker JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap-datepicker@1.10.0/dist/js/bootstrap-datepicker.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-datepicker@1.10.0/dist/locales/bootstrap-datepicker.id.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const paketRadios = document.querySelectorAll('.paket-radio');
    const kategoriInput = document.getElementById('kategori_paket_id');
    const hargaPaketInput = document.getElementById('harga_paket_input');
    
    // Initialize Bootstrap Datepicker for tanggal jatuh tempo
    const today = new Date();
    const nextMonth = new Date(today.getFullYear(), today.getMonth() + 1, 1);
    const tanggalJatuhTempoHidden = document.getElementById('tanggal_jatuh_tempo'); // Field untuk server (day only)
    const tanggalJatuhTempoFull = document.getElementById('tanggal_jatuh_tempo_full'); // Field untuk perhitungan
    
    // Set default date (1st of next month)
    const defaultDate = new Date(nextMonth.getFullYear(), nextMonth.getMonth(), 1);
    const defaultYear = defaultDate.getFullYear();
    const defaultMonth = String(defaultDate.getMonth() + 1).padStart(2, '0');
    const defaultDay = '01';
    const defaultFullDate = `${defaultYear}-${defaultMonth}-${defaultDay}`;
    
    tanggalJatuhTempoFull.value = defaultFullDate;
    document.getElementById('jatuh_tempo_date').value = defaultFullDate; // Untuk disimpan ke database
    tanggalJatuhTempoHidden.value = '1'; // Hanya day
    
    $('#tanggal_jatuh_tempo_picker').datepicker({
        format: 'd MM yyyy',
        language: 'id',
        startDate: nextMonth,
        autoclose: true,
        todayHighlight: false,
        orientation: 'bottom auto'
    }).datepicker('setDate', defaultDate).on('changeDate', function(e) {
        if (e.date) {
            // Simpan tanggal lengkap untuk perhitungan prorata
            const year = e.date.getFullYear();
            const month = String(e.date.getMonth() + 1).padStart(2, '0');
            const day = String(e.date.getDate()).padStart(2, '0');
            const fullDate = `${year}-${month}-${day}`;
            
            tanggalJatuhTempoFull.value = fullDate;
            document.getElementById('jatuh_tempo_date').value = fullDate; // Untuk disimpan ke database
            
            // Simpan hanya day untuk dikirim ke server (validasi backend expect integer)
            tanggalJatuhTempoHidden.value = e.date.getDate();
            
            console.log('Tanggal jatuh tempo dipilih:', fullDate);
            console.log('Day yang dikirim ke server:', tanggalJatuhTempoHidden.value);
            calculatePayment();
        }
    }).on('show', function() {
        // Force apply CSS styles after datepicker is rendered
        setTimeout(function() {
            // Style the datepicker container
            $('.datepicker').css({
                'padding': '8px',
                'border-radius': '8px',
                'background': '#ffffff',
                'border': '1px solid #dee2e6',
                'box-shadow': '0 4px 12px rgba(0,0,0,0.15)',
                'font-family': '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
            });
            
            // Style header (month/year navigation)
            $('.datepicker table thead tr:first-child th').css({
                'background': 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
                'color': '#ffffff',
                'font-weight': '600',
                'padding': '8px',
                'border': 'none'
            });
            
            // Style day names
            $('.datepicker table thead tr:last-child th').css({
                'background': '#f8f9fa',
                'color': '#6c757d',
                'font-weight': '600',
                'font-size': '11px',
                'padding': '6px',
                'border': 'none'
            });
            
            // Style all date cells
            $('.datepicker table tr td').css({
                'padding': '4px'
            });
            
            $('.datepicker table tr td.day').css({
                'color': '#212529',
                'background': '#ffffff',
                'border': '1px solid #e9ecef',
                'font-weight': '500',
                'transition': 'all 0.2s ease'
            });
            
            // Style old/new month dates
            $('.datepicker table tr td.old, .datepicker table tr td.new').css({
                'color': '#adb5bd',
                'opacity': '0.5'
            });
            
            // Style today
            $('.datepicker table tr td.today').css({
                'background': '#fff3cd',
                'color': '#856404',
                'border': '2px solid #ffc107',
                'font-weight': '700'
            });
            
            // Style active/selected date
            $('.datepicker table tr td.active').css({
                'background': 'linear-gradient(135deg, #0d6efd 0%, #0257d5 100%)',
                'color': '#ffffff',
                'font-weight': '700',
                'border': '2px solid #0d6efd',
                'box-shadow': '0 2px 8px rgba(13, 110, 253, 0.4)',
                'transform': 'scale(1.08)'
            });
            
            // Add hover effects
            $('.datepicker table tr td.day').hover(
                function() {
                    if (!$(this).hasClass('active') && !$(this).hasClass('disabled')) {
                        $(this).css({
                            'background': '#e7f3ff',
                            'color': '#0d6efd',
                            'border-color': '#0d6efd',
                            'transform': 'scale(1.05)',
                            'cursor': 'pointer'
                        });
                    }
                },
                function() {
                    if (!$(this).hasClass('active') && !$(this).hasClass('today')) {
                        $(this).css({
                            'background': '#ffffff',
                            'color': '#212529',
                            'border-color': '#e9ecef',
                            'transform': 'scale(1)'
                        });
                    } else if ($(this).hasClass('today') && !$(this).hasClass('active')) {
                        $(this).css({
                            'background': '#fff3cd',
                            'color': '#856404',
                            'border': '2px solid #ffc107'
                        });
                    }
                }
            );
        }, 10);
    });
    
    // Handle Jenis Form (Gratis/Berbayar)
    const typeBayarRadios = document.querySelectorAll('input[name="type_bayar"]');
    const biayaRegistrasiSection = document.getElementById('biaya_registrasi_section');
    const biayaRegistrasiInput = document.getElementById('jum_biaya_registrasi');
    const biayaRegistrasiDisplay = document.getElementById('jum_biaya_registrasi_display');
    const biayaRegistrasiDefault = {{ $biayaRegistrasi ?? 0 }};
    
    function handleJenisFormChange() {
        const selectedRadio = document.querySelector('input[name="type_bayar"]:checked');
        if (!selectedRadio) return; // Exit jika tidak ada yang terpilih
        
        const selectedType = selectedRadio.value;
        
        if (!biayaRegistrasiSection || !biayaRegistrasiInput) {
            console.error('Element biaya registrasi tidak ditemukan!');
            return;
        }
        
        if (selectedType === '2') { // Gratis
            biayaRegistrasiSection.style.display = 'none';
            biayaRegistrasiInput.value = 0;
            if (biayaRegistrasiDisplay) biayaRegistrasiDisplay.value = '0';
        } else { // Berbayar
            biayaRegistrasiSection.style.display = 'block';
            biayaRegistrasiInput.value = biayaRegistrasiDefault;
            if (biayaRegistrasiDisplay) biayaRegistrasiDisplay.value = new Intl.NumberFormat('id-ID').format(biayaRegistrasiDefault);
        }
        
        calculatePayment();
    }
    
    typeBayarRadios.forEach(radio => {
        radio.addEventListener('change', handleJenisFormChange);
    });

    // Fungsi terbilang
    function terbilang(angka) {
        const bilangan = ['', 'Satu', 'Dua', 'Tiga', 'Empat', 'Lima', 'Enam', 'Tujuh', 'Delapan', 'Sembilan', 'Sepuluh', 'Sebelas'];
        
        if (angka < 12) return bilangan[angka];
        if (angka < 20) return terbilang(angka - 10) + ' Belas';
        if (angka < 100) return terbilang(Math.floor(angka / 10)) + ' Puluh ' + terbilang(angka % 10);
        if (angka < 200) return 'Seratus ' + terbilang(angka - 100);
        if (angka < 1000) return terbilang(Math.floor(angka / 100)) + ' Ratus ' + terbilang(angka % 100);
        if (angka < 2000) return 'Seribu ' + terbilang(angka - 1000);
        if (angka < 1000000) return terbilang(Math.floor(angka / 1000)) + ' Ribu ' + terbilang(angka % 1000);
        if (angka < 1000000000) return terbilang(Math.floor(angka / 1000000)) + ' Juta ' + terbilang(angka % 1000000);
        if (angka < 1000000000000) return terbilang(Math.floor(angka / 1000000000)) + ' Miliar ' + terbilang(angka % 1000000000);
        return angka;
    }

    // Fungsi untuk menghitung prorata
    function calculateProrate() {
        const hargaPaket = parseFloat(hargaPaketInput.value) || 0;
        
        if (hargaPaket === 0) {
            // Reset display jika tidak ada paket
            document.getElementById('prorate_tanggal_transaksi').textContent = '-';
            document.getElementById('prorate_jatuh_tempo').textContent = '-';
            document.getElementById('prorate_sisa_hari').textContent = '0 hari';
            document.getElementById('prorate_hari_berikutnya').textContent = '0 hari';
            document.getElementById('prorate_total_hari').textContent = '0 hari';
            document.getElementById('prorate_harga_per_hari').textContent = 'Rp 0';
            document.getElementById('prorate_biaya').textContent = 'Rp 0';
            document.getElementById('prorate_hari').value = 0;
            document.getElementById('prorate_biaya_value').value = 0;
            return 0;
        }
        
        // Tanggal transaksi (hari ini)
        const today = new Date();
        const tanggalTransaksi = today.getDate();
        const bulanTransaksi = today.getMonth(); // 0-11
        const tahunTransaksi = today.getFullYear();
        
        // Jatuh tempo berdasarkan pilihan user (dari datepicker)
        const tanggalJatuhTempoFull = document.getElementById('tanggal_jatuh_tempo_full');
        const jatuhTempoValue = tanggalJatuhTempoFull.value;
        
        let tanggalJatuhTempo, bulanJatuhTempo, tahunJatuhTempo;
        
        if (jatuhTempoValue && jatuhTempoValue.includes('-')) {
            // Format: YYYY-MM-DD dari datepicker
            const parts = jatuhTempoValue.split('-');
            tahunJatuhTempo = parseInt(parts[0]);
            bulanJatuhTempo = parseInt(parts[1]) - 1; // 0-11 untuk JavaScript Date
            tanggalJatuhTempo = parseInt(parts[2]);
        } else {
            // Fallback: jika masih format lama (hanya angka), asumsikan bulan berikutnya
            const tanggalJatuhTempoInput = document.getElementById('tanggal_jatuh_tempo');
            tanggalJatuhTempo = parseInt(tanggalJatuhTempoInput.value) || 1;
            const bulanBerikutnya = bulanTransaksi + 1;
            tahunJatuhTempo = bulanBerikutnya > 11 ? tahunTransaksi + 1 : tahunTransaksi;
            bulanJatuhTempo = bulanBerikutnya > 11 ? 0 : bulanBerikutnya;
        }
        
        // Hitung total hari dari hari ini sampai jatuh tempo
        const startDate = new Date(tahunTransaksi, bulanTransaksi, tanggalTransaksi);
        const endDate = new Date(tahunJatuhTempo, bulanJatuhTempo, tanggalJatuhTempo);
        const diffTime = endDate - startDate;
        const totalHariProrata = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
        
        // Hitung sisa hari di bulan transaksi (untuk display)
        const hariDalamBulan = new Date(tahunTransaksi, bulanTransaksi + 1, 0).getDate();
        const sisaHariBulanIni = hariDalamBulan - tanggalTransaksi + 1;
        
        // Hitung hari dari bulan-bulan di antara + hari di bulan jatuh tempo
        const hariSetelahBulanIni = totalHariProrata - sisaHariBulanIni;
        
        // Harga per hari (dibagi 30)
        const hargaPerHari = hargaPaket / 30;
        
        // Biaya prorata - TIDAK dibulatkan, tetap pakai desimal
        const biayaProrata = hargaPerHari * totalHariProrata;
        
        // Format tanggal
        const bulanNama = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];
        const tanggalTransaksiStr = tanggalTransaksi + ' ' + bulanNama[bulanTransaksi] + ' ' + tahunTransaksi;
        const tanggalJatuhTempoStr = tanggalJatuhTempo + ' ' + bulanNama[bulanJatuhTempo] + ' ' + tahunJatuhTempo;
        
        // Update display dengan 2 desimal
        document.getElementById('prorate_tanggal_transaksi').textContent = tanggalTransaksiStr;
        document.getElementById('prorate_jatuh_tempo').textContent = tanggalJatuhTempoStr;
        document.getElementById('prorate_sisa_hari').textContent = sisaHariBulanIni + ' hari';
        document.getElementById('prorate_hari_berikutnya').textContent = hariSetelahBulanIni + ' hari';
        document.getElementById('prorate_total_hari').textContent = totalHariProrata + ' hari';
        document.getElementById('prorate_harga_per_hari').textContent = 'Rp ' + new Intl.NumberFormat('id-ID', {minimumFractionDigits: 2, maximumFractionDigits: 2}).format(hargaPerHari);
        document.getElementById('prorate_biaya').textContent = 'Rp ' + new Intl.NumberFormat('id-ID', {minimumFractionDigits: 2, maximumFractionDigits: 2}).format(biayaProrata);
        
        // Save hidden values
        document.getElementById('prorate_hari').value = totalHariProrata;
        document.getElementById('prorate_biaya_value').value = biayaProrata;
        
        return biayaProrata;
    }

    // Toggle diskon type
    const diskonTypeRadios = document.querySelectorAll('input[name="diskon_type"]');
    const diskonPersentaseContainer = document.getElementById('diskon_persentase_container');
    const diskonNominalContainer = document.getElementById('diskon_nominal_container');
    const diskonPersentase = document.getElementById('diskon_persentase');
    const diskonNominal = document.getElementById('diskon_nominal');
    const diskonValue = document.getElementById('diskon_value');

    diskonTypeRadios.forEach(radio => {
        radio.addEventListener('change', function() {
            if (this.value === 'persentase') {
                diskonPersentaseContainer.style.display = 'block';
                diskonNominalContainer.style.display = 'none';
                diskonNominal.value = 0;
            } else {
                diskonPersentaseContainer.style.display = 'none';
                diskonNominalContainer.style.display = 'block';
                diskonPersentase.value = 0;
            }
            calculatePayment();
        });
    });

    // Calculate payment function
    function calculatePayment() {
        const hargaPaket = parseFloat(hargaPaketInput.value) || 0;
        console.log('calculatePayment dipanggil, hargaPaket:', hargaPaket);
        
        const biayaReg = parseFloat(document.getElementById('jum_biaya_registrasi').value) || 0;
        const deviceFee = parseFloat(document.getElementById('device_fee').value) || 0;
        const tambahanLain = parseFloat(document.getElementById('tambahan_lain').value) || 0;
        
        // Hitung diskon
        let diskon = 0;
        const diskonType = document.querySelector('input[name="diskon_type"]:checked').value;
        
        if (diskonType === 'persentase') {
            const persen = parseFloat(diskonPersentase.value) || 0;
            diskon = hargaPaket * (persen / 100);
        } else {
            diskon = parseFloat(diskonNominal.value) || 0;
        }
        
        // Simpan nilai diskon - round ke 2 desimal
        diskonValue.value = Math.round(diskon * 100) / 100;
        
        // Harga paket setelah diskon (untuk display saja)
        const hargaPaketAfterDiskon = hargaPaket - diskon;
        
        // Hitung prorata (dari harga paket ASLI tanpa diskon)
        const biayaProrata = calculateProrate();
        
        // Sub Total Sebelum Diskon = prorata + biaya reg + device fee + tambahan lain
        const subTotalSebelumDiskon = biayaProrata + biayaReg + deviceFee + tambahanLain;
        
        // Sub Total SETELAH dikurangi diskon
        const subTotal = subTotalSebelumDiskon - diskon;
        
        // PPN dinamis (dibulatkan ke bilangan bulat)
        const ppnPersen = parseFloat(document.getElementById('ppn_persen').value) || 12;
        const ppn = Math.round(subTotal * (ppnPersen / 100));
        
        // Total Bayar
        const totalBayar = subTotal + ppn;
        
        // Update hidden inputs - round ke 2 desimal saja
        document.getElementById('sub_total').value = Math.round(subTotal * 100) / 100;
        document.getElementById('ppn_12').value = Math.round(ppn * 100) / 100;
        document.getElementById('total_bayar').value = Math.round(totalBayar * 100) / 100;
        
        // Update display inputs dengan 2 desimal untuk SEMUA harga
        let hargaDisplay = 'Rp ' + new Intl.NumberFormat('id-ID', {minimumFractionDigits: 2, maximumFractionDigits: 2}).format(hargaPaket);
        if (diskon > 0) {
            hargaDisplay += ' - Rp ' + new Intl.NumberFormat('id-ID', {minimumFractionDigits: 2, maximumFractionDigits: 2}).format(diskon) + ' = Rp ' + new Intl.NumberFormat('id-ID', {minimumFractionDigits: 2, maximumFractionDigits: 2}).format(hargaPaketAfterDiskon);
        }
        document.getElementById('harga_paket_display').value = hargaDisplay;
        document.getElementById('sub_total_display').value = 'Rp ' + new Intl.NumberFormat('id-ID', {minimumFractionDigits: 2, maximumFractionDigits: 2}).format(subTotal);
        document.getElementById('ppn_12_display').value = 'Rp ' + new Intl.NumberFormat('id-ID', {minimumFractionDigits: 2, maximumFractionDigits: 2}).format(ppn);
        document.getElementById('total_bayar_display').value = 'Rp ' + new Intl.NumberFormat('id-ID', {minimumFractionDigits: 2, maximumFractionDigits: 2}).format(totalBayar);
        document.getElementById('ppn_persen_label').textContent = ppnPersen;
        
        // Update terbilang
        const terbilangText = totalBayar > 0 ? terbilang(Math.round(totalBayar)) + ' Rupiah' : 'Nol Rupiah';
        document.getElementById('terbilang_display').textContent = terbilangText.trim().replace(/\s+/g, ' ');
    }

    // Handle paket radio button change
    paketRadios.forEach(radio => {
        radio.addEventListener('change', function() {
            if (this.checked) {
                const harga = parseFloat(this.dataset.harga) || 0;
                const kategoriId = this.dataset.kategori;
                
                console.log('Paket dipilih:', this.dataset.nama, 'Harga:', harga);
                
                hargaPaketInput.value = harga;
                kategoriInput.value = kategoriId;
                
                console.log('hargaPaketInput.value setelah diset:', hargaPaketInput.value);
                
                calculatePayment();
            }
        });
    });

    // Auto calculate when any field changes
    document.querySelectorAll('.calculate-field').forEach(field => {
        field.addEventListener('input', calculatePayment);
    });

    // Calculate when diskon changes
    diskonPersentase.addEventListener('input', calculatePayment);
    diskonNominal.addEventListener('input', calculatePayment);

    // Force integer values (remove decimal) for monetary fields
    const integerFields = ['diskon_nominal', 'jum_biaya_registrasi', 'device_fee', 'tambahan_lain'];
    integerFields.forEach(fieldId => {
        const field = document.getElementById(fieldId);
        if (field) {
            // Format on page load - remove decimal from initial value
            if (field.value) {
                field.value = Math.floor(parseFloat(field.value) || 0);
            }
            
            // Prevent decimal input
            field.addEventListener('keydown', function(e) {
                // Allow: backspace, delete, tab, escape, enter
                if ([46, 8, 9, 27, 13].indexOf(e.keyCode) !== -1 ||
                    // Allow: Ctrl+A, Ctrl+C, Ctrl+V, Ctrl+X
                    (e.keyCode === 65 && e.ctrlKey === true) ||
                    (e.keyCode === 67 && e.ctrlKey === true) ||
                    (e.keyCode === 86 && e.ctrlKey === true) ||
                    (e.keyCode === 88 && e.ctrlKey === true) ||
                    // Allow: home, end, left, right
                    (e.keyCode >= 35 && e.keyCode <= 39)) {
                    return;
                }
                // Block decimal point and comma
                if (e.key === '.' || e.key === ',') {
                    e.preventDefault();
                }
            });
            
            field.addEventListener('blur', function() {
                if (this.value) {
                    this.value = Math.floor(parseFloat(this.value) || 0);
                }
            });
            
            field.addEventListener('input', function() {
                // Remove any non-numeric characters except for leading digits
                this.value = this.value.replace(/[^\d]/g, '');
            });
            
            field.addEventListener('change', function() {
                if (this.value) {
                    this.value = Math.floor(parseFloat(this.value) || 0);
                }
            });
        }
    });

    // Get Current Location
    document.getElementById('getCurrentLocation').addEventListener('click', function() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
                document.getElementById('lat').value = position.coords.latitude;
                document.getElementById('lon').value = position.coords.longitude;
                alert('Lokasi berhasil didapatkan!');
            }, function(error) {
                alert('Gagal mendapatkan lokasi: ' + error.message);
            });
        } else {
            alert('Browser tidak mendukung geolocation');
        }
    });

    // Debug: Log form values before submit
    const registrationForm = document.getElementById('registrationForm');
    registrationForm.addEventListener('submit', function(e) {
        const tanggalJatuhTempo = document.getElementById('tanggal_jatuh_tempo').value;
        const hargaPaket = document.getElementById('harga_paket_input').value;
        
        console.log('=== FORM SUBMIT DEBUG ===');
        console.log('tanggal_jatuh_tempo value:', tanggalJatuhTempo);
        console.log('harga_paket value:', hargaPaket);
        console.log('=========================');
        
        // Let form submit normally
        // e.preventDefault(); // Uncomment this to prevent submit and see values
    });

    // Initialize form state and initial calculation
    handleJenisFormChange();
});
</script>
@endpush