<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Client/ClientMaster.master" CodeBehind="SendApplication.aspx.vb" Inherits="Web.SendApplication" %>
<%@ MasterType VirtualPath="~/Client/ClientMaster.master" %>
<%@ Register Src="~/_include/controls/Signature.ascx" TagPrefix="ctrl" TagName="Signature" %>
<asp:Content ID="Content1" ContentPlaceHolderID="phContent" runat="server">

    <div class="container">
        <h1>Support Services Request</h1>

        <div class="mb-3">
            <p>App Id: <asp:Literal ID="litId" runat="server" /></p>
            <p>Name: <asp:Literal ID="litName" runat="server" /></p>
            <p>Submitted: <asp:Literal ID="litSubmitted" runat="server" /></p>
        </div>

        <section id="packageSelection">
            <h2>Choose a Package</h2>
            <p id="required-message">Choose a bundled package or select individual services</p>
            <asp:PlaceHolder ID="phRequired" runat="server" Visible="false"><script>$('#required-message').addClass('alert alert-danger')</script></asp:PlaceHolder>

            <h6>Bundled Package</h6>
            <ul id="bundled-package" class="list-group mb-3">
                <li class="list-group-item d-flex justify-content-between">
                    <div>
                        <asp:CheckBox ID="chkBundle" runat="server" CssClass="float-left mr-1" />
                        <h6>Driver Pre-Qualification Basic DOT Compliance Bundled Package</h6>
                    </div>
                    <span class="text-muted">$99</span>
                </li>
            </ul>

            <h6>Individual Services</h6>
            <ul id="individual-services" class="list-group mb-3">
                <li class="list-group-item d-flex justify-content-between">
                    <div>
                        <asp:CheckBox ID="chkAppReview" runat="server" CssClass="float-left mr-1" />
                        <h6>Application Review (including Medical Qualification NRCME verification)</h6>
                    </div>
                </li>
                <li class="list-group-item d-flex justify-content-between">
                    <div>
                        <asp:CheckBox ID="chkSPH" runat="server" CssClass="float-left mr-1" />
                        <h6>Previous Employer Safety Performance History (SPH) Requests</h6>
                    </div>
                    <div class="text-muted text-right">
                        $35<br />
                        <small>+ $10 per USDOT regulated previous employer</small>
                    </div>
                </li>
                <li class="list-group-item d-flex justify-content-between">
                    <div>
                        <asp:CheckBox ID="chkMVR" runat="server" CssClass="float-left mr-1" />
                        <h6>Driver Motor Vehicle Report (MVR)</h6>
                    </div>
                    <div class="text-muted text-right">
                        $25<br />
                        <small>or price agreed upon in client's TCS Service Agreement</small>
                    </div>
                </li>
                <li class="list-group-item d-flex justify-content-between">
                    <div>
                        <asp:CheckBox ID="chkSubstanceTest" runat="server" CssClass="float-left mr-1" />
                        <h6>USDOT Pre-Employment Controlled Substance Test</h6>
                    </div>
                    <span class="text-muted">$48</span>
                </li>
                <li class="list-group-item d-flex justify-content-between">
                    <div>
                        <asp:CheckBox ID="chkPSP" runat="server" CssClass="float-left mr-1" />
                        <h6>Pre-Employment Screening Program (PSP) Report</h6>
                    </div>
                    <span class="text-muted">$15</span>
                </li>
                <li class="list-group-item d-flex justify-content-between">
                    <div>
                        <asp:CheckBox ID="chkCriminalBackgroundDatabase" runat="server" CssClass="float-left mr-1" />
                        <h6>Criminal Background Database Check</h6>
                    </div>
                    <span class="text-muted">$10</span>
                </li>
            </ul>

            <script type="text/javascript">
                $('.list-group-item').click(function () {
                    var checkbox = $(this).find('input')[0];
                    checkbox.checked = !checkbox.checked;
                });
                $('.list-group-item input').click(function () {
                    this.checked = !this.checked;
                });
            </script>
        </section>

        <section>
            <h2>Submit</h2>

            <div class="form-group">
                <asp:Label runat="server" AssociatedControlID="txtRequestorName" Text="Requestor's Name" />
                <asp:TextBox ID="txtRequestorName" runat="server" MaxLength="128" CssClass="form-control" />
            </div>
            <div class="form-group">
                <asp:Label runat="server" AssociatedControlID="txtRequestorTitle" Text="Requestor's Title" />
                <asp:TextBox ID="txtRequestorTitle" runat="server" MaxLength="50" CssClass="form-control" />
            </div>
            <div class="form-group">
                <ctrl:Signature ID="signature" runat="server" ContextId="packageSelection" />
            </div>

            <div class="row">
                <div class="col">
                    <asp:Button ID="btnCancel" runat="server" CssClass="btn btn-secondary" Text="Cancel" CausesValidation="false" />
                </div>
                <div class="col text-right">
                    <asp:Button ID="btnSubmit" runat="server" CssClass="btn btn-primary" Text="Submit" />
                </div>
            </div>
        </section>

    </div>

    <!-- Hackish, but these are required for the signature block -->
    <script>
        function getFormDump(jRoot) {

            var tagName = jRoot[0].tagName;
            if (typeof tagName == 'undefined') {
                var innerDump = '';
                var children = jRoot.contents();
                for (var i = 0; i != children.length; ++i)
                    innerDump += getFormDump($(children[i]));
                return innerDump;
            }
            tagName = tagName.toLowerCase();

            if (jRoot.hasClass('ignore-on-form-dump'))
                return '<!-- tag omitted: ' + tagName + '#' + jRoot.attr('id') + ' -->';

            var attrDump = '';
            var attributes = jRoot[0].attributes;
            for (var i = 0; i != attributes.length; ++i) {
                var svalue = attributes[i].value.replace('"', '\\"');
                attrDump += ' ' + attributes[i].name + '="' + attributes[i].value + '"';
            }
            if (jRoot.is(':input')) {
                var svalue = jRoot.val().replace('"', '\\"');
                attrDump += ' [value]="' + svalue + '"';
            }

            var innerDump = '';
            var children = jRoot.contents();
            for (var i = 0; i != children.length; ++i)
                innerDump += getFormDump($(children[i]));

            return '<' + tagName + attrDump + '>' + innerDump + '</' + tagName + '>';
        }
    </script>
    <style>
        .dialog {
            background: rgba(204,204,204, 0.5);
            display: none;
            overflow-y: scroll;
            padding: 16px;
            padding-top: 256px;
            text-align: center;
            position: fixed;
            left: 0;
            top: 0;
            height: 100%;
            width: 100%;
            z-index: 10000;
        }
            .dialog.visible {
                display: block;
            }
            .dialog h1 {
                background: #0d69ab;
                border-bottom: 1px solid #ccc;
                color: #111;
                font: bold 30px/30px "Open Sans", sans-serif;
                line-height: 1.5em;
                margin: 0 0 16px 0;
                text-align: center;
            }
            .dialog p {
                margin: 16px;
            }
            .dialog .buttonStrip {
                background: #eee;
                border-top: 1px solid #ccc;
                min-height: 39px;
                margin-top: 16px;
                padding: 5px 16px;
                width: 100%;
            }
            .dialog .content {
                background: #fff;
                border: 1px solid #111;
                border-radius: 5px;
                box-shadow: 2px 2px 2px #111;
                display: inline-block;
                margin: auto;
                max-width: 517px;
                max-height: 256px;
                overflow-y: auto;
                text-align: left;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
            }
            .dialog .content {
                animation: 0.2s ease-in-out dialog_movement normal both;
            }
            @keyframes dialog_movement {
                from {
                    opacity: 0;
                    top: -256px;
                }
                to {
                    opacity: 1;
                    top: 0;
                }
            }

        .formFields .dialog {
            display: none;
        }
        .dialog div {
            display: block;
        }
        .dialog .fakePad {
            display: none;   
        }
        .dialog.visible {
            display: block;
        }

        .signature h3 {
            border: none;
            color: #c30;
            font: 12px/16px Verdana, Geneva, sans-serif;
        }
        .signature img {
            display: block;
            max-height: 256px;
            max-width: 100%;
            width: 485px;
        }
        .signature p {
            color: #c30;
            font: 12px/16px Verdana, Geneva, sans-serif;
        }
            .signature p .hidden {
                display: none;
            }
        .signature>.content {
            background: #eee;
            border-bottom: 1px solid #ccc;
            cursor: pointer;
            margin-bottom: 16px;
            max-width: 517px;
            padding: 5px 16px;
            text-align: center;
        }
        .signature .dialog .content {
            max-height: 512px;
            max-width: 1030px;
            width: 100%;
        }
        .signature .fakePad {
            bottom: 0;
            display: none;
            height: 100%;
            left: 0;
            position: absolute;
            text-align: center;
            top: 0;
            width: 100%;
            z-index: 1;
        }
            .signature .fakePad >img {
                margin: auto;
                max-height: 100%; max-width: 100%;
                position: absolute;
                left: 50%; top: 50%; transform: translate(-50%, -50%);
            }
            .signature .fakePad .show { display: block; }
        .signature .pad {
        }
        .signature .padContainer {
            position: relative;   
        }
        .signature .required[style='display: inline;'] {
            display: none;
        }
            .signature .required[style='display: inline;']  + .content {
                background: #faa;
                border-color: #c00;
            }
    </style>

</asp:Content>
