@extends('layout.app')
@section('content')
    <div class="container">
        <div class="page-inner">
            <div class="page-header">
                <h3 class="fw-bold mb-3">Diagnosa Penyakit</h3>
            </div>
            <div class="col-xl-12 col-md-12 mt-4">
                <div class="card">
                    <div class="card-body">
                        <h5>Formulir Diagnosa</h5>
                        <div class='alert alert-danger alert-dismissible mt-3' id="diagnosisAlert">
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                            <h4><i class='icon fa fa-exclamation-triangle'></i> Perhatian!</h4>
                            Silakan pilih gejala yang paling sesuai dengan kondisi tanaman Anda dari daftar yang tersedia.
                            Setelah selesai memilih gejala, tekan tombol <strong>Diagnosa</strong> yang terletak di
                            bawah ini untuk melihat hasil analisis dan rekomendasi penanganan bagi tanaman Anda.
                        </div>
                        <p id="message" style="display: none;">Silahkan memilih gejala sesuai dengan kondisi tanaman Anda
                            !!</p>
                        <form method="POST" action="{{ route('diagnosa.proses') }}" id="diagnosaForm">
                            @csrf
                            <div class="table-responsive mt-3">
                                <table id='diagnosisTable' class="table table-bordered" width="100%" cellspacing="0"
                                    style="border-width: 2px;">
                                    <thead>
                                        <tr>
                                            <th class="col-no" style="border-width: 2px;">No</th>
                                            <th class="col-gejala" style="border-width: 2px;">Gejala</th>
                                            <th class="col-kondisi" style="border-width: 2px;">Pilih Kondisi</th>
                                        </tr>
                                    </thead>
                                    <tbody class="pilihkondisi">
                                        @foreach ($gejala as $index => $item)
                                            <tr>
                                                <td class="col-no" style="border-width: 2px;">{{ $loop->iteration }}</td>
                                                <td class="col-gejala" style="border-width: 2px;">{{ $item->gejala }}</td>
                                                <td class="col-kondisi" style="border-width: 2px;">
                                                    <select class="form-select form-control"
                                                        name="gejala[{{ $item->kode_gejala }}]">
                                                        <option value="" disabled selected>Pilih Kondisi</option>
                                                        @foreach ($kondisi as $kond)
                                                            <option value="{{ $kond->nilai }}">{{ $kond->name }}</option>
                                                        @endforeach
                                                    </select>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                            <button type="submit" class="btn btn-primary mt-3 float-end" name="submit">Diagnosa</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <style>
        .float {
            background: #1A2030;
            /* Warna disesuaikan dengan gambar */
            color: white;
            border-top: 0;
            border-left: 0;
            border-right: 0;
            text-decoration: none;
            font-family: sans-serif;
            font-size: 14pt;
            position: fixed;
            width: 60px;
            height: 60px;
            bottom: 40px;
            right: 40px;
            background-color: #1A2030;
            /* Warna utama */
            color: #FFF;
            border-radius: 50px;
            text-align: center;
            box-shadow: 2px 2px 3px #999;
            z-index: 1000;
            transition: bottom 0.3s ease-in-out;

        }

        .scroll-to-top {
            display: none !important;
        }

        .col-no {
            width: 5% !important;
        }

        .col-gejala {
            width: 45% !important;
        }

        .col-kondisi {
            width: 50% !important;
        }

        select.form-select {
            white-space: normal;
            word-wrap: break-word;
            max-width: 100%;
            font-size: 14px !important;
        }

        table thead th {
            background-color: #87CEEB !important;
            color: rgb(12, 12, 12) !important;
            border-color: #eaeaea !important;
        }

        table tbody tr:nth-child(odd) {
            background-color: #f2f2f2 !important;
        }

        table tbody tr:nth-child(even) {
            background-color: #ffffff !important;
        }

        table tbody tr:hover {
            background-color: #d1ecf1 !important;
        }

        table,
        th,
        td {
            border: 2px solid #eaeaea !important;
        }

        @media (max-width: 576px) {
            table {
                table-layout: fixed;
            }

            .table thead th {
                padding: 11px 9px !important;
                font-size: 11px !important;

            }

            .table thead th.col-no {
                white-space: nowrap !important;
                padding-right: 20px !important;

            }

            .table tbody tr td.col-no,
            .table tbody tr td.col-gejala,
            .table tbody tr td.col-kondisi {
                padding: 10px 8px !important;
                font-size: 10px !important;

            }

            select.form-select {
                font-size: 10px !important;
                width: 100% !important;
                min-width: 100% !important;
                height: auto !important;
                min-height: 40px !important;
            }

            .col-no {
                width: 5% !important;
            }

            .col-gejala {
                width: 40% !important;
            }

            .col-kondisi {
                width: 50% !important;
            }
        }
    </style>


@section('script')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            // Validasi form saat submit
            document.getElementById("diagnosaForm").addEventListener("submit", function(event) {
                let selects = document.querySelectorAll("select[name^='gejala']");
                let selectedCount = 0;
    
                selects.forEach(select => {
                    if (select.value.trim() !== "") {
                        selectedCount++;
                    }
                });
    
                if (selectedCount === 0) { 
                    event.preventDefault();
                    Swal.fire({
                        toast: true,
                        position: 'top',
                        icon: 'error',
                        title: 'Anda belum memilih gejala!',
                        showConfirmButton: false,
                        timer: 3000
                    });
                } else if (selectedCount < 3) { 
                    event.preventDefault();
                    Swal.fire({
                        toast: true,
                        position: 'top',
                        icon: 'error',
                        title: 'Anda harus memilih minimal 3 gejala!',
                        showConfirmButton: false,
                        timer: 3000
                    });
                }
            });
    
            // Inisialisasi DataTables
            $("#diagnosisTable").DataTable({
                "paging": false,
                "lengthChange": false,
                "searching": false,
                "ordering": false,
                "info": false,
                "autoWidth": false,
                "pageLength": 10
            });
    
            $("#basic-datatables").DataTable();
    
            // Menampilkan pesan setelah alert ditutup
            var alertElement = document.getElementById('diagnosisAlert');
            var messageElement = document.getElementById('message');
    
            if (alertElement) {
                alertElement.addEventListener('closed.bs.alert', function() {
                    messageElement.style.display = 'block';
                });
            }
        });
    </script>
    
@endsection
@endsection