#!/usr/bin/python

import fcgi, os, sys, cgi

count=0

while fcgi.isFCGI():
	req = fcgi.Accept()
	count = count+1
				
	req.out.write("Content-Type: text/html\n\n")
	req.out.write("""<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
	<html>
	<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="../../css/style.css">
	

<style>
/* Global reset for better sizing */
    *, *::before, *::after {
        box-sizing: border-box;
    }
    /* FORM WRAPPER */
form.CUS {
    max-width: 900px;
    width: 100%;
    margin: 20px auto;
    padding: 20px;
    background: #f9fafb;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-family: system-ui, sans-serif;
}

/* FLEX FIELDSET */
form.CUS fieldset {
    display: flex;
    flex-wrap: wrap;
    border: none;
    padding: 0;
    margin: 0;
}

/* BASE BLOCK STYLE */
form.CUS fieldset > p {
    width: 100%;
    padding: 10px;
    margin: 0;
    font-size: 0.95rem;
    color: #444;
}

/* Universal input/select styling */
form.CUS input,
form.CUS select,
form.CUS textarea {
    width: 100%;
    padding: 10px;
    margin-top: 6px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1rem;
}

/* ===============================
   ROW 1: Name, Phone, Address
=============================== */
form.CUS fieldset > p:nth-of-type(1),
form.CUS fieldset > p:nth-of-type(2),
form.CUS fieldset > p:nth-of-type(3) {
    width: 33.333%;
}

/* ===============================
   ROW 2: City, State, Zip Code
=============================== */
form.CUS fieldset > p:nth-of-type(4),
form.CUS fieldset > p:nth-of-type(5),
form.CUS fieldset > p:nth-of-type(6) {
    width: 33.333%;
}

/* ===============================
   SERVICE NEEDED TEXTAREA
=============================== */
form.CUS fieldset > p:nth-of-type(7) {
    width: 100%;
}

/* ===============================
   SERVICE DATE (Month, Day, Year)
   → ALL 3 IN ONE ROW
=============================== */

/* Make the 8th <p> (Service Date block) a flex row */
form.CUS fieldset > p:nth-of-type(8) {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    align-items: flex-start;
}

/* Month, Day, Year = 3 equal flex columns */
form.CUS fieldset > p:nth-of-type(8) select#service_date,
form.CUS fieldset > p:nth-of-type(8) select#service_day,
form.CUS fieldset > p:nth-of-type(8) input#service_year {
    flex: 1 1 0;
    width: auto;          /* flex handles width */
    margin-top: 6px;
}

/* ===============================
   SERVICE TIME (Full width)
=============================== */
form.CUS fieldset > p:nth-of-type(9) {
    width: 100%;
}

/* ===============================
   SUBMIT BUTTON (Full width)
=============================== */
form.CUS fieldset > p:nth-of-type(10) {
    width: 100%;
}

form.CUS input[type="submit"] {
    width: 100%;
    background: #2563eb;
    color: #fff;
    border: none;
    padding: 12px;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

form.CUS input[type="submit"]:hover {
    background: #1d4ed8;
}

/* Hide honeypot */
form.CUS input.subject {
    display: none;
}

/* ===============================
   MOBILE RESPONSIVE (stack fields)
=============================== */
@media (max-width: 600px) {

    form.CUS fieldset > p {
        width: 100%;
        padding: 6px 0;
    }

    /* Month, Day, Year full width stacked on mobile */
    form.CUS fieldset > p:nth-of-type(8) {
        flex-direction: column;
        gap: 6px;
    }

    form.CUS fieldset > p:nth-of-type(8) select#service_date,
    form.CUS fieldset > p:nth-of-type(8) select#service_day,
    form.CUS fieldset > p:nth-of-type(8) input#service_year {
        flex: none;
        width: 100% !important;
    }
/* ===============================
   ROW 1: Name, Phone, Address
=============================== */
form.CUS fieldset > p:nth-of-type(1),
form.CUS fieldset > p:nth-of-type(2),
form.CUS fieldset > p:nth-of-type(3) {
    width: 100%;
}

/* ===============================
   ROW 2: City, State, Zip Code
=============================== */
form.CUS fieldset > p:nth-of-type(4),
form.CUS fieldset > p:nth-of-type(5),
form.CUS fieldset > p:nth-of-type(6) {
    width: 100%;
}
}
</style>




</head>
	<body>
	<table cellspacing="0" cellpadding="0" border="0">
	<tr class="subhead" align="Left"><th>Name</th><th>Value</th></tr>""")
	req.out.write('<tr class="normal"><td>%s</td><td>%s</td></tr>\n' % ("Request counter", count))
	names = req.env.keys()
	names.sort()
	cl = ('alt','normal')
	i= 0
	for name in names:
		if not name.find("HTTP") or not name.find("REQUEST"):
			req.out.write('<tr class="%s"><td>%s</td><td>%s</td></tr>\n' % (cl[i%2],
				name, cgi.escape(`req.env[name]`)))
			i = i+1

	req.out.write('</table>\n







<form method="post" class="CUS" action="https://find2121.com/request_service_appointment.php">
            <fieldset>
                <legend>Fill Form to Request Service</legend>
                <p>
                    <input type="text" name="your_name" placeholder="Your Name" required>
                </p>
                <p>
                    <input type="tel" name="your_phone" placeholder="Your Phone Number" onChange="validatePhoneNumber(this.value)" required>
                </p>
                <p>
                    <input type="text" name="your_address" placeholder="Address (for Service)" required>
                </p>
                <p>
                    <input type="text" name="your_city" placeholder="Your City" required>
                </p>
                <p>
                    <input type="text" name="your_state" placeholder="Your State" maxlength="2" required>
                </p>
                <p>
                    <input type="text" name="your_zip" placeholder="Your Zip Code" maxlength="11" required>
                </p>
                <p>
                    <textarea name="service_needed" placeholder="Describe the type of service you need..." style="width: 90%; height: 120px" required></textarea>
                </p>
                <p>
                    Service Date:<br>
                    <select name="service_date" id="service_date" required>
                        <option value="">Pick a Month</option>
                        <option value="January">January</option>
                        <option value="February">February</option>
                        <option value="March">March</option>
                        <option value="April">April</option>
                        <option value="May">May</option>
                        <option value="June">June</option>
                        <option value="July">July</option>
                        <option value="August">August</option>
                        <option value="September">September</option>
                        <option value="October">October</option>
                        <option value="November">November</option>
                        <option value="December">December</option>
                    </select>
                    <select name="service_day" id="service_day" required>
                    </select>
                    <input type="number" maxlength="4" name="service_year" id="service_year">
                </p>
                <p>
                    Service Time:<br>
                    <select name="service_time" required>
                        <option value="">Pick a Time</option>
                        <option value="9:00am - 11:00am" selected>9:00am - 11:00am</option>
                        <option value="11:00am - 1:00ap">11:00am - 1:00pm</option>
                        <option value="1:00pm - 3:00pm">1:00pm - 3:00pm</option>
                        <option value="3:00pm - 5:00pm">3:00pm - 5:00pm</option>
                        <option value="5:00pm - 7:00pm">5:00pm - 7:00pm</option>
                    </select><input aria-label="name" name="subject" type="text" class="subject" placeholder="Subject">
                </p>
                <p><input type="submit" value="Request Service"></p>
            </fieldset>
            <input type="hidden" name="company_name" value="Aspen Hill Locksmith">
            <input type="hidden" name="return_url" value="https://locksmithsaspenhillmd.com/contact-form-thank-you.html">
        </form>


 <script>
        const dateToday = new Date();

        const date = new Date(dateToday);
        date.setDate(date.getDate() + 1);

        const monthName = date.toLocaleString('default', { month: 'long' });
        const currentYear = date.getFullYear();

        window.onload = function () {
            const dateSelect = document.getElementById('service_date');
            dateSelect.value = monthName;
            const yearElement = document.getElementById("service_year");
            yearElement.value = currentYear;
            AddMonthDays(monthName);
        }

        function AddMonthDays(monthNameValue) {
            let monthDays = 31;
            const currentYear = date.getFullYear();
            const dayOfMonth = date.getDate();
            if (monthNameValue == 'February') monthDays = 28;
            if (monthNameValue == 'February' && currentYear == '2028') monthDays = 29;
            if (monthNameValue == 'February' && currentYear == '2032') monthDays = 29;
            if (monthNameValue == 'February' && currentYear == '2036') monthDays = 29;
            if (monthNameValue == 'February' && currentYear == '2040') monthDays = 29;
            if (monthNameValue == 'February' && currentYear == '2044') monthDays = 29;
            if (monthNameValue == 'February' && currentYear == '2048') monthDays = 29;
            if (monthNameValue == 'April') monthDays = 30;
            if (monthNameValue == 'June') monthDays = 30;
            if (monthNameValue == 'September') monthDays = 30;
            if (monthNameValue == 'November') monthDays = 30;

            const selectElement = document.getElementById('service_day');
            selectElement.options.length = 0;
            const newOption = new Option('Pick a Day', '');
            selectElement.add(newOption);

            const monthDaysPlusOne = monthDays + 1;
            const SelectHtmlCode = '';
            for (let i = 1; i < monthDaysPlusOne; i++) {
                const newOption = new Option(i.toString(), i.toString());
                selectElement.add(newOption);
            }
            selectElement.value = dayOfMonth;
        }

        function validatePhoneNumber(phoneNumber) {
            const phoneNumberPattern = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
            const cleanedPhoneNumber = phoneNumber.replace(/\s/g, '');
            if (phoneNumberPattern.test(cleanedPhoneNumber)) {
                return;
            } else {
                alert('Please enter correct phone number format: ###-###-####');
            }
        }
    </script>


<!-- Start of LiveAgent integration script: Chat button: Rounded button with dot 47 -->
<script defer>
(function(d, src, c) { var t=d.scripts[d.scripts.length - 1],s=d.createElement('script');s.id='la_x2s6df8d';s.defer=true;s.src=src;s.onload=s.onreadystatechange=function(){var rs=this.readyState;if(rs&&(rs!='complete')&&(rs!='loaded')){return;}c(this);};t.parentElement.insertBefore(s,t.nextSibling);})(document,
'https://qenawey.ladesk.com/scripts/track.js',
function(e){ LiveAgent.createButton('lgj3zwgn', e); });
</script>
<!-- End of LiveAgent integration script -->

</body></html>\n')

	req.Finish()
