@extends('layouts.ani')

@section('content')
    <div id="app">
        <button onclick="scrapeAnime()">Start Scraping</button>
    </div>

    @push('scripts')

        <script type="module">
            // Import from node_modules
            // import { HiAnime } from "/node_modules/aniwatch/dist/index.js";
            import { HiAnime } from "aniwatch";
            // import { HiAnime } from "/Users/ani/PhpstormProjects/anifan_website/node_modules/aniwatch/dist/index.js";
            // or if that doesn't work, try:
            // import { HiAnime } from "../../../node_modules/aniwatch/dist/index.js";

            // Make the function globally available
            window.scrapeAnime = function() {
                const hianime = new HiAnime.Scraper();

                hianime.getAZList("all", 50)
                    .then(data => {
                        console.log('Data received:', data); // Debug log
                        axios.post('/anime/store', data)
                            .then(response => {
                                console.log('Success:', response.data);
                            })
                            .catch(error => {
                                console.error('Error:', error);
                            });
                    })
                    .catch(err => console.error(err));
            }
        </script>
    @endpush

@endsection