session_start();
//error_reporting(E_ALL); // Report all PHP errors
//ini_set('display_errors', 1); // Display errors on the screen
// Capture UTM parameters from $_GET and store in $_SESSION
$utm_params = ['utm_id', 'utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content'];
foreach ($utm_params as $param) {
    if (isset($_GET[$param]) && !empty($_GET[$param])) {
        $_SESSION[$param] = htmlspecialchars(trim($_GET[$param]));
    }
}
?>


    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://js.hubspot.com/forms/v2.js"></script>
    <style>

        .form-container {
            background: #ffffff;
            padding: 32px;
            border-radius: 12px;
            max-width: 960px;
            margin: 0 auto;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        .form-container h2 {
            color: #1c1cb2;
            text-align: center;
            margin-bottom: 24px;
            font-weight: 600;
            font-size: 1.75rem;
        }
        .form-group {
            margin-bottom: 20px;
        }
        .form-group label {
            font-weight: 600;
            color: #1f2a44;
            margin-bottom: 6px;
            display: block;
        }
        .form-control {
            border: 1px solid #d1d5db;
            border-radius: 6px;
            font-size: 1rem;
            transition: all 0.2s ease;
            box-shadow: 0 1px 2px rgba(0,0,0,0.05);
            width: 100%;
            padding: 8px 12px; /* Added padding for better appearance */
        }
        .form-control:focus {
            border-color: #1c1cb2;
            box-shadow: 0 0 0 3px rgba(28,28,178,0.1);
            outline: none;
        }
        .form-control.textarea {
            min-height: 120px;
            resize: vertical;
        }
        .btn-submit {
            background: #1c1cb2;
            color: #ffffff;
            padding: 12px;
            border: none;
            border-radius: 6px;
            width: 100%;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .btn-submit:hover {
            background: #3b3bc7;
            transform: scale(1.02);
        }
        .success-message, .error-message {
            display: none;
            text-align: center;
            padding: 12px;
            margin-top: 16px;
            border-radius: 6px;
            font-size: 0.875rem;
        }
        .success-message {
            background: #d1fae5;
            color: #065f46;
        }
        .error-message {
            background: #fee2e2;
            color: #991b1b;
        }
        @media (max-width: 991px) {
            .form-container {
                padding: 24px;
                max-width: 640px;
            }
            .form-container h2 {
                font-size: 1.5rem;
            }
            .btn-submit {
                padding: 10px;
            }
        }
    </style>

    <div class="form-container">
        <h2>Contact Us</h2>
        <form id="contact-us-form" enctype="multipart/form-data">
            <div class="row">
                <div class="col-lg-6">
                    <div class="form-group">
                        <label for="first_name">First Name *</label>
                        <input type="text" class="form-control" id="first_name" name="first_name" required>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="form-group">
                        <label for="last_name">Last Name *</label>
                        <input type="text" class="form-control" id="last_name" name="last_name" required>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-6">
                    <div class="form-group">
                        <label for="job_title">Title</label>
                        <input type="text" class="form-control" id="job_title" name="job_title">
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="form-group">
                        <label for="company_name">Business Name *</label>
                        <input type="text" class="form-control" id="company_name" name="company_name" required>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-6">
                    <div class="form-group">
                        <label for="street_address">Address 1 *</label>
                        <input type="text" class="form-control" id="street_address" name="street_address" required>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="form-group">
                        <label for="address_2">Address 2</label> <!-- Made not required based on common practice -->
                        <input type="text" class="form-control" id="address_2" name="address_2">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-6">
                    <div class="form-group">
                        <label for="city">City *</label>
                        <input type="text" class="form-control" id="city" name="city" required>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="form-group">
                        <label for="state">State *</label>
                        <input type="text" class="form-control" id="state" name="state" required>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-6">
                    <div class="form-group">
                        <label for="postal_code">Zip Code *</label>
                        <input type="text" class="form-control" id="postal_code" name="postal_code" required>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="form-group">
                        <label for="phone_number">Primary Phone *</label>
                        <input type="text" class="form-control" id="phone_number" name="phone_number" required>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-6">
                    <div class="form-group">
                        <label for="mobile_phone_number">Business Phone</label>
                        <input type="text" class="form-control" id="mobile_phone_number" name="mobile_phone_number">
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="form-group">
                        <label for="email">Email Address *</label>
                        <input type="email" class="form-control" id="email" name="email" required>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-6">
                    <div class="form-group">
                        <label for="crematory_location">Do you currently have a crematory at your location?</label>
                        <select class="form-control" id="crematory_location" name="crematory_location">
                            <option value="Yes">Yes</option>
                            <option value="No">No</option>
                        </select>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="form-group">
                        <label for="annual_cremation_volume"># of Annual Cremations *</label>
                        <input type="number" class="form-control" id="annual_cremation_volume" name="annual_cremation_volume" required>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-6">
                    <div class="form-group">
                        <label for="preferred_manufacturer">Preferred Manufacturer</label>
                        <select class="form-control" id="preferred_manufacturer" name="preferred_manufacturer">
                            <option value="">Select</option>
                              <option value="American">American</option>
  <option value="Matthews">Matthews</option>
  <option value="B&L">B&L</option>
  <option value="FT">FT</option>
  <option value="US Cremations">US Cremations</option>
  <option value="Keller">Keller</option>
  <option value="Cremations Systems">Cremations Systems</option>
  <option value="Crawford">Crawford</option>
  <option value="Pennram">Pennram</option>
  <option value="Other">Other</option>
                        </select>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="form-group">
                        <label for="inquiry">Inquiry</label>
                        <select class="form-control" id="inquiry" name="inquiry" onchange="updateInquiryType(this)">
                            <option value="Equipment">Equipment</option>
                            <option value="Refractory">Refractory</option>
                            <option value="Service">Service</option>
                            <option value="Other">Other</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-6">
                    <div class="form-group">
                        <label for="inquiry_type">Inquiry Type</label>
                        <select class="form-control" id="inquiry_type" name="inquiry_type">
                            <option value="">Select Inquiry First</option>
                        </select>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="form-group">
                        <label for="company_corporate">Best way to describe your location</label>
                        <select class="form-control" id="company_corporate" name="company_corporate">
                            <option value="Independently Owned">Independently Owned</option>
                            <option value="SCI/Dignity Memorial">SCI/Dignity Memorial</option>
                            <option value="Park Lawn">Park Lawn</option>
                            <option value="Other Corporate Group">Other Corporate Group</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-6">
                    <div class="form-group">
                        <label for="other_corporate_group">Name of Other Corporate Group</label>
                        <input type="text" class="form-control" id="other_corporate_group" name="other_corporate_group">
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="form-group">
                        <label for="how_did_you_hear">How did you hear about us *</label>
                        <select class="form-control" id="how_did_you_hear" name="how_did_you_hear" required>
                            <option value="Web Ad">Web Ad</option>
                            <option value="Print Ad">Print Ad</option>
                            <option value="Convention">Convention</option>
                            <option value="Referral">Referral</option>
                            <option value="Salesperson">Salesperson</option>
                            <option value="Social Media">Social Media</option>
                            <option value="Google">Google</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="form-group">
                        <label for="message">Message *</label>
                        <textarea class="form-control textarea" id="message" name="message" required></textarea>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="form-group">
                        <label>
                            <input type="checkbox" name="receive_marketing_emails" checked style="margin-right: 8px;">
                            Receive Marketing Emails
                        </label>
                    </div>
                </div>
            </div>
            <input type="hidden" name="utm_id" value="">
            <input type="hidden" name="utm_source" value="">
            <input type="hidden" name="utm_medium" value="">
            <input type="hidden" name="utm_campaign" value="">
            <input type="hidden" name="utm_term" value="">
            <input type="hidden" name="utm_content" value="">
            <input type="hidden" name="form_type" value="contact-us">
            <div class="row">
                <div class="col-12">
                    <button type="submit" class="btn-submit">Submit</button>
                </div>
            </div>
        </form>
        <div class="success-message">Submission Successful! Check your email for confirmation.</div>
        <div class="error-message"></div>
    </div>
    <script>
        // This function dynamically updates the "Inquiry Type" dropdown based on the "Inquiry" selection.
        function updateInquiryType(select) {
            const inquiryType = document.getElementById('inquiry_type');
            inquiryType.innerHTML = '<option value="">Select</option>'; // Clear existing options and add a default
            
            // Define the options for each inquiry category
            const options = {
                'Equipment': ['Human Retort', 'Pet Retort', 'Water', 'Ancillary'],
                'Refractory': ['Total Re-Line', 'Floor', 'Refractory Other'],
                'Service': ['Tune-Up', 'Advanced Tune-Up', 'Upgrade', 'Troubleshoot/Repair'],
                'Other': ['Stack', 'Coolers + Rack', 'Parts/Supplies/Tools/Safety']
            };

            // Populate the dropdown if the selected inquiry has corresponding types
            if (options[select.value]) {
                options[select.value].forEach(opt => {
                    const option = document.createElement('option');
                    option.value = opt;
                    option.text = opt;
                    inquiryType.appendChild(option);
                });
            }
        }

        // Initialize the dropdown on page load
        document.addEventListener('DOMContentLoaded', function() {
            updateInquiryType(document.getElementById('inquiry'));
        });


        jQuery(document).ready(function($) {
            $('#contact-us-form').on('submit', function(e) {
                e.preventDefault();

                const formData = new FormData(this);
                // Add WP-specific fields so admin-ajax.php knows which function to call
                formData.append('action', 'submit_my_form'); // matches add_action in functions.php
                formData.append('nonce', MyFormAjax.nonce);  // from wp_localize_script()

                $.ajax({
                    url: MyFormAjax.ajax_url, // provided by wp_localize_script in functions.php
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        if (response.success) {
                            $('.success-message').show();
                            $('.error-message').hide();
                            $('#contact-us-form')[0].reset();
                            // Reset the inquiry type dropdown to its initial state
                            updateInquiryType(document.getElementById('inquiry'));
                        } else {
                            $('.error-message')
                                .text('Submission failed: ' + (response.data?.error || 'Unknown error'))
                                .show();
                            $('.success-message').hide();
                        }
                    },
                    error: function(xhr) {
                        $('.error-message')
                            .text('Submission failed: ' + xhr.status + ' ' + xhr.statusText)
                            .show();
                        $('.success-message').hide();
                    }
                });
            });
        });

    </script>