{# Driver's License Secure Viewer Modal
   Requires: SignatureCanvas (dynamic import), Bootstrap 5 modal
   Permission: uri_store_settings (Owner level only)
#}
<div class="modal fade" id="dlViewerModal" tabindex="-1" aria-labelledby="dlViewerModalLabel" aria-hidden="true"
     data-terms-version="1.0">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="dlViewerModalLabel">
                    <i class="fa fa-shield-halved me-2"></i>Secure Document Access
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">

                {# State 1: Agreement / Consent Form #}
                <div id="dlStep1">
                    <div class="alert alert-warning d-flex align-items-start" role="alert">
                        <i class="fa fa-triangle-exclamation fa-lg me-3 mt-1"></i>
                        <div>
                            <strong>Restricted Access &ndash; Sensitive Personal Information</strong><br>
                            You are requesting access to a customer's full driver's license number.
                            This access is logged, timestamped, and audited. Please read the agreement below and provide your signature to proceed.
                        </div>
                    </div>

                    {# Terms & Conditions - Driver's License Information Access Agreement #}
                    <div class="border rounded p-3 mb-3" style="max-height: 300px; overflow-y: auto; background: var(--bs-gray-100, #f8f9fa);">
                        <h6 class="fw-bold text-center mb-3">Driver's License Information Access Agreement</h6>
                        <p class="small text-center fst-italic mb-3">Restricted Access &ndash; Sensitive Personal Information</p>
                        <p class="small">The full driver's license number associated with this record constitutes sensitive personal information and is protected under applicable federal, state, and local privacy laws.</p>
                        <p class="small">By clicking &ldquo;I Agree &ndash; Reveal Full Number&rdquo;, you acknowledge and agree to the following:</p>

                        <hr>
                        <h6 class="fw-bold small">1. Permitted Use</h6>
                        <p class="small">You are requesting access to a full driver's license number solely for legitimate investigative, fraud prevention, loss prevention, insurance, or law enforcement cooperation purposes directly related to your store's operations.</p>
                        <p class="small mb-1">You agree that you will:</p>
                        <ul class="small">
                            <li>Access the information only when reasonably necessary</li>
                            <li>Use the information solely for lawful business or investigative purposes</li>
                            <li>Not use the information for personal, marketing, or unrelated purposes</li>
                        </ul>

                        <hr>
                        <h6 class="fw-bold small">2. Legal Compliance</h6>
                        <p class="small mb-1">You acknowledge that driver's license information may be regulated under laws including, but not limited to:</p>
                        <ul class="small">
                            <li>The Driver's Privacy Protection Act (DPPA)</li>
                            <li>Applicable state privacy and identity theft statutes</li>
                            <li>Any other relevant data protection laws in your jurisdiction</li>
                        </ul>
                        <p class="small">You agree that you are solely responsible for ensuring your use, disclosure, and storage of this information complies with all applicable laws and regulations.</p>

                        <hr>
                        <h6 class="fw-bold small">3. Confidentiality &amp; Safeguarding</h6>
                        <p class="small mb-1">You agree to:</p>
                        <ul class="small">
                            <li>Maintain strict confidentiality of the information</li>
                            <li>Limit access to authorized personnel only</li>
                            <li>Implement reasonable safeguards to prevent unauthorized disclosure</li>
                            <li>Not copy, screenshot, export, or store the number outside of secure business systems unless legally required</li>
                        </ul>

                        <hr>
                        <h6 class="fw-bold small">4. Assumption of Responsibility</h6>
                        <p class="small">You acknowledge that access to this information is provided at your request and under your control.</p>
                        <p class="small mb-1">You assume full responsibility for:</p>
                        <ul class="small">
                            <li>Any use or misuse of the driver's license number</li>
                            <li>Any disclosure made by you or your employees</li>
                            <li>Any resulting claims, damages, regulatory penalties, or legal actions arising from such use or disclosure</li>
                        </ul>

                        <hr>
                        <h6 class="fw-bold small">5. Release &amp; Indemnification</h6>
                        <p class="small mb-1">To the fullest extent permitted by law, you agree that:</p>
                        <ul class="small">
                            <li>V2 Technology Solutions, Inc. (d/b/a BuyerKiosk) shall not be liable for any claims, damages, fines, penalties, or losses arising from your access to or use of this information.</li>
                            <li>You agree to indemnify and hold harmless V2 Technology Solutions, Inc., its owners, officers, employees, and affiliates from any claims or liabilities resulting from your use, disclosure, or mishandling of the driver's license number.</li>
                        </ul>

                        <hr>
                        <h6 class="fw-bold small">6. Audit &amp; Logging</h6>
                        <p class="small">You understand that access to this information may be logged, timestamped, and associated with your user account for audit and compliance purposes.</p>

                        <hr>
                        <h6 class="fw-bold small">Acknowledgment</h6>
                        <p class="small mb-0">By clicking &ldquo;I Agree &ndash; Reveal Full Number&rdquo;, you confirm that:</p>
                        <ul class="small mb-0">
                            <li>You are an authorized owner or manager</li>
                            <li>You have a legitimate investigative or legal purpose</li>
                            <li>You accept full legal responsibility for your access and use</li>
                        </ul>
                    </div>

                    {# Signature Area #}
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Signing As: <span class="text-primary">{{ currentUserName }}</span> <span class="text-danger">*</span></label>
                        <div class="border rounded p-2 bg-white" id="dlSignatureContainer" style="position: relative;">
                            <canvas id="dlSignatureCanvas" style="width: 100%; cursor: crosshair;"></canvas>
                            <div class="text-center text-muted small mt-1" id="dlSignatureHint">
                                <i class="fa fa-pen-fancy me-1"></i>Draw your signature above
                            </div>
                        </div>
                        <div class="d-flex justify-content-end mt-2">
                            <button type="button" class="btn btn-sm btn-outline-secondary" id="dlClearSignature">
                                <i class="fa fa-eraser me-1"></i>Clear
                            </button>
                        </div>
                    </div>

                    {# Checkbox Fallback (hidden by default, shown if canvas fails) #}
                    <div class="mb-3 d-none" id="dlFallbackContainer">
                        <div class="alert alert-info small">
                            <i class="fa fa-info-circle me-1"></i>
                            Signature drawing not available on this device. Please use the checkbox below instead.
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="dlFallbackCheckbox">
                            <label class="form-check-label" for="dlFallbackCheckbox">
                                I agree to the Terms of Access above and confirm my identity as <strong>{{ currentUserName }}</strong>.
                            </label>
                        </div>
                    </div>

                    <div class="d-grid">
                        <button type="button" class="btn btn-primary btn-lg" id="dlAgreeButton" disabled>
                            <i class="fa fa-check-circle me-1"></i>I Agree &ndash; Reveal Full Number
                        </button>
                    </div>
                </div>

                {# State 2: Display the DL Number #}
                <div id="dlStep2" class="d-none">
                    <div class="alert alert-info d-flex align-items-start" role="alert">
                        <i class="fa fa-eye-slash fa-lg me-3 mt-1"></i>
                        <div>
                            This information will be <strong>hidden when you close this dialog</strong>.
                            Do not copy or share this number.
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-body text-center py-4">
                            <div class="text-muted small mb-2">Driver's License Number</div>
                            <div id="dlFullNumber" class="font-monospace fs-3 fw-bold text-primary letter-spacing-wide">
                                &mdash;
                            </div>
                        </div>
                    </div>
                </div>

                {# State 3: Loading #}
                <div id="dlLoading" class="d-none text-center py-5">
                    <div class="spinner-border text-primary mb-3" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                    <p class="text-muted">Logging agreement and retrieving data...</p>
                </div>

                {# State 4: Error #}
                <div id="dlError" class="d-none">
                    <div class="alert alert-danger" role="alert">
                        <i class="fa fa-circle-exclamation me-2"></i>
                        <span id="dlErrorMessage">An error occurred.</span>
                    </div>
                    <div class="text-center">
                        <button type="button" class="btn btn-outline-primary" id="dlRetryButton">
                            <i class="fa fa-rotate-right me-1"></i>Try Again
                        </button>
                    </div>
                </div>

            </div>
            <div class="modal-footer" id="dlModalFooter">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>