{% extends 'admin/page/content.html.twig' %}

{% block head_stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="https://cdn.datatables.net/2.0.8/css/dataTables.bootstrap5.css">
    <style>
        .nav-tabs .nav-link.active{
            color: #000;
            cursor: default;
        }
    </style>
{% endblock %}

{% block head_javascript %}
    {{ parent() }}
    <script src="https://cdn.datatables.net/2.0.8/js/dataTables.js"></script>
    <script src="https://cdn.datatables.net/2.0.8/js/dataTables.bootstrap5.js"></script>
{% endblock %}

{% block main %}
    {% set user = ea.getUser() %}
    {% set url = user.credits > 0 ? path('scraper_add') : '#' %}
    {% set class = user.credits > 0 ? 'btn btn-primary' : 'btn btn-disabled' %}
    {% set style = user.credits > 0 ? '' : 'cursor:not-allowed;background-color: #0d6efd;opacity: 0.65;color: #fff;pointer-events: none;' %}
    <div class="container">
        <div class="pb-5">
            <a href="{{ url }}" class="{{ class }} py-2 px-3" style="{{ style }}"><i class="fa-solid fa-plus fa-lg pe-2"></i>Create new scraper</a>
            {% if user.isEnrichAllow %}
                <a href="{{ path('file_enrichment') }}" class="btn btn-success ms-4  py-2 px-3">
                    <i class="fa-solid fa-file-csv fa-lg pe-2"></i>
                    Enrich a file
                </a>
            {% endif %}
        </div>

        <h3 class="credits p-3">remaining credits : {{ user.credits }}</h3>

        <ul class="nav nav-tabs mb-4" id="myTab" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active px-5" id="scrapers-tab" data-bs-toggle="tab" data-bs-target="#scrapers" type="button" role="tab" aria-controls="scrapers" aria-selected="true">Scrapers</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link px-5" id="enrichments-tab" data-bs-toggle="tab" data-bs-target="#enrichments" type="button" role="tab" aria-controls="enrichments" aria-selected="false">Enrichments</button>
            </li>
        </ul>
        <div class="tab-content px-4" id="myTabContent">
            <div class="tab-pane fade show active" id="scrapers" role="tabpanel" aria-labelledby="scrapers-tab">
                {% if scrapers is defined and scrapers is not empty %}
                    <table class="table" id="scrapers-table">
                        <thead>
                            <tr>
                                <th>Site</th>
                                <th>Location</th>
                                <th>Query</th>
                                <th>Parameter 1</th>
                                <th>Parameter 2</th>
                                <th>Date</th>
                                <th>Download File</th>
                            </tr>
                        </thead>
                        <tbody>
                        {% for scraper in scrapers %}
                            <tr>
                                <td>{{ scraper.site }}</td>
                                <td>{{ scraper.location }}</td>
                                <td>{{ scraper.query }}</td>
                                <td>{{ scraper.param1 }}</td>
                                <td>{{ scraper.param2 }}</td>
                                <td>{{ scraper.creationDate|date('y-m-d : H:i:s') }}</td>
                                <td>
                                    {% if scraper.fileName starts with 'scraped_results' %}
                                        <a href="{{ path('download_file', {'type':'scraper', 'id': scraper.id}) }}" title="Download this file"><i class="fas fa-download fa-lg"></i></a>
                                    {% else %}
                                        {{ scraper.fileName }}
                                    {% endif %}
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                {% else %}
                    <div class="no-scraper">
                        <span>You don't have any scraper yet. You can <a href="{{ path('scraper_add') }}">create one here</a></span>
                    </div>
                {% endif %}
            </div>
            <div class="tab-pane fade" id="enrichments" role="tabpanel" aria-labelledby="enrichments-tab">
                {% if enrichments is defined and enrichments is not empty %}
                    <table class="table" id="enrichments-table" style="width:100%">
                        <thead>
                            <tr>
                                <th>keywords</th>
                                <th>Date</th>
                                <th>Download File</th>
                            </tr>
                        </thead>
                        <tbody>
                        {% for enrichment in enrichments %}
                            <tr>
                                <td>{{ enrichment.keywords|join('|') }}</td>
                                <td>{{ enrichment.creationDate|date('y-m-d : H:i:s') }}</td>
                                <td>
                                    {% if enrichment.fileName starts with 'enrichment_' %}
                                        <a href="{{ path('download_file', {'type':'enrichment', 'id': enrichment.id}) }}" title="Download this file"><i class="fas fa-download fa-lg"></i></a>
                                    {% else %}
                                        {{ enrichment.fileName }}
                                    {% endif %}
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                {% else %}
                    <div class="no-scraper">
                        <span>You don't have any enrichment yet. You can <a href="{{ path('file_enrichment') }}">Enrich a file here</a></span>
                    </div>
                {% endif %}
            </div>
        </div>


    </div>
{% endblock %}

{% block body_javascript %}
    {{ parent() }}
<script>
    let scrapersTable = new DataTable('#scrapers-table', {
        responsive: true,
        pageLength: 25,
        columnDefs: [{ width: '30%', targets: 1 }],
        order: [[5, 'desc']]
    });
    let enrichmentsTable = new DataTable('#enrichments-table', {
        responsive: true,
        pageLength: 25,
        // columnDefs: [{ width: '30%', targets: 1 }],
        order: [[1, 'desc']]
    });

    // delete enrichment cookie if exists
    let cookie = document.cookie
        .split("; ")
        .find((row) => row.startsWith("enrich_downloaded="));
    if (cookie) {
        document.cookie = "enrich_downloaded=" +
            ";path=/" +
            ";expires=Thu, 01 Jan 1970 00:00:01 GMT";
    }
</script>
{% endblock %}