@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">16/20</div>
        <h1 class="text-3xl font-bold mt-2">Penilaian (4)</h1>
        <h2 class="text-2xl font-semibold mt-4">Hasil Inspeksi Eksterior</h2>
    </div>

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

        @php
            $eksteriorItems = [
                'bumper_depan' => 'Bumper Depan',
                'kap_mesin' => 'Kap Mesin',
                'lampu_utama' => 'Lampu Utama',
                'panel_atap' => 'Panel Atap',
                'grill' => 'Grill',
                'lampu_foglamp' => 'Lampu Foglamp',
                'kaca_bening' => 'Kaca Bening',
                'wiper_belakang' => 'Wiper Belakang',
                'bumper_belakang' => 'Bumper Belakang',
                'lampu_belakang' => 'Lampu Belakang',
                'trunklid' => 'Trunklid',
                'kaca_depan' => 'Kaca Depan',
                'fender_kanan' => 'Fender Kanan',
                'quarter_panel_kanan' => 'Quarter Panel Kanan',
                'pintu_belakang_kanan' => 'Pintu Belakang Kanan',
                'spion_kanan' => 'Spion Kanan',
                'lisplang_kanan' => 'Lisplang Kanan',
                'side_skirt_kanan' => 'Side Skirt Kanan',
                'daun_wiper' => 'Daun Wiper',
                'pintu_belakang' => 'Pintu Belakang',
                'fender_kiri' => 'Fender Kiri',
                'quarter_panel_kiri' => 'Quarter Panel Kiri',
                'pintu_depan_kanan' => 'Pintu Depan Kanan',
                'kaca_jendela_kanan' => 'Kaca Jendela Kanan',
                'pintu_belakang_kiri' => 'Pintu Belakang Kiri',
                'spion_kiri' => 'Spion Kiri',
                'pintu_depan_kiri' => 'Pintu Depan Kiri',
                'kaca_jendela_kiri' => 'Kaca Jendela Kiri',
                'lisplang_kiri' => 'Lisplang Kiri',
                'side_skirt_kiri' => 'Side Skirt Kiri',
            ];
        @endphp

        @foreach($eksteriorItems 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-eksterior', ['id' => $inspeksi->id]) }}" class="flex-1 text-center py-3 border border-gray-300 rounded-xl 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() {
        // Validate that all checked features have ratings
        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('penilaianEksteriorForm').submit();
    }
</script>
@endsection