@extends('layout.app')

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

@section('content')
@php
    use App\Models\Pelanggan;
    $totalPelanggan = Pelanggan::count();
    $pelangganAktif = Pelanggan::where('status_layanan', 'Aktif')->count();
    $pelangganSuspend = Pelanggan::where('status_layanan', 'Suspend')->count();
    $pelangganNonaktif = Pelanggan::where('status_layanan', 'Nonaktif')->count();
@endphp

<!-- Statistics Cards -->
<div class="row mb-4">
    <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
        <div class="card">
            <div class="card-header p-2 ps-3">
                <div class="d-flex justify-content-between">
                    <div>
                        <p class="text-sm mb-0 text-capitalize">Total Pelanggan</p>
                        <h4 class="mb-0">{{ $totalPelanggan }}</h4>
                    </div>
                    <div class="icon icon-md icon-shape bg-gradient-primary shadow text-center border-radius-lg">
                        <i class="material-symbols-rounded opacity-10">people</i>
                    </div>
                </div>
            </div>
            <hr class="dark horizontal my-0">
            <div class="card-footer p-2 ps-3">
                <p class="mb-0 text-sm"><span class="text-success font-weight-bolder">Semua pelanggan</span></p>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
        <div class="card">
            <div class="card-header p-2 ps-3">
                <div class="d-flex justify-content-between">
                    <div>
                        <p class="text-sm mb-0 text-capitalize">Aktif</p>
                        <h4 class="mb-0">{{ $pelangganAktif }}</h4>
                    </div>
                    <div class="icon icon-md icon-shape bg-gradient-success shadow text-center border-radius-lg">
                        <i class="material-symbols-rounded opacity-10">check_circle</i>
                    </div>
                </div>
            </div>
            <hr class="dark horizontal my-0">
            <div class="card-footer p-2 ps-3">
                <p class="mb-0 text-sm"><span class="text-success font-weight-bolder">Layanan aktif</span></p>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
        <div class="card">
            <div class="card-header p-2 ps-3">
                <div class="d-flex justify-content-between">
                    <div>
                        <p class="text-sm mb-0 text-capitalize">Suspend</p>
                        <h4 class="mb-0">{{ $pelangganSuspend }}</h4>
                    </div>
                    <div class="icon icon-md icon-shape bg-gradient-warning shadow text-center border-radius-lg">
                        <i class="material-symbols-rounded opacity-10">pause_circle</i>
                    </div>
                </div>
            </div>
            <hr class="dark horizontal my-0">
            <div class="card-footer p-2 ps-3">
                <p class="mb-0 text-sm"><span class="text-warning font-weight-bolder">Layanan ditangguhkan</span></p>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
        <div class="card">
            <div class="card-header p-2 ps-3">
                <div class="d-flex justify-content-between">
                    <div>
                        <p class="text-sm mb-0 text-capitalize">Nonaktif</p>
                        <h4 class="mb-0">{{ $pelangganNonaktif }}</h4>
                    </div>
                    <div class="icon icon-md icon-shape bg-gradient-danger shadow text-center border-radius-lg">
                        <i class="material-symbols-rounded opacity-10">cancel</i>
                    </div>
                </div>
            </div>
            <hr class="dark horizontal my-0">
            <div class="card-footer p-2 ps-3">
                <p class="mb-0 text-sm"><span class="text-danger font-weight-bolder">Layanan nonaktif</span></p>
            </div>
        </div>
    </div>
</div>

<!-- Pelanggan Table Card -->
<div class="row">
    <div class="col-12">
        <div class="card my-4">
            <div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
                <div class="bg-gradient-dark shadow-dark border-radius-lg pt-4 pb-3">
                    <div class="d-flex justify-content-between align-items-center px-3">
                        <h6 class="text-white text-capitalize ps-3 mb-0">Daftar Pelanggan</h6>
                        <a href="{{ route('pelanggan.create') }}" class="btn btn-sm bg-gradient-success mb-0">
                            <i class="material-symbols-rounded me-1" style="font-size: 18px; line-height: 1;">add</i> Tambah Pelanggan
                        </a>
                    </div>
                </div>
            </div>
            <div class="card-body px-0 pb-2">
                <!-- Filter Section -->
                <div class="border-bottom mb-3 pb-3 px-3">
                    <form method="GET" action="{{ route('pelanggan.index') }}">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="input-group input-group-outline mb-3">
                                    <label class="form-label">Cari Pelanggan</label>
                                    <input type="text" name="search" id="search" class="form-control" 
                                           value="{{ request('search') }}" placeholder="Nama, Telepon, Email">
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="input-group input-group-outline mb-3">
                                    <label class="form-label">Status</label>
                                    <select name="status_layanan" id="status_layanan" class="form-control">
                                        <option value="">Semua Status</option>
                                        <option value="Aktif" {{ request('status_layanan') == 'Aktif' ? 'selected' : '' }}>Aktif</option>
                                        <option value="Suspend" {{ request('status_layanan') == 'Suspend' ? 'selected' : '' }}>Suspend</option>
                                        <option value="Nonaktif" {{ request('status_layanan') == 'Nonaktif' ? 'selected' : '' }}>Nonaktif</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="input-group input-group-outline mb-3">
                                    <label class="form-label">Area</label>
                                    <select name="area_id" id="area_id" class="form-control">
                                        <option value="">Semua Area</option>
                                        @foreach($areas as $area)
                                        <option value="{{ $area->id }}" {{ request('area_id') == $area->id ? 'selected' : '' }}>
                                            {{ $area->full_address }}
                                        </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="input-group input-group-outline mb-3">
                                    <label class="form-label">Paket</label>
                                    <select name="paket_id" id="paket_id" class="form-control">
                                        <option value="">Semua Paket</option>
                                        @foreach($paket as $p)
                                        <option value="{{ $p->id }}" {{ request('paket_id') == $p->id ? 'selected' : '' }}>
                                            {{ $p->nama_paket }}
                                        </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-1">
                                <button type="submit" class="btn bg-gradient-primary btn-sm mb-0" title="Filter">
                                    <i class="material-symbols-rounded" style="font-size: 16px; vertical-align: middle;">search</i>
                                </button>
                            </div>
                        </div>
                        @if(request()->anyFilled(['search', 'status_layanan', 'area_id', 'paket_id']))
                        <div class="row mt-2">
                            <div class="col-12">
                                <a href="{{ route('pelanggan.index') }}" class="btn btn-sm btn-outline-secondary">
                                    <i class="material-symbols-rounded" style="font-size: 16px; vertical-align: middle;">refresh</i> Reset Filter
                                </a>
                            </div>
                        </div>
                        @endif
                    </form>
                </div>

                <!-- Table -->
                <div class="table-responsive p-0">
                    <table class="table align-items-center mb-0">
                        <thead>
                            <tr>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">No</th>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">No. Pelanggan</th>
                                <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Nama</th>
                                <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Telepon</th>
                                <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Area</th>
                                <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Paket</th>
                                <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Status</th>
                                <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Tanggal Aktif</th>
                                <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Tanggal Berakhir</th>
                                <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">IP PPPoE</th>
                                <th class="text-secondary opacity-7"></th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($pelanggan as $index => $p)
                            <tr>
                                <td>
                                    <div class="d-flex px-2 py-1">
                                        <div class="d-flex flex-column justify-content-center">
                                            <h6 class="mb-0 text-sm">{{ $pelanggan->firstItem() + $index }}</h6>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <span class="badge badge-sm bg-gradient-primary">{{ $p->nomor_pelanggan ?? 'N/A' }}</span>
                                </td>
                                <td>
                                    <div class="d-flex px-2 py-1">
                                        <div class="d-flex flex-column justify-content-center">
                                            <h6 class="mb-0 text-sm">{{ $p->nama }}</h6>
                                            @if($p->email)
                                            <p class="text-xs text-secondary mb-0">{{ $p->email }}</p>
                                            @endif
                                        </div>
                                    </div>
                                </td>
                                <td class="align-middle text-center text-sm">
                                    <span class="text-xs">{{ $p->nomor_telepon }}</span>
                                </td>
                                <td class="align-middle text-center text-sm">
                                    @if($p->area)
                                    <span class="text-xs font-weight-bold">{{ $p->area->kecamatan ?? '-' }}</span>
                                    <p class="text-xs text-secondary mb-0">{{ $p->area->kabupaten_kota ?? '' }} {{ $p->area->desa_kelurahan ?? '' }}</p>
                                    @else
                                    <span class="text-xs text-secondary">-</span>
                                    @endif
                                </td>
                                <td class="align-middle text-center text-sm">
                                    <span class="text-xs font-weight-bold">{{ $p->paket->nama_paket ?? '-' }}</span>
                                    <p class="text-xs text-secondary mb-0">{{ $p->paket->kecepatan ?? '' }}</p>
                                </td>
                                <td class="align-middle text-center text-sm">
                                    @if($p->status_layanan == 'Aktif')
                                        <span class="badge badge-sm bg-gradient-success">Aktif</span>
                                    @elseif($p->status_layanan == 'Suspend')
                                        <span class="badge badge-sm bg-gradient-warning">Suspend</span>
                                    @else
                                        <span class="badge badge-sm bg-gradient-secondary">Nonaktif</span>
                                    @endif
                                </td>
                                <td class="align-middle text-center">
                                    <span class="text-xs font-weight-bold">{{ $p->tanggal_aktif ? $p->tanggal_aktif->format('d/m/Y') : '-' }}</span>
                                </td>
                                <td class="align-middle text-center">
                                    @php
                                        // Get latest tagihan periode, or calculate from tanggal_aktif
                                        $periodeAwal = null;
                                        $tanggalBerakhir = null;
                                        
                                        if ($p->tagihan && $p->tagihan->count() > 0) {
                                            // Get tagihan with latest periode_akhir
                                            $latestTagihan = $p->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 && $p->tanggal_aktif) {
                                            $tanggalAktif = \Carbon\Carbon::parse($p->tanggal_aktif);
                                            $periodeAwal = $tanggalAktif->copy();
                                            $tanggalBerakhir = $tanggalAktif->copy()->addMonth();
                                        }
                                    @endphp
                                    @if($tanggalBerakhir)
                                        @php
                                            $tanggalBerakhirCarbon = \Carbon\Carbon::parse($tanggalBerakhir);
                                            $now = \Carbon\Carbon::now();
                                            $daysUntilExpiry = $now->diffInDays($tanggalBerakhirCarbon, false);
                                        @endphp
                                        <span class="text-xs font-weight-bold">{{ $tanggalBerakhirCarbon->format('d/m/Y') }}</span>
                                        @if($periodeAwal)
                                            <p class="text-xs text-secondary mb-0">
                                                Periode: {{ \Carbon\Carbon::parse($periodeAwal)->format('d/m/Y') }} - {{ $tanggalBerakhirCarbon->format('d/m/Y') }}
                                            </p>
                                        @endif
                                        @if($daysUntilExpiry > 0)
                                            <p class="text-xs text-info mb-0">
                                                <i class="material-symbols-rounded" style="font-size: 14px; vertical-align: middle;">schedule</i> {{ $daysUntilExpiry }} hari lagi
                                            </p>
                                        @elseif($daysUntilExpiry == 0)
                                            <p class="text-xs text-warning mb-0">
                                                <i class="material-symbols-rounded" style="font-size: 14px; vertical-align: middle;">warning</i> Berakhir hari ini
                                            </p>
                                        @else
                                            <p class="text-xs text-danger mb-0">
                                                <i class="material-symbols-rounded" style="font-size: 14px; vertical-align: middle;">error</i> Terlambat {{ abs($daysUntilExpiry) }} hari
                                            </p>
                                        @endif
                                    @else
                                        <span class="text-xs text-secondary">-</span>
                                    @endif
                                </td>
                                <td class="align-middle text-center text-sm">
                                    @if($p->local_address_pppoe || $p->ip_address)
                                        @if($p->local_address_pppoe)
                                            <span class="text-xs font-weight-bold">Local: <span class="text-secondary">{{ $p->local_address_pppoe }}</span></span>
                                        @endif
                                        @if($p->ip_address)
                                            <p class="text-xs font-weight-bold mb-0">Remote: <span class="text-secondary">{{ $p->ip_address }}</span></p>
                                        @endif
                                        @if(!$p->local_address_pppoe)
                                            <p class="text-xs text-warning mb-0">Local address belum tersinkron</p>
                                        @endif
                                    @else
                                        <span class="text-xs text-secondary">-</span>
                                    @endif
                                </td>
                                <td class="align-middle text-end">
                                    <div class="dropdown">
                                        <a class="btn btn-sm btn-icon-only text-primary" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Menu Aksi" style="width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;">
                                            <i class="material-symbols-rounded" style="font-size: 20px; line-height: 1;">more_vert</i>
                                        </a>
                                        <ul class="dropdown-menu dropdown-menu-end shadow-sm">
                                            <li>
                                                <a class="dropdown-item d-flex align-items-center" href="{{ route('pelanggan.show', $p) }}">
                                                    <i class="material-symbols-rounded me-2" style="font-size: 18px; line-height: 1;">visibility</i> Detail
                                                </a>
                                            </li>
                                            <li>
                                                <a class="dropdown-item d-flex align-items-center" href="{{ route('pelanggan.edit', $p) }}">
                                                    <i class="material-symbols-rounded me-2" style="font-size: 18px; line-height: 1;">edit</i> Edit
                                                </a>
                                            </li>
                                        @if($p->librenms_port_id && config('librenms.enabled'))
                                        <li>
                                            <a class="dropdown-item border-radius-md" href="{{ config('librenms.base_url') }}/port/{{ $p->librenms_port_id }}" target="_blank">
                                                <i class="material-symbols-rounded" style="font-size: 18px; vertical-align: middle;">language</i> LibreNMS
                                            </a>
                                        </li>
                                        @endif
                                        <li><hr class="dropdown-divider"></li>
                                        <li><h6 class="dropdown-header">Isolir / Unisolir</h6></li>
                                        @if($p->status_layanan != 'Suspend')
                                        <li>
                                            <a class="dropdown-item border-radius-md text-warning" href="#" onclick="isolirPelanggan({{ $p->id }}, '{{ addslashes($p->nama) }}'); return false;">
                                                <i class="material-symbols-rounded" style="font-size: 18px; vertical-align: middle;">pause</i> Isolir
                                            </a>
                                        </li>
                                        @else
                                        <li>
                                            <a class="dropdown-item border-radius-md text-success" href="#" onclick="unisolirPelanggan({{ $p->id }}, '{{ addslashes($p->nama) }}'); return false;">
                                                <i class="material-symbols-rounded" style="font-size: 18px; vertical-align: middle;">play_arrow</i> Unisolir
                                            </a>
                                        </li>
                                        @endif
                                        <li><hr class="dropdown-divider"></li>
                                        <li><h6 class="dropdown-header">Ubah Status</h6></li>
                                        @if($p->status_layanan != 'Aktif')
                                        <li>
                                            <a class="dropdown-item text-success d-flex align-items-center" href="#" onclick="updateStatus({{ $p->id }}, 'Aktif', '{{ addslashes($p->nama) }}'); return false;">
                                                <i class="material-symbols-rounded me-2" style="font-size: 18px; line-height: 1;">check_circle</i> Set Aktif
                                            </a>
                                        </li>
                                        @endif
                                        @if($p->status_layanan != 'Suspend')
                                        <li>
                                            <a class="dropdown-item text-warning d-flex align-items-center" href="#" onclick="updateStatus({{ $p->id }}, 'Suspend', '{{ addslashes($p->nama) }}'); return false;">
                                                <i class="material-symbols-rounded me-2" style="font-size: 18px; line-height: 1;">pause_circle</i> Set Suspend
                                            </a>
                                        </li>
                                        @endif
                                        @if($p->status_layanan != 'Nonaktif')
                                        <li>
                                            <a class="dropdown-item text-danger d-flex align-items-center" href="#" onclick="updateStatus({{ $p->id }}, 'Nonaktif', '{{ addslashes($p->nama) }}'); return false;">
                                                <i class="material-symbols-rounded me-2" style="font-size: 18px; line-height: 1;">cancel</i> Set Nonaktif
                                            </a>
                                        </li>
                                        @endif
                                        <li><hr class="dropdown-divider"></li>
                                        <li>
                                            <a class="dropdown-item text-danger d-flex align-items-center" href="#" onclick="confirmDelete('{{ route('pelanggan.destroy', $p) }}', '{{ addslashes($p->nama) }}'); return false;">
                                                <i class="material-symbols-rounded me-2" style="font-size: 18px; line-height: 1;">delete</i> Hapus
                                            </a>
                                        </li>
                                    </ul>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="11" class="text-center py-5">
                                    <i class="material-symbols-rounded" style="font-size: 48px; opacity: 0.3;">people</i>
                                    <h6 class="text-muted mt-3">Belum ada pelanggan</h6>
                                    <p class="text-xs text-secondary mb-0">Mulai dengan menambahkan pelanggan pertama</p>
                                    <a href="{{ route('pelanggan.create') }}" class="btn bg-gradient-primary mt-3">
                                        <i class="material-symbols-rounded" style="font-size: 18px; vertical-align: middle;">add</i> Tambah Pelanggan Pertama
                                    </a>
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                
                @if($pelanggan->hasPages())
                <div class="card-footer py-4">
                    <nav aria-label="...">
                        {{ $pelanggan->links() }}
                    </nav>
                </div>
                @endif
            </div>
        </div>
    </div>
</div>

<!-- Delete Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteModalLabel">
                    <i class="material-symbols-rounded text-danger" style="font-size: 20px; vertical-align: middle;">delete</i> Konfirmasi Hapus Pelanggan
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-warning" role="alert">
                    <i class="material-symbols-rounded" style="font-size: 20px; vertical-align: middle;">warning</i> 
                    <strong>Peringatan!</strong> Tindakan ini tidak dapat dibatalkan.
                </div>
                <p>Apakah Anda yakin ingin menghapus pelanggan <strong id="pelangganNameToDelete"></strong>?</p>
                <p class="text-muted small mb-0">
                    <i class="material-symbols-rounded" style="font-size: 16px; vertical-align: middle;">info</i> Semua data terkait (tagihan, pembayaran) akan tetap tersimpan.
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="material-symbols-rounded" style="font-size: 18px; vertical-align: middle;">close</i> Batal
                </button>
                <form id="deleteForm" method="POST" style="display: inline;">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn bg-gradient-danger">
                        <i class="material-symbols-rounded" style="font-size: 18px; vertical-align: middle;">delete</i> Ya, Hapus
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<style>
/* Fix dropdown positioning in table */
.table-responsive .dropdown {
    position: static;
}

/* Force dropdown to appear below button */
.table-responsive .dropdown-menu.show {
    position: absolute !important;
    top: 100% !important;
    left: auto !important;
    right: 0 !important;
    transform: translate3d(0px, 5px, 0px) !important;
    margin-top: 0.125rem !important;
}

/* Override Bootstrap's auto-placement */
.table-responsive .dropdown-menu[x-placement] {
    position: absolute !important;
    top: 100% !important;
    left: auto !important;
    right: 0 !important;
    transform: translate3d(0px, 5px, 0px) !important;
}

/* Prevent dropdown from appearing above */
.table-responsive .dropdown-menu[x-placement="top-end"],
.table-responsive .dropdown-menu[x-placement="top-start"],
.table-responsive .dropdown-menu[x-placement="top"] {
    top: 100% !important;
    transform: translate3d(0px, 5px, 0px) !important;
}
</style>
<script>
function confirmDelete(url, name) {
    document.getElementById('pelangganNameToDelete').textContent = name || 'Pelanggan ini';
    document.getElementById('deleteForm').action = url;
    var modal = new bootstrap.Modal(document.getElementById('deleteModal'));
    modal.show();
}

function updateStatus(pelangganId, status, nama) {
    if (!confirm('Ubah status pelanggan "' + nama + '" menjadi ' + status + '?')) {
        return false;
    }
    
    // Close dropdown first
    $('.dropdown-menu').removeClass('show');
    $('[data-bs-toggle="dropdown"]').attr('aria-expanded', 'false');
    
    $.ajax({
        url: '/pelanggan/' + pelangganId + '/update-status',
        method: 'POST',
        data: {
            _token: '{{ csrf_token() }}',
            status_layanan: status
        },
        success: function(response) {
            if (response.success) {
                // Show success notification
                if (typeof showNotification !== 'undefined') {
                    showNotification('Status pelanggan berhasil diperbarui', 'success');
                } else {
                    alert('Status pelanggan berhasil diperbarui');
                }
                // Reload page after 500ms
                setTimeout(function() {
                    location.reload();
                }, 500);
            }
        },
        error: function(xhr) {
            let errorMessage = 'Terjadi kesalahan saat memperbarui status';
            if (xhr.responseJSON && xhr.responseJSON.message) {
                errorMessage = xhr.responseJSON.message;
            }
            if (typeof showNotification !== 'undefined') {
                showNotification(errorMessage, 'error');
            } else {
                alert(errorMessage);
            }
        }
    });
    
    return false;
}

function isolirPelanggan(pelangganId, nama) {
    var alasan = prompt('Masukkan alasan isolir (opsional):', 'Pembayaran terlambat');
    if (alasan === null) {
        return false; // User cancelled
    }
    
    if (!confirm('Apakah Anda yakin ingin mengisolir pelanggan "' + nama + '"?\n\nIni akan:\n- Mengubah status menjadi Suspend\n- Menonaktifkan PPPoE user\n- Menonaktifkan Hotspot user\n- Mengirim notifikasi ke pelanggan')) {
        return false;
    }
    
    // Close dropdown first
    $('.dropdown-menu').removeClass('show');
    $('[data-bs-toggle="dropdown"]').attr('aria-expanded', 'false');
    
    // Show loading
    if (typeof showNotification !== 'undefined') {
        showNotification('Sedang mengisolir pelanggan...', 'info');
    }
    
    $.ajax({
        url: '/pelanggan/' + pelangganId + '/isolir',
        method: 'POST',
        data: {
            _token: '{{ csrf_token() }}',
            alasan: alasan || 'Pembayaran terlambat'
        },
        success: function(response) {
            if (response.success) {
                var message = response.message;
                if (response.messages && response.messages.length > 0) {
                    message += '\n\n' + response.messages.join('\n');
                }
                if (response.errors && response.errors.length > 0) {
                    message += '\n\nPeringatan:\n' + response.errors.join('\n');
                }
                
                if (typeof showNotification !== 'undefined') {
                    showNotification(message, 'success');
                } else {
                    alert(message);
                }
                
                // Reload page after 1 second
                setTimeout(function() {
                    location.reload();
                }, 1000);
            }
        },
        error: function(xhr) {
            let errorMessage = 'Terjadi kesalahan saat mengisolir pelanggan';
            if (xhr.responseJSON && xhr.responseJSON.message) {
                errorMessage = xhr.responseJSON.message;
            }
            if (typeof showNotification !== 'undefined') {
                showNotification(errorMessage, 'error');
            } else {
                alert(errorMessage);
            }
        }
    });
    
    return false;
}

function unisolirPelanggan(pelangganId, nama) {
    if (!confirm('Apakah Anda yakin ingin mengunisolir pelanggan "' + nama + '"?\n\nIni akan:\n- Mengubah status menjadi Aktif\n- Mengaktifkan PPPoE user\n- Mengaktifkan Hotspot user\n- Mengirim notifikasi aktivasi ke pelanggan')) {
        return false;
    }
    
    // Close dropdown first
    $('.dropdown-menu').removeClass('show');
    $('[data-bs-toggle="dropdown"]').attr('aria-expanded', 'false');
    
    // Show loading
    if (typeof showNotification !== 'undefined') {
        showNotification('Sedang mengunisolir pelanggan...', 'info');
    }
    
    $.ajax({
        url: '/pelanggan/' + pelangganId + '/unisolir',
        method: 'POST',
        data: {
            _token: '{{ csrf_token() }}'
        },
        success: function(response) {
            if (response.success) {
                var message = response.message;
                if (response.messages && response.messages.length > 0) {
                    message += '\n\n' + response.messages.join('\n');
                }
                if (response.errors && response.errors.length > 0) {
                    message += '\n\nPeringatan:\n' + response.errors.join('\n');
                }
                
                if (typeof showNotification !== 'undefined') {
                    showNotification(message, 'success');
                } else {
                    alert(message);
                }
                
                // Reload page after 1 second
                setTimeout(function() {
                    location.reload();
                }, 1000);
            }
        },
        error: function(xhr) {
            let errorMessage = 'Terjadi kesalahan saat mengunisolir pelanggan';
            if (xhr.responseJSON && xhr.responseJSON.message) {
                errorMessage = xhr.responseJSON.message;
            }
            if (typeof showNotification !== 'undefined') {
                showNotification(errorMessage, 'error');
            } else {
                alert(errorMessage);
            }
        }
    });
    
    return false;
}

// Fix dropdown positioning after Bootstrap initializes
document.addEventListener('DOMContentLoaded', function() {
    // Bootstrap 5 dropdown handling
    var dropdownElementList = [].slice.call(document.querySelectorAll('[data-bs-toggle="dropdown"]'));
    var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
        return new bootstrap.Dropdown(dropdownToggleEl);
    });
});
</script>
@endsection