@extends('layouts.adminlte')
@section('title','Pencarian Penggunaan & Peminjaman')

@section('content')
<style>
    :root {
        --ink: #0f172a;
        --muted: #6b7280;
        --panel: #ffffff;
        --line: #e5e7eb;
        --accent: #1f6feb;
        --accent-weak: #e8f1ff;
        --chip: #f8fafc;
    }
    .search-hero {
        background: linear-gradient(135deg, #0f172a 0%, #1f6feb 100%);
        color: #fff;
        border-radius: 12px;
        padding: 16px 18px;
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }
    .search-hero h4 {
        margin: 0 0 6px 0;
        font-weight: 700;
        letter-spacing: .2px;
    }
    .search-meta {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }
    .meta-chip {
        background: rgba(255,255,255,.15);
        border: 1px solid rgba(255,255,255,.25);
        color: #fff;
        padding: 4px 8px;
        border-radius: 999px;
        font-size: 12px;
    }
    .search-card {
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 16px;
        box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06);
    }
    .print-area {
        background: var(--panel);
        padding: 18px;
        border: 1px solid var(--line);
        border-radius: 12px;
        box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04);
    }
    .section-title {
        font-weight: 700;
        margin-top: 16px;
        margin-bottom: 8px;
        color: var(--ink);
    }
    .info-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        margin: 10px 0 4px 0;
    }
    .info-card {
        background: var(--chip);
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 10px 12px;
    }
    .info-label {
        color: var(--muted);
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: .4px;
    }
    .info-value {
        font-weight: 700;
        color: var(--ink);
    }
    .section-table {
        border: 1px solid var(--line);
        border-radius: 10px;
        overflow: hidden;
        background: #fff;
    }
    .section-table table {
        margin: 0;
    }
    .section-table td:first-child {
        width: 36px;
        font-weight: 600;
        color: var(--muted);
        background: #f9fafb;
    }
    .hardware-detail {
        margin-top: 4px;
        font-size: 12px;
        color: var(--muted);
        line-height: 1.35;
    }
    .license-detail {
        margin-top: 4px;
        font-size: 12px;
        color: var(--muted);
        line-height: 1.35;
    }
    .muted {
        color: var(--muted);
    }
    @media print {
        .no-print {
            display: none !important;
        }
        .content-wrapper {
            margin: 0 !important;
            padding: 0 !important;
        }
        .print-area {
            border: none;
            padding: 0;
        }
    }
</style>

<div class="search-hero no-print">
    <div>
        <h4>Search Penggunaan & Peminjaman</h4>
        <div class="search-meta">
            <span class="meta-chip" id="metaSearchTime">Waktu pencarian: -</span>
            <span class="meta-chip" id="metaDuration">Durasi: -</span>
        </div>
    </div>
    <div class="text-right">
        <small>Hasil siap untuk cetak per user</small>
    </div>
</div>

<div class="search-card no-print mb-3">
    <div class="form-row">
        <div class="col-md-6">
            <label>Search User</label>
            <select class="form-control" id="search_user"></select>
        </div>
        <div class="col-md-6 d-flex align-items-end">
            <button class="btn btn-primary mr-2" id="btnSearch">Cari</button>
            <button class="btn btn-outline-secondary" id="btnPrint" disabled>Print</button>
        </div>
    </div>
</div>

<div class="print-area" id="resultArea">
    <div class="muted">Pilih user untuk menampilkan data.</div>
</div>
@endsection

@push('scripts')
<script>
$(function () {
    $('#search_user').select2({
        theme: 'bootstrap4',
        width: '100%',
        placeholder: 'Pilih User',
        allowClear: true,
        ajax: {
            url: "{{ route('penggunaan.search-users') }}",
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return { q: params.term || '' };
            },
            processResults: function (data) {
                return { results: data.results || [] };
            },
            cache: true
        }
    });

    function renderSection(title, rows, emptyText, renderRow) {
        if (!rows || !rows.length) {
            return `
                <div class="section-title">${title}</div>
                <div class="muted">${emptyText}</div>
            `;
        }
        let html = rows.map(renderRow).join('');
        return `
            <div class="section-title">${title}</div>
            <div class="table-responsive section-table">
                <table class="table table-sm table-bordered mb-0">
                    <tbody>${html}</tbody>
                </table>
            </div>
        `;
    }

    function buildResult(res) {
        let user = res.user || {};
        let header = `
            <h5>Data Penggunaan & Peminjaman</h5>
            <div class="info-grid">
                <div class="info-card">
                    <div class="info-label">User</div>
                    <div class="info-value">${user.label || '-'}</div>
                </div>
                <div class="info-card">
                    <div class="info-label">Jabatan</div>
                    <div class="info-value">${user.jabatan || '-'}</div>
                </div>
            </div>
        `;

        let hardwareHtml = renderSection('Penggunaan Hardware', res.penggunaan?.hardware || [], 'Tidak ada penggunaan hardware.', function (r, i) {
            let po = r.po ? ` | PO: ${r.po}` : '';
            let detailParts = [];
            if (r.deskripsi) detailParts.push(`Deskripsi: ${r.deskripsi}`);
            if (r.sn) detailParts.push(`SN: ${r.sn}`);
            if (r.tahun) detailParts.push(`Tahun: ${r.tahun}`);
            let detail = detailParts.length ? `<div class="hardware-detail">${detailParts.join(' | ')}</div>` : '';
            return `<tr><td>${i + 1}</td><td>${r.label}${po}${detail}</td></tr>`;
        });

        let engHtml = renderSection('Penggunaan Lisensi Engineering', res.penggunaan?.engineering || [], 'Tidak ada penggunaan lisensi engineering.', function (r, i) {
            let po = r.po ? ` | PO: ${r.po}` : '';
            let qty = r.qty ? ` (qty ${r.qty})` : '';
            let detailParts = [];
            if (r.deskripsi) detailParts.push(`Deskripsi: ${r.deskripsi}`);
            if (r.jenis) detailParts.push(`Jenis: ${r.jenis}`);
            if (r.serial) detailParts.push(`Serial: ${r.serial}`);
            if (r.start) detailParts.push(`Start: ${r.start}`);
            if (r.end) detailParts.push(`End: ${r.end}`);
            let detail = detailParts.length ? `<div class="license-detail">${detailParts.join(' | ')}</div>` : '';
            return `<tr><td>${i + 1}</td><td>${r.label}${qty}${po}${detail}</td></tr>`;
        });

        let msHtml = renderSection('Penggunaan Lisensi Microsoft', res.penggunaan?.microsoft || [], 'Tidak ada penggunaan lisensi microsoft.', function (r, i) {
            let po = r.po ? ` | PO: ${r.po}` : '';
            let seat = r.seat ? ` | ${r.seat}` : '';
            let device = r.device ? ` | ${r.device}` : '';
            let detailParts = [];
            if (r.deskripsi) detailParts.push(`Deskripsi: ${r.deskripsi}`);
            if (r.serial) detailParts.push(`Serial: ${r.serial}`);
            if (r.start) detailParts.push(`Start: ${r.start}`);
            if (r.end) detailParts.push(`End: ${r.end}`);
            let detail = detailParts.length ? `<div class="license-detail">${detailParts.join(' | ')}</div>` : '';
            return `<tr><td>${i + 1}</td><td>${r.label}${seat}${device}${po}${detail}</td></tr>`;
        });

        let pinjamHtml = renderSection('Peminjaman Hardware (Belum Kembali)', res.peminjaman || [], 'Tidak ada peminjaman aktif.', function (r, i) {
            let tanggal = r.tanggal_pinjam ? ` | Pinjam: ${r.tanggal_pinjam}` : '';
            let ket = r.keterangan ? ` | ${r.keterangan}` : '';
            return `<tr><td>${i + 1}</td><td>${r.label}${tanggal}${ket}</td></tr>`;
        });

        return `${header}${hardwareHtml}${engHtml}${msHtml}${pinjamHtml}`;
    }

    function loadData() {
        let userId = $('#search_user').val();
        if (!userId) {
            $('#resultArea').html('<div class="muted">Pilih user untuk menampilkan data.</div>');
            $('#btnPrint').prop('disabled', true);
            return;
        }
        const startedAt = performance.now();
        const now = new Date();
        $('#metaSearchTime').text('Waktu pencarian: ' + now.toLocaleString('id-ID'));
        $('#metaDuration').text('Durasi: ...');
        $('#resultArea').html('<div class="muted">Memuat...</div>');
        $.get("{{ route('penggunaan.search-user-data', ['id' => '__id__']) }}".replace('__id__', userId), function (res) {
            $('#resultArea').html(buildResult(res));
            $('#btnPrint').prop('disabled', false);
            const took = performance.now() - startedAt;
            $('#metaDuration').text('Durasi: ' + took.toFixed(0) + ' ms');
        }).fail(function () {
            $('#resultArea').html('<div class="text-danger">Gagal memuat data.</div>');
            $('#btnPrint').prop('disabled', true);
            const took = performance.now() - startedAt;
            $('#metaDuration').text('Durasi: ' + took.toFixed(0) + ' ms');
        });
    }

    $('#btnSearch').on('click', function (e) {
        e.preventDefault();
        loadData();
    });

    $('#btnPrint').on('click', function () {
        window.print();
    });
});
</script>
@endpush