@extends('user.layouts.v_template')
@section('style')
    <style>
        .card {
            background: white;
            padding: 25px;
            border-radius: 12px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
        }

        h1 {
            margin-top: 0;
        }

        /*
        |--------------------------------------------------------------------------
        | POOL & ANSWER AREA
        |--------------------------------------------------------------------------
        */
        .pool,
        .answer-area {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
            margin-top: 20px;
        }

        /*
        |--------------------------------------------------------------------------
        | ITEM STYLE
        |--------------------------------------------------------------------------
        */
        .item {
            background: #2563eb;
            color: white;
            padding: 15px;
            border-radius: 10px;
            cursor: grab;
            user-select: none;
            text-align: center;
            font-size: 15px;
            font-weight: bold;

            display: flex;
            align-items: center;
            justify-content: center;

            min-height: 90px;
            position: relative; /* Diperlukan untuk penempatan absolut badge angka */

            word-break: break-word;
            transition: all 0.2s ease;
        }

        .item:hover {
            transform: scale(1.02);
        }

        /* Style ketika item dipilih pada mode mobile */
        .item.selected {
            background: #1e3a8a; /* Biru gelap sesuai contoh gambar */
        }

        /* Badge Lingkaran Nomor Urut di Mobile */
        .mobile-badge {
            display: none; /* Sembunyikan default di PC */
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            background: #4ade80; /* Warna hijau terang bulat */
            color: black;
            font-weight: bold;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        }

        .item.selected .mobile-badge {
            display: flex; /* Tampil jika item memiliki class .selected */
        }

        /*
        |--------------------------------------------------------------------------
        | SLOT (PC ONLY)
        |--------------------------------------------------------------------------
        */
        .slot {
            background: #e5e7eb;
            border: 2px dashed #9ca3af;
            min-height: 120px;
            border-radius: 10px;
            padding: 10px;
            position: relative;

            display: flex;
            align-items: center;
            justify-content: center;

            transition: 0.2s;
        }

        .slot:hover {
            background: #dbeafe;
        }

        .slot-number {
            position: absolute;
            top: 8px;
            left: 10px;
            font-size: 12px;
            color: #6b7280;
            font-weight: bold;
        }

        /*
        |--------------------------------------------------------------------------
        | BUTTON
        |--------------------------------------------------------------------------
        */
        .submit-btn {
            width: 100%;
            margin-top: 30px;
            padding: 15px;
            border: none;
            border-radius: 10px;
            background: #16a34a;
            color: white;
            font-size: 16px;
            cursor: pointer;
        }

        .submit-btn:hover {
            background: #15803d;
        }

        .correct {
            background: #dcfce7;
            color: #166534;
        }

        .wrong {
            background: #fee2e2;
            color: #991b1b;
        }

        /*
        |--------------------------------------------------------------------------
        | TABLET RESPONSIVE
        |--------------------------------------------------------------------------
        */
        @media (max-width: 992px) {
            .pool,
            .answer-area {
                grid-template-columns: repeat(2, 1fr);
            }

            .item {
                font-size: 14px;
                min-height: 100px;
            }

            .slot {
                min-height: 130px;
            }
        }

        /*
        |--------------------------------------------------------------------------
        | MOBILE RESPONSIVE (Sesuai mockup Anda)
        |--------------------------------------------------------------------------
        */
        @media (max-width: 576px) {
            .card {
                padding: 15px;
            }

            /* Sembunyikan area slot abu-abu karena urutan langsung memakai klik pada item */
            .answer-area, 
            h5 {
                display: none !important;
            }

            .pool {
                grid-template-columns: 1fr;
            }

            .item {
                font-size: 14px;
                padding: 14px;
                padding-left: 20px;
                padding-right: 60px; /* Beri space kanan agar teks tidak menabrak lingkaran nomor */
                min-height: auto;
                cursor: pointer;
                justify-content: flex-start; /* Teks rata kiri seperti di gambar */
                text-align: left;
            }

            .submit-btn {
                font-size: 14px;
                padding: 13px;
            }
        }
    </style>
@endsection

@section('content')
    @if(session('error'))
        <div class="alert alert-danger">
            {{ session('error') }}
        </div>
    @endif

    <section class="section-top" style="background-image: url(assets/img/bg/section-top.png); background-size:cover; background-position: center center;">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 col-sm-12 col-xs-12 text-center">
                    <div class="section-top-title">
                        <h1>Bank Kasus</h1>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section id="portfolio" class="portfolio_area section-padding">
        <div class="card">
            <h4>Petunjuk</h4>
            <p>
                Susun langkah perbaikan yang paling tepat berdasarkan hasil diagnosis yang telah Anda lakukan.
                Seret (drag) dan susun langkah berikut ke urutan yang benar.
            </p>
            <hr>

            <div class="pool" id="pool">
                @foreach($options as $option)
                    <div class="item" draggable="true" data-id="{{ $option['id'] }}" data-selected-order="">
                        {{ $option['text'] }}
                        <div class="mobile-badge"></div>
                    </div>
                @endforeach
            </div>

            <hr>
            <h5>Susun Urutan</h5>
            <div class="answer-area">
                @for($i = 1; $i <= 6; $i++)
                    <div class="slot" data-slot="{{ $i }}">
                        <span class="slot-number">{{ $i }}</span>
                    </div>
                @endfor
            </div>

            <button class="submit-btn" onclick="checkAnswer()">
                Simpan
            </button>
            <input type="text" hidden value="{{ $sesi }}" id="sesi">
            <input type="text" hidden value="{{ $caseId }}" id="caseId">
            <input type="text" hidden value="{{ $puzzleId }}" id="puzzleId">
        </div>
    </section>
@endsection

@section('script')
    <script>
        let draggedItem = null;
        const correctOrder = @json($correctOrder);
        
        // Array global untuk mencatat urutan item klik pada mode mobile
        let mobileSelectionOrder = [];

        /*
        |--------------------------------------------------------------------------
        | MANAJEMEN EVENT ITEM (DRAG PC & KLIK MOBILE)
        |--------------------------------------------------------------------------
        */
        document.querySelectorAll('.item').forEach(item => {
            // Event Drag Start (Untuk PC)
            item.addEventListener('dragstart', function () {
                draggedItem = this;
            });

            // Event Klik (Untuk Mobile)
            item.addEventListener('click', function() {
                // Jalankan hanya jika ukuran layar adalah Mobile (lebar <= 576px)
                if (window.innerWidth <= 576) {
                    if (this.classList.contains('selected')) {
                        // --- AKSI UNCHECK ---
                        this.classList.remove('selected');
                        this.querySelector('.mobile-badge').innerText = '';
                        this.removeAttribute('data-selected-order');
                        
                        // Hapus item ini dari antrean urutan
                        mobileSelectionOrder = mobileSelectionOrder.filter(el => el !== this);
                        
                        // Urutkan ulang (re-index) semua nomor di atasnya agar otomatis turun terurut
                        reindexMobileBadges();
                    } else {
                        // --- AKSI CHECK / TEKAN ---
                        this.classList.add('selected');
                        mobileSelectionOrder.push(this);
                        
                        // Dapatkan nomor urut terbaru berdasarkan panjang array penampung
                        const currentNumber = mobileSelectionOrder.length;
                        this.setAttribute('data-selected-order', currentNumber);
                        this.querySelector('.mobile-badge').innerText = currentNumber;
                    }
                }
            });
        });

        // Fungsi pembantu untuk mengurutkan kembali nomor urut mobile saat ada yang di-uncheck
        function reindexMobileBadges() {
            mobileSelectionOrder.forEach((item, index) => {
                const newIndex = index + 1;
                item.setAttribute('data-selected-order', newIndex);
                item.querySelector('.mobile-badge').innerText = newIndex;
            });
        }

        /*
        |--------------------------------------------------------------------------
        | DRAG & DROP SLOT (UNTUK PC)
        |--------------------------------------------------------------------------
        */
        document.querySelectorAll('.slot').forEach(slot => {
            slot.addEventListener('dragover', function (e) {
                e.preventDefault();
            });

            slot.addEventListener('drop', function (e) {
                e.preventDefault();
                if (!draggedItem) return;

                const existing = this.querySelector('.item');
                if (existing) {
                    document.getElementById('pool').appendChild(existing);
                }
                this.appendChild(draggedItem);
            });
        });

        /*
        |--------------------------------------------------------------------------
        | CHECK & SUBMIT ANSWER
        |--------------------------------------------------------------------------
        */
        function checkAnswer() {
            let userOrder = [];
            let sesi = document.getElementById('sesi').value;
            let caseId = document.getElementById('caseId').value;
            let puzzleId = document.getElementById('puzzleId').value;

            // Kondisional pengambilan data urutan berdasarkan jenis device layar saat diklik simpan
            if (window.innerWidth <= 576) {
                // Mode Mobile: Urutan diambil dari data array urutan klik
                mobileSelectionOrder.forEach(item => {
                    userOrder.push(item.dataset.id.replace('opsi', ''));
                });
            } else {
                // Mode PC: Urutan diambil berdasarkan posisi item di dalam grid slot (.slot)
                document.querySelectorAll('.slot').forEach(slot => {
                    const item = slot.querySelector('.item');
                    if (item) {
                        userOrder.push(item.dataset.id.replace('opsi', ''));
                    }
                });
            }

            // Validasi jumlah pengerjaan urutan (Harus bernilai 6 opsi)
            if (userOrder.length < 6) {
                alert('Semua urutan harus diisi');
                return;
            }

            // Kirim data via fetch API
            fetch('/submit-puzzle', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({
                    order: userOrder,
                    sesi: sesi,
                    caseId: caseId,
                    puzzleId: puzzleId
                })
            })
            .then(res => res.json())
            .then(data => {
                let text = data.data;

                // Split teks berdasarkan label response API
                let ringkasan = text.split('Ringkasan:')[1]?.split('Dampak:')[0]?.trim();
                let dampak = text.split('Dampak:')[1]?.split('Pertanyaan Refleksi:')[0]?.trim();
                let refleksi = text.split('Pertanyaan Refleksi:')[1]?.trim();

                Swal.fire({
                    html: `
                        <div style="text-align:left">
                            <b>Ringkasan:</b><br>
                            ${ringkasan ?? ''}<br><br>
                            <b>Dampak:</b><br>
                            ${dampak ?? ''}<br><br>
                            <b>Pertanyaan Refleksi:</b><br>
                            ${refleksi ?? ''}
                        </div>
                    `,
                    icon: "info",
                    confirmButtonText: "Lanjutkan",
                }).then((result) => {
                    window.location.href = data.redirect;
                });
            });
        }
    </script>
@endsection