{% extends "finance/base.html" %}
{% load static %}

{% block content %}
{% load custom_filters %}


<style>
    .table .table-dark th {
        background-color: rgb(80, 90, 97) !important;
        border-color: rgb(70, 80, 87);
    }

    .add-button {
        background-color: rgb(80, 90, 97);
        color: white;
        border: none;
    }

    .add-button:hover {
        background-color: rgb(70, 80, 87);
        color: white;
    }

    .table-container {
        overflow-x: auto;
        margin-top: 1rem;
    }

    /* STANDARD PAGINATION */
    .pagination-page-btn {
        background-color: #ffffff !important;
        border: 1px solid #6c757d !important;
        color: #495057 !important;
    }

    .pagination-page-btn:hover,
    .pagination-page-btn:focus {
        background-color: #f1f3f5 !important;
        border-color: #6c757d !important;
        color: #343a40 !important;
    }

    .pagination-page-btn:disabled {
        background-color: #ffffff !important;
        border-color: #6c757d !important;
        color: #6c757d !important;
        opacity: 0.65;
    }

    .pagination-current {
        background-color: rgb(80, 90, 97) !important;
        border: 1px solid rgb(80, 90, 97) !important;
        color: #ffffff !important;
    }

    .pagination-go {
        background-color: rgb(80, 90, 97) !important;
        border: 1px solid rgb(80, 90, 97) !important;
        color: #ffffff !important;
    }

    .pagination-go:hover,
    .pagination-go:focus {
        background-color: rgb(70, 80, 87) !important;
        border-color: rgb(70, 80, 87) !important;
        color: #ffffff !important;
    }
</style>

<div class="d-flex justify-content-between align-items-center" style="padding: 1rem;">
    <h2 style="font-size: 3rem; font-weight: 500; margin: 0;">JISDOR Rate</h2>

    <form method="get" action="{% url 'rate' %}" class="m-0">
        <input
            type="text"
            id="searchInput"
            name="search"
            value="{{ search_query }}"
            class="form-control"
            placeholder="Search JISDOR Rate..."
            style="max-width: 300px; margin-right: 1rem;">
    </form>

    <div>
        <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#rateModal"
            onclick="resetForm()">
            Add JISDOR Rate
        </button>
        <a href="{% url 'generate_pdf_rate' %}" class="btn btn-secondary">
            Generate PDF Report
        </a>
        <a href="{% url 'export_to_excel_rate' %}" class="btn btn-secondary">Export to Excel</a>
    </div>
</div>

{% if page_obj.paginator.num_pages > 1 %}
<div class="d-flex justify-content-between align-items-center mt-2 mb-2"
    style="padding: 0 1rem;">

    <div>
        <small class="text-muted">
            Showing {{ page_obj.start_index }} - {{ page_obj.end_index }}
            of {{ page_obj.paginator.count }}
        </small>
    </div>

    <div class="d-flex align-items-center gap-1">

        <a class="btn btn-sm pagination-page-btn"
           href="?page=1{% if search_query %}&search={{ search_query|urlencode }}{% endif %}">
            First
        </a>

        {% if page_obj.has_previous %}
        <a class="btn btn-sm pagination-page-btn"
           href="?page={{ page_obj.previous_page_number }}{% if search_query %}&search={{ search_query|urlencode }}{% endif %}">
            Previous
        </a>
        {% else %}
        <button class="btn btn-sm pagination-page-btn" disabled>
            Previous
        </button>
        {% endif %}

        <span class="btn btn-sm pagination-current">
            {{ page_obj.number }} / {{ page_obj.paginator.num_pages }}
        </span>

        {% if page_obj.has_next %}
        <a class="btn btn-sm pagination-page-btn"
           href="?page={{ page_obj.next_page_number }}{% if search_query %}&search={{ search_query|urlencode }}{% endif %}">
            Next
        </a>
        {% else %}
        <button class="btn btn-sm pagination-page-btn" disabled>
            Next
        </button>
        {% endif %}

        <a class="btn btn-sm pagination-page-btn"
           href="?page={{ page_obj.paginator.num_pages }}{% if search_query %}&search={{ search_query|urlencode }}{% endif %}">
            Last
        </a>

        <span class="ms-2 small text-muted">
            Go to Page
        </span>

        <form method="GET"
              class="d-flex align-items-center gap-1 m-0">
            {% if search_query %}
            <input type="hidden"
                   name="search"
                   value="{{ search_query }}">
            {% endif %}

            <input type="number"
                   name="page"
                   min="1"
                   max="{{ page_obj.paginator.num_pages }}"
                   class="form-control form-control-sm"
                   style="width: 70px;"
                   required>

            <button type="submit"
                    class="btn btn-sm pagination-go">
                Go
            </button>
        </form>
    </div>
</div>
{% endif %}

<div class="table-container with-bottom-padding">
    <table class="table table-striped table-hover" id="rateTable">
        <thead class="table-dark">
            <tr>
                <th scope="col">No</th>
                <th scope="col">Currency</th>
                <th scope="col">Date</th>
                <th scope="col">Rate</th>
                <th scope="col">Actions</th>
            </tr>
        </thead>
        <tbody>
            {% if rate %}
            {% for rate_no in rate %}
            <tr data-id="{{ rate_no.id }}" data-currsign="{{ rate_no.currsign.currsign|default_if_none:'' }}"
                data-date="{{ rate_no.date|date:'Y-m-d' }}" data-rate="{{ rate_no.rate }}">

                <td>{{ page_obj.start_index|add:forloop.counter0 }}</td>
                <td>{{ rate_no.currsign }}</td>
                <td>{{ rate_no.date|date:"d-m-Y" }}</td>
                <td>{{ rate_no.rate|format_currency_dynamic:rate_no.currsign.currsign }}</td>

                <td>
                    <div class="d-flex gap-1">
                        <button type="button" class="btn btn-sm btn-secondary" onclick="editRate('{{ rate_no.id }}')">
                            <i class="bi bi-pencil-square"></i>
                        </button>
                        <form method="POST" action="{% url 'delete_rate' rate_no.id %}">
                            {% csrf_token %}
                            <button type="submit" class="btn btn-sm btn-danger"
                                onclick="return confirm('Are you sure you want to delete this JISDOR Rate?')">
                                <i class="bi bi-trash"></i>
                            </button>
                        </form>
                    </div>
                </td>
            </tr>
            {% endfor %}
            {% else %}
            <tr>
                <td colspan="5" class="text-center">No JISDOR Rate found</td>
            </tr>
            {% endif %}
        </tbody>
    </table>
</div>

{% if page_obj.paginator.num_pages > 1 %}
<div class="d-flex justify-content-between align-items-center mt-2 mb-3"
    style="padding: 0 1rem;">

    <div>
        <small class="text-muted">
            Showing {{ page_obj.start_index }} - {{ page_obj.end_index }}
            of {{ page_obj.paginator.count }}
        </small>
    </div>

    <div class="d-flex align-items-center gap-1">

        <a class="btn btn-sm pagination-page-btn"
           href="?page=1{% if search_query %}&search={{ search_query|urlencode }}{% endif %}">
            First
        </a>

        {% if page_obj.has_previous %}
        <a class="btn btn-sm pagination-page-btn"
           href="?page={{ page_obj.previous_page_number }}{% if search_query %}&search={{ search_query|urlencode }}{% endif %}">
            Previous
        </a>
        {% else %}
        <button class="btn btn-sm pagination-page-btn" disabled>
            Previous
        </button>
        {% endif %}

        <span class="btn btn-sm pagination-current">
            {{ page_obj.number }} / {{ page_obj.paginator.num_pages }}
        </span>

        {% if page_obj.has_next %}
        <a class="btn btn-sm pagination-page-btn"
           href="?page={{ page_obj.next_page_number }}{% if search_query %}&search={{ search_query|urlencode }}{% endif %}">
            Next
        </a>
        {% else %}
        <button class="btn btn-sm pagination-page-btn" disabled>
            Next
        </button>
        {% endif %}

        <a class="btn btn-sm pagination-page-btn"
           href="?page={{ page_obj.paginator.num_pages }}{% if search_query %}&search={{ search_query|urlencode }}{% endif %}">
            Last
        </a>

        <span class="ms-2 small text-muted">
            Go to Page
        </span>

        <form method="GET"
              class="d-flex align-items-center gap-1 m-0">
            {% if search_query %}
            <input type="hidden"
                   name="search"
                   value="{{ search_query }}">
            {% endif %}

            <input type="number"
                   name="page"
                   min="1"
                   max="{{ page_obj.paginator.num_pages }}"
                   class="form-control form-control-sm"
                   style="width: 70px;"
                   required>

            <button type="submit"
                    class="btn btn-sm pagination-go">
                Go
            </button>
        </form>
    </div>
</div>
{% endif %}

<script>
    document.addEventListener("DOMContentLoaded", function () {
        const rateInput = document.querySelector("#rate");

        if (rateInput) {
            rateInput.addEventListener("input", function (e) {
                let value = e.target.value.replace(/,/g, "");
                if (!isNaN(value) && value !== "") {
                    e.target.value = Number(value).toLocaleString("en-US");
                } else {
                    e.target.value = "";
                }
            });

            document.getElementById("rateForm").addEventListener("submit", function () {
    const dateInput = document.getElementById("date");

    if (dateInput.value) {
        const [day, month, year] = dateInput.value.split("-");
        dateInput.value = `${year}-${month}-${day}`;
    }
});

            const form = rateInput.closest("form");
            if (form) {
                form.addEventListener("submit", function () {
                    rateInput.value = rateInput.value.replace(/,/g, "");
                });
            }
        }
    });

    function editRate(rateId) {
        document.getElementById('rateModalLabel').innerText = 'Edit Rate';
        document.getElementById('rateForm').action = "{% url 'edit_rate' 0 %}".replace('0', rateId);

        const row = document.querySelector(`tr[data-id="${rateId}"]`);
        if (row) {
            document.getElementById('currsign').value = row.dataset.currsign;
            document.getElementById('date').value = row.dataset.date;
            document.getElementById('rate').value = row.dataset.rate;
        }

        const rateModal = new bootstrap.Modal(document.getElementById('rateModal'));
        rateModal.show();
    }
</script>

<!-- CC Modal -->
<div class="modal fade" id="rateModal" tabindex="-1" aria-labelledby="rateModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="rateModalLabel">Add JISDOR Rate</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="rateForm" method="POST" action="{% url 'save_rate' %}">
                    {% csrf_token %}
                    <div class="mb-3">
                        <label for="currsign" class="form-label">Currency</label>
                        <select class="form-control" id="currsign" name="currsign" required>
                            <option value="">-- Select Currency --</option>
                            {% for curr in matauangs %}
                            <option value="{{ curr.currsign }}">{{ curr.currsign }} - {{ curr.currname }}</option>
                            {% endfor %}
                        </select>
                    </div>
<div class="mb-3">
    <label for="date" class="form-label">Date</label>
    <input type="text"
           class="form-control date-input"
           id="date"
           name="date"
           placeholder="DD-MM-YYYY"
           maxlength="10"
           autocomplete="off"
           required>
</div>
                    <div class="mb-3">
                        <label for="rate" class="form-label">Rate</label>
                        <input type="text" id="rate" name="rate" class="form-control" required>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Save</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

<script>
document.addEventListener("DOMContentLoaded", function () {
    flatpickr(".date-input", {
        dateFormat: "d-m-Y",
        allowInput: true,
        locale: {
            firstDayOfWeek: 1
        }
    });
});
</script>
{% endblock %}