{% 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>Edit Program</h2>
            </div>
            <div class="col-lg-2">

            </div>
        </div>
		<!-- test -->
        <div class="wrapper wrapper-content animated fadeInRight">
            <div class="row">
                <form class="form-horizontal" method="POST" action="/admin/program-department/program/{{program.id}}" enctype="multipart/form-data">
                    {% csrf_token %}
                    <div class="col-lg-12">
                        <div class="ibox">
                            <div class="ibox-content">
                                
                                <div class="row">
                                    <!-- Program / Project -->
                                    <div class="col-4">
                                        <div class="form-group d-flex flex-column">
                                            <label>Program type*</label>
                                            <select data-placeholder="" data-value="{{program.program_type_id}}" id="program_type" name="program_type" class="select2 form-control"  tabindex="-1" required>
                                                <option value=""></option>
                                                {% for program_type in program_types %}
                                                    <option value="{{program_type.id}}">{{program_type.program_type}}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group d-flex flex-column">
                                            <label>Project *</label>
                                            <select data-placeholder="" data-value="{{program.project_id}}" id="project" name="project" class="select2 form-control"  tabindex="-1" required>

                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group d-flex flex-column">
                                            <label>Category*</label>
                                            <select data-placeholder="" data-value="{{program.category}}" id="category" name="category" class="select2 form-control"  tabindex="-1">
                                                <option value=""></option>
                                                <option value="TRAINING">TRAINING</option>
                                                <option value="AWARENESS">AWARENESS</option>
                                                <option value="BENEFICIARY">BENEFICIARY</option>
                                                <option value="ENROLLMENT">ENROLLMENT</option>
                                            </select>
                                        </div>
                                    </div>

                                    <!-- Beneficiary identity -->
                                    <div class="col-4">
                                        <div class="form-group">
                                            <label>Beneficiary Name *</label>
                                            <input type="text" value="{{program.beneficiary_name}}" name="beneficiary_name" placeholder="" id="exampleInputEmail2" class="form-control" required>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group">
                                            <label>Age *</label>
                                            <select data-placeholder="" data-value="{{program.age}}" id="age" name="age" class="select2 form-control"  tabindex="-1" required>
                                                <option value=""></option>
                                                <option value="1-10">1-10</option>
                                                <option value="11-18">11-18</option>
                                                <option value="19-25">19-25</option>
                                                <option value="26-40">26-40</option>
                                                <option value="41-59">41-59</option>
                                                <option value="60-69">60-69</option>
                                                <option value="70 Above">70 Above</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group">
                                            <label>Gender *</label>
                                            <select data-placeholder="" data-value="{{program.gender}}" id="gender" name="gender" class="select2 form-control"  tabindex="-1" required>
                                                <option value=""></option>
                                                <option value="MALE">MALE</option>
                                                <option value="FEMALE">FEMALE</option>
                                                <option value="TRANSGENDER">TRANSGENDER</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group">
                                            <label>Mobile No. *</label>
                                            <input type="text" value="{{program.mobile}}" name="mobile" placeholder="" id="exampleInputEmail2" class="form-control" required>
                                        </div>
                                    </div>
                                </div>
                                <div class="row" id="custom_fields_container">
                                    {% include 'custom-fields-inputs.html' %}
                                </div>
                                <div class="row">

                                    <!-- Location -->
                                    <div class="col-4">
                                        <div class="form-group">
                                            <label>State *</label>
                                            <select data-placeholder="" data-value="{{program.state_id}}" id="state" name="state" class="select2 form-control"  tabindex="-1" required>
                                                <option value=""></option>
                                                {% for state in states %}
                                                    <option value="{{state.id}}">{{state.state}}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group d-flex flex-column">
                                            <label>District *</label>
                                            <select data-placeholder="" data-value="{{program.district_id}}" id="district" name="district" class="select2 form-control"  tabindex="-1" required>

                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group d-flex flex-column">
                                            <label>Village Name</label>
                                            <input type="text" id="area" name="area" class="form-control" value="{{program.area}}" style="text-transform:uppercase" oninput="this.value = this.value.toUpperCase()">
                                        </div>
                                    </div>

                                    <!-- Demographics -->
                                    <div class="col-4">
                                        <div class="form-group">
                                            <label>Caste *</label>
                                            <select data-placeholder="" data-value="{{program.caste}}" id="caste" name="caste" class="select2 form-control"  tabindex="-1" required>
                                                <option value=""></option>
                                                <option value="GENERAL">General</option>
                                                <option value="OBC">OBC</option>
                                                <option value="SC">SC</option>
                                                <option value="ST">ST</option>
                                                <option value="PVTG's">PVTG's</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group">
                                            <label>Religion *</label>
                                            <select data-placeholder="" data-value="{{program.religion}}" id="religion" name="religion" class="select2 form-control"  tabindex="-1" required>
                                                <option value=""></option>
                                                <option value="HINDU">HINDU</option>
                                                <option value="MUSLIM">MUSLIM</option>
                                                <option value="SIKH">SIKH</option>
                                                <option value="CHRISTIAN">CHRISTIAN</option>
                                                <option value="JAIN">JAIN</option>
                                                <option value="BUDDHIST">BUDDHIST</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group">
                                            <label>Occupation *</label>
                                            <select data-placeholder="" data-value="{{program.occupation}}" id="occupation" name="occupation" class="select2 form-control"  tabindex="-1" required>
                                                <option value=""></option>
                                                <option value="CONSTRUCTION WORKER">CONSTRUCTION WORKER</option>
                                                <option value="FARMER">FARMER</option>
                                                <option value="HOMEMAKER">HOMEMAKER</option>
                                                <option value="SHG GROUPS">SHG GROUPS</option>
                                                <option value="SHOPKEEPER">SHOPKEEPER</option>
                                                <option value="STUDENT">STUDENT</option>
                                                <option value="UNEMPLOYED">UNEMPLOYED</option>
                                                <option value="NONE OF THE ABOVE">NONE OF THE ABOVE</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group">
                                            <label>Family Income *</label>
                                            <select data-placeholder="" data-value="{{program.family_income}}" id="family_income" name="family_income" class="select select2 form-control"  tabindex="-1" required>
                                                <option value=""></option>
                                                <option value="NO INCOME">NO INCOME</option>
                                                <option value="1000 - 5000">1000 - 5000</option>
                                                <option value="5001 - 15000">5001 - 15000</option>
                                                <option value="15001 - 30000">15001 - 30000</option>
                                                <option value="30000 - 45000">30000 - 45000</option>
                                                <option value="45001 - 70000">45001 - 70000</option>
                                                <option value="70001 ABOVE">70001 ABOVE</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group d-flex flex-column">
                                            <label>Differently Abled*</label>
                                            <select data-placeholder="" data-value="{{program.differently_abled}}" id="differently_abled" name="differently_abled" class="select2 form-control"  tabindex="-1">
                                                <option value=""></option>
                                                <option value="YES">YES</option>
                                                <option value="NO"> NO</option>
                                            </select>
                                        </div>
                                    </div>

                                    <!-- Administrative -->
                                    <div class="col-4">
                                        <div class="form-group">
                                            <label>Donor Organization</label>
                                            <select data-placeholder="" data-value="{{program.csr_partner_id}}" id="csr_partner" name="csr_partner" class="select2 form-control"  tabindex="-1" required>
                                                <option value=""></option>
                                                {% for csr_partner in csr_partners %}
                                                    <option value="{{csr_partner.id}}">{{csr_partner.company_name}}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group">
                                            <label>Support Partner / Resource Organization</label>
                                            <select data-placeholder="" data-value="{{program.partner_id}}" id="partner_organization" name="partner_organization" class="select2 form-control py-2">
                                                <option value=""></option>
                                                {% for partner_organization in partner_organizations %}
                                                    <option value="{{partner_organization.id}}">{{partner_organization.company_name}}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group">
                                            <label>Team Member*</label>
                                            <select data-placeholder="" data-value="{{program.team_id}}" id="team" name="team" class="select2 form-control"  tabindex="-1" required>
                                                <option value=""></option>
                                                {% for member in members %}
                                                    <option value="{{member.id}}">{{member.name}}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group">
                                            <label>From Date *</label>
                                            <input type="date" name="from_date" value="{{program.from_date}}" data-value="{{program.from_date}}" placeholder="" id="from_date" class="form-control" required>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>


                    <div class="text-center">
                        <button type="submit" class="btn btn-w-s btn-primary"> Submit </button>
                    </div>

                </form>

                <div class="col-lg-12">
                    <div class="ibox">
                        <div class="ibox-title"><h5>Follow-ups</h5></div>
                        <div class="ibox-content">
                            {% if followups %}
                                <div class="row">
                                    {% for f in followups %}
                                        <div class="col-lg-6" style="margin-bottom:14px;">
                                            <form method="POST" action="/admin/program-department/followup/{{ f.id }}/update" style="border:1px solid #e5e6e7; border-radius:6px; padding:12px;">
                                                {% csrf_token %}
                                                <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;">
                                                    <strong>Follow-up {{ f.followup_number }}</strong>
                                                    <span style="color:#5c6478; font-size:12px;">Due: {{ f.due_date|default:"—" }}</span>
                                                </div>
                                                <div class="form-group">
                                                    <label>Status</label>
                                                    <select name="status" class="form-control">
                                                        <option value="pending" {% if f.status == 'pending' %}selected{% endif %}>Pending</option>
                                                        <option value="completed" {% if f.status == 'completed' %}selected{% endif %}>Completed</option>
                                                        <option value="missed" {% if f.status == 'missed' %}selected{% endif %}>Missed</option>
                                                    </select>
                                                </div>
                                                <div class="form-group">
                                                    <label>Completed Date</label>
                                                    <input type="date" name="completed_date" value="{{ f.completed_date|date:'Y-m-d' }}" class="form-control">
                                                </div>
                                                <div class="form-group">
                                                    <label>Notes</label>
                                                    <input type="text" name="notes" value="{{ f.notes|default:'' }}" class="form-control">
                                                </div>
                                                <button type="submit" class="btn btn-xs btn-primary">Save</button>
                                            </form>
                                        </div>
                                    {% endfor %}
                                </div>
                            {% else %}
                                <p style="color:#5c6478;">No follow-ups scheduled for this beneficiary.</p>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
	</div>
</div>

<!-- Add moment.js CDN before your script if not already present -->


<script>
    
    $('.select2').select2({})

    $(document).ready(function(){
       
    });

    $(document).ready(function(){
        var program_type_id = $('#program_type').attr('data-value');
        var project = $('#project').attr('data-value');
        var state = $('#state').attr('data-value');
        var district = $('#district').attr('data-value');
        var csr_partner = $('#csr_partner').attr('data-value');
        var partner_organization = $('#partner_organization').attr('data-value');
        var team = $('#team').attr('data-value');
        var age = $('#age').attr('data-value');
        var gender = $('#gender').attr('data-value');
        var caste = $('#caste').attr('data-value');
        var religion = $('#religion').attr('data-value');
        var occupation = $('#occupation').attr('data-value');
        var family_income = $('#family_income').attr('data-value');
        var differently_abled = $('#differently_abled').attr('data-value');
        

        $('#program_type').select2().val(program_type_id.toString()).trigger('change');
        $('#state').select2().val(state.toString()).trigger('change');        
        $('#csr_partner').select2().val(csr_partner.toString()).trigger('change');
        $('#partner_organization').select2().val(partner_organization.toString()).trigger('change');
        $('#team').select2().val(team.toString()).trigger('change');
        $('#age').select2().val(age.toString()).trigger('change');
        $('#gender').select2().val(gender.toString()).trigger('change');
        $('#caste').select2().val(caste.toString()).trigger('change');
        $('#religion').select2().val(religion.toString()).trigger('change');
        $('#occupation').select2().val(occupation.toString()).trigger('change');
        $('#family_income').select2().val(family_income.toString()).trigger('change');
        $('#differently_abled').select2().val(differently_abled.toString()).trigger('change');

        if (district) {
            var setDistrict = function() {
                if ($('#district option[value="' + district + '"]').length) {
                    $('#district').val(district.toString()).trigger('change');
                } else {
                    setTimeout(setDistrict, 100); // Try again after 100ms
                }
            };
            setDistrict();
        }

        if (project) {
            var setProject = function() {
                if ($('#project option[value="' + project + '"]').length) {
                    $('#project').val(project.toString()).trigger('change');
                } else {
                    setTimeout(setProject, 100); // Try again after 100ms
                }
            };
            setProject();
        }


        var date = $('#from_date').attr('data-value');
        date = moment(date, "MMMM D, YYYY");
        const iso = date.format("YYYY-MM-DD");
        $('#from_date').val(iso);
    })

    $(document).on('change', '#program_type', function() {
        var program_type_id = $(this).val();
        $.ajax({
            url: getUrl('/program-department/projects/'+program_type_id),
            type: 'GET',
            success: function(data) {
                $('#project').html(data);
            },
            error: function(xhr, status, error) {
                console.error("Error fetching projects:", error);
            }
        });
    });


    $(document).on('change', '#state', function() {
        var state_id = $(this).val();
        $.ajax({
            url: getUrl('/country/districts/'+state_id),
            type: 'GET',
            success: function(data) {
                $('#district').html(data);
            },
            error: function(xhr, status, error) {
                console.error("Error fetching districts:", error);
            }
        });
    });

    $(document).on('change', '#project', function() {
        var project_id = $(this).val();
        if (!project_id || project_id === 'All') {
            $('#custom_fields_container').html('');
            return;
        }
        $.ajax({
            url: getUrl('/program-department/project/'+project_id+'/custom-fields'),
            type: 'GET',
            success: function(data) {
                $('#custom_fields_container').html(data);
            },
            error: function(xhr, status, error) {
                console.error("Error fetching custom fields:", error);
            }
        });
    });

</script>

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

{% endblock %}