/home3/bmscom/apps.theaffluentman.com/index.php
<?php
require_once 'config/database.php';
// Handle form submission
$message = '';
$success = false;
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
// Sanitize and collect form data
$customer_name = $conn->real_escape_string($_POST['customerName'] ?? '');
$order_number = $conn->real_escape_string($_POST['orderNumber'] ?? '');
// v6 Header Fields
$item_number_total = $conn->real_escape_string($_POST['itemNumberTotal'] ?? '');
$item_number_current = $conn->real_escape_string($_POST['itemNumberCurrent'] ?? '');
$date = $conn->real_escape_string($_POST['orderDate'] ?? date('Y-m-d'));
// v8 Gender selection
$gender = $conn->real_escape_string($_POST['gender'] ?? 'man');
// Measurements (No change in keys for men, NEW keys for women)
$measurements_man = [
'full_shoulder', 'sleeves', 'full_chest', 'full_stomach', 'hips',
'front_chest', 'chest_back', 'length_of_jacket', 'length_of_shirt',
'length_of_vest', 'waist_for_pants', 'thigh', 'full_crouch',
'pants_length', 'cuffs', 'neck', 'biceps'
];
$measurements_woman = [
'w_shoulder_to_bust', 'w_front_length', 'w_jacket_length', 'w_skirt_length',
'w_top_coat_length', 'w_high_shoulders', 'w_low_shoulders', 'w_back_length',
'w_bust', 'w_bust_width', 'w_waist', 'w_hips', 'w_sleeves', 'w_cuff', 'w_neck',
'w_slack_out_seam', 'w_slack_inseam', 'w_slack_cuff'
];
$measured_values = [];
$all_possible_fields = array_merge($measurements_man, $measurements_woman);
foreach ($all_possible_fields as $field) {
$val = $conn->real_escape_string($_POST[$field] ?? '');
$measured_values[$field] = $val ? $val . ' in' : '';
}
$w_figure_type = $conn->real_escape_string($_POST['w_figure_type'] ?? '');
// Suit Details - Handling Radio/Checkbox Inputs
$suit_type = $conn->real_escape_string($_POST['suitType'] ?? '');
$jacket_fit = $conn->real_escape_string($_POST['jacketFit'] ?? '');
$jacket_fabric_color = $conn->real_escape_string($_POST['jacketFabricColor'] ?? '');
$jacket_fabric_number = $conn->real_escape_string($_POST['jacketFabricNumber'] ?? '');
$lapel_type = $conn->real_escape_string($_POST['lapelType'] ?? '');
// Lapel Width Logic
$lapel_width_option = $_POST['lapelWidth'] ?? '';
$lapel_width_val = '';
if($lapel_width_option === 'Standard') $lapel_width_val = 'Standard';
elseif($lapel_width_option === 'Custom') $lapel_width_val = 'Custom';
elseif($lapel_width_option === 'CustomInches') $lapel_width_val = 'Custom: ' . $conn->real_escape_string($_POST['lapelWidthInches'] ?? '') . ' in';
$lapel_width = $lapel_width_val;
$jacket_stitching = $conn->real_escape_string($_POST['jacketStitching'] ?? '');
$stitch_color = $conn->real_escape_string($_POST['stitchColor'] ?? '');
// Lapel Button Hole
$lapel_bh_option = $_POST['lapelButtonHole'] ?? '';
$lapel_button_hole_color = ($lapel_bh_option === 'Custom') ? $conn->real_escape_string($_POST['lapelButtonHoleCustom'] ?? '') : 'Standard';
$jacket_button_type = $conn->real_escape_string($_POST['jacketButtonType'] ?? '');
if($jacket_button_type == 'Custom') $jacket_button_type = 'Custom: ' . $conn->real_escape_string($_POST['jacketButtonTypeCustom'] ?? '');
$jacket_vent_type = $conn->real_escape_string($_POST['jacketVentType'] ?? '');
$jacket_pocket_type = $conn->real_escape_string($_POST['jacketPocketType'] ?? '');
$jacket_ticket_pocket = $conn->real_escape_string($_POST['jacketTicketPocket'] ?? ''); // Yes/No
$under_collar_felt_color = $conn->real_escape_string($_POST['underCollarFeltColor'] ?? '');
$jacket_sleeve_button_type = $conn->real_escape_string($_POST['jacketSleeveButtonType'] ?? '');
$jacket_sleeve_button_hole_color = $conn->real_escape_string($_POST['jacketSleeveButtonHoleColor'] ?? '');
$jacket_liner = $conn->real_escape_string($_POST['jacketLiner'] ?? '');
$inside_left_message = $conn->real_escape_string($_POST['insideLeftMessage'] ?? '');
$inside_right_message = $conn->real_escape_string($_POST['insideRightMessage'] ?? '');
$suit_notes = $conn->real_escape_string($_POST['suitNotes'] ?? '');
// Pant Details
$pants_fabric = isset($_POST['pantsFabricSame']) ? 'Same As Jacket' : '';
if(!$pants_fabric) $pants_fabric = $conn->real_escape_string($_POST['pantsFabricCustom'] ?? '');
$pants_back_pockets = $conn->real_escape_string($_POST['pantsBackPockets'] ?? '');
$pockets = $conn->real_escape_string($_POST['pockets'] ?? ''); // Side pockets
$suspender_buttons = $conn->real_escape_string($_POST['suspenderButtons'] ?? '');
$pleat_type = $conn->real_escape_string($_POST['pleatType'] ?? '');
$pants_fit = $conn->real_escape_string($_POST['pantsFit'] ?? '');
$bottoms = $conn->real_escape_string($_POST['bottoms'] ?? '');
if($bottoms == 'Cuff') $bottoms = 'Cuff: ' . $conn->real_escape_string($_POST['cuffHeight'] ?? '') . ' in';
$pants_notes = $conn->real_escape_string($_POST['pantsNotes'] ?? '');
// Vest Details (v6)
$vest_style = $conn->real_escape_string($_POST['vestStyle'] ?? '');
$vest_fabric_color = $conn->real_escape_string($_POST['vestFabricColor'] ?? '');
$vest_fabric_number = $conn->real_escape_string($_POST['vestFabricNumber'] ?? '');
$vest_notes = $conn->real_escape_string($_POST['vestNotes'] ?? '');
// Shirt Measurements & Info (v6)
$shirt_neck = $conn->real_escape_string($_POST['shirtNeck'] ?? '');
$shirt_sleeve_measure = $conn->real_escape_string($_POST['shirtSleeveMeasure'] ?? '');
$shirt_chest = $conn->real_escape_string($_POST['shirtChest'] ?? '');
$shirt_back = $conn->real_escape_string($_POST['shirtBack'] ?? '');
$shirt_length_measure = $conn->real_escape_string($_POST['shirtLengthMeasure'] ?? '');
$shirt_back_shoulder = $conn->real_escape_string($_POST['shirtBackShoulder'] ?? '');
$shirt_fabric_color_number = $conn->real_escape_string($_POST['shirtFabricColorNumber'] ?? '');
$shirt_cuff_type = $conn->real_escape_string($_POST['shirtCuffType'] ?? '');
$shirt_cuff_style = $conn->real_escape_string($_POST['shirtCuffStyle'] ?? '');
$shirt_embroidery = $conn->real_escape_string($_POST['shirtEmbroidery'] ?? '');
$shirt_embroidery_color = $conn->real_escape_string($_POST['shirtEmbroideryColor'] ?? '');
$shirt_embroidery_size = $conn->real_escape_string($_POST['shirtEmbroiderySize'] ?? '');
$shirt_notes = $conn->real_escape_string($_POST['shirtNotes'] ?? '');
// SQL Insert
$sql = "INSERT INTO orders (
customer_name, order_number, created_at, item_number_total, item_number_current, gender,
full_shoulder, sleeves, full_chest, full_stomach, hips, front_chest, chest_back,
length_of_jacket, length_of_shirt, length_of_vest, waist_for_pants, thigh,
full_crouch, pants_length, cuffs, neck, biceps,
suit_type, jacket_fit, jacket_fabric_color, jacket_fabric_number, lapel_type,
lapel_width, jacket_stitching, stitch_color, lapel_button_hole_color,
jacket_button_type, jacket_vent_type, jacket_pocket_type, jacket_ticket_pocket,
under_collar_felt_color, jacket_sleeve_button_type, jacket_sleeve_button_hole_color,
jacket_liner, inside_left_message, inside_right_message, suit_notes,
pants_fabric, pants_back_pockets, pockets, suspender_buttons, pleat_type,
pants_fit, bottoms, pants_notes,
vest_style, vest_fabric_color, vest_fabric_number, vest_notes,
shirt_neck, shirt_sleeve_measure, shirt_chest, shirt_back, shirt_length_measure,
shirt_back_shoulder, shirt_fabric_color_number, shirt_cuff_type, shirt_cuff_style,
shirt_embroidery, shirt_embroidery_color, shirt_embroidery_size, shirt_notes,
w_shoulder_to_bust, w_front_length, w_jacket_length, w_skirt_length, w_top_coat_length,
w_high_shoulders, w_low_shoulders, w_back_length, w_bust, w_bust_width, w_waist, w_hips,
w_sleeves, w_cuff, w_neck, w_slack_out_seam, w_slack_inseam, w_slack_cuff, w_figure_type
) VALUES (
'$customer_name', '$order_number', '$date', '$item_number_total', '$item_number_current', '$gender',
'{$measured_values['full_shoulder']}', '{$measured_values['sleeves']}', '{$measured_values['full_chest']}',
'{$measured_values['full_stomach']}', '{$measured_values['hips']}', '{$measured_values['front_chest']}',
'{$measured_values['chest_back']}', '{$measured_values['length_of_jacket']}', '{$measured_values['length_of_shirt']}',
'{$measured_values['length_of_vest']}', '{$measured_values['waist_for_pants']}', '{$measured_values['thigh']}',
'{$measured_values['full_crouch']}', '{$measured_values['pants_length']}', '{$measured_values['cuffs']}',
'{$measured_values['neck']}', '{$measured_values['biceps']}',
'$suit_type', '$jacket_fit', '$jacket_fabric_color', '$jacket_fabric_number', '$lapel_type',
'$lapel_width', '$jacket_stitching', '$stitch_color', '$lapel_button_hole_color',
'$jacket_button_type', '$jacket_vent_type', '$jacket_pocket_type', '$jacket_ticket_pocket',
'$under_collar_felt_color', '$jacket_sleeve_button_type', '$jacket_sleeve_button_hole_color',
'$jacket_liner', '$inside_left_message', '$inside_right_message', '$suit_notes',
'$pants_fabric', '$pants_back_pockets', '$pockets', '$suspender_buttons', '$pleat_type',
'$pants_fit', '$bottoms', '$pants_notes',
'$vest_style', '$vest_fabric_color', '$vest_fabric_number', '$vest_notes',
'$shirt_neck', '$shirt_sleeve_measure', '$shirt_chest', '$shirt_back', '$shirt_length_measure',
'$shirt_back_shoulder', '$shirt_fabric_color_number', '$shirt_cuff_type', '$shirt_cuff_style',
'$shirt_embroidery', '$shirt_embroidery_color', '$shirt_embroidery_size', '$shirt_notes',
'{$measured_values['w_shoulder_to_bust']}', '{$measured_values['w_front_length']}', '{$measured_values['w_jacket_length']}',
'{$measured_values['w_skirt_length']}', '{$measured_values['w_top_coat_length']}', '{$measured_values['w_high_shoulders']}',
'{$measured_values['w_low_shoulders']}', '{$measured_values['w_back_length']}', '{$measured_values['w_bust']}',
'{$measured_values['w_bust_width']}', '{$measured_values['w_waist']}', '{$measured_values['w_hips']}',
'{$measured_values['w_sleeves']}', '{$measured_values['w_cuff']}', '{$measured_values['w_neck']}',
'{$measured_values['w_slack_out_seam']}', '{$measured_values['w_slack_inseam']}', '{$measured_values['w_slack_cuff']}', '$w_figure_type'
)";
if ($conn->query($sql) === TRUE) {
$success = true;
$message = "Order successfully submitted.";
} else {
$success = false;
$message = "Error: " . $conn->error;
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Measurement Form v6 | The Affluent Man</title>
<link rel="stylesheet" href="css/style.css">
<style>
/* Base Form Styles */
body { background: #f9f9f9; padding: 20px; font-family: 'Times New Roman', Times, serif; }
.form-container { max-width: 1100px; margin: 0 auto; background: white; padding: 40px; box-shadow: 0 0 15px rgba(0,0,0,0.1); }
/* Header Grid */
.info-header-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-bottom: 2rem; }
.info-row { display: flex; align-items: baseline; margin-bottom: 0.8rem; }
.info-label { font-weight: bold; min-width: 140px; }
.info-line { border: none; border-bottom: 1px solid #000; flex-grow: 1; padding: 2px 5px; font-family: inherit; font-size: 1rem; }
/* Section Headers */
.section-title { font-weight: bold; font-size: 1.1rem; margin-top: 2rem; margin-bottom: 1rem; text-decoration: underline; text-transform: uppercase; }
/* Detailed Options Grid */
.options-row { display: flex; flex-wrap: wrap; margin-bottom: 0.8rem; align-items: center; }
.opt-label { font-weight: bold; margin-right: 10px; min-width: 150px; }
.opt-group { display: flex; gap: 15px; flex-wrap: wrap; align-items: center; }
.opt-check { display: flex; align-items: center; gap: 5px; }
.opt-input-line { border: none; border-bottom: 1px solid #000; width: 150px; }
.opt-input-short { border: none; border-bottom: 1px solid #000; width: 60px; }
/* Measurement Grid (Preserving Images) */
.measure-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 2rem; }
.measure-box { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.measure-thumb { width: 70px; height: 70px; border: 1px solid #ccc; display: flex; align-items: center; justify-content: center; position: relative; }
.measure-thumb img { max-width: 100%; max-height: 100%; }
.measure-content { flex-grow: 1; }
.measure-name { font-weight: bold; font-size: 0.9rem; text-transform: uppercase; margin-bottom: 5px; }
.measure-input-wrapper { display: flex; align-items: baseline; }
.measure-input { border: none; border-bottom: 1px dotted #000; width: 80px; margin-right: 5px; font-weight: bold; font-size: 1.1rem; }
/* Shirt Section */
.shirt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
/* Gender Toggle Switch */
.gender-selector {
display: flex;
justify-content: center;
gap: 2rem;
margin: 2rem 0;
background: #f0f0f0;
padding: 1rem;
border-radius: 50px;
}
.gender-option {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
padding: 10px 30px;
border-radius: 30px;
transition: all 0.3s ease;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
}
.gender-option input { display: none; }
.gender-option.active {
background: #000;
color: #fff;
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
/* Women's Grid Specifics */
.w-figure-selection {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 1.5rem;
margin-top: 2rem;
text-align: center;
}
.w-figure-item {
border: 1px solid #eee;
padding: 1rem;
border-radius: 8px;
cursor: pointer;
}
.w-figure-item:hover { border-color: #000; }
.w-figure-item img { max-width: 100px; margin-bottom: 10px; display: block; margin-left: auto; margin-right: auto; }
.hidden { display: none !important; }
@media (max-width: 800px) {
.info-header-grid, .measure-grid, .shirt-grid { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
<?php if ($message): ?>
<div style="padding: 1rem; margin-bottom: 1rem; text-align: center; background: <?php echo $success ? '#d4edda' : '#f8d7da'; ?>; color: <?php echo $success ? '#155724' : '#721c24'; ?>;">
<?php echo $message; ?>
</div>
<?php endif; ?>
<form method="POST" class="form-container">
<!-- HEADER INFO -->
<div class="info-header-grid">
<div>
<div class="info-row">
<span class="info-label">Customer Name:</span>
<input type="text" name="customerName" class="info-line" required>
</div>
<div class="info-row">
<span class="info-label">Customer Order #:</span>
<input type="text" name="orderNumber" class="info-line">
</div>
</div>
<div>
<div class="info-row">
<span class="info-label">Number of Items:</span>
<input type="text" name="itemNumberTotal" class="info-line" style="width: 50px; flex-grow: 0;">
</div>
<div class="info-row">
<input type="text" name="itemNumberCurrent" class="info-line" style="width: 50px; flex-grow: 0; text-align:center;">
<span style="margin: 0 10px;">of</span>
<span style="border-bottom: 1px solid #000; width: 50px; display:inline-block;"> </span>
</div>
</div>
</div>
<!-- GENDER SELECTION -->
<div class="gender-selector">
<label class="gender-option active" id="option-man">
<input type="radio" name="gender" value="man" checked onchange="toggleGender('man')"> MAN
</label>
<label class="gender-option" id="option-woman">
<input type="radio" name="gender" value="woman" onchange="toggleGender('woman')"> WOMAN
</label>
</div>
<!-- SUIT DETAILS -->
<div class="section-title">SUIT DETAILS</div>
<div class="options-row">
<span class="opt-label">Suit Type:</span>
<div class="opt-group">
<label class="opt-check"><input type="radio" name="suitType" value="Suit"> Suit</label>
<label class="opt-check"><input type="radio" name="suitType" value="Tuxedo"> Tuxedo</label>
</div>
</div>
<div class="options-row">
<span class="opt-label">Jacket Fit:</span>
<div class="opt-group">
<label class="opt-check"><input type="radio" name="jacketFit" value="Slim"> Slim</label>
<label class="opt-check"><input type="radio" name="jacketFit" value="Modern"> Modern</label>
<label class="opt-check"><input type="radio" name="jacketFit" value="Executive (Portly)"> Executive (Portly)</label>
<label class="opt-check"><input type="radio" name="jacketFit" value="Big & Tall"> Big & Tall</label>
</div>
</div>
<div class="options-row">
<span class="opt-label">Jacket Fabric:</span>
<div class="opt-group">
Color <input type="text" name="jacketFabricColor" class="opt-input-line">
Number <input type="text" name="jacketFabricNumber" class="opt-input-line">
</div>
</div>
<div class="options-row">
<span class="opt-label">Lapel Type:</span>
<div class="opt-group">
<label class="opt-check"><input type="radio" name="lapelType" value="Peak"> Peak</label>
<label class="opt-check"><input type="radio" name="lapelType" value="Notch"> Notch</label>
<label class="opt-check"><input type="radio" name="lapelType" value="Shawl"> Shawl</label>
</div>
</div>
<div class="options-row">
<span class="opt-label">Lapel Width:</span>
<div class="opt-group">
<label class="opt-check"><input type="radio" name="lapelWidth" value="Standard"> Standard</label>
<label class="opt-check"><input type="radio" name="lapelWidth" value="Custom"> Custom</label>
<label class="opt-check"><input type="radio" name="lapelWidth" value="CustomInches"> Custom Inches <input type="text" name="lapelWidthInches" class="opt-input-short"></label>
</div>
</div>
<div class="options-row">
<span class="opt-label">Jacket Stitching:</span>
<div class="opt-group">
<label class="opt-check"><input type="radio" name="jacketStitching" value="Pick Stitch"> Pick Stitch</label>
<label class="opt-check"><input type="radio" name="jacketStitching" value="NO Pick Stitch"> NO Pick Stitch</label>
Stitch Color <input type="text" name="stitchColor" class="opt-input-line">
</div>
</div>
<div class="options-row">
<span class="opt-label">Lapel Button Hole:</span>
<div class="opt-group">
<label class="opt-check"><input type="radio" name="lapelButtonHole" value="Standard"> Standard</label>
<label class="opt-check"><input type="radio" name="lapelButtonHole" value="Custom"> Custom Color <input type="text" name="lapelButtonHoleCustom" class="opt-input-line"></label>
</div>
</div>
<div class="options-row">
<span class="opt-label">Jacket Button:</span>
<div class="opt-group">
<label class="opt-check"><input type="radio" name="jacketButtonType" value="Single Button"> Single Button</label>
<label class="opt-check"><input type="radio" name="jacketButtonType" value="2 Button"> 2 Button</label>
<label class="opt-check"><input type="radio" name="jacketButtonType" value="3 Button"> 3 Button</label>
<label class="opt-check"><input type="radio" name="jacketButtonType" value="Double Breast"> Double Breast</label>
<label class="opt-check"><input type="radio" name="jacketButtonType" value="Custom"> Custom <input type="text" name="jacketButtonTypeCustom" class="opt-input-line" style="width:80px;"></label>
</div>
</div>
<div class="options-row">
<span class="opt-label">Jacket Vent:</span>
<div class="opt-group">
<label class="opt-check"><input type="radio" name="jacketVentType" value="No Vent"> No Vent</label>
<label class="opt-check"><input type="radio" name="jacketVentType" value="Center Vent"> Center Vent</label>
<label class="opt-check"><input type="radio" name="jacketVentType" value="Double Side Vent"> Double Side Vent</label>
</div>
</div>
<div class="options-row">
<span class="opt-label">Jacket Pocket:</span>
<div class="opt-group">
<label class="opt-check"><input type="radio" name="jacketPocketType" value="Standard"> Standard</label>
<label class="opt-check"><input type="radio" name="jacketPocketType" value="Slanted"> Slanted</label>
</div>
</div>
<div class="options-row">
<span class="opt-label">Ticket Pocket:</span>
<div class="opt-group">
<label class="opt-check"><input type="radio" name="jacketTicketPocket" value="Yes"> Yes</label>
<label class="opt-check"><input type="radio" name="jacketTicketPocket" value="No"> No</label>
</div>
</div>
<div class="options-row">
<span class="opt-label">Under Collar Felt:</span>
<input type="text" name="underCollarFeltColor" class="opt-input-line">
</div>
<div class="options-row">
<span class="opt-label">Sleeve Button:</span>
<div class="opt-group">
<label class="opt-check"><input type="radio" name="jacketSleeveButtonType" value="Functional"> Functional</label>
<label class="opt-check"><input type="radio" name="jacketSleeveButtonType" value="Faux"> Faux</label>
</div>
</div>
<div class="options-row">
<span class="opt-label">Sleeve Hole Color:</span>
<input type="text" name="jacketSleeveButtonHoleColor" class="opt-input-line">
</div>
<div class="options-row">
<span class="opt-label">Jacket Liner:</span>
<input type="text" name="jacketLiner" class="opt-input-line">
</div>
<div class="options-row">
<span class="opt-label">Inside (Left):</span>
<input type="text" name="insideLeftMessage" class="opt-input-line" style="width: 100%;">
</div>
<div class="options-row">
<span class="opt-label">Inside (Right):</span>
<input type="text" name="insideRightMessage" value="The Affluent Man Collection" class="opt-input-line" style="width: 100%;">
</div>
<div class="options-row">
<span class="opt-label">Notes:</span>
<textarea name="suitNotes" style="width: 100%; height: 60px;"></textarea>
</div>
<!-- PANT DETAILS -->
<div class="section-title">PANT DETAILS</div>
<div class="options-row">
<span class="opt-label">Pants Fabric:</span>
<div class="opt-group">
<label class="opt-check"><input type="checkbox" name="pantsFabricSame" value="1"> Same As Jacket</label>
Color & Fabric # <input type="text" name="pantsFabricCustom" class="opt-input-line">
</div>
</div>
<div class="options-row">
<span class="opt-label">Back Pockets:</span>
<div class="opt-group">
<label class="opt-check"><input type="radio" name="pantsBackPockets" value="Standard"> Standard</label>
<label class="opt-check"><input type="radio" name="pantsBackPockets" value="Flaps"> Flaps</label>
<label class="opt-check"><input type="radio" name="pantsBackPockets" value="No Back Pockets"> No Back Pockets</label>
</div>
</div>
<div class="options-row">
<span class="opt-label">Pockets:</span>
<div class="opt-group">
<label class="opt-check"><input type="radio" name="pockets" value="Slanted/Off Seam"> Slanted/Off Seam</label>
<label class="opt-check"><input type="radio" name="pockets" value="Straight/On Seam"> Straight/On Seam</label>
</div>
</div>
<div class="options-row">
<span class="opt-label">Suspender Btns:</span>
<div class="opt-group">
<label class="opt-check"><input type="radio" name="suspenderButtons" value="Yes"> Yes</label>
<label class="opt-check"><input type="radio" name="suspenderButtons" value="No"> No</label>
</div>
</div>
<div class="options-row">
<span class="opt-label">Pleat Type:</span>
<div class="opt-group">
<label class="opt-check"><input type="radio" name="pleatType" value="Plain"> Plain</label>
<label class="opt-check"><input type="radio" name="pleatType" value="Double"> Double</label>
<label class="opt-check"><input type="radio" name="pleatType" value="Triple"> Triple</label>
<label class="opt-check"><input type="radio" name="pleatType" value="A Pleat"> A Pleat</label>
</div>
</div>
<div class="options-row">
<span class="opt-label">Fit:</span>
<div class="opt-group">
<label class="opt-check"><input type="radio" name="pantsFit" value="Slim"> Slim</label>
<label class="opt-check"><input type="radio" name="pantsFit" value="Modern"> Modern</label>
<label class="opt-check"><input type="radio" name="pantsFit" value="Wide"> Wide</label>
</div>
</div>
<div class="options-row">
<span class="opt-label">Bottoms:</span>
<div class="opt-group">
<label class="opt-check"><input type="radio" name="bottoms" value="Unfinished"> Unfinished</label>
<label class="opt-check"><input type="radio" name="bottoms" value="Plain Bottom"> Plain Bottom</label>
<label class="opt-check"><input type="radio" name="bottoms" value="Cuff"> Cuff</label>
Height <input type="text" name="cuffHeight" class="opt-input-short" placeholder="(in)">
</div>
</div>
<div class="options-row">
<span class="opt-label">Notes:</span>
<textarea name="pantsNotes" style="width: 100%; height: 60px;"></textarea>
</div>
<!-- VEST DETAILS -->
<div class="section-title">VEST DETAILS</div>
<div class="options-row">
<span class="opt-label">Vest Style:</span>
<div class="opt-group">
<label class="opt-check"><input type="radio" name="vestStyle" value="Standard"> Standard</label>
<label class="opt-check"><input type="radio" name="vestStyle" value="Double Breast"> Double Breast</label>
<label class="opt-check"><input type="radio" name="vestStyle" value="Shawl"> Shawl</label>
<label class="opt-check"><input type="radio" name="vestStyle" value="Custom"> Custom (See Notes)</label>
</div>
</div>
<div class="options-row">
<span class="opt-label">Vest Fabric:</span>
<div class="opt-group">
Color <input type="text" name="vestFabricColor" class="opt-input-line">
Fabric # <input type="text" name="vestFabricNumber" class="opt-input-line">
</div>
</div>
<div class="options-row">
<span class="opt-label">Notes:</span>
<textarea name="vestNotes" style="width: 100%; height: 40px;"></textarea>
</div>
<!-- MEASUREMENTS SECTION -->
<div class="section-title" style="text-align: center; margin-top: 4rem;">MEASUREMENTS</div>
<!-- Men's Grid -->
<div id="mens-measurements">
<div class="measure-grid">
<!-- 1 -->
<div class="measure-box">
<div class="measure-thumb"><img src="images/photo-guide-upper.png" alt="1"></div>
<div class="measure-content">
<div class="measure-name">Full Shoulder (in)</div>
<input type="number" step="0.1" name="full_shoulder" class="measure-input">
</div>
</div>
<!-- 2 -->
<div class="measure-box">
<div class="measure-thumb"><img src="images/photo-guide-upper.png" alt="2"></div>
<div class="measure-content">
<div class="measure-name">Sleeves (in)</div>
<input type="number" step="0.1" name="sleeves" class="measure-input">
</div>
</div>
<!-- 3 -->
<div class="measure-box">
<div class="measure-thumb"><img src="images/photo-guide-upper.png" alt="3"></div>
<div class="measure-content">
<div class="measure-name">Full Chest (in)</div>
<input type="number" step="0.1" name="full_chest" class="measure-input">
</div>
</div>
<!-- 4 -->
<div class="measure-box">
<div class="measure-thumb"><img src="images/photo-guide-torso.png" alt="4"></div>
<div class="measure-content">
<div class="measure-name">Stomach (in)</div>
<input type="number" step="0.1" name="full_stomach" class="measure-input">
</div>
</div>
<!-- 5 -->
<div class="measure-box">
<div class="measure-thumb"><img src="images/photo-guide-torso.png" alt="5"></div>
<div class="measure-content">
<div class="measure-name">Hips (in)</div>
<input type="number" step="0.1" name="hips" class="measure-input">
</div>
</div>
<!-- 6 -->
<div class="measure-box">
<div class="measure-thumb"><img src="images/photo-guide-torso.png" alt="6"></div>
<div class="measure-content">
<div class="measure-name">Front Chest (in)</div>
<input type="number" step="0.1" name="front_chest" class="measure-input">
</div>
</div>
<!-- 7 -->
<div class="measure-box">
<div class="measure-thumb"><img src="images/photo-guide-torso.png" alt="7"></div>
<div class="measure-content">
<div class="measure-name">Chest Back (in)</div>
<input type="number" step="0.1" name="chest_back" class="measure-input">
</div>
</div>
<!-- 8 -->
<div class="measure-box">
<div class="measure-thumb"><img src="images/photo-guide-torso.png" alt="8"></div>
<div class="measure-content">
<div class="measure-name">Length of Jacket (in)</div>
<input type="number" step="0.1" name="length_of_jacket" class="measure-input">
</div>
</div>
<!-- 9 -->
<div class="measure-box">
<div class="measure-thumb"><img src="images/photo-guide-torso.png" alt="9"></div>
<div class="measure-content">
<div class="measure-name">Length of Shirt (in)</div>
<input type="number" step="0.1" name="length_of_shirt" class="measure-input">
</div>
</div>
<!-- 10 -->
<div class="measure-box">
<div class="measure-thumb"><img src="images/vest-guide.png" alt="10"></div>
<div class="measure-content">
<div class="measure-name">Length of Vest (in)</div>
<input type="number" step="0.1" name="length_of_vest" class="measure-input">
</div>
</div>
<!-- 11 -->
<div class="measure-box">
<div class="measure-thumb"><img src="images/pants-guide.png" alt="11"></div>
<div class="measure-content">
<div class="measure-name">Pant Waist (in)</div>
<input type="number" step="0.1" name="waist_for_pants" class="measure-input">
</div>
</div>
<!-- 12 -->
<div class="measure-box">
<div class="measure-thumb"><img src="images/pants-guide.png" alt="12"></div>
<div class="measure-content">
<div class="measure-name">Thigh (in)</div>
<input type="number" step="0.1" name="thigh" class="measure-input">
</div>
</div>
<!-- 13 -->
<div class="measure-box">
<div class="measure-thumb"><img src="images/pants-guide.png" alt="13"></div>
<div class="measure-content">
<div class="measure-name">Full Crotch (in)</div>
<input type="number" step="0.1" name="full_crouch" class="measure-input">
</div>
</div>
<!-- 14 -->
<div class="measure-box">
<div class="measure-thumb"><img src="images/pants-guide.png" alt="14"></div>
<div class="measure-content">
<div class="measure-name">Pants Length (in)</div>
<input type="number" step="0.1" name="pants_length" class="measure-input">
</div>
</div>
<!-- 15 -->
<div class="measure-box">
<div class="measure-thumb"><img src="images/pants-guide.png" alt="15"></div>
<div class="measure-content">
<div class="measure-name">Cuff (in)</div>
<input type="number" step="0.1" name="cuffs" class="measure-input">
</div>
</div>
</div>
</div>
<!-- Women's Grid -->
<div id="womens-measurements" class="hidden">
<div class="measure-grid">
<!-- 1 -->
<div class="measure-box">
<div class="measure-thumb"><img src="images/body-guide.png" alt="W1"></div>
<div class="measure-content">
<div class="measure-name">Shoulder to Bust (in)</div>
<input type="number" step="0.1" name="w_shoulder_to_bust" class="measure-input">
</div>
</div>
<!-- 2 -->
<div class="measure-box">
<div class="measure-thumb"><img src="images/body-guide.png" alt="W2"></div>
<div class="measure-content">
<div class="measure-name">Front Length (in)</div>
<input type="number" step="0.1" name="w_front_length" class="measure-input">
</div>
</div>
<!-- 3 -->
<div class="measure-box">
<div class="measure-thumb"><img src="images/jacket-guide.png" alt="W3"></div>
<div class="measure-content">
<div class="measure-name">Jacket Length (in)</div>
<input type="number" step="0.1" name="w_jacket_length" class="measure-input">
</div>
</div>
<!-- 4 -->
<div class="measure-box">
<div class="measure-thumb"><img src="images/body-guide.png" alt="W4"></div>
<div class="measure-content">
<div class="measure-name">Skirt Length (in)</div>
<input type="number" step="0.1" name="w_skirt_length" class="measure-input">
</div>
</div>
<!-- 5 -->
<div class="measure-box">
<div class="measure-thumb"><img src="images/jacket-guide.png" alt="W5"></div>
<div class="measure-content">
<div class="measure-name">Top Coat Length (in)</div>
<input type="number" step="0.1" name="w_top_coat_length" class="measure-input">
</div>
</div>
<!-- 6 -->
<div class="measure-box">
<div class="measure-thumb"><img src="images/body-guide.png" alt="W6"></div>
<div class="measure-content">
<div class="measure-name">High Shoulders (in)</div>
<input type="number" step="0.1" name="w_high_shoulders" class="measure-input">
</div>
</div>
<!-- 7 -->
<div class="measure-box">
<div class="measure-thumb"><img src="images/body-guide.png" alt="W7"></div>
<div class="measure-content">
<div class="measure-name">Low Shoulders (in)</div>
<input type="number" step="0.1" name="w_low_shoulders" class="measure-input">
</div>
</div>
<!-- 8 -->
<div class="measure-box">
<div class="measure-thumb"><img src="images/body-guide.png" alt="W8"></div>
<div class="measure-content">
<div class="measure-name">Back Length (in)</div>
<input type="number" step="0.1" name="w_back_length" class="measure-input">
</div>
</div>
<!-- 9 -->
<div class="measure-box">
<div class="measure-thumb"><img src="images/body-guide.png" alt="W9"></div>
<div class="measure-content">
<div class="measure-name">Bust (in)</div>
<input type="number" step="0.1" name="w_bust" class="measure-input">
</div>
</div>
<!-- 10 -->
<div class="measure-box">
<div class="measure-thumb"><img src="images/body-guide.png" alt="W10"></div>
<div class="measure-content">
<div class="measure-name">Bust Width (in)</div>
<input type="number" step="0.1" name="w_bust_width" class="measure-input">
</div>
</div>
<!-- 11 -->
<div class="measure-box">
<div class="measure-thumb"><img src="images/body-guide.png" alt="W11"></div>
<div class="measure-content">
<div class="measure-name">Waist (in)</div>
<input type="number" step="0.1" name="w_waist" class="measure-input">
</div>
</div>
<!-- 12 -->
<div class="measure-box">
<div class="measure-thumb"><img src="images/body-guide.png" alt="W12"></div>
<div class="measure-content">
<div class="measure-name">Hips (in)</div>
<input type="number" step="0.1" name="w_hips" class="measure-input">
</div>
</div>
<!-- 13 -->
<div class="measure-box">
<div class="measure-thumb"><img src="images/jacket-guide.png" alt="W13"></div>
<div class="measure-content">
<div class="measure-name">Sleeves (in)</div>
<input type="number" step="0.1" name="w_sleeves" class="measure-input">
</div>
</div>
<!-- 14 -->
<div class="measure-box">
<div class="measure-thumb"><img src="images/jacket-guide.png" alt="W14"></div>
<div class="measure-content">
<div class="measure-name">Cuff (in)</div>
<input type="number" step="0.1" name="w_cuff" class="measure-input">
</div>
</div>
<!-- 15 -->
<div class="measure-box">
<div class="measure-thumb"><img src="images/body-guide.png" alt="W15"></div>
<div class="measure-content">
<div class="measure-name">Neck (in)</div>
<input type="number" step="0.1" name="w_neck" class="measure-input">
</div>
</div>
<!-- 16 -->
<div class="measure-box">
<div class="measure-thumb"><img src="images/pants-guide.png" alt="W16"></div>
<div class="measure-content">
<div class="measure-name">Slack Out Seam (in)</div>
<input type="number" step="0.1" name="w_slack_out_seam" class="measure-input">
</div>
</div>
<!-- 17 -->
<div class="measure-box">
<div class="measure-thumb"><img src="images/pants-guide.png" alt="W17"></div>
<div class="measure-content">
<div class="measure-name">Slack Inseam (in)</div>
<input type="number" step="0.1" name="w_slack_inseam" class="measure-input">
</div>
</div>
<!-- 18 -->
<div class="measure-box">
<div class="measure-thumb"><img src="images/pants-guide.png" alt="W18"></div>
<div class="measure-content">
<div class="measure-name">Slack Cuff (in)</div>
<input type="number" step="0.1" name="w_slack_cuff" class="measure-input">
</div>
</div>
</div>
<p style="text-align: center; font-weight: bold; margin-top: 2rem;">PLEASE SELECT A FIGURE THAT BEST DESCRIBES YOU</p>
<div class="w-figure-selection">
<label class="w-figure-item">
<input type="radio" name="w_figure_type" value="Sloping Shoulder">
Sloping Shoulder
</label>
<label class="w-figure-item">
<input type="radio" name="w_figure_type" value="Regular Shoulder">
Regular Shoulder
</label>
<label class="w-figure-item">
<input type="radio" name="w_figure_type" value="Square Shoulder">
Square Shoulder
</label>
<label class="w-figure-item">
<input type="radio" name="w_figure_type" value="Very Erect">
Very Erect
</label>
<label class="w-figure-item">
<input type="radio" name="w_figure_type" value="Extreme Hollow Back">
Extreme Hollow Back
</label>
<label class="w-figure-item">
<input type="radio" name="w_figure_type" value="Extra Stout">
Extra Stout
</label>
</div>
</div>
<!-- SHIRT MEASURMENTS & INFO -->
<div class="section-title">SHIRT MEASUREMENTS & INFO</div>
<div class="shirt-grid">
<!-- Left Col -->
<div>
<div class="options-row">
<span class="opt-label">NECK (in):</span>
<input type="number" step="0.1" name="shirtNeck" class="opt-input-line">
</div>
<div class="options-row">
<span class="opt-label">SLEEVE (in):</span>
<input type="number" step="0.1" name="shirtSleeveMeasure" class="opt-input-line">
</div>
<div class="options-row">
<span class="opt-label">CHEST (in):</span>
<input type="number" step="0.1" name="shirtChest" class="opt-input-line">
</div>
<div class="options-row">
<span class="opt-label">BACK (in):</span>
<input type="number" step="0.1" name="shirtBack" class="opt-input-line">
</div>
<div class="options-row">
<span class="opt-label">LENGTH (in):</span>
<input type="number" step="0.1" name="shirtLengthMeasure" class="opt-input-line">
</div>
<div class="options-row">
<span class="opt-label">BACK SHOULDER (in):</span>
<input type="number" step="0.1" name="shirtBackShoulder" class="opt-input-line">
</div>
</div>
<!-- Right Col -->
<div>
<div class="options-row">
<span class="opt-label" style="min-width:180px;">FABRIC COLOR & #:</span>
<input type="text" name="shirtFabricColorNumber" class="opt-input-line" style="flex-grow:1;">
</div>
<div class="options-row">
<span class="opt-label">CUFF TYPE:</span>
<div class="opt-group">
<label class="opt-check"><input type="radio" name="shirtCuffType" value="Standard"> Standard</label>
<label class="opt-check"><input type="radio" name="shirtCuffType" value="French Cuff"> French Cuff</label>
Style <input type="text" name="shirtCuffStyle" class="opt-input-line">
</div>
</div>
<div class="options-row">
<span class="opt-label">EMBROIDERY:</span>
<div class="opt-group">
<label class="opt-check"><input type="radio" name="shirtEmbroidery" value="Yes"> Yes</label>
<label class="opt-check"><input type="radio" name="shirtEmbroidery" value="No"> No</label>
</div>
</div>
<div class="options-row">
<span class="opt-label" style="min-width:auto; margin-right:10px;">EMBROIDERY STITCH COLOR:</span>
<input type="text" name="shirtEmbroideryColor" class="opt-input-line">
</div>
<div class="options-row">
<span class="opt-label">EMBROIDERY SIZE:</span>
<div class="opt-group">
<label class="opt-check"><input type="radio" name="shirtEmbroiderySize" value="One Inch"> One Inch</label>
<label class="opt-check"><input type="radio" name="shirtEmbroiderySize" value="Half Inch"> Half Inch</label>
<label class="opt-check"><input type="radio" name="shirtEmbroiderySize" value="1/4 Inch"> 1/4 Inch</label>
</div>
</div>
</div>
</div>
<div class="options-row" style="margin-top: 1rem;">
<span class="opt-label">NOTES:</span>
<textarea name="shirtNotes" style="width: 100%; height: 60px;"></textarea>
</div>
<div style="margin-top: 3rem; text-align: center;">
<button type="submit" style="background: #000; color: white; padding: 15px 40px; border: none; font-size: 1.2rem; cursor: pointer; text-transform:uppercase; letter-spacing: 2px;">Submit Order</button>
</div>
</form>
<script>
function toggleGender(gender) {
const mensDiv = document.getElementById('mens-measurements');
const womensDiv = document.getElementById('womens-measurements');
const mensOpt = document.getElementById('option-man');
const womensOpt = document.getElementById('option-woman');
if (gender === 'man') {
mensDiv.classList.remove('hidden');
womensDiv.classList.add('hidden');
mensOpt.classList.add('active');
womensOpt.classList.remove('active');
} else {
mensDiv.classList.add('hidden');
womensDiv.classList.remove('hidden');
mensOpt.classList.remove('active');
womensOpt.classList.add('active');
}
}
</script>
</body>
</html>