@extends('layout.app')

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

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

<div class="container-fluid py-4">
    <div class="row">
        <div class="col-12">
            <div class="card mb-4" style="border: none; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);">
                <div class="card-header pb-3">
                    <h6 class="mb-0 font-weight-bold d-flex align-items-center" style="font-size: 0.875rem; color: #344767;">
                        <i class="material-symbols-rounded me-2" style="font-size: 20px; line-height: 1; color: #5e72e4;">edit</i> Form Edit Pelanggan
                    </h6>
                </div>
                <div class="card-body pt-3">
                    <div class="alert alert-warning text-white">
                        <i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">warning</i>
                        <strong>Perhatian:</strong> Nomor pelanggan tidak dapat diubah setelah dibuat.
                    </div>
                    
                <form method="POST" action="{{ route('pelanggan.update', $pelanggan) }}" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="nomor_pelanggan" class="form-label">Nomor Pelanggan</label>
                                <input type="text" class="form-control" 
                                       id="nomor_pelanggan" 
                                       value="{{ $pelanggan->nomor_pelanggan ?? 'N/A' }}" 
                                       readonly>
                                <small class="text-muted">Nomor pelanggan tidak dapat diubah</small>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="nama" class="form-label">Nama Lengkap <span class="text-danger">*</span></label>
                                <input type="text" class="form-control @error('nama') is-invalid @enderror" 
                                       id="nama" name="nama" value="{{ old('nama', $pelanggan->nama) }}" required>
                                @error('nama')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="nomor_telepon" class="form-label">Nomor Telepon (WhatsApp) <span class="text-danger">*</span></label>
                                <input type="text" class="form-control @error('nomor_telepon') is-invalid @enderror" 
                                       id="nomor_telepon" name="nomor_telepon" value="{{ old('nomor_telepon', $pelanggan->nomor_telepon) }}" required>
                                <div id="nomor_telepon_feedback" class="invalid-feedback d-none"></div>
                                <small id="nomor_telepon_help" class="form-text text-muted d-none"></small>
                                @error('nomor_telepon')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="email" class="form-label">Email</label>
                                <input type="email" class="form-control @error('email') is-invalid @enderror" 
                                       id="email" name="email" value="{{ old('email', $pelanggan->email) }}">
                                <div id="email_feedback" class="invalid-feedback d-none"></div>
                                <small id="email_help" class="form-text text-muted d-none"></small>
                                @error('email')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="tipe_pelanggan" class="form-label">Tipe Pelanggan <span class="text-danger">*</span></label>
                                <select class="form-control @error('tipe_pelanggan') is-invalid @enderror" 
                                        id="tipe_pelanggan" name="tipe_pelanggan" required>
                                    <option value="">Pilih Tipe</option>
                                    <option value="Rumahan" {{ old('tipe_pelanggan', $pelanggan->tipe_pelanggan) == 'Rumahan' ? 'selected' : '' }}>Rumahan</option>
                                    <option value="Kantor" {{ old('tipe_pelanggan', $pelanggan->tipe_pelanggan) == 'Kantor' ? 'selected' : '' }}>Kantor</option>
                                    <option value="RT" {{ old('tipe_pelanggan', $pelanggan->tipe_pelanggan) == 'RT' ? 'selected' : '' }}>RT</option>
                                    <option value="Reseller" {{ old('tipe_pelanggan', $pelanggan->tipe_pelanggan) == 'Reseller' ? 'selected' : '' }}>Reseller</option>
                                </select>
                                @error('tipe_pelanggan')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-group mb-3">
                        <label for="alamat" class="form-label">Alamat <span class="text-danger">*</span></label>
                        <textarea class="form-control @error('alamat') is-invalid @enderror" 
                                  id="alamat" name="alamat" rows="3" required>{{ old('alamat', $pelanggan->alamat) }}</textarea>
                        @error('alamat')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="area_id" class="form-label">Area <span class="text-danger">*</span></label>
                                <select class="form-control @error('area_id') is-invalid @enderror" 
                                        id="area_id" name="area_id" required>
                                    <option value="">Pilih Area</option>
                                    @foreach($areas as $area)
                                    <option value="{{ $area->id }}" {{ old('area_id', $pelanggan->area_id) == $area->id ? 'selected' : '' }}>
                                        {{ $area->provinsi ?? '-' }} - {{ $area->kabupaten_kota ?? '-' }} - {{ $area->kecamatan ?? '-' }} - {{ $area->desa_kelurahan ?? '-' }}
                                    </option>
                                    @endforeach
                                </select>
                                @error('area_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="paket_id" class="form-label">Paket Internet <span class="text-danger">*</span></label>
                                <select class="form-control @error('paket_id') is-invalid @enderror" 
                                        id="paket_id" name="paket_id" required>
                                    <option value="">Pilih Paket</option>
                                    @foreach($paket as $p)
                                    <option value="{{ $p->id }}" {{ old('paket_id', $pelanggan->paket_id) == $p->id ? 'selected' : '' }}>
                                        {{ $p->nama_paket }} - {{ $p->kecepatan }} - {{ $p->formatted_price }}
                                    </option>
                                    @endforeach
                                </select>
                                @error('paket_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group mb-3">
                                <label for="rt" class="form-label">RT</label>
                                <input type="text" class="form-control @error('rt') is-invalid @enderror" 
                                       id="rt" name="rt" value="{{ old('rt', $pelanggan->rt) }}">
                                @error('rt')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group mb-3">
                                <label for="rw" class="form-label">RW</label>
                                <input type="text" class="form-control @error('rw') is-invalid @enderror" 
                                       id="rw" name="rw" value="{{ old('rw', $pelanggan->rw) }}">
                                @error('rw')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group mb-3">
                                <label for="status_layanan" class="form-label">Status Layanan <span class="text-danger">*</span></label>
                                <select class="form-control @error('status_layanan') is-invalid @enderror" 
                                        id="status_layanan" name="status_layanan" required>
                                    <option value="">Pilih Status</option>
                                    <option value="Pelanggan Baru" {{ old('status_layanan', $pelanggan->status_layanan) == 'Pelanggan Baru' ? 'selected' : '' }}>Pelanggan Baru</option>
                                    <option value="Aktif" {{ old('status_layanan', $pelanggan->status_layanan) == 'Aktif' ? 'selected' : '' }}>Aktif</option>
                                    <option value="Suspend" {{ old('status_layanan', $pelanggan->status_layanan) == 'Suspend' ? 'selected' : '' }}>Suspend</option>
                                    <option value="Berhenti" {{ old('status_layanan', $pelanggan->status_layanan) == 'Berhenti' ? 'selected' : '' }}>Berhenti</option>
                                    <option value="Nonaktif" {{ old('status_layanan', $pelanggan->status_layanan) == 'Nonaktif' ? 'selected' : '' }}>Nonaktif</option>
                                </select>
                                @error('status_layanan')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="tanggal_aktif" class="form-label">Tanggal Aktif <span class="text-danger">*</span></label>
                                <input type="date" class="form-control @error('tanggal_aktif') is-invalid @enderror" 
                                       id="tanggal_aktif" name="tanggal_aktif" value="{{ old('tanggal_aktif', $pelanggan->tanggal_aktif->format('Y-m-d')) }}" required>
                                @error('tanggal_aktif')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="text-muted">Tanggal mulai aktif layanan</small>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label class="form-label">Periode Berlangganan</label>
                                @php
                                    // Get latest tagihan periode, or calculate from tanggal_aktif
                                    $periodeAwal = null;
                                    $tanggalBerakhir = null;
                                    
                                    if ($pelanggan->tagihan && $pelanggan->tagihan->count() > 0) {
                                        $latestTagihan = $pelanggan->tagihan->sortByDesc(function($tagihan) {
                                            return $tagihan->periode_akhir ? $tagihan->periode_akhir->format('Y-m-d') : '';
                                        })->first();
                                        if ($latestTagihan) {
                                            $periodeAwal = $latestTagihan->periode_awal;
                                            $tanggalBerakhir = $latestTagihan->periode_akhir;
                                        }
                                    }
                                    
                                    // If no tagihan, calculate from tanggal_aktif
                                    // Periode: dari tanggal aktif ke tanggal yang sama di bulan berikutnya
                                    if (!$tanggalBerakhir && $pelanggan->tanggal_aktif) {
                                        $tanggalAktif = \Carbon\Carbon::parse($pelanggan->tanggal_aktif);
                                        $periodeAwal = $tanggalAktif->copy();
                                        $tanggalBerakhir = $tanggalAktif->copy()->addMonth();
                                    }
                                @endphp
                                <input type="text" class="form-control" 
                                       value="{{ $periodeAwal && $tanggalBerakhir ? \Carbon\Carbon::parse($periodeAwal)->format('d/m/Y') . ' - ' . \Carbon\Carbon::parse($tanggalBerakhir)->format('d/m/Y') : ($tanggalBerakhir ? \Carbon\Carbon::parse($tanggalBerakhir)->format('d/m/Y') : '-') }}" 
                                       readonly 
                                       style="background-color: #f8f9fa;">
                                <small class="text-muted">
                                    @if($tanggalBerakhir)
                                        @php
                                            $tanggalBerakhirCarbon = \Carbon\Carbon::parse($tanggalBerakhir);
                                            $now = \Carbon\Carbon::now();
                                            $daysUntilExpiry = $now->diffInDays($tanggalBerakhirCarbon, false);
                                        @endphp
                                        @if($daysUntilExpiry > 0)
                                            <span class="text-info">
                                                <i class="ni ni-time-alarm"></i> {{ $daysUntilExpiry }} hari lagi
                                            </span>
                                        @elseif($daysUntilExpiry == 0)
                                            <span class="text-warning">
                                                <i class="ni ni-notification-70"></i> Berakhir hari ini
                                            </span>
                                        @else
                                            <span class="text-danger">
                                                <i class="ni ni-notification-70"></i> Terlambat {{ abs($daysUntilExpiry) }} hari
                                            </span>
                                        @endif
                                    @else
                                        Diambil dari tagihan terbaru atau dihitung dari tanggal aktif
                                    @endif
                                </small>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="latitude" class="form-label">Latitude</label>
                                <input type="number" step="any" class="form-control @error('latitude') is-invalid @enderror" 
                                       id="latitude" name="latitude" value="{{ old('latitude', $pelanggan->latitude) }}">
                                @error('latitude')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-group mb-3">
                        <label for="longitude" class="form-label">Longitude</label>
                        <input type="number" step="any" class="form-control @error('longitude') is-invalid @enderror" 
                               id="longitude" name="longitude" value="{{ old('longitude', $pelanggan->longitude) }}">
                        @error('longitude')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    @if(config('librenms.enabled'))
                    <div class="form-group mb-3">
                        <label for="librenms_port_id" class="form-label">LibreNMS Port ID</label>
                        <input type="number" 
                               class="form-control @error('librenms_port_id') is-invalid @enderror" 
                               id="librenms_port_id" 
                               name="librenms_port_id" 
                               value="{{ old('librenms_port_id', $pelanggan->librenms_port_id) }}" 
                               placeholder="ID port di LibreNMS">
                        <small class="text-muted">Opsional: ID port di LibreNMS untuk monitoring bandwidth</small>
                        @error('librenms_port_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    @endif
                    
                    <!-- Foto Upload Section -->
                    <div class="card shadow-sm mb-4">
                        <div class="card-header bg-gradient-info text-white">
                            <h6 class="m-0 font-weight-bold">
                                <i class="ni ni-image mr-2"></i>Upload Foto
                            </h6>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group mb-3">
                                        <label for="foto" class="form-label">Foto Pelanggan</label>
                                        @if($pelanggan->foto)
                                        <div class="mb-2">
                                            <img src="{{ asset('storage/' . $pelanggan->foto) }}" alt="Foto Pelanggan" class="img-thumbnail" style="max-width: 200px; max-height: 200px;">
                                            <p class="text-muted small mb-0">Foto saat ini</p>
                                        </div>
                                        @endif
                                        <div class="custom-file">
                                            <input type="file" class="custom-file-input @error('foto') is-invalid @enderror" 
                                                   id="foto" name="foto" accept="image/*">
                                            <label class="custom-file-label" for="foto">Pilih foto pelanggan baru...</label>
                                        </div>
                                        <small class="text-muted">Format: JPG, PNG, JPEG (Max: 5MB). Kosongkan jika tidak ingin mengubah.</small>
                                        <div id="fotoPreview" class="mt-3" style="display: none;">
                                            <img id="previewFoto" src="" alt="Preview" class="img-thumbnail" style="max-width: 300px; max-height: 300px;">
                                        </div>
                                        @error('foto')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group mb-3">
                                        <label for="foto_ktp" class="form-label">Foto KTP</label>
                                        @if($pelanggan->foto_ktp)
                                        <div class="mb-2">
                                            <img src="{{ asset('storage/' . $pelanggan->foto_ktp) }}" alt="Foto KTP" class="img-thumbnail" style="max-width: 200px; max-height: 200px;">
                                            <p class="text-muted small mb-0">Foto saat ini</p>
                                        </div>
                                        @endif
                                        <div class="custom-file">
                                            <input type="file" class="custom-file-input @error('foto_ktp') is-invalid @enderror" 
                                                   id="foto_ktp" name="foto_ktp" accept="image/*">
                                            <label class="custom-file-label" for="foto_ktp">Pilih foto KTP baru...</label>
                                        </div>
                                        <small class="text-muted">Format: JPG, PNG, JPEG (Max: 5MB). Kosongkan jika tidak ingin mengubah.</small>
                                        <div id="fotoKtpPreview" class="mt-3" style="display: none;">
                                            <img id="previewFotoKtp" src="" alt="Preview" class="img-thumbnail" style="max-width: 300px; max-height: 300px;">
                                        </div>
                                        @error('foto_ktp')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group mb-3">
                                        <label for="foto_rumah" class="form-label">Foto Rumah Depan</label>
                                        @if($pelanggan->foto_rumah)
                                        <div class="mb-2">
                                            <img src="{{ asset('storage/' . $pelanggan->foto_rumah) }}" alt="Foto Rumah" class="img-thumbnail" style="max-width: 200px; max-height: 200px;">
                                            <p class="text-muted small mb-0">Foto saat ini</p>
                                        </div>
                                        @endif
                                        <div class="custom-file">
                                            <input type="file" class="custom-file-input @error('foto_rumah') is-invalid @enderror" 
                                                   id="foto_rumah" name="foto_rumah" accept="image/*">
                                            <label class="custom-file-label" for="foto_rumah">Pilih foto rumah baru...</label>
                                        </div>
                                        <small class="text-muted">Format: JPG, PNG, JPEG (Max: 5MB). Kosongkan jika tidak ingin mengubah.</small>
                                        <div id="fotoRumahPreview" class="mt-3" style="display: none;">
                                            <img id="previewFotoRumah" src="" alt="Preview" class="img-thumbnail" style="max-width: 300px; max-height: 300px;">
                                        </div>
                                        @error('foto_rumah')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group mb-3">
                                        <label for="foto_instalasi" class="form-label">Foto Instalasi</label>
                                        @if($pelanggan->foto_instalasi)
                                        <div class="mb-2">
                                            <img src="{{ asset('storage/' . $pelanggan->foto_instalasi) }}" alt="Foto Instalasi" class="img-thumbnail" style="max-width: 200px; max-height: 200px;">
                                            <p class="text-muted small mb-0">Foto saat ini</p>
                                        </div>
                                        @endif
                                        <div class="custom-file">
                                            <input type="file" class="custom-file-input @error('foto_instalasi') is-invalid @enderror" 
                                                   id="foto_instalasi" name="foto_instalasi" accept="image/*">
                                            <label class="custom-file-label" for="foto_instalasi">Pilih foto instalasi baru...</label>
                                        </div>
                                        <small class="text-muted">Format: JPG, PNG, JPEG (Max: 5MB). Kosongkan jika tidak ingin mengubah.</small>
                                        <div id="fotoInstalasiPreview" class="mt-3" style="display: none;">
                                            <img id="previewFotoInstalasi" src="" alt="Preview" class="img-thumbnail" style="max-width: 300px; max-height: 300px;">
                                        </div>
                                        @error('foto_instalasi')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save me-2"></i>Update
                        </button>
                        <a href="{{ route('pelanggan.index') }}" class="btn btn-secondary">
                            <i class="fas fa-times me-2"></i>Batal
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <div class="col-lg-4">
        <div class="card shadow">
            <div class="card-header">
                <h6 class="m-0 font-weight-bold text-primary">Informasi</h6>
            </div>
            <div class="card-body">
                <div class="alert alert-info">
                    <strong><i class="fas fa-info-circle me-2"></i>Catatan:</strong>
                    <ul class="mb-0 mt-2">
                        <li>Koordinat untuk menampilkan di peta</li>
                        <li>RT/RW untuk alamat yang lebih detail</li>
                        <li>Status layanan mempengaruhi billing</li>
                        @if(config('librenms.enabled'))
                        <li>LibreNMS Port ID untuk monitoring</li>
                        @endif
                    </ul>
                </div>
                
                <div class="alert alert-warning">
                    <strong><i class="fas fa-exclamation-triangle me-2"></i>Penting:</strong>
                    <p class="mb-0 mt-2">Pastikan data pelanggan sudah benar sebelum menyimpan.</p>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
$(document).ready(function() {
    // Photo Preview Handler - Generic function
    function setupPhotoPreview(inputId, previewId, labelSelector) {
        $(inputId).on('change', function(e) {
            const file = e.target.files[0];
            if (file) {
                // Update custom file label
                $(this).next(labelSelector).html(file.name);
                
                // Validate file size (5MB)
                if (file.size > 5 * 1024 * 1024) {
                    alert('Ukuran file terlalu besar. Maksimal 5MB.');
                    $(this).val('');
                    $(this).next(labelSelector).html('Pilih foto...');
                    $(previewId).hide();
                    return;
                }
                
                // Validate file type
                if (!file.type.match('image.*')) {
                    alert('File harus berupa gambar.');
                    $(this).val('');
                    $(this).next(labelSelector).html('Pilih foto...');
                    $(previewId).hide();
                    return;
                }
                
                // Show preview
                const reader = new FileReader();
                reader.onload = function(e) {
                    $(previewId + ' img').attr('src', e.target.result);
                    $(previewId).show();
                };
                reader.readAsDataURL(file);
            } else {
                $(this).next(labelSelector).html('Pilih foto...');
                $(previewId).hide();
            }
        });
    }
    
    // Setup preview untuk semua foto
    setupPhotoPreview('#foto', '#fotoPreview', '.custom-file-label');
    setupPhotoPreview('#foto_ktp', '#fotoKtpPreview', '.custom-file-label');
    setupPhotoPreview('#foto_rumah', '#fotoRumahPreview', '.custom-file-label');
    setupPhotoPreview('#foto_instalasi', '#fotoInstalasiPreview', '.custom-file-label');
    
    // Realtime validation for nomor telepon
    let nomorTeleponTimeout;
    $('#nomor_telepon').on('input', function() {
        clearTimeout(nomorTeleponTimeout);
        const nomorTelepon = $(this).val().trim();
        const $input = $(this);
        const $feedback = $('#nomor_telepon_feedback');
        const $help = $('#nomor_telepon_help');
        
        if (nomorTelepon.length < 10) {
            $input.removeClass('is-invalid is-valid');
            $feedback.addClass('d-none');
            $help.addClass('d-none');
            return;
        }
        
        nomorTeleponTimeout = setTimeout(function() {
            $.ajax({
                url: '{{ route("pelanggan.check-nomor-telepon") }}',
                method: 'GET',
                data: {
                    nomor_telepon: nomorTelepon,
                    pelanggan_id: {{ $pelanggan->id }}
                },
                success: function(response) {
                    if (response.available) {
                        $input.removeClass('is-invalid').addClass('is-valid');
                        $feedback.removeClass('d-block').addClass('d-none');
                        $help.removeClass('d-none text-danger').addClass('text-success').text('✓ ' + response.message);
                    } else {
                        $input.removeClass('is-valid').addClass('is-invalid');
                        $feedback.removeClass('d-none').addClass('d-block').text(response.message);
                        $help.removeClass('d-none text-success').addClass('text-danger').text('✗ ' + response.message);
                    }
                },
                error: function() {
                    $input.removeClass('is-invalid is-valid');
                    $feedback.addClass('d-none');
                    $help.addClass('d-none');
                }
            });
        }, 500); // Debounce 500ms
    });
    
    // Realtime validation for email
    let emailTimeout;
    $('#email').on('input', function() {
        clearTimeout(emailTimeout);
        const email = $(this).val().trim();
        const $input = $(this);
        const $feedback = $('#email_feedback');
        const $help = $('#email_help');
        
        if (!email) {
            $input.removeClass('is-invalid is-valid');
            $feedback.addClass('d-none');
            $help.addClass('d-none');
            return;
        }
        
        // Basic email format check
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!emailRegex.test(email)) {
            $input.removeClass('is-valid').addClass('is-invalid');
            $feedback.removeClass('d-none').addClass('d-block').text('Format email tidak valid');
            $help.removeClass('d-none text-success').addClass('text-danger').text('✗ Format email tidak valid');
            return;
        }
        
        emailTimeout = setTimeout(function() {
            $.ajax({
                url: '{{ route("pelanggan.check-email") }}',
                method: 'GET',
                data: {
                    email: email,
                    pelanggan_id: {{ $pelanggan->id }}
                },
                success: function(response) {
                    if (response.available) {
                        $input.removeClass('is-invalid').addClass('is-valid');
                        $feedback.removeClass('d-block').addClass('d-none');
                        $help.removeClass('d-none text-danger').addClass('text-success').text('✓ ' + response.message);
                    } else {
                        $input.removeClass('is-valid').addClass('is-invalid');
                        $feedback.removeClass('d-none').addClass('d-block').text(response.message);
                        $help.removeClass('d-none text-success').addClass('text-danger').text('✗ ' + response.message);
                    }
                },
                error: function() {
                    $input.removeClass('is-invalid is-valid');
                    $feedback.addClass('d-none');
                    $help.addClass('d-none');
                }
            });
        }, 500); // Debounce 500ms
    });
});
</script>
@endsection