        
                            
            
            
    <turbo-stream action="append" target="turbo_stream_messages">
                                                                        
    <template>
        <div data-turbo-temporary data-controller="modal"  class="modal bit-modal  " id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" >
            <div class="modal-dialog modal-md">
                <div class="modal-content">
                    <div class="modal-header ">
                        <div class="modal-title-wrapper" style="min-width: 0;">
                            <h1 class="modal-title fs-5 " id="exampleModalLabel">
                                                                Cart
                            </h1>
                                                    </div>
                                                <div class="ms-auto"></div>
                        <button type="button" class="btn-close  flex-grow-0 flex-shrink-0 ms-5" style="position: relative; z-index: 1;" data-bs-dismiss="modal" data-action="click->modal#close" aria-label="Close"></button>
                    </div>
                    <div class="modal-body  ">
                                <style>
            .cart-picker-modal.modal-dialog {
                max-width: 700px;
            }
            /* Booking pickers sit on a plain white card instead of the frosted
               gradient tint (frosted-modal.css) — needs the full selector +
               !important to out-rank that skin's !important background. */
            .modal.bit-modal .cart-picker-modal .modal-content {
                background: #fff !important;
            }
            .modal-header {
                min-height: 70px !important;
                padding-top: 1.25rem !important;
                padding-bottom: 1.25rem !important;
                position: relative !important;
            }
            .modal-header-logo-container {
                position: absolute;
                right: 60px;
                top: 50%;
                transform: translateY(-50%);
                height: 40px;
                display: flex;
                align-items: center;
            }
            .modal-header-logo-container img {
                max-height: 40px;
                width: auto;
            }
        </style>
        
                    <div data-controller="modal-logo"
                 data-modal-logo-logo-url-value="/uploads/logos/BIT-menuLogo-697ec3ee25e25.png"
                 data-modal-logo-logo-alt-value="Tri-County Career Center Logo"
                 style="display: none;">
            </div>
                
                                <style>
        :root {
            /* Colors */
            --bit-default: #000000;
            --bit-accent: #4971d0;
            --bit-primary: #05114d;
            --bit-secondary: #0088a3;
            --bit-success: #0d5433;
            --bit-danger: #9a2833;
            --bit-warning: #e17a05;
            --bit-info: #0dcaf0;
            --bit-light: #f8f9fa;
            --bit-dark: #0c3d6e;
            --bit-border-color: #dee2e6;

            /* Font Settings */
            --bit-font-family: Montserrat, sans-serif;
            --bit-body-color: #413751;
            --bit-form-field-font-size: 11px;
            --bit-form-field-height: 28px;

            /* Datepicker */
            --bit-datepicker: #2b569c;
        }
        .flatpickr-calendar,
        .flatpickr-calendar * {
            font-family: Montserrat, sans-serif !important;
        }
        .flatpickr-calendar .flatpickr-day.today,
        .flatpickr-calendar .flatpickr-day.today:not(.selected) {
            border-color: #2b569c !important;
        }

        .dob-modal-content {
            padding: 1rem;
        }

        .dob-header {
            text-align: center;
            margin-bottom: 1rem;
        }

        .dob-icon {
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, #3b82f6, #1d4ed8);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 0.75rem;
        }

        .dob-icon i {
            font-size: 1.5rem;
            color: white;
        }

        .dob-title {
            font-size: 1.1rem;
            font-weight: 600;
            color: #1e293b;
            margin-bottom: 0.25rem;
        }

        .dob-subtitle {
            color: #64748b;
            font-size: 0.85rem;
        }

        .product-preview {
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            padding: 0.75rem;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .product-preview-icon {
            width: 36px;
            height: 36px;
            background: linear-gradient(135deg, #1e3a8a, #374151);
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 0.75rem;
            flex-shrink: 0;
        }

        .product-preview-info h5 {
            margin: 0;
            font-size: 0.9rem;
            font-weight: 600;
            color: #1e293b;
        }

        .product-preview-info p {
            margin: 0;
            font-size: 0.75rem;
            color: #64748b;
        }

        .dob-field-wrapper .form-label {
            font-size: 1.3rem !important;
            color: #1e3a8a;
        }

        .dob-field-wrapper .form-control,
        .dob-field-wrapper .flatpickr-input,
        .dob-field-wrapper input.form-control {
            font-size: 1.4rem !important;
            padding: 0.6rem 0.75rem !important;
            height: auto !important;
        }

        .dob-age-display {
            text-align: center;
            font-size: 1.1rem;
            font-weight: 600;
            color: #1e3a8a;
            margin-top: 0.5rem;
            margin-bottom: 0.25rem;
            min-height: 1.6rem;
        }

    </style>

    <div class="dob-modal-content">
        <div class="dob-header">
            <div class="dob-icon">
                <i class="bi bi-calendar-check"></i>
            </div>
            <div class="dob-title">Enter Your Date of Birth</div>
            <p class="dob-subtitle">To show packages you're eligible for</p>
        </div>

                <div class="product-preview">
            <div class="product-preview-icon">
                BE
            </div>
            <div class="product-preview-info">
                <h5>Behind-the-Wheel (BTW) ONLY - 8 Hours</h5>
                                    <p>Requires age 15.5+</p>
                            </div>
        </div>

        <form name="date_of_birth_form" method="post" action="/cart/age-check/019e69e8-3b7c-724e-a2f7-e3a5723b9778/dob" data-turbo-stream="true">
            <div class="mb-3 dob-field-wrapper">
                <label class="form-label fw-semibold form-label required" for="date_of_birth_form_dateOfBirth">Date of Birth</label>
                <input type="date" id="date_of_birth_form_dateOfBirth" name="date_of_birth_form[dateOfBirth]" required="required" class="form-control form-control" max="2026-07-19" data-controller="flatpickr" data-flatpickr-alt-input-value="true" data-flatpickr-alt-format-value="m/d/Y" data-flatpickr-date-format-value="Y-m-d" data-flatpickr-enable-time-value="false" data-flatpickr-max-date-value="today" autocomplete="off" />
                
                <div class="dob-age-display" id="dob-age-display"></div>
            </div>

            <button type="submit" id="date_of_birth_form_submit" name="date_of_birth_form[submit]" class="btn btn-success btn-checkout btn-lg w-100 mb-3 btn">Continue</button>
        <input type="hidden" id="date_of_birth_form__token" name="date_of_birth_form[_token]" data-controller="csrf-protection" value="fb28875ed27a7ae930d55c41ed8aae88.H34rzqm3R-9e3RTIX6AccaRmzn6W6rNF4kg34ZzYZBc.awtYgceDK5hqrni5CZJ5LuIulxTJ04QMrT1ulOSrIFZeTmiB894zpS6FIA" /></form>
    </div>

    <script>
        (function() {
            function calculateAge(dobStr) {
                // Parse YYYY-MM-DD or MM/DD/YYYY
                let year, month, day;
                const iso = dobStr.match(/^(\d{4})-(\d{1,2})-(\d{1,2})$/);
                const us = dobStr.match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})$/);
                if (iso) {
                    year = +iso[1]; month = +iso[2]; day = +iso[3];
                } else if (us) {
                    month = +us[1]; day = +us[2]; year = +us[3];
                } else {
                    return null;
                }
                const today = new Date();
                let age = today.getFullYear() - year;
                const monthDiff = (today.getMonth() + 1) - month;
                if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < day)) {
                    age--;
                }
                return age;
            }

            function updateAgeDisplay() {
                const display = document.getElementById('dob-age-display');
                if (!display) return;

                const wrapper = document.querySelector('.dob-field-wrapper');
                if (!wrapper) return;

                // Try to find any input with a value: original (flatpickr-input) or alt input.
                const inputs = wrapper.querySelectorAll('input');
                let value = '';
                for (const el of inputs) {
                    if (el.type === 'submit' || el.type === 'button') continue;
                    if (el.value) { value = el.value; break; }
                }
                if (!value) { display.textContent = ''; return; }

                const age = calculateAge(value);
                if (age === null || isNaN(age)) { display.textContent = ''; return; }

                display.textContent = 'You are ' + age + ' years old';
            }

            const wrapper = document.querySelector('.dob-field-wrapper');
            if (wrapper) {
                wrapper.addEventListener('change', updateAgeDisplay);
                wrapper.addEventListener('input', updateAgeDisplay);
            }

            // Poll briefly after load in case flatpickr restores a value asynchronously
            updateAgeDisplay();
            let tries = 0;
            const poll = setInterval(() => {
                updateAgeDisplay();
                if (++tries > 10) clearInterval(poll);
            }, 200);
        })();
    </script>

    
    
                                            </div>
                                    </div>
            </div>
        </div>
    </template>
</turbo-stream>