@extends('layouts.user')

@section('content')
    <a href="{{ route('home') }}"
        class="btn btn-light rounded-circle shadow-sm d-inline-flex align-items-center justify-content-center"
        style="width: 36px; height: 36px; position: absolute; top: 20px; left: 20px;">
        &#8592;
    </a>

    <div class="content">
        <h2>Form Diagnosa Penyakit Tanaman Jagung</h2>
        <p>Pilih minimal <strong>3 gejala</strong> yang Anda alami beserta tingkat keyakinan Anda:</p>

        @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        @if (session('error'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                {{ session('error') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        <form action="{{ route('diagnosa.store') }}" method="POST" id="diagnosaForm">
            @csrf
            <div class="table-responsive">
                <table class="table table-bordered align-middle">
                    <thead class="table-success text-center">
                        <tr>
                            <th style="width: 10%">Kode</th>
                            <th style="width: 50%">Nama Gejala</th>
                            <th style="width: 40%">Tingkat Keyakinan</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($gejala as $item)
                            <tr>
                                <td class="text-center"><strong>{{ $item->kode }}</strong></td>
                                <td>{{ $item->nama_gejala }}</td>
                                <td>
                                    <select name="gejala[{{ $item->id }}]" class="form-select gejala-select">
                                        <option value="">-- Pilih tingkat keyakinan --</option>
                                        <option value="1" {{ old("gejala.{$item->id}") == 1 ? 'selected' : '' }}>
                                            1 - Tidak Yakin (25%)
                                        </option>
                                        <option value="2" {{ old("gejala.{$item->id}") == 2 ? 'selected' : '' }}>
                                            2 - Kurang Yakin (50%)
                                        </option>
                                        <option value="3" {{ old("gejala.{$item->id}") == 3 ? 'selected' : '' }}>
                                            3 - Yakin (75%)
                                        </option>
                                        <option value="4" {{ old("gejala.{$item->id}") == 4 ? 'selected' : '' }}>
                                            4 - Sangat Yakin (100%)
                                        </option>
                                    </select>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>

                <div class="alert alert-info" id="gejalaCounter">
                    <strong>Gejala terpilih:</strong> <span id="countSelected">0</span>
                    <small class="text-muted">(minimal 3 gejala untuk diagnosa)</small>
                </div>

                <div class="d-flex justify-content-between align-items-center mt-3">
                    <div>
                        <small class="text-muted">
                            <strong>Keterangan Skala:</strong><br>
                            1 = Tidak Yakin (25%) |
                            2 = Kurang Yakin (50%) |
                            3 = Yakin (75%) |
                            4 = Sangat Yakin (100%)
                        </small>
                    </div>
                    <button type="submit" class="btn btn-success btn-lg" id="submitBtn" disabled>
                        <i class="fas fa-stethoscope me-2"></i>Mulai Diagnosa
                    </button>
                </div>
            </div>
        </form>
    </div>

    {{-- Script --}}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const selects = document.querySelectorAll('.gejala-select');
            const countDisplay = document.getElementById('countSelected');
            const submitBtn = document.getElementById('submitBtn');
            const counterBox = document.getElementById('gejalaCounter');

            function updateCounter() {
                const selected = [...selects].filter(sel => sel.value !== '').length;
                countDisplay.textContent = selected;

                if (selected >= 3) {
                    submitBtn.disabled = false;
                    counterBox.className = 'alert alert-success';
                } else {
                    submitBtn.disabled = true;
                    counterBox.className = 'alert alert-warning';
                }
            }

            selects.forEach(sel => sel.addEventListener('change', updateCounter));
            updateCounter(); // initial count

            document.getElementById('diagnosaForm').addEventListener('submit', function(e) {
                const selected = [...selects].filter(sel => sel.value !== '').length;
                if (selected < 3) {
                    e.preventDefault();
                    alert('Pilih minimal 3 gejala untuk melanjutkan diagnosa.');
                } else {
                    submitBtn.innerHTML =
                        '<span class="spinner-border spinner-border-sm me-2"></span>Memproses...';
                    submitBtn.disabled = true;
                }
            });
        });
    </script>

    {{-- Style --}}
    <style>
        .table th {
            background-color: #198754 !important;
            color: white !important;
            font-weight: 600;
        }

        .gejala-select:focus {
            border-color: #198754;
            box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25);
        }

        .btn-success {
            background-color: #198754;
            border-color: #198754;
            transition: all 0.3s ease;
        }

        .btn-success:hover:not(:disabled) {
            background-color: #157347;
            border-color: #146c43;
            transform: translateY(-1px);
        }

        .btn-success:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }

        .content {
            padding: 20px;
            max-width: 1200px;
            margin: 0 auto;
        }

        @media (max-width: 768px) {
            .content {
                padding: 10px;
            }

            .table-responsive {
                font-size: 0.9rem;
            }

            .d-flex.justify-content-between {
                flex-direction: column;
                gap: 15px;
            }

            .d-flex.justify-content-between>div:first-child {
                order: 2;
            }

            .d-flex.justify-content-between>button {
                order: 1;
            }
        }
    </style>
@endsection