{% extends 'hexabox/elements/layouts/admin.html' %}
{% load static %}
        
{% block additional_css %}
{% endblock %}		
{% block content %}

			<div class="container-fluid">
				<div class="row">

					<!-- Start - Add New Account -->
					<div class="col-xxl-3 col-xl-4">
						<div class="card h-auto">
							<div class="card-header">
								<h4 class="card-title">Add New Account</h4>
							</div>
							<div class="card-body">
								<form>
									<div class="form-group mb-3">
										<label class="form-label"> Account Title<span class="text-danger">*</span></label>
										<input type="text" class="form-control"  placeholder="Account Title">
									</div>
									<div class="form-group mb-3">
										<label class="form-label"> Amount<span class="text-danger">*</span></label>
										<div class="input-group">
											<div class="input-group-text">$</div>
											<input type="number" class="form-control type-number" placeholder="5000">
										</div>
									</div>
									<div class="form-group mb-3">
										<label class="form-label"> Account No<span class="text-danger">*</span></label>
										<input type="number" class="form-control type-number"  placeholder="123456">
									</div>
									<div class="form-group mb-3">
										<label class="form-label">Branch Code<span class="text-danger">*</span></label>
										<input type="number" class="form-control type-number"  placeholder="#321456">
									</div>
									<div class="form-group mb-3 text-nawrap">
										<label class="form-label">Branch Name<span class="text-danger">*</span></label>
										<input type="text" class="form-control"  placeholder="Industrial and Commercial Bank">
									</div>
									<button type="submit" class="btn btn-primary">Confirm</button>
								</form>
							</div>
						</div>
					</div>
					<!-- Start - Add New Account -->
					
					<!-- Start - Finance -->
					<div class="col-xxl-9 col-xl-8">
						<div class="card">
							<div class="card-header border-0">
								<h4 class="card-title">Finance</h4>
								<div id="financeTableExcelBTN"></div>
							</div>
							<div class="card-body table-card-body p-0 pb-3">
								<div class="table-responsive">
									<table id="financeTable" class="table">
										<thead class="table-light">
											<tr>
												<th class="mw-150">Account Title</th>
												<th class="mw-150">Amount</th>
												<th class="mw-150">Account No</th>
												<th class="mw-150">Branch Code</th>
												<th class="mw-150">Branch Name</th>
											</tr>
										</thead>
										<tbody>
											<tr>
												<td><a href="javascript:void(0)">Saving</a></td>
												<td>800$</td>
												<td>12345678910</td>
												<td>1234</td>
												<td>Bank of USA</td>
											</tr>
											<tr>
												<td><a href="javascript:void(0)">Salary </a></td>
												<td>700$</td>
												<td>234567890</td>
												<td>5678</td>
												<td>Bank of London</td>
											</tr>
											<tr>
												<td><a href="javascript:void(0)">Fixed deposit</a></td>
												<td>630$</td>
												<td>3456748912</td>
												<td>9101</td>
												<td>Bank of USA</td>
											</tr>
											<tr>
												<td><a href="javascript:void(0)">Recurring deposit</a></td>
												<td>500$</td>
												<td>456789321</td>
												<td>1213</td>
												<td>Bank of UAE</td>
											</tr>
											<tr>
												<td><a href="javascript:void(0)">Saving</a></td>
												<td>200$</td>
												<td>569874321</td>
												<td>1415</td>
												<td>Bank of London</td>
											</tr>
											<tr>
												<td><a href="javascript:void(0)">Salary </a></td>
												<td>350$</td>
												<td>9876541323</td>
												<td>1617</td>
												<td>Bank of USA</td>
											</tr>
											<tr>
												<td><a href="javascript:void(0)">Fixed deposit</a></td>
												<td>850$</td>
												<td>985674321</td>
												<td>1819</td>
												<td>Bank of UAE</td>
											</tr>
											<tr>
												<td><a href="javascript:void(0)">Fixed deposit</a></td>
												<td>400$</td>
												<td>89764023981</td>
												<td>2223</td>
												<td>Bank of London</td>
											</tr>
											<tr>
												<td><a href="javascript:void(0)">Salary </a></td>
												<td>1200$</td>
												<td>3598764210</td>
												<td>2021</td>
												<td>Bank of USA</td>
											</tr>
											<tr>
												<td><a href="javascript:void(0)">Fixed deposit</a></td>
												<td>1100$</td>
												<td>3659872416</td>
												<td>2425</td>
												<td>Bank of UAE</td>
											</tr>
											<tr>
												<td><a href="javascript:void(0)">Fixed deposit</a></td>
												<td>900$</td>
												<td>3698752410</td>
												<td>2627</td>
												<td>Bank of London</td>
											</tr>
											<tr>
												<td><a href="javascript:void(0)">Recurring deposit</a></td>
												<td>600$</td>
												<td>3698574215</td>
												<td>2829</td>
												<td>Bank of USA</td>
											</tr>
											<tr>
												<td><a href="javascript:void(0)">Recurring deposit</a></td>
												<td>100$</td>
												<td>9865732145</td>
												<td>3031</td>
												<td>Bank of London</td>
											</tr>
											<tr>
												<td><a href="javascript:void(0)">Fixed deposit</a></td>
												<td>500$</td>
												<td>26589734512</td>
												<td>3233</td>
												<td>Bank of UAE</td>
											</tr>
											<tr>
												<td><a href="javascript:void(0)">Salary </a></td>
												<td>800$</td>
												<td>69358975241</td>
												<td>3435</td>
												<td>Bank of London</td>
											</tr>
											<tr>
												<td><a href="javascript:void(0)">Fixed deposit</a></td>
												<td>630$</td>
												<td>56389274156</td>
												<td>3637</td>
												<td>Bank of UAE</td>
											</tr>
											<tr>
												<td><a href="javascript:void(0)">Salary </a></td>
												<td>700$</td>
												<td>234567890</td>
												<td>5678</td>
												<td>Bank of London</td>
											</tr>
											<tr>
												<td><a href="javascript:void(0)">Fixed deposit</a></td>
												<td>630$</td>
												<td>3456748912</td>
												<td>9101</td>
												<td>Bank of USA</td>
											</tr>
											<tr>
												<td><a href="javascript:void(0)">Recurring deposit</a></td>
												<td>500$</td>
												<td>456789321</td>
												<td>1213</td>
												<td>Bank of UAE</td>
											</tr>
											<tr>
												<td><a href="javascript:void(0)">Saving</a></td>
												<td>200$</td>
												<td>569874321</td>
												<td>1415</td>
												<td>Bank of London</td>
											</tr>
										</tbody>										
									</table>
								</div>
							</div>
						</div>
					</div>
					<!-- End - Finance -->
					
				</div>
			</div>

<div class="offcanvas offcanvas-end customeoff" tabindex="-1" id="offcanvasExample1">
    <div class="offcanvas-header">
    <h5 class="modal-title" id="#gridSystemModal1">Add New Task</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close">
        <i class="fa-solid fa-xmark"></i>
    </button>
    </div>
    <div class="offcanvas-body">
    <div class="container-fluid">
        <form>
            <div class="row">
                <div class="col-xl-6 mb-3">
                    <label for="exampleFormControlInputfirst" class="form-label">Title<span class="text-danger">*</span></label>
                    <input type="text" class="form-control" id="exampleFormControlInputfirst" placeholder="Title">
                </div>	
                <div class="col-xl-6 mb-3">
                    <label class="form-label">Project<span class="text-danger">*</span></label>
                    <select class="default-select style-1 form-control">
                        <option  data-display="Select">Project</option>
                        <option value="html">Salesmate</option>
                        <option value="css">ActiveCampaign</option>
                        <option value="javascript">Insightly</option>
                    </select>
                </div>	
                <div class="col-xl-6 mb-3">
                    <label for="exampleFormControlInputthree" class="form-label">Start Date<span class="text-danger">*</span></label>
                    <input type="date" class="form-control" id="exampleFormControlInputthree">
                </div>
                <div class="col-xl-6 mb-3">
                    <label for="exampleFormControlInputfour" class="form-label">End Date<span class="text-danger">*</span></label>
                    <input type="date" class="form-control" id="exampleFormControlInputfour">
                </div>
                <div class="col-xl-6 mb-3">
                    <label class="form-label">Estimated Hour<span class="text-danger">*</span></label>
                    <div class="input-group">
                        <input type="text" class="form-control" value="09:30"><span class="input-group-text"><i
                                    class="fas fa-clock"></i></span>
                    </div>
                </div>
                <div class="col-xl-6 mb-3">
                    <label class="form-label">Status<span class="text-danger">*</span></label>
                    <select class="default-select style-1 form-control">
                        <option  data-display="Select">Status</option>
                        <option value="html">In Progess</option>
                        <option value="css">Pending</option>
                        <option value="javascript">Completed</option>
                    </select>
                </div>
                <div class="col-xl-6 mb-3">
                    <label class="form-label">priority<span class="text-danger">*</span></label>
                    <select class="default-select style-1 form-control">
                        <option  data-display="Select">priority</option>
                        <option value="html">Hight</option>
                        <option value="css">Medium</option>
                        <option value="javascript">Low</option>
                    </select>
                </div>
                <div class="col-xl-6 mb-3">
                    <label class="form-label">Category<span class="text-danger">*</span></label>
                    <select class="default-select style-1 form-control">
                        <option  data-display="Select">Category</option>
                        <option value="html">Designing</option>
                        <option value="css">Development</option>
                        <option value="javascript">react developer</option>
                    </select>
                </div>
                <div class="col-xl-6 mb-3">
                    <label class="form-label">Permission<span class="text-danger">*</span></label>
                    <select class="default-select style-1 form-control">
                        <option  data-display="Select">Permission</option>
                        <option value="html">Public</option>
                        <option value="css">Private</option>
                    </select>
                </div>
                <div class="col-xl-6 mb-3">
                    <label class="form-label">Deadline add<span class="text-danger">*</span></label>
                    <select class="default-select style-1 form-control">
                        <option  data-display="Select">Deadline</option>
                        <option value="html">Yes</option>
                        <option value="css">No</option>
                    </select>
                </div>
                <div class="col-xl-6 mb-3">
                    <label class="form-label">Assigned to<span class="text-danger">*</span></label>
                    <select class="default-select style-1 form-control">
                        <option  data-display="Select">Assigned</option>
                        <option value="html">Bernard</option>
                        <option value="css">Sergey Brin</option>
                        <option value="javascript"> Larry Ellison</option>
                    </select>
                </div>
                <div class="col-xl-6 mb-3">
                    <label class="form-label">Responsible Person<span class="text-danger">*</span></label>
                    <input name='tagify' class="form-control py-0 ps-0 h-auto" value='James, Harry'>
                    
                </div>
                <div class="col-xl-12 mb-3">
                    <label class="form-label">Description<span class="text-danger">*</span></label>
                    <textarea rows="3" class="form-control"></textarea>
                </div>
                <div class="col-xl-12 mb-3">
                    <label class="form-label">Summary<span class="text-danger">*</span></label>
                    <textarea rows="3" class="form-control"></textarea>
                </div>
                
            </div>
            <div>
                <button class="btn btn-danger light ms-1">Cancel</button>
                <button class="btn btn-primary me-1">Help Desk</button>
            </div>
        </form>
        </div>
    </div>
</div>	

{% endblock %}