File: /home/imensosw/public_html/imenso.co/demo/hmis/new-form.php
<!doctype html>
<html lang="en" data-bs-theme="auto">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<title>HMIS - POC</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="css/custom.css">
<!-- Favicons -->
<link rel="apple-touch-icon" href="/docs/5.3/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="/docs/5.3/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/docs/5.3/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
<link rel="manifest" href="/docs/5.3/assets/img/favicons/manifest.json">
<link rel="mask-icon" href="/docs/5.3/assets/img/favicons/safari-pinned-tab.svg" color="#712cf9">
<link rel="icon" href="/docs/5.3/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#712cf9">
</head>
<body>
<nav class="navbar border-bottom px-4 navbar-main">
<div class="container-fluid">
<img src="images/logo.svg" width="100">
<ul class="custom-ul">
<li class="nav-item">
<a href="javascript:;" onClick="changePage(0)" class="nav-link active">Admin</a>
</li>
</ul>
<ul class="nav nav-pills">
<li class="dropdown">
<a class="avtar" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<span>J</span>
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Account</a></li>
<li><a class="dropdown-item" href="#">Logout</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<div class="playground">
<div class="main-content">
<div class="mt-4 px-4">
<div class="container gutter">
<div class="d-flex justify-content-between align-items-center my-4">
<h3 class="mb-0 title">CoC Specific Elements <a class="ms-1" href=""><i class="bi-pencil"></i></a></h3>
<div>
<a href="form-preview.php" target="_blank" class="btn btn-secondary"><i class="bi-eye me-2"></i> Preview</a>
<a href="" class="btn btn-primary ms-2"><i class="bi-cloud me-2"></i> Save Changes</a>
</div>
</div>
<div class="card">
<div class="d-flex justify-content-between">
<div class="card-text"><a class="ms-1" href="index.php"><i class="bi-arrow-left"></i> Back</a></div>
<div class="card-action">
</div>
</div>
<div class="accordion mt-5" id="accordionPanelsStayOpenExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<strong>Heading — </strong> <span class="ms-2">C2 Moving On Assistance provided - PSH participants</span>
</button>
<div class="field-actions">
<a href=""><i class="bi-arrows-move"></i></a>
<a href=""><i class="bi-trash"></i></a>
</div>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<form class="row">
<div class="mb-3 col-6">
<label for="" class="form-label">Field Name</label>
<input type="email" class="form-control" id="" value="C2 Moving On Assistance provided - PSH participants" placeholder="Enter field name">
</div>
<div class="mb-3 col-6">
<label for="" class="form-label">Field Type</label>
<select class="form-select">
<option>Heading</option>
<option>Free Text</option>
<option>Date</option>
<option>List</option>
<option>Description</option>
<option>Radio - Select</option>
</select>
</div>
</form>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<strong>Date — </strong> <span class="ms-2">Date of Moving On Assistance</span>
</button>
<div class="field-actions">
<a href=""><i class="bi-arrows-move"></i></a>
<a href=""><i class="bi-trash"></i></a>
</div>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
<form class="row">
<div class="mb-3 col-6">
<label for="" class="form-label">Field Name</label>
<input type="text" class="form-control" value="Date of Moving On Assistance" id="" placeholder="Enter field name">
</div>
<div class="mb-3 col-6">
<label for="" class="form-label">Field Type</label>
<select class="form-select">
<option>Date</option>
<option>Heading</option>
<option>Free Text</option>
<option>List</option>
<option>Description</option>
<option>Radio - Select</option>
</select>
</div>
<div class="mb-3 col-6">
<label for="" class="form-label">Field Instructions (Optional)</label>
<input type="text" class="form-control" value="" id="" placeholder="Enter field instructions">
</div>
<div class="mb-3 form-check col-12">
<input type="checkbox" class="form-check-input" id="exampleCheck1" checked>
<label class="form-check-label" for="exampleCheck1">This field is required</label>
</div>
</form>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<strong>List — </strong> <span class="ms-2">Moving On Assistance</span>
</button>
<div class="field-actions">
<a href=""><i class="bi-arrows-move"></i></a>
<a href=""><i class="bi-trash"></i></a>
</div>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="accordion-body">
<form class="row">
<div class="mb-3 col-6">
<label for="" class="form-label">Field Name</label>
<input type="text" class="form-control" value="Moving On Assistance" id="" placeholder="Enter field name">
</div>
<div class="mb-3 col-6">
<label for="" class="form-label">Field Type</label>
<select class="form-select">
<option>List</option>
<option>Heading</option>
<option>Free Text</option>
<option>Description</option>
<option>Radio - Select</option>
</select>
</div>
<div class="mb-3 col-6">
<label for="" class="form-label">Field Instructions (Optional)</label>
<input type="text" class="form-control" value="" id="" placeholder="Enter field instructions">
</div>
<div class="mb-3 col-6">
<label for="" class="form-label">List options (User can select any one of them)</label>
<div class="input-group mb-1">
<input type="text" class="form-control" value="Subsidized housing application assistance" id="" placeholder="Enter option name">
<button class="btn btn-outline-secondary" type="button"><i class="bi-trash"></i></button>
</div>
<div class="input-group mb-1">
<input type="text" class="form-control" value="Financial assistance for Moving On (e.g., security deposit, moving expenses)" id="" placeholder="Enter option name">
<button class="btn btn-outline-secondary" type="button"><i class="bi-trash"></i></button>
</div>
<div class="input-group mb-1">
<input type="text" class="form-control" value="Non-financial assistance for Moving On (e.g., housing navigation, transition support)" id="" placeholder="Enter option name">
<button class="btn btn-outline-secondary" type="button"><i class="bi-trash"></i></button>
</div>
<div class="input-group mb-1">
<input type="text" class="form-control" value="Housing referral/placement" id="" placeholder="Enter option name">
<button class="btn btn-outline-secondary" type="button"><i class="bi-trash"></i></button>
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1" checked>
<label class="form-check-label" for="exampleCheck1"><small>Add "Other" option in the list so users type in their own answer</small></label>
</div>
<a href=""><i class="bi-plus"></i> Add More</a>
</div>
<div class="mb-3 form-check col-12">
<input type="checkbox" class="form-check-input" id="exampleCheck1" checked>
<label class="form-check-label" for="exampleCheck1">This field is required</label>
</div>
</form>
</div>
</div>
</div>
<div class="accordion-item hidfid" style="display:none;">
<h2 class="accordion-header" id="headingFour">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
<strong>New field</strong>
</button>
<div class="field-actions">
<a href=""><i class="bi-arrows-move"></i></a>
<a href=""><i class="bi-trash"></i></a>
</div>
</h2>
<div id="collapseFour" class="accordion-collapse collapse show" aria-labelledby="headingFour" data-bs-parent="#accordionExample">
<div class="accordion-body">
<form class="row">
<div class="mb-3 col-6">
<label for="" class="form-label">Field Name</label>
<input type="text" class="form-control" value="" id="" placeholder="Enter field name">
</div>
<div class="mb-3 col-6">
<label for="" class="form-label">Field Type</label>
<select class="form-select">
<option>Select</option>
<option>List</option>
<option>Heading</option>
<option>Free Text</option>
<option>Description</option>
<option>Radio - Select</option>
</select>
</div>
<div class="mb-3 col-6">
<label for="" class="form-label">Field Instructions (Optional)</label>
<input type="text" class="form-control" value="" id="" placeholder="Enter field instructions">
</div>
<div class="mb-3 form-check col-12">
<input type="checkbox" class="form-check-input" id="exampleCheck1" checked>
<label class="form-check-label" for="exampleCheck1">This field is required</label>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="text-end mt-4">
<a href="javascript:;" class="btn btn-secondary js-hidfid"><i class="bi-plus"></i> New Field</a>
</div>
</div>
</div>
</div>
</div> <!--mc-grid-->
</div> <!-- main-content-->
</div> <!--playground-->
<script>
$(document).ready(function(){
$(".js-hidfid").click(function(){
$(".hidfid").show();
});
});
</script>
</body>
</html>