{% 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>Add Expenditure</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/add-expenditure" 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>Date Of Expense *</label> 
                                            <input type="date" name="expence_date" placeholder="" id="exampleInputEmail2" class="form-control" required>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group d-flex flex-column">
                                            <label>Sector of Expenses *</label> 
                                            <select data-placeholder="" id="sector_of_expence" name="sector_of_expence" class="select2 form-control"  tabindex="-1" required>
                                                <option value=""></option>
                                                <option value="Project Based">Project Based</option>
                                                <option value="Office Expenses">Office Expenses</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group d-flex flex-column">
                                            <label>Type Of Payment *</label> 
                                            <select data-placeholder="" id="payment_type" name="payment_type" class="select2 form-control"  tabindex="-1" required>
                                                <option value=""></option>
                                                <option value="Direct">Direct</option>
                                                <option value="Reimubersment">Reimubersment</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-4 project_container">
                                        <div class="form-group d-flex flex-column">
                                            <label>Project</label> 
                                            <select data-placeholder="" id="project" name="project" class="select2 form-control"  tabindex="-1">
                                                <option value=""></option>
                                                {% for project in projects %}
                                                    <option value="{{project.id}}">{{project.project}}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-4 administrative_container">
                                        <div class="form-group d-flex flex-column">
                                            <label>Adminstrative Expenses</label> 
                                            <select data-placeholder="" id="administrative_expense" name="administrative_expense" class="select2 form-control"  tabindex="-1">
                                                <option value=""></option>
                                                <option value="Food Beverage">Food Beverage</option>
                                                <option value="Rent">Rent</option>
                                                <option value="Utilities">Utilities</option>
                                                <option value="Insurance">Insurance</option>
                                                <option value="Wages Salaries">Wages Salaries</option>
                                                <option value="Office Fistures Equipment">Office Fistures Equipment</option>
                                                <option value="Legal Finance Service Fees">Legal Finance Service Fees</option>
                                                <option value="Office Suplies">Office Suplies</option>
                                                <option value="Travel">Travel</option>
                                                <option value="IT Service">IT Service</option>
                                                <option value="Licence Subscriptions">Licence Subscriptions</option>
                                                <option value="Bank Charges">Bank Charges</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-4">
                                        <div class="form-group d-flex flex-column">
                                            <label>Member / Vendor*</label> 
                                            <select data-placeholder="" id="member_or_vendor" name="member_or_vendor" class="select2 form-control"  tabindex="-1" required>
                                                <option value=""></option>
                                                <option value="0">Member</option>
                                                <option value="1">Vendor</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-4" id="member_container">
                                        <div class="form-group d-flex flex-column">
                                            <label>Team Member*</label> 
                                            <select data-placeholder="" id="team" name="team" class="select2 form-control"  tabindex="-1">
                                                <option value="" pan=""></option>
                                                {% for member in team_members %}
                                                    <option value="{{member.id}}" pan="{{member.pan_no}}">{{member.name}}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-4" id="vendor_container">
                                        <div class="form-group d-flex flex-column">
                                            <label>Vendor*</label> 
                                            <select data-placeholder="" id="vendor" name="vendor" class="select2 form-control"  tabindex="-1">
                                                <option value="" pan=""></option>
                                                {% for vendor in vendors %}
                                                    <option value="{{vendor.id}}" pan="{{vendor.pan_no}}">{{vendor.name}}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-4">
                                        <div class="form-group">
                                            <label>Pan no.</label>
                                            <input type="text" name="pan_no" placeholder="" id="pan_no" class="form-control">
                                        </div>
                                    </div>

                                    <div class="col-4">
                                        <div class="form-group d-flex flex-column">
                                            <label>Mode Of Payment</label> 
                                            <select id="other_payment_mode" name="other_payment_mode" class="select2 form-control"  tabindex="-1">
                                                <option value=""></option>
                                                <option value="Online">Online</option>
                                                <option value="Offline">Offline</option>
                                            </select>
                                        </div>
                                    </div>
                                    
                                    <div class="col-4">
                                        <div class="form-group">
                                            <label>Invoice</label>
                                            <input type="file" name="other_invoice" placeholder="" id="exampleInputEmail2" class="form-control">
                                        </div>
                                    </div>

                                    <div class="col-4">
                                        <div class="form-group">
                                            <label>Proof Of Payment</label>
                                            <input type="file" name="other_payment_proof" placeholder="" id="exampleInputEmail2" class="form-control">
                                        </div>
                                    </div>
                                </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">
                                <h5>Human Resource</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> 
                                            <select data-placeholder="" id="human_resource" name="human_resource" class="select2 form-control"  tabindex="-1">
                                                <option value=""></option>
                                                <option value="Salary">Salary</option>
                                                <option value="Honorarium">Honorarium</option>
                                                <option value="Stipend">Stipend</option>
                                                <option value="Advance">Advance</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group d-flex flex-column">
                                            <label>Date Of Expense</label> 
                                            <input type="date" name="hr_expence_date" placeholder="" id="exampleInputEmail2" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group">
                                            <label>Amount</label>
                                            <input type="number" name="hr_amount" placeholder="" id="hr_amount" class="form-control hr_amount_section sub_total">
                                        </div>
                                    </div>
                                    <div class="col-4 direct">
                                        <div class="form-group">
                                            <label>Section</label>
                                            <input type="text" name="hr_section" placeholder="" id="exampleInputEmail2" class="form-control direct_field">
                                        </div>
                                    </div>
                                    <div class="col-4 direct">
                                        <div class="form-group">
                                            <label>TDS Deduction %</label>
                                            <input type="number" name="hr_tds_deduction"  placeholder="" id="hr_tds_deduction" class="form-control hr_amount_section direct_field sub_total">
                                        </div>
                                    </div>
                                    <div class="col-4 direct">
                                        <div class="form-group">
                                            <label>TDS Deduction Amount</label>
                                            <input type="number"  placeholder="" disabled id="hr_tds_deduction_amount" class="form-control direct_field">
                                        </div>
                                    </div>
                                    <div class="col-4 direct">
                                        <div class="form-group">
                                            <label>TDS Deduction Date</label>
                                            <input type="date" name="hr_tds_deduction_date" placeholder="" id="exampleInputEmail2" class="form-control direct_field">
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group d-flex flex-column">
                                            <label>Total</label> 
                                            <input type="number" id="hr_total" disabled  placeholder="" class="form-control">
                                        </div>
                                    </div>
                                </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">
                                <h5>Equipment & and Suplies</h5>
                            </div>
                            <div class="ibox-content">
                                <div class="row">
                                    <div class="col-4">
                                        <div class="form-group d-flex flex-column">
                                            <label>Date Of Expense</label> 
                                            <input type="date" name="equipment_expence_date" placeholder="" id="exampleInputEmail2" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group">
                                            <label>Amount</label>
                                            <input type="number" name="equipment_amount" placeholder="" id="equipment_amount" class="form-control equipment_amount_section sub_total">
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group d-flex flex-column">
                                            <label>Supplier Name</label> 
                                            <input type="text" name="equipment_supplier_name" placeholder="" id="exampleInputEmail2" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-4 direct">
                                        <div class="form-group">
                                            <label>Section</label>
                                            <input type="text" name="equipment_section" placeholder="" id="exampleInputEmail2" class="form-control direct_field">
                                        </div>
                                    </div>
                                    <div class="col-4 direct">
                                        <div class="form-group">
                                            <label>TDS Deduction %</label>
                                            <input type="number" name="equipment_tds_deduction" placeholder="" id="equipment_tds_deduction" class="form-control equipment_amount_section direct_field sub_total">
                                        </div>
                                    </div>
                                    <div class="col-4 direct">
                                        <div class="form-group">
                                            <label>TDS Deduction Amount</label>
                                            <input type="number"  placeholder="" disabled id="equipment_tds_deduction_amount" class="form-control direct_field">
                                        </div>
                                    </div>
                                    <div class="col-4 direct">
                                        <div class="form-group">
                                            <label>TDS Deduction Date</label>
                                            <input type="date" name="equipment_tds_deduction_date" placeholder="" id="exampleInputEmail2" class="form-control direct_field">
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group d-flex flex-column">
                                            <label>Total</label> 
                                            <input type="number" id="equipment_total" disabled  placeholder="" class="form-control">
                                        </div>
                                    </div>
                                </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">
                                <h5>Travel Expenses</h5>
                                <button type="button" class="btn btn-w-s btn-primary add_travel"> Add </button>
                            </div>
                            <div class="ibox-content">
                                <div class="row">

                                    <div class="col-12 travel-table">
                                        <table id="travel_table_1" class="table table-striped table-bordered">
                                            <tbody>
                                                <tr>
                                                    <td>Date</td>
                                                    <td>Departure</td>
                                                    <td>Arrival</td>
                                                    <td>Mode</td>
                                                    <td>Amount</td>
                                                </tr>
                                                <tr>
                                                    <td><input type="date" name="travel_expence_date" placeholder="" id="exampleInputEmail2" class="form-control"></td>
                                                    <td><input type="text" name="departure" placeholder="" id="exampleInputEmail2" class="form-control"></td>
                                                    <td><input type="text" name="arrival" placeholder="" id="exampleInputEmail2" class="form-control"></td>
                                                    <td><select id="mode_of_travel" name="mode_of_travel" class="select2 form-control"  tabindex="-1">
                                                            <option value=""></option>
                                                            <option value="Air">Air</option>
                                                            <option value="Train">Train</option>
                                                            <option value="Metro">Metro</option>
                                                            <option value="Cabs/Taxi">Cabs/Taxi</option>
                                                            <option value="Auto">Auto</option>
                                                            <option value="Other">Other</option>
                                                        </select>
                                                    </td>
                                                    <td><input type="number" data-id='1' id="travel_amount_1" name="travel_amount" placeholder="" class="form-control travel_amount travel_amount_section sub_total"></td>
                                                </tr>
                                                <tr>
                                                    <td class="direct">Section</td>
                                                    <td class="direct">TDS Deduction Date</td>
                                                    <td class="direct">TDS Deduction %</td>
                                                    <td class="direct">TDS Deduction Amount</td>
                                                    <td class="direct">Total</td>
                                                </tr>
                                                <tr>
                                                    <td class="direct"><input type="text" name="travel_section" placeholder="" id="exampleInputEmail2" class="form-control direct_field"></td>
                                                    <td class="direct"><input type="date" name="travel_tds_deduction_date" placeholder="" id="exampleInputEmail2" class="form-control direct_field"></td>
                                                    <td class="direct"><input type="number" data-id='1' id="travel_tds_deduction_1" name="travel_tds_deduction" placeholder="" class="form-control travel_amount_section direct_field sub_total"></td>
                                                    <td class="direct"><input type="number" placeholder="" disabled id="travel_tds_deduction_amount_1" class="form-control direct_field"></td>
                                                    <td class="direct"><input type="number" disabled  id="travel_total_1" placeholder="" class="form-control travel_total"></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </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">
                                <h5>IEC Materials Expenses</h5>
                            </div>
                            <div class="ibox-content">
                                <div class="row">
                                    <div class="col-4">
                                        <div class="form-group d-flex flex-column">
                                            <label>Date Of Expense</label> 
                                            <input type="date" name="iec_expence_date" placeholder="" id="exampleInputEmail2" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group">
                                            <label>Item</label>
                                            <select id="item" name="item" class="select2 form-control"  tabindex="-1">
                                                <option value=""></option>
                                                <option value="Pamphlets / Flyers">Pamphlets / Flyers</option>
                                                <option value="Posters / Banners">Posters / Banners</option>
                                                <option value="Brochures / Booklets">Brochures / Booklets</option>
                                                <option value="T-Shirts / Caps">T-Shirts / Caps</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group">
                                            <label>Quantity</label>
                                            <input type="text" name="quantity" placeholder="" id="exampleInputEmail2" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group d-flex flex-column">
                                            <label>Rate / Unit</label> 
                                            <input type="text" name="rate" placeholder="" id="exampleInputEmail2" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group d-flex flex-column">
                                            <label>Total Cost</label> 
                                            <input type="text" name="iec_amount" placeholder="" id="iec_cost" class="form-control iec_amount_section sub_total">
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group">
                                            <label>Remarks</label>
                                            <input type="text" name="iec_remarks" placeholder="" id="exampleInputEmail2" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-4 direct">
                                        <div class="form-group">
                                            <label>Section</label>
                                            <input type="text" name="iec_section" placeholder="" id="exampleInputEmail2" class="form-control direct_field">
                                        </div>
                                    </div>
                                    <div class="col-4 direct">
                                        <div class="form-group">
                                            <label>TDS Deduction %</label>
                                            <input type="number" name="iec_tds_deduction" placeholder="" id="iec_tds_deduction" class="form-control iec_amount_section direct_field sub_total">
                                        </div>
                                    </div>
                                    <div class="col-4 direct">
                                        <div class="form-group">
                                            <label>TDS Deduction Amount</label>
                                            <input type="number"  placeholder="" disabled id="iec_tds_deduction_amount" class="form-control direct_field">
                                        </div>
                                    </div>
                                    <div class="col-4 direct">
                                        <div class="form-group">
                                            <label>TDS Deduction Date</label>
                                            <input type="date" name="iec_tds_deduction_date" placeholder="" id="exampleInputEmail2" class="form-control direct_field">
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group d-flex flex-column">
                                            <label>Total</label> 
                                            <input type="number" id="iec_total" disabled  placeholder="" class="form-control">
                                        </div>
                                    </div>
                                </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">
                                <h5>Accomodation Expenses</h5>
                            </div>
                            <div class="ibox-content">
                                <div class="row">
                                    <div class="col-4">
                                        <div class="form-group d-flex flex-column">
                                            <label>Date </label> 
                                            <input type="date" name="accommodation_expence_date" placeholder="" id="exampleInputEmail2" class="form-control">
                                        </div>
                                    </div>
                                    
                                    <div class="col-4">
                                        <div class="form-group">
                                            <label>Check In</label>
                                            <input type="text" name="accommodation_check_in" placeholder="" id="exampleInputEmail2" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group d-flex flex-column">
                                            <label>Check Out</label> 
                                            <input type="text" name="accommodation_check_out" placeholder="" id="exampleInputEmail2" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group d-flex flex-column">
                                            <label>No. Of Days</label> 
                                            <input type="text" name="no_of_days" placeholder="" id="exampleInputEmail2" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group">
                                            <label>Amount</label>
                                            <input type="number" name="accommodation_amount" placeholder="" id="accommodation_amount" class="form-control accommodation_amount_section sub_total">
                                        </div>
                                    </div>
                                    <div class="col-4 direct">
                                        <div class="form-group">
                                            <label>Section</label>
                                            <input type="text" name="accommodation_section" placeholder="" id="exampleInputEmail2" class="form-control direct_field">
                                        </div>
                                    </div>
                                    <div class="col-4 direct">
                                        <div class="form-group">
                                            <label>TDS Deduction %</label>
                                            <input type="number" name="accommodation_tds_deduction" placeholder="" id="accommodation_tds_deduction" class="form-control accommodation_amount_section direct_field sub_total">
                                        </div>
                                    </div>
                                    <div class="col-4 direct">
                                        <div class="form-group">
                                            <label>TDS Deduction Amount</label>
                                            <input type="number"  placeholder="" disabled id="accommodation_tds_deduction_amount" class="form-control direct_field">
                                        </div>
                                    </div>
                                    <div class="col-4 direct">
                                        <div class="form-group">
                                            <label>TDS Deduction Date</label>
                                            <input type="date" name="accommodation_tds_deduction_date" placeholder="" id="exampleInputEmail2" class="form-control direct_field">
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group d-flex flex-column">
                                            <label>Total</label> 
                                            <input type="number" id="accommodation_total" disabled  placeholder="" class="form-control">
                                        </div>
                                    </div>
                                </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">
                                <h5>Miscellaneous Expenses</h5>
                            </div>
                            <div class="ibox-content">
                                <div class="row">
                                    <div class="col-4">
                                        <div class="form-group d-flex flex-column">
                                            <label>Date Of Expense </label> 
                                            <input type="date" name="miscellaneous_expence_date" placeholder="" id="exampleInputEmail2" class="form-control">
                                        </div>
                                    </div>
                                    
                                    <div class="col-4">
                                        <div class="form-group">
                                            <label>Other</label>
                                            <input type="text" name="miscellaneous_other" placeholder="" id="exampleInputEmail2" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group d-flex flex-column">
                                            <label>Remarks</label> 
                                            <input type="text" name="miscellaneous_remarks" placeholder="" id="exampleInputEmail2" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group">
                                            <label>Amount</label>
                                            <input type="number" name="miscellaneous_amount" placeholder="" id="miscellaneous_amount" class="form-control miscellaneous_amount_section sub_total">
                                        </div>
                                    </div>
                                    <div class="col-4 direct">
                                        <div class="form-group">
                                            <label>Section</label>
                                            <input type="text" name="miscellaneous_section" placeholder="" id="exampleInputEmail2" class="form-control direct_field">
                                        </div>
                                    </div>
                                    <div class="col-4 direct">
                                        <div class="form-group">
                                            <label>TDS Deduction %</label>
                                            <input type="number" name="miscellaneous_tds_deduction" placeholder="" id="miscellaneous_tds_deduction" class="form-control miscellaneous_amount_section direct_field sub_total">
                                        </div>
                                    </div>
                                    <div class="col-4 direct">
                                        <div class="form-group">
                                            <label>TDS Deduction Amount</label>
                                            <input type="number"  placeholder="" disabled id="miscellaneous_tds_deduction_amount" class="form-control direct_field">
                                        </div>
                                    </div>
                                    <div class="col-4 direct">
                                        <div class="form-group">
                                            <label>TDS Deduction Date</label>
                                            <input type="date" name="miscellaneous_tds_deduction_date" placeholder="" id="exampleInputEmail2" class="form-control direct_field">
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group d-flex flex-column">
                                            <label>Total</label> 
                                            <input type="number" id="miscellaneous_total" disabled  placeholder="" class="form-control">
                                        </div>
                                    </div>
                                    
                                    <div class="col-12">
                                        <div class="form-group">
                                            <label>Description</label>
                                            <textarea name="miscellaneous_description" placeholder="" id="exampleInputEmail2" class="form-control"></textarea>
                                        </div>
                                    </div>
                                    
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-12 office_expense">
                        <div class="ibox">
                            <div class="ibox-title px-2 justify-content-between d-flex align-items-center">
                                <h5>Other Expense</h5>
                            </div>
                            <div class="ibox-content">
                                <div class="row">
                                    <div class="col-4">
                                        <div class="form-group d-flex flex-column">
                                            <label>Date Of Expense</label> 
                                            <input type="date" name="office_expence_date" placeholder="" id="exampleInputEmail2" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group">
                                            <label>Amount</label>
                                            <input type="number" name="office_expence_amount" placeholder="" id="office_expence_amount" class="form-control office_expence_amount_section sub_total">
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group d-flex flex-column">
                                            <label>Supplier Name</label> 
                                            <input type="text" name="office_expence_supplier_name" placeholder="" id="exampleInputEmail2" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-4 direct">
                                        <div class="form-group">
                                            <label>Section</label>
                                            <input type="text" name="office_expence_section" placeholder="" id="exampleInputEmail2" class="form-control direct_field">
                                        </div>
                                    </div>
                                    <div class="col-4 direct">
                                        <div class="form-group">
                                            <label>TDS Deduction %</label>
                                            <input type="number" name="office_expence_tds_deduction" placeholder="" id="office_expence_tds_deduction" class="form-control office_expence_amount_section direct_field sub_total">
                                        </div>
                                    </div>
                                    <div class="col-4 direct">
                                        <div class="form-group">
                                            <label>TDS Deduction Amount</label>
                                            <input type="number"  placeholder="" disabled id="office_expence_tds_deduction_amount" class="form-control direct_field">
                                        </div>
                                    </div>
                                    <div class="col-4 direct">
                                        <div class="form-group">
                                            <label>TDS Deduction Date</label>
                                            <input type="date" name="office_expence_tds_deduction_date" placeholder="" id="exampleInputEmail2" class="form-control direct_field">
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group d-flex flex-column">
                                            <label>Total</label> 
                                            <input type="number" id="office_expence_total" disabled  placeholder="" class="form-control">
                                        </div>
                                    </div>
                                </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">
                                <h5>Total</h5>
                            </div>
                            <div class="ibox-content">
                                <div class="row">              
                                    <div class="col-3">
                                        <div class="form-group d-flex flex-column">
                                            <label>Sub Total Amount</label> 
                                            <input type="number" disabled placeholder="" id="sub_total_amount" class="form-control">
                                        </div>
                                    </div>

                                    <div class="col-3">
                                        <div class="form-group d-flex flex-column">
                                            <label>Advance</label> 
                                            <input type="number" name="advance" placeholder="" id="advance" class="form-control sub_total">
                                        </div>
                                    </div>

                                    <div class="col-3">
                                        <div class="form-group d-flex flex-column">
                                            <label>Net Amount</label> 
                                            <input type="number" disabled placeholder="" id="net_amount" class="form-control">
                                        </div>
                                    </div>

                                    <div class="col-3">
                                        <div class="form-group d-flex flex-column">
                                            <label>Payment Status</label>
                                            <select data-placeholder="" id="payment_status" name="payment_status" class="select2 form-control"  tabindex="-1" required>
                                                <option value="0">Pending</option>
                                                <option value="1">Completed</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-3">
                                        <div class="form-group d-flex flex-column">
                                            <label>Assets</label>
                                            <select data-placeholder="" id="assets" name="assets" class="select2 form-control"  tabindex="-1" required>
                                                <option value="0">No</option>
                                                <option value="1">Yes</option>
                                            </select>
                                        </div>
                                    </div>
                                    
                                    <div class="col-12">
                                        <div class="form-group">
                                            <label>Description</label>
                                            <textarea name="description" placeholder="" id="exampleInputEmail2" class="form-control"></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>

    var travel_counter = 1

    var travel_array = [1]

    $(document).ready(function(){
        $('.project_container').hide();
        $('.administrative_container').hide();
        $('.office_expense').hide();
        $('#member_container').hide();
        $('#vendor_container').hide();
    });


    $(document).on('change', '#sector_of_expence', function() {
        var sector_of_expence = $(this).val();
        if(sector_of_expence == 'Project Based'){
            $('.project_container').show();
            $('.administrative_container').hide();
            $('#administrative_expense').val("").trigger('change');
            $('.office_expense').hide()
        }
        else{
            $('.administrative_container').show();
            $('.project_container').hide();
            $('#project').val("").trigger('change');
            $('.office_expense').show()
        }
    });



    $(document).on('change', '#payment_type', function() {
        var payment_type = $(this).val();
        if(payment_type == 'Direct'){
            $('.direct').show();
        }
        else{
            $('.direct').hide();
            $('.direct_field').val("");
        }
        calculateTotal()
    });


    $(document).on('keyup', '.hr_amount_section', function(){
        var hr_amount = $('#hr_amount').val() || 0;
        var tds = $('#hr_tds_deduction').val() || 0; 
        var total_amount = 0;
        if(hr_amount > 0){
            total_amount = hr_amount - (hr_amount * tds / 100)
        }
        $('#hr_total').val(total_amount)
    });


    $(document).on('keyup', '.equipment_amount_section', function(){
        var equipment_amount = $('#equipment_amount').val() || 0;
        var tds = $('#equipment_tds_deduction').val() || 0; 
        var total_amount = 0;
        if(equipment_amount > 0){
            total_amount = equipment_amount - (equipment_amount * tds / 100)
        }
        $('#equipment_total').val(total_amount)
    });


    $(document).on('keyup', '.travel_amount_section', function(){
        var id = $(this).attr('data-id');
        var travel_amount = $('#travel_amount_'+id).val() || 0;
        var tds = $('#travel_tds_deduction_'+id).val() || 0; 
        var total_amount = 0;
        if(travel_amount > 0){
            total_amount = travel_amount - (travel_amount * tds / 100)
        }
        $('#travel_total_'+id).val(total_amount)
    });


    $(document).on('keyup', '.iec_amount_section', function(){
        var iec_amount = $('#iec_cost').val() || 0;
        var tds = $('#iec_tds_deduction').val() || 0; 
        var total_amount = 0;
        if(iec_amount > 0){
            total_amount = iec_amount - (iec_amount * tds / 100)
        }
        $('#iec_total').val(total_amount)
    });


    $(document).on('keyup', '.accommodation_amount_section', function(){
        var accommodation_amount = $('#accommodation_amount').val() || 0;
        var tds = $('#accommodation_tds_deduction').val() || 0; 
        var total_amount = 0;
        if(accommodation_amount > 0){
            total_amount = accommodation_amount - (accommodation_amount * tds / 100)
        }
        $('#accommodation_total').val(total_amount)
    });


    $(document).on('keyup', '.miscellaneous_amount_section', function(){
        var miscellaneous_amount = $('#miscellaneous_amount').val() || 0;
        var tds = $('#miscellaneous_tds_deduction').val() || 0; 
        var total_amount = 0;
        if(miscellaneous_amount > 0){
            total_amount = miscellaneous_amount - (miscellaneous_amount * tds / 100)
        }
        $('#miscellaneous_total').val(total_amount)
    });


    $(document).on('keyup', '.office_expence_amount_section', function(){
        var office_expence_amount = $('#office_expence_amount').val() || 0;
        var tds = $('#office_expence_tds_deduction').val() || 0; 
        var total_amount = 0;
        if(office_expence_amount > 0){
            total_amount = office_expence_amount - (office_expence_amount * tds / 100)
        }
        $('#office_expence_total').val(total_amount)
    });


    $(document).on('keyup', '.sub_total', function(){
        calculateTotal();
    });


    function calculateTotal(){
        var hr_amount = $('#hr_amount').val() || 0;
        var tds = $('#hr_tds_deduction').val() || 0; 
        var hr_total_amount = 0;
        if(hr_amount > 0){
            var hr_tds_deduction_amount = hr_amount * tds / 100;
            hr_total_amount = hr_amount - hr_tds_deduction_amount
            $('#hr_tds_deduction_amount').val(hr_tds_deduction_amount)
        }

        var equipment_amount = $('#equipment_amount').val() || 0;
        var tds = $('#equipment_tds_deduction').val() || 0; 
        var equipment_total_amount = 0;
        if(equipment_amount > 0){
            var equipment_tds_deduction_amount = equipment_amount * tds / 100
            equipment_total_amount = equipment_amount - equipment_tds_deduction_amount
            $('#equipment_tds_deduction_amount').val(equipment_tds_deduction_amount)
        }


        var all_travel_amount = 0
        travel_array.map((id)=>{
            var travel_amount = $('#travel_amount_'+id).val() || 0;
            var tds = $('#travel_tds_deduction_'+id).val() || 0; 
            var travel_total_amount = 0;
            if(travel_amount > 0){
                var travel_tds_deduction_amount = travel_amount * tds / 100;
                travel_total_amount = travel_amount - travel_tds_deduction_amount;
                all_travel_amount = all_travel_amount + travel_total_amount; 
                $('#travel_tds_deduction_amount_'+id).val(travel_tds_deduction_amount)
            }
        })
        

        var iec_amount = $('#iec_cost').val() || 0;
        var tds = $('#iec_tds_deduction').val() || 0; 
        var iec_total_amount = 0;
        if(iec_amount > 0){
            var iec_tds_deduction_amount = iec_amount * tds / 100;
            iec_total_amount = iec_amount - iec_tds_deduction_amount
            $('#iec_tds_deduction_amount').val(iec_tds_deduction_amount)
        }

        var accommodation_amount = $('#accommodation_amount').val() || 0;
        var tds = $('#accommodation_tds_deduction').val() || 0; 
        var accommodation_total_amount = 0;
        if(accommodation_amount > 0){
            var accommodation_tds_deduction_amount = accommodation_amount * tds / 100;
            accommodation_total_amount = accommodation_amount - accommodation_tds_deduction_amount
            $('#accommodation_tds_deduction_amount').val(accommodation_tds_deduction_amount)
        }

        var miscellaneous_amount = $('#miscellaneous_amount').val() || 0;
        var tds = $('#miscellaneous_tds_deduction').val() || 0; 
        var miscellaneous_total_amount = 0;
        if(miscellaneous_amount > 0){
            var miscellaneous_tds_deduction_amount = miscellaneous_amount * tds / 100;
            miscellaneous_total_amount = miscellaneous_amount - (miscellaneous_amount * tds / 100)
            $('#miscellaneous_tds_deduction_amount').val(miscellaneous_tds_deduction_amount)   
        }

        var office_expence_amount = $('#office_expence_amount').val() || 0;
        var tds = $('#office_expence_tds_deduction').val() || 0; 
        var office_expence_total_amount = 0;
        if(office_expence_amount > 0){
            var office_expence_tds_deduction_amount = office_expence_amount * tds / 100;
            office_expence_total_amount = office_expence_amount - (office_expence_amount * tds / 100)
            $('#office_expence_tds_deduction_amount').val(office_expence_tds_deduction_amount)   
        }

        var sub_total = hr_total_amount + equipment_total_amount + all_travel_amount + iec_total_amount + accommodation_total_amount + miscellaneous_total_amount + office_expence_total_amount

        $('#sub_total_amount').val(sub_total)

        var advance = $('#advance').val() || 0;

        $('#net_amount').val(sub_total - advance);
    }


    $(document).on('click', '.add_travel', function(){
        travel_counter = travel_counter + 1;
        travel_array.push(travel_counter);
        var html = '<table id="travel_table_'+travel_counter+'" class="table table-striped table-bordered">'+
                        '<tbody>'+
                            '<tr>'+
                                '<td>Date</td>'+
                                '<td>Departure</td>'+
                                '<td>Arrival</td>'+
                                '<td>Mode</td>'+
                                '<td>'+
                                    '<div class="justify-content-between d-flex align-items-center flex-row">'+
                                        'Amount'+
                                        '<button type="button" data-id='+travel_counter+' class="btn btn-w-s btn-danger delete_travel"> Delete </button>'+
                                    '</div>'+
                                '</td>'+
                            '</tr>'+
                            '<tr>'+
                                '<td><input type="date" name="travel_expence_date" placeholder="" id="exampleInputEmail2" class="form-control"></td>'+
                                '<td><input type="text" name="departure" placeholder="" id="exampleInputEmail2" class="form-control"></td>'+
                                '<td><input type="text" name="arrival" placeholder="" id="exampleInputEmail2" class="form-control"></td>'+
                                '<td><select id="mode_of_travel" name="mode_of_travel" class="select2 form-control"  tabindex="-1">'+
                                    '<option value=""></option>'+
                                    '<option value="Air">Air</option>'+
                                    '<option value="Train">Train</option>'+
                                    '<option value="Metro">Metro</option>'+
                                    '<option value="Cabs/Taxi">Cabs/Taxi</option>'+
                                    '<option value="Auto">Auto</option>'+
                                    '<option value="Other">Other</option>'+
                                    '</select>'+
                                '</td>'+
                                '<td><input type="number" data-id='+travel_counter+' id="travel_amount_'+travel_counter+'" name="travel_amount" placeholder="" class="form-control travel_amount travel_amount_section sub_total"></td>'+
                            '</tr>'+
                            '<tr>'+
                                '<td class="direct">Section</td>'+
                                '<td class="direct">TDS Deduction Date</td>'+
                                '<td class="direct">TDS Deduction %</td>'+
                                '<td class="direct">TDS Deduction Amount</td>'+
                                '<td class="direct">Total</td>'+
                            '</tr>'+
                            '<tr>'+
                                '<td class="direct"><input type="text" name="travel_section" placeholder="" id="exampleInputEmail2" class="form-control direct_field"></td>'+
                                '<td class="direct"><input type="date" name="travel_tds_deduction_date" placeholder="" id="exampleInputEmail2" class="form-control direct_field"></td>'+
                                '<td class="direct"><input type="number" data-id='+travel_counter+' id="travel_tds_deduction_'+travel_counter+'" name="travel_tds_deduction" placeholder="" class="form-control travel_amount_section direct_field sub_total"></td>'+
                                '<td class="direct"><input type="number" placeholder="" disabled id="travel_tds_deduction_amount_'+travel_counter+'" class="form-control direct_field"></td>'+
                                '<td class="direct"><input type="number" disabled  id="travel_total_'+travel_counter+'" placeholder="" class="form-control travel_total"></td>'+
                            '</tr>'+
                        '</tbody>'+
                    '</table>';

            $('.travel-table').append(html)
    });
    

    $(document).on('click', '.delete_travel', function(e){
        var id = $(this).attr('data-id');
        $('#travel_table_'+id).remove();
        var index = travel_array.indexOf(parseInt(id));
        travel_array.splice(index, 1);
        calculateTotal();
    });

    
    $('#team').on('change', function() {
        var selected = $(this).find(':selected');
        $('#pan_no').val(selected.attr('pan'));
    });


    $('#vendor').on('change', function() {
        var selected = $(this).find(':selected');
        $('#pan_no').val(selected.attr('pan'));
    });


    $('#member_or_vendor').on('change', function() {
        var value = $(this).val()
        if(value == 0){
            $('#member_container').show();
            $('#vendor_container').hide();
        }
        else{
            $('#member_container').hide();
            $('#vendor_container').show();
            
        }
        $('#team').val("");
        $('#vendor').val("");
        $('#pan_no').val("");
    });

</script>


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

{% endblock %}