@extends('layouts.adminlte')
@section('title','Buat Audit')

@section('content')
@if (session('error'))
    <div class="alert alert-danger">{{ session('error') }}</div>
@endif
@if (session('warning'))
    <div class="alert alert-warning">{{ session('warning') }}</div>
@endif
<form method="POST" action="{{ route('jadwal.store') }}" enctype="multipart/form-data">
    @csrf
    <div class="card">
        <div class="card-body">
            <div class="form-group">
                <label>User</label>
                <select class="form-control" name="id_user[]" id="audit_user" multiple required>
                    <option value="" disabled>Pilih User</option>
                    @foreach ($users as $u)
                        <option value="{{ $u->id_user }}" data-label="{{ $u->nmr_finger }} - {{ $u->nama_orang }}">
                            {{ $u->nmr_finger }} - {{ $u->nama_orang }}
                        </option>
                    @endforeach
                </select>
                <div id="auditedTagList" class="mt-2"></div>
                <small class="form-text text-muted">Bisa pilih lebih dari satu user.</small>
            </div>

            <div class="form-group">
                <label>Periode Audit (Bulan)</label>
                <input type="month" class="form-control" name="periode" id="audit_periode" required>
                <small id="periodeHint" class="form-text text-muted"></small>
            </div>

            <div class="form-group">
                <label>Tanggal Pelaksanaan</label>
                <input type="date" class="form-control" name="tanggal_pelaksanaan" id="audit_tanggal">
            </div>

            <div class="form-group">
                <label>Auditor</label>
                <input type="text" class="form-control" name="auditor" id="audit_auditor" placeholder="Nama auditor">
            </div>

            <div class="form-group">
                <label>Tim Checking</label>
                <input type="text" class="form-control" name="tim_checking" id="audit_tim_checking" placeholder="Nama anggota tim">
            </div>

            <div class="form-group">
                <label>Validasi</label>
                <input type="text" class="form-control" name="validasi" id="audit_validasi" placeholder="Validator / PIC">
            </div>

            <div class="form-group">
                <label>Catatan</label>
                <textarea class="form-control" name="catatan" id="audit_catatan" rows="2"></textarea>
            </div>

            <div class="card mb-3">
                <div class="card-body">
                    <div class="font-weight-bold mb-2">Request Repair / Ganti (Audit)</div>
                    <div class="form-row">
                        <div class="col-md-4">
                            <select class="form-control" name="request_action">
                                <option value="">Pilih Tindakan</option>
                                <option value="REPAIR">REPAIR</option>
                                <option value="GANTI">GANTI</option>
                            </select>
                        </div>
                        <div class="col-md-8">
                            <input class="form-control" name="request_notes" placeholder="Catatan request">
                        </div>
                    </div>
                    <div class="mt-2">
                        <input type="file" class="form-control-file" name="request_photos[]" multiple accept="image/*">
                        <small class="form-text text-muted">Upload foto repair/ganti (boleh lebih dari satu).</small>
                    </div>
                </div>
            </div>

            <button type="button" class="btn btn-outline-primary btn-sm mb-3" id="audit_autofill_latest">
                Auto Fill dari Histori Terakhir
            </button>
            <div id="audit_autofill_status" class="text-muted mb-2"></div>

            <hr>
            <h6>Perangkat yang Digunakan User</h6>
            <div id="hardwareList" class="text-muted">Pilih user untuk memuat perangkat.</div>
        </div>
        <div class="card-footer">
            <button class="btn btn-success">Simpan</button>
            <a href="{{ route('jadwal.index') }}" class="btn btn-secondary">Kembali</a>
        </div>
    </div>
</form>
@endsection

@push('scripts')
<script>
$(function () {
    function preselectFromQuery() {
        let params = new URLSearchParams(window.location.search);
        let periode = params.get('periode') || '';
        let users = params.getAll('users[]');
        if (periode) {
            $('#audit_periode').val(periode);
        }
        if (users.length) {
            users.forEach(function (id) {
                $('#audit_user option[value="' + id + '"]').prop('selected', true);
            });
        }
        if (periode) {
            refreshAvailableUsers();
        } else if (users.length) {
            loadHardwareForUsers();
        }
    }

    function renderUserReview(user, hardwareItems, engItems, msItems) {
        let hardwareHtml = '';
        if (!hardwareItems.length) {
            hardwareHtml = '<div class="text-muted">Tidak ada hardware.</div>';
        } else {
            hardwareHtml = hardwareItems.map(function (h, idx) {
            return `
                <div class="card mb-2 p-2">
                    <div><strong>${idx + 1}. ${h.label}</strong></div>
                    <input type="hidden" name="items[${user.id}][hardware][${idx}][id_hardware]" value="${h.id_hardware}">
                    <div class="form-row mt-2">
                        <div class="col-md-4">
                            <select class="form-control" data-type="hardware" data-id="${h.id_hardware}" name="items[${user.id}][hardware][${idx}][status_perangkat]">
                                <option value="">Status</option>
                                <option value="Baik">Baik</option>
                                <option value="Perlu Servis">Perlu Servis</option>
                                <option value="Rusak">Rusak</option>
                            </select>
                        </div>
                        <div class="col-md-8">
                            <input class="form-control" data-type="hardware" data-id="${h.id_hardware}" name="items[${user.id}][hardware][${idx}][kondisi]" placeholder="Kondisi / catatan perangkat">
                        </div>
                    </div>
                    <div class="form-row mt-2">
                        <div class="col-md-4">
                            <select class="form-control" name="items[${user.id}][hardware][${idx}][request_action]">
                                <option value="">Request</option>
                                <option value="REPAIR">REPAIR</option>
                                <option value="GANTI">GANTI</option>
                            </select>
                        </div>
                        <div class="col-md-8">
                            <input class="form-control" name="items[${user.id}][hardware][${idx}][request_notes]" placeholder="Catatan request">
                        </div>
                    </div>
                    <div class="mt-2">
                        <input type="file" class="form-control-file" name="items[${user.id}][hardware][${idx}][request_photos][]" multiple accept="image/*">
                    </div>
                </div>
            `;
            }).join('');
        }

        let engHtml = '';
        if (!engItems.length) {
            engHtml = '<div class="text-muted">Tidak ada lisensi engineering.</div>';
        } else {
            engHtml = engItems.map(function (l, idx) {
                return `
                    <div class="card mb-2 p-2">
                        <div><strong>${idx + 1}. ${l.label}</strong></div>
                        <input type="hidden" name="items[${user.id}][lisensi_eng][${idx}][id_lisensi_eng]" value="${l.id_lisensi_eng}">
                        <div class="form-row mt-2">
                            <div class="col-md-4">
                                <select class="form-control" data-type="lisensi_eng" data-id="${l.id_lisensi_eng}" name="items[${user.id}][lisensi_eng][${idx}][status_perangkat]">
                                    <option value="">Status</option>
                                    <option value="Baik">Baik</option>
                                    <option value="Perlu Servis">Perlu Servis</option>
                                    <option value="Rusak">Rusak</option>
                                </select>
                            </div>
                            <div class="col-md-8">
                                <input class="form-control" data-type="lisensi_eng" data-id="${l.id_lisensi_eng}" name="items[${user.id}][lisensi_eng][${idx}][kondisi]" placeholder="Kondisi / catatan perangkat">
                            </div>
                        </div>
                        <div class="form-row mt-2">
                            <div class="col-md-4">
                                <select class="form-control" name="items[${user.id}][lisensi_eng][${idx}][request_action]">
                                    <option value="">Request</option>
                                    <option value="REPAIR">REPAIR</option>
                                    <option value="GANTI">GANTI</option>
                                </select>
                            </div>
                            <div class="col-md-8">
                                <input class="form-control" name="items[${user.id}][lisensi_eng][${idx}][request_notes]" placeholder="Catatan request">
                            </div>
                        </div>
                        <div class="mt-2">
                            <input type="file" class="form-control-file" name="items[${user.id}][lisensi_eng][${idx}][request_photos][]" multiple accept="image/*">
                        </div>
                    </div>
                `;
            }).join('');
        }

        let msHtml = '';
        if (!msItems.length) {
            msHtml = '<div class="text-muted">Tidak ada lisensi microsoft.</div>';
        } else {
            msHtml = msItems.map(function (l, idx) {
                return `
                    <div class="card mb-2 p-2">
                        <div><strong>${idx + 1}. ${l.label}</strong></div>
                        <input type="hidden" name="items[${user.id}][lisensi_microsoft][${idx}][id_lisensi_microsoft]" value="${l.id_lisensi_microsoft}">
                        <div class="form-row mt-2">
                            <div class="col-md-4">
                                <select class="form-control" data-type="lisensi_microsoft" data-id="${l.id_lisensi_microsoft}" name="items[${user.id}][lisensi_microsoft][${idx}][status_perangkat]">
                                    <option value="">Status</option>
                                    <option value="Baik">Baik</option>
                                    <option value="Perlu Servis">Perlu Servis</option>
                                    <option value="Rusak">Rusak</option>
                                </select>
                            </div>
                            <div class="col-md-8">
                                <input class="form-control" data-type="lisensi_microsoft" data-id="${l.id_lisensi_microsoft}" name="items[${user.id}][lisensi_microsoft][${idx}][kondisi]" placeholder="Kondisi / catatan perangkat">
                            </div>
                        </div>
                        <div class="form-row mt-2">
                            <div class="col-md-4">
                                <select class="form-control" name="items[${user.id}][lisensi_microsoft][${idx}][request_action]">
                                    <option value="">Request</option>
                                    <option value="REPAIR">REPAIR</option>
                                    <option value="GANTI">GANTI</option>
                                </select>
                            </div>
                            <div class="col-md-8">
                                <input class="form-control" name="items[${user.id}][lisensi_microsoft][${idx}][request_notes]" placeholder="Catatan request">
                            </div>
                        </div>
                        <div class="mt-2">
                            <input type="file" class="form-control-file" name="items[${user.id}][lisensi_microsoft][${idx}][request_photos][]" multiple accept="image/*">
                        </div>
                    </div>
                `;
            }).join('');
        }

        return `
            <div class="card mb-3 p-2" data-user-id="${user.id}">
                <div><strong>${user.label}</strong></div>
                <div class="mt-2">
                    <div class="mb-2">
                        <div class="font-weight-bold">Hardware</div>
                        ${hardwareHtml}
                    </div>
                    <div class="mb-2">
                        <div class="font-weight-bold">Lisensi Engineering</div>
                        ${engHtml}
                    </div>
                    <div class="mb-2">
                        <div class="font-weight-bold">Lisensi Microsoft</div>
                        ${msHtml}
                    </div>
                </div>
            </div>
        `;
    }

    function loadHardwareForUsers() {
        let selected = $('#audit_user option:selected').map(function () {
            return {
                id: $(this).val(),
                label: $(this).data('label') || $(this).text().trim()
            };
        }).get().filter(function (u) { return u.id; });

        if (!selected.length) {
            $('#hardwareList').html('<div class="text-muted">Pilih user untuk memuat perangkat.</div>');
            return $.Deferred().resolve().promise();
        }

        $('#hardwareList').html('<div class="text-muted">Memuat perangkat...</div>');
        let requests = selected.map(function (u) {
            let hwReq = $.get("{{ route('jadwal.penggunaan-hardware', ['userId' => '__id__']) }}".replace('__id__', u.id));
            let engReq = $.get("{{ route('jadwal.penggunaan-lisensi-eng', ['userId' => '__id__']) }}".replace('__id__', u.id));
            let msReq = $.get("{{ route('jadwal.penggunaan-lisensi-microsoft', ['userId' => '__id__']) }}".replace('__id__', u.id));
            return $.when(hwReq, engReq, msReq).then(function (hwRes, engRes, msRes) {
                let hwData = Array.isArray(hwRes) ? hwRes[0] : hwRes;
                let engData = Array.isArray(engRes) ? engRes[0] : engRes;
                let msData = Array.isArray(msRes) ? msRes[0] : msRes;
                return renderUserReview(
                    u,
                    (hwData && hwData.hardware) ? hwData.hardware : [],
                    (engData && engData.lisensi) ? engData.lisensi : [],
                    (msData && msData.lisensi) ? msData.lisensi : []
                );
            });
        });

        return $.when.apply($, requests).done(function () {
            let html = [];
            if (requests.length === 1) {
                html = [arguments[0]];
            } else {
                html = Array.prototype.slice.call(arguments).map(function (r) {
                    if (typeof r === 'string') return r;
                    if (Array.isArray(r)) return r[0];
                    return r;
                });
            }
            $('#hardwareList').html(html.join(''));
        });
    }

    function applyHistoryToUser($container, res, fillTop) {
            if (fillTop && res.audit) {
                if (res.audit.periode_audit) {
                    $('#audit_periode').val(res.audit.periode_audit).trigger('change');
                }
                if (res.audit.tanggal_audit) {
                    $('#audit_tanggal').val(res.audit.tanggal_audit);
                }
                if (res.audit.auditor) {
                    $('#audit_auditor').val(res.audit.auditor);
                }
                if (res.audit.tim_checking) {
                    $('#audit_tim_checking').val(res.audit.tim_checking);
                }
                if (res.audit.validasi) {
                    $('#audit_validasi').val(res.audit.validasi);
                }
                if (res.audit.catatan) {
                    $('#audit_catatan').val(res.audit.catatan);
                }
            }
            let items = res.items || [];
            items.forEach(function (it) {
                $container.find(`select[data-type="${it.type}"][data-id="${it.id}"]`).val(it.status || '');
                $container.find(`input[data-type="${it.type}"][data-id="${it.id}"]`).val(it.kondisi || '');
            });
    }

    function refreshAvailableUsers() {
        let periode = $('#audit_periode').val();
        if (!periode) {
            $('#periodeHint').text('');
            $('#auditedTagList').empty();
            return;
        }
        $.get("{{ route('jadwal.belum-audit') }}", { periode: periode }, function (res) {
            let allowed = (res.data || []).map(function (u) { return String(u.id_user); });
            let allowedSet = new Set(allowed);
            let removed = [];
            let audited = [];
            $('#audit_user option').each(function () {
                let val = $(this).val();
                if (!val) return;
                if (!allowedSet.has(String(val))) {
                    if ($(this).is(':selected')) {
                        removed.push($(this).text().trim());
                    }
                    audited.push($(this).data('label') || $(this).text().trim());
                    $(this).prop('disabled', true).prop('selected', false);
                } else {
                    $(this).prop('disabled', false);
                }
            });
            if (removed.length) {
                $('#periodeHint').text('Sebagian user sudah diaudit di periode ini dan otomatis dilepas: ' + removed.join(', '));
            } else {
                $('#periodeHint').text('');
            }
            if (audited.length) {
                let tags = audited.map(function (t) {
                    return `<span class="badge badge-danger mr-1 mb-1">Audited: ${t}</span>`;
                }).join('');
                $('#auditedTagList').html(tags);
            } else {
                $('#auditedTagList').empty();
            }
            loadHardwareForUsers();
        }).fail(function (xhr) {
            let msg = 'Gagal cek user belum audit.';
            if (xhr.responseJSON && xhr.responseJSON.message) {
                msg = xhr.responseJSON.message;
            }
            $('#periodeHint').text(msg);
        });
    }

    $('#audit_user').on('change', loadHardwareForUsers);
    $('#audit_periode').on('change', refreshAvailableUsers);

    $('#audit_autofill_latest').on('click', function () {
        let selectedUsers = $('#audit_user option:selected').map(function () {
            return $(this).val();
        }).get().filter(Boolean);
        if (!selectedUsers.length) {
            $('#audit_autofill_status').text('Pilih user terlebih dahulu.');
            return;
        }

        $('#audit_autofill_status').text('Mengambil histori terakhir...');
        loadHardwareForUsers().done(function () {
            let fillTopOnce = true;
            let foundAny = false;
            let pending = selectedUsers.length;

            selectedUsers.forEach(function (userId) {
                $.get("{{ route('jadwal.history-latest-or-usage', ['userId' => '__id__']) }}".replace('__id__', userId), function (res) {
                    if (res && (res.items || []).length) {
                        foundAny = true;
                        let $container = $(`.card[data-user-id="${userId}"]`);
                        applyHistoryToUser($container, res, fillTopOnce);
                        if (fillTopOnce) fillTopOnce = false;
                    }
                }).always(function () {
                    pending--;
                    if (pending <= 0) {
                        $('#audit_autofill_status').text(foundAny ? 'Auto fill selesai.' : 'Histori/penggunaan belum tersedia untuk user terpilih.');
                    }
                });
            });
        });
    });

    preselectFromQuery();
});
</script>
@endpush