@extends('layouts.adminlte')
@section('title','History Penggunaan')

@section('content')
<div class="mb-2">
    <a href="{{ route('penggunaan.index') }}" class="btn btn-secondary">Kembali</a>
    <button class="btn btn-outline-primary" id="filterAll">Semua</button>
    <button class="btn btn-outline-success" id="filterActive">Aktif</button>
    <button class="btn btn-outline-warning" id="filterEnded">Selesai</button>
    <button class="btn btn-danger" id="btnDeleteSelected">Delete Selected</button>
</div>

<table class="table table-bordered" id="tableHistory" width="100%">
    <thead>
        <tr>
            <th style="width:36px;"><input type="checkbox" id="checkAllHistory"></th>
            <th>User</th>
            <th>Hardware</th>
            <th>Software Engineer</th>
            <th>Microsoft</th>
            <th>Qty</th>
            <th>Tanggal Mulai</th>
            <th>Tanggal Selesai</th>
            <th>Keterangan</th>
            <th>Updated At</th>
            <th>Aksi</th>
        </tr>
    </thead>
</table>
@endsection

@push('scripts')
<script>
$(function () {
    let filterMode = 'all'; // all | active | ended

    let table = $('#tableHistory').DataTable({
        ajax: {
            url: "{{ route('penggunaan.history-data') }}",
            dataSrc: 'data'
        },
        order: [[9, 'desc']],
        columns: [
            {
                data: 'id_penggunaan_history',
                orderable: false,
                searchable: false,
                render: function (data) {
                    if (!data) return '';
                    return `<input type="checkbox" class="row-check-history" value="${data}">`;
                }
            },
            {
                data: 'nama_orang',
                render: function (data, type, row) {
                    let finger = row.nmr_finger ?? '';
                    let name = row.nama_orang ?? '';
                    let jabatan = row.jabatan ? ` - ${row.jabatan}` : '';
                    return `${finger} - ${name}${jabatan}`.trim();
                }
            },
            {
                data: 'id_hardware',
                render: function (data) {
                    return data ? `HW#${data}` : '-';
                }
            },
            {
                data: 'id_lisensi_eng',
                render: function (data) {
                    return data ? `ENG#${data}` : '-';
                }
            },
            {
                data: 'id_lisensi_microsoft',
                render: function (data) {
                    return data ? `MS#${data}` : '-';
                }
            },
            { data: 'qty_digunakan' },
            { data: 'tanggal_mulai' },
            { data: 'tanggal_selesai' },
            { data: 'keterangan' },
            { data: 'updated_at' },
            {
                data: 'id_penggunaan_history',
                orderable: false,
                searchable: false,
                render: function (data) {
                    if (!data) return '-';
                    return `<button type="button" class="btn btn-sm btn-danger btn-history-delete" data-id="${data}">Delete</button>`;
                }
            }
        ],
        drawCallback: function () {
            $('#checkAllHistory').prop('checked', false);
        }
    });

    function applyFilter(mode) {
        filterMode = mode;
        $('#filterAll').toggleClass('btn-primary', mode === 'all').toggleClass('btn-outline-primary', mode !== 'all');
        $('#filterActive').toggleClass('btn-success', mode === 'active').toggleClass('btn-outline-success', mode !== 'active');
        $('#filterEnded').toggleClass('btn-warning', mode === 'ended').toggleClass('btn-outline-warning', mode !== 'ended');
        table.draw();
    }

    $.fn.dataTable.ext.search.push(function (settings, data, dataIndex) {
        if (settings.nTable.id !== 'tableHistory') return true;
        if (filterMode === 'all') return true;
        let rowData = table.row(dataIndex).data();
        let ended = !!(rowData && rowData.tanggal_selesai);
        if (filterMode === 'active') return !ended;
        if (filterMode === 'ended') return ended;
        return true;
    });

    $('#filterAll').on('click', function () { applyFilter('all'); });
    $('#filterActive').on('click', function () { applyFilter('active'); });
    $('#filterEnded').on('click', function () { applyFilter('ended'); });

    $(document).on('click', '.btn-history-delete', function () {
        const id = $(this).data('id');
        if (!id) return;
        if (!confirm('Hapus history ini?')) return;

        $.ajax({
            url: "{{ route('penggunaan.history-destroy', ['id' => '__id__']) }}".replace('__id__', id),
            type: 'POST',
            data: {
                _token: "{{ csrf_token() }}",
                _method: "DELETE"
            },
            success: function () {
                table.ajax.reload(null, false);
            },
            error: function (xhr) {
                alert(xhr.responseJSON?.message || 'Gagal hapus history.');
            }
        });
    });

    $('#checkAllHistory').on('change', function () {
        const checked = $(this).is(':checked');
        $('.row-check-history').prop('checked', checked);
    });

    $(document).on('change', '.row-check-history', function () {
        const total = $('.row-check-history').length;
        const checked = $('.row-check-history:checked').length;
        $('#checkAllHistory').prop('checked', total > 0 && total === checked);
    });

    $('#btnDeleteSelected').on('click', function () {
        const ids = $('.row-check-history:checked').map(function () {
            return $(this).val();
        }).get();

        if (!ids.length) {
            alert('Pilih minimal 1 data.');
            return;
        }
        if (!confirm(`Hapus ${ids.length} data history terpilih?`)) return;

        $.ajax({
            url: "{{ route('penggunaan.history-destroy-selected') }}",
            type: 'POST',
            data: {
                _token: "{{ csrf_token() }}",
                ids: ids
            },
            success: function (res) {
                alert(res.message || 'Berhasil dihapus.');
                table.ajax.reload(null, false);
            },
            error: function (xhr) {
                alert(xhr.responseJSON?.message || 'Gagal hapus data terpilih.');
            }
        });
    });

    applyFilter('all');
});
</script>
@endpush