word-doc-generator/public/index.html

610 lines
34 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title id="pageTitle">Client Data Form</title>
<!-- Set BASE href for deployment. Change to /word-doc-generator/ on the server.
<base href="/webserver/word-doc-generator/">-->
<script>
(function () {
const base = document.createElement('base');
base.href = location.hostname === 'localhost'
? '/'
: '/webserver/word-doc-generator/';
document.head.prepend(base);
})();
</script>
<link rel="stylesheet" href="styles.css">
<script src="https://unpkg.com/dayjs/dayjs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>
<script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
<script src="https://unpkg.com/dayjs/dayjs.min.js"></script>
<script src="https://unpkg.com/dayjs/plugin/advancedFormat.js"></script>
</head>
<body>
<div class="container">
<div class="heading">
<h1>Client Data Form</h1>
</div>
<button id="clearForm">Clear Form</button>
<button id="generateClientFolderBtn">Create Folder</button>
<button id="generateClientFolderLinkBtn"> Folder Link</button>
<div id="clientFolderLinkContainer"></div>
<div class="form-row">
<!-- [NOTE] Removed col-md-8 since this doesn't have bootstrap unless you want to add styles into your html files directly -->
<div class="form-group">
<label for="excelFile">Import Excel Data:</label>
<input type="file" id="excelFile" accept=".xlsx">
</div>
<div class="form-group">
<label for="excelFileOld">Import Old Excel Data:</label>
<input type="file" id="excelFileOld" accept=".xlsx">
</div>
<form id="generateClientDataFile" name="clientDataForm">
<div class="form-group">
<label for="excelFile">Export Excel Data:</label>
<input type="submit" id="generateExcelBtn" value="Export to Excel">
</div>
</div>
<h2>Client Contact Information</h2>
<div class="form-row">
<div class="form-group">
<label for="clientFirstName">Client First Name:</label>
<input type="text" id="clientFirstName" name="clientFirstName" onblur="titleCase(this)">
</div>
<div class="form-group">
<label for="clientMiddleName">Client Middle Name:</label>
<input type="text" id="clientMiddleName" name="clientMiddleName" onblur="titleCase(this)">
</div>
<div class="form-group">
<label for="clientLastName">Client Last Name:</label>
<input type="text" id="clientLastName" name="clientLastName" onblur="titleCase(this)">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="homeAddress">Home Address:</label>
<input type="text" id="homeAddress" name="homeAddress" onblur="titleCase(this)">
</div>
<div class="form-group">
<label for="homeCity">Home City:</label>
<input type="text" id="homeCity" name="homeCity" onblur="titleCase(this)">
</div>
<div class="form-group">
<label for="homeState">Home State:</label>
<!-- [NOTE] validation(partter and title) on the hmtl side to prevent wrong format when clicking exporting -->
<input type="text" id="homeState" name="homeState" pattern="[A-Za-z]{2}" title="Please enter a two-letter state code or the full state name" onblur="formatState(this)">
<span id="homeStateError" class="error-message" style="color: red; font-size: 14px;"></span>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="homeZip">Home Zip:</label>
<!-- [NOTE] validation(pattern and title) on the html side to prevent wrong format when clicking exporting -->
<!-- [NOTE] Added error message to display if zip code is not 5 digits instead of using alerts -->
<input type="text" id="homeZip" pattern="\d{5}(-\d{4})?" title="Zip code must either be in the format 12345 or 12345-1234" onblur="validateHomeZip(this)">
<span id="zipError" class="error-message" style="color: red; font-size: 14px;"></span>
</div>
<div class="form-group">
<label for="homeCounty">Home County:</label>
<input type="text" id="homeCounty" name="homeCounty" onblur="titleCase(this)">
</div>
<div class="form-group">
<label for="homePhone">Home Phone:</label>
<!-- [NOTE] for both phone number inputs added pattern for validators to prevent form submission if phone number is not 10 digits -->
<input type="tel" pattern="\d{3}-\d{3}-\d{4}"
title="Phone number must be 10 digits" id="homePhone" name="homePhone" onblur="formatPhone(this, 'home')">
<span id="homePhoneError" class="error-message" style="color: red; font-size: 14px;"></span>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="cellPhone">Cell Phone:</label>
<!-- [NOTE] validation(partter and title) on the hmtl side to prevent wrong format when clicking exporting -->
<input type="tel" id="cellPhone" name="cellPhone" pattern="\d{3}-\d{3}-\d{4}"
title="Phone number must be 10 digits" onblur="formatPhone(this, 'cell')">
<span id="cellPhoneError" class="error-message" style="color: red; font-size: 14px;"></span>
</div>
<div class="form-group">
<label for="email">Email address:</label>
<!-- [NOTE] validation(partter and title) on the hmtl side to prevent wrong format when clicking exporting -->
<input type="email" id="email" name="email" pattern="\S+@\S+\.\S+"
title="Please enter a valid email address." onblur="validateEmail(this)">
<span id="emailError" class="error-message" style="color: red; font-size: 14px;"></span>
</div>
<div class="form-group">
<label for="SSN">Social Security Number:</label>
<input type="text" id="SSN" name="SSN" onblur="formatSSN(this, 'client')">
<span id="clientSSNError" class="error-message" style="color: red; font-size: 14px;"></span>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="dob">DOB:</label>
<input type="text" id="dob" name="dob" onblur="titleCase(this)">
</div>
<div class="form-group">
<label for="alias">Aliases:</label>
<input type="text" id="alias" name="alias" onblur="titleCase(this)">
</div>
<div class="form-group">
<label for="clientNamePrefix">Client Name Prefix</label>
<input type="text" id="clientNamePrefix" name="clientNamePrefix" >
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="clientNameSuffix">Client Name Suffix</label>
<input type="text" id="clientNameSuffix" name="clientNameSuffix" >
</div>
<div class="form-group">
<label for="dmcName">DMC Name (if applicable):</label>
<input type="text" id="dmcName" name="dmcName" onblur="titleCase(this)">
</div>
</div>
<h3>Co-Client/Spouse Information</h3>
<details>
<div class="form-row">
<div class="form-group">
<label for="client2FirstName">Client 2 First Name:</label>
<input type="text" id="client2FirstName" name="client2FirstName" onblur="titleCase(this)">
</div>
<div class="form-group">
<label for="client2MiddleName">Client 2 Middle Name:</label>
<input type="text" id="client2MiddleName" name="client2MiddleName" onblur="titleCase(this)">
</div>
<div class="form-group">
<label for="client2LastName">Client 2 Last Name:</label>
<input type="text" id="client2LastName" name="client2LastName" onblur="titleCase(this)">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="client2homeAddress">Client 2 Home Address:</label>
<input type="text" id="client2homeAddress" name="client2homeAddress" onblur="titleCase(this)">
</div>
<div class="form-group">
<label for="client2homeCity">Client 2 Home City:</label>
<input type="text" id="client2homeCity" name="client2homeCity" onblur="titleCase(this)">
</div>
<div class="form-group">
<label for="client2homeState">Client 2 Home State:</label>
<!-- [NOTE] validation(partter and title) on the hmtl side to prevent wrong format when clicking exporting -->
<input type="text" id="client2homeState" name="client2homeState" pattern="[A-Za-z]{2}" title="Please enter a two-letter state code or the full state name" onblur="formatState(this)">
<span id="homeStateError" class="error-message" style="color: red; font-size: 14px;"></span>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="client2homeZip">Client 2 Home Zip:</label>
<!-- [NOTE] validation(pattern and title) on the html side to prevent wrong format when clicking exporting -->
<!-- [NOTE] Added error message to display if zip code is not 5 digits instead of using alerts -->
<input type="text" id="client2homeZip" pattern="\d{5}(-\d{4})?" title="Zip code must either be in the format 12345 or 12345-1234" onblur="validateHomeZip(this)">
<span id="zipError" class="error-message" style="color: red; font-size: 14px;"></span>
</div>
<div class="form-group">
<label for="client2homeCounty">Client 2 Home County:</label>
<input type="text" id="client2homeCounty" name="client2homeCounty" onblur="titleCase(this)">
</div>
<div class="form-group">
<label for="client2homePhone">Client 2 Home Phone:</label>
<!-- [NOTE] for both phone number inputs added pattern for validators to prevent form submission if phone number is not 10 digits -->
<input type="tel" pattern="\d{3}-\d{3}-\d{4}"
title="Phone number must be 10 digits" id="client2homePhone" name="client2homePhone" onblur="formatPhone(this, 'home')">
<span id="homePhoneError" class="error-message" style="color: red; font-size: 14px;"></span>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="client2cellPhone">Client 2 Cell Phone:</label>
<!-- [NOTE] validation(partter and title) on the hmtl side to prevent wrong format when clicking exporting -->
<input type="tel" id="client2cellPhone" name="client2cellPhone" pattern="\d{3}-\d{3}-\d{4}"
title="Phone number must be 10 digits" onblur="formatPhone(this, 'cell')">
<span id="cellPhoneError" class="error-message" style="color: red; font-size: 14px;"></span>
</div>
<div class="form-group">
<label for="client2email">Client 2 Email address:</label>
<input type="client2email" id="client2email" name="client2email" pattern="\S+@\S+\.\S+"
title="Please enter a valid email address." onblur="validateEmail(this)">
<span id="emailError" class="error-message" style="color: red; font-size: 14px;"></span>
</div>
<div class="form-group">
<label for="client2SSN">Social Security Number:</label>
<input type="text" id="client2SSN" name="client2SSN" onblur="formatSSN(this, 'client')">
<span id="clientSSNError" class="error-message" style="color: red; font-size: 14px;"></span>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="client2dob">DOB:</label>
<input type="text" id="client2dob" name="client2dob" onblur="titleCase(this)">
</div>
<div class="form-group">
<label for="client2alias">Aliases:</label>
<input type="text" id="client2alias" name="client2alias" onblur="titleCase(this)">
</div>
<div class="form-group">
<label for="client2NamePrefix">Client 2 Name Prefix</label>
<input type="text" id="client2NamePrefix" name="client2NamePrefix" >
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="client2NameSuffix">Client 2 Name Suffix</label>
<input type="text" id="client2NameSuffix" name="client2NameSuffix">
</div>
</div>
</details>
<h2>Case Information</h2> <div id="caseLinkContainer"></div>
<details>
<button id="clearCaseInfo" type="button">Clear Case Info</button>
<div class="form-row">
<div class="form-group">
<label for="caseDesignation">Court Designation:</label>
<input type="text" id="caseDesignation" name="caseDesignation" onblur="titleCase(this)" class="case-info">
</div>
<div class="form-group">
<label for="caseCounty">Case County:</label>
<input type="text" id="caseCounty" name="caseCounty" onblur="titleCase(this)" class="case-info">
</div>
<div class="form-group">
<label for="caseState">Case State:</label>
<input type="text" id="caseState" name="caseState" onblur="formatCaseState(this)" class="case-info">
<span id="caseStateError" class="error-message" style="color: red; font-size: 14px;"></span>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="caseDivisionDesignation">Court Division:</label>
<input type="text" id="caseDivisionDesignation" name="caseDivisionDesignation" onblur="titleCase(this)" class="case-info">
</div>
<div class="form-group">
<label for="caseDivisionNumber">Court Division Number:</label>
<input type="text" id="caseDivisionNumber" name="caseDivisionNumber" onblur="titleCase(this)" class="case-info">
</div>
<div class="form-group">
<label for="caseDivisionJudge">Judge Assigned:</label>
<input type="text" id="caseDivisionJudge" name="caseDivisionJudge" list="judge-list" onblur="titleCase(this)" class="case-info">
<datalist id="judge-list"></datalist>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="caseNumber">Case Number: <a href="linkGenerator.html" target="_blank">Make Link</a></label>
<input type="text" id="caseNumber" name="caseNumber" oninput="trimSpaces(this)" class="case-info">
<button id="generateCaseLinkBtn"> Folder Link</button>
</div>
<div class="form-group">
<label for="casePlaintiff">Plaintiff Name: </label>
<input type="text" id="casePlaintiff" name="casePlaintiff" list="plaintiff-list" class="case-info">
<datalist id="plaintiff-list"></datalist>
</div>
<div class="form-group">
<label for="caseDefendant">Defendant Name:</label>
<input type="text" id="caseDefendant" name="caseDefendant" onblur="titleCase(this)" class="case-info">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="caseSuitTheory">Suit Theory:</label>
<input type="text" id="caseSuitTheory" name="caseSuitTheory" onblur="titleCase(this)" class="case-info">
</div>
<div class="form-group">
<label for="caseSuitAmount">Suit Amount:</label>
<input type="text" id="caseSuitAmount" name="caseSuitAmount" onblur="formatCurrency(this)" class="case-info">
</div>
<div class="form-group">
<label for="caseOpposingCounsel">Plaintiff's Counsel:</label>
<input list="counsel-list" type="text" id="caseOpposingCounsel" name="caseOpposingCounsel" onblur="titleCase(this)" class="case-info">
<datalist id="counsel-list">
<!-- Options will be populated here -->
</datalist>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="caseAnswerDate">First Court Date:</label>
<input type="text" id="caseAnswerDate" name="caseAnswerDate" onblur="formatDateTime(this)" class="case-info">
<span id="caseAnswerDateError" class="error-message" style="color: red; font-size: 14px;"></span>
</div>
<div class="form-group">
<label for="caseOriginalCreditor">Original Creditor:</label>
<input type="text" id="caseOriginalCreditor" name="caseOriginalCreditor" onblur="titleCase(this)" class="case-info">
</div>
<div class="form-group">
<label for="caseAccountNumber">Account Number (or Last Four)</label>
<input type="text" id="caseAccountNumber" name="caseAccountNumber" onblur="titleCase(this)" class="case-info">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="caseFilingDate">Petition Filing Date:</label>
<input type="text" id="caseFilingDate" name="caseFilingDate" onblur="titleCase(this)" class="case-info">
</div>
<div class="form-group">
<label for="caseFilingAttorney">Filing Attorney:</label>
<input list="attorney-list" type="text" id="caseFilingAttorney" name="caseFilingAttorney" onblur="titleCase(this)" class="case-info">
<datalist id="attorney-list">
<!-- Options will be populated here -->
</datalist>
</div>
<div class="form-group">
<label for="caseOCFileNumber">Opposing Counsel File #</label>
<input type="text" id="caseOCFileNumber" name="caseOCFileNumber" onblur="titleCase(this)" class="case-info">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="caseAnswerFiledDate">Date Answer Filed:</label>
<input type="text" id="caseAnswerFiledDate" name="caseAnswerFiledDate" onblur="titleCase(this)" class="case-info">
</div>
<div class="form-group">
<label for="caseDisposition">Case Disposition:</label>
<input type="text" id="caseDisposition" name="caseDisposition" onblur="titleCase(this)" class="case-info">
</div>
<div class="form-group">
<label for="caseDispositionDate">Case Disposition Date</label>
<input type="text" id="caseDispositionDate" name="caseDispositionDate" onblur="titleCase(this)" class="case-info">
</div>
</div>
<h3>Settlement Terms</h3>
<details>
<div class="form-row">
<div class="form-group">
<label for="settlementOfferPercentExpected">Expected Settlement Offer Percentage</label>
<input type="number" id="settlementOfferPercentExpected" name="settlementOfferPercentExpected" min="0" max="100" step="0.01" placeholder="Enter expected percentage" class="case-info">
</div>
<div class="form-group">
<label for="settlementOfferPercentCurrent">Current Settlement Offer Percentage</label>
<input type="number" id="settlementOfferPercentCurrent" name="settlementOfferPercentCurrent" min="0" max="100" step="0.01" placeholder="Enter current percentage" class="case-info">
</div>
<div class="form-group">
<label for="settlementOfferAmount">Settlement Offer</label>
<input type="number" id="settlementOfferAmount" name="settlementOfferAmount" min="0" step="0.01" placeholder="Enter settlement offer">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="settlementAmount">Settlement Amount:</label>
<input type="number" step="0.01" id="settlementAmount" name="settlementAmount" min="0" onblur="formatCurrency(this)" class="case-info">
</div>
<div class="form-group">
<label for="settlementInstallmentAmount"> Installment Amount:</label>
<input type="number" step="0.01" id="settlementInstallmentAmount" name="settlementInstallmentAmount" min="0" onblur="formatCurrency(this)" class="case-info">
</div>
<div class="form-group">
<label for="settlementFirstPaymentDate"> First Payment Date:</label>
<input type="text" id="settlementFirstPaymentDate" name="settlementFirstPaymentDate" class="case-info">
</div>
<div class="form-group">
<label for="settlementInstallmentNo">Number of Payments</label>
<input type="number" id="settlementInstallmentNo" name="settlementInstallmentNo" class="case-info">
</div>
<div class="form-group">
<label for="settlementInterestRate">Interest Rate (%)</label>
<input type="number" id="settlementInterestRate" name="settlementInterestRate" min="0" step="0.01" class="case-info">
</div>
<div class="form-group">
<label for="settlementCaseCosts">Case Costs ($)</label>
<input type="number" id="settlementCaseCosts" name="settlementCaseCosts" min="0" step="0.01" class="case-info">
</div>
</div>
</details>
</details>
<h2>Fee and Payment Information</h2>
<details>
<div class="form-row">
<div class="form-group">
<label for="fee">Fee:</label>
<input type="number" id="fee" name="fee" min="0" onblur="formatCurrency(this)" class="case-info">
</div>
<div class="form-group">
<label for="installmentAmount">Payment Amount:</label>
<input type="number" id="installmentAmount" name="installmentAmount" min="0" onblur="formatCurrency(this)" class="case-info">
</div>
<div class="form-group">
<label for="installmentDate">First Payment Date:</label>
<input type="date" id="installmentDate" name="installmentDate" class="case-info">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="nameOnCard">Name on Card:</label>
<input type="text" id="nameOnCard" name="nameOnCard" onblur="titleCase(this)">
</div>
<div class="form-group">
<label for="cardNumber">Card Number:</label>
<input type="text" id="cardNumber" name="cardNumber">
</div>
<div class="form-group">
<label for="expiration">Expiration:</label>
<input type="text" id="expiration" name="expiration" onblur="formatExpiration(this)">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="billingAddress">Billing Address:</label>
<input type="text" id="billingAddress" name="billingAddress" onblur="titleCase(this)">
</div>
<div class="form-group">
<label for="billingZip">Billing Zip:</label>
<input type="text" id="billingZip" name="billingZip" onblur="titleCase(this)">
</div>
<div class="form-group">
<label for="securityCode">Security Code:</label>
<input type="text" id="securityCode" name="securityCode" onblur="titleCase(this)">
</div>
</div>
</details>
<label for="numCollectors">Number of Collectors:</label>
<select id="numCollectors" onchange="generateFields(this.value)">
<option value="0">Select...</option>
<!-- Generate options up to 100 -->
<script>
for (let i = 1; i <= 30; i++) {
document.write('<option value="' + i + '">' + i + '</option>');
}
</script>
</select>
<div id="collectorsContainer"></div>
<H2>Generate Documents</H2>
<div class="form-row">
<div class="form-group">
<input type="button" id="generateRetainerBtn" value="Retainer">
</div>
<div class="form-group">
<!-- [NOTE - TODO] remove onclick and its function since its not being used as your addEventListener is doing the work. -->
<!-- [NOTE] Also, it's causing undefined errors shown in your console -->
<input type="button" id="generateIcsBtn" value="Create ICS" >
</div>
<div class="form-group">
<input type="button" id="generateIcsBodyBtn" value="ICS Body Text" >
</div>
</div>
<div class="form-row">
<div class="form-group">
<input type="button" id="generateNotesBtn" value="Notes">
</div>
<div class="form-group">
<input type="button" id="generateSpreadsheetData" value="Data for Spreadsheets/Reports">
</div>
<div class="form-group">
<input type="button" id="generateCannedEmailsBtn" value="Canned Emails">
</div>
</div>
<div class="form-row">
<div class="form-group">
<input type="button" id="generateContactBtn" value="Contact / VCF">
</div>
<div class="form-group">
<input type="button" id="generateCreditAuthBtn" value="Credit Authorization">
</div>
<div class="form-group">
<input type="button" id="generateCreditAuthNoPaymentBtn" value="Credit Auth (No Payment)">
</div>
</div>
<h3>General Documents</h3>
<details>
<div class="form-row">
<div class="form-group">
<input type="button" id="generateEoABtn" value="EoA">
</div>
<div class="form-group">
<input type="button" id="generateADsBtn" value="Affirmative Defenses">
</div>
<div class="form-group">
<input type="button" id="generateServiceWaiverBtn" value="Service Waiver">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="pleadingTemplateFile">Pleading Template:</label>
<input type="file" id="pleadingTemplateFile" name="pleadingTemplateFile">
<input type="button" id="generatePleadingBtn" value="Generate Pleading">
</div>
</div>
</details>
<h3>FDCPA Letters</h3>
<details>
<div class="form-row">
<div class="form-group">
<input type="button" id="generateDisputeLetterBtn" value="Dispute Letter">
</div>
<div class="form-group">
<input type="button" id="generateDisputeEnvelopeBtn" value="Dispute Envelopes">
</div>
<div class="form-group">
<input type="button" id="generateDisputeCertBtn" value="Dispute Certification">
</div>
</div>
<div class="form-row">
<div class="form-group">
<input type="button" id="generateReminderICSBtn" value="Reminder ICS">
</div>
</div>
</details>
<h3>Letters</h3>
<details>
<div class="form-row">
<div class="form-group">
<label for="letterTemplateFile">Select a template:</label>
<input type="file" id="letterTemplateFile" accept=".docx">
<input type="button" id="generateLetterBtn" value="Generate Letter">
</div>
<div class="form-group">
<input type="button" id="generateCloseOutBtn" value="Generate Close Out Letter">
</div>
<div class="form-group">
<input type="submit" id="generatePaymentPlanBtn" value="Payment Plan Data">
</div>
</div>
<!-- [NOTE] Added Close Out Letter - CJ With Costs button
<div class="form-row">
<div class="form-group">
<input type="button" id="generateCloseOutWithCostsBtn" value="Close Out Letter - CJ With Costs" >
</div>
-->
</details>
<h3>Discovery Responses</h3>
<div class="form-row">
<div class="form-group">
<label for="discoTemplateFile">Select a template:</label>
<input type="file" id="discoTemplateFile" accept=".docx">
<input type="button" id="generateDiscoBtn" value="Generate Document" >
</div>
<div class="form-group">
<label for="discoCoSDate">Discovery CoS Date:</label>
<input type="text" id="discoCosDate" name="discoCosDate" class="case-info">
</div>
<div class="form-group">
<input type="button" id="generateDiscoIcsMOBtn" value="Create Disco Due Date ICS MO">
<input type="button" id="generateDiscoIcsKSBtn" value="Create Disco Due Date ICS KS">
</div>
</div>
</form>
</div>
<script type="module" src="client.js"></script>
<script>
dayjs.extend(window.dayjs_plugin_advancedFormat);
var today = dayjs();
console.log(today.format('MMMM Do, YYYY')); // Output: July 14th, 2023
</script>
<script src="https://cdn.jsdelivr.net/npm/number-to-words"></script>
</body>
</html>