File: /home/imensosw/www/imenso.co/demo/stellar/stellarbilling/updates.php
<script>
$(document)
.ready(function() {
$('.ui.accordion')
.accordion();
$('.paymentdate').calendar();
$('.interviewtime1').calendar();
$('.interviewtime2').calendar();
$('.ui.dropdown')
.dropdown();
$('.ui.checkbox')
.checkbox();
// off-full-screen='hiden' on-full-screen full-screen-on=hidden full-screen-off
$(".on-full-screen").click(function(){
// $(".full-screen-off").addClass("full-screen-on");
// $(".on-full-screen").addClass("hide-on-full");
$(".off-full-screen").removeClass("hidden");
$(this).addClass("hidden");
$('.full-screen-off').addClass("full-screen-on");
});
$(".off-full-screen").click(function(){
$(".on-full-screen").removeClass("hidden");
$(this).addClass("hidden");
$('.full-screen-off').removeClass("full-screen-on");
});
$('.addPayment.modal')
.modal('attach events', '.addPayment', 'show')
;
$('.notabular.menu .item').tab();
});
</script>
<div class="ui addPayment modal">
<i class="close changeStatus icon"></i>
<div class="header">
Add Payment
</div>
<div class="content">
<form class="ui form">
<div class="field">
<label>Amount</label>
<input type="text" name="first-name" placeholder="Amount">
</div>
<div class="three fields">
<div class="field">
<label>Date</label>
<div class="ui calendar paymentdate">
<div class="ui input left icon">
<i class="calendar icon"></i>
<input type="text" placeholder="Date/Time">
</div>
</div>
</div>
<div class="field">
<label>Payment Mode</label>
<select class="ui fluid dropdown">
<option value="">Cheque</option>
<option value="AL">Cash</option>
</select>
</div>
<div class="field">
<label>Reciept No.</label>
<input type="text" name="last-name" placeholder="Reciept">
</div>
</div>
</form>
</div>
<div class="actions">
<div class="ui deny button">
Cancel
</div>
<div class="ui orange right labeled icon button">
Submit
<i class="checkmark icon"></i>
</div>
</div>
</div><!--/addPayment-->
<div class="raiseInvoice" style="display: none;">
<h4 class="right-heading">Invoice
<div class="ui inline nodeco dropdown ml10"> Milestone <i class="dropdown icon"></i>
<div class="menu">
<a data-tab="fifth" class="item">
1st Retainer
</a>
<a data-tab="sixth" class="item">
2nd Retainer
</a>
<a data-tab="sixth" class="item">
Search Fee
</a>
</div>
</div> |
<a class="nodeco" href="">Preview</a> |
<a href="" class="nodeco">Send Email</a>
</h4>
<a class="close_as" onclick="$('.raiseInvoice').hide(200);" href="javascript:;"><img width="30" src="images/close.png"></a>
<div class="inv-content">
<div class="ui ribbon red label">Overdue</div>
<div class="pad50">
<h3 class="caps text-center">Tax Invoice</h3>
<div class="ui grid mt3">
<div class="eight wide column">
<div class="editable">
<h5>Reliance Communication</h5>
<p class="meta">
102 South Avenue<br>
Sohna Road, Gurgaon - 100200<br>
HR - India
</p>
<p class="sml-text"><strong>GSTN:</strong> XXXXXX102<br>
<strong>State Code:</strong> XX/ State: XXXX102<br>
<strong>Place of Supply:</strong> XXXXX<br>
<strong>Delivery Address:</strong> Same as above<br>
<strong>Billing Address:</strong> Same as above
</p>
</div>
<script>var editor = new MediumEditor('.editable');</script>
</div>
<div class="eight wide column text-right">
<div class="editable">
<p class="sml-text"><strong>Invoice Date:</strong> 26 Oct 2017<br>
<strong>Invoice No.:</strong> XX102<br>
</p>
</div>
<script>var editor = new MediumEditor('.editable');</script>
</div>
</div><!--grid-->
<table class="ui unstackable mt3 table">
<thead>
<tr><th>Detail</th>
<th class="right aligned">Amount</th>
</tr></thead>
<tbody>
<tr>
<td>Search Fee</td>
<td class="right aligned"><i class="fa fa-inr"></i> 50000.00</td>
</tr>
<tr>
<td>IGST@18%</td>
<td class="right aligned"><i class="fa fa-inr"></i> 9000.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<th><strong>Total</strong></th>
<th class="right aligned"><strong><i class="fa fa-inr"></i> 59000.00</strong></th>
</tr>
</tfoot>
</table>
<p><strong>In Words:</strong> Fifty nine thousand rupees only</p>
<div class="mt3">
<div class="editable">
<p class="sml-text">GST Payable under Reverse Charge: Yes</p>
<p class="sml-text">
<strong>Account Name:</strong> Stellar Search & Selection Pvt. Ltd.<br>
<strong>Bank Account No.:</strong> 12345XXXXXXX<br>
<strong>IFSC Code:</strong> HDFCXXXXX<br>
<strong>PAN No:</strong> ASD555XXX<br>
<strong>GSTIN:</strong> XXXXXXXXXXXX<br>
<strong>SAC Code:</strong>XXXXX<br>
<strong>Contact Details:</strong> xxx@stellarsearch.com / +919876543210<br>
</p>
</div>
<script>var editor = new MediumEditor('.editable');</script>
</div>
</div>
</div>
</div><!--/raiseInvoice-->
<div class="ui notabular borderless custom-bar menu">
<a data-tab="first" class="item active">
<i class="unhide icon"></i> Details
</a>
<a data-tab="second" class="item">
<i class="cogs icon"></i> Invoices
</a>
</div>
</div>
<div class="right menu"> </div>
</div> <!--heads-->
<div class="panel-scroll">
<div class="pad50 font_13">
<div class="ui bottom attached active tab" data-tab="first">
<h3 style="margin-bottom: 0;">VP for Sales Mandate</h3>
<p>Reliance Communication</p>
<div class="meta">Create On: 21 Dec 2016 | Created By: Arshi Khan </a>)</div>
<div class="ui ordered mini three steps">
<div class="completed step">
<div class="content">
<div class="title green-text">1st Retainer</div>
<div class="description">Upfront - Assign Search 50K (20%)</div>
</div>
</div>
<div class="completed step">
<div class="content">
<div class="title green-text">2nd Retainer</div>
<div class="description">Profile Shared - 200K (60%)</div>
</div>
</div>
<div class="step">
<div class="content">
<div class="title theme-text-2">Search Fee</div>
<div class="description">Joining - 50K (20%)</div>
</div>
</div>
</div>
<div class="ui accordion">
<div class="active title">
<!-- <i class="dropdown icon"></i> -->
<h4 class="theme-text-1"><span class="m_1em">Company Details</span></h4>
</div>
<div class="active content">
<div class="ui two column stackable grid container">
<div class="column">
<div class="m_b10 com_info"><strong>Position </strong> <span class="segments"> Chief Executive Officer</span></div>
<div class="m_b10 com_info"><strong>Turnover (Financial Year) </strong> <span> 1.5 Billion</span></div>
<div class="m_b10 com_info"><strong>Businesses/ Divisions </strong> <span> Telecom and Communication</span></div>
<div class="m_b10 com_info"><strong>Locations </strong> <span> Gurgaon</span></div>
<div class="m_b10 com_info"><strong>Plans </strong> <span> Future Gain</span></div>
</div>
<div class="column">
<div class="m_b10 com_info"><strong>Companay Type </strong> <span class="segments"> Tier 1</span></div>
<div class="m_b10 com_info"><strong>Size / No of employees </strong> <span> 1500 Employees</span></div>
<div class="m_b10 com_info"><strong>Market Share </strong> <span> 25000</span></div>
<div class="m_b10 com_info"><strong>Key Competitors </strong> <span> All Telecom Companies</span></div>
</div>
</div>
</div>
<div class="title">
<!-- <i class="dropdown icon"></i> -->
<h4 class="theme-text-1"><span class="m_1em">Job Descriptions</span></h4>
</div>
<div class="content">
<div class="ui two column stackable grid container">
<div class="column">
<div class="m_b10 com_info"><strong>Role </strong> <span class="segments"> Chief Executive Officer</span></div>
<div class="m_b10 com_info"><strong>Team Size </strong> <span> 20 </span></div>
<div class="m_b10 com_info"><strong>Work Experience </strong> <span> 0-10 years</span></div>
<div class="m_b10 com_info"><strong>Locations </strong> <span> Gurgaon</span></div>
<div class="m_b10 com_info"><strong>Top 3 Deliverables </strong> <span>Project, Project 1, Project 3</span></div>
</div>
<div class="column">
<div class="m_b10 com_info"><strong>Location </strong> <span class="segments"> Gurgaon</span></div>
<div class="m_b10 com_info"><strong>Reporting Structure </strong> <span> 9:00am - 6:00pm</span></div>
<div class="m_b10 com_info"><strong>Compensation Bracket </strong> <span> 6, Month</span></div>
<!-- <div class="m_b10 com_info"><strong>Current Business Needs </strong> <span> 15 Candidates</span></div> -->
<div class="m_b10 com_info"><strong>New Role/ Replacement </strong> <span> Manager</span></div>
</div>
</div>
</div>
</div>
</div>
<div class="ui bottom attached tab inv-list" data-tab="second">
<h4 class="right-heading">Invoice <a href="javascript:;" onclick="$('.raiseInvoice').show(200);" class="pull-right orange-button changeStatus">Raise Invoice</a></h4>
<div class="ui mt3 grid inv-list-item">
<div class="one wide column">
<div class="ui mini image">
<img src="images/pdf.png">
</div>
</div>
<div class="six wide column">
<div class="top aligned content">
<a href="javascript:;" onclick="$('.raiseInvoice').show(200);"><h5 class="theme-text semi-bold"> INV00025 <span class="ui horizontal mini label">Draft</span> </h5></a>
<div class="meta">
<span class="date">1st Retainer (20%) <strong>INR 50k</strong> on 10 Nov 2016</span>
</div>
</div>
</div>
<div class="four wide column">
<span class="meta-link noopac">
<a class="addPayment" href="javascript:;">Add Payment</a> | <a href="javascript:;" onclick="$('.raiseInvoice').show(200);">Edit</a> | <a href="">Delete</a>
</span>
</div>
<div class="five wide column">
<span class="pull-right">
<h4><i class="fa fa-inr"></i> 50,000.00</h4>
</span>
</div>
</div>
<div class="ui divider"></div>
<div class="ui grid inv-list-item">
<div class="one wide column">
<div class="ui mini image">
<img src="images/pdf.png">
</div>
</div>
<div class="six wide column">
<div class="top aligned content">
<a href="javascript:;" onclick="$('.raiseInvoice').show(200);"><h5 class="theme-text semi-bold"> INV00025 <span class="ui red horizontal mini label">Overdue</span> </h5></a>
<div class="meta">
<span class="date">1st Retainer (20%) <strong>INR 50k</strong> on 10 Nov 2016</span>
</div>
</div>
</div>
<div class="four wide column">
<span class="meta-link noopac">
<a class="addPayment" href="javascript:;">Add Payment</a> | <a href="javascript:;" onclick="$('.raiseInvoice').show(200);">Edit</a> | <a href="">Delete</a>
</span>
</div>
<div class="five wide column">
<span class="pull-right">
<h4><i class="fa fa-inr"></i> 50,000.00</h4>
</span>
</div>
</div>
<div class="ui divider"></div>
<div class="ui grid inv-list-item">
<div class="one wide column">
<div class="ui mini image">
<img src="images/pdf.png">
</div>
</div>
<div class="six wide column">
<div class="top aligned content">
<a href="javascript:;" onclick="$('.raiseInvoice').show(200);"><h5 class="theme-text semi-bold"> INV00025 <span class="ui green horizontal mini label">Paid</span> </h5></a>
<div class="meta">
<span class="date">1st Retainer (20%) <strong>INR 50k</strong> on 10 Nov 2016</span>
</div>
</div>
</div>
<div class="four wide column">
<span class="meta-link noopac">
<a class="addPayment" href="javascript:;">Add Payment</a> | <a href="javascript:;" onclick="$('.raiseInvoice').show(200);">Edit</a> | <a href="">Delete</a>
</span>
</div>
<div class="five wide column">
<span class="pull-right">
<h4><i class="fa fa-inr"></i> 50,000.00</h4>
</span>
</div>
</div>
<div class="ui divider"></div>
<div class="ui grid inv-list-item">
<div class="one wide column">
<div class="ui mini image">
<img src="images/pdf.png">
</div>
</div>
<div class="six wide column">
<div class="top aligned content">
<a href="javascript:;" onclick="$('.raiseInvoice').show(200);"><h5 class="theme-text semi-bold"> INV00025 <span class="ui red horizontal mini label">Overdue</span> </h5></a>
<div class="meta">
<span class="date">1st Retainer (20%) <strong>INR 50k</strong> on 10 Nov 2016</span>
</div>
</div>
</div>
<div class="four wide column">
<span class="meta-link noopac">
<a class="addPayment" href="javascript:;">Add Payment</a> | <a href="javascript:;" onclick="$('.raiseInvoice').show(200);">Edit</a> | <a href="">Delete</a>
</span>
</div>
<div class="five wide column">
<span class="pull-right">
<h4><i class="fa fa-inr"></i> 50,000.00</h4>
</span>
</div>
</div>
<div class="ui divider"></div>
</div>
<script type="text/javascript">
$('.ui.accordion').accordion('refresh');
</script>