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

    <!-- Form Penilaian Fitur -->
    <form id="penilaianForm" action="{{ route('montir.inspection.store-penilaian-fitur', $inspeksi->id) }}" method="POST" class="px-6 mt-4">
        @csrf

        <!-- Fitur -->
        @php
            $features = [
                'airbag' => 'Airbag',
                'sistem_audio' => 'Sistem Audio',
                'power_window' => 'Power Window',
                'sistem_ac' => 'Sistem AC',
                'central_lock' => 'Central Lock',
                'electric_mirror' => 'Electric Mirror',
                'rem_abs' => 'Rem ABS'
            ];
        @endphp

        @foreach ($features as $key => $label)
            <div class="space-y-3 mb-4">
                <!-- Checkbox Fitur -->
                <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>

                <!-- Rating Buttons -->
                <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>

                <!-- Hidden Input Rating -->
                <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>

        <!-- Footer Copyright -->
        <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.hasil_inspeksi', $inspeksi->id) }}" 
           class="flex-1 text-center py-3 rounded-xl border border-gray-300 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>

<!-- Toast Notification -->
<div id="toast" class="fixed bottom-20 left-1/2 transform -translate-x-1/2 bg-red-500 text-white px-6 py-3 rounded-xl shadow-lg opacity-0 pointer-events-none transition-opacity duration-300 z-50">
    <!-- Isi toast akan diupdate JS -->
</div>

<!-- Script -->
<script>
    const toast = document.getElementById('toast');

    // Fungsi menampilkan toast
    function showToast(message, type = 'error') {
        toast.textContent = message;
        toast.classList.remove('bg-red-500','bg-green-500');
        toast.classList.add(type === 'success' ? 'bg-green-500' : 'bg-red-500');

        toast.classList.add('opacity-100');
        toast.classList.remove('pointer-events-none');

        setTimeout(() => {
            toast.classList.remove('opacity-100');
            toast.classList.add('pointer-events-none');
        }, 3000);
    }

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

            document.querySelectorAll(`[data-feature="${feature}"].rating-btn`).forEach(btn => {
                btn.classList.remove('bg-sky-400', 'text-white');
                btn.classList.add('border-sky-400');
            });

            this.classList.add('bg-sky-400', 'text-white');
            document.getElementById(`rating_${feature}`).value = value;
        });
    });

    // Checkbox handling
    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';
            }
        });
    });

    // Submit form dengan validasi
    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) {
            showToast('Mohon berikan rating untuk semua fitur:\n' + missingFeatures.join(', '));
            return;
        }

        showToast('Data berhasil disimpan!', 'success');

        setTimeout(() => {
            document.getElementById('penilaianForm').submit();
        }, 1000);
    }
</script>
@endsection