<!-- Wappler include head-page="layouts/main" fontawesome_5="cdn" bootstrap5="local" is="dmx-app" id="observationPage" appConnect="local" components="{dmxBootstrap5TableGenerator:{},dmxMasonry:{},dmxFormatter:{},dmxBootstrap5Popovers:{},dmxBootstrap5Toasts:{},dmxDataTraversal:{},dmxStateManagement:{},dmxDatastore:{},dmxValidator:{},dmxBootstrap5Offcanvas:{},dmxBootstrap5Modal:{},dmxBootstrap5Navigation:{},dmxBootstrap5Tooltips:{},dmxBootbox5:{},dmxNotifications:{}}" -->
<dmx-notifications id="notifies1" closable="true" timeout="3000"></dmx-notifications>
<dmx-serverconnect id="serverconnect_signature" url="/api/uploadSignature" noload="true"></dmx-serverconnect>
<div class="modal" id="modalTestButton" is="dmx-bs5-modal" tabindex="-1">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">ModalTestButton</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <table class="table table-striped table-sm">
                    <thead>
                        <tr>
                            <th>Id</th>
                            <th>Db full name</th>
                            <th>Db license number</th>
                            <th>Db state issue</th>
                            <th>Db employee</th>
                            <th>Owner</th>
                        </tr>
                    </thead>
                    <tbody is="dmx-repeat" dmx-generator="bs5table" dmx-bind:repeat="data_view1.data" id="tableRepeat5">
                        <tr>
                            <td dmx-text="ID"></td>
                            <td dmx-text="db_fullName"></td>
                            <td dmx-text="db_licenseNumber"></td>
                            <td dmx-text="db_stateIssue"></td>
                            <td dmx-text="db_employeeID"></td>
                            <td dmx-text="owner"></td>
                        </tr>
                    </tbody>
                </table>
                <p>Only here for a demo purpose - Maybe will stay or go. dunno.&nbsp;</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>
<dmx-value id="var1"></dmx-value>
<script is="dmx-flow" id="flowClearPoints" type="text/dmx-flow">{
  runJS: {
    name: "zzmyTestFunction",
    output: true,
    outputType: "text",
    function: "toBase64",
    args: ["/PDF/testpdf.pdf", "{{datastore1.data}}", "{{data_view1.data}}"]
  }
}</script>
<script is="dmx-flow" id="processPDF" type="text/dmx-flow">{
  runJS: {
    name: "PDFprocess",
    output: true,
    outputType: "text",
    function: "processAndDownloadPdf",
    args: ["/PDF/testpdf.pdf", "{{datastore1.data}}", "{{data_view1.data}}"]
  }
}</script>
<div class="container wappler-block pt-3 pb-3">
    <div class="modal" id="modal-success" is="dmx-bs5-modal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <p class="text-center text-success"><i class="fas fa-check-circle fa-6x"></i></p>
                    <h4 class="text-center fw-light">Success!</h4>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal" id="modal1" is="dmx-bs5-modal" tabindex="-1">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Signature Capture</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body text-center">
                <p>Driver must sign for Road Test</p>
                <canvas id="signatureCanvas" width="700" height="200" style="border:1px solid #000;" onmousedown="startDrawing(event)" onmouseup="endDrawing()" onmousemove="draw(event)"></canvas>

            </div>
            <div class="modal-footer">
                <button id="btn4" class="btn btn-warning w-25" data-bs-toggle="button" onclick="clearCanvas()">Clear Signature</button>
                <button type="button" class="btn btn-danger w-auto" data-bs-dismiss="modal" dmx-bs-tooltip="'Close Signature Panel'" data-bs-trigger="hover" data-bs-placement="top">Close</button>
                <button type="button" class="btn btn-success w-auto">Save</button>
            </div>
        </div>
    </div>
</div>
<dmx-serverconnect id="qDB" url="/api/query"></dmx-serverconnect>
<div class="offcanvas offcanvas-start" id="offcanvas1" is="dmx-bs5-offcanvas" tabindex="-1">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title">Offcanvas title</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        <div class="container">
            <div class="form-check">
                <input class="form-check-input" type="checkbox" value="" id="CKBinput1" name="canvasCBShowHideSectionDetail">
                <label class="form-check-label" for="CKBinput1">Hide Section detail</label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox" value="" id="CKBinput2" name="canvasCBShowHideSectionDetail">
                <label class="form-check-label" for="CKBinput2">Hide Score detail</label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox" value="" id="CKBinput3" name="canvasCBShowHideSectionDetail">
                <label class="form-check-label" for="CKBinput3">Show Section detail</label>
            </div>
        </div>
        <p>

        </p>
        <div class="container"><button id="btn6" class="btn text-bg-danger" dmx-on:click="run({run:{name:'CLearPoints',outputType:'text',action:`datastore1.clear()`}})">Clear All Points</button></div>
    </div>
</div>
<dmx-toggle id="toggle1" checked="true"></dmx-toggle>
<dmx-datastore id="datastore1"></dmx-datastore>
<div is="dmx-bs5-toasts" id="toasts1"></div>
<dmx-serverconnect id="scQuerySubSections" url="/api/qSubSection" noload="true" dmx-param:subid="1"></dmx-serverconnect>
<dmx-serverconnect id="serverconnect1" url="/api/qSection"></dmx-serverconnect>
<meta name="ac:route" content="/observationPage">
<dmx-serverconnect id="scQuerySection" url="/api/qSection"></dmx-serverconnect>

<div class="container border-primary border-2 border">
    <nav class="navbar navbar-expand-lg">
        <span class="navbar-text bg-opacity-25">Controls</span>
        <div id="collapse1" class="collapse navbar-collapse">
            <div class="nav w-100">
                <a class="nav-item nav-link" href="#" onclick="runMyFunction()">Link</a>
                <a class="nav-item nav-link placeholder-glow" data-bs-toggle="offcanvas" data-bs-target="#offcanvas1" internal="true">Settings</a>
                <a class="nav-item nav-link" href="#" data-bs-toggle="modal" data-bs-target="#modal1">Print</a>
                <a class="nav-item nav-link" href="#" dmx-on:click="flowClearPoints.run()">Save</a>
                <a class="nav-item nav-link" href="#" dmx-on:click="processPDF.run()" dmx-hide="datastore1.data.isEmpty()">ProcessPDF</a>
                <div class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" id="dropdown1" role="button" aria-haspopup="true" aria-expanded="false">Options</a>
                    <div class="dropdown-menu" aria-labelledby="dropdown1">
                        <a class="dropdown-item" href="#">Modal Test </a>
                        <a class="dropdown-item" href="#">Another action</a>
                        <a class="dropdown-item" href="#">Something else here</a>
                    </div>
                </div>
            </div>
        </div><button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapse1" aria-controls="collapse1" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

    </nav>

    <div class="row">
        <div class="col-3 align-self-center">

            <select id="select1" class="form-select" dmx-bind:options="qDB.data.query" optiontext="db_fullName" optionvalue="ID" dmx-bind:disabled="datastore1.data.hasItems()">
            </select>


        </div>
        <div class="col">
            <table class="table table-striped table-sm">
                <thead>
                    <tr class="text-xl-center">
                        <th>Name</th>
                        <th>License No.</th>
                        <th>Issue State</th>
                        <th>Employee No.</th>
                        <th>DATE</th>
                    </tr>
                </thead>
                <tbody is="dmx-repeat" dmx-generator="bs5table" dmx-bind:repeat="data_view1.data" id="tableRepeat4">
                    <tr class="text-xl-center">
                        <td dmx-text="db_fullName" dmx-bs-tooltip="('Record # '+ID)" data-bs-trigger="hover" data-bs-placement="top"></td>
                        <td dmx-text="db_licenseNumber"></td>
                        <td dmx-text="db_stateIssue" dmx-class:bg-danger="db_stateIssue.isEmpty()"></td>
                        <td dmx-text="db_employeeID"></td>
                        <td dmx-text="owner"></td>
                    </tr>
                </tbody>
            </table>
            <dmx-data-view id="data_view1" dmx-bind:data="qDB.data.query" filter="ID==select1.value"></dmx-data-view>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <p>status messages: {{myResult}}</p>
        </div>
        <div class="col"></div>
    </div>
</div>

<div class="container border rounded border-warning-subtle border-3 mb-md-3 pt-md-4 pb-md-4" id="btnMenu">
    <nav class="navbar navbar-expand-lg justify-content-lg-around">
        <span class="navbar-text">Navbar Text</span>
        <span class="navbar-text">?</span>
    </nav>
    <div class="row justify-content-xl-between" is="dmx-masonry" id="repeat1" dmx-bind:repeat="scQuerySection.data.query" columns="3" gutter="10">
        <div class="col text-xl-center">
            <form id="form1" action="/api/qSection" method="post">
                <input id="text1" name="text1" type="hidden" class="form-control" dmx-bind:value="numSection">
                <button id="btn1" class="btn btn-primary" dmx-text="txtSection.substring(0,25)" data-bs-toggle="button" dmx-bind:value="numSection" dmx-on:click="toasts1.show({message: value, title: 'Button Value', subtitle: tableRepeat1[0].txtSection});scQuerySubSections.load({subid: value});varSelectedSection.setValue(value)">Button</button>
            </form>

        </div>
    </div>
</div>
<div class="container border-warning border border-5" dmx-hide="offcanvas1.CKBinput1.checked">

    <table class="table table-striped table-sm">
        <thead>
            <tr>
                <th>Num section</th>
                <th>Txt section</th>
            </tr>
        </thead>
        <tbody is="dmx-repeat" dmx-generator="bs5table" dmx-bind:repeat="scQuerySection.data.query" id="tableRepeat1">
            <tr>
                <td dmx-text="numSection"></td>
                <td dmx-text="txtSection"></td>
            </tr>
        </tbody>
    </table>
</div>
<div class="container" dmx-show="toggle1.checked">
    <div class="row" dmx-hide="offcanvas1.CKBinput2.checked">
        <div class="col">
            <p class="fw-bold">The DT should fill out the evaluation form during the Enhanced Road Test based on the below points system and description. Every item in Section must have a score to be considered complete and valid; there should be no blank spaces. A DA candidate must have a score of total score 10 or lower to pass.</p>

        </div>
        <div class="col">
            <table class="table table-striped">
                <thead class="table-primary">
                    <tr>
                        <th scope="col">Tier</th>
                        <th scope="col">Points</th>
                        <th scope="col">Description</th>
                    </tr>
                </thead>
                <tbody class="table-info">
                    <tr>
                        <th scope="row">1</th>
                        <td>0</td>
                        <td>DA did perform the action</td>
                    </tr>
                    <tr>
                        <th scope="row">2</th>
                        <td>1</td>
                        <td>DA did perform the action after DT provides guidance</td>
                    </tr>
                    <tr>
                        <th scope="row">3</th>
                        <td>2</td>
                        <td>DA failed to perform action</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <table class="table">
        <thead>
            <tr>
                <th scope="row">Points</th>
                <th>Is section</th>
                <th>Section No.</th>
                <th>Section Description</th>
            </tr>
        </thead>
        <tbody is="dmx-repeat" dmx-generator="bs5table" id="tableRepeat2" dmx-bind:repeat="scQuerySubSections.data.query">
            <tr>
                <td>
                    <select id="selPoints" class="form-select" name="sPoints" dmx-on:changed="datastore1.upsert({numSection: numSection, $id: numSection, description: txtSection},{numSection: numSection, Points: value, description: txtSection})" dmx-bind:id="numSection" dmx-bind:value="selectedValue">
                        <option value="0">0 points</option>
                        <option value="1">1 point</option>
                        <option value="2">2 points</option>
                        <option value="10">Did Not Demonstrate</option>
                    </select>
                </td>
                <td dmx-text="isSection"></td>
                <td dmx-text="numSection"></td>
                <td dmx-text="txtSection" dmx-class:bg-warning="txtSection.startsWith('*')"></td>
            </tr>
        </tbody>
    </table>
</div>

<div class="container" id="DS">
    <div class="row">
        <header class="text-center">
            <h3 id="scoreHeader" dmx-show="!datastore1.data.hasItems()" class="text-bg-danger" dmx-bs-popover="'If you save this file without points the observation will have zero points.'" dmx-bind:popover-title="'Info'" data-bs-trigger="hover focus">No Points recorded&nbsp;</h3>
        </header>
    </div>
    <table class="table table-striped" dmx-show="datastore1.data.hasItems()">
        <thead>
            <tr>
                <th>$id</th>
                <th>Num section</th>
                <th>Points</th>
                <th>Description&nbsp;
                    <button id="btn5" class="btn btn-outline-danger w-auto btn-sm lh-base" data-bs-toggle="button" dmx-on:click="run({'bootbox.confirm':{name:'clearPoints',message:'This will clear all points',title:'WATCH OUT',buttons:{confirm:{label:'Yes',className:'btn-danger'},cancel:{label:'Cancel'}},closeButton:false,backdrop:true,then:{steps:{run:{name:'clearDataStore1',outputType:'text',action:`datastore1.clear()`}}}}})" dmx-hide="!datastore1.data.hasItems()">Clear all points</button>
                </th>
            </tr>
        </thead>
        <tbody is="dmx-repeat" dmx-generator="bs5table" dmx-bind:repeat="datastore1.data" id="tableRepeat3">
            <tr>
                <td dmx-text="$id"></td>
                <td dmx-text="numSection"></td>
                <td dmx-text="Points"></td>
                <td dmx-text="description"></td>
            </tr>
        </tbody>
    </table>
</div>
<script src="/PDF/dummyFunctions.js"></script>
<script src="https://unpkg.com/pdf-lib/dist/pdf-lib.min.js"></script>
<script src="/js/libProcessScript.js"></script>
<!--
<script src="/PDF/pdfLibSignature.js"></script>
-->