{% extends 'extends/layout.html' %}
{% load static %}
{% block content %}
    <div class="row">
        <!-- Start col -->
        <div class="col-lg-12">

            <div class="card m-b-30">
                <div class="card-header">
                    <h5 class="card-title d-flex justify-content-end">
                        <button type="button" data-bs-toggle="modal" data-bs-target="#addStaffLedger" class="btn btn-primary mr-3"><i
                                class="feather icon-plus mr-2"></i>Record Staff ledger
                        </button>
                    </h5>
                </div>

                <div class="modal fade" id="addStaffLedger" tabindex="-1" role="dialog"
                     aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">Assign ledger to staff</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                                </button>
                            </div>
                            <div class="modal-body">
                                <form method="post">
                                    {% csrf_token %}
                                    <div class="mb-2 col-md-12">
                                        <label class="form-label" for="name">Select staff*</label>
                                        <select class="form-control"
                                                id="staff_associated" name="staff_associated"
                                                required>
                                            <option value="" selected disabled>
                                                Select Staff
                                            </option>
                                            {% for staff in actual_staff %}
                                                <option value={{ staff.id }}> {{ staff.biodata.name }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                    <div class="mb-2 col-md-12">
                                        <label class="form-label" for="name">Select Account*</label>
                                        <select class="form-control"
                                                id="account_associated" name="account_associated"
                                                required>
                                            <option value="" selected disabled>
                                                Select Account
                                            </option>
                                            {% for acct in available_accounts %}
                                                <option value={{ acct.id }}> {{ acct.name }}
                                                </option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                    
                                    

                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close
                                        </button>
                                        <button type="submit" name="add_fin" class="btn btn-primary">Assign ledger
                                        </button>
                                    </div>

                                </form>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="basic-datatable" class="table dt-responsive nowrap w-100">
                            <thead>
                            <tr>
                                <th>SN</th>
                                <th>Name</th>
                                <th>Position</th>
                                <th>Accounts associated</th>
                                <th>Actions</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for staff in all_staff %}
                                <tr>
                                    <td>{{ forloop.counter }}</td>
                                    <td>{{ staff.staff.biodata.name|default_if_none:'' }}</td>
                                    <td>{{ staff.staff.position.title|default_if_none:'' }}</td>
                                    <td>
                                        {{staff.account_asscociated.name}}
                                    </td>
                                    <td>
                                        <a href="{% url 'delete_staff_associated' staff.id %}"><button class="btn btn-blue btn-danger btn-sm"><i class="feather icon-eye mr-2"></i>Delete</button></a>
                                        
                                    </td>

                                </tr>
                            {% endfor %}
                            </tbody>
                        
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!-- End col -->
    </div>

{% endblock %}