@extends('layouts.montir')

@section('content')
<div class="min-h-screen bg-white flex flex-col">
    <div class="px-6 pt-6">
        <div class="text-orange-500 text-4xl font-semibold">19/20</div>
        <h1 class="text-3xl font-bold mt-2">Penilaian (7)</h1>
        <h2 class="text-2xl font-semibold mt-4">Tools Test</h2>
    </div>

    <form id="penilaianToolsTestForm" action="{{ route('montir.inspection.store-penilaian-tools-test', $inspeksi->id) }}" method="POST">
        @csrf

        @php
            $toolsTestItems = [
                'tebal_cat_body_depan' => 'Tebal Cat Body Depan',
                'tebal_cat_body_kiri' => 'Tebal cat Body Kiri',
                'temperature_ac_mobil' => 'Temperature AC Mobil',
                'tebal_cat_body_kanan' => 'Tebal Cat Body Kanan',
                'tebal_cat_body_belakang' => 'Tebal Cat Body Belakang',
                'obd_scanner' => 'OBD Scanner',
                'tebal_cat_body_atap' => 'Tebal Cat Body Atap',
                'test_accu' => 'Test ACCU ( ON & OFF )',
            ];
        @endphp

        @foreach($toolsTestItems as $key => $label)
            <div class="space-y-3 px-6 py-2">
                <label class="flex items-center text-lg">
                    <input type="checkbox" class="w-6 h-6 mr-3 accent-sky-400 feature-checkbox" name="features[]" value="{{ $key }}" checked data-feature="{{ $key }}">
                    {{ $label }}
                </label>
                <div class="flex gap-2 flex-wrap rating-buttons" data-feature="{{ $key }}">
                    @for($i=1;$i<=10;$i++)
                        <button type="button" class="rating-btn w-12 h-12 flex items-center justify-center rounded-full border-2 border-sky-400 font-semibold hover:bg-sky-50 transition" data-feature="{{ $key }}" data-value="{{ $i }}">{{ $i }}</button>
                    @endfor
                </div>
                <input type="hidden" name="rating[{{ $key }}]" id="rating_{{ $key }}">
            </div>
        @endforeach

        <!-- Catatan -->
        <div class="space-y-3 pb-24 px-6">
            <div class="text-xl font-semibold">Catatan</div>
            <textarea class="w-full border-2 border-sky-400 rounded-2xl p-4 focus:outline-none min-h-[150px]" name="catatan" placeholder="• Masukkan catatan di sini">{{ old('catatan') }}</textarea>
        </div>
    </form>

    <!-- Footer -->
    <div class="fixed bottom-0 left-0 right-0 bg-white px-6 py-4 flex gap-4 shadow-[0_-2px_10px_rgba(0,0,0,0.1)]">
        <a href="{{ route('montir.inspection.penilaian-test-drive', $inspeksi->id) }}" class="flex-1 text-center bg-gray-200 py-3 rounded-xl font-semibold">Back</a>
        <button type="button" onclick="submitToolsTest()" class="flex-1 bg-orange-500 text-white py-3 rounded-xl font-semibold">Next</button>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function(){

    // Rating buttons
    document.querySelectorAll('.rating-btn').forEach(btn => {
        btn.addEventListener('click', function(){
            const feature = this.dataset.feature;
            const value = this.dataset.value;
            document.querySelectorAll(`.rating-btn[data-feature="${feature}"]`).forEach(b=>b.classList.remove('bg-sky-400','text-white'));
            this.classList.add('bg-sky-400','text-white');
            document.getElementById(`rating_${feature}`).value = value;
        });
    });

    // Checkbox toggle
    document.querySelectorAll('.feature-checkbox').forEach(cb => {
        cb.addEventListener('change', function(){
            const feature = this.dataset.feature;
            const buttons = document.querySelector(`.rating-buttons[data-feature="${feature}"]`);
            const hidden = document.getElementById(`rating_${feature}`);
            if(!this.checked){
                buttons.style.opacity='0.5';
                buttons.style.pointerEvents='none';
                hidden.value='';
                buttons.querySelectorAll('.rating-btn').forEach(b=>b.classList.remove('bg-sky-400','text-white'));
            } else {
                buttons.style.opacity='1';
                buttons.style.pointerEvents='auto';
            }
        });
    });

});

function submitToolsTest(){
    const checkedFeatures = document.querySelectorAll('.feature-checkbox:checked');
    let missing=[];
    checkedFeatures.forEach(cb=>{
        if(!document.getElementById(`rating_${cb.value}`).value) missing.push(cb.parentElement.textContent.trim());
    });
    if(missing.length){
        alert('Mohon berikan rating untuk semua item yang dipilih:\n'+missing.join('\n'));
        return;
    }
    document.getElementById('penilaianToolsTestForm').submit();
}
</script>
@endsection