@extends('layouts.montir')

@section('content')
<div class="min-h-screen bg-white flex flex-col">

    <!-- Header -->
    <div class="px-6 pt-6">
        <div class="text-orange-500 text-4xl font-semibold">15/20</div>
        <h1 class="text-3xl font-bold mt-2">Penilaian ({{ $inspeksi->id }})</h1>
        <h2 class="text-2xl font-semibold mt-4">Hasil Inspeksi Interior</h2>
    </div>

    <!-- Form -->
    <form id="penilaianInteriorForm" method="POST" 
          action="{{ route('montir.inspection.store-penilaian-interior', ['id' => $inspeksi->id]) }}">
        @csrf

        @php
            $interiorItems = [
                'stir' => 'Stir',
                'rem_tangan' => 'Rem Tangan',
                'pedal' => 'Pedal',
                'switch_wiper' => 'Switch Wiper',
                'lampu_hazard' => 'Lampu Hazard',
                'panel_dashboard' => 'Panel Dashboard',
                'pembuka_kap_mesin' => 'Pembuka Kap Mesin',
                'pembuka_bagasi' => 'Pembuka Bagasi',
                'jok_depan' => 'Jok Depan',
                'aroma_interior' => 'Aroma Interior',
                'handle_pintu' => 'Handle Pintu',
                'console_box' => 'Console Box',
                'spion_tengah' => 'Spion Tengah',
                'tuas_persneling' => 'Tuas Persneling',
                'jok_belakang' => 'Jok Belakang',
                'panel_indikator' => 'Panel Indikator',
                'switch_lampu' => 'Switch Lampu',
                'karpet_dasar' => 'Karpet Dasar',
                'klakson' => 'Klakson',
                'sun_visor' => 'Sun Visor',
                'tuas_tangki_bensin' => 'Tuas Tangki Bensin',
                'sabuk_pengaman' => 'Sabuk Pengaman',
                'trim_interior' => 'Trim Interior',
                'plafon' => 'Plafon',
            ];
        @endphp

        @foreach($interiorItems as $key => $label)
            <div class="space-y-3">
                <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">
            <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">
            </textarea>
        </div>

        <div class="text-center text-gray-400 text-sm pb-4">
            copyright by MerapiSpector
        </div>

    </form>

    <!-- Footer Buttons -->
    <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-mesin', ['id' => $inspeksi->id]) }}" 
           class="text-orange-500 font-semibold">
            Back
        </a>
        <button type="button" onclick="submitForm()" 
                class="flex-1 bg-orange-500 text-white py-3 rounded-xl font-semibold">
            Next
        </button>
    </div>

</div>

<script>
    // Handle rating button clicks
    document.querySelectorAll('.rating-btn').forEach(button => {
        button.addEventListener('click', function(e) {
            e.preventDefault();
            const feature = this.dataset.feature;
            const value = this.dataset.value;

            // Remove active class from all buttons in this feature group
            document.querySelectorAll(`[data-feature="${feature}"].rating-btn`).forEach(btn => {
                btn.classList.remove('bg-sky-400', 'text-white');
                btn.classList.add('border-sky-400');
            });

            // Add active class to clicked button
            this.classList.add('bg-sky-400', 'text-white');

            // Update hidden input value
            document.getElementById(`rating_${feature}`).value = value;
        });
    });

    // Handle checkbox changes
    document.querySelectorAll('.feature-checkbox').forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            const feature = this.dataset.feature;
            const ratingButtons = document.querySelector(`.rating-buttons[data-feature="${feature}"]`);
            const hiddenInput = document.getElementById(`rating_${feature}`);

            if (!this.checked) {
                ratingButtons.style.opacity = '0.5';
                ratingButtons.style.pointerEvents = 'none';
                hiddenInput.value = '';
                ratingButtons.querySelectorAll('.rating-btn').forEach(btn => {
                    btn.classList.remove('bg-sky-400', 'text-white');
                });
            } else {
                ratingButtons.style.opacity = '1';
                ratingButtons.style.pointerEvents = 'auto';
            }
        });
    });

    function submitForm() {
        const checkedFeatures = document.querySelectorAll('.feature-checkbox:checked');
        let isValid = true;
        let missingFeatures = [];

        checkedFeatures.forEach(checkbox => {
            const featureValue = checkbox.value;
            const ratingInput = document.getElementById(`rating_${featureValue}`);

            if (!ratingInput.value) {
                isValid = false;
                const label = checkbox.parentElement.textContent.trim();
                missingFeatures.push(label);
            }
        });

        if (!isValid) {
            alert('Mohon berikan rating untuk semua item yang dipilih:\n' + missingFeatures.join('\n'));
            return;
        }

        document.getElementById('penilaianInteriorForm').submit();
    }
</script>
@endsection