{% extends 'base.html' %}
{% load kunj_filters %}

{% block body %}

<div id="wrapper">
	{% include 'navbar.html' %}

	<div id="page-wrapper" class="gray-bg">
		{% include 'header.html' %}
		<div class="row wrapper border-bottom white-bg page-heading">
            <div class="col-lg-10">
                <h2>Deliverables</h2>
            </div>
            <div class="col-lg-2">

            </div>
        </div>
		<!-- test -->
        <div class="wrapper wrapper-content animated fadeInRight">
            <div class="row">
                <div class="col-lg-12">
                    <div class="ibox ">

                        <div class="row">
                            {% for deliverable in deliverables %}
                                <div class="col-6">
                                    <div class="ibox ">
                                        <div class="ibox-title">
                                            <h5>{{deliverable.key_indicator}}</h5>
                                        </div>
                                        <div class="ibox-content">
                                            <div>
                                                <canvas data-target="{{deliverable.target}}" data-achieved="{{deliverable.achieved}}" class="pie_chart" height="140"></canvas>
                                            </div>

                                            <div class="justify-content-between flex-row d-flex align-items-center mt-3">
                                                <View>
                                                    <strong>Target:</strong> {{deliverable.target}}<br>
                                                </View>
                                                <View>
                                                    <strong>Achieved:</strong> {{deliverable.achieved}}<br>
                                                </View>
                                                <View>
                                                    <strong>Completion:</strong> {{deliverable.completion}} %
                                                </View>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>

                        <div class="ibox-title px-2 justify-content-between d-flex align-items-center">
                            
                            <h4>Overall Target vs Deliverables Dashboard (Monthly/Project Duration)</h4>
                            {% if user.user_type.user_permission.program_department_deliverables_import == 1 %}
                                <form id="deliverable_form" action="/admin/program-department/deliverables" method="POST" enctype="multipart/form-data">
                                    {% csrf_token %}
                                    <input type="file" id="deliverable_import" name="deliverables" value="" accept=".csv, .xlsx" style="display: none;">
                                    <button type="button" id="import_deliverables" class="btn btn-w-s btn-primary"> Import </button>
                                </form>  
                            {% endif %}
                        </div>

                        <div class="ibox-content">
                            <div class="mb-2">
                                <input type="text" id="filter" class="form-control" style="max-width:280px;" placeholder="Search in table...">
                            </div>
                            <div style="overflow-x: auto;">
                                <table class="footable table-bordered table table-stripped w-100" data-paging-position="right" data-page-size="15" data-filter=#filter>
                                    <thead>
                                        <tr>
                                            <th style="max-width: fit-content; white-space:nowrap;">S No.</th>
                                            <th class="text-center" style="max-width: fit-content; white-space:nowrap;">Key Indicator</th>
                                            <th class="text-center" style="max-width: fit-content; white-space:nowrap;">Target</th>
                                            <th class="text-center" style="max-width: fit-content; white-space:nowrap;">Achieved</th>
                                            <th class="text-center" style="max-width: fit-content; white-space:nowrap;">Completion</th>
                                            <th class="text-center" style="max-width: fit-content; white-space:nowrap;">Remarks</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for deliverable in deliverables %}
                                            <tr>
                                                <td>{{forloop.counter}}</td>
                                                <td class="text-center" style="max-width: fit-content; white-space:nowrap;">{{deliverable.key_indicator}}</td>
                                                <td class="text-center" style="max-width: fit-content; white-space:nowrap;">{{deliverable.target}}</td>
                                                <td class="text-center" style="max-width: fit-content; white-space:nowrap;">{{deliverable.achieved}}</td>
                                                <td class="text-center" style="max-width: fit-content; white-space:nowrap;">{{deliverable.completion}} %</td>
                                                <td class="text-center" style="max-width: fit-content; white-space:nowrap;">{{deliverable.remarks}}</td>
                                            </tr>
                                        {% endfor %}
                                    </tbody>
                                
                                </table>
                            </div>
                            <div class="py-4 px-5 justify-content-end d-flex align-items-end" style="width : 100%;">
                                <ul class="pagination float-center"></ul>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- <div class="col-lg-12">
                    <div class="ibox ">
                        <div class="ibox-title px-2 justify-content-between d-flex align-items-center">
                            <h4>Daily / Weekly Progress Tracker (Sample Format)</h4>
                            {% if user.user_type.user_permission.program_department_deliverables_import == 1 %}
                                <form id="progress_form" action="/admin/program-department/deliverables/progress" method="POST" enctype="multipart/form-data">
                                    {% csrf_token %}
                                    <input type="file" id="progress_import" name="progress" value="" accept=".csv, .xlsx" style="display: none;">
                                    <button type="button" id="import_progress" class="btn btn-w-s btn-primary"> Import </button>
                                </form>   
                            {% endif %}
                        </div>

                        <div class="ibox-content">
                            <div style="overflow-x: auto;">
                                <table class="footable table-bordered table table-stripped w-100" data-paging-position="right" data-page-size="15" data-filter=#filter>
                                    <thead>
                                        <tr>
                                            <th style="max-width: fit-content; white-space:nowrap;">S No.</th>
                                            <th class="text-center" style="max-width: fit-content; white-space:nowrap;">Date</th>
                                            <th class="text-center" style="max-width: fit-content; white-space:nowrap;">Location</th>
                                            <th class="text-center" style="max-width: fit-content; white-space:nowrap;">Activity</th>
                                            <th class="text-center" style="max-width: fit-content; white-space:nowrap;">SHGs Covered</th>
                                            <th class="text-center" style="max-width: fit-content; white-space:nowrap;">Members Enrolled</th>
                                            <th class="text-center" style="max-width: fit-content; white-space:nowrap;">Schemes Facilitated</th>
                                            <th class="text-center" style="max-width: fit-content; white-space:nowrap;">Legal Docs Processed</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for progress in progress_tracker %}
                                            <tr>
                                                <td>{{forloop.counter}}</td>
                                                <td class="text-center" style="max-width: fit-content; white-space:nowrap;">{{progress.date|ddmmyyyy}}</td>
                                                <td class="text-center" style="max-width: fit-content; white-space:nowrap;">{{progress.location}}</td>
                                                <td class="text-center" style="max-width: fit-content; white-space:nowrap;">{{progress.activity}}</td>
                                                <td class="text-center" style="max-width: fit-content; white-space:nowrap;">{{progress.shg_covered}} %</td>
                                                <td class="text-center" style="max-width: fit-content; white-space:nowrap;">{{progress.members_enrolled}}</td>
                                                <td class="text-center" style="max-width: fit-content; white-space:nowrap;">{{progress.schemes_facilitated}}</td>
                                                <td class="text-center" style="max-width: fit-content; white-space:nowrap;">{{progress.legal_docs_processed}}</td>
                                            </tr>
                                        {% endfor %}
                                    </tbody>
                                
                                </table>
                            </div>
                            <div class="py-4 px-5 justify-content-end d-flex align-items-end" style="width : 100%;">
                                <ul class="pagination float-center"></ul>
                            </div>
                        </div>
                    </div>
                </div> -->
            </div>
        </div>
	</div>
</div>



<script>
    $('.footable').footable({
		"paging": {
			"enabled": true
		}
	});

    $(document).on('click', '.delete_button', function() {
        var id = $(this).attr("data-id");
        var action = $('#delete_form').attr('action');
        $('#delete_form').attr('action', action + id);
        $('#delete_modal').modal('show');
    });


    $(document).on('click', '#import_deliverables', function() {
        $('#deliverable_import').trigger('click');
    });

    $(document).on('change', '#deliverable_import', function() {
        var fileName = $(this).val().split('\\').pop();
        if (fileName) {
            $('#deliverable_form').submit();
        } else {
            alert("Please select a file to upload.");
        }
    });


    $(document).on('click', '#import_progress', function() {
        $('#progress_import').trigger('click');
    });

    $(document).on('change', '#progress_import', function() {
        var fileName = $(this).val().split('\\').pop();
        if (fileName) {
            $('#progress_form').submit();
        } else {
            alert("Please select a file to upload.");
        }
    });


    $(document).ready(function() {
        $('.pie_chart').each(function() {
            var target = $(this).attr('data-target') || 0;
            var achieved = $(this).attr('data-achieved') || 0;
            if(achieved >= target){
                achieved = target; // Ensure achieved does not exceed target
            }
            var ctx = this.getContext('2d');
            var data = {
                labels: ["Target", "Achieved"],
                datasets: [{
                    data: [target-achieved, achieved],
                    backgroundColor: ['#e4e5e4', '#2ca444']
                }]
            };
            new Chart(ctx, {type: 'doughnut', data: data, options: {
                plugins: {
                    legend: {
                        display: true,
                        labels: { color: '#9aa4b8' }
                    }
                }
            }});
        })
    });

</script>

{% for message in messages %}
	<script>
		showNotification('{{message}}', '{{message.tags}}')
	</script>
{% endfor %}

{% endblock %}