<!-- Wappler include head-page="layouts/main" fontawesome_5="cdn" bootstrap5="local" is="dmx-app" id="index" appConnect="local" components="{dmxBootstrap5Navigation:{},dmxAnimateCSS:{},dmxStateManagement:{},dmxDatastore:{},dmxBootstrap5Modal:{},dmxFormatter:{},dmxBootstrap5TableGenerator:{},dmxBootstrap5Toasts:{},dmxBootbox5:{},dmxBrowser:{},dmxBootstrap5Tooltips:{},dmxValidator:{},dmxS3Upload:{},dmxDatePicker:{},dmxMasonry:{},dmxBootstrap5Popovers:{},dmxPouchDB:{},dmxLazyLoad:{}}" jquery_slim_35="cdn" moment_2="cdn" -->
<script is="dmx-flow" id="pouchSignatureDataByID" type="text/dmx-flow">{
  pouchdb.single: {
    name: "pouchSignatureData",
    output: true,
    outputType: "object",
    connection: "dbCouch",
    sql: {
      type: "select",
      columns: [
        {table: "da", column: "db_signatureData"}
      ],
      table: {name: "db_training", alias: "da"},
      primary: "_id",
      joins: [],
      wheres: {
        condition: "AND",
        rules: [
          {
            id: "da._id",
            field: "da._id",
            type: "string",
            operator: "equal",
            value: "{{tableRepeat3[0].btn5.value}}",
            data: {
              table: "da",
              column: "_id",
              type: "text",
              columnObj: {name: "_id", type: "objectId", primary: true}
            },
            operation: "=",
            table: "da"
          }
        ],
        conditional: null,
        valid: true
      },
      orders: [],
      query: ""
    }
  }
}</script>
<dmx-value id="signatureEncoded" dmx-bind:value="signatureDataEncoded"></dmx-value>
<dmx-session-manager id="sessionStorage"></dmx-session-manager>
<div is="dmx-pouchdb-detail" id="pouchdbdetail1" dmx-bind:docid="" db="dbCouch" collection="db_training"></div>
<div is="dmx-pouchdb-view" id="pouchdbview1" db="dbCouch" collection="db_training"></div>
<script is="dmx-flow" id="pouchInsert" type="text/dmx-flow" dmx-on:error="toasts1.showSimple({message: 'ERROR ON INSERT', type: 'danger'})">[
  {
    pouchdb.insert: {
      name: "pouchResult",
      output: true,
      connection: "dbCouch",
      sql: {
        type: "insert",
        values: [
          {
            table: "da",
            column: "db_fullName",
            type: "text",
            value: "{{pouchconnectform1.inp_db_fullName.value}}"
          },
          {
            table: "da",
            column: "db_licenseNumber",
            type: "text",
            value: "{{pouchconnectform1.inp_db_licenseNumber.value}}"
          },
          {
            table: "da",
            column: "db_employeeID",
            type: "text",
            value: "{{pouchconnectform1.inp_owner.value}}"
          },
          {
            table: "da",
            column: "db_trainerSelected",
            type: "text",
            value: "{{pouchconnectform1.select1.selectedText}}"
          },
          {
            table: "da",
            column: "db_stateName",
            type: "text",
            value: "{{pouchconnectform1.db_stateIssue.selectedText}}"
          },
          {
            table: "da",
            column: "db_signatureData",
            type: "text",
            value: "{{pouchconnectform1.db_signatureData.value}}"
          },
          {table: "da", column: "dummy1", type: "text", value: "Dymmy Field"}
        ],
        table: "db_training",
        returning: "_id",
        query: "",
        params: [
          {
            name: ":P1",
            type: "expression",
            value: "{{pouchconnectform1.inp_db_fullName.value}}",
            test: ""
          },
          {
            name: ":P2",
            type: "expression",
            value: "{{pouchconnectform1.inp_db_licenseNumber.value}}",
            test: ""
          },
          {
            name: ":P3",
            type: "expression",
            value: "{{pouchconnectform1.inp_owner.value}}",
            test: ""
          },
          {
            name: ":P4",
            type: "expression",
            value: "{{pouchconnectform1.select1.selectedText}}",
            test: ""
          },
          {
            name: ":P5",
            type: "expression",
            value: "{{pouchconnectform1.db_stateIssue.selectedText}}",
            test: ""
          },
          {
            name: ":P6",
            type: "expression",
            value: "{{pouchconnectform1.db_signatureData.value}}",
            test: ""
          }
        ]
      }
    }
  },
  {
    toast.showSimple: {message: "Saved Entry", type: "success"}
  }
]</script>
<dmx-pouchdb id="pouchdb1" db="dbCouch"></dmx-pouchdb>
<dmx-cookie-manager id="cookies1"></dmx-cookie-manager>
<dmx-toggle id="toggleSignatureDataEncoded" checked="true"></dmx-toggle>
<div is="dmx-browser" id="browser1"></div>
<script is="dmx-flow" id="signatureEncodeFlow" type="text/dmx-flow">[
  {
    toast.showSimple: {message: "Encoding Signature", delay: 2500, type: "info"}
  },
  {
    runJS: {
      name: "signatureEncoded",
      output: true,
      outputType: "text",
      function: "getSignatureData"
    }
  }
]</script>
<script is="dmx-flow" id="flow1" type="text/dmx-flow">[
  {
    runJS: {
      name: "saveSignatureFlow",
      output: true,
      outputType: "text",
      function: "saveSignature"
    }
  },
  {
    alert: {message: "{{saveSignatureFlow}}"}
  }
]</script>
<dmx-serverconnect id="serverconnect_sign" url="/api/uploadSignature" noload="true"></dmx-serverconnect>
<div class="modal" id="modalVerifySignature" 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" contenteditable="false">Submitted Signature for {{pouchconnectform1.inp_db_fullName.value}}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" is="dmx-button" value=""></button>
            </div>
            <div class="modal-body">
                <p>Signature will show here. Is it acceptable? You can change it before saving everything.</p>
                <p>
                <div class="container" id="signatureContainer">
                    <div class="row">
                        <div class="col text-center">
                            <img id="uploadedSignature" alt="Signature will appear here" dmx-style:uploadedsignaturestyle="'max-width: 690; border: 1px solid #ccc;'" width="700" height="225" dmx-bind:src="signatureEncoded.value">
                        </div>
                    </div>
                </div>
                </p>
            </div>
            <div is="dmx-pouchdb-detail" id="pouchdbdetail2" dmx-bind:docid="tableRepeat3[0].btn5.value" db="dbCouch" collection="da"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<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 class="modal" id="modal-error" 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-danger"><i class="fas fa-times-circle fa-6x"></i></p>
                <h4 class="text-center fw-light">Error!</h4>
                <h4 class="text-center fw-light">Something wrong happen. <br>Get help from a Trainer.!</h4>
                <p>system returned: {{pouchconnectform1.lastError.message}}</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>


<div class="modal" id="SignatureModal1" 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">Hi {{pouchconnectform1.inp_db_fullName.value}}, double check info and sign the box below.&nbsp; Thanks.</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body text-center">
                <h5 class="text-start text-lowercase">Please review your information for errors. Close this window to correct any mistakes, then return to complete your task. Thank you!</h5>

                <table class="table">
                    <thead>
                        <tr>
                            <th scope="col">Name</th>
                            <th scope="col">DL No.</th>
                            <th scope="col">State</th>
                            <th scope="col">Date</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <th scope="row">{{pouchconnectform1.inp_db_fullName.value}}</th>
                            <td>{{pouchconnectform1.inp_db_licenseNumber.value}}</td>
                            <td>{{pouchconnectform1.db_stateIssue.value}}</td>
                            <td>{{pouchconnectform1.inp_owner.value}}</td>
                        </tr>
                    </tbody>
                </table>
                <p>&nbsp;Please submit your signature and click the save button.</p>

                <canvas id="signatureCanvas" width="700" height="200" style="border:1px solid #000;" onmousedown="startDrawing(event)" onmouseup="endDrawing()" onmousemove="draw(event)" class="bg-warning-subtle" ontouchstart="startDrawing(event.touches[0])" ontouchend="endDrawing()" ontouchmove="draw(event.touches[0])"></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" onclick="getSignatureData()">CLOSE</button>
                <button type="button" class="btn btn-success w-auto" data-bs-dismiss="modal" dmx-on:click="signatureEncodeFlow.run()">Accept</button>
            </div>
        </div>
    </div>
</div>
<div class="modal" id="modal1" is="dmx-bs5-modal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Record Count: {{DBSC1.data.query.count()}}&nbsp;</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <table class="table" dmx-show="DBSC1.data.query.hasItems()">
                        <thead>
                            <tr>
                                <th></th>
                                <th>Name</th>
                                <th>License number</th>
                                <th>state issue</th>
                                <th>Trainer ID</th>
                                <th>Date</th>
                            </tr>
                        </thead>
                        <tbody is="dmx-repeat" dmx-generator="bs5table" dmx-bind:repeat="DBSC1.data.query" id="tableRepeat1">
                            <tr>
                                <td>
                                    <form action="/api/delRecord" method="post" dmx-on:success="DBSC1.load({})" is="dmx-serverconnect-form" id="serverconnectform3">
                                        <input id="deleteid" name="deleteid" type="hidden" class="form-control" dmx-bind:value="ID">
                                        <button id="btn3" class="btn btn-sm text-danger" type="submit"><i class="far fa-trash-alt fa-lg"></i></button>

                                    </form>
                                </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>
                </div>
                <div class="row">
                    <div class="col-7">
                        <a></a>
                    </div>
                </div>

            </div>
            <div class="modal-footer">{{DateTimeNow.datetime.formatDate('MM-dd-yyyy')}}</div>
        </div>
    </div>
</div>
<dmx-toggle id="toggleRecordsTable" checked="true"></dmx-toggle>
<div class="container wappler-block pt-3 pb-3">

    <nav class="navbar navbar-expand-lg justify-content-around">
        <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>
        <div id="collapse1" class="collapse navbar-collapse">
            <a class="navbar-brand" href="#">ERT</a>
            <div class="navbar-nav w-100 justify-content-start">
                <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">File</a>
                    <div class="dropdown-menu" aria-labelledby="dropdown1">
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                        <a class="dropdown-item" href="#">Something else here</a>
                    </div>
                </div>
                <div class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" id="dropdown2" role="button" aria-haspopup="true" aria-expanded="false">Edit</a>
                    <div class="dropdown-menu" aria-labelledby="dropdown2">
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                        <a class="dropdown-item" href="#">Something else here</a>
                    </div>
                </div>
                <div class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" id="dropdown3" role="button" aria-haspopup="true" aria-expanded="false">view</a>
                    <div class="dropdown-menu" aria-labelledby="dropdown3">
                        <a class="dropdown-item" dmx-on:click="toggleRecordsTable.toggle()">Show Records</a>
                        <a class="dropdown-item" href="#" dmx-on:click="SignatureModal1.show()">SignatureModal1</a>
                        <a class="dropdown-item" href="#" dmx-on:click="toggleSignatureDataEncoded.toggle()">SignatureEncoding</a>
                        <a class="dropdown-item" href="#" dmx-on:click="modalVerifySignature.show()">modalVerifySignature</a>
                        <a class="dropdown-item" href="/observationPage" dmx-on:click="toggleSignatureDataEncoded.toggle()" internal="true">Observation</a>
                        <a class="dropdown-item" dmx-on:click="toggleSignatureDataEncoded.toggle()">ToggleViews</a>
                    </div>
                </div>
                <div class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" id="dropdown4" role="button" aria-haspopup="true" aria-expanded="false">Help</a>
                    <div class="dropdown-menu" aria-labelledby="dropdown4">
                        <a class="dropdown-item">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                        <a class="dropdown-item" href="#">Something else here</a>
                    </div>
                </div>
            </div>
        </div>
    </nav>
</div>

<dmx-datetime id="DateTimeNow" interval="minutes"></dmx-datetime>
<script is="dmx-flow" id="delConfirm" type="text/dmx-flow">{
  bootbox.confirm: {
    name: "confirmYesNo",
    message: "Delete ",
    title: "Remove list item",
    buttons: {
      confirm: {label: "Delete", className: "btn-danger"},
      cancel: {label: "Cancel", className: "btn-warning"}
    },
    then: {
      steps: {
        serverConnect: {
          name: "pageFlowSC1",
          outputType: "object",
          url: "/api/delRecord",
          site: "ERTFastFiller"
        }
      }
    }
  }
}</script>
<dmx-serverconnect id="DBInsert" url="/api/insert" noload="true"></dmx-serverconnect>
<div is="dmx-bs5-toasts" id="toasts1"></div>
<dmx-serverconnect id="DBSC1" url="/api/query"></dmx-serverconnect>
<dmx-value id="dataID"></dmx-value>
<dmx-json-datasource id="stateJSON" is="dmx-serverconnect" url="/states.json"></dmx-json-datasource>
<dmx-json-datasource id="trainerJSON" is="dmx-serverconnect" url="/trainer.json"></dmx-json-datasource>







<div class="container">
    <div class="row" id="daForm">

        <div class="col-6" id="userEntryForm">
            <dmx-value id="insertID"></dmx-value>
            <div class="container text-center">

                <div class="row">
                    <div class="col" id="colTop">
                        <h1 class="text-center">Please enter required information&nbsp;</h1>
                    </div>
                </div>
                <div class="row">
                    <p>*All fields are required</p>
                    <!--
                    <form is="dmx-serverconnect-form" id="serverconnectform1" method="post" action="/api/insert" dmx-generator="bootstrap5" dmx-form-type="horizontal" dmx-on:done="DBSC1.load({})" dmx-on:success="insertID.setValue(serverconnectform1.data.insert.identity);toasts1.showSimple({message: 'Save successful', delay: 2500, type: 'success'});cookies1.set('userIdentifier',serverconnectform1.data.insert.identity,{})" dmx-on:submit="SignatureModal1.hide()">
                    </form>
                    -->
                </div>
                <form id="pouchconnectform1">
                    <div class="form-group mb-3 row">
                        <label for="inp_db_fullName" class="col-sm-2 col-form-label">Full Name</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="inp_db_fullName" name="db_fullName" aria-describedby="inp_db_fullName_help" placeholder="Enter full name" required="">
                        </div>
                    </div>
                    <div class="form-group mb-3 row">
                        <label for="inp_db_licenseNumber" class="col-sm-2 col-form-label">License #</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" id="inp_db_licenseNumber" name="db_licenseNumber" aria-describedby="inp_db_licenseNumber_help" placeholder="Enter license number" required="">
                        </div>
                    </div>
                    <div class="form-group mb-3 row">
                        <label for="db_stateIssue" class="col-sm-2 col-form-label">State</label>
                        <div class="col-sm-6">
                            <select id="db_stateIssue" class="form-select" dmx-bind:options="stateJSON.data.states" optiontext="name" name="db_stateIssue" dmx-bind:value="selectedText" optionvalue="abbreviation">
                            </select>
                        </div>
                    </div>
                    <div class="form-group mb-3 row">
                        <label for="select1" class="col-sm-2 col-form-label">Trainer</label>
                        <div class="col-6">
                            <select id="select1" class="form-select" dmx-bind:options="trainerJSON.data.Trainer" name="db_employeeID" optiontext="Name" optionvalue="ID" dmx-bind:value="selectedValue">
                            </select>
                        </div>

                    </div>
                    <div class="form-group mb-3 row">
                        <label for="inp_owner" class="col-sm-2 col-form-label">Date</label>
                        <div class="col-sm-5">
                            <input type="text" class="form-control" id="inp_owner" name="owner" aria-describedby="inp_owner_help" placeholder="Date" dmx-bind:value="DateTimeNow.datetime.formatDate('MM-dd-yyyy')" readonly="true">
                        </div>
                    </div>
                    <div class="form-group mb-3 row" dmx-show="toggleSignatureDataEncoded.checked">
                        <div class="col align-self-center">
                            <div class="row">
                                <div class="col-6 offset-1">
                                    <button id="btn2" class="btn text-start">Encoded signature Data</button>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-9">
                            <textarea id="db_signatureData" class="form-control" name="db_signatureData" dmx-bind:value="signatureEncoded.value"></textarea>
                        </div>
                    </div>
                    <div class="row justify-content-center border border-2">
                        <h4 dmx-hide="!pouchconnectform1.db_signatureData.value.isEmpty()" class="text-center">Waiting for signature</h4>
                        <div class="row justify-content-center">

                            <img width="125" height="100" class="align-self-start bg-opacity-25 bg-light-subtle w-75" dmx-bind:data-srcset="" dmx-bind:data-src="pouchconnectform1.db_signatureData.value" dmx-bind:src="signatureEncoded.value" dmx-show="!pouchconnectform1.db_signatureData.value.isEmpty()" alt="SignatureCapture">
                        </div>
                    </div>
                    <p></p>
                    <button id="btn1" class="btn btn-lg text-bg-primary text-warning fw-bold text-capitalize" data-bs-toggle="modal" data-bs-target="#SignatureModal1"><span style="font-weight: normal;">Sign</span></button><button id="btn5" class="btn btn-lg text-warning fw-bold text-capitalize text-bg-success ms-4" data-bs-target="#SignatureModal1" dmx-on:click="pouchInsert.run();modalsuccess.show()" dmx-bind:disabled="inp_db_fullName.value.isEmpty()||inp_db_licenseNumber.value.isEmpty()">Save&nbsp;</button>
                    <button id="btn6" class="btn" type="reset">reset</button>
                </form>


            </div>
        </div>
        <div class="col-5 offset-1">


        </div>

    </div>

</div>
<div class="container" dmx-show="toggleSignatureDataEncoded.checked">
    <table class="table table-striped table-sm">
        <thead>
            <tr>
                <th></th>
                <th>full name</th>
                <th>license number</th>
                <th>Date</th>
                <th>signature data</th>
                <th>trainer&nbsp;</th>
                <th>state&nbsp;</th>
                <th>Dummy1</th>
            </tr>
        </thead>
        <tbody is="dmx-repeat" dmx-generator="bs5table" dmx-bind:repeat="pouchdbview1.data" id="tableRepeat3">
            <tr>
                <td dmx-text="_id"></td>
                <td dmx-text="db_fullName"></td>
                <td dmx-text="db_licenseNumber"></td>
                <td dmx-text="db_employeeID"></td>
                <td dmx-text="db_signatureData.substring(0, 15)">
                </td>
                <td dmx-text="db_trainerSelected"></td>
                <td dmx-text="db_stateName"></td>
                <td dmx-text="dummy1"></td>
            </tr>
        </tbody>
    </table>

</div>


<script src="/PDF/pdfLibSignature.js"></script>
<script src="/PDF/dummyFunctions.js"></script>
<script src="/js/libProcessScript.js"></script>
<meta name="ac:route" content="/index0">