@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>Edit 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">Edit</li>
            </ol>
        </nav>
    </div><!-- End Page Title -->

    <section class="section">
        @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-8">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title">Edit Data Customer: {{ $customer->name }}</h5>
                    </div>
                    <div class="card-body">
                        <form action="{{ route('data-customer.update', $customer->id) }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            @method('PUT')

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

                            <div class="row mb-3">
                                <div class="col-md-8">
                                    <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', $customer->name) }}" required>
                                    @error('name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-4">
                                    <label for="status_customer" class="form-label">Status Customer <span class="text-danger">*</span></label>
                                    <select class="form-select @error('status_customer') is-invalid @enderror" 
                                            id="status_customer" name="status_customer" required>
                                        <option value="0" {{ old('status_customer', $customer->status_customer) == 0 ? 'selected' : '' }}>Calon</option>
                                        <option value="1" {{ old('status_customer', $customer->status_customer) == 1 ? 'selected' : '' }}>Aktif</option>
                                        <option value="2" {{ old('status_customer', $customer->status_customer) == 2 ? 'selected' : '' }}>Non-Aktif</option>
                                    </select>
                                    @error('status_customer')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="row mb-3">
                                <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', $customer->email) }}" required>
                                    @error('email')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-6">
                                    <label for="username" class="form-label">Nomor HP (Username Login) <span class="text-danger">*</span></label>
                                    <input type="tel" class="form-control @error('username') is-invalid @enderror" 
                                           id="username" name="username" value="{{ old('username', $customer->username) }}" 
                                           required placeholder="Contoh: 0857... atau +62857...">
                                    @error('username')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="text-muted">
                                        <i class="bi bi-info-circle"></i> Format: 0857..., +62857..., atau 62857... (otomatis dinormalisasi ke 0857...)
                                    </small>
                                </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', $customer->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', $customer->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>

                            <hr class="my-4">
                            <h6 class="mb-3"><i class="bi bi-geo-alt-fill text-primary"></i> Data Wilayah</h6>
                            
                            @include('components.region-dropdown', [
                                'required' => true,
                                'provinceValue' => old('province_code', $customer->province_code ?? ''),
                                'regencyValue' => old('regency_code', $customer->regency_code ?? ''),
                                'districtValue' => old('district_code', $customer->district_code ?? ''),
                                'villageValue' => old('village_code', $customer->village_code ?? ''),
                            ])

                            <hr class="my-4">
                            <h6 class="mb-3"><i class="bi bi-house-fill text-primary"></i> Alamat Detail</h6>

                            <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 
                                              placeholder="Nama jalan, nomor rumah, RT/RW, dan patokan">{{ old('address', $customer->address) }}</textarea>
                                    @error('address')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="text-muted">
                                        <i class="bi bi-info-circle"></i> 
                                        Contoh: Jl. Merdeka No. 123, RT 01/RW 05, dekat Alfamart
                                    </small>
                                </div>
                            </div>

                            <!-- Location Picker Section -->
                            <div class="row mb-3">
                                <div class="col-md-12">
                                    <label class="form-label">Lokasi (Koordinat GPS)</label>
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="row mb-3">
                                                <div class="col-md-4">
                                                    <label for="lat" class="form-label">Latitude</label>
                                                    <input type="number" step="any" class="form-control @error('lat') is-invalid @enderror" 
                                                           id="lat" name="lat" value="{{ old('lat', $customer->lat ?? '-6.2088') }}" 
                                                           placeholder="-6.2088" min="-90" max="90">
                                                    @error('lat')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                                <div class="col-md-4">
                                                    <label for="lon" class="form-label">Longitude</label>
                                                    <input type="number" step="any" class="form-control @error('lon') is-invalid @enderror" 
                                                           id="lon" name="lon" value="{{ old('lon', $customer->lon ?? '106.8456') }}" 
                                                           placeholder="106.8456" min="-180" max="180">
                                                    @error('lon')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                                <div class="col-md-4">
                                                    <label class="form-label d-block">&nbsp;</label>
                                                    <button type="button" class="btn btn-success w-100" id="searchByCoordinatesBtn">
                                                        <i class="bi bi-geo-alt"></i> Cari Berdasarkan Koordinat
                                                    </button>
                                                </div>
                                            </div>
                                            
                                            <button type="button" class="btn btn-outline-primary mb-3" id="useCurrentLocation">
                                                <i class="bi bi-geo-alt-fill"></i> Gunakan Lokasi Saat Ini
                                            </button>
                                            
                                            <!-- Search Location by Text -->
                                            <div class="row mb-3">
                                                <div class="col-md-8">
                                                    <input type="text" class="form-control" id="searchLocation" 
                                                           placeholder="Cari alamat/lokasi (contoh: Jl. Sudirman Jakarta)">
                                                </div>
                                                <div class="col-md-4">
                                                    <button type="button" class="btn btn-outline-success w-100" id="searchLocationBtn">
                                                        <i class="bi bi-search"></i> Cari Lokasi
                                                    </button>
                                                </div>
                                            </div>
                                            
                                            <div id="map" style="height: 300px; width: 100%; border-radius: 8px;"></div>
                                            <small class="text-muted">
                                                <i class="bi bi-info-circle"></i> 
                                                Klik pada peta untuk memilih lokasi customer, atau gunakan tombol "Gunakan Lokasi Saat Ini"
                                            </small>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Password fields hidden - optional update only -->
                            <!-- Kosongkan jika tidak ingin mengubah password -->

                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="photo_profile" class="form-label">Foto Profile (Opsional)</label>
                                    <input type="file" class="form-control @error('photo_profile') is-invalid @enderror" 
                                           id="photo_profile" name="photo_profile" accept="image/*">
                                    @error('photo_profile')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="text-muted">Format: JPG, JPEG, PNG. Maksimal 2MB</small>

                                    @if($customer->profile)
                                        <div class="mt-2">
                                            <small class="text-muted">Foto saat ini:</small><br>
                                            <img src="{{ $customer->profile_url }}" 
                                                 alt="Current Photo" class="rounded" 
                                                 style="width: 100px; height: 100px; object-fit: cover;">
                                        </div>
                                    @endif
                                </div>
                                <div class="col-md-6">
                                    <label for="rumah_tampak_depan" class="form-label">Foto Rumah Tampak Depan (Opsional)</label>
                                    <input type="file" class="form-control @error('rumah_tampak_depan') is-invalid @enderror" 
                                           id="rumah_tampak_depan" name="rumah_tampak_depan" accept="image/*">
                                    @error('rumah_tampak_depan')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="text-muted">Format: JPG, JPEG, PNG. Maksimal 2MB</small>

                                    @if($customer->rumah_tampak_depan)
                                        <div class="mt-2">
                                            <small class="text-muted">Foto saat ini:</small><br>
                                            <img src="{{ $customer->rumah_tampak_depan_url }}" 
                                                 alt="Foto Rumah" class="rounded" 
                                                 style="width: 100px; height: 100px; object-fit: cover;">
                                        </div>
                                    @endif
                                </div>
                            </div>

                            <hr>

                            <!-- Paket Internet -->
                            <h6 class="mb-3"><i class="bi bi-wifi text-primary"></i> Paket Internet (Opsional)</h6>
                            
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="kategori_paket_id" class="form-label">Kategori Paket</label>
                                    <select class="form-select @error('kategori_paket_id') is-invalid @enderror" 
                                            id="kategori_paket_id" name="kategori_paket_id">
                                        <option value="">-- Pilih Kategori Paket --</option>
                                        @foreach($kategoriPakets as $kategori)
                                            <option value="{{ $kategori->id }}" 
                                                {{ old('kategori_paket_id', $customer->kategori_paket_id) == $kategori->id ? 'selected' : '' }}>
                                                {{ $kategori->nama_kategori }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('kategori_paket_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-6">
                                    <label for="paket_internet_id" class="form-label">Paket Internet</label>
                                    <select class="form-select @error('paket_internet_id') is-invalid @enderror" 
                                            id="paket_internet_id" name="paket_internet_id">
                                        <option value="">-- Pilih Paket Internet --</option>
                                        @foreach($paketInternets as $paket)
                                            <option value="{{ $paket->id }}" 
                                                data-kategori="{{ $paket->kategori_paket_id }}"
                                                data-harga="{{ $paket->harga }}"
                                                {{ old('paket_internet_id', $customer->paket_internet_id) == $paket->id ? 'selected' : '' }}
                                                style="display: {{ old('kategori_paket_id', $customer->kategori_paket_id) == $paket->kategori_paket_id || !old('kategori_paket_id', $customer->kategori_paket_id) ? 'block' : 'none' }}">
                                                {{ $paket->nama_paket }} - {{ $paket->kecepatan }} Mbps - Rp {{ number_format($paket->harga, 2, ',', '.') }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('paket_internet_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <hr class="my-4">
                            <h6 class="mb-3"><i class="bi bi-wifi text-primary"></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', $customer->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', $customer->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>

                            <hr class="my-4">
                            <h6 class="mb-3"><i class="bi bi-sticky text-primary"></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 customer ini (opsional)">{{ old('catatan', $customer->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', $customer->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 customer ini</small>
                                </div>
                            </div>

                            <hr class="my-4">
                            <h6 class="mb-3"><i class="bi bi-calculator text-primary"></i> Detail Pembayaran</h6>
                            
                            <input type="hidden" name="harga_paket" id="harga_paket_input" value="{{ old('harga_paket', $customer->harga_paket ?? 0) }}">
                            
                            <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" 
                                                {{ old('diskon_type', $customer->diskon_type ?? 'persentase') == '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"
                                                {{ old('diskon_type', $customer->diskon_type ?? 'persentase') == 'nominal' ? 'checked' : '' }}>
                                            <label class="form-check-label" for="diskon_type_nominal">
                                                Nominal
                                            </label>
                                        </div>
                                    </div>
                                    <div id="diskon_persentase_container" style="display: {{ old('diskon_type', $customer->diskon_type ?? 'persentase') == 'persentase' ? 'block' : 'none' }}">
                                        <div class="input-group">
                                            <input type="number" class="form-control" id="diskon_persentase" name="diskon_persentase" 
                                                value="{{ old('diskon_persentase', $customer->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: {{ old('diskon_type', $customer->diskon_type ?? 'persentase') == 'nominal' ? 'block' : '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', $customer->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="{{ old('diskon_value', $customer->diskon_value ?? 0) }}">
                                    <small class="text-muted">Diskon akan mengurangi harga paket</small>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="jum_biaya_registrasi" class="form-label">Biaya Registrasi</label>
                                    <div class="input-group">
                                        <span class="input-group-text">Rp</span>
                                        <input type="number" class="form-control calculate-field @error('jum_biaya_registrasi') is-invalid @enderror" 
                                               id="jum_biaya_registrasi" name="jum_biaya_registrasi" 
                                               value="{{ old('jum_biaya_registrasi', $customer->jum_biaya_registrasi ?? 0) }}" min="0" step="1"
                                               oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                                        @error('jum_biaya_registrasi')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <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', $customer->device_fee ?? 0) }}" min="0" step="1"
                                               oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                                        @error('device_fee')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <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', $customer->tambahan_lain ?? 0) }}" min="0" step="1"
                                               oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                                        @error('tambahan_lain')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </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', $customer->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="{{ old('jatuh_tempo_date', $customer->jatuh_tempo_date ?? '') }}">
                                    @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>

            <hr>

                            <!-- 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> @if($customer->ttd_cs) Ubah @else Buat @endif 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">
                                            @if($customer->ttd_cs)
                                                <div class="border rounded p-2 bg-light">
                                                    <img src="{{ asset($customer->ttd_cs) }}" alt="Tanda Tangan CS" class="img-fluid" style="max-height: 100px;">
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-12">
                                    <div class="d-flex justify-content-between">
                                        <a href="{{ route('data-customer.index') }}" class="btn btn-secondary">
                                            <i class="bi bi-arrow-left"></i> Kembali
                                        </a>
                                        <button type="submit" class="btn btn-primary">
                                            <i class="bi bi-check-circle"></i> Update Customer
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="card">
                    <div class="card-header">
                        <h6 class="card-title">Info Customer Saat Ini</h6>
                    </div>
                    <div class="card-body">
                        <div class="text-center mb-3">
                            @if($customer->photo_profile)
                                <img src="{{ asset('storage/' . $customer->photo_profile) }}" 
                                     alt="Photo" class="rounded-circle" 
                                     style="width: 80px; height: 80px; object-fit: cover;">
                            @else
                                <div class="bg-secondary rounded-circle d-flex align-items-center justify-content-center mx-auto" 
                                     style="width: 80px; height: 80px;">
                                    <i class="bi bi-person text-white fs-3"></i>
                                </div>
                            @endif
                            <h6 class="mt-2">{{ $customer->name }}</h6>
                            <div class="mb-1">
                                <span class="badge bg-{{ $customer->status === 'active' ? 'success' : 'danger' }}">
                                    {{ $customer->status === 'active' ? 'Aktif' : 'Nonaktif' }}
                                </span>
                            </div>
                            <div>
                                @php
                                    $statusCustomerBadge = [
                                        0 => ['class' => 'warning', 'label' => 'Calon'],
                                        1 => ['class' => 'success', 'label' => 'Aktif'],
                                        2 => ['class' => 'secondary', 'label' => 'Non-Aktif'],
                                    ];
                                    $statusInfo = $statusCustomerBadge[$customer->status_customer ?? 0] ?? ['class' => 'secondary', 'label' => 'Unknown'];
                                @endphp
                                <span class="badge bg-{{ $statusInfo['class'] }}">
                                    <i class="bi bi-person-badge"></i> {{ $statusInfo['label'] }}
                                </span>
                            </div>
                        </div>

                        <table class="table table-sm">
                            <tr>
                                <td><strong>Username:</strong></td>
                                <td>{{ $customer->username }}</td>
                            </tr>
                            <tr>
                                <td><strong>Email:</strong></td>
                                <td>{{ $customer->email }}</td>
                            </tr>
                            <tr>
                                <td><strong>Phone:</strong></td>
                                <td>{{ $customer->phone }}</td>
                            </tr>
                            <tr>
                                <td><strong>Bergabung:</strong></td>
                                <td>{{ $customer->created_at->format('d M Y') }}</td>
                            </tr>
                        </table>

                        <hr>

                        <h6><i class="bi bi-geo-alt text-primary"></i> Alamat</h6>
                        <p class="text-muted">{{ $customer->address }}</p>
                        
                        @if($customer->lat && $customer->lon)
                            <h6><i class="bi bi-pin-map text-success"></i> Koordinat</h6>
                            <p class="text-muted">
                                <small>
                                    Lat: {{ $customer->lat }}<br>
                                    Lon: {{ $customer->lon }}
                                </small>
                            </p>
                        @endif
                    </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>
<!-- Google Maps API -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key={{ config('google.maps.api_key') }}&callback=initMap&libraries=places&loading=async"></script>

<script>
// Customer data dari server
const customerUpdatedAt = new Date('{{ $customer->updated_at }}');
const customerCreatedAt = new Date('{{ $customer->created_at }}');

// Initialize Bootstrap Datepicker for tanggal jatuh tempo
document.addEventListener('DOMContentLoaded', function() {
    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 dari database atau bulan berikutnya
    let defaultDate;
    const existingFullDate = document.getElementById('jatuh_tempo_date').value;
    
    if (existingFullDate) {
        // Jika ada tanggal lengkap dari database, gunakan itu
        defaultDate = new Date(existingFullDate);
        tanggalJatuhTempoFull.value = existingFullDate;
    } else {
        // Fallback: gunakan day dari database + bulan berikutnya
        const dayValue = parseInt(tanggalJatuhTempoHidden.value) || 1;
        defaultDate = new Date(nextMonth.getFullYear(), nextMonth.getMonth(), dayValue);
        const year = defaultDate.getFullYear();
        const month = String(defaultDate.getMonth() + 1).padStart(2, '0');
        const day = String(defaultDate.getDate()).padStart(2, '0');
        tanggalJatuhTempoFull.value = `${year}-${month}-${day}`;
        document.getElementById('jatuh_tempo_date').value = `${year}-${month}-${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);
            
            // Trigger recalculation of prorata and payment
            if (typeof calculatePayment === 'function') {
                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);
    });
});

let map;
let marker;
let geocoder;
let placesService;

// Initialize map
function initMap() {
    // Get current location or default
    const currentLat = parseFloat(document.getElementById('lat').value) || -6.2088;
    const currentLng = parseFloat(document.getElementById('lon').value) || 106.8456;
    const currentLocation = { lat: currentLat, lng: currentLng };

    // Create map
    map = new google.maps.Map(document.getElementById('map'), {
        center: currentLocation,
        zoom: 15,
        mapTypeControl: false,
        streetViewControl: false,
        fullscreenControl: false
    });

    // Initialize geocoder and places service
    geocoder = new google.maps.Geocoder();
    placesService = new google.maps.places.PlacesService(map);

    // Create marker
    marker = new google.maps.Marker({
        position: currentLocation,
        map: map,
        draggable: true,
        title: 'Lokasi Customer'
    });

    // Update coordinates when marker is dragged
    marker.addListener('dragend', function() {
        updateCoordinates(marker.getPosition().lat(), marker.getPosition().lng());
    });

    // Update coordinates when map is clicked
    map.addListener('click', function(event) {
        const lat = event.latLng.lat();
        const lng = event.latLng.lng();
        
        marker.setPosition(event.latLng);
        updateCoordinates(lat, lng);
    });

    // Initialize autocomplete for search input
    initializeAutocomplete();
}

// Update coordinate inputs
function updateCoordinates(lat, lng) {
    document.getElementById('lat').value = lat.toFixed(6);
    document.getElementById('lon').value = lng.toFixed(6);
}

// Initialize autocomplete for search input
function initializeAutocomplete() {
    const searchInput = document.getElementById('searchLocation');
    
    // Create autocomplete object restricted to Indonesia
    const autocomplete = new google.maps.places.Autocomplete(searchInput, {
        componentRestrictions: { country: ['id'] }, // Restrict to Indonesia
        fields: ['place_id', 'geometry', 'name', 'formatted_address'],
        types: ['establishment', 'geocode'] // Include both places and addresses
    });

    // When a place is selected from autocomplete
    autocomplete.addListener('place_changed', function() {
        const place = autocomplete.getPlace();
        
        if (!place.geometry || !place.geometry.location) {
            showSearchMessage('Lokasi tidak ditemukan untuk: ' + place.name, 'warning');
            return;
        }

        // Move map and marker to selected place
        moveToLocation(place.geometry.location, place.formatted_address || place.name);
    });
}

// Search location function
function searchLocation() {
    const searchQuery = document.getElementById('searchLocation').value.trim();
    
    if (!searchQuery) {
        showSearchMessage('Masukkan alamat atau nama lokasi untuk dicari', 'warning');
        return;
    }

    // Show loading state
    const searchBtn = document.getElementById('searchLocationBtn');
    const originalText = searchBtn.innerHTML;
    searchBtn.innerHTML = '<i class="spinner-border spinner-border-sm"></i> Mencari...';
    searchBtn.disabled = true;

    // Use Geocoding API to search for the location
    geocoder.geocode({
        address: searchQuery,
        componentRestrictions: { country: 'ID' }, // Restrict to Indonesia
        region: 'ID'
    }, function(results, status) {
        // Restore button state
        searchBtn.innerHTML = originalText;
        searchBtn.disabled = false;

        if (status === 'OK' && results[0]) {
            const location = results[0].geometry.location;
            const address = results[0].formatted_address;
            
            // Move map and marker to found location
            moveToLocation(location, address);
            showSearchMessage('Lokasi ditemukan: ' + address, 'success');
        } else {
            showSearchMessage('Lokasi tidak ditemukan. Coba dengan kata kunci yang lebih spesifik.', 'danger');
        }
    });
}

// Move map and marker to specific location
function moveToLocation(location, address) {
    const lat = location.lat();
    const lng = location.lng();
    
    // Center map to location
    map.setCenter(location);
    map.setZoom(16); // Zoom in for better view
    
    // Move marker
    marker.setPosition(location);
    
    // Update coordinate inputs
    updateCoordinates(lat, lng);
    
    // Update address field if found address is more complete
    if (address && address.length > document.getElementById('address').value.length) {
        if (confirm('Gunakan alamat yang ditemukan?\n\n' + address)) {
            document.getElementById('address').value = address;
        }
    }
}

// Show search message
function showSearchMessage(message, type) {
    // Remove existing alerts
    const existingAlert = document.querySelector('#search-alert');
    if (existingAlert) {
        existingAlert.remove();
    }
    
    // Create new alert
    const alertDiv = document.createElement('div');
    alertDiv.id = 'search-alert';
    alertDiv.className = `alert alert-${type} alert-dismissible fade show mt-2`;
    alertDiv.innerHTML = `
        ${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    `;
    
    // Insert after search button
    const searchBtn = document.getElementById('searchLocationBtn');
    searchBtn.parentNode.parentNode.appendChild(alertDiv);
    
    // Auto remove after 5 seconds
    setTimeout(() => {
        if (alertDiv.parentNode) {
            alertDiv.remove();
        }
    }, 5000);
}

// Search by coordinates function
function searchByCoordinates() {
    const latInput = document.getElementById('lat');
    const lonInput = document.getElementById('lon');
    const lat = parseFloat(latInput.value);
    const lng = parseFloat(lonInput.value);
    
    // Validate coordinates
    if (isNaN(lat) || isNaN(lng)) {
        showSearchMessage('Masukkan koordinat latitude dan longitude yang valid', 'warning');
        return;
    }
    
    if (lat < -90 || lat > 90) {
        showSearchMessage('Latitude harus antara -90 dan 90', 'warning');
        latInput.focus();
        return;
    }
    
    if (lng < -180 || lng > 180) {
        showSearchMessage('Longitude harus antara -180 dan 180', 'warning');
        lonInput.focus();
        return;
    }
    
    // Show loading state
    const searchBtn = document.getElementById('searchByCoordinatesBtn');
    const originalText = searchBtn.innerHTML;
    searchBtn.innerHTML = '<i class="spinner-border spinner-border-sm"></i> Mencari...';
    searchBtn.disabled = true;
    
    // Create location object
    const location = new google.maps.LatLng(lat, lng);
    
    // Use Reverse Geocoding to get address from coordinates
    geocoder.geocode({ location: location }, function(results, status) {
        // Restore button state
        searchBtn.innerHTML = originalText;
        searchBtn.disabled = false;
        
        if (status === 'OK') {
            if (results[0]) {
                const address = results[0].formatted_address;
                
                // Move map and marker to coordinates
                map.setCenter(location);
                map.setZoom(16);
                marker.setPosition(location);
                
                // Update address field
                const addressField = document.getElementById('address');
                if (confirm('Lokasi ditemukan:\n\n' + address + '\n\nGunakan alamat ini?')) {
                    addressField.value = address;
                }
                
                showSearchMessage('✓ Lokasi berhasil ditemukan: ' + address, 'success');
            } else {
                showSearchMessage('Koordinat valid, tetapi tidak ditemukan alamat spesifik. Peta telah dipindahkan ke koordinat tersebut.', 'info');
                
                // Still move map even if no address found
                map.setCenter(location);
                map.setZoom(16);
                marker.setPosition(location);
            }
        } else {
            showSearchMessage('Gagal menemukan lokasi dari koordinat. Status: ' + status, 'danger');
        }
    });
}

// Search by coordinates button click
document.getElementById('searchByCoordinatesBtn').addEventListener('click', searchByCoordinates);

// Use current location
document.getElementById('useCurrentLocation').addEventListener('click', function() {
    if (navigator.geolocation) {
        // Show loading state
        const btn = this;
        const originalText = btn.innerHTML;
        btn.innerHTML = '<i class="spinner-border spinner-border-sm"></i> Mendeteksi...';
        btn.disabled = true;

        navigator.geolocation.getCurrentPosition(function(position) {
            const lat = position.coords.latitude;
            const lng = position.coords.longitude;
            
            const currentLocation = { lat: lat, lng: lng };
            
            map.setCenter(currentLocation);
            map.setZoom(16);
            marker.setPosition(currentLocation);
            updateCoordinates(lat, lng);
            
            // Show success message
            btn.innerHTML = '<i class="bi bi-check-circle-fill"></i> Lokasi Terdeteksi!';
            btn.classList.add('btn-success');
            btn.classList.remove('btn-outline-primary');
            
            setTimeout(() => {
                btn.innerHTML = originalText;
                btn.classList.remove('btn-success');
                btn.classList.add('btn-outline-primary');
                btn.disabled = false;
            }, 2000);
            
        }, function(error) {
            // Restore button state
            btn.innerHTML = originalText;
            btn.disabled = false;
            
            let errorMessage = 'Gagal mendapatkan lokasi: ';
            switch(error.code) {
                case error.PERMISSION_DENIED:
                    errorMessage += 'Akses lokasi ditolak. Silakan izinkan akses lokasi di browser.';
                    break;
                case error.POSITION_UNAVAILABLE:
                    errorMessage += 'Informasi lokasi tidak tersedia.';
                    break;
                case error.TIMEOUT:
                    errorMessage += 'Timeout dalam mendapatkan lokasi.';
                    break;
                default:
                    errorMessage += 'Hanya dapat digunakan di HTTPS atau localhost. Gunakan pencarian lokasi sebagai alternatif.';
                    break;
            }
            
            showSearchMessage(errorMessage, 'warning');
        }, {
            enableHighAccuracy: true,
            timeout: 10000,
            maximumAge: 60000
        });
    } else {
        showSearchMessage('Browser tidak mendukung deteksi lokasi. Gunakan pencarian lokasi sebagai alternatif.', 'warning');
    }
});

// Search location button click
document.getElementById('searchLocationBtn').addEventListener('click', searchLocation);

// Search on Enter key
document.getElementById('searchLocation').addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
        e.preventDefault();
        searchLocation();
    }
});

// Handle kategori paket change - filter paket internet
const kategoriPaketSelect = document.getElementById('kategori_paket_id');
const paketInternetSelect = document.getElementById('paket_internet_id');
const allPaketOptions = Array.from(paketInternetSelect.querySelectorAll('option[data-kategori]'));

kategoriPaketSelect.addEventListener('change', function() {
    const kategoriId = this.value;
    
    // Reset paket selection
    paketInternetSelect.value = '';
    
    // Show/hide options based on kategori
    allPaketOptions.forEach(option => {
        if (!kategoriId || option.dataset.kategori == kategoriId) {
            option.style.display = 'block';
        } else {
            option.style.display = 'none';
        }
    });
    
    // Update harga paket when kategori changes
    updateHargaPaket();
});

// Update harga paket when paket internet changes
paketInternetSelect.addEventListener('change', updateHargaPaket);

function updateHargaPaket() {
    const selectedOption = paketInternetSelect.options[paketInternetSelect.selectedIndex];
    if (selectedOption && selectedOption.value) {
        // Get harga from data attribute
        const harga = parseFloat(selectedOption.dataset.harga) || 0;
        console.log('Paket dipilih, Harga:', harga);
        document.getElementById('harga_paket_input').value = harga;
    } else {
        document.getElementById('harga_paket_input').value = 0;
    }
    calculatePayment();
}

// 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();
    });
});

// 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(document.getElementById('harga_paket_input').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 (gunakan updated_at atau created_at dari customer)
    const tanggalTransaksiDate = customerUpdatedAt || customerCreatedAt || new Date();
    const tanggalTransaksi = tanggalTransaksiDate.getDate();
    const bulanTransaksi = tanggalTransaksiDate.getMonth(); // 0-11
    const tahunTransaksi = tanggalTransaksiDate.getFullYear();
    
    // Jatuh tempo berdasarkan pilihan user (dari datepicker)
    // Prioritas: jatuh_tempo_date (dari DB) > tanggal_jatuh_tempo_full (dari datepicker saat ini)
    const jatuhTempoDateInput = document.getElementById('jatuh_tempo_date');
    const tanggalJatuhTempoFull = document.getElementById('tanggal_jatuh_tempo_full');
    
    // Gunakan jatuh_tempo_date dari database sebagai prioritas pertama
    let jatuhTempoValue = jatuhTempoDateInput.value || tanggalJatuhTempoFull.value;
    
    let tanggalJatuhTempo, bulanJatuhTempo, tahunJatuhTempo;
    
    if (jatuhTempoValue && jatuhTempoValue.includes('-')) {
        // Format: YYYY-MM-DD dari datepicker atau database
        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
    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
    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 (rounded to 2 decimals only)
    document.getElementById('prorate_hari').value = totalHariProrata;
    document.getElementById('prorate_biaya_value').value = Math.round(biayaProrata * 100) / 100;
    
    return biayaProrata;
}

// Calculate payment function
function calculatePayment() {
    const hargaPaket = parseFloat(document.getElementById('harga_paket_input').value) || 0;
    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
    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 (rounded to 2 decimals only)
    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, ' ');
}

// 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);

// Calculate when tanggal jatuh tempo changes
const tanggalJatuhTempoSelect = document.getElementById('tanggal_jatuh_tempo');
if (tanggalJatuhTempoSelect) {
    tanggalJatuhTempoSelect.addEventListener('change', 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);
            }
        });
    }
});

// Initial calculation on page load
calculatePayment();
</script>
@endpush