@extends('layouts.app')

@section('title', 'Scrape Tweets')

@section('content')
<div class="container mt-5">
    <h2 class="text-center mb-4">Scrape Tweets</h2>

    <!-- Form untuk scraping -->
    <form id="scrapeForm" action="{{ route('tweets.scrape') }}" method="POST" class="needs-validation" novalidate>
        @csrf

        <!-- Baris pertama: Kata Kunci Dinamis -->
        <div id="keywords-container">
            <div class="row mb-3">
                <div class="col-md-6">
                    <label class="form-label">Kata Kunci</label>
                    <input type="text" name="keywords[]" class="form-control" placeholder="Masukkan kata kunci" required>
                </div>
                <div class="col-md-6 d-flex align-items-end">
                    <button type="button" class="btn btn-secondary w-100" onclick="addKeyword()">Tambah Kata Kunci</button>
                </div>
            </div>
        </div>

        <!-- Baris kedua: Grup Idol & Tanggal Awal -->
        <div class="row mb-3">
            <div class="col-md-6">
                <label for="idol_group" class="form-label">Grup Idol</label>
                <input type="text" name="idol_group" id="idol_group" class="form-control" placeholder="Nama grup idol" required>
            </div>
            <div class="col-md-6">
                <label for="start_date" class="form-label">Tanggal Awal</label>
                <input type="date" name="start_date" id="start_date" class="form-control" required>
            </div>
        </div>

        <!-- Baris ketiga: Tanggal Akhir -->
        <div class="row mb-3">
            <div class="col-md-6">
                <label for="end_date" class="form-label">Tanggal Akhir</label>
                <input type="date" name="end_date" id="end_date" class="form-control" required>
            </div>
        </div>

        <!-- Tombol Submit -->
        <button type="submit" class="btn btn-primary w-100">Scrape Tweets</button>
    </form>
</div>

<!-- Loading Modal -->
<div class="modal fade" id="loadingModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content bg-dark text-light">
            <div class="modal-body text-center">
                <div class="spinner-border text-light mb-3" role="status"></div>
                <p>Proses scraping sedang berjalan, harap tunggu...</p>
            </div>
        </div>
    </div>
</div>

<!-- Result Modal -->
<div class="modal fade" id="resultModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Hasil Scraping</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <ul id="resultList" class="list-group">
                    <!-- Data hasil scraping akan ditampilkan di sini -->
                </ul>
            </div>
        </div>
    </div>
</div>

<script>
    // Fungsi untuk menambahkan input kata kunci
    function addKeyword() {
        const container = document.getElementById('keywords-container');
        const row = document.createElement('div');
        row.className = 'row mb-3';
        row.innerHTML = `
            <div class="col-md-6">
                <input type="text" name="keywords[]" class="form-control" placeholder="Masukkan kata kunci" required>
            </div>
            <div class="col-md-6 d-flex align-items-end">
                <button type="button" class="btn btn-danger w-100" onclick="removeKeyword(this)">Hapus</button>
            </div>
        `;
        container.appendChild(row);
    }

    // Fungsi untuk menghapus input kata kunci
    function removeKeyword(button) {
        button.closest('.row').remove();
    }

    // Form submission dengan EventSource
    document.getElementById('scrapeForm').addEventListener('submit', function (e) {
        e.preventDefault();

        const form = e.target;
        const formData = new FormData(form);

        const loadingModal = new bootstrap.Modal(document.getElementById('loadingModal'), {
            backdrop: 'static',
            keyboard: false
        });
        const resultModal = new bootstrap.Modal(document.getElementById('resultModal'));

        const resultList = document.getElementById('resultList');
        resultList.innerHTML = ''; // Kosongkan hasil sebelumnya

        loadingModal.show();

        fetch("{{ route('tweets.scrape') }}", {
            method: 'POST',
            body: formData,
            headers: {
                'X-CSRF-TOKEN': document.querySelector('input[name="_token"]').value,
            }
        })
        .then(response => response.json())
        .then(data => {
            loadingModal.hide();

            if (data.message && data.data) {
                // Tampilkan hasil ke modal
                data.data.forEach(tweet => {
                    const listItem = document.createElement('li');
                    listItem.className = 'list-group-item';
                    listItem.innerHTML = `
                        <strong>Kata Kunci:</strong> ${tweet.keyword} <br>
                        <strong>Konten:</strong> ${tweet.content} <br>
                        <strong>Waktu:</strong> ${tweet.tweeted_at || 'N/A'}
                    `;
                    resultList.appendChild(listItem);
                });

                resultModal.show();
            } else {
                throw new Error("Data hasil tidak ditemukan.");
            }
        })
        .catch(error => {
            loadingModal.hide();
            alert("Gagal: " + error.message);
        });
    });
</script>
@endsection