@extends("base")

@section("main")
    <main class="container">
        <div class="row">
            <div class="col-sm-3">
                @include("partials.sidebar")
            </div>

            <div class="col-sm-9">
                <div class="row">
                    <div class="col-12">
                        <form id="query-form" method="POST" action="/modify/query" class="mt-5">
                            @csrf

                            <div class="mb-3">
                                <label for="query" class="form-label">Query</label>
                                <textarea rows="5" class="form-control" id="query" name="query" value="{{ old('query') }}" required autofocus></textarea>
                            </div>

                            <div>
                                <button type="submit" class="btn btn-primary btn-block">Not spam</button>
                                <span id="btn-running" style="font-size: 14px; display: none;" class="text-secondary">Running</span>
                            </div>
                        </form>
                    </div>

                    <div class="col-12">
                        <hr />
                    </div>

                    <div class="col-12">
                        <div id="accounts-table">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
@endsection

@section("scripts")
    <script type="text/javascript">
        function fetch_accounts_table() {
            $.ajax({
                url: "/modify/accounts",
                method: "GET",
                success: function(response) {
                    $("#accounts-table").html(response.html)
                },
                error: function(xhr) {
                    console.error(xhr)
                },
            })
        }

        $(document).ready(function() {
            $("#query-form").on("submit", function(evt) {
                evt.preventDefault();

                $("#btn-running").fadeIn();

                fetch_accounts_table()

                let accounts_interval = setInterval(fetch_accounts_table, 1000)

                $.ajax({
                    url: "/modify/query",
                    method: "POST",
                    data: $(this).serialize(),
                    success: function(response) {
                        $("#btn-running").fadeOut();
                        clearInterval(accounts_interval)
                    },
                    error: function(xhr) {
                        $("#btn-running").fadeOut();
                        clearInterval(accounts_interval)
                        console.error(xhr)
                    }
                })

            })
        })
    </script>
@endsection