{% 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;
    }

    .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;">Middle Rate</h2>

    <form method="GET" class="m-0">
        <input type="text" name="search" value="{{ search_query }}" class="form-control"
            placeholder="Search Middle Rate..."
            style="max-width: 300px; margin-right: 1rem;">
    </form>

    <div>
        <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#middlerateModal"
            onclick="resetForm()">
            Add Middle Rate
        </button>
        <a href="{% url 'generate_pdf_middlerate' %}" class="btn btn-secondary">
            Generate PDF Report
        </a>
        <a href="{% url 'export_to_excel_middlerate' %}" 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="middlerateTable">
        <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 middlerate %}
            {% for middlerate_no in middlerate %}
            <tr data-id="{{ middlerate_no.id }}" data-currsign="{{ middlerate_no.currsign.currsign }}"
                data-date="{{ middlerate_no.date|date:'Y-m-d' }}" data-rate="{{ middlerate_no.rate }}">

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

                <td>
                    <div class="d-flex gap-1">
                        <button type="button" class="btn btn-sm btn-secondary"
                            onclick="editRate('{{ middlerate_no.id }}')">
                            <i class="bi bi-pencil-square"></i>
                        </button>
                        <form method="POST" action="{% url 'delete_middlerate' middlerate_no.id %}">
                            {% csrf_token %}
                            <button type="submit" class="btn btn-sm btn-danger"
                                onclick="return confirm('Are you sure you want to delete this Middle Rate ?')">
                                <i class="bi bi-trash"></i>
                            </button>
                        </form>
                    </div>
                </td>
            </tr>
            {% endfor %}
            {% else %}
            <tr>
                <td colspan="7" class="text-center">No Middle 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-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 %}

<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("middlerateForm").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, "");
            });
        }
    }
});
</script>

<script>
function editRate(middlerateId) {
    document.getElementById('middlerateModalLabel').innerText = 'Edit Rate';
    document.getElementById('middlerateForm').action = "{% url 'edit_middlerate' 0 %}".replace('0', middlerateId);

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

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

<!-- CC Modal -->
<div class="modal fade" id="middlerateModal" tabindex="-1" aria-labelledby="middlerateModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="middlerateModalLabel">Add Middle Rate</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="middlerateForm" method="POST" action="{% url 'save_middlerate' %}">
                    {% 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 %}