@extends('layouts.app')

@section('title', 'Buat Laporan Baru')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-10 col-lg-8">
            <!-- Progress Steps -->
            <div class="card shadow-sm mb-4">
                <div class="card-body py-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="step-item active">
                            <div class="step-circle"><i class="bi bi-camera"></i></div>
                            <small class="step-label d-none d-md-block">Foto</small>
                        </div>
                        <div class="step-line"></div>
                        <div class="step-item">
                            <div class="step-circle"><i class="bi bi-geo-alt"></i></div>
                            <small class="step-label d-none d-md-block">Lokasi</small>
                        </div>
                        <div class="step-line"></div>
                        <div class="step-item">
                            <div class="step-circle"><i class="bi bi-file-text"></i></div>
                            <small class="step-label d-none d-md-block">Detail</small>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card shadow-sm">
                <div class="card-header bg-gradient-primary text-white">
                    <h5 class="mb-0">
                        <i class="bi bi-plus-circle-fill"></i> Buat Laporan Audit Baru
                    </h5>
                    <small class="opacity-75">Lengkapi semua informasi yang diperlukan</small>
                </div>

                <div class="card-body p-4">
                    <form action="{{ route('reports.store') }}" method="POST" enctype="multipart/form-data" id="reportForm">
                        @csrf

                        @php
                            $authUser        = auth()->user();
                            $authAuditType   = $authUser->auditType;
                            $isMachineAuditor = $authAuditType && strtolower($authAuditType->name) === 'mesin';
                            $is5RAuditor      = $authAuditType && strtoupper($authAuditType->code) === '5R';

                            // Data 5R lengkap
                            $items5R = [
                                'R1 - RINGKAS' => [
                                    1  => 'Peralatan Kerja terletak sesuai dengan peruntukannya',
                                    2  => 'Peralatan Kerja tidak terletak di akses jalan / lorong / gang',
                                    3  => 'Material (FG/RM/PM) yang terletak sesuai dengan kebutuhannya',
                                    4  => 'Material (FG/RM/PM) tidak terletak di akses jalan / lorong / gang',
                                    5  => 'Material OK, Pending & Karantina dipisahkan secara jelas',
                                    6  => 'Ada lokasi Tempat Penyimpanan Sementara (TPS) dan PIC',
                                ],
                                'R2 - RAPI' => [
                                    7  => 'Peralatan Kerja, mempunyai label yang jelas',
                                    8  => 'Peralatan kerja, tersusun rapi pada tempatnya',
                                    9  => 'Tempat Sampah mempunyai label didalam garis batas',
                                    10 => 'Material (FG/RM/PM) mempunyai label didalam garis batas',
                                    11 => 'Material (FG/RM/PM), tersusun rapi pada tempatnya',
                                    12 => 'Peralatan Handling diletakkan di area yang sudah di tentukan',
                                    13 => 'Kabel tertata rapi dan tidak menyentuh lantai',
                                    14 => 'Tempat penyimpanan yang terbuka ditata rapi',
                                    15 => 'Tempat penyimpanan yang terbuka terdapat label (terbuka)',
                                    16 => 'Tempat penyimpanan yang tertutup ditata rapi',
                                    17 => 'Tempat penyimpanan yang tertutup terdapat label beserta rincian isinya',
                                    18 => 'Lintasan jalan diberi pembatas dengan jelas',
                                    19 => 'Area kerja diberi pembatas dengan jelas',
                                ],
                                'R3 - RESIK' => [
                                    20 => 'Peralatan Kerja dalam keadaan bersih',
                                    21 => 'Peralatan Kerja dalam kondisi tanpa korosif',
                                    22 => 'Peralatan Handling dalam keadaan bersih',
                                    23 => 'Peralatan Handling dalam kondisi tanpa korosif',
                                    24 => 'Tempat penyimpanan tertutup dalam keadaan bersih',
                                    25 => 'Tempat penyimpanan terbuka dalam keadaan bersih',
                                    26 => 'Lantai dalam keadaan bersih',
                                    27 => 'Lantai tidak rusak',
                                    28 => 'Dinding dalam keadaan bersih',
                                    29 => 'Dinding tidak rusak',
                                    30 => 'Atap (plafon/langit-langit) dalam keadaan bersih',
                                    31 => 'Atap (plafon/langit-langit) tidak rusak',
                                    32 => 'Tangga dalam keadaan bersih',
                                    33 => 'Tangga dalam kondisi tanpa korosif',
                                    34 => 'Tidak ada kebocoran dan genangan air',
                                    35 => 'Rak penyimpanan dalam kondisi tanpa korosif',
                                    36 => 'Alat kebersihan (sapu, pel, dll) tersedia',
                                    37 => 'Alat kebersihan (sapu, pel, dll) tertata rapi',
                                ],
                                'R4 - RAWAT' => [
                                    38 => 'Peta Area Kerja 5R dan PIC Area digambarkan dengan visualisasi warna',
                                    39 => 'Peta Area Kerja 5R dan PIC Area terpasang dengan jelas',
                                    40 => 'Peta Area Kerja 5R sesuai dengan aktual dilapangan',
                                    41 => 'Standar R1 tersedia dan diterapkan secara konsisten',
                                    42 => 'Standar R2 tersedia dan diterapkan secara konsisten',
                                    43 => 'Standar R3 tersedia dan diterapkan secara konsisten',
                                    44 => 'Garis batas memiliki ukuran & warna standar',
                                    45 => 'Seluruh karyawan diarea tersebut (termasuk karyawan OS) menerapkan personel hygiene atau menggunakan APD',
                                    46 => 'Jadwal kebersihan tersedia dan terpasang dengan jelas',
                                    47 => 'Checklist kebersihan dilakukan dan sesuai kondisi area kerja (dilakukan oleh supervisor)',
                                ],
                                'R5 - RAJIN' => [
                                    48 => 'Temuan audit 5R ditindaklanjuti tepat waktu dan tidak berulang pada periode audit berikutnya',
                                    49 => 'Temuan audit 5R dan closing terpasang dan ditampilkan dipapan 5R',
                                    50 => 'Rencana kerja dari temuan 5R / 5S dibuat/diletakkan di papan 5R dan dilaksanakan oleh seluruh PIC area',
                                    51 => 'Karyawan disiplin dalam penggunaan dan pengembalian peralatan kerja',
                                    52 => 'Visual management yang ada diarea kerja dipatuhi oleh karyawan',
                                    53 => 'Papan Infrormasi 5R Lengkap sesuai dengan format dan di perbarui secara berkala',
                                ],
                            ];
                        @endphp

                        <!-- ══ Section 1: Foto ══ -->
                        <div class="form-section mb-4">
                            <div class="section-header mb-3">
                                <h6 class="fw-bold text-primary mb-1">
                                    <i class="bi bi-camera-fill"></i> 1. Dokumentasi Foto
                                </h6>
                                <small class="text-muted">Upload foto yang menunjukkan masalah dengan jelas</small>
                            </div>

                            <div class="photo-upload-area">
                                <div class="row g-2 mb-3">
                                    <div class="col-6">
                                        <button type="button" class="btn btn-outline-primary w-100 btn-upload" onclick="openCamera()">
                                            <i class="bi bi-camera-fill fs-4 d-block mb-2"></i>
                                            <span class="d-block small">Buka Kamera</span>
                                        </button>
                                    </div>
                                    <div class="col-6">
                                        <button type="button" class="btn btn-outline-primary w-100 btn-upload"
                                            onclick="document.getElementById('photos').click()">
                                            <i class="bi bi-folder2-open fs-4 d-block mb-2"></i>
                                            <span class="d-block small">Pilih dari Galeri</span>
                                        </button>
                                    </div>
                                </div>

                                <input type="file" name="photos[]" id="photos"
                                       class="d-none" accept="image/*" multiple required>

                                <div class="alert alert-info alert-sm mb-0">
                                    <i class="bi bi-info-circle"></i>
                                    <small>Anda bisa memilih beberapa foto. Maksimal 500kb per foto.</small>
                                </div>

                                @error('photos')
                                    <div class="text-danger small mt-2">{{ $message }}</div>
                                @enderror
                                @error('photos.*')
                                    <div class="text-danger small mt-2">{{ $message }}</div>
                                @enderror

                                <div id="photoPreview" class="row g-3 mt-3"></div>
                            </div>
                        </div>

                        <hr class="my-4">

                        <!-- ══ Section 2: Lokasi & Masalah ══ -->
                        <div class="form-section mb-4">
                            <div class="section-header mb-3">
                                <h6 class="fw-bold text-primary mb-1">
                                    <i class="bi bi-geo-alt-fill"></i> 2. Informasi Lokasi & Masalah
                                </h6>
                                <small class="text-muted">Tentukan lokasi dan jenis masalah yang ditemukan</small>
                            </div>

                            <div class="row g-3">

                                {{-- ── Lokasi ── --}}
                                <div class="col-md-6">
                                    <label for="location" class="form-label fw-semibold">
                                        <i class="bi bi-geo-alt"></i> Lokasi <span class="text-danger">*</span>
                                    </label>
                                    <input type="text" name="location" id="location"
                                           class="form-control form-control-lg @error('location') is-invalid @enderror"
                                           value="{{ old('location') }}" required>
                                    @error('location')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="text-muted">Sebutkan lokasi spesifik temuan masalah</small>
                                </div>

                                @if($is5RAuditor)
                                {{-- ════ KHUSUS AUDIT 5R ════ --}}

                                {{-- Kategori 5R --}}
                                <div class="col-md-6">
                                    <label for="kategori_5r" class="form-label fw-semibold">
                                        <i class="bi bi-list-check text-success"></i> Kategori 5R <span class="text-danger">*</span>
                                    </label>
                                    <select id="kategori_5r" class="form-select form-select-lg" onchange="onKategoriChange(this)">
                                        <option value="">— Pilih Kategori —</option>
                                        @foreach(array_keys($items5R) as $kat)
                                            <option value="{{ $kat }}" {{ old('issue_type') && str_starts_with(old('issue_type'), explode(' - ', $kat)[0]) ? 'selected' : '' }}>
                                                {{ $kat }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                {{-- Item 5R --}}
                                <div class="col-12" id="itemWrapper" style="{{ old('issue_type') ? '' : 'display:none;' }}">
                                    <label class="form-label fw-semibold">
                                        <i class="bi bi-check2-square text-success"></i> Item Checklist <span class="text-danger">*</span>
                                    </label>
                                    <select name="issue_type" id="item_5r"
                                            class="form-select form-select-lg @error('issue_type') is-invalid @enderror"
                                            required onchange="onItemChange(this)">
                                        <option value="">— Pilih Item —</option>
                                    </select>
                                    @error('issue_type')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                {{-- Yes / No / N/A --}}
                                <div class="col-12" id="scoreWrapper" style="{{ old('score_5r') ? '' : 'display:none;' }}">
                                    <label class="form-label fw-semibold">
                                        <i class="bi bi-toggle-on text-success"></i> Hasil Penilaian <span class="text-danger">*</span>
                                    </label>
                                    <div class="d-flex gap-3 flex-wrap">
                                        @foreach(['Yes' => 'success', 'No' => 'danger', 'N/A' => 'secondary'] as $val => $color)
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="score_5r"
                                                   id="score_{{ $val }}" value="{{ $val }}"
                                                   {{ old('score_5r') === $val ? 'checked' : '' }} required>
                                            <label class="form-check-label" for="score_{{ $val }}">
                                                <span class="badge bg-{{ $color }} fs-6 px-3 py-2">{{ $val }}</span>
                                            </label>
                                        </div>
                                        @endforeach
                                    </div>
                                    @error('score_5r')
                                        <div class="text-danger small mt-1">{{ $message }}</div>
                                    @enderror
                                </div>

                                {{-- Banner info 5R --}}
                                <div class="col-12">
                                    <div class="alert alert-success border-success mb-0 py-2">
                                        <div class="d-flex align-items-center gap-2">
                                            <i class="bi bi-list-check fs-5"></i>
                                            <small>
                                                <strong>Laporan Audit 5R</strong> — Pilih kategori, item checklist, dan hasil penilaian (Yes/No/N/A).
                                            </small>
                                        </div>
                                    </div>
                                </div>

                                @elseif($isMachineAuditor)
                                {{-- ════ AUDIT MESIN (tidak berubah) ════ --}}
                                <div class="col-md-6">
                                    <label for="issue_type" class="form-label fw-semibold">
                                        <i class="bi bi-exclamation-triangle"></i> Jenis Masalah <span class="text-danger">*</span>
                                    </label>
                                    <input type="text" name="issue_type" id="issue_type"
                                           class="form-control form-control-lg @error('issue_type') is-invalid @enderror"
                                           value="{{ old('issue_type') }}" required>
                                    @error('issue_type')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-12">
                                    <label for="machine_name" class="form-label fw-semibold">
                                        <i class="bi bi-gear-fill text-warning"></i> Nama Mesin <span class="text-danger">*</span>
                                    </label>
                                    <div class="machine-select-wrapper">
                                        <div class="input-group mb-2">
                                            <span class="input-group-text bg-warning text-dark"><i class="bi bi-search"></i></span>
                                            <input type="text" id="machineSearch" class="form-control form-control-lg" autocomplete="off">
                                        </div>
                                        <select name="machine_name" id="machine_name"
                                                class="form-select form-select-lg @error('machine_name') is-invalid @enderror"
                                                size="6" onchange="onMachineSelected(this)">
                                            <option value="" disabled selected>-- Pilih salah satu mesin di bawah --</option>
                                            @foreach($machineList as $kategori => $mesinList)
                                                <optgroup label="── {{ strtoupper($kategori) }} ──">
                                                    @foreach($mesinList as $mesin)
                                                        <option value="{{ $mesin }}" {{ old('machine_name') === $mesin ? 'selected' : '' }}>{{ $mesin }}</option>
                                                    @endforeach
                                                </optgroup>
                                            @endforeach
                                            <optgroup label="── LAINNYA ──">
                                                <option value="__other__">✏️ Lainnya — ketik nama manual</option>
                                            </optgroup>
                                        </select>
                                        <div id="machineOtherWrapper" class="mt-2" style="display:none;">
                                            <input type="text" id="machine_name_other" class="form-control form-control-lg"
                                                   placeholder="Ketik nama mesin sesuai label fisik...">
                                        </div>
                                        <div id="machineSelectedBadge" class="mt-2" style="display:none;">
                                            <div class="alert alert-warning py-2 mb-0 d-flex align-items-center gap-2">
                                                <i class="bi bi-gear-fill fs-5"></i>
                                                <div>
                                                    <small class="text-muted d-block" style="font-size:0.7rem;">Mesin dipilih:</small>
                                                    <strong id="machineSelectedLabel" class="fs-6"></strong>
                                                </div>
                                                <button type="button" class="btn btn-sm btn-outline-warning ms-auto" onclick="resetMachineSelect()">
                                                    <i class="bi bi-x-lg"></i> Ganti
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    @error('machine_name')
                                        <div class="text-danger small mt-1"><i class="bi bi-exclamation-circle"></i> {{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-12">
                                    <div class="alert alert-warning border-warning mb-0 py-2">
                                        <div class="d-flex align-items-center gap-2">
                                            <i class="bi bi-gear-wide-connected fs-5"></i>
                                            <small><strong>Laporan Audit Mesin</strong> — Akan otomatis ditugaskan ke <strong>Maintenance</strong>.</small>
                                        </div>
                                    </div>
                                </div>

                                @else
                                {{-- ════ AUDIT BIASA ════ --}}
                                <div class="col-md-6">
                                    <label for="issue_type" class="form-label fw-semibold">
                                        <i class="bi bi-exclamation-triangle"></i> Jenis Masalah <span class="text-danger">*</span>
                                    </label>
                                    <input type="text" name="issue_type" id="issue_type"
                                           class="form-control form-control-lg @error('issue_type') is-invalid @enderror"
                                           value="{{ old('issue_type') }}" required>
                                    @error('issue_type')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="text-muted">Kategorikan masalah yang ditemukan</small>
                                </div>
                                @endif

                            </div>
                        </div>

                        <hr class="my-4">

                        <!-- ══ Section 3: Detail Laporan ══ -->
                        <div class="form-section mb-4">
                            <div class="section-header mb-3">
                                <h6 class="fw-bold text-primary mb-1">
                                    <i class="bi bi-file-text-fill"></i> 3. Detail Laporan
                                </h6>
                                <small class="text-muted">Berikan deskripsi lengkap dan tentukan departemen</small>
                            </div>

                            <div class="row g-3">
                                <div class="col-12">
                                    <label for="description" class="form-label fw-semibold">
                                        <i class="bi bi-file-text"></i> Deskripsi Masalah <span class="text-danger">*</span>
                                    </label>
                                    <textarea name="description" id="description" rows="5"
                                              class="form-control @error('description') is-invalid @enderror"
                                              required placeholder="Jelaskan detail masalah yang ditemukan...">{{ old('description') }}</textarea>
                                    @error('description')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="mb-3">
                                    <label for="department_id" class="form-label fw-semibold">
                                        Departemen Tujuan <span class="text-danger">*</span>
                                    </label>

                                    @php
                                        $maintenanceDept = null;
                                        if ($isMachineAuditor) {
                                            $maintenanceDept = \App\Models\Department::where('name', 'LIKE', '%maintenance%')
                                                                ->orWhere('name', 'LIKE', '%pemeliharaan%')
                                                                ->first();
                                        }
                                    @endphp

                                    @if($isMachineAuditor && $maintenanceDept)
                                        <div class="input-group">
                                            <span class="input-group-text bg-success text-white"><i class="bi bi-gear-fill"></i></span>
                                            <select name="department_id" id="department_id" class="form-select" required>
                                                <option value="{{ $maintenanceDept->id }}" selected>{{ $maintenanceDept->name }}</option>
                                            </select>
                                        </div>
                                        <small class="text-success">
                                            <i class="bi bi-check-circle-fill"></i> Laporan <strong>Audit Mesin</strong> ditugaskan ke <strong>{{ $maintenanceDept->name }}</strong>
                                        </small>
                                    @elseif($isMachineAuditor)
                                        <div class="alert alert-danger">
                                            <i class="bi bi-exclamation-triangle-fill"></i> Departemen Maintenance tidak ditemukan.
                                        </div>
                                    @else
                                        <select name="department_id" id="department_id" class="form-select" required>
                                            <option value="">-- Pilih Departemen Tujuan --</option>
                                            @foreach($departments as $dept)
                                                <option value="{{ $dept->id }}" {{ old('department_id') == $dept->id ? 'selected' : '' }}>
                                                    {{ $dept->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <!-- Action Buttons -->
                        <div class="d-grid gap-2 d-md-flex justify-content-md-end mt-4 pt-3 border-top">
                            <a href="{{ route('reports.index') }}" class="btn btn-lg btn-outline-secondary">
                                <i class="bi bi-x-circle"></i> Batal
                            </a>
                            <button type="submit" class="btn btn-lg btn-primary px-5" id="submitBtn">
                                <i class="bi bi-send-fill"></i> Kirim Laporan
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    .bg-gradient-primary { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
    .card { border: none; border-radius: 12px; }
    .step-item { display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; }
    .step-circle { width: 45px; height: 45px; border-radius: 50%; background: #e9ecef; display: flex; align-items: center; justify-content: center; color: #6c757d; font-size: 1.2rem; transition: all 0.3s; }
    .step-item.active .step-circle { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; box-shadow: 0 4px 12px rgba(102,126,234,0.3); }
    .step-line { flex: 1; height: 2px; background: #e9ecef; margin: 0 10px; margin-top: 22px; }
    .step-label { margin-top: 8px; font-size: 0.75rem; color: #6c757d; font-weight: 500; }
    .section-header { padding-bottom: 10px; border-bottom: 2px solid #e9ecef; }
    .btn-upload { padding: 1.5rem; border: 2px dashed #dee2e6; transition: all 0.3s; }
    .btn-upload:hover { border-color: #667eea; background: rgba(102,126,234,0.05); transform: translateY(-2px); }
    .form-control-lg, .form-select-lg { padding: 0.75rem 1rem; font-size: 1rem; border-radius: 8px; }
    .form-control:focus, .form-select:focus { border-color: #667eea; box-shadow: 0 0 0 0.2rem rgba(102,126,234,0.25); }
    .alert-sm { padding: 0.5rem 0.75rem; font-size: 0.875rem; }
    .photo-preview-item { position: relative; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: transform 0.2s; }
    .photo-preview-item:hover { transform: scale(1.05); }
    .photo-preview-item img { width: 100%; height: 200px; object-fit: cover; }
    .photo-delete-btn { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border-radius: 50%; background: rgba(220,53,69,0.9); border: none; color: white; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; }
    .photo-delete-btn:hover { background: rgb(220,53,69); transform: scale(1.1); }
    .machine-select-wrapper select[size] { height: auto; border: 2px solid #ffc107; border-radius: 8px; font-size: 0.95rem; }
    .machine-select-wrapper select[size]:focus { border-color: #e6a800; box-shadow: 0 0 0 0.2rem rgba(255,193,7,0.3); }
    .machine-select-wrapper optgroup { font-weight: 700; color: #495057; font-size: 0.8rem; background: #f8f9fa; }
    .machine-select-wrapper option { padding: 6px 12px; font-size: 0.9rem; }
    .machine-select-wrapper option:checked { background: #ffc107; color: #212529; }
    .machine-select-wrapper.has-selection select,
    .machine-select-wrapper.has-selection #machineSearch { display: none; }
    /* 5R item select styling */
    #item_5r { border: 2px solid #198754; }
    #item_5r:focus { border-color: #146c43; box-shadow: 0 0 0 0.2rem rgba(25,135,84,0.25); }
    @media (max-width: 767.98px) {
        .step-circle { width: 35px; height: 35px; font-size: 1rem; }
        .step-line { margin-top: 17px; }
        .btn-upload { padding: 1rem; }
        .photo-preview-item img { height: 150px; }
    }
</style>
@endpush

@push('scripts')
<script>
// ════════════════════════════════════════════════════════════
// DATA 5R (JS)
// ════════════════════════════════════════════════════════════
const data5R = {
    'R1 - RINGKAS': {
        1:  'Peralatan Kerja terletak sesuai dengan peruntukannya',
        2:  'Peralatan Kerja tidak terletak di akses jalan / lorong / gang',
        3:  'Material (FG/RM/PM) yang terletak sesuai dengan kebutuhannya',
        4:  'Material (FG/RM/PM) tidak terletak di akses jalan / lorong / gang',
        5:  'Material OK, Pending & Karantina dipisahkan secara jelas',
        6:  'Ada lokasi Tempat Penyimpanan Sementara (TPS) dan PIC',
    },
    'R2 - RAPI': {
        7:  'Peralatan Kerja, mempunyai label yang jelas',
        8:  'Peralatan kerja, tersusun rapi pada tempatnya',
        9:  'Tempat Sampah mempunyai label didalam garis batas',
        10: 'Material (FG/RM/PM) mempunyai label didalam garis batas',
        11: 'Material (FG/RM/PM), tersusun rapi pada tempatnya',
        12: 'Peralatan Handling diletakkan di area yang sudah di tentukan',
        13: 'Kabel tertata rapi dan tidak menyentuh lantai',
        14: 'Tempat penyimpanan yang terbuka ditata rapi',
        15: 'Tempat penyimpanan yang terbuka terdapat label (terbuka)',
        16: 'Tempat penyimpanan yang tertutup ditata rapi',
        17: 'Tempat penyimpanan yang tertutup terdapat label beserta rincian isinya',
        18: 'Lintasan jalan diberi pembatas dengan jelas',
        19: 'Area kerja diberi pembatas dengan jelas',
    },
    'R3 - RESIK': {
        20: 'Peralatan Kerja dalam keadaan bersih',
        21: 'Peralatan Kerja dalam kondisi tanpa korosif',
        22: 'Peralatan Handling dalam keadaan bersih',
        23: 'Peralatan Handling dalam kondisi tanpa korosif',
        24: 'Tempat penyimpanan tertutup dalam keadaan bersih',
        25: 'Tempat penyimpanan terbuka dalam keadaan bersih',
        26: 'Lantai dalam keadaan bersih',
        27: 'Lantai tidak rusak',
        28: 'Dinding dalam keadaan bersih',
        29: 'Dinding tidak rusak',
        30: 'Atap (plafon/langit-langit) dalam keadaan bersih',
        31: 'Atap (plafon/langit-langit) tidak rusak',
        32: 'Tangga dalam keadaan bersih',
        33: 'Tangga dalam kondisi tanpa korosif',
        34: 'Tidak ada kebocoran dan genangan air',
        35: 'Rak penyimpanan dalam kondisi tanpa korosif',
        36: 'Alat kebersihan (sapu, pel, dll) tersedia',
        37: 'Alat kebersihan (sapu, pel, dll) tertata rapi',
    },
    'R4 - RAWAT': {
        38: 'Peta Area Kerja 5R dan PIC Area digambarkan dengan visualisasi warna',
        39: 'Peta Area Kerja 5R dan PIC Area terpasang dengan jelas',
        40: 'Peta Area Kerja 5R sesuai dengan aktual dilapangan',
        41: 'Standar R1 tersedia dan diterapkan secara konsisten',
        42: 'Standar R2 tersedia dan diterapkan secara konsisten',
        43: 'Standar R3 tersedia dan diterapkan secara konsisten',
        44: 'Garis batas memiliki ukuran & warna standar',
        45: 'Seluruh karyawan diarea tersebut menerapkan personel hygiene atau menggunakan APD',
        46: 'Jadwal kebersihan tersedia dan terpasang dengan jelas',
        47: 'Checklist kebersihan dilakukan sesuai kondisi area kerja (oleh supervisor)',
    },
    'R5 - RAJIN': {
        48: 'Temuan audit 5R ditindaklanjuti tepat waktu dan tidak berulang',
        49: 'Temuan audit 5R dan closing terpasang dan ditampilkan dipapan 5R',
        50: 'Rencana kerja dari temuan 5R dibuat di papan 5R dan dilaksanakan oleh seluruh PIC area',
        51: 'Karyawan disiplin dalam penggunaan dan pengembalian peralatan kerja',
        52: 'Visual management yang ada diarea kerja dipatuhi oleh karyawan',
        53: 'Papan Infrormasi 5R Lengkap sesuai format dan di perbarui secara berkala',
    },
};

function onKategoriChange(sel) {
    const kat        = sel.value;
    const itemSelect = document.getElementById('item_5r');
    const itemWrap   = document.getElementById('itemWrapper');
    const scoreWrap  = document.getElementById('scoreWrapper');

    // Reset item & score
    itemSelect.innerHTML = '<option value="">— Pilih Item —</option>';
    scoreWrap.style.display = 'none';
    document.querySelectorAll('input[name="score_5r"]').forEach(r => r.checked = false);

    if (!kat) { itemWrap.style.display = 'none'; return; }

    const items = data5R[kat] || {};
    Object.entries(items).forEach(([no, label]) => {
        const opt = document.createElement('option');
        opt.value = `[${no}] ${label}`;
        opt.textContent = `${no}. ${label}`;
        itemSelect.appendChild(opt);
    });

    itemWrap.style.display = '';
}

function onItemChange(sel) {
    const scoreWrap = document.getElementById('scoreWrapper');
    scoreWrap.style.display = sel.value ? '' : 'none';
    document.querySelectorAll('input[name="score_5r"]').forEach(r => r.checked = false);
}

// ════ MACHINE SELECT ════
const machineSelect       = document.getElementById('machine_name');
const machineSearch       = document.getElementById('machineSearch');
const machineOtherWrapper = document.getElementById('machineOtherWrapper');
const machineOtherInput   = document.getElementById('machine_name_other');
const machineBadge        = document.getElementById('machineSelectedBadge');
const machineBadgeLabel   = document.getElementById('machineSelectedLabel');
const machineWrapper      = machineSelect ? machineSelect.closest('.machine-select-wrapper') : null;

if (machineSearch) {
    machineSearch.addEventListener('input', function () {
        const keyword = this.value.toLowerCase().trim();
        Array.from(machineSelect.querySelectorAll('optgroup')).forEach(group => {
            let vis = 0;
            Array.from(group.querySelectorAll('option')).forEach(opt => {
                const match = !keyword || opt.value.toLowerCase().includes(keyword) || (group.label||'').toLowerCase().includes(keyword);
                opt.style.display = match ? '' : 'none';
                if (match) vis++;
            });
            group.style.display = vis > 0 ? '' : 'none';
        });
    });
}

function onMachineSelected(sel) {
    if (!sel || !sel.value) return;
    if (sel.value === '__other__') {
        machineOtherWrapper.style.display = '';
        machineOtherInput.required = true;
        machineBadge.style.display = 'none';
        machineOtherInput.focus();
    } else {
        machineOtherWrapper.style.display = 'none';
        if (machineOtherInput) machineOtherInput.required = false;
        machineBadge.style.display = '';
        machineBadgeLabel.textContent = sel.value;
        if (machineWrapper) machineWrapper.classList.add('has-selection');
    }
}

function resetMachineSelect() {
    if (machineSelect) machineSelect.value = '';
    if (machineSearch) machineSearch.value = '';
    machineBadge.style.display = 'none';
    machineOtherWrapper.style.display = 'none';
    if (machineWrapper) machineWrapper.classList.remove('has-selection');
    if (machineSelect) Array.from(machineSelect.querySelectorAll('option, optgroup')).forEach(el => el.style.display = '');
}

if (machineSelect && machineSelect.value && machineSelect.value !== '__other__') onMachineSelected(machineSelect);

// ════ KAMERA & FOTO ════
function openCamera() {
    const input = document.getElementById('photos');
    const cam = document.createElement('input');
    cam.type = 'file'; cam.accept = 'image/*'; cam.capture = 'environment'; cam.multiple = true;
    cam.onchange = function (e) {
        const dt = new DataTransfer();
        [...Array.from(input.files), ...Array.from(e.target.files)].forEach(f => dt.items.add(f));
        input.files = dt.files;
        input.dispatchEvent(new Event('change', { bubbles: true }));
    };
    cam.click();
}

document.getElementById('photos').addEventListener('change', function (e) {
    const preview = document.getElementById('photoPreview');
    preview.innerHTML = '';
    Array.from(e.target.files).forEach((file, index) => {
        if (!file.type.startsWith('image/')) return;
        const reader = new FileReader();
        reader.onload = function (ev) {
            const col = document.createElement('div'); col.className = 'col-6 col-md-4';
            const item = document.createElement('div'); item.className = 'photo-preview-item';
            const img = document.createElement('img'); img.src = ev.target.result; img.alt = 'Preview ' + (index + 1);
            const btn = document.createElement('button'); btn.type = 'button'; btn.className = 'photo-delete-btn';
            btn.innerHTML = '<i class="bi bi-x-lg"></i>'; btn.onclick = () => removePhoto(index);
            item.appendChild(img); item.appendChild(btn); col.appendChild(item); preview.appendChild(col);
        };
        reader.readAsDataURL(file);
    });
});

function removePhoto(index) {
    const input = document.getElementById('photos');
    const dt = new DataTransfer();
    Array.from(input.files).forEach((f, i) => { if (i !== index) dt.items.add(f); });
    input.files = dt.files;
    input.dispatchEvent(new Event('change', { bubbles: true }));
}

// ════ VALIDASI FORM ════
document.getElementById('reportForm').addEventListener('submit', function (e) {
    const photos    = document.getElementById('photos').files;
    const submitBtn = document.getElementById('submitBtn');
    const is5R      = document.getElementById('kategori_5r') !== null;

    if (photos.length === 0) { e.preventDefault(); alert('Silakan unggah minimal satu foto.'); return false; }
    for (let i = 0; i < photos.length; i++) {
        if (photos[i].size > 5242880) { e.preventDefault(); alert('File ' + photos[i].name + ' melebihi batas 5MB.'); return false; }
    }

    // Validasi 5R
    if (is5R) {
        const kat   = document.getElementById('kategori_5r').value;
        const item  = document.getElementById('item_5r').value;
        const score = document.querySelector('input[name="score_5r"]:checked');

        if (!kat)   { e.preventDefault(); alert('Silakan pilih kategori 5R.'); return false; }
        if (!item)  { e.preventDefault(); alert('Silakan pilih item checklist.'); return false; }
        if (!score) { e.preventDefault(); alert('Silakan pilih hasil penilaian (Yes/No/N/A).'); return false; }

        // Inject score ke description jika belum ada
        const desc = document.getElementById('description');
        if (desc && !desc.value.includes('[Score:')) {
            if (desc.value.trim() === '') desc.value = `[Score: ${score.value}]`;
        }
    }

    // Validasi mesin
    if (machineSelect) {
        const val = machineSelect.value;
        if (!val) { e.preventDefault(); machineSelect.classList.add('is-invalid'); alert('Silakan pilih nama mesin.'); return false; }
        if (val === '__other__') {
            const otherVal = machineOtherInput ? machineOtherInput.value.trim() : '';
            if (!otherVal) { e.preventDefault(); machineOtherInput.classList.add('is-invalid'); alert('Silakan ketik nama mesin.'); return false; }
            const hidden = document.createElement('input');
            hidden.type = 'hidden'; hidden.name = 'machine_name'; hidden.value = otherVal;
            machineSelect.removeAttribute('name'); this.appendChild(hidden);
        }
    }

    submitBtn.disabled = true;
    submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Mengirim...';
});

document.getElementById('description').addEventListener('input', function () {
    this.classList.toggle('is-invalid', this.value.length < 20);
});
</script>
@endpush