@extends('layouts.master')

@section('title', 'Profil Pelanggan')
@section('page-title', 'Profil Pelanggan')

@section('css')
    <link rel="stylesheet" href="{{ URL::asset('/assets/css/pelanggan.css') }}">
@endsection

@section('content')
    <div class="pelanggan-profile-page">
        <div class="card profile-hero mb-3">
            <div class="card-body d-flex justify-content-between align-items-start flex-wrap gap-3">
                <div class="d-flex align-items-center gap-3">
                    <div class="profile-avatar">
                        @if ($pelanggan->foto_pelanggan)
                            <img src="{{ asset('storage/' . $pelanggan->foto_pelanggan) }}" alt="Foto Pelanggan">
                        @else
                            <span>{{ strtoupper(substr((string) $pelanggan->nama, 0, 1)) }}</span>
                        @endif
                    </div>
                    <div>
                        <h4 class="mb-1">{{ $pelanggan->nama }}</h4>
                        <div class="small text-muted mb-1">Kode: {{ $pelanggan->kode_pelanggan ?: '-' }}</div>
                        <div class="d-flex flex-wrap gap-2 align-items-center">
                            @php
                                $badge = [
                                    'aktif' => 'success',
                                    'menunggak' => 'warning',
                                    'non_aktif' => 'secondary',
                                    'putus' => 'danger',
                                ][$pelanggan->status] ?? 'secondary';
                            @endphp
                            <span class="badge bg-{{ $badge }}">{{ ucfirst(str_replace('_', ' ', $pelanggan->status)) }}</span>
                            <span class="badge bg-light text-dark">{{ $pelanggan->paketInternet->nama ?? 'Paket belum dipilih' }}</span>
                            @php
                                $tipe = (string) ($pelanggan->tipe_autentikasi ?? 'hotspot_user');
                            @endphp
                            <span class="badge {{ $tipe === 'ip_binding' ? 'bg-dark' : 'bg-primary' }}">
                                {{ $tipe === 'ip_binding' ? 'IP Binding' : 'Hotspot User' }}
                            </span>
                        </div>
                    </div>
                </div>
                <div class="d-flex flex-wrap gap-2">
                    @if (($pelanggan->tipe_autentikasi ?? 'hotspot_user') !== 'hotspot_user')
                        <form action="{{ route('pelanggan.sync-ip-binding', $pelanggan->id) }}" method="post"
                            onsubmit="return confirm('Sinkron IP Binding untuk pelanggan ini?')">
                            @csrf
                            <button type="submit" class="btn btn-dark">
                                <i class="bx bx-sync"></i> Sinkron IP Binding
                            </button>
                        </form>
                    @endif
                    <a href="{{ route('pelanggan.edit', $pelanggan->id) }}" class="btn btn-warning">
                        <i class="bx bx-edit"></i> Edit
                    </a>
                    <a href="{{ route('pelanggan.index') }}" class="btn btn-outline-secondary">
                        <i class="bx bx-arrow-back"></i> Kembali
                    </a>
                </div>
            </div>
        </div>

        <div class="row g-2 mb-3">
            <div class="col-6 col-lg-2">
                <div class="card kpi-card h-100">
                    <div class="card-body">
                        <div class="kpi-label">Tagihan</div>
                        <div class="kpi-value">{{ number_format($summary['jumlah_tagihan'], 0, ',', '.') }}</div>
                    </div>
                </div>
            </div>
            <div class="col-6 col-lg-2">
                <div class="card kpi-card h-100">
                    <div class="card-body">
                        <div class="kpi-label">Lunas</div>
                        <div class="kpi-value text-success">{{ number_format($summary['jumlah_lunas'], 0, ',', '.') }}</div>
                    </div>
                </div>
            </div>
            <div class="col-6 col-lg-2">
                <div class="card kpi-card h-100">
                    <div class="card-body">
                        <div class="kpi-label">Belum Lunas</div>
                        <div class="kpi-value text-warning">{{ number_format($summary['jumlah_belum_lunas'], 0, ',', '.') }}</div>
                    </div>
                </div>
            </div>
            <div class="col-6 col-lg-2">
                <div class="card kpi-card h-100">
                    <div class="card-body">
                        <div class="kpi-label">Total Tagihan</div>
                        <div class="kpi-value">Rp {{ number_format($summary['total_tagihan'], 0, ',', '.') }}</div>
                    </div>
                </div>
            </div>
            <div class="col-6 col-lg-2">
                <div class="card kpi-card h-100">
                    <div class="card-body">
                        <div class="kpi-label">Terbayar</div>
                        <div class="kpi-value text-success">Rp {{ number_format($summary['total_terbayar'], 0, ',', '.') }}</div>
                    </div>
                </div>
            </div>
            <div class="col-6 col-lg-2">
                <div class="card kpi-card h-100">
                    <div class="card-body">
                        <div class="kpi-label">Sisa</div>
                        <div class="kpi-value text-danger">Rp {{ number_format($summary['sisa'], 0, ',', '.') }}</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card form-card">
            <div class="card-body">
                <ul class="nav nav-pills profile-tabs mb-3" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" data-bs-toggle="pill" data-bs-target="#tab-ringkasan" type="button" role="tab">
                            Ringkasan
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" data-bs-toggle="pill" data-bs-target="#tab-grafik" type="button" role="tab">
                            Grafik Pembayaran
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" data-bs-toggle="pill" data-bs-target="#tab-riwayat" type="button" role="tab">
                            Riwayat Tagihan
                        </button>
                    </li>
                </ul>

                <div class="tab-content">
                    <div class="tab-pane fade show active" id="tab-ringkasan" role="tabpanel">
                        <div class="row g-3">
                            <div class="col-12 col-lg-6">
                                <div class="info-card">
                                    <div class="section-title mb-2">Identitas & Kontak</div>
                                    <div class="profile-block">
                                        <div class="profile-label">Nama</div>
                                        <div class="profile-value">{{ $pelanggan->nama ?: '-' }}</div>
                                    </div>
                                    <div class="profile-block">
                                        <div class="profile-label">WhatsApp</div>
                                        <div class="profile-value">{{ $pelanggan->nomor_wa ?: '-' }}</div>
                                    </div>
                                    <div class="profile-block">
                                        <div class="profile-label">WA Alternatif</div>
                                        <div class="profile-value">{{ $pelanggan->nomor_wa_alt ?: '-' }}</div>
                                    </div>
                                    <div class="profile-block">
                                        <div class="profile-label">Telepon Lain</div>
                                        <div class="profile-value">{{ $pelanggan->telepon_lain ?: '-' }}</div>
                                    </div>
                                    <div class="profile-block">
                                        <div class="profile-label">Tanggal Aktif</div>
                                        <div class="profile-value">{{ optional($pelanggan->tanggal_aktif)->format('d-m-Y') ?: '-' }}</div>
                                    </div>
                                    <div class="profile-block">
                                        <div class="profile-label">Router MikroTik</div>
                                        <div class="profile-value">
                                            @if ($pelanggan->mikrotikServer)
                                                {{ $pelanggan->mikrotikServer->name }}
                                                <small class="text-muted d-block">
                                                    {{ $pelanggan->mikrotikServer->host }}:{{ $pelanggan->mikrotikServer->port }}
                                                </small>
                                            @else
                                                -
                                            @endif
                                        </div>
                                    </div>
                                    <div class="profile-block">
                                        <div class="profile-label">Hotspot Username</div>
                                        <div class="profile-value">{{ $pelanggan->hotspot_username ?: '-' }}</div>
                                    </div>
                                    <div class="profile-block">
                                        <div class="profile-label">IP Binding</div>
                                        <div class="profile-value">
                                            @if ($pelanggan->hotspot_ip_binding_id)
                                                {{ $pelanggan->hotspot_ip_binding_address ?: '-' }} / {{ $pelanggan->hotspot_ip_binding_mac ?: '-' }}
                                                <small class="text-muted d-block">
                                                    {{ $pelanggan->hotspot_ip_binding_type ?: '-' }}
                                                    @if($pelanggan->hotspot_ip_binding_comment)
                                                        | {{ $pelanggan->hotspot_ip_binding_comment }}
                                                    @endif
                                                </small>
                                            @else
                                                -
                                            @endif
                                        </div>
                                    </div>
                                    <div class="profile-block">
                                        <div class="profile-label">Status Sinkron {{ ($pelanggan->tipe_autentikasi ?? 'hotspot_user') === 'ip_binding' ? 'IP Binding' : 'Hotspot' }}</div>
                                        <div class="profile-value">
                                            @php
                                                $isIpBinding = ($pelanggan->tipe_autentikasi ?? 'hotspot_user') === 'ip_binding';
                                                $syncStatus = $isIpBinding
                                                    ? (string) ($pelanggan->ip_binding_last_sync_status ?? '')
                                                    : (string) ($pelanggan->hotspot_last_sync_status ?? '');
                                                $syncAt = $isIpBinding ? $pelanggan->ip_binding_last_sync_at : $pelanggan->hotspot_last_sync_at;
                                                $syncMessage = $isIpBinding
                                                    ? (string) ($pelanggan->ip_binding_last_sync_message ?? '')
                                                    : (string) ($pelanggan->hotspot_last_sync_message ?? '');
                                                $syncBadge = $syncStatus === 'success' ? 'success' : ($syncStatus === 'failed' ? 'danger' : 'secondary');
                                                $syncLabel = $syncStatus === 'success' ? 'Sukses' : ($syncStatus === 'failed' ? 'Gagal' : 'Belum Pernah');
                                            @endphp
                                            <span class="badge bg-{{ $syncBadge }}">{{ $syncLabel }}</span>
                                            @if ($syncAt)
                                                <small class="text-muted d-block mt-1">
                                                    {{ $syncAt->format('d-m-Y H:i:s') }}
                                                </small>
                                            @endif
                                            @if ($syncMessage !== '')
                                                <small class="text-muted d-block mt-1">
                                                    {{ $syncMessage }}
                                                </small>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="profile-block">
                                        <div class="profile-label">Pembayaran Terakhir</div>
                                        <div class="profile-value">
                                            @if ($summary['last_payment'])
                                                {{ optional($summary['last_payment']->tanggal_bayar)->format('d-m-Y') ?: '-' }}
                                                <small class="text-muted d-block">
                                                    Rp {{ number_format((float) $summary['last_payment']->nominal_bayar, 0, ',', '.') }}
                                                </small>
                                            @else
                                                -
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-12 col-lg-6">
                                <div class="info-card h-100">
                                    <div class="section-title mb-2">Alamat, Wilayah & Foto</div>
                                    <div class="profile-block">
                                        <div class="profile-label">Alamat</div>
                                        <div class="profile-value">{{ $pelanggan->alamat ?: '-' }}</div>
                                    </div>
                                    <div class="profile-block">
                                        <div class="profile-label">Wilayah</div>
                                        <div class="profile-value">
                                            {{ $pelanggan->desa ?: '-' }},
                                            {{ $pelanggan->kecamatan ?: '-' }},
                                            {{ $pelanggan->kabupaten ?: '-' }},
                                            {{ $pelanggan->provinsi ?: '-' }}
                                        </div>
                                    </div>
                                    <div class="profile-block">
                                        <div class="profile-label">Koordinat</div>
                                        <div class="profile-value">
                                            @if ($pelanggan->latitude && $pelanggan->longitude)
                                                {{ $pelanggan->latitude }}, {{ $pelanggan->longitude }}
                                                @php
                                                    $gmapsUrl = "https://www.google.com/maps/dir/?api=1&destination={$pelanggan->latitude},{$pelanggan->longitude}&travelmode=driving";
                                                @endphp
                                                <a href="{{ $gmapsUrl }}" target="_blank" rel="noopener"
                                                    class="btn btn-sm btn-outline-primary ms-2">
                                                    <i class="bx bx-navigation"></i> Buka Peta
                                                </a>
                                            @else
                                                -
                                            @endif
                                        </div>
                                    </div>
                                    <div class="profile-block">
                                        <div class="profile-label">Catatan</div>
                                        <div class="profile-value">{{ $pelanggan->catatan ?: '-' }}</div>
                                    </div>

                                    <div class="photo-grid mt-3">
                                        <div>
                                            <div class="small text-muted mb-1">Foto Profil</div>
                                            @if ($pelanggan->foto_pelanggan)
                                                <img src="{{ asset('storage/' . $pelanggan->foto_pelanggan) }}" alt="Foto Pelanggan"
                                                    class="img-fluid rounded border profile-image">
                                            @else
                                                <div class="photo-placeholder">Belum ada foto pelanggan</div>
                                            @endif
                                        </div>
                                        <div class="mt-2">
                                            <div class="small text-muted mb-1">Foto Lokasi</div>
                                            @if ($pelanggan->foto_lokasi)
                                                <img src="{{ asset('storage/' . $pelanggan->foto_lokasi) }}" alt="Foto Lokasi"
                                                    class="img-fluid rounded border profile-image">
                                            @else
                                                <div class="photo-placeholder">Belum ada foto lokasi</div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="tab-pane fade" id="tab-grafik" role="tabpanel">
                        <div class="section-title mb-2">Grafik Pembayaran per Bulan (12 Bulan Terakhir)</div>
                        <small class="text-muted d-block mb-2">
                            Membandingkan total tagihan terbit dan nominal pembayaran masuk per bulan.
                        </small>
                        <div id="pelanggan-chart" style="min-height: 320px;"></div>
                    </div>

                    <div class="tab-pane fade" id="tab-riwayat" role="tabpanel">
                        <div class="table-responsive">
                            <table class="table table-sm align-middle">
                                <thead>
                                    <tr>
                                        <th>Periode</th>
                                        <th class="d-none d-md-table-cell">Paket</th>
                                        <th class="text-end">Tagihan</th>
                                        <th class="text-end">Terbayar</th>
                                        <th class="text-end">Sisa</th>
                                        <th class="text-center">Status</th>
                                        <th class="text-end d-none d-md-table-cell">Jatuh Tempo</th>
                                        <th class="text-center">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($riwayatTagihan as $t)
                                        @php
                                            $terbayar = (float) ($t->total_terbayar_db ?? 0);
                                            $sisa = max(0, (float) ($t->total_tagihan ?? 0) - $terbayar);
                                            $statusBadge = [
                                                'terbit' => 'info',
                                                'lunas' => 'success',
                                                'draft' => 'secondary',
                                                'batal' => 'danger',
                                            ][$t->status] ?? 'secondary';
                                        @endphp
                                        <tr>
                                            <td>{{ optional($t->periode)->format('M Y') }}</td>
                                            <td class="d-none d-md-table-cell">{{ $t->paketInternet->nama ?? '-' }}</td>
                                            <td class="text-end">Rp {{ number_format((float) $t->total_tagihan, 0, ',', '.') }}</td>
                                            <td class="text-end text-success">Rp {{ number_format($terbayar, 0, ',', '.') }}</td>
                                            <td class="text-end text-danger">Rp {{ number_format($sisa, 0, ',', '.') }}</td>
                                            <td class="text-center">
                                                <span class="badge bg-{{ $statusBadge }}">{{ strtoupper($t->status) }}</span>
                                            </td>
                                            <td class="text-end d-none d-md-table-cell">{{ optional($t->jatuh_tempo)->format('d-m-Y') ?: '-' }}</td>
                                            <td class="text-center">
                                                <a href="{{ route('tagihan.edit', $t->id) }}" class="btn btn-sm btn-outline-primary">
                                                    <i class="bx bx-link-external"></i>
                                                </a>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="8" class="text-center text-muted">Belum ada riwayat tagihan.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                        {{ $riwayatTagihan->withQueryString()->links() }}
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script src="{{ URL::asset('/assets/libs/apexcharts/apexcharts.min.js') }}"></script>
@endsection

@section('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const target = document.querySelector('#pelanggan-chart');
            if (!target || typeof ApexCharts === 'undefined') return;

            const labels = @json($chart['labels']);
            const seriesTagihan = @json($chart['tagihan']);
            const seriesBayar = @json($chart['bayar']);

            const rupiahCompact = new Intl.NumberFormat('id-ID', {
                notation: 'compact',
                compactDisplay: 'short',
                maximumFractionDigits: 1
            });
            const rupiahFull = new Intl.NumberFormat('id-ID');

            const chart = new ApexCharts(target, {
                chart: {
                    type: 'line',
                    height: 340,
                    toolbar: {
                        show: false
                    }
                },
                stroke: {
                    width: [3, 3],
                    curve: 'smooth'
                },
                series: [{
                        name: 'Tagihan',
                        data: seriesTagihan
                    },
                    {
                        name: 'Pembayaran',
                        data: seriesBayar
                    }
                ],
                xaxis: {
                    categories: labels
                },
                yaxis: {
                    labels: {
                        formatter: function(val) {
                            return 'Rp ' + rupiahCompact.format(val || 0);
                        }
                    }
                },
                tooltip: {
                    y: {
                        formatter: function(val) {
                            return 'Rp ' + rupiahFull.format(val || 0);
                        }
                    }
                },
                colors: ['#4f81ff', '#1abc9c'],
                grid: {
                    borderColor: '#edf1f7'
                },
                legend: {
                    position: 'top'
                },
                dataLabels: {
                    enabled: false
                }
            });
            chart.render();
        });
    </script>
@endsection