@extends('layout.app')

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

@section('content')
<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">
                        <div>
                            <h6 class="text-white text-capitalize ps-3 mb-0">Detail Pelanggan</h6>
                        </div>
                        <div>
                            <a href="{{ route('pelanggan.edit', $pelanggan) }}" class="btn btn-sm bg-gradient-warning mb-0 me-2">
                                <i class="material-symbols-rounded" style="font-size: 16px; vertical-align: middle;">edit</i> Edit
                            </a>
                            <a href="{{ route('pelanggan.index') }}" class="btn btn-sm bg-gradient-secondary mb-0">
                                <i class="material-symbols-rounded" style="font-size: 16px; vertical-align: middle;">arrow_back</i> Kembali
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container-fluid py-4">

<div class="row">
    <div class="col-lg-8">
        <!-- Informasi Pelanggan -->
        <div class="card mb-4">
            <div class="card-header pb-0 pt-3">
                <h6 class="mb-0">Informasi Pelanggan</h6>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <strong>Nomor Pelanggan:</strong>
                            <div class="text-muted">
                                <span class="badge badge-sm bg-gradient-primary">{{ $pelanggan->nomor_pelanggan ?? 'N/A' }}</span>
                            </div>
                        </div>
                        <div class="mb-3">
                            <strong>Nama Lengkap:</strong>
                            <div class="text-muted">{{ $pelanggan->nama }}</div>
                        </div>
                        <div class="mb-3">
                            <strong>Nomor Telepon:</strong>
                            <div class="text-muted">{{ $pelanggan->nomor_telepon }}</div>
                        </div>
                        <div class="mb-3">
                            <strong>Email:</strong>
                            <div class="text-muted">{{ $pelanggan->email ?? '-' }}</div>
                        </div>
                        <div class="mb-3">
                            <strong>Tipe Pelanggan:</strong>
                            <div class="text-muted">{{ $pelanggan->tipe_pelanggan }}</div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <strong>Status Layanan:</strong>
                            <div>
                                <span class="badge badge-sm bg-gradient-{{ $pelanggan->status_badge_class }}">
                                    {{ $pelanggan->status_layanan }}
                                </span>
                            </div>
                        </div>
                        <div class="mb-3">
                            <strong>Tanggal Aktif:</strong>
                            <div class="text-muted">{{ $pelanggan->tanggal_aktif->format('d/m/Y') }}</div>
                        </div>
                        <div class="mb-3">
                            <strong>Periode Berlangganan:</strong>
                            <div class="text-muted">
                                @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
                                @if($tanggalBerakhir)
                                    @php
                                        $tanggalBerakhirCarbon = \Carbon\Carbon::parse($tanggalBerakhir);
                                        $now = \Carbon\Carbon::now();
                                        $daysUntilExpiry = $now->diffInDays($tanggalBerakhirCarbon, false);
                                    @endphp
                                    @if($periodeAwal)
                                        <div class="font-weight-bold">
                                            {{ \Carbon\Carbon::parse($periodeAwal)->format('d/m/Y') }} - {{ $tanggalBerakhirCarbon->format('d/m/Y') }}
                                        </div>
                                    @else
                                        <div class="font-weight-bold">
                                            Berakhir: {{ $tanggalBerakhirCarbon->format('d/m/Y') }}
                                        </div>
                                    @endif
                                    @if($daysUntilExpiry > 0)
                                        <small class="text-info d-block mt-1">
                                            <i class="material-symbols-rounded me-1" style="font-size: 16px; vertical-align: middle;">schedule</i> {{ $daysUntilExpiry }} hari lagi
                                        </small>
                                    @elseif($daysUntilExpiry == 0)
                                        <small class="text-warning d-block mt-1">
                                            <i class="material-symbols-rounded me-1" style="font-size: 16px; vertical-align: middle;">warning</i> Berakhir hari ini
                                        </small>
                                    @else
                                        <small class="text-danger d-block mt-1">
                                            <i class="material-symbols-rounded me-1" style="font-size: 16px; vertical-align: middle;">error</i> Terlambat {{ abs($daysUntilExpiry) }} hari
                                        </small>
                                    @endif
                                @else
                                    <span class="text-muted">-</span>
                                @endif
                            </div>
                        </div>
                        <div class="mb-3">
                            <strong>Paket Internet:</strong>
                            <div class="text-muted">{{ $pelanggan->paket->nama_paket }}</div>
                        </div>
                        <div class="mb-3">
                            <strong>Kecepatan:</strong>
                            <div class="text-muted">{{ $pelanggan->paket->kecepatan }}</div>
                        </div>
                    </div>
                </div>
                
                <div class="mb-3">
                    <strong>Alamat Lengkap:</strong>
                    <div class="text-muted">{{ $pelanggan->full_address }}</div>
                </div>
                
                @if($pelanggan->latitude && $pelanggan->longitude)
                <div class="mb-3">
                    <strong>Koordinat:</strong>
                    <div class="text-muted">
                        Lat: {{ $pelanggan->latitude }}, Lng: {{ $pelanggan->longitude }}
                    </div>
                </div>
                @endif
            </div>
        </div>
        
        <!-- Foto Pelanggan -->
        @if($pelanggan->foto || $pelanggan->foto_ktp || $pelanggan->foto_rumah || $pelanggan->foto_instalasi)
        <div class="card mb-4">
            <div class="card-header pb-0 pt-3">
                <h6 class="mb-0">Foto Pelanggan</h6>
            </div>
            <div class="card-body pt-0">
                <div class="row">
                    @if($pelanggan->foto)
                    <div class="col-md-6 mb-4">
                        <div class="card">
                            <div class="card-header pb-0 pt-3 bg-gradient-primary text-white">
                                <h6 class="mb-0 font-weight-bold">
                                    <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">person</i>Foto Pelanggan
                                </h6>
                            </div>
                            <div class="card-body text-center">
                                <a href="{{ asset('storage/' . $pelanggan->foto) }}" data-lightbox="foto-pelanggan" data-title="Foto Pelanggan - {{ $pelanggan->nama }}">
                                    <img src="{{ asset('storage/' . $pelanggan->foto) }}" 
                                         alt="Foto Pelanggan" 
                                         class="img-fluid rounded shadow-sm" 
                                         style="max-height: 300px; cursor: pointer;">
                                </a>
                            </div>
                        </div>
                    </div>
                    @endif
                    
                    @if($pelanggan->foto_ktp)
                    <div class="col-md-6 mb-4">
                        <div class="card">
                            <div class="card-header pb-0 pt-3 bg-gradient-info text-white">
                                <h6 class="mb-0 font-weight-bold">
                                    <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">badge</i>Foto KTP
                                </h6>
                            </div>
                            <div class="card-body text-center">
                                <a href="{{ asset('storage/' . $pelanggan->foto_ktp) }}" data-lightbox="foto-pelanggan" data-title="Foto KTP - {{ $pelanggan->nama }}">
                                    <img src="{{ asset('storage/' . $pelanggan->foto_ktp) }}" 
                                         alt="Foto KTP" 
                                         class="img-fluid rounded shadow-sm" 
                                         style="max-height: 300px; cursor: pointer;">
                                </a>
                            </div>
                        </div>
                    </div>
                    @endif
                    
                    @if($pelanggan->foto_rumah)
                    <div class="col-md-6 mb-4">
                        <div class="card shadow-sm">
                            <div class="card-header bg-gradient-success text-white">
                                <h6 class="m-0 font-weight-bold">
                                    <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">home</i>Foto Rumah Depan
                                </h6>
                            </div>
                            <div class="card-body text-center">
                                <a href="{{ asset('storage/' . $pelanggan->foto_rumah) }}" data-lightbox="foto-pelanggan" data-title="Foto Rumah Depan - {{ $pelanggan->nama }}">
                                    <img src="{{ asset('storage/' . $pelanggan->foto_rumah) }}" 
                                         alt="Foto Rumah" 
                                         class="img-fluid rounded shadow-sm" 
                                         style="max-height: 300px; cursor: pointer;">
                                </a>
                            </div>
                        </div>
                    </div>
                    @endif
                    
                    @if($pelanggan->foto_instalasi)
                    <div class="col-md-6 mb-4">
                        <div class="card">
                            <div class="card-header pb-0 pt-3 bg-gradient-warning text-white">
                                <h6 class="mb-0 font-weight-bold">
                                    <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">build</i>Foto Instalasi
                                </h6>
                            </div>
                            <div class="card-body text-center">
                                <a href="{{ asset('storage/' . $pelanggan->foto_instalasi) }}" data-lightbox="foto-pelanggan" data-title="Foto Instalasi - {{ $pelanggan->nama }}">
                                    <img src="{{ asset('storage/' . $pelanggan->foto_instalasi) }}" 
                                         alt="Foto Instalasi" 
                                         class="img-fluid rounded shadow-sm" 
                                         style="max-height: 300px; cursor: pointer;">
                                </a>
                            </div>
                        </div>
                    </div>
                    @endif
                </div>
                
            </div>
        </div>
        @endif
        
        <!-- Tagihan Terbaru -->
        <div class="card mb-4">
            <div class="card-header pb-0 pt-3">
                <h6 class="mb-0 font-weight-bold text-primary">Tagihan Terbaru</h6>
            </div>
            <div class="card-body">
                @if($pelanggan->tagihan->count() > 0)
                <div class="table-responsive">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>No. Invoice</th>
                                <th>Tanggal</th>
                                <th>Jatuh Tempo</th>
                                <th>Total</th>
                                <th>Status</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($pelanggan->tagihan->take(5) as $tagihan)
                            <tr>
                                <td>{{ $tagihan->nomor_invoice }}</td>
                                <td>{{ $tagihan->tanggal_tagihan->format('d/m/Y') }}</td>
                                <td>{{ $tagihan->tanggal_jatuh_tempo->format('d/m/Y') }}</td>
                                <td>Rp {{ number_format($tagihan->total_tagihan, 0, ',', '.') }}</td>
                                <td>
                                    <span class="badge bg-{{ $tagihan->status_badge_class }}">
                                        {{ $tagihan->status_tagihan }}
                                    </span>
                                </td>
                                <td>
                                    <a href="{{ route('tagihan.show', $tagihan) }}" class="btn btn-sm btn-info">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                @else
                <div class="text-center text-muted">
                    <i class="fas fa-file-invoice fa-3x mb-3"></i>
                    <p>Tidak ada tagihan untuk pelanggan ini</p>
                </div>
                @endif
            </div>
        </div>
        
        <!-- LibreNMS Bandwidth Monitoring -->
        @if($pelanggan->librenms_port_id && config('librenms.enabled'))
        <div class="card mb-4">
            <div class="card-header pb-0 pt-3">
                <h6 class="mb-0 font-weight-bold text-primary">Monitoring Bandwidth</h6>
            </div>
            <div class="card-body pt-0">
                <div class="row">
                    <div class="col-md-6">
                        <h6>Traffic 24 Jam</h6>
                        <div class="border rounded p-2" style="height: 200px;">
                            <iframe src="{{ app(\App\Services\LibreNmsService::class)->graphUrlForPortBits($pelanggan->librenms_port_id, '-24h', 'now') }}" 
                                    style="width: 100%; height: 100%; border: 0;" 
                                    loading="lazy" 
                                    referrerpolicy="no-referrer">
                            </iframe>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <h6>Traffic 7 Hari</h6>
                        <div class="border rounded p-2" style="height: 200px;">
                            <iframe src="{{ app(\App\Services\LibreNmsService::class)->graphUrlForPortBits($pelanggan->librenms_port_id, '-7d', 'now') }}" 
                                    style="width: 100%; height: 100%; border: 0;" 
                                    loading="lazy" 
                                    referrerpolicy="no-referrer">
                            </iframe>
                        </div>
                    </div>
                </div>
                <div class="mt-3">
                    <a href="{{ config('librenms.base_url') }}/port/{{ $pelanggan->librenms_port_id }}" 
                       target="_blank" 
                       class="btn bg-gradient-primary mb-0">
                        <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">open_in_new</i>Lihat Detail di LibreNMS
                    </a>
                </div>
            </div>
        </div>
        @endif

        <!-- Notifikasi Terbaru -->
        <div class="card">
            <div class="card-header pb-0 pt-3">
                <h6 class="mb-0 font-weight-bold text-primary">Notifikasi Terbaru</h6>
            </div>
            <div class="card-body pt-0">
                @if($pelanggan->notifikasi->count() > 0)
                <div class="table-responsive">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>Jenis</th>
                                <th>Channel</th>
                                <th>Pesan</th>
                                <th>Status</th>
                                <th>Tanggal</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($pelanggan->notifikasi->take(5) as $notif)
                            <tr>
                                <td>{{ $notif->jenis_notifikasi }}</td>
                                <td>
                                    <span class="badge bg-{{ $notif->channel_badge_class }}">
                                        {{ $notif->channel }}
                                    </span>
                                </td>
                                <td>{{ Str::limit($notif->pesan, 50) }}</td>
                                <td>
                                    <span class="badge bg-{{ $notif->status_badge_class }}">
                                        {{ $notif->status_pengiriman }}
                                    </span>
                                </td>
                                <td>{{ $notif->created_at->format('d/m/Y H:i') }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                @else
                <div class="text-center text-muted">
                    <i class="fas fa-bell fa-3x mb-3"></i>
                    <p>Tidak ada notifikasi untuk pelanggan ini</p>
                </div>
                @endif
            </div>
        </div>
    </div>
    
    <div class="col-lg-4">
        <!-- Status Layanan -->
        <div class="card mb-4">
            <div class="card-header pb-0 pt-3">
                <h6 class="mb-0 font-weight-bold text-primary">Status Layanan</h6>
            </div>
            <div class="card-body text-center">
                <div class="mb-3">
                    <i class="fas fa-wifi fa-3x text-{{ $pelanggan->status_badge_class }}"></i>
                </div>
                <h4 class="mb-2">{{ $pelanggan->status_layanan }}</h4>
                <p class="text-muted">Paket: {{ $pelanggan->paket->nama_paket }}</p>
                <p class="text-muted">Kecepatan: {{ $pelanggan->paket->kecepatan }}</p>
                <p class="text-muted">Harga: {{ $pelanggan->paket->formatted_price }}</p>
            </div>
        </div>
        
        <!-- Informasi Area -->
        <div class="card mb-4">
            <div class="card-header pb-0 pt-3">
                <h6 class="mb-0 font-weight-bold text-primary">Informasi Area</h6>
            </div>
            <div class="card-body">
                @if($pelanggan->area)
                <div class="mb-2">
                    <strong>Provinsi:</strong> {{ $pelanggan->area->provinsi ?? '-' }}
                </div>
                <div class="mb-2">
                    <strong>Kabupaten:</strong> {{ $pelanggan->area->kabupaten_kota ?? '-' }}
                </div>
                <div class="mb-2">
                    <strong>Kecamatan:</strong> {{ $pelanggan->area->kecamatan ?? '-' }}
                </div>
                <div class="mb-2">
                    <strong>Desa:</strong> {{ $pelanggan->area->desa_kelurahan ?? '-' }}
                </div>
                @else
                <div class="mb-2 text-muted">
                    <em>Area belum ditentukan</em>
                </div>
                @endif
                @if($pelanggan->rt || $pelanggan->rw)
                <div class="mb-2">
                    <strong>RT/RW:</strong> 
                    @if($pelanggan->rt) RT {{ $pelanggan->rt }} @endif
                    @if($pelanggan->rw) RW {{ $pelanggan->rw }} @endif
                </div>
                @endif
            </div>
        </div>
        
        <!-- Aksi Cepat -->
        <div class="card">
            <div class="card-header pb-0 pt-3">
                <h6 class="mb-0 font-weight-bold text-primary">Aksi Cepat</h6>
            </div>
            <div class="card-body">
                <div class="d-grid gap-2">
                    <a href="{{ route('tagihan.create') }}?pelanggan_id={{ $pelanggan->id }}" class="btn btn-primary">
                        <i class="fas fa-file-invoice me-2"></i>Buat Tagihan
                    </a>
                    <button class="btn btn-info" onclick="sendNotification()">
                        <i class="fas fa-bell me-2"></i>Kirim Notifikasi
                    </button>
                    <button class="btn btn-warning" onclick="updateStatus()">
                        <i class="fas fa-edit me-2"></i>Update Status
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Voucher Section -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h6 class="m-0 font-weight-bold text-primary">Voucher Pelanggan</h6>
                <a href="{{ route('voucher.create') }}?pelanggan_id={{ $pelanggan->id }}" class="btn btn-success btn-sm">
                    <i class="fas fa-plus me-2"></i>Generate Voucher
                </a>
            </div>
            <div class="card-body">
                @if($pelanggan->voucher->count() > 0)
                <div class="table-responsive">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>Kode Voucher</th>
                                <th>Paket</th>
                                <th>Harga</th>
                                <th>Status</th>
                                <th>Tanggal Aktivasi</th>
                                <th>Tanggal Expired</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($pelanggan->voucher as $voucher)
                            <tr>
                                <td>
                                    <strong class="font-monospace">{{ $voucher->kode_voucher }}</strong>
                                </td>
                                <td>{{ $voucher->paket->nama_paket ?? '-' }}</td>
                                <td>Rp {{ number_format($voucher->harga, 0, ',', '.') }}</td>
                                <td>
                                    <span class="badge bg-{{ $voucher->status_badge_class }}">
                                        {{ $voucher->status }}
                                    </span>
                                </td>
                                <td>{{ $voucher->tanggal_aktivasi?->format('d/m/Y H:i') ?? '-' }}</td>
                                <td>{{ $voucher->tanggal_expired?->format('d/m/Y H:i') ?? '-' }}</td>
                                <td>
                                    <div class="btn-group" role="group">
                                        <a href="{{ route('voucher.show', $voucher) }}" class="btn btn-sm btn-info" title="Lihat">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                        <a href="{{ route('voucher.print') }}?kode_voucher={{ $voucher->kode_voucher }}" 
                                           class="btn btn-sm btn-warning" title="Print" target="_blank">
                                            <i class="fas fa-print"></i>
                                        </a>
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                @else
                <div class="text-center py-4">
                    <i class="fas fa-ticket-alt fa-3x text-muted mb-3"></i>
                    <h5 class="text-muted">Belum Ada Voucher</h5>
                    <p class="text-muted">Pelanggan ini belum memiliki voucher.</p>
                    <a href="{{ route('voucher.create') }}?pelanggan_id={{ $pelanggan->id }}" class="btn btn-success">
                        <i class="fas fa-plus me-2"></i>Generate Voucher Pertama
                    </a>
                </div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<!-- Lightbox2 CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/css/lightbox.min.css" integrity="sha512-ZKX+BvQihRJPA8CROKBhDNvoc2aD8dAoQihrL8zXCLxTDuTdqXHXK8c8NxKzJqJz4Zz1e8L8JzFqD1qU1e4NyA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<!-- Lightbox2 JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/js/lightbox.min.js" integrity="sha512-Ixzuzfxv1EqafeQlTCUTWwOx6JRuMt/i4lMqU1m3GpN/lw81L6W8V1x3q8X8z5J8E8V5F3C7yhl3zkFXL8nXg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>
// Configure Lightbox
lightbox.option({
    'resizeDuration': 200,
    'wrapAround': true,
    'fadeDuration': 300,
    'imageFadeDuration': 300
});

function sendNotification() {
    // Implementation for sending notification
    alert('Fitur notifikasi akan segera tersedia');
}

function updateStatus() {
    // Implementation for updating status
    alert('Fitur update status akan segera tersedia');
}
</script>
@endsection