<?php $__env->startSection('content'); ?>
    <div class="d-flex justify-content-between align-items-center mb-2">
        <h2>Buat Laporan Baru</h2>
    </div>

    <form method="POST" action="<?php echo e(route('laporanv2.store')); ?>" enctype="multipart/form-data" id="laporanForm">
        <?php echo csrf_field(); ?>

        <div class="card shadow-sm mb-4 border-0">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0"><i class="fas fa-info-circle me-2"></i>Informasi Umum</h5>
            </div>

            <div class="card-body">
                <div class="row g-3">

                    <div class="col-md-6">
                        <label class="form-label">Tanggal</label>
                        <input type="date" class="form-control" name="tanggal" id="tanggal"
                            value="<?php echo e(old('tanggal', date('Y-m-d'))); ?>" readonly>
                        <span id="messageTanggal" class="text-danger small mt-1 d-block"></span>
                    </div>
                    <input type="hidden" name="nama_gl" value="<?php echo e(Auth::user()->karyawan->nama); ?>">
                    <div class="col-md-6">
                        <label class="form-label">Nama GL</label>

                        <select class="form-select" id="glSelect" name="gl_id">

                            <option value="">
                                -- Pilih GL --
                            </option>

                            <?php $__currentLoopData = $atasans; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $atasan): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <option value="<?php echo e($atasan->id); ?>">
                                    <?php echo e($atasan->nama); ?>

                                </option>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </select>
                    </div>

                    <input type="hidden" name="jabatan" id="jabatanInput">
                    <div class="col-md-6">
                        <label class="form-label">Pilih Manpower</label>
                        <select class="form-select" name="manpower_id" id="manpowerSelect">

                            <option value="">
                                -- Pilih Karyawan --
                            </option>

                            <?php $__currentLoopData = $manpowers; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $mp): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <option value="<?php echo e($mp->id); ?>" data-atasan="<?php echo e($mp->atasan_id); ?>"
                                    data-dept="<?php echo e($mp->departemen?->departemen); ?>"
                                    data-jabatan="<?php echo e($mp->jabatan?->jabatan); ?>"
                                    data-nilai-atr="<?php echo e($mp->atr->first()?->nilai_atr ?? 0); ?>">

                                    <?php echo e($mp->nama); ?>

                                </option>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

                        </select>
                        <span id="messageManpower" class="text-danger small mt-1 d-block"></span>
                    </div>

                    <div class="col-md-6">
                        <label class="form-label">Departemen</label>
                        <input type="text" class="form-control" name="departemen" readonly>
                    </div>


                </div>
            </div>
        </div>

        <?php
            $kategoris = [
                'SHE Culture' => 'Target 100%',
                'ATR' => 'Target 99%',
                'Incident' => 'Target Zero',
                'Manpower Behavior' => 'Target Zero',
            ];
        ?>
        <div class="card shadow-sm mb-4 border-0">
            <div class="card-header bg-success text-white">
                <h5 class="mb-0">
                    <i class="fas fa-check-square me-2"></i>Penilaian <span id="nilaiAtr"></span>
                </h5>
            </div>

            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-bordered mb-0">

                        <thead class="table-light">
                            <tr>
                                <th>Kategori</th>
                                <th>Status</th>
                                <th>Keterangan</th>
                            </tr>
                        </thead>

                        <tbody>
                            <?php $__currentLoopData = $kategoris; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $kategori => $target): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <?php $key = Str::slug($kategori); ?>
                                <tr>
                                    <td>
                                        <strong><?php echo e($kategori); ?></strong><br>
                                        <small class="text-muted"><?php echo e($target); ?></small>
                                    </td>

                                    <td class="text-center">
                                        <div class="btn-group">
                                            <input type="radio" class="btn-check"
                                                name="penilaian[<?php echo e($key); ?>][status]"
                                                id="status_<?php echo e($key); ?>_1" value="1">

                                            <label class="btn btn-outline-success"
                                                for="status_<?php echo e($key); ?>_1">Tercapai</label>

                                            <input type="radio" class="btn-check"
                                                name="penilaian[<?php echo e($key); ?>][status]"
                                                id="status_<?php echo e($key); ?>_0" value="0">

                                            <label class="btn btn-outline-danger"
                                                for="status_<?php echo e($key); ?>_0">Tidak</label>
                                        </div>
                                    </td>

                                    <td style="min-width:200px;">
                                        <textarea class="form-control" name="penilaian[<?php echo e($key); ?>][keterangan]" rows="2"
                                            placeholder="Tulis alasan jika tidak tercapai..."></textarea>
                                    </td>
                                </tr>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </tbody>

                    </table>
                </div>
            </div>
        </div>
        <div class="card shadow-sm mb-4 border-0">
            <div class="card-header bg-info text-white">
                <h5 class="mb-0"><i class="fas fa-file-alt me-2"></i>Informasi Tambahan</h5>
            </div>

            <div class="card-body">
                <textarea class="form-control mb-3" name="note" placeholder="Note"></textarea>
                <textarea class="form-control mb-3" name="feedback" placeholder="Feedback"></textarea>

                <input class="form-control" type="file" name="foto" id="foto" accept="image/*">
                <span id="messageFoto" class="text-danger small mt-1 d-block"></span>
            </div>
        </div>
        <div class="text-end">
            <button class="btn btn-primary btn-lg" id="buttonLaporan">Simpan</button>
        </div>

    </form>
<?php $__env->stopSection(); ?>

<?php $__env->startPush('scripts'); ?>
    <script>
        window.addEventListener('DOMContentLoaded', function() {

            const glSelect = document.getElementById('glSelect');
            const manpowerSelect = document.getElementById('manpowerSelect');

            const allOptions = Array.from(manpowerSelect.options);

            const glTom = new TomSelect("#glSelect", {
                create: false,
                sortField: {
                    field: "text",
                    direction: "asc"
                }
            });

            const manpowerTom = new TomSelect("#manpowerSelect", {
                create: false,
                sortField: {
                    field: "text",
                    direction: "asc"
                }
            });

            manpowerTom.clear();
            manpowerTom.clearOptions();

            glTom.on('change', function(value) {

                manpowerTom.clear();
                manpowerTom.clearOptions();

                allOptions.forEach(option => {

                    if (option.value === '') return;

                    if (option.dataset.atasan === value) {

                        manpowerTom.addOption({
                            value: option.value,
                            text: option.text,
                            dept: option.dataset.dept,
                            jabatan: option.dataset.jabatan,
                            atr: option.dataset.nilaiAtr
                        });

                    }
                });

                manpowerTom.refreshOptions(false);
            });

            manpowerTom.on('change', function(value) {

                const option = manpowerTom.options[value];

                if (!option) return;

                document.querySelector('[name="departemen"]').value =
                    option.dept || '';

                document.getElementById('jabatanInput').value =
                    option.jabatan || '';

                document.getElementById('nilaiAtr').innerText =
                    option.atr ?
                    ' | ATR : ' + parseFloat(option.atr) + '%' :
                    '';
            });

        });
        document.getElementById('laporanForm').addEventListener('submit', function(e) {
            let valid = true;

            const manpowerSelect = document.getElementById('manpowerSelect').value;
            const tanggal = document.getElementById('tanggal').value;
            const fotoInput = document.getElementById('foto');

            const messageManpower = document.getElementById('messageManpower');
            const messageTanggal = document.getElementById('messageTanggal');
            const messageFoto = document.getElementById('messageFoto');

            messageManpower.textContent = '';
            messageTanggal.textContent = '';
            messageFoto.textContent = '';

            if (!manpowerSelect) {
                messageManpower.textContent = 'Manpower harus di isi.';
                valid = false;
            }

            if (!tanggal) {
                messageTanggal.textContent = 'Tanggal harus di isi.';
                valid = false;
            }

            if (fotoInput.files.length === 0) {
                messageFoto.textContent = 'Foto harus di isi.';
                valid = false;
            }

            document.querySelectorAll('tbody tr').forEach(tr => {
                const radios = tr.querySelectorAll('input[type="radio"]');
                const isChecked = Array.from(radios).some(r => r.checked);

                if (!isChecked) {
                    tr.classList.add('table-danger');
                    valid = false;
                } else {
                    tr.classList.remove('table-danger');
                }
            });

            document.querySelectorAll('input[value="0"]:checked').forEach(radio => {
                const tr = radio.closest('tr');
                const textarea = tr.querySelector('textarea');

                if (!textarea.value.trim()) {
                    textarea.classList.add('is-invalid');
                    valid = false;
                } else {
                    textarea.classList.remove('is-invalid');
                }
            });

            if (!valid) {
                e.preventDefault();
            }
        });

        document.querySelectorAll('input[type="radio"]').forEach(radio => {
            radio.addEventListener('change', function() {
                const tr = this.closest('tr');
                const textarea = tr.querySelector('textarea');

                tr.classList.remove('table-danger');

                if (this.value == "1") {
                    textarea.value = '';
                    textarea.classList.remove('is-invalid');
                    textarea.setAttribute('disabled', true);
                } else {
                    textarea.removeAttribute('disabled');
                }
            });
        });
    </script>
<?php $__env->stopPush(); ?>

<?php echo $__env->make('layouts/app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /home/u544939042/domains/mitracempaka.id/gl-asuh/resources/views/menu/laporan/createv2.blade.php ENDPATH**/ ?>