@extends('layouts/app')

@section('content')
    <div class="d-flex justify-content-between align-items-center mb-2">
        <h2>Buat Laporan Baru</h2>
    </div>

    <form method="POST" action="{{ route('laporanv2.store') }}" enctype="multipart/form-data" id="laporanForm">
        @csrf

        <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="{{ 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="{{ 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>

                            @foreach ($atasans as $atasan)
                                <option value="{{ $atasan->id }}">
                                    {{ $atasan->nama }}
                                </option>
                            @endforeach
                        </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>

                            @foreach ($manpowers as $mp)
                                <option value="{{ $mp->id }}" data-atasan="{{ $mp->atasan_id }}"
                                    data-dept="{{ $mp->departemen?->departemen }}"
                                    data-jabatan="{{ $mp->jabatan?->jabatan }}"
                                    data-nilai-atr="{{ $mp->atr->first()?->nilai_atr ?? 0 }}">

                                    {{ $mp->nama }}
                                </option>
                            @endforeach

                        </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',
            ];
        @endphp
        <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>
                            @foreach ($kategoris as $kategori => $target)
                                @php $key = Str::slug($kategori); @endphp
                                <tr>
                                    <td>
                                        <strong>{{ $kategori }}</strong><br>
                                        <small class="text-muted">{{ $target }}</small>
                                    </td>

                                    <td class="text-center">
                                        <div class="btn-group">
                                            <input type="radio" class="btn-check"
                                                name="penilaian[{{ $key }}][status]"
                                                id="status_{{ $key }}_1" value="1">

                                            <label class="btn btn-outline-success"
                                                for="status_{{ $key }}_1">Tercapai</label>

                                            <input type="radio" class="btn-check"
                                                name="penilaian[{{ $key }}][status]"
                                                id="status_{{ $key }}_0" value="0">

                                            <label class="btn btn-outline-danger"
                                                for="status_{{ $key }}_0">Tidak</label>
                                        </div>
                                    </td>

                                    <td style="min-width:200px;">
                                        <textarea class="form-control" name="penilaian[{{ $key }}][keterangan]" rows="2"
                                            placeholder="Tulis alasan jika tidak tercapai..."></textarea>
                                    </td>
                                </tr>
                            @endforeach
                        </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>
@endsection

@push('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;
            } else {
                const file = fotoInput.files[0];
                const maxSize = 20 * 1024 * 1024;

                if (file.size > maxSize) {
                    const sizeMB = (file.size / 1024 / 1024).toFixed(2);

                    messageFoto.textContent =
                        `Ukuran foto ${sizeMB} MB melebihi batas 20 MB.`;

                    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>
@endpush