@extends('layouts.adminlte')

@section('title','Dashboard')

@section('content')
<style>
    .dashboard-table-scroll {
        max-height: 320px;
        overflow: auto;
    }
    .dashboard-table-scroll thead th {
        position: sticky;
        top: 0;
        background: #fff;
        z-index: 1;
    }
    .badge-soon {
        background: #ffe8a1;
        color: #6c4a00;
        border: 1px solid #ffd666;
    }
    .copy-cmd {
        cursor: pointer;
    }
</style>
<div class="row">
    <div class="col-md-12">
        <div class="alert alert-light border d-flex flex-wrap align-items-center justify-content-between">
            <div>
                <strong>Tool Cepat</strong>
                <span class="text-muted ml-2">Klik ikon untuk copy command</span>
            </div>
            <div class="mt-2 mt-md-0">
                <button class="btn btn-sm btn-outline-primary copy-cmd mr-2"
                        data-cmd="powershell \"(Get-WmiObject Win32_BIOS).SerialNumber.Substring((Get-WmiObject Win32_BIOS).SerialNumber.Length - 5)\"">
                    <i class="fas fa-copy"></i> Copy Serial (BIOS)
                </button>
                <button class="btn btn-sm btn-outline-success copy-cmd"
                        data-cmd="slmgr /dli">
                    <i class="fas fa-copy"></i> Copy License ID
                </button>
            </div>
        </div>
    </div>
</div>
@if (!empty($expireReminders) && count($expireReminders))
<div class="alert alert-warning">
    <strong>Reminder Expire Lisensi (Subscription)</strong>
    <span class="ml-2">Total: {{ count($expireReminders) }}</span>
</div>
@endif
@if (!empty($sewaReminders) && count($sewaReminders))
<div class="alert alert-warning">
    <strong>Reminder Jatuh Tempo Sewa IT</strong>
    <span class="ml-2">Total: {{ count($sewaReminders) }}</span>
</div>
@endif
<div class="row">
    <div class="col-md-3">
        <div class="small-box bg-info">
            <div class="inner">
                <h3>{{ $totalBarang }}</h3>
                <p>Total Barang</p>
            </div>
            <div class="icon"><i class="fas fa-boxes"></i></div>
            <a href="{{ route('inventaris-hardware.index') }}" class="small-box-footer">Read more <i class="fas fa-arrow-circle-right"></i></a>
        </div>
    </div>
    <div class="col-md-3">
        <div class="small-box bg-primary">
            <div class="inner">
                <h3>{{ $totalHardware }}</h3>
                <p>Hardware</p>
            </div>
            <div class="icon"><i class="fas fa-laptop"></i></div>
            <a href="{{ route('inventaris-hardware.index') }}" class="small-box-footer">Read more <i class="fas fa-arrow-circle-right"></i></a>
        </div>
    </div>
    <div class="col-md-3">
        <div class="small-box bg-warning">
            <div class="inner">
                <h3>{{ $totalLisensiEng }}</h3>
                <p>Lisensi Engineering</p>
            </div>
            <div class="icon"><i class="fas fa-cogs"></i></div>
            <a href="{{ route('lisensi-engineering.index') }}" class="small-box-footer">Read more <i class="fas fa-arrow-circle-right"></i></a>
        </div>
    </div>
    <div class="col-md-3">
        <div class="small-box bg-success">
            <div class="inner">
                <h3>{{ $totalLisensiMs }}</h3>
                <p>Lisensi Microsoft</p>
            </div>
            <div class="icon"><i class="fab fa-microsoft"></i></div>
            <a href="{{ route('lisensi-microsoft.index') }}" class="small-box-footer">Read more <i class="fas fa-arrow-circle-right"></i></a>
        </div>
    </div>
    <div class="col-md-3">
        <div class="small-box bg-secondary">
            <div class="inner">
                <h3>{{ $totalOrang }}</h3>
                <p>Total Orang</p>
            </div>
            <div class="icon"><i class="fas fa-users"></i></div>
            <a href="{{ route('user.index') }}" class="small-box-footer">Read more <i class="fas fa-arrow-circle-right"></i></a>
        </div>
    </div>
    <div class="col-md-3">
        <div class="small-box bg-danger">
            <div class="inner">
                <h3>{{ $totalPenggunaan }}</h3>
                <p>Total Penggunaan Aktif</p>
            </div>
            <div class="icon"><i class="fas fa-user-check"></i></div>
            <a href="{{ route('penggunaan.index') }}" class="small-box-footer">Read more <i class="fas fa-arrow-circle-right"></i></a>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <strong>Total Barang per Bulan</strong>
                <a href="{{ route('inventaris-hardware.index') }}" class="small text-muted">Read more</a>
            </div>
            <div class="card-body">
                <canvas id="chartBarang" height="55"></canvas>
            </div>
        </div>
    </div>
    <div class="col-md-2">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <strong>Jenis Lisensi Engineering</strong>
                <a href="{{ route('lisensi-engineering.index') }}" class="small text-muted">Read more</a>
            </div>
            <div class="card-body">
                <canvas id="chartLisensiEng" height="55"></canvas>
            </div>
        </div>
    </div>
    <div class="col-md-2">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <strong>Jenis Lisensi Microsoft</strong>
                <a href="{{ route('lisensi-microsoft.index') }}" class="small text-muted">Read more</a>
            </div>
            <div class="card-body">
                <canvas id="chartLisensiMs" height="55"></canvas>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <strong>Reminder Expire Lisensi (Subscription)</strong>
                <span class="small text-muted">H-30 / H-14 / H-7 / H-3 / H-2 / H-1</span>
            </div>
            <div class="card-body table-responsive table-scroll-x p-0 dashboard-table-scroll">
                <table class="table table-sm table-bordered mb-0">
                    <thead>
                        <tr>
                            <th>Tipe</th>
                            <th>Nama</th>
                            <th>Deskripsi</th>
                            <th>End Subscription</th>
                            <th>Sisa Hari</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($expireReminders as $r)
                            <tr>
                                <td>{{ $r['tipe'] }}</td>
                                <td>{{ $r['nama'] }}</td>
                                <td>{{ $r['deskripsi'] }}</td>
                                <td>{{ $r['end_date'] }}</td>
                                <td>{{ $r['days_left'] }}</td>
                                <td><span class="badge badge-soon">Soon Expire (H-{{ $r['level'] }})</span></td>
                            </tr>
                        @empty
                            <tr><td colspan="6" class="text-muted text-center">Tidak ada lisensi yang mendekati expire</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="col-md-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <strong>Reminder Jatuh Tempo Sewa IT</strong>
                <a href="{{ route('produk-sewa-it.index') }}" class="small text-muted">Read more</a>
            </div>
            <div class="card-body table-responsive table-scroll-x p-0 dashboard-table-scroll">
                <table class="table table-sm table-bordered mb-0">
                    <thead>
                        <tr>
                            <th>ID Customer</th>
                            <th>Nama Produk</th>
                            <th>No PO</th>
                            <th>Start</th>
                            <th>End</th>
                            <th>Sisa Hari</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($sewaReminders as $r)
                            <tr>
                                <td>{{ $r['id_customer'] }}</td>
                                <td>{{ $r['nama_produk'] }}</td>
                                <td>{{ $r['no_transaksi_po'] }}</td>
                                <td>{{ $r['start_date'] }}</td>
                                <td>{{ $r['end_date'] }}</td>
                                <td>{{ $r['days_left'] }}</td>
                                <td><span class="badge badge-soon">Soon Expire (H-{{ $r['level'] }})</span></td>
                            </tr>
                        @empty
                            <tr><td colspan="7" class="text-muted text-center">Tidak ada jatuh tempo dekat</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <strong>Barang Baru (10 terakhir)</strong>
                <a href="{{ route('inventaris-hardware.index') }}" class="small text-muted">Read more</a>
            </div>
            <div class="card-body table-responsive table-scroll-x p-0 dashboard-table-scroll">
                <table class="table table-sm table-bordered mb-0">
                    <thead>
                        <tr>
                            <th>Waktu</th>
                            <th>Tipe</th>
                            <th>Kode</th>
                            <th>Nama</th>
                            <th>Deskripsi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($latestItems as $item)
                            <tr>
                                <td>{{ $item->created_at }}</td>
                                <td>{{ $item->tipe }}</td>
                                <td>{{ $item->kode }}</td>
                                <td>{{ $item->nama }}</td>
                                <td>{{ $item->deskripsi }}</td>
                            </tr>
                        @empty
                            <tr><td colspan="5" class="text-muted text-center">Tidak ada data</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <strong>Aktifitas Terakhir (10)</strong>
                <a href="{{ route('penggunaan.history') }}" class="small text-muted">Read more</a>
            </div>
            <div class="card-body table-responsive table-scroll-x p-0 dashboard-table-scroll">
                <table class="table table-sm table-bordered mb-0">
                    <thead>
                        <tr>
                            <th>Waktu</th>
                            <th>Tipe</th>
                            <th>User</th>
                            <th>Jabatan</th>
                            <th>Keterangan</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($activity as $a)
                            <tr>
                                <td>{{ $a->waktu }}</td>
                                <td>{{ $a->tipe }}</td>
                                <td>{{ trim(($a->finger ?? '') . ' - ' . ($a->nama ?? '')) }}</td>
                                <td>{{ $a->jabatan }}</td>
                                <td>{{ $a->keterangan }}</td>
                            </tr>
                        @empty
                            <tr><td colspan="5" class="text-muted text-center">Tidak ada aktivitas</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script>
    $(function () {
        $('.copy-cmd').on('click', function () {
            const cmd = $(this).data('cmd');
            if (!cmd) return;
            navigator.clipboard.writeText(cmd).then(function () {
                alert('Command berhasil di-copy.');
            });
        });
    });

    @if (!empty($expireReminders) && count($expireReminders))
    $(function () {
        $('#modalExpireReminder').modal('show');
    });
    @endif

    const labels = @json($chartLabels);
    const data = @json($chartData);
    const dailyByMonth = @json($chartDailyByMonth);
    const ctx = document.getElementById('chartBarang');
    let perDayChart = null;
    new Chart(ctx, {
        type: 'bar',
        data: {
            labels,
            datasets: [{
                label: 'Barang Baru',
                data,
                backgroundColor: '#007bff'
            }]
        },
        options: {
            responsive: true,
            onClick: function (evt, elements) {
                if (!elements || !elements.length) return;
                const idx = elements[0].index;
                const monthKey = labels[idx];
                const monthData = dailyByMonth[monthKey];
                if (!monthData) return;

                $('#modalPerDayTitle').text('Detail per Hari - ' + monthKey);
                $('#modalPerDayTotal').text(monthData.total || 0);
                const tbody = $('#tablePerDayBody');
                tbody.empty();

                (monthData.labels || []).forEach(function (day, i) {
                    const qty = (monthData.data || [])[i] || 0;
                    tbody.append('<tr><td>' + day + '</td><td class="text-right">' + qty + '</td></tr>');
                });

                const dayCtx = document.getElementById('chartBarangPerDay');
                if (perDayChart) perDayChart.destroy();
                perDayChart = new Chart(dayCtx, {
                    type: 'bar',
                    data: {
                        labels: monthData.labels || [],
                        datasets: [{
                            label: 'Barang per Hari',
                            data: monthData.data || [],
                            backgroundColor: '#17a2b8'
                        }]
                    },
                    options: {
                        responsive: true,
                        plugins: { legend: { display: false } },
                        scales: {
                            x: { grid: { display: false } },
                            y: { beginAtZero: true }
                        }
                    }
                });

                $('#modalBarangPerDay').modal('show');
            },
            plugins: { legend: { display: false } },
            scales: {
                x: { grid: { display: false } },
                y: { beginAtZero: true }
            }
        }
    });

    const engLabels = @json(array_keys($lisensiEngByType));
    const engData = @json(array_values($lisensiEngByType));
    const msLabels = @json(array_keys($lisensiMsByType));
    const msData = @json(array_values($lisensiMsByType));

    const ctxEng = document.getElementById('chartLisensiEng');
    new Chart(ctxEng, {
        type: 'doughnut',
        data: {
            labels: engLabels,
            datasets: [{ data: engData }]
        },
        options: { plugins: { legend: { position: 'bottom' } } }
    });

    const ctxMs = document.getElementById('chartLisensiMs');
    new Chart(ctxMs, {
        type: 'doughnut',
        data: {
            labels: msLabels,
            datasets: [{ data: msData }]
        },
        options: { plugins: { legend: { position: 'bottom' } } }
    });
</script>
@endpush

<div class="modal fade" id="modalBarangPerDay" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalPerDayTitle">Detail per Hari</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="mb-2">
                    <strong>Total Bulan:</strong> <span id="modalPerDayTotal">0</span>
                </div>
                <div class="row">
                    <div class="col-md-8">
                        <canvas id="chartBarangPerDay" height="90"></canvas>
                    </div>
                    <div class="col-md-4">
                        <div class="table-responsive" style="max-height: 340px; overflow:auto;">
                            <table class="table table-sm table-bordered mb-0">
                                <thead>
                                    <tr>
                                        <th>Tanggal</th>
                                        <th class="text-right">Qty</th>
                                    </tr>
                                </thead>
                                <tbody id="tablePerDayBody"></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@if (!empty($expireReminders) && count($expireReminders))
<div class="modal fade" id="modalExpireReminder" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Reminder Expire Lisensi (Subscription)</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="table-responsive">
                    <table class="table table-sm table-bordered mb-0">
                        <thead>
                            <tr>
                                <th>Tipe</th>
                                <th>Nama</th>
                                <th>Deskripsi</th>
                                <th>End Subscription</th>
                                <th>Sisa Hari</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($expireReminders as $r)
                                <tr>
                                    <td>{{ $r['tipe'] }}</td>
                                    <td>{{ $r['nama'] }}</td>
                                    <td>{{ $r['deskripsi'] }}</td>
                                    <td>{{ $r['end_date'] }}</td>
                                    <td>{{ $r['days_left'] }}</td>
                                    <td><span class="badge badge-soon">Soon Expire (H-{{ $r['level'] }})</span></td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endif