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

{% block content %}
<style>
    .table .table-dark th {
        background-color: rgb(80, 90, 97) !important;
        border-color: rgb(70, 80, 87);
    }
    .actions {
        display: flex;
        gap: 5px;
        align-items: center;
    }
    .actions form {
        margin: 0;
        padding: 0;
        display: inline;
    }
    .table-container {
        width: 100%;
        overflow-x: auto;
    }
    
    .table {
        table-layout: fixed;
        width: 100%;
    }
    .journals-container {
        padding: 20px;
        background-color: #f8f9fa;
    }
    .card {
        background-color: white;
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    .table-container { width: 100%; overflow-x: auto; }
    .table th:nth-child(1), .table td:nth-child(1) { width: 3%; } /* No */
    .table th:nth-child(2), .table td:nth-child(2) { width: 10%; } /* Reference No */
    .table th:nth-child(3), .table td:nth-child(3) { width: 9%; } /* Date */
    .table th:nth-child(4), .table td:nth-child(4) { width: 25%; } /* Account No */
    .table th:nth-child(5), .table td:nth-child(5) { width: 25%; } /* Description */
    .table th:nth-child(6), .table td:nth-child(6) { width: 15%; text-align: right; } /* IDR Amount */
    .table th:nth-child(7), .table td:nth-child(7) { width: 10%; text-align: right; } /* USD Amount */
    .table th:nth-child(8), .table td:nth-child(8) { width: 7%; text-align: right; } /* Actions */
</style>

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

<!-- Add New Entry Modal -->
<div class="modal fade" id="addEntryModal" tabindex="-1" aria-labelledby="addEntryModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addEntryModalLabel">Add New Entry</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="POST">
                {% csrf_token %}
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="ref_no_modal" class="form-label">Ref. No</label>
                        <input type="text" class="form-control" id="ref_no_modal" name="ref_no" placeholder="Enter Ref. No">
                    </div>
                    <div class="mb-3">
                        <label for="date_modal" class="form-label">Date</label>
                        <input type="date" class="form-control" id="date_modal" name="date">
                    </div>
                    <div class="mb-3">
                        <label for="acct_no_modal" class="form-label">Account No</label>
                        <input type="text" class="form-control" id="acct_no_modal" name="acct_no" placeholder="Enter Account No">
                    </div>
                    <div class="mb-3">
                        <label for="descript_modal" class="form-label">Description</label>
                        <input type="text" class="form-control" id="descript_modal" name="descript" placeholder="Enter Description">
                    </div>
                    <div class="mb-3">
                        <label for="idramt_modal" class="form-label">IDR Amount</label>
                        <input type="text" class="form-control" id="idramt_modal" name="idramt" placeholder="Enter IDR amount">
                    </div>
                    <div class="mb-3">
                        <label for="usdamt_modal" class="form-label">USD Amount</label>
                        <input type="text" class="form-control" id="usdamt_modal" name="usdamt" placeholder="Enter USD amount">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>


<!-- Journal Table Display -->
<div class="table-container">
    <table class="table table-striped table-hover">
        <thead class="table-dark">
            <tr>
                <th scope="col">No</th>
                <th scope="col">Ref. No</th>
                <th scope="col">Date</th>
                <th scope="col">Account No</th>
                <th scope="col">Description</th>
                <th scope="col">IDR Amount</th>
                <th scope="col">USD Amount</th>
                <th scope="col">Actions</th>
            </tr>
        </thead>
        <tbody>
            {% if detail_transactions %}
            {% for journal in detail_transactions %}
            <tr>
                <td>{{ forloop.counter }}</td> <!-- Added row number -->
                <td>{{ journal.ref_no|format_ref_no }}</td>
                <td>{{ journal.date|date:"d-m-Y" }}</td>
                <td>{{ journal.acct_no|format_acct_no }}</td>
                <td>{{ journal.descript }}</td>
                <td class="text-end">{{ journal.idramt|format_rupiah }}</td>
                <td class="text-end">{{ journal.usdamt|format_usd }}</td>
                <td class="d-inline-flex gap-2">
                    <a href="#" class="btn btn-sm btn-secondary"><i class="bi bi-pencil"></i></a>
                    <a href="#" class="btn btn-sm btn-danger"><i class="bi bi-trash"></i></a>
                </td>
            </tr>
            {% endfor %}
            {% else %}
            <tr>
                <td colspan="7" class="text-center">No journal entries found</td>
            </tr>
            {% endif %}
        </tbody>
    </table>
</div>

<!-- Include jQuery and jQuery Mask Plugin -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>

<script>
    $(document).ready(function() {
        $('#idramt').mask('#.##0', {reverse: true});
        $('#usdamt').mask('#,##0.00', {reverse: true});

        // Apply the same mask for the modal form
        $('#idramt_modal').mask('#.##0', {reverse: true});  
        $('#usdamt_modal').mask('#,##0.00', {reverse: true});
    });
</script>

{% endblock %}