{% extends 'core/base.html' %}

{% block title %}Home{% endblock %}

{% block styles %}
<style>
    /* The switch - the box around the slider (smaller size) */
    .switch {
        position: relative;
        display: inline-block;
        width: 40px;
        height: 20px;
        margin-right: 10px;
    }

    /* Hide default HTML checkbox */
    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    /* The slider (smaller size) */
    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        transition: .4s;
    }

    .slider:before {
        position: absolute;
        content: "";
        height: 16px;
        width: 16px;
        left: 2px;
        bottom: 2px;
        background-color: white;
        transition: .4s;
    }

    input:checked + .slider {
        background-color: #2196F3;
    }

    input:focus + .slider {
        box-shadow: 0 0 1px #2196F3;
    }

    input:checked + .slider:before {
        transform: translateX(20px);
    }

    /* Rounded sliders */
    .slider.round {
        border-radius: 20px;
    }

    .slider.round:before {
        border-radius: 50%;
    }

    /* Add margin between Scraped label and Flagged toggle */
    .scraped-label {
        margin-right: 20px;
    }

    /* Responsive table */
    .table-responsive {
        overflow-x: auto;
    }

    .table {
        width: 100%;
        min-width: 600px; /* Set a minimum width */
    }
</style>
{% endblock %}

{% block content %}
<h2>Record List</h2>

<!-- Search Form -->
<form id="search-form" method="GET" class="mb-3 d-flex justify-content-between align-items-center">
    <div class="form-group mb-0 d-flex align-items-center">
        <!-- Rounded switch for Scraped -->
        <label class="switch">
            <input type="checkbox" id="scraped-toggle">
            <span class="slider round"></span>
        </label>
        <label for="scraped-toggle" class="mb-0 scraped-label">Scraped</label>

        <!-- Flagged toggle -->
        <label class="switch">
            <input type="checkbox" id="flagged-toggle">
            <span class="slider round"></span>
        </label>
        <label for="flagged-toggle" class="mb-0">Flagged</label>
    </div>

    <!-- Search input -->
    <div class="form-group mb-0">
        <input type="text" id="search-input" name="search" class="form-control" placeholder="Search by website..." value="{{ request.GET.search }}">
    </div>
</form>

<!-- Table Structure -->
<div class="table-responsive">
    <table class="table table-bordered table-striped">
        <thead>
            <tr>
                <th>ID</th>
                <th>Website</th>
                <th>Is Scraped</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody id="records-container">
            <!-- Records will be loaded here by AJAX -->
        </tbody>
    </table>
</div>

<div id="pagination-container" class="pagination d-flex justify-content-center">
    <!-- Pagination links will be loaded here by AJAX -->
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    function updateSession(page, searchQuery, isScraped, isFlagged) {
        return $.ajax({
            url: '{% url "update_session" %}',
            method: 'POST',
            data: {
                page: page,
                search: searchQuery,
                scraped: isScraped,
                flagged: isFlagged,
                csrfmiddlewaretoken: '{{ csrf_token }}'  // Include CSRF token
            }
        });
    }

    function loadRecords(page = 1, isScraped = '', isFlagged = '') {
        let searchQuery = $('#search-input').val();

        // Update session before loading records
        updateSession(page, searchQuery, isScraped, isFlagged)
            .done(function(response) {
                $.ajax({
                    url: '{% url "home" %}',
                    data: {
                        search: searchQuery,
                        page: page,
                        scraped: isScraped,
                        flagged: isFlagged
                    },
                    success: function(data) {
                        const recordsHtml = data.records.map(record => `
                            <tr>
                                <td>${record.id}</td>
                                <td><a href="${record.website}" target="_blank">${record.website}</a></td>
                                <td>${record.is_scraped ? 'Yes' : 'No'}</td>
                                <td><a href="/${record.id}/" class="btn btn-primary">Scrape</a></td>
                            </tr>
                        `).join('');

                        $('#records-container').html(recordsHtml);

                        const pageNumbers = [];
                        const totalPages = data.total_pages;
                        const currentPage = data.current_page;

                        const startPage = Math.max(1, currentPage - 2);
                        const endPage = Math.min(totalPages, currentPage + 2);

                        for (let i = startPage; i <= endPage; i++) {
                            pageNumbers.push(i);
                        }

                        const paginationHtml = `
                            <span class="step-links">
                                ${data.has_previous ? `<a href="#" data-page="1">&laquo; First</a>
                                                        <a href="#" data-page="${currentPage - 1}">Previous</a>` : ''}
                                ${pageNumbers.map(num => `
                                    ${num === currentPage ? `<span class="current">${num}</span>` : `<a href="#" data-page="${num}">${num}</a>`}
                                `).join('')}
                                ${data.has_next ? `<a href="#" data-page="${currentPage + 1}">Next</a>
                                                    ${totalPages > endPage ? `<a href="#" data-page="${totalPages}">Last &raquo;</a>` : ''}` : ''}
                            </span>
                        `;

                        $('#pagination-container').html(paginationHtml);
                    }
                });
            })
            .fail(function() {
                console.error('Error updating session');
            });
    }

    // Handle input events and toggles
    $(document).ready(function() {
        let page = {{ request.session.current_page|default:1 }};
        let isScraped = {{ request.session.is_scraped|default:False|yesno:"true,false" }};
        let isFlagged = {{ request.session.is_flagged|default:False|yesno:"true,false" }};

        $('#scraped-toggle').prop('checked', isScraped);
        $('#flagged-toggle').prop('checked', isFlagged);

        loadRecords(page, isScraped, isFlagged);

        $('#search-input, #scraped-toggle, #flagged-toggle').on('keyup change', function() {
            let isScraped = $('#scraped-toggle').is(':checked');
            let isFlagged = $('#flagged-toggle').is(':checked');
            loadRecords(1, isScraped, isFlagged);
        });

        $(document).on('click', '#pagination-container a', function(event) {
            event.preventDefault();
            const page = $(this).data('page');
            if (page) {
                let isScraped = $('#scraped-toggle').is(':checked');
                let isFlagged = $('#flagged-toggle').is(':checked');
                loadRecords(page, isScraped, isFlagged);
            }
        });
    });
</script>
{% endblock %}