{% extends 'base.html' %}

{% 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.project.project}} </h5>
                                            <h3>{{deliverable.key_indicator}}</h3>
                                        </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">
                            <div class="row">
                                <div class="col-4 my-0 justify-content-end d-flex align-items-end">
                                    <h4>Overall Target vs Deliverables Dashboard (Monthly/Project Duration)</h4>
                                </div>
                                <div class="col-4 my-0 justify-content-end d-flex align-items-end">
                                    <form id="attendance_form" action="/demo/program-department/deliverables" method="GET" style="width:100%;" class="my-0">
                                        <div class="flex-row justify-content-end w-100 d-flex align-items-end">
                                            <div class="form-group mx-2 mb-0 d-flex flex-column">
                                                <label>Project</label> 
                                                <select data-placeholder="" id="project" data-value="{{project}}" name="project" class="select2 form-control"  tabindex="-1">
                                                    <option value="All">All</option>
                                                    {% for project in projects %}
                                                        <option value="{{project.id}}">{{project.project}}</option>
                                                    {% endfor %}
                                                </select>
                                            </div>
                                            <button type="submit" class="btn btn-w-s btn-primary ml-2">Apply</button>
                                        </div>
                                    </form>   
                                </div>
                                <div class="col-4 my-0 justify-content-end d-flex align-items-end">
                                    {% if user.user_type.user_permission.program_department_deliverables_import == 1 %}
                                        <button type="button" id="import_deliverables" class="btn btn-w-s btn-primary"> Import </button>
                                        <!-- <form id="deliverable_form" class="mx-2 mb-0"  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;">
                                        </form>   -->
                                    {% endif %} 
                                </div>
                            </div>
                            
                            

                            

                            
                        </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="10" 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;">Project</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>
                                            <th class="text-center" style="max-width: fit-content; white-space:nowrap;">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for deliverable in deliverables %}
                                            <tr>
                                                <td>{{forloop.counter}}</td>
                                                <td class="" style="max-width: fit-content; white-space:nowrap;">{{deliverable.project.project}}</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>
                                                <td class="text-center" style="max-width: fit-content; white-space:nowrap;"><button data-id="{{deliverable.id}}" class="btn btn-danger delete_button" type="button"><i class="fa fa-trash"></i> </button></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="10" 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}}</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>

<div class="modal inmodal" id="add_deliverables_modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content animated flipInY">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h2 class="modal-title">Add Deliverables</h2>
            </div>
            <form method="POST" action="/demo/program-department/deliverables" enctype="multipart/form-data">
                {% csrf_token %}
                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label>Project *</label> 
                                <select data-placeholder="" id="new_project" name="project_id" class="select2 form-control"  tabindex="-1" required>
                                    <option value=""></option>
                                    {% for project in projects %}
                                        <option value="{{project.id}}">{{project.project}}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label>File *</label> 
                                <input type="file" name="deliverables" value="" class="form-control" accept=".csv, .xlsx" required>
                            </div>
                        </div>
                    </div>
                    
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Save</button>
                </div>
            </form>
            
        </div>
    </div>
</div>


<div class="modal inmodal" id="delete_modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content animated flipInY">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">Delete Project</h4>
            </div>
            <form method="GET" id="delete_form" action="/demo/program-department/deliverable/delete/">
                {% csrf_token %}
                <div class="modal-body">
                    <p><strong>Are you sure you want to delete this ?</strong></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-white" data-dismiss="modal">No</button>
                    <button type="submit" class="btn btn-danger">Yes</button>
                </div>
            </form>
            
        </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() {
        $('#add_deliverables_modal').modal('show');
    });

    $(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() {

        var project = $('#project').attr('data-value');
        $('#project').select2({}).val(project.toString()).trigger('change');

        $('.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: ['#FFFF00', '#2ca444']
                }]
            };
            new Chart(ctx, {type: 'doughnut', data: data, options: {
                // responsive: true,
                legend: {
                    display: true
                },
                
            }});
        })
    });

</script>

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

{% endblock %}