@extends('layouts.base_view')

@section('content')
<section class="content">
    <div class="container-fluid">

        {{-- Welcome --}}
        <div class="callout callout-success mb-3">
            <h5>Selamat datang, {{ $logged_name }}</h5>
        </div>

        {{-- Date Filter --}}
        <div class="card card-outline card-primary mb-3">
            <div class="card-body py-2">
                <div class="row align-items-end">
                    <div class="col-md-3">
                        <label class="mb-0">Dari Tanggal</label>
                        <input type="date" id="startDate" class="form-control form-control-sm"
                               value="{{ now()->startOfMonth()->toDateString() }}">
                    </div>
                    <div class="col-md-3">
                        <label class="mb-0">Sampai Tanggal</label>
                        <input type="date" id="endDate" class="form-control form-control-sm"
                               value="{{ now()->toDateString() }}">
                    </div>
                    <div class="col-md-3">
                        <label class="mb-0">Promotion</label>
                        <select id="filterPromotion" class="form-control form-control-sm">
                            <option value="">-- Semua Promotion --</option>
                            @foreach($promotions as $promo)
                                <option value="{{ $promo->id }}">{{ $promo->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <button id="btnFilter" class="btn btn-primary btn-sm mt-3">
                            <i class="fas fa-search mr-1"></i> Tampilkan
                        </button>
                    </div>
                </div>
            </div>
        </div>

        {{-- Row 1: Top 10 Sales By Device + Top 10 Sales By Dealer --}}
        <div class="row">
            <div class="col-md-6">
                <div class="card card-outline card-primary">
                    <div class="card-header">
                        <h3 class="card-title"><i class="fas fa-mobile-alt mr-1"></i> Top 10 Sales By Device</h3>
                    </div>
                    <div class="card-body">
                        <canvas id="chartTopDevice" height="200"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card card-outline card-success">
                    <div class="card-header">
                        <h3 class="card-title"><i class="fas fa-store mr-1"></i> Top 10 Sales By Dealer</h3>
                    </div>
                    <div class="card-body">
                        <canvas id="chartTopDealer" height="200"></canvas>
                    </div>
                </div>
            </div>
        </div>

        {{-- Row 2: Sales By Week --}}
        <div class="row">
            <div class="col-md-12">
                <div class="card card-outline card-warning">
                    <div class="card-header">
                        <h3 class="card-title"><i class="fas fa-chart-line mr-1"></i> Sales By Week</h3>
                    </div>
                    <div class="card-body">
                        <canvas id="chartWeekly" height="80"></canvas>
                    </div>
                </div>
            </div>
        </div>

        {{-- Row 3: Claim Rate --}}
        <div class="row">
            <div class="col-md-12">
                <div class="card card-outline card-warning">
                    <div class="card-header">
                        <h3 class="card-title"><i class="fas fa-percentage mr-1"></i> Total RRP per Device (Approved Claims)</h3>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive" style="max-height:280px;overflow-y:auto;">
                            <table class="table table-bordered table-striped table-sm mb-0">
                                <thead class="thead-light">
                                    <tr>
                                        <th>Model Device</th>
                                        <th class="text-right">Unit Terjual (Principal)</th>
                                        <th class="text-right">Total Klaim (Approved)</th>
                                        <th class="text-right">Total RRP (Approved)</th>
                                    </tr>
                                </thead>
                                <tbody id="bodyClaimRate">
                                    <tr><td colspan="4" class="text-center text-muted">Memuat data...</td></tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Row 4: Total Penjualan + Total Klaim Hadiah --}}
        <div class="row">
            {{-- No. 14: Total Penjualan --}}
            <div class="col-md-6">
                <div class="card card-outline card-info">
                    <div class="card-header">
                        <h3 class="card-title"><i class="fas fa-shopping-cart mr-1"></i> Total Penjualan</h3>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive" style="max-height:300px;overflow-y:auto;">
                            <table class="table table-bordered table-striped table-sm mb-0">
                                <thead class="thead-light">
                                    <tr>
                                        <th>Tanggal</th>
                                        <th>Promotion</th>
                                        <th>Model Device</th>
                                        <th class="text-right">Qty</th>
                                        <th class="text-right">Amount (RRP)</th>
                                    </tr>
                                </thead>
                                <tbody id="bodyPenjualan">
                                    <tr><td colspan="5" class="text-center text-muted">Memuat data...</td></tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            {{-- No. 15: Total Klaim Hadiah --}}
            <div class="col-md-6">
                <div class="card card-outline card-success">
                    <div class="card-header">
                        <h3 class="card-title"><i class="fas fa-gift mr-1"></i> Total Klaim Hadiah</h3>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive" style="max-height:300px;overflow-y:auto;">
                            <table class="table table-bordered table-striped table-sm mb-0">
                                <thead class="thead-light">
                                    <tr>
                                        <th>Tanggal</th>
                                        <th>Promotion</th>
                                        <th>Model Device</th>
                                        <th>Jenis Hadiah</th>
                                        <th class="text-right">Jumlah</th>
                                        <th class="text-right">Amount</th>
                                    </tr>
                                </thead>
                                <tbody id="bodyKlaim">
                                    <tr><td colspan="6" class="text-center text-muted">Memuat data...</td></tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
<script>
// ── Charts ────────────────────────────────────────────────────────────────────

function getFilters() {
    return {
        start_date:   $('#startDate').val(),
        end_date:     $('#endDate').val(),
        promotion_id: $('#filterPromotion').val(),
    };
}

function formatRp(val) {
    return 'Rp ' + parseFloat(val || 0).toLocaleString('id-ID');
}

function loadPenjualan() {
    $.get('{{ route("dashboard.total-penjualan") }}', getFilters(), function(res) {
        var rows = '';
        $.each(res.data, function(_, r) {
            rows += '<tr><td>' + r.tanggal + '</td><td>' + r.promotion + '</td><td>' + r.model_device +
                    '</td><td class="text-right">' + r.total_qty +
                    '</td><td class="text-right">' + formatRp(r.total_amount) + '</td></tr>';
        });
        $('#bodyPenjualan').html(rows || '<tr><td colspan="5" class="text-center text-muted">Tidak ada data</td></tr>');
    });
}

function loadKlaim() {
    $.get('{{ route("dashboard.total-klaim") }}', getFilters(), function(res) {
        var rows = '';
        $.each(res.data, function(_, r) {
            rows += '<tr><td>' + r.tanggal + '</td><td>' + r.promotion + '</td><td>' + r.model_device +
                    '</td><td>' + r.jenis_hadiah +
                    '</td><td class="text-right">' + r.jumlah_claim +
                    '</td><td class="text-right">' + formatRp(r.total_amount) + '</td></tr>';
        });
        $('#bodyKlaim').html(rows || '<tr><td colspan="6" class="text-center text-muted">Tidak ada data</td></tr>');
    });
}

function loadClaimRate() {
    $.get('{{ route("dashboard.claim-rate") }}', getFilters(), function(res) {
        var rows = '';
        $.each(res.data, function(_, r) {
            rows += '<tr>'
                + '<td>' + r.model_device + '</td>'
                + '<td class="text-right">' + r.total_unit_terjual.toLocaleString() + '</td>'
                + '<td class="text-right">' + r.total_klaim.toLocaleString() + '</td>'
                + '<td class="text-right">Rp ' + Number(r.total_rrp).toLocaleString('id-ID') + '</td>'
                + '</tr>';
        });
        $('#bodyClaimRate').html(rows || '<tr><td colspan="4" class="text-center text-muted">Tidak ada data</td></tr>');
    });
}

function destroyChart(canvasId) {
    var existing = Chart.getChart(canvasId);
    if (existing) existing.destroy();
}

function loadTopDevice() {
    $.get('{{ route("dashboard.top-devices") }}', getFilters(), function(res) {
        destroyChart('chartTopDevice');
        new Chart(document.getElementById('chartTopDevice').getContext('2d'), {
            type: 'bar',
            data: {
                labels: res.labels,
                datasets: [{
                    label: 'Total Penjualan',
                    data: res.values,
                    backgroundColor: 'rgba(60,141,188,0.8)',
                    borderColor: '#3c8dbc',
                    borderWidth: 1,
                }]
            },
            options: {
                indexAxis: 'y',
                responsive: true,
                plugins: { legend: { display: false } },
                scales: { x: { beginAtZero: true, ticks: { precision: 0 } } }
            }
        });
    });
}

function loadTopDealer() {
    $.get('{{ route("dashboard.top-dealers") }}', getFilters(), function(res) {
        destroyChart('chartTopDealer');
        new Chart(document.getElementById('chartTopDealer').getContext('2d'), {
            type: 'bar',
            data: {
                labels: res.labels,
                datasets: [{
                    label: 'Total Penjualan',
                    data: res.values,
                    backgroundColor: 'rgba(0,166,90,0.8)',
                    borderColor: '#00a65a',
                    borderWidth: 1,
                }]
            },
            options: {
                indexAxis: 'y',
                responsive: true,
                plugins: { legend: { display: false } },
                scales: { x: { beginAtZero: true, ticks: { precision: 0 } } }
            }
        });
    });
}

function loadWeekly() {
    $.get('{{ route("dashboard.sales-by-week") }}', getFilters(), function(res) {
        destroyChart('chartWeekly');
        new Chart(document.getElementById('chartWeekly').getContext('2d'), {
            type: 'line',
            data: {
                labels: res.labels,
                datasets: [{
                    label: 'Penjualan per Minggu',
                    data: res.values,
                    borderColor: '#f39c12',
                    backgroundColor: 'rgba(243,156,18,0.15)',
                    tension: 0.3,
                    fill: true,
                    pointRadius: 4,
                    pointBackgroundColor: '#f39c12',
                }]
            },
            options: {
                responsive: true,
                plugins: { legend: { position: 'top' } },
                scales: { y: { beginAtZero: true, ticks: { precision: 0 } } }
            }
        });
    });
}

function loadAll() {
    loadPenjualan();
    loadKlaim();
    loadClaimRate();
    loadTopDevice();
    loadTopDealer();
    loadWeekly();
}

$(function () {
    loadAll();
    $('#btnFilter').on('click', loadAll);
});
</script>
@endpush