@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">17/20</div>
        <h1 class="text-3xl font-bold mt-2">Penilaian (5)</h1>
        <h2 class="text-2xl font-semibold mt-4">Ban dan Kaki-kaki</h2>
    </div>

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

        @php
            $banKakiItems = [
                'ban_depan' => 'Ban Depan',
                'velg_depan' => 'Velg Depan',
                'disc_brake' => 'Disc Brake',
                'master_rem' => 'Master Rem',
                'tie_rod' => 'Tie Rod',
                'gardan' => 'Gardan',
                'ban_belakang' => 'Ban Belakang',
                'velg_belakang' => 'Velg Belakang',
                'brake_pad' => 'Brake Pad',
                'crossmember' => 'Crossmember',
                'knalpot' => 'Knalpot',
                'balljoint' => 'Balljoint',
                'racksteer' => 'Racksteer',
                'karet_boot' => 'Karet Boot',
                'upper_lower_arm' => 'Upper-Lower Arm',
                'shock_breaker' => 'Shock Breaker',
                'link_stabilizer' => 'Link Stabilizer',
            ];
        @endphp

        @foreach($banKakiItems as $key => $label)
            <div class="space-y-3 px-6 py-2 border-b">
                <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 px-6 py-4">
            <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-24 px-6">
            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 bg-gray-200 text-gray-700 py-3 rounded-xl font-semibold text-center">
            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(`.rating-btn[data-feature="${feature}"]`).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('penilaianBanKakiForm').submit();
    }
</script>
@endsection