@extends('root')
@section('title', 'Client Dashboard')

@section('content')
@push('styles')
<style>
    .action-btn {
        border-radius: 10px;
        padding: 0.5rem 1rem;
        font-weight: 600;
        transition: all 0.2s;
    }
    .action-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    }
    .bg-purple {
        background-color: #7c3aed !important;
        color: #fff !important;
    }
    .root-notice-dedicated {
        border-left-width: 4px !important;
    }
    .root-notice-dedicated .btn-sm {
        white-space: nowrap;
    }
</style>
@endpush

<script>
    window.CLIENT_API_KEY = @json($client->api_key);
</script>
<div class="container-fluid">

    {{-- Pemberitahuan: promo upgrade Dedicated (per 9 April) --}}
    <div class="alert alert-info alert-dismissible fade show root-notice-dedicated mb-3 shadow-sm" role="alert" id="notice-dedicated-upgrade">
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Tutup pemberitahuan"></button>
        <div class="d-flex flex-column flex-lg-row gap-3 gap-lg-4 align-items-lg-start">
            <div class="d-flex gap-3 flex-grow-1">
                <span class="flex-shrink-0 text-info d-none d-sm-block" aria-hidden="true">
                    <i class="ti ti-speakerphone fs-2"></i>
                </span>
                <div class="min-w-0">
                    <div class="d-flex flex-wrap align-items-center gap-2 mb-1">
                        <span class="badge bg-info bg-opacity-25 text-dark border border-info border-opacity-25">Pemberitahuan</span>
                        <span class="small text-muted">Berlaku per 9 April 2026</span>
                    </div>
                    <h6 class="alert-heading mb-2 fw-bold" id="promo-dedicated-heading">Upgrade ke Dedicated untuk layanan Lebih Stabil &amp; Profesional</h6>
                    <p class="small text-muted mb-2 mb-lg-3">Per 9 April, kami membuka promo khusus upgrade Dedicated untuk bisnis billing &amp; ISP dengan kuota terbatas.</p>
                    <ul class="small mb-2 ps-3 text-body-secondary">
                        <li>Biaya setup Dedicated normal: <span class="text-decoration-line-through">Rp 1.000.000</span> — promo diskon <strong class="text-success">Rp 500.000</strong></li>
                        <li>Kuota promo: <strong>10 slot</strong> pertama · terisi <strong>9 bisnis</strong> · sisa <strong>1 slot</strong></li>
                        <li><span class="text-warning"><strong>Penting:</strong> promo berakhir otomatis setelah kuota terpenuhi.</span></li>
                    </ul>
                    <p class="small text-muted mb-0 fst-italic">Mayoritas perusahaan ISP dan billing system memakai Dedicated agar notifikasi invoice tetap stabil dan tidak terganggu.</p>
                </div>
            </div>
            <div class="d-flex flex-column flex-sm-row flex-lg-column gap-2 flex-shrink-0">
                <a href="https://wa.me/6281382826875?text=Halo%2C%20saya%20ingin%20mengambil%20slot%20promo%20upgrade%20Dedicated%20%28diskon%20setup%20Rp%20500.000%29%20-%20meechat.id"
                   target="_blank"
                   rel="noopener noreferrer"
                   class="btn btn-success btn-sm">
                    Ambil Slot Promo Sekarang
                </a>
                <a href="https://wa.me/6281382826875?text=Halo%2C%20saya%20ingin%20upgrade%20ke%20paket%20Dedicated%20meechat.id"
                   target="_blank"
                   rel="noopener noreferrer"
                   class="btn btn-outline-success btn-sm">
                    Upgrade ke Dedicated
                </a>
            </div>
        </div>
    </div>
      
    <div class="d-flex justify-content-between align-items-center">
        @include('components.breadcrumb', [
            'title' => 'Client Dashboard',
            'links' => [],
            'current' => 'Dashboard'
        ])
        <div class="mb-3 d-flex align-items-center gap-2">
            {{-- Unread Messages Badge --}}
          
            <a href="https://drive.google.com/drive/folders/1S-rVQUBJJPMWnjCHXSKsflMhS_HT4JSv?usp=sharing" target="_blank" class="btn btn-info btn-sm action-btn">
                <i class="ti ti-brand-android me-1"></i> Download apk
            </a>
            
            <a href="{{ route('client.inbox.index') }}" class="btn btn-light btn-sm action-btn position-relative" title="Pesan Masuk">
                <i class="ti ti-inbox me-1"></i> Inbox
                <span id="unread-badge" class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger" style="display: none;">
                    0
                </span>
            </a>
        </div>
    </div>

    {{-- Primary Stats Row --}}
    <div class="row">
        {{-- Saldo --}}
        <div class="col-md-3">
            <div class="card border-primary">
                <div class="card-body d-flex flex-column">
                    <div class="d-flex justify-content-between align-items-center mb-1">
                        <h6 class="mb-0 text-muted">Saldo</h6>
                        <i class="ti ti-wallet text-primary fs-5"></i>
                    </div>
                    <h3 id="client-balance" class="mb-0 text-primary">Rp 0</h3>
                    <div class="d-flex justify-content-between align-items-center mt-2">
                        <small class="text-muted">Sisa saldo Anda</small>
                        <a href="{{ route('client.topup.index') }}" class="btn btn-primary btn-sm">Topup</a>
                    </div>
                </div>
            </div>
        </div>
        {{-- Total Biaya (FIXED) --}}
        <div class="col-md-3">
            <div class="card border-danger">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-1">
                        <h6 class="mb-0 text-muted">Total Biaya</h6>
                        <i class="ti ti-report-money text-danger fs-5"></i>
                    </div>
                    <h3 id="client-total-cost" class="mb-0 text-danger">Rp 0</h3>
                    <small class="text-muted">Seluruh penggunaan (all time)</small>
                </div>
            </div>
        </div>
        {{-- Biaya Bulan Ini --}}
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-1">
                        <h6 class="mb-0 text-muted">Biaya Bulan Ini</h6>
                        <i class="ti ti-calendar text-warning fs-5"></i>
                    </div>
                    <h3 id="client-this-month-cost" class="mb-0">Rp 0</h3>
                    <small class="text-muted"><span id="client-this-month-messages">0</span> pesan</small>
                </div>
            </div>
        </div>
        {{-- Biaya Hari Ini --}}
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-1">
                        <h6 class="mb-0 text-muted">Biaya Hari Ini</h6>
                        <i class="ti ti-clock text-info fs-5"></i>
                    </div>
                    <h3 id="client-today-cost" class="mb-0">Rp 0</h3>
                    <small class="text-muted"><span id="client-today-messages">0</span> pesan</small>
                </div>
            </div>
        </div>
    </div>

    {{-- Secondary Stats Row --}}
    <div class="row">
        {{-- Total Messages --}}
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-1">
                        <h6 class="mb-0 text-muted">Total Pesan</h6>
                        <i class="ti ti-messages text-success fs-5"></i>
                    </div>
                    <h4 id="client-total-messages" class="mb-0">0</h4>
                    <small class="text-muted">Seluruh tipe pesan</small>
                </div>
            </div>
        </div>
        {{-- Outbound Messages --}}
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-1">
                        <h6 class="mb-0 text-muted">Outbound</h6>
                        <i class="ti ti-send text-success fs-5"></i>
                    </div>
                    <h4 id="client-outbound-messages" class="mb-0">0</h4>
                    <small class="text-muted">Pesan keluar (berbayar)</small>
                </div>
            </div>
        </div>
        {{-- Inbound Messages --}}
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-1">
                        <h6 class="mb-0 text-muted">Inbound</h6>
                        <i class="ti ti-inbox text-info fs-5"></i>
                    </div>
                    <h4 id="client-inbound-messages" class="mb-0">0</h4>
                    <small class="text-muted">Pesan masuk</small>
                </div>
            </div>
        </div>
        {{-- Paket & Status --}}
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-1">
                        <h6 class="mb-0 text-muted">Paket</h6>
                        <i class="ti ti-package text-secondary fs-5"></i>
                    </div>
                    <div class="d-flex align-items-center mb-1">
                        <span id="client-package" class="badge fs-6 bg-secondary">-</span>
                    </div>
                    <span class="badge rounded-pill bg-secondary" id="client-status">Status: -</span>
                </div>
            </div>
        </div>
    </div>

    {{-- Category Stats Table --}}
    <div class="card card-body mt-2">
        <div class="d-flex justify-content-between align-items-center mb-2">
            <h5 class="mb-0">Statistik per Tipe Pesan</h5>
            <span class="text-muted small">Biaya = pesan sukses (tidak termasuk failed)</span>
        </div>
        <div class="table-responsive">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>Tipe Pesan</th>
                        <th>Harga / Pesan</th>
                        <th>Jumlah Pesan</th>
                        <th>Sukses</th>
                        <th>Total Biaya</th>
                    </tr>
                </thead>
                <tbody id="client-category-stats">
                    <!-- Diisi via JS -->
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
function formatRupiah(num) {
    return 'Rp ' + parseFloat(num || 0).toLocaleString('id-ID');
}

$(document).ready(function () {
    $.ajax({
        url: '{{ url('/api/client/dashboard') }}',
        method: 'GET',
        dataType: 'json',
        headers: {
            'Authorization': 'Bearer ' + (window.CLIENT_API_KEY || ''),
            'Accept': 'application/json',
        },
        success: function (response) {
            if (!response.client) return;

            // Client info
            $('#client-balance').text(formatRupiah(response.client.balance));
            
            // Package dengan label dan warna yang sesuai
            var packageLabel = response.client.package_label || response.client.package || 'Shared';
            var packageType = response.client.package_type || response.client.package || 'shared';
            var packageClass = 'bg-info'; // default shared
            
            if (packageType === 'self_service') {
                packageClass = 'bg-purple';
            } else if (packageType === 'dedicated') {
                packageClass = 'bg-success';
            }
            
            $('#client-package')
                .text(packageLabel)
                .removeClass('bg-secondary bg-info bg-success bg-purple')
                .addClass(packageClass);
            
            $('#client-status')
                .text('Status: ' + (response.client.status === 'active' ? 'Aktif' : 'Nonaktif'))
                .removeClass('bg-secondary bg-success bg-danger')
                .addClass(response.client.status === 'active' ? 'bg-success' : 'bg-danger');

            // New dashboard stats
            $('#client-total-messages').text((response.total_messages || 0).toLocaleString('id-ID'));
            $('#client-outbound-messages').text((response.outbound_messages || 0).toLocaleString('id-ID'));
            $('#client-inbound-messages').text((response.inbound_messages || 0).toLocaleString('id-ID'));
            
            // Cost stats (FIXED - matches reports)
            $('#client-total-cost').text(formatRupiah(response.total_cost));
            $('#client-this-month-cost').text(formatRupiah(response.this_month_cost));
            $('#client-today-cost').text(formatRupiah(response.today_cost));
            $('#client-this-month-messages').text((response.this_month_messages || 0).toLocaleString('id-ID'));
            $('#client-today-messages').text((response.today_messages || 0).toLocaleString('id-ID'));

            // Category breakdown table
            var $tbody = $('#client-category-stats');
            $tbody.empty();

            var labels = {
                marketing: 'Marketing',
                utility: 'Utility',
                service: 'Service Message',
                authentication: 'Authentication',
            };

            $.each(response.categories || {}, function (key, val) {
                $tbody.append(`
                    <tr>
                        <td>${labels[key] || key}</td>
                        <td>${formatRupiah(val.current_price || 0)}</td>
                        <td>${(val.total_messages || 0).toLocaleString('id-ID')}</td>
                        <td><span class="text-success">${(val.success_count || 0).toLocaleString('id-ID')}</span></td>
                        <td><strong>${formatRupiah(val.total_cost || 0)}</strong></td>
                    </tr>
                `);
            });
        },
        error: function () {
            window.toastr && toastr.error('Gagal memuat data dashboard client');
        }
    });

    // Fetch unread messages count from inbox
    $.ajax({
        url: '{{ route('client.inbox.chat-count') }}',
        method: 'GET',
        dataType: 'json',
        success: function (response) {
            var unreadCount = response.unread_count || 0;
            
            if (unreadCount > 0) {
                $('#unread-badge').text(unreadCount).show();
            } else {
                $('#unread-badge').hide();
            }
        },
        error: function () {
            // Silently fail - unread badge is not critical
        }
    });
});
</script>
@endpush