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

            </div>
        </div>
		<!-- test -->
        <div class="wrapper wrapper-content animated fadeInRight">
            <div class="row">

                <form class="form-horizontal" action="/demo/finance-department/edit-income/{{income.id}}" method="post" enctype="multipart/form-data">
                    {% csrf_token %}
                    <div class="col-lg-12">
                        <div class="ibox">
                            <div class="ibox-content">
                                <div class="row">
                                    <div class="col-4">
                                        <div class="form-group d-flex flex-column">
                                            <label>Type of Income *</label> 
                                            <select data-placeholder="" data-value="{{income.income_type}}" id="income_type" name="income_type" class="select2 form-control"  tabindex="-1" required>
                                                <option value=""></option>
                                                <option value="Individual Person Donation">Individual Person Donation</option>
                                                <option value="Sub Grant">Sub Grant</option>
                                                <option value="Contract">Contract</option>
                                                <option value="CSR">CSR</option>
                                                <option value="Govt. Funds">Govt. Funds</option>
                                                <option value="Training Fees">Training Fees</option>
                                                <option value="Other">Other</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group d-flex flex-column">
                                            <label>Type Of Donation *</label> 
                                            <select data-placeholder="" data-value="{{income.donation_type}}" id="donation_type" name="donation_type" class="select2 form-control"  tabindex="-1" required>
                                                <option value=""></option>
                                                <option value="General Donations">General Donations</option>
                                                <option value="Corpus Donations">Corpus Donations</option>
                                                <option value="Anonymous Donations">Anonymous Donations</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group">
                                            <label>Name of Donor / Organisation *</label>
                                            <input type="text" value="{{income.donor}}" name="donor" placeholder="" id="exampleInputEmail2" class="form-control" required>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group">
                                            <label>Email Id *</label>
                                            <input type="email" value="{{income.email}}" name="email" placeholder="" id="exampleInputEmail2" class="form-control" required>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group">
                                            <label>Contact Number *</label>
                                            <input type="text" value="{{income.mobile}}" name="mobile" placeholder="" id="exampleInputEmail2" class="form-control" required>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group">
                                            <label>Aadhar Number</label>
                                            <input type="text" value="{{income.aadhar_no}}" name="aadhar_no" placeholder="" id="exampleInputEmail2" class="form-control" required>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group">
                                            <label>Pan Number</label>
                                            <input type="pan_no" value="{{income.pan_no}}" name="pan_no" placeholder="" id="exampleInputEmail2" class="form-control" required>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group">
                                            <label>Sanction Amount *</label>
                                            <input type="number" value="{{income.sanction_amount}}" name="sanction_amount" placeholder="" id="exampleInputEmail2" class="form-control" required>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group">
                                            <label>Received Amount *</label>
                                            <input type="number" value="{{income.received_amount}}" name="received_amount" placeholder="" id="exampleInputEmail2" class="form-control" required>
                                        </div>
                                    </div>

                                    <div class="col-4">
                                        <div class="form-group">
                                            <label>Mode of Payment*</label>
                                            <select data-placeholder="" data-value="{{income.mode_of_payment}}" id="mode_of_payment" name="mode_of_payment" class="select2 form-control"  tabindex="-1">
                                                <option value=""></option>
                                                <option value="Cash">Cash</option>
                                                <option value="Cheque">Cheque</option>
                                                <option value="Bank Transfer">Bank Transfer</option>
                                                <option value="UPI">UPI</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-4">
                                        <div class="form-group">
                                            <label>Proof of Evidence</label>
                                            <input type="file" value="" name="proof_of_evidence" placeholder="" id="exampleInputEmail2" class="form-control">
                                        </div>
                                    </div>

                                    <div class="col-4">
                                        <div class="form-group">
                                            <label>Payment Date *</label>
                                            <input type="date" data-value="{{income.payment_date}}" name="payment_date" placeholder="" id="payment_date" class="form-control">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-12 corpus_section">
                        <div class="ibox">
                            <div class="ibox-title px-2 justify-content-between d-flex align-items-center">
                                <h5>Alloted Amount</h5>
                            </div>
                            <div class="ibox-content">
                                <div class="row">
                                    <div class="col-4">
                                        <div class="form-group d-flex flex-column">
                                            <label>Human Resource *</label> 
                                            <input type="number" value="{{income.human_resource}}" name="human_resource" placeholder="" id="exampleInputEmail2" class="form-control corpus_field">
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group d-flex flex-column">
                                            <label>Camp Expenses *</label> 
                                            <input type="number" value="{{income.camp_expenses}}" name="camp_expenses" placeholder="" id="exampleInputEmail2" class="form-control corpus_field">
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group">
                                            <label>Training & Capacity Building Expenses *</label>
                                            <input type="number" value="{{income.training_expenses}}" name="training_expenses" placeholder="" id="exampleInputEmail2" class="form-control corpus_field">
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group">
                                            <label>Equipment & Suplies *</label>
                                            <input type="number" value="{{income.equipment_expenses}}" name="equipment_expenses" placeholder="" id="exampleInputEmail2" class="form-control corpus_field">
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group">
                                            <label>Travel Expenses *</label>
                                            <input type="number" value="{{income.travel_expenses}}" name="travel_expenses" placeholder="" id="exampleInputEmail2" class="form-control corpus_field">
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group">
                                            <label>IEC Material Expenses *</label>
                                            <input type="number" value="{{income.material_expences}}" name="material_expences" placeholder="" id="exampleInputEmail2" class="form-control corpus_field">
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group">
                                            <label>Administrative Expenses *</label>
                                            <input type="number" value="{{income.administrative_expenses}}" name="administrative_expenses" placeholder="" id="exampleInputEmail2" class="form-control corpus_field">
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group">
                                            <label>Accomondation Expenses *</label>
                                            <input type="number" value="{{income.accomodation_expenses}}" name="accomodation_expenses" placeholder="" id="exampleInputEmail2" class="form-control corpus_field">
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group">
                                            <label>Monitoring & Evaluation Expenses *</label>
                                            <input type="number" value="{{income.monitoring_expenses}}" name="monitoring_expenses" placeholder="" id="exampleInputEmail2" class="form-control corpus_field">
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group">
                                            <label>Miscellaneous Expenses *</label>
                                            <input type="number" value="{{income.miscellaneous_expenses}}" name="miscellaneous_expenses" placeholder="" id="exampleInputEmail2" class="form-control corpus_field">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-12 corpus_section">
                        <div class="ibox">
                            <div class="ibox-title px-2 justify-content-between d-flex align-items-center">
                                <h5>Alloted Target</h5>
                            </div>
                            <div class="ibox-content">
                                <div class="row">
                                    <div class="col-12">
                                        <table class="table table-bordered">
                                            <thead>
                                                <tr>
                                                    <th>Target Name</th>
                                                    <th>Target No</th>
                                                    <th><button type="button" id="add_target" class="btn btn-w-s btn-primary"> Add </button></th>
                                                </tr>
                                            </thead>
                                            <tbody id="targets">

                                                {% for target in income.alloted_targets.all %}
                                                    <tr>
                                                        <td>
                                                            <div class="form-group d-flex flex-column">
                                                                <input type="text" value="{{target.target_name}}" name="target_names" placeholder="" id="exampleInputEmail2" class="form-control corpus_field">
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <div class="form-group d-flex flex-column">
                                                                <input type="number" value="{{target.target_number}}" name="target_numbers" placeholder="" id="exampleInputEmail2" class="form-control corpus_field">
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <button type="button" class="btn btn-w-s btn-danger delete_target"> Delete </button>
                                                        </td>
                                                    </tr>
                                                {% endfor %}
                                            </tbody>
                                        </table>
                                    </div>

                                    <div class="col-3">
                                        <div class="form-group">
                                            <label>Number of Installment *</label>
                                            <input type="number" value="{{income.no_of_installments}}" name="no_of_installments" placeholder="" id="exampleInputEmail2" class="form-control corpus_field">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-12 corpus_section">
                        <div class="ibox">
                            <div class="ibox-title px-2 justify-content-between d-flex align-items-center">
                                <h5>Project</h5>
                            </div>
                            <div class="ibox-content">
                                <div class="row">
                                    <div class="col-4">
                                        <div class="form-group d-flex flex-column">
                                            <label>Program type*</label> 
                                            <select data-placeholder="" data-value="{{income.program_type_id}}" id="program_type" name="program_type" class="select2 form-control corpus_field"  tabindex="-1">
                                                <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="{{income.project_id}}" id="project" name="project" style="width : 100%" class="select2 form-control corpus_field"  tabindex="-1">
                                                
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group d-flex flex-column">
                                            <label>State *</label>
                                            <select data-placeholder="" data-value="{{income.state_id}}" id="state" name="state" class="select2 form-control corpus_field"  style="width : 100%" tabindex="-1">
                                                <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="{{income.district_id}}" id="district" name="district" class="select2 form-control corpus_field"  tabindex="-1">
                                                
                                            </select>
                                        </div>
                                    </div>
                                    
                                    <div class="col-4">
                                        <div class="form-group">
                                            <label>Start Date *</label>
                                            <input type="date" data-value="{{income.start_date}}" name="start_date" placeholder="" id="start_date" class="form-control corpus_field">
                                        </div>
                                    </div>

                                    <div class="col-4">
                                        <div class="form-group">
                                            <label>End Date *</label>
                                            <input type="date" data-value="{{income.end_date}}" name="end_date" placeholder="" id="end_date" class="form-control corpus_field">
                                        </div>
                                    </div>

                                    <div class="col-6">
                                        <div class="form-group">
                                            <label>Address *</label>
                                            <textarea class="form-control corpus_field" name="address">{{income.address}}</textarea>
                                        </div>
                                    </div>

                                    <div class="col-6">
                                        <div class="form-group">
                                            <label>Message (optional)</label>
                                            <textarea class="form-control corpus_field" name="message">{{income.message}}</textarea>
                                        </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>
        </div>
	</div>
</div>

<script>

    $('.select2').select2({})

     $(document).ready(function(){
        $('.corpus_section').hide();
        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 income_type = $('#income_type').attr('data-value');
        var donation_type = $('#donation_type').attr('data-value');
        var mode_of_payment = $('#mode_of_payment').attr('data-value');
        
        $('#program_type').select2().val(program_type_id.toString()).trigger('change');
        $('#state').select2().val(state.toString()).trigger('change');      
        $('#income_type').select2().val(income_type.toString()).trigger('change');        
        $('#donation_type').select2().val(donation_type.toString()).trigger('change');
        $('#mode_of_payment').select2().val(mode_of_payment.toString()).trigger('change');   
        // Set date value for input type="date" (ensure format is yyyy-MM-dd using moment.js)
        

        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 start_date = $('#start_date').attr('data-value');
        var date = moment(start_date, "MMMM D, YYYY");
        const iso_start = date.format("YYYY-MM-DD");
        $('#start_date').val(iso_start);

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


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

        if(donation_type === 'Corpus Donations') {
            $('.corpus_section').show();
        } 
        else {
            $('.corpus_section').hide();
        }


    })


    $(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', '#donation_type', function() {
        var donation_type = $(this).val();
        if(donation_type === 'Corpus Donations') {
            $('.corpus_section').show();
            var html =  '<tr>'+
                        '<td>'+
                            '<div class="form-group d-flex flex-column">'+
                                '<input type="text" name="target_names" placeholder="" id="exampleInputEmail2" class="form-control corpus_field">'+
                            '</div>'+
                        '</td>'+
                        '<td>'+
                            '<div class="form-group d-flex flex-column">'+
                                '<input type="number" name="target_numbers" placeholder="" id="exampleInputEmail2" class="form-control corpus_field">'+
                            '</div>'+
                        '</td>'+
                        '<td>'+
                            '<button type="button" class="btn btn-w-s btn-danger delete_target"> Delete </button>'+
                        '</td>'+
                    '</tr>';
            $('#targets').html(html);
        } 
        else {
            $('.corpus_section').hide();
            $('.corpus_field').val("");
            $('#targets').html("");
        }
    });


    $(document).on('click', '#add_target', function(){
        var html =  '<tr>'+
                        '<td>'+
                            '<div class="form-group d-flex flex-column">'+
                                '<input type="text" name="target_names" placeholder="" id="exampleInputEmail2" class="form-control corpus_field">'+
                            '</div>'+
                        '</td>'+
                        '<td>'+
                            '<div class="form-group d-flex flex-column">'+
                                '<input type="number" name="target_numbers" placeholder="" id="exampleInputEmail2" class="form-control corpus_field">'+
                            '</div>'+
                        '</td>'+
                        '<td>'+
                            '<button type="button" class="btn btn-w-s btn-danger delete_target"> Delete </button>'+
                        '</td>'+
                    '</tr>';
        $('#targets').append(html);
    });


    $(document).on('click', '.delete_target', function(){
        $(this).closest('tr').remove();
    })

</script>

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

{% endblock %}