@extends('layouts.app')

@section('content')
<div class="main-content">
    <div class="container-fluid">
        <div class="page-header">
            <div class="row align-items-end">
                <div class="col-lg-8">
                    <div class="page-header-title">
                        <i class="ik ik-bar-chart bg-blue"></i>
                        <div class="d-inline">
                            <h5>Dashboard Penagihan Kredit</h5>
                            <span>Ringkasan dan statistik penagihan kredit</span>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <nav class="breadcrumb-container" aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item">
                                <a href="{{ url('/') }}"><i class="ik ik-home"></i></a>
                            </li>
                            <li class="breadcrumb-item active" aria-current="page">Dashboard</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>

        <!-- Filter Section -->





        <!-- Filter Section - Hanya untuk admin (tidak ada forcedKantor) -->
@if(!isset($forcedKantor) || !$forcedKantor)
<div class="row mb-4">
    <div class="col-md-12">
        <div class="card">
            <div class="card-body">
                <form method="GET" action="{{ route('dashboard') }}" id="filterForm" class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="kantor"><i class="ik ik-grid"></i> Filter Kantor</label>
                            <select name="kantor" id="kantor" class="form-control select2">
                                <option value="all">-- Semua Kantor --</option>
                                @foreach($kantorList as $kantor)
                                    <option value="{{ $kantor }}" {{ $filterKantor == $kantor ? 'selected' : '' }}>
                                        {{ $kantor }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="user"><i class="ik ik-user"></i> Filter User Penagih</label>
                            <select name="user" id="user" class="form-control select2">
                                <option value="all">-- Semua User --</option>
                                @foreach($userList as $user)
                                    <option value="{{ $user }}" {{ $filterUser == $user ? 'selected' : '' }}>
                                        {{ $user }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>&nbsp;</label>
                            <div>
                                <button type="submit" class="btn btn-primary btn-block">
                                    <i class="ik ik-filter"></i> Filter
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@else
<!-- Jika AO, tampilkan info bahwa filter tidak tersedia -->
    <!-- Tampilkan pesan bahwa data terbatas untuk AO -->
    <div class="row mb-4">
        <div class="col-md-12">
            <div class="alert alert-secondary">
                <i class="ik ik-lock"></i> 
                <strong>Mode Terbatas:</strong> Anda login sebagai AO {{ $forcedKantor }}. 
                Data otomatis difilter untuk kantor {{ $forcedKantor }}.
            </div>
        </div>
    </div>
@endif



        <!-- <div class="row mb-4">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <form method="GET" action="{{ route('dashboard') }}" id="filterForm" class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="kantor"><i class="ik ik-grid"></i> Filter Kantor</label>
                                    <select name="kantor" id="kantor" class="form-control select2">
                                        <option value="all">-- Semua Kantor --</option>
                                        @foreach($kantorList as $kantor)
                                            <option value="{{ $kantor }}" {{ $filterKantor == $kantor ? 'selected' : '' }}>
                                                {{ $kantor }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="user"><i class="ik ik-user"></i> Filter User Penagih</label>
                                    <select name="user" id="user" class="form-control select2">
                                        <option value="all">-- Semua User --</option>
                                        @foreach($userList as $user)
                                            <option value="{{ $user }}" {{ $filterUser == $user ? 'selected' : '' }}>
                                                {{ $user }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>&nbsp;</label>
                                    <div>
                                        <button type="submit" class="btn btn-primary btn-block">
                                            <i class="ik ik-filter"></i> Filter
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div> -->

        <!-- Card Stats -->
      <div class="row">
    <!-- Card 1: Total Debitur Nunggak (per tanggal) -->
    <div class="col-md-3 col-sm-6">
        <div class="card card-statistic-1">
            <div class="card-icon bg-primary">
                <i class="ik ik-users"></i>
            </div>
            <div class="card-wrap">
                <div class="card-header">
                    <h4>Total Debitur Nunggak <span class="period-badge">{{ $currentDate }}</span></h4>
                </div>
                <div class="card-body">
                    <span id="totalDebitur">{{ number_format($stats['total_debitur']) }}</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Card 2: Total Tagihan (periode bulan) -->
    <div class="col-md-3 col-sm-6">
        <div class="card card-statistic-1">
            <div class="card-icon bg-success">
                <i class="ik ik-file-text"></i>
            </div>
            <div class="card-wrap">
                <div class="card-header">
                    <h4>Total Tagihan <span class="period-badge">{{ $currentMonthName }}</span></h4>
                </div>
                <div class="card-body">
                    <span id="totalTagihan">{{ number_format($stats['total_tagihan']) }}</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Card 3: Total Nominal Tagihan (periode bulan) -->
    <div class="col-md-3 col-sm-6">
        <div class="card card-statistic-1">
            <div class="card-icon bg-warning">
                <i class="ik ik-dollar-sign"></i>
            </div>
            <div class="card-wrap">
                <div class="card-header">
                    <h4>Total Nominal Tagihan <span class="period-badge">{{ $currentMonthName }}</span></h4>
                </div>
                <div class="card-body">
                    <span id="totalNominal">Rp {{ number_format($stats['total_nominal'], 0, ',', '.') }}</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Card 4: Total User Penagih (periode bulan) -->
    <div class="col-md-3 col-sm-6">
        <div class="card card-statistic-1">
            <div class="card-icon bg-danger">
                <i class="ik ik-user-check"></i>
            </div>
            <div class="card-wrap">
                <div class="card-header">
                    <h4>Total User Penagih <span class="period-badge">{{ $currentMonthName }}</span></h4>
                </div>
                <div class="card-body">
                    <span id="totalUser">{{ number_format($stats['total_user']) }}</span>
                </div>
            </div>
        </div>
    </div>
</div>

        <!-- Top 10 Debitur & Top 5 Users -->
        <div class="row">
            <div class="col-md-7">
                <div class="card">
                    <div class="card-header">
                        <h3><i class="ik ik-trending-up"></i> Top 10 Debitur dengan Tagihan Terbanyak</h3>
                        <div class="card-header-right">
                            <small class="text-muted">Diurutkan berdasarkan jumlah tagihan</small>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-striped table-hover" id="tableTopDebitur">
                                <thead class="thead-light">
                                    <tr>
                                        <th>#</th>
                                        <th>No. Rekening</th>
                                        <th>Nama Debitur</th>
                                        <th>Kantor</th>
                                        <th class="text-center">Jml Tagihan</th>
                                        <th class="text-right">Total Nominal</th>
                                    </tr>
                                </thead>
                                <tbody id="topDebiturBody">
                                    @forelse($topDebitur as $index => $item)
                                    <tr>
                                        <td>{{ $index + 1 }}</td>
                                        <td><strong>{{ $item->norekening }}</strong></td>
                                        <td>{{ $item->namadebitur }}</td>
                                        <td>{{ $item->kantor }}</td>
                                        <td class="text-center">
                                            <span class="badge badge-danger">{{ number_format($item->jumtagih) }}x</span>
                                        </td>
                                        <td class="text-right">Rp {{ number_format($item->total_nominal, 0, ',', '.') }}</td>
                                    </tr>
                                    @empty
                                    <tr>
                                        <td colspan="6" class="text-center text-muted">Belum ada data penagihan</td>
                                    </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-5">
                <div class="card">
                    <div class="card-header">
                        <h3><i class="ik ik-award"></i> Top 10 User Paling Aktif</h3>
                        <div class="card-header-right">
                            <small class="text-muted">Berdasarkan jumlah tagihan</small>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-striped table-hover">
                                <thead class="thead-light">
                                    <tr>
                                        <th>#</th>
                                        <th>Nama User</th>
                                        <th class="text-center">Jml Tagihan</th>
                                        <th class="text-right">Total Nominal</th>
                                    </tr>
                                </thead>
                                <tbody id="topUsersBody">
                                    @forelse($topUsers as $index => $item)
                                    <tr>
                                        <td>{{ $index + 1 }}</td>
                                        <td><strong>{{ $item->namauser }}</strong></td>
                                        <td class="text-center">
                                            <span class="badge badge-info">{{ number_format($item->jumtagih) }}x</span>
                                        </td>
                                        <td class="text-right">Rp {{ number_format($item->total_nominal, 0, ',', '.') }}</td>
                                    </tr>
                                    @empty
                                    <tr>
                                        <td colspan="4" class="text-center text-muted">Belum ada data penagihan</td>
                                    </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Info Periode Data -->
        <div class="row">
            <div class="col-md-12">
                <div class="alert alert-info mb-3">
                    <i class="ik ik-calendar"></i> 
                    <strong>Periode:</strong>
                    Data yang ditampilkan adalah untuk bulan <strong>{{ $currentMonthName }}</strong>
                </div>
            </div>
        </div>


        <!-- <div class="row">
            <div class="col-md-12">
                <div class="alert alert-info mb-3">
                    <i class="ik ik-info"></i> 
                    <strong>Informasi:</strong>
                    Data yang ditampilkan adalah data terbaru periode <strong>{{ date('d-m-Y', strtotime($currentDate)) }}</strong>
                </div>
            </div>
        </div> -->
    </div>
</div>

<style>
    .card-statistic-1 {
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        transition: transform 0.2s;
    }
    
    .card-statistic-1:hover {
        transform: translateY(-5px);
    }
    
    .card-statistic-1 .card-icon {
        width: 80px;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 32px;
    }
    
    .card-statistic-1 .card-wrap {
        padding: 15px;
        background: white;
    }
    
    .card-statistic-1 .card-header h4 {
        font-size: 13px;
        font-weight: 600;
        margin-bottom: 5px;
        color: #666;
    }
    
    .card-statistic-1 .card-body span {
        font-size: 24px;
        font-weight: 700;
    }
    
    .bg-primary {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }
    
    .bg-success {
        background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
    }
    
    .bg-warning {
        background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
    }
    
    .bg-danger {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    }
    
    .table td {
        vertical-align: middle;
    }
    
    .badge {
        padding: 5px 12px;
        border-radius: 20px;
        font-size: 12px;
    }


    /* Styling untuk card statistik */
/* Membuat card lebih kompak */
.card-statistic-1 .card-wrap {
    padding: 12px 12px 10px 12px; /* kurangi padding vertikal */
}

.card-statistic-1 .card-header {
    margin-bottom: 5px;
}

.card-statistic-1 .card-header h4 {
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 0;
}

.period-badge {
    font-size: 9px;
    font-weight: normal;
    background: rgba(0,0,0,0.08);
    padding: 3px 8px;
    border-radius: 20px;
    color: #555;
    white-space: nowrap;
}

.card-statistic-1 .card-body span {
    font-size: 22px; /* sedikit lebih kecil dari sebelumnya */
    font-weight: 700;
    line-height: 1.2;
}

/* Tambahan margin bottom untuk row card agar tidak mepet dengan tabel */
.row.mb-4 {
    margin-bottom: 1.5rem !important;
}

.stat-number {
    font-size: 28px;
    font-weight: 700;
    display: block;
    margin-bottom: 8px;
    color: #333;
}

.stat-period {
    font-size: 11px;
    color: #888;
    background: #f5f5f5;
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    margin-top: 5px;
}

.stat-period i {
    font-size: 10px;
    margin-right: 3px;
}

.bg-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.bg-success {
    background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
}

.bg-warning {
    background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
}

.bg-danger {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}
</style>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
$(document).ready(function() {
    // Initialize Select2
    $('.select2').select2({
        width: '100%',
        placeholder: 'Pilih opsi',
        allowClear: true
    });
    
    // Auto refresh every 60 seconds (optional)
    let autoRefresh = false; // Set to true if want auto refresh
    
    if (autoRefresh) {
        setInterval(function() {
            refreshDashboard();
        }, 60000);
    }
    
    function refreshDashboard() {
        const kantor = $('#kantor').val();
        const user = $('#user').val();
        
        $.ajax({
            url: '{{ route("dashboard.data") }}',
            method: 'GET',
            data: { kantor: kantor, user: user },
            success: function(response) {
                if (response.success) {
                    // Update stats
                    $('#totalDebitur').text(formatNumber(response.stats.total_debitur));
                    $('#totalTagihan').text(formatNumber(response.stats.total_tagihan));
                    $('#totalNominal').text('Rp ' + formatRupiah(response.stats.total_nominal));
                    $('#totalUser').text(formatNumber(response.stats.total_user));
                    
                    // Update top debitur table
                    updateTopDebiturTable(response.top_debitur);
                    
                    // Update top users table
                    updateTopUsersTable(response.top_users);
                    
                    showToast('Dashboard', 'Data berhasil diperbarui', 'success');
                }
            },
            error: function(xhr) {
                console.error('Error refreshing dashboard:', xhr);
            }
        });
    }
    
    function updateTopDebiturTable(data) {
        let html = '';
        if (data && data.length > 0) {
            data.forEach(function(item, index) {
                html += `
                    <tr>
                        <td>${index + 1}</td>
                        <td><strong>${escapeHtml(item.norekening)}</strong></td>
                        <td>${escapeHtml(item.namadebitur)}</td>
                        <td>${escapeHtml(item.kantor)}</td>
                        <td class="text-center"><span class="badge badge-danger">${formatNumber(item.jumtagih)}x</span></td>
                        <td class="text-right">Rp ${formatRupiah(item.total_nominal)}</td>
                    </tr>
                `;
            });
        } else {
            html = '<tr><td colspan="6" class="text-center text-muted">Belum ada data penagihan</td></tr>';
        }
        $('#topDebiturBody').html(html);
    }
    
    function updateTopUsersTable(data) {
        let html = '';
        if (data && data.length > 0) {
            data.forEach(function(item, index) {
                html += `
                    <tr>
                        <td>${index + 1}</td>
                        <td><strong>${escapeHtml(item.namauser)}</strong></td>
                        <td class="text-center"><span class="badge badge-info">${formatNumber(item.jumtagih)}x</span></td>
                        <td class="text-right">Rp ${formatRupiah(item.total_nominal)}</td>
                    </tr>
                `;
            });
        } else {
            html = '<tr><td colspan="4" class="text-center text-muted">Belum ada data penagihan</td></tr>';
        }
        $('#topUsersBody').html(html);
    }
    
    function formatNumber(value) {
        if (!value || value == 0) return '0';
        return new Intl.NumberFormat('id-ID').format(value);
    }
    
    function formatRupiah(value) {
        if (!value || value == 0) return '0';
        return new Intl.NumberFormat('id-ID').format(value);
    }
    
    function escapeHtml(text) {
        if (!text) return '-';
        const div = document.createElement('div');
        div.appendChild(document.createTextNode(text));
        return div.innerHTML;
    }
    
    // Global toast function
    function showToast(title, message, type = 'success') {
        if (typeof window.showToast === 'function') {
            window.showToast(title, message, type);
        } else {
            Swal.fire({
                icon: type,
                title: title,
                text: message,
                timer: 3000,
                showConfirmButton: false,
                toast: true,
                position: 'top-end'
            });
        }
    }
});
</script>
@endpush