@extends('layouts.adminlte')
@section('title','User')

@section('content')
<style>
    .tag-penggunaan {
        color: #dc3545;
        font-weight: 700;
        margin-left: 4px;
    }
</style>

@if (session('import_warning'))
    <div class="alert alert-warning">{{ session('import_warning') }}</div>
@endif
@if (session('success'))
    <div class="alert alert-success">{{ session('success') }}</div>
@endif

<div class="mb-2">
    <button class="btn btn-primary" id="btnTambah">Tambah User</button>
    <button class="btn btn-danger" id="btnDeleteSelected">Delete Selected</button>

    <a href="{{ route('user.export') }}" class="btn btn-success">
        Export Excel
    </a>

    <a href="{{ route('user.template') }}" class="btn btn-secondary">
        Download Template
    </a>

    <form action="{{ route('user.import') }}"
          method="POST"
          enctype="multipart/form-data"
          class="d-inline">
        @csrf
        <input type="file" name="file" required>
        <button class="btn btn-warning">Import</button>
    </form>
    <small class="text-muted d-block mt-1"><code>*</code> = user sedang ada penggunaan aktif</small>
</div>

<table class="table table-bordered table-striped" id="tableUser" width="100%">
    <thead>
        <tr>
            <th width="35"><input type="checkbox" id="checkAllUser"></th>
            <th width="50">No</th>
            <th>Nama</th>
            <th>Finger ID</th>
            <th>Jabatan</th>
            <th>Status</th>
            <th width="220">Aksi</th>
        </tr>
    </thead>
</table>

{{-- MODAL --}}
<div class="modal fade" id="modalForm">
    <div class="modal-dialog">
        <form id="formUser">
            @csrf
            <input type="hidden" name="id_user" id="id_user">

            <div class="modal-content">
                <div class="modal-header">
                    <h5>User</h5>
                </div>

                <div class="modal-body">
                    <input class="form-control mb-2"
                           name="nama_orang"
                           placeholder="Nama"
                           required>

                    <input class="form-control mb-2"
                           name="nmr_finger"
                           placeholder="Finger ID"
                           required>

                    <input class="form-control"
                           name="jabatan"
                           placeholder="Jabatan">

                    <select class="form-control mt-2" name="id_lokasi">
                        <option value="">Pilih Lokasi (opsional)</option>
                        @foreach ($lokasis as $l)
                            <option value="{{ $l->id }}">
                                {{ $l->nama_lokasi }}{{ $l->ruangan ? ' | ' . $l->ruangan : '' }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="modal-footer">
                    <button class="btn btn-success">Simpan</button>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="modal fade" id="modalTrace">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 id="traceTitle">Trace User</h5>
            </div>
            <div class="modal-body">
                <h6>Penggunaan Aktif</h6>
                <div id="tracePenggunaan" class="mb-3 text-sm"></div>
                <h6>Peminjaman Aktif</h6>
                <div id="tracePeminjaman" class="text-sm"></div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" data-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
$(function(){

let table = $('#tableUser').DataTable({
    ajax:{
        url:"{{ route('user.data') }}",
        dataSrc:'data'
    },
    columns:[
        {
            data: 'id_user',
            render: function (id) {
                return `<input type="checkbox" class="row-check-user" value="${id}">`;
            },
            orderable:false,
            searchable:false
        },
        {
            data: null,
            render: function (data, type, row, meta) {
                return meta.row + meta.settings._iDisplayStart + 1;
            },
            orderable:false,
            searchable:false
        },
        {
            data:'nama_orang',
            render: function (data, type, row) {
                let tag = row.has_penggunaan ? '<span class="tag-penggunaan">*</span>' : '';
                return `${data || ''}${tag}`;
            }
        },
        {data:'nmr_finger'},
        {data:'jabatan'},
        {
            data:'status',
            render:v => v === 'A'
                ? '<span class="badge bg-success">Active</span>'
                : '<span class="badge bg-danger">Nonaktif</span>'
        },
        {
            data:'id_user',
            render:id=>`
                <button class="btn btn-warning btn-sm edit"
                        data-id="${id}">Edit</button>

                <button class="btn btn-danger btn-sm delete"
                        data-id="${id}">Hapus</button>

                <button class="btn btn-info btn-sm trace"
                        data-id="${id}">
                        Trace
                </button>
            `,
            orderable:false,
            searchable:false
        }
    ]
});

table.on('draw', function () {
    $('#checkAllUser').prop('checked', false);
});

/* TAMBAH */
$('#btnTambah').click(function(){
    $('#formUser')[0].reset();
    $('#id_user').val('');
    $('[name=id_lokasi]').val('');
    $('#modalForm').modal('show');
});

/* SIMPAN */
$('#formUser').submit(function(e){
    e.preventDefault();

    $.ajax({
        url: "{{ route('user.store') }}",
        type: "POST",
        data: $(this).serialize(),
        success: function () {
            $('#modalForm').modal('hide');
            table.ajax.reload(null,false);
        },
        error: function (xhr) {
            let message = 'Gagal menyimpan user.';
            if (xhr.responseJSON && xhr.responseJSON.message) {
                message = xhr.responseJSON.message;
            }
            alert(message);
        }
    });
});

/* EDIT */
$(document).on('click','.edit',function(){
    let id = $(this).data('id');

    $.get("{{ url('master/user/edit') }}/"+id,function(res){
        $('#id_user').val(res.id_user);
        $('[name=nama_orang]').val(res.nama_orang);
        $('[name=nmr_finger]').val(res.nmr_finger);
        $('[name=jabatan]').val(res.jabatan);
        $('[name=id_lokasi]').val(res.id_lokasi || '');
        $('#modalForm').modal('show');
    });
});

/* DELETE */
$(document).on('click','.delete',function(){
    if(!confirm('Hapus user?')) return;

    $.ajax({
        url:"{{ url('master/user/delete') }}/"+$(this).data('id'),
        type:'DELETE',
        data:{_token:"{{ csrf_token() }}"},
        success:()=>table.ajax.reload(null,false)
    });
});

/* TRACE */
$(document).on('click','.trace',function(){
    let id = $(this).data('id');
    $.get("{{ url('master/user/trace') }}/" + id, function (res) {
        $('#traceTitle').text(`Trace User - ${res.user?.label || ''}`);

        let penggunaanHtml = (res.penggunaan || []).length
            ? `<ul class="mb-0 pl-3">${res.penggunaan.map(p => `<li><strong>${p.type}:</strong> ${p.label} <span class="text-muted">(mulai: ${p.tanggal_mulai || '-'}, qty: ${p.qty || 1})</span></li>`).join('')}</ul>`
            : '<div class="text-muted">Tidak ada penggunaan aktif.</div>';

        let peminjamanHtml = (res.peminjaman || []).length
            ? `<ul class="mb-0 pl-3">${res.peminjaman.map(p => `<li>${p.label} <span class="text-muted">(pinjam: ${p.tanggal_pinjam || '-'}${p.keterangan ? `, ${p.keterangan}` : ''})</span></li>`).join('')}</ul>`
            : '<div class="text-muted">Tidak ada peminjaman aktif.</div>';

        $('#tracePenggunaan').html(penggunaanHtml);
        $('#tracePeminjaman').html(peminjamanHtml);
        $('#modalTrace').modal('show');
    });
});

$('#checkAllUser').on('change', function () {
    $('.row-check-user').prop('checked', $(this).is(':checked'));
});

$('#tableUser tbody').on('change', '.row-check-user', function () {
    let total = $('.row-check-user').length;
    let checked = $('.row-check-user:checked').length;
    $('#checkAllUser').prop('checked', total > 0 && total === checked);
});

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

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

    $.post("{{ route('user.destroy-selected') }}", {
        _token: "{{ csrf_token() }}",
        ids: ids
    }, function (res) {
        let failed = res.failed || [];
        if (failed.length) {
            alert((res.message || 'Selesai.') + '\nGagal:\n- ' + failed.join('\n- '));
        }
        table.ajax.reload(null, false);
    }).fail(function (xhr) {
        let message = xhr.responseJSON?.message || 'Gagal hapus data terpilih.';
        alert(message);
    });
});

/* INLINE EDIT */
$('#tableUser tbody').on('dblclick','td',function(){

    let cell = table.cell(this);
    let row = table.row(this).data();
    let col = cell.index().column;

    if(col < 2 || col > 4) return;

    let oldVal = cell.data();

    $(this).html(`
        <input class="form-control form-control-sm"
               value="${oldVal}">
    `);

    let input = $(this).find('input');
    input.focus().select();

    function save(){
        let newVal = input.val();
        cell.data(newVal).draw(false);

    let field = ['nama_orang','nmr_finger','jabatan'][col - 2];

        $.post("{{ route('user.store') }}",{
            _token:"{{ csrf_token() }}",
            id_user: row.id_user,
            [field]: newVal
        });
    }

    input.on('blur',save);
    input.on('keydown',e=>{
        if(e.key==='Enter') save();
    });

});

});
</script>
@endpush