@extends('layouts.dashboard_sidebar')

@section('title', 'Upload Cases')

@section('main-content')
<div class="row">
  <div class="col-md-12">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3>Upload Cases</h3>
      </div>
      <div class="panel-body">
        <ul class="list-group" id="case-list">
        </ul>
        <button class="btn"
                name="add-case-button"
                onclick="addCaseListItem()">
          <span class="fa fa-plus"></span>
          Add New Case to Batch
        </button>
        <label name="batch-note">
          <h5>All Cases (Batch) Note:</h5>
          <textarea class="form-control" rows="1"></textarea>
        </label>
        <div id="submittal-in-progress-block"
             class="alert alert-info lead text-muted text-center"
             style="display: none;">
          Your batch is uploading...
        </div>
        <div id="submittal-error-block"
             class="alert alert-danger lead text-muted text-center"
             style="display: none;">
          There was an error uploading your batch. Please check your internet
          connection, refresh this page, and try again.
        </div>
        <!-- this success div mostly copied from original upload page --!>
        <div id="submittal-success-block"
             class="alert alert-success lead text-muted text-center"
             style="display: none;">
          Your batch has been uploaded successfully.
          <a id="batch-read-link" href="{{ route('file_history') }}">
            View it here.
          </a>
          <br><br>
          <a href="{{ route('file_history') }}">View All Uploads</a>
          or
          <a href="{{ route('file_upload') }}">Upload More</a>
        </div>
        <p id="price-note-about-significant-changes">
          <i>
          Note: We will confirm any significant changes to your estimated prices
          with you.
          </i>
        </p>
        <button class="btn btn-lg"
                id="submit-button"
                onclick="submitBatch()">
          Submit Cases
        </button>
      </div>
    </div>
  </div>
</div>

<li style="display: none;" class="list-group-item" id="case-list-item-master">
  <!-- 2 elements same line bootstrap: https://stackoverflow.com/a/24499861 --!>
  <div class="row">
    <div class="col-xs-6 text-left">
      <h2 name="case-name">Case</h2>
    </div>
    <div class="col-xs-6 text-right">
      <div name="estimated-case-price" value="-1">
        <h4 style="text-align: right;">
          <span name="message"></span>
          Estimated Case Total: <span name="amount"></span>
        </h4>
      </div>
    </div>
  </div>
  <label class="case-detail-input">
    Patient Name:
    <input type="text" name="patient-name">
  </label>
  <label class="case-detail-input"
@if ($userIsDentist)
         style="display: none;"
@endif
  >
    Mill Priority / Pricing:
    <select name="turnaround-speed"
            onchange="updateCaseJobPrices(this);">
@foreach ($caseTurnaroundSpeeds as $caseTurnaroundSpeed)
      <option value="{{ $caseTurnaroundSpeed->id }}"
              data-internal-name="{{ $caseTurnaroundSpeed->internalName }}">
        {{ $caseTurnaroundSpeed->displayName }}
      </option>
@endforeach
    </select>
  </label>
  <label class="case-detail-input">
    Shipping Method:
    <select name="shipping-method">
@foreach ($caseShippingMethods as $caseShippingMethod)
      <option value="{{ $caseShippingMethod->id }}">
        {{ $caseShippingMethod->name }}
      </option>
@endforeach
    </select>
  </label>
  <ul class="list-group">
  </ul>
  <button class="btn"
          name="add-job-button"
          onclick="addJobListItemToCase(this, null)">
    <span class="fa fa-plus"></span>
    Add New Job to Case
  </button>
  <div name="estimated-case-price" value="-1">
    <h4 style="text-align: right;">
      <span name="message"></span> Estimated Case Total: <span name="amount"></span>
    </h4>
  </div>
  <label name="case-note">
    <h5>Case Note:</h5>
    <textarea class="form-control" rows="1"></textarea>
  </label>
  <button class="btn"
          name="remove-case-button"
          onclick="removeCaseListItem(this)">
    <span class="fa fa-minus"></span>
    Remove Case from Batch
  </button>
</li>

<li style="display: none;"
    class="list-group-item"
    id="job-list-item-master"
    data-job-temporary-number="">
  <h3 name="job-name">Job</h3>
  <div name="job-input-table-container">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th name="restoration-type">Restoration</th>
        <th name="bridge-is-all-on-x">All-on-X?</th>
        <th name="tooth-number">Tooth Number</th>
        <th name="material">Material</th>
        <th name="material-product">Product</th>
        <th name="lithdi-sintering">Sintered</th>
        <th name="shade">
          <a href="/AMS-Shade-Conversions.docx" target="_blank">
            Shade
            <span class="fa fa-question-circle"></span>
          </a>
        </th>
        <th name="blocker">Add Blocker?</th>
        <th name="all-on-x-pre-sintered-tissue-shading">
          Pre-Sintered Tissue Shading?
        </th>
        <th name="gold-anodizing">Gold Anodizing</th>
        <th name="include-tibase">Include Tibase</th>
        <th name="assembled">Assembled (Bonded)</th>
        <th name="stain-and-glaze">Stain and Glaze</th>
        <th name="bonded">Bonded</th>
        <th name="design-service">Design Service</th>
        <th name="bridge-number-of-units">Number of Units</th>
        <th name="bridge-tooth-numbers">Tooth Numbers</th>
        <th name="implant-model">Implant Type</th>
        <th name="implant-size">Implant Size</th>
        <th name="tibase-type">Tibase Type</th>
        <th name="bridge-is-screw-retained">Is Screw-retained</th>
        <th name="model-type">Model Type</th>
        <th name="model-arch-type">Arches</th>
        <th name="model-size">Size</th>
        <th name="bite-pins">Bite Pins</th>
        <th name="extra-separate-dies">Separate Dies</th>
        <th name="vertex-articulator">Vertex Articulator</th>
        <th name="3d-model-note">Model Unit Details</th>
        <th name="bar-note">Bar Details</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td name="restoration-type">
          <select onchange="updateJob(this);">
          </select>
        </td>
        <td name="bridge-is-all-on-x">
          <form>
            <label>
              <input type="radio"
                     name="bridge-is-all-on-x"
                     value="1"
                     onchange="updateJob(this);"
              >
              Yes
            </label>
            <label>
              <input type="radio"
                     name="bridge-is-all-on-x"
                     value="0"
                     onchange="updateJob(this);"
                     checked
              >
              No
            </label>
          </form>
        </td>
        <td name="tooth-number">
          <select onchange="updateJob(this);">
            <option value="-1">--</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>
            <option value="17">17</option>
            <option value="18">18</option>
            <option value="19">19</option>
            <option value="20">20</option>
            <option value="21">21</option>
            <option value="22">22</option>
            <option value="23">23</option>
            <option value="24">24</option>
            <option value="25">25</option>
            <option value="26">26</option>
            <option value="27">27</option>
            <option value="28">28</option>
            <option value="29">29</option>
            <option value="30">30</option>
            <option value="31">31</option>
            <option value="32">32</option>
          </select>
        </td>
        <td name="material">
          <select onchange="updateJob(this);">
          </select>
        </td>
        <td name="material-product" data-has-lab-default-been-applied="no">
          <select onchange="updateJobAfterMaterialProductChange(this);">
          </select>
        </td>
        <td name="lithdi-sintering">
          <form>
            <label>
              <input type="radio"
                     name="lithdi-sintering"
                     value="1"
                     onchange="updateJob(this);"
                     checked>
              Yes
            </label>
            <label>
              <input type="radio"
                     name="lithdi-sintering"
                     value="0"
                     onchange="updateJob(this);">
              No
            </label>
          </form>
        </td>
        <td name="shade">
          <select>
          <option value="-1">
            - Select -          </option>
@foreach ($shadesSortedBySystem as $shadeSystem)
            <optgroup label="{{  $shadeSystem['systemName']  }}">
    @foreach ($shadeSystem['shades'] as $shade)
              <option value="{{ $shade->id }}">
                {{ $shade->name }}
              </option>
    @endforeach
            </optgroup>
@endforeach
          </select>
        </td>
        <td name="blocker">
          <form>
            <label>
              <input type="radio"
                     name="blocker"
                     value="1"
                     onchange="updateJob(this);"
                     >
              Yes
            </label>
            <label>
              <input type="radio"
                     name="blocker"
                     value="0"
                     onchange="updateJob(this);"
                     checked>
              No
            </label>
          </form>
        </td>
        <td name="all-on-x-pre-sintered-tissue-shading">
          <form>
            <label>
              <input type="radio"
                     name="all-on-x-pre-sintered-tissue-shading"
                     value="1"
              >
              Yes
            </label>
            <label>
              <input type="radio"
                     name="all-on-x-pre-sintered-tissue-shading"
                     value="0"
                     checked
              >
              No
            </label>
          </form>
        </td>
        <td name="gold-anodizing">
          <form>
            <label>
              <input type="radio"
                     name="gold-anodizing"
                     value="1"
                     onchange="updateJobPrice(this);">
              Yes
            </label>
            <label>
              <input type="radio"
                     name="gold-anodizing"
                     value="0"
                     onchange="updateJobPrice(this);"
                     checked>
              No
            </label>
          </form>
        </td>
        <td name="include-tibase">
          <form>
            <label>
              <input type="radio"
                     name="include-tibase"
                     value="1"
                     onchange="updateJob(this);"
                     checked>
              Yes
            </label>
            <label>
              <input type="radio"
                     name="include-tibase"
                     value="0"
                     onchange="updateJob(this);">
              No
            </label>
          </form>
        </td>
        <td name="assembled">
          <form>
            <label>
              <input type="radio"
                     name="assembled"
                     value="1"
                     onchange="updateJob(this);"
                     checked>
              Yes
            </label>
            <label>
              <input type="radio"
                     name="assembled"
                     value="0"
                     onchange="updateJob(this);">
              No
            </label>
          </form>
        </td>
        <td name="stain-and-glaze">
          <form>
            <label>
              <input type="radio"
                     name="stain-and-glaze"
                     value="1"
                     onchange="updateJobPrice(this);"
@if ($userIsDentist)
                     checked
@endif
              >
              Yes
            </label>
            <label>
              <input type="radio"
                     name="stain-and-glaze"
                     value="0"
                     onchange="updateJobPrice(this);"
@if (!$userIsDentist)
                     checked
@endif
              >
              No
            </label>
          </form>
        </td>
        <td name="bonded">
          <form>
            <label>
              <input type="radio"
                     name="bonded"
                     value="1"
                     checked>
              Yes
            </label>
            <label>
              <input type="radio"
                     name="bonded"
                     value="0">
              No
            </label>
          </form>
        </td>
        <td name="design-service">
          <form>
            <label>
              <input type="radio"
                     name="design-service"
                     value="0"
@if (!$userIsDentist)
                     checked
@endif
                     onchange="updateJob(this);">
              <span name="mill-only-name">
                Mill Only
              <span>
            </label>
            <label>
              <input type="radio"
                     name="design-service"
                     value="1"
                     onchange="updateJob(this);"
@if ($userIsDentist)
                     checked
@endif
              >
              <span name="mill-and-design-name">
                Design and Mill
              <span>
            </label>
          </form>
        </td>
        <td name="bridge-number-of-units">
          <select onchange="updateJob(this);">
            <option value="2">2</option>
            <option value="3" selected>3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>
          </select>
        </td>
        <td name="bridge-tooth-numbers">
          <input type="text">
        </td>
        <td name="implant-model">
          <select onchange="updateJob(this);">
            <option value="-1">
              - Select -            </option>
@foreach ($implantModelNames as $implantModelName)
            <option value="0">
              {{ $implantModelName }}
            </option>
    @endforeach
          </select>
        </td>
        <td name="implant-size">
          <select>
          </select>
        </td>
        <td name="tibase-type">
          <select onchange="updateJobAfterTibaseTypeChange(this);">
            <option value="-1">
              - Select -            </option>
@foreach ($tibaseTypes as $tibaseType)
            <option value="{{ $tibaseType->id }}">
              {{ $tibaseType->name }}
            </option>
@endforeach
          </select>
        </td>
        <td name="bridge-is-screw-retained">
          <form>
            <label>
              <input type="radio"
                     name="bridge-is-screw-retained"
                     value="1"
                     onchange="updateJob(this);">
              Yes
            </label>
            <label>
              <input type="radio"
                     name="bridge-is-screw-retained"
                     value="0"
                     onchange="updateJob(this);"
                     checked>
              No
            </label>
          </form>
        </td>
        <td name="model-type">
          <select onchange="updateJob(this);">
@foreach ($threeDimensionalModelTypes as $threeDimensionalModelType)
            <option value="{{ $threeDimensionalModelType->id }}"
                    data-internal-name
                        ="{{ $threeDimensionalModelType
                             ->internalName }}">
              {{ $threeDimensionalModelType->displayName }}
            </option>
@endforeach
          </select>
        </td>
        <td name="model-arch-type">
          <select onchange="updateJob(this);">
@foreach ($threeDimensionalModelArchTypes as $threeDimensionalModelArchType)
            <option value="{{ $threeDimensionalModelArchType->id }}"
                    data-internal-name
                        ="{{ $threeDimensionalModelArchType->internalName }}">
              {{ $threeDimensionalModelArchType->displayName }}
            </option>
@endforeach
          </select>
        </td>
        <td name="model-size">
          <select onchange="updateJob(this);">
@foreach ($threeDimensionalModelSizes as $threeDimensionalModelSize)
            <option value="{{ $threeDimensionalModelSize->id }}"
                    data-internal-name
                        ="{{ $threeDimensionalModelSize->internalName }}">
              {{ $threeDimensionalModelSize->displayName }}
            </option>
@endforeach
          </select>
        </td>
        <td name="bite-pins">
          <form>
            <label>
              <input type="radio"
                     name="bite-pins"
                     value="1"
                     checked>
              Yes
            </label>
            <label>
              <input type="radio"
                     name="bite-pins"
                     value="0">
              No
            </label>
          </form>
        </td>
        <td name="extra-separate-dies">
          <form>
            <label>
              <input type="radio"
                     name="extra-separate-dies"
                     value="1">
              Yes
            </label>
            <label>
              <input type="radio"
                     name="extra-separate-dies"
                     value="0"
                     checked>
              No
            </label>
          </form>
        </td>
        <td name="vertex-articulator">
          <form>
            <label>
              <input type="radio"
                     name="vertex-articulator"
                     onchange="updateJobPrice(this);"
                     value="1">
              Yes
            </label>
            <label>
              <input type="radio"
                     name="vertex-articulator"
                     onchange="updateJobPrice(this);"
                     value="0"
                     checked>
              No
            </label>
          </form>
        </td>
        <td name="3d-model-note">
          <textarea class="form-control" rows="1"></textarea>
        </td>
        <td name="bar-note">
          <textarea class="form-control" rows="2"></textarea>
        </td>
      </tr>
    </tbody>
  </table>
  </div>
  <div style="padding: 0; list-style-type: none;" class="job-warnings">
  </div>
  <ul style="display: none;" class="list-group" name="bridge-subjobs">
  </ul>
  <button class="btn"
          name="add-subjob-button"
          onclick="addSubjobListItemToJob(this)">
    <span class="fa fa-plus"></span>
    Add New Screw-retained Unit to Bridge Job
  </button>
  <div name="estimated-price" value="-1">
    <h4 style="text-align: right;">
      <span name="message"></span> Estimated Job Price: <span name="amount"></span>
    </h4>
  </div>
  <div name="file-drop-area">
  </div>
  <label name="job-note">
    <h5>
      Job Note
      (include any extra information needed, such as cutback details,
      special shading instructions, or remake details and reason):
    </h5>
    <textarea class="form-control" rows="1"></textarea>
  </label>
  <!-- 2 buttons same line bootstrap: https://stackoverflow.com/a/24499861 --!>
  <div class="row">
    <div class="col-xs-6 text-left">
      <button class="btn"
              name="copy-job-button"
              onclick="copyJobListItemIntoCase(this)">
        <span class="fa fa-copy"></span>
        Copy Job
      </button>
    </div>
    <div class="col-xs-6 text-right">
      <button class="btn"
              name="remove-job-button"
              onclick="removeJobListItemFromCase(this)">
        <span class="fa fa-minus"></span>
        Remove Job from Case
      </button>
    </div>
  </div>
  <button class="btn"
          name="remove-subjob-button"
          onclick="removeSubjobListItemFromJob(this)">
    <span class="fa fa-minus"></span>
    Remove Screw-retained Unit from Bridge Job
  </button>
</li>

<div hidden id="all-restoration-type-options">
@foreach ($restorationTypes as $restorationType)
  <option value="{{ $restorationType->id }}"
          data-internal-name="{{ $restorationType->internalName }}"
    @if ($userIsDentist && ($restorationType->internalName == "coping"))
          data-should-show-based-on-customer-type="false"
          style="display: none;"
    @else
          data-should-show-based-on-customer-type="true"
    @endif

    @if (!$restorationType->isSelectableDuringUpload)
          data-is-selectable-during-upload="false"
          style="display: none;"
    @else
          data-is-selectable-during-upload="true"
    @endif
  >
    {{ $restorationType->displayName }}
  </option>
@endforeach
</div>

<div hidden id="all-material-options">
@foreach ($materials as $material)
  <option value="{{ $material->id }}"
          data-internal-name="{{ $material->internalName }}">
    {{ $material->displayName }}
  </option>
@endforeach
</div>
<div hidden id="all-material-product-options">
@foreach ($materialProducts as $materialProduct)
  <option value="{{ $materialProduct->id }}"
          data-internal-name="{{ $materialProduct->internalName }}">
    {{ $materialProduct->displayName }}
  </option>
@endforeach
</div>
<div hidden id="all-implants">
  <option value="-1"
          data-model-name="- Select -">
    N/A
  </option>
@foreach ($implants as $implant)
  <option value="{{ $implant->id }}"
          data-model-name="{{ $implant->model }}">
    {{ $implant->size }}
  </option>
@endforeach
</div>

<form style="display: none;" id="dropzone-form-master" class="dropzone">
  <div class="dz-message">
    <button class="dz-button" type="button">
      Drag and drop this job's files here (or click)
      <br>
      (If you have scan files and are using them for multiple jobs,
      drop them into only one of the jobs.)
    </button>
  </div>
</form>

<script>

$(document).ready(function () {
    Dropzone.autoDiscover = false;

    JOB_INDEX = 0;
    addCaseListItem();

    // make a listener that will warn user if they have entered info into
    // certain inputs but try to close the page without submitting
    window.addEventListener(
        "beforeunload",
        warnIfClosingWithCertainEnteredInformation
    );
});

function addCaseListItem() {
    // first prepare the new case
    var caseListItemMaster = $("#case-list-item-master")[0];
    var newCaseListItem = caseListItemMaster.cloneNode(true);
    newCaseListItem.removeAttribute("id");
    newCaseListItem.removeAttribute("style");
    newCaseListItem.setAttribute("name", "case-list-item");

    // then insert the case into the page
    $("#case-list").append(newCaseListItem);

    updateDisplayedCaseNumbers();

    addJobListItemToCase(newCaseListItem, null);
}

// caseElementOrChild :: either the case element itself or any of its child
//                       elements
function removeCaseListItem(caseElementOrChild) {
    if (!window.confirm('Are you sure you want to remove this case?'
                        + ' All jobs within the case will be removed.')) {
        return;
    }

    var caseListItemElement
        = $(caseElementOrChild).closest("[name='case-list-item']")[0];
    $("#case-list")[0].removeChild(caseListItemElement);

    updateDisplayedCaseNumbers();
}

// renames each case with its correct number. so say you have case 1 and case 2.
// if you delete case 1, case 2 will be renamed to case 1
function updateDisplayedCaseNumbers() {
    var caseIndex = 0;
    $("li[name='case-list-item']").each(function() {
        caseIndex += 1;
        $(this).find("[name='case-name']")[0].innerHTML = "Case " + caseIndex;
    });
}

// this is used to find an element within a job (normal job or subjob) element,
// using the normal jquery find() function with a selector string.
// the difference is that this will make sure that, when selecting an element of
// a normal/parent job, nothing within any sub/child job gets matched. this will
// prevent bugs where you're trying to get a piece of data for a job that has
// child subjobs, but the data gotten is actually for one of the job's subjobs
// because that was the first match from the selector
function findInJob(jobElement, selector) {
    var results = $(jobElement).find(selector);
    if (jobElement.getAttribute("name") == 'subjob-list-item') {
    // sub/child job
        // just return the normal results because there's no danger of a subjob
        // "capturing" the match on the selector because subjobs can't have
        // subjobs
        return results;
    } else {
    // normal/parent job
        // there is danger of a subjob "capturing" the match from the selector,
        // so don't include results that are part of any subjob that's present
        return results.filter(function() {
            return this.closest("[name='subjob-list-item']") === null;
        });
    }
}

// caseElementOrChild :: either the case element itself or any of its child
//                       elements
// jobListElementToCopy :: if you want to add a job to the case where the job is
//                         a copy of an existing job instead of a new default
//                         job, pass that job element to copy as an argument.
//                         pass null if you just want a new default job.
function addJobListItemToCase(caseElementOrChild, jobListElementToCopy) {
    // first prepare the new job
    if (jobListElementToCopy == null) {
        var jobListItemMaster = $("#job-list-item-master")[0];
        var newJobListItem = jobListItemMaster.cloneNode(true);
        newJobListItem.removeAttribute("id");
        newJobListItem.removeAttribute("style"); // unhide
        newJobListItem.setAttribute("name", "job-list-item");
    } else {
        var newJobListItem = jobListElementToCopy.cloneNode(true);
        setJobInputValuesFromJson(
            newJobListItem,
            createJsonDataOfJob(jobListElementToCopy)
        );

        // remove the copied job's dropzone stuff so that the files and stuff
        // aren't copied into the new job (i think only the HTML representing
        // the files would be copied and none of the actual dropzone info in
        // memory)
        findInJob(newJobListItem, "form.dropzone").remove();
    }

    JOB_INDEX += 1; // global variable
    newJobListItem.dataset.jobTemporaryNumber = JOB_INDEX;

    // add the dropzone HTML to the new job's file drop area
    var dropzoneFormMaster = $("#dropzone-form-master")[0];
    var dropzoneForm = dropzoneFormMaster.cloneNode(true);
    dropzoneForm.removeAttribute("id");
    dropzoneForm.removeAttribute("style"); // unhide
    findInJob(
        newJobListItem,
        "div[name='file-drop-area']"
    )[0].append(dropzoneForm);

    // insert the job into the page
    // if a blank new job, append to end of this case. if new job is a copy of
    // given job, append the new job right under the copy

    var caseListItemElement
        = $(caseElementOrChild).closest("[name='case-list-item']")[0];
    if (jobListElementToCopy != null) {
        $(caseListItemElement).find("ul")[0].insertBefore(
            newJobListItem,
            jobListElementToCopy.nextSibling
        );
    } else {
        $(caseListItemElement).find("ul")[0].append(newJobListItem);
    }

    updateJob(newJobListItem);

    // attach a dropzone instance to the dropzone HTML
    var newDropzone = new Dropzone(
        findInJob(newJobListItem, "form.dropzone")[0],
        {
            url: "/job/save",
            autoProcessQueue: false,
            uploadMultiple: true,
            addRemoveLinks: true,
            // mostly copied from original upload ui
            timeout: 1800000, // milliseconds
            maxFilesize: 2000, // MB
            maxFiles: 100,
            // have to set this because if not, it apparently defaults to 2 and
            // only 2 files out of how ever many you dropped get uploaded
            // https://stackoverflow.com/questions/18059128/dropzone-js-uploads-only-two-files-when-autoprocessqueue-set-to-false
            parallelUploads: 100,
            acceptedFiles:
                "application/xml,text/xml,.xml,.XML"
                + ",application/x-rar-compressed,application/octet-stream"
                + ",.zip,.ZIP,application/zip"
                + ",.pdf,.PDF,application/pdf"
                + ",.stl,.STL"
                + ",.dcm,.dicom,.DCM,.DICOM"
                + ",.obj,.OBJ"
                + ",.ply,.PLY"
                + ",application/sla,.sla,.SLA"
                + ",application/lab,.lab,.LAB"
                + ",application/pts,.pts,.PTS"
                + ",application/constructionInfo,.constructionInfo,.constructioninfo"
                + ",image/*",
            accept: function(file, done) {
                if (file.size === 0) {
                    done(
                        'File cannot be empty. This can happen if you try to'
                        + ' drag files from inside a compressed .zip archive.'
                    );
                } else {
                    done();
                }
            },
            // the error mark is hard to see, so make it red (using the color
            // values from https://github.com/dropzone/dropzone/pull/1731/commits/a451a638a4147ffd915f74f1e02751c712f437c7
            //
            // this is copied straight from the dropzone-5.7.0/dist/dropzone.js
            // previewTemple and the only thing changed is the error mark svg
            // colors.
            // note that the newest version of dropzone at this time (5.9.3)
            // still has a hard-to-see error mark, so upgrading the version
            // wouldn't help this problem
            previewTemplate:
                "<div class=\"dz-preview dz-file-preview\">\n  <div class=\"dz-image\"><img data-dz-thumbnail /></div>\n  <div class=\"dz-details\">\n    <div class=\"dz-size\"><span data-dz-size></span></div>\n    <div class=\"dz-filename\"><span data-dz-name></span></div>\n  </div>\n  <div class=\"dz-progress\"><span class=\"dz-upload\" data-dz-uploadprogress></span></div>\n  <div class=\"dz-error-message\"><span data-dz-errormessage></span></div>\n  <div class=\"dz-success-mark\">\n    <svg width=\"54px\" height=\"54px\" viewBox=\"0 0 54 54\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n      <title>Check</title>\n      <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n        <path d=\"M23.5,31.8431458 L17.5852419,25.9283877 C16.0248253,24.3679711 13.4910294,24.366835 11.9289322,25.9289322 C10.3700136,27.4878508 10.3665912,30.0234455 11.9283877,31.5852419 L20.4147581,40.0716123 C20.5133999,40.1702541 20.6159315,40.2626649 20.7218615,40.3488435 C22.2835669,41.8725651 24.794234,41.8626202 26.3461564,40.3106978 L43.3106978,23.3461564 C44.8771021,21.7797521 44.8758057,19.2483887 43.3137085,17.6862915 C41.7547899,16.1273729 39.2176035,16.1255422 37.6538436,17.6893022 L23.5,31.8431458 Z M27,53 C41.3594035,53 53,41.3594035 53,27 C53,12.6405965 41.3594035,1 27,1 C12.6405965,1 1,12.6405965 1,27 C1,41.3594035 12.6405965,53 27,53 Z\" stroke-opacity=\"0.198794158\" stroke=\"#747474\" fill-opacity=\"0.816519475\" fill=\"#FFFFFF\"></path>\n      </g>\n    </svg>\n  </div>\n  <div class=\"dz-error-mark\">\n    <svg width=\"54px\" height=\"54px\" viewBox=\"0 0 54 54\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n      <title>Error</title>\n      <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n        <g stroke=\"#E19D9D\" stroke-opacity=\"0.198794158\" fill=\"#CD5C5C\" fill-opacity=\"0.816519475\">\n          <path d=\"M32.6568542,29 L38.3106978,23.3461564 C39.8771021,21.7797521 39.8758057,19.2483887 38.3137085,17.6862915 C36.7547899,16.1273729 34.2176035,16.1255422 32.6538436,17.6893022 L27,23.3431458 L21.3461564,17.6893022 C19.7823965,16.1255422 17.2452101,16.1273729 15.6862915,17.6862915 C14.1241943,19.2483887 14.1228979,21.7797521 15.6893022,23.3461564 L21.3431458,29 L15.6893022,34.6538436 C14.1228979,36.2202479 14.1241943,38.7516113 15.6862915,40.3137085 C17.2452101,41.8726271 19.7823965,41.8744578 21.3461564,40.3106978 L27,34.6568542 L32.6538436,40.3106978 C34.2176035,41.8744578 36.7547899,41.8726271 38.3137085,40.3137085 C39.8758057,38.7516113 39.8771021,36.2202479 38.3106978,34.6538436 L32.6568542,29 Z M27,53 C41.3594035,53 53,41.3594035 53,27 C53,12.6405965 41.3594035,1 27,1 C12.6405965,1 1,12.6405965 1,27 C1,41.3594035 12.6405965,53 27,53 Z\"></path>\n        </g>\n      </g>\n    </svg>\n  </div>\n</div>",
        }
    );

    updateDisplayedJobNumbers();
}

// jobElementOrChild :: either the job element itself or any of its child
//                      elements
function copyJobListItemIntoCase(jobElementOrChild) {
    var jobListItemElement
        = $(jobElementOrChild).closest("[name='job-list-item']")[0];
    var caseListItemElement
        = $(jobListItemElement).closest("[name='case-list-item']")[0];
    // calling this with job element will add a copy of the given job element
    addJobListItemToCase(caseListItemElement, jobListItemElement);
}

// takes the json data of a job and makes the given job element reflect the same
// data given in the json
function setJobInputValuesFromJson(jobElement, jsonDataOfJob) {
    var isSubjob = jobElement.getAttribute("name") == "subjob-list-item";
    if (!isSubjob) {
        var subjobElements = findInJob(
            jobElement,
            "ul[name='bridge-subjobs']"
        )[0].children;
        for (var i = 0; i < subjobElements.length; i += 1) {
            setJobInputValuesFromJson(
                subjobElements[i],
                jsonDataOfJob['subjobs'][i]
            );
        }
    }

    var jobInputTable = findInJob(jobElement, "table")[0];
    var inputs = getJobInputDetailsArray();

    for (var attribute in jsonDataOfJob) {
        if (!jsonDataOfJob.hasOwnProperty(attribute)) {
        // it's an inhereted property or something, so skip it
        // https://stackoverflow.com/a/684692
            continue;
        }

        // if attribute is in inputs, use those input details to set that attr
        // in the job
        for (var i = 0; i < inputs.length; i += 1) {
            if (attribute != inputs[i].jsonAttributeName) {
                continue;
            }

            // set that attr's value in the job.
            // how to do that depends on the input tag type
            if (inputs[i].inputElementTag == 'select') {
                var selectElement = $(jobInputTable).find(
                    "[name='" + inputs[i].inputElementName + "'] select"
                )[0];
                // set the input value to the value from the JSON
                $(selectElement).val(jsonDataOfJob[attribute]);
            } else if (inputs[i].inputElementTag == 'boolean') {
                var booleanFromJsonAsIntString
                    = (jsonDataOfJob[attribute]) ? '1' : '0';
                $(jobInputTable).find(
                    "input[name='" + inputs[i].inputElementName + "']"
                        + "[value='" + booleanFromJsonAsIntString + "']"
                )[0].checked = true;
            } else if (inputs[i].inputElementTag == 'textarea') {
                var textareaElement = $(jobInputTable).find(
                    "[name='" + inputs[i].inputElementName + "'] textarea"
                )[0];
                // set the input value to the value from the JSON
                $(textareaElement).val(jsonDataOfJob[attribute]);
            } else if (inputs[i].inputElementTag == 'input') {
                var inputElement = $(jobInputTable).find(
                    "[name='" + inputs[i].inputElementName + "'] input"
                )[0];
                // set the input value to the value from the JSON
                $(inputElement).val(jsonDataOfJob[attribute]);
            } else {
                // unknown input element tag
                console.log('unknown input element tag');
            }
            break;
        }
    }

    findInJob(jobElement, "[name='job-note'] textarea").val(jsonDataOfJob.note);

    if (!jsonDataOfJob.hasOwnProperty('implantId')) {
        // stop here because the rest of this func doesn't apply
        return;
    }

    // explicitly set the implant-model selection since that is not
    // grabbed during JSON conversion but is still needed for the job input
    // table to function correctly

    // first use the implant id from the json and other stuff to get the name of
    // the desired implant model
    var desiredImplantModelName = null;
    var allImplantSizeOptionElements
        = $(document).find("#all-implants")[0].children;
    for (let possibleOptionElement of allImplantSizeOptionElements) {
        if (possibleOptionElement.value == jsonDataOfJob.implantId) {
            desiredImplantModelName = possibleOptionElement.dataset.modelName;
        }
    }
    if (desiredImplantModelName == null) {
        console.log('could not determine implant model name from json');
    }

    // then find the model name option element that it corresponds to
    var desiredImplantModelValue = null;
    var implantModelOptionElements
        = $(jobInputTable).find("[name='implant-model'] select")[0].children;
    for (let implantModelOptionElement of implantModelOptionElements) {
        var nameOfImplantModel = implantModelOptionElement.innerHTML.trim();
        if (nameOfImplantModel == desiredImplantModelName) {
            desiredImplantModelValue = implantModelOptionElement.value;
        }
    }
    if (desiredImplantModelValue == null) {
        console.log('could not determine implant model value');
    }

    // finally select the desired option
    findInJob(
        jobElement,
        "[name='implant-model'] select"
    ).val(desiredImplantModelValue);
}

// jobElementOrChild :: either the job element itself or any of its child
//                      elements
function removeJobListItemFromCase(jobElementOrChild) {
    var jobListItemElement
        = $(jobElementOrChild).closest("[name='job-list-item']")[0];
    var caseListItemElement
        = $(jobListItemElement).closest("[name='case-list-item']")[0];
    $(caseListItemElement).find("ul")[0].removeChild(jobListItemElement);
    updateCaseTurnaroundSpeed(caseListItemElement);
    updateCasePrice(caseListItemElement);

    updateDisplayedJobNumbers();
}

// renames each job with its correct number. so say you have job 1 and job 2
// within a case. if you delete job 1, job 2 will be renamed to job 1
function updateDisplayedJobNumbers() {
    $("li[name='case-list-item']").each(function() {
        var jobIndex = 0;
        $(this).find("li[name='job-list-item']").each(function() {
            jobIndex += 1;
            findInJob(this, "[name='job-name']")[0].innerHTML
                = "Job " + jobIndex;
        });
    });
}

// jobElementOrChild :: either the job element itself or any of its child
//                      elements
function addSubjobListItemToJob(jobElementOrChild) {
    // first prepare the new subjob
    var jobListItemMaster = $("#job-list-item-master")[0];
    var newSubjobListItem = jobListItemMaster.cloneNode(true);
    newSubjobListItem.removeAttribute("id");
    newSubjobListItem.removeAttribute("style");
    newSubjobListItem.setAttribute("name", "subjob-list-item");
    findInJob(newSubjobListItem, "[name='job-name']")[0].innerHTML
        = "Bridge Screw-retained Unit";
    // remove things that are on a job but that shouldn't be on a subjob
    // and change the remove job button to a remove subjob button
    findInJob(newSubjobListItem, "ul[name='bridge-subjobs']")[0].remove();
    findInJob(newSubjobListItem, "button[name='add-subjob-button']")[0]
        .remove();
    findInJob(newSubjobListItem, "button[name='copy-job-button']")[0].remove();
    findInJob(newSubjobListItem, "button[name='remove-job-button']")[0]
        .remove();
    findInJob(newSubjobListItem, "div[name='file-drop-area']")[0].remove();

    // default the resto type to src (the actual restoration list will be
    // handled in updateJob())
    var restorationTypeSelectElement = findInJob(
        newSubjobListItem,
        "table [name='restoration-type'] select"
    )[0];
    changeRestorationTypeOptions(
        restorationTypeSelectElement, ['screw-retained-crown']
    );

    // then insert the subjob into the page
    var jobElement = $(jobElementOrChild).closest("[name='job-list-item']")[0];
    findInJob(jobElement, "ul[name='bridge-subjobs']")[0]
        .append(newSubjobListItem);
    // make the job's subjob list element visible
    findInJob(jobElement, "ul[name='bridge-subjobs']").show();

    updateJob(newSubjobListItem);

    updateJobPrice(jobElementOrChild);
}

// subjobElementOrChild :: either the subjob element itself or any of its child
//                         elements
function removeSubjobListItemFromJob(subjobElementOrChild) {
    var subjobListItemElement
        = $(subjobElementOrChild).closest("[name='subjob-list-item']")[0];
    var jobListItemElement
        = $(subjobListItemElement).parents("[name='job-list-item']")[0];
    findInJob(jobListItemElement, "ul[name='bridge-subjobs']")[0]
        .removeChild(subjobListItemElement);

    // if there are no more subjobs, hide the subjob list element
    var numberOfSubjobs = findInJob(
        jobListItemElement,
        "ul[name='bridge-subjobs']"
    )[0].children.length;
    if (numberOfSubjobs < 1) {
        findInJob(jobListItemElement, "ul[name='bridge-subjobs']").hide();
    }

    updateJobPrice(jobListItemElement);
}

function removeAllSubjobListItemsFromJob(parentJobElement) {
    $(parentJobElement).find("[name='subjob-list-item']").each(function() {
        removeSubjobListItemFromJob(this);
    });
}

// jobElementOrChild :: either the job element itself or any of its child
//                      elements
function updateJob(jobElementOrChild) {
    var jobElement
        = $(jobElementOrChild)
          .closest("[name='job-list-item'], [name='subjob-list-item']")[0];
    var isSubjob = jobElement.getAttribute("name") == "subjob-list-item";
    var jobInputTable = findInJob(jobElement, "table")[0];

    // reset state of many things. this is needed so that things are not left in
    // a weird state after you start changing stuff. for example, if the stain
    // and glaze input is locked bc of certain options when selecting an SRC,
    // but then the resto type is changed to something other than SRC, the
    // locking of the stain and glaze input has to go away
    var columnsToShow = [];
    $("input[name='stain-and-glaze'][value='0']",
      jobInputTable)[0].disabled = false;
    $("input[name='stain-and-glaze'][value='1']",
      jobInputTable)[0].disabled = false;
    $("input[name='design-service'][value='0']",
      jobInputTable)[0].disabled = false;
    $("input[name='design-service'][value='1']",
      jobInputTable)[0].disabled = false;
    $("input[name='include-tibase'][value='0']",
      jobInputTable)[0].disabled = false;
    $("input[name='include-tibase'][value='1']",
      jobInputTable)[0].disabled = false;
    $("button[name='add-subjob-button']", jobElement).hide();
    $("button[name='remove-subjob-button']", jobElement).hide();
    $(jobInputTable).find("th[name='tibase-type']").html('Tibase Type');
    $(jobInputTable).find(
        "th[name='extra-separate-dies']"
    ).html('Separate Dies');
    $(jobInputTable).find(
        "td[name='design-service'] span[name='mill-only-name']"
    ).html('Mill Only');
    $(jobInputTable).find(
        "td[name='design-service'] span[name='mill-and-design-name']"
    ).html('Design and Mill');

    var restorationTypeSelectElement
        = $(jobInputTable).find("[name='restoration-type'] select")[0];
    if (!isSubjob) {
        changeRestorationTypeOptions(
            restorationTypeSelectElement,
            getAllRestorationTypeInternalNames()
        );
    } else {
        changeRestorationTypeOptions(
            restorationTypeSelectElement,
            ['screw-retained-crown', 'crown-with-access-hole']
        );
    }
    var restorationType
        = getSelectedElement(restorationTypeSelectElement).dataset.internalName;
    // not applicable for all restoration types, but initializing these
    // variables in this higher scope prevents copying the same initialization
    // multiple times in lower scopes
    var materialSelectElement
        = $(jobInputTable).find("[name='material'] select")[0];
    var materialProductSelectElement
        = $(jobInputTable).find("[name='material-product'] select")[0];

    if (isSubjob) {
        // copy input values from parent
        // this is not for the purpose of filling the inputs for grabbing during
        // submittal -- it's for making sure that updateJob() works as expected
        // when called on bridge subjobs
        var parentBridgeJobElement
            = $(jobElement).closest("[name='job-list-item']")[0];
        var parentJobInputTable
            = findInJob(parentBridgeJobElement, "table")[0];

        var parentMaterialSelectElement
            = $(parentJobInputTable).find("[name='material'] select")[0];
        $(materialSelectElement).val($(parentMaterialSelectElement).val());

        var parentDesignServiceAdded
            = $("input[name^='design-service']:checked", parentJobInputTable)
              .val();
        $(
            "input[name^='design-service'][value='"
                + parentDesignServiceAdded
                + "']",
            jobInputTable
        ).prop("checked", true);

        // then continue to run the normal logic for this retoration type
    }

    if (!isSubjob && restorationType != "bridge") {
        removeAllSubjobListItemsFromJob(jobElement);
    }
    if (restorationType == "crown") {
        changeMaterialOptions(
            materialSelectElement,
            [
@if ($userIsDentist)
                "zirconia",
                "pmma",
                "lithium-disilicate",
                "shofu-hc",
@else
                "zirconia",
                "pmma",
                "wax",
                "lithium-disilicate",
                "chrome-cobalt",
                "shofu-hc",
@endif
            ]
        );
        var material
            = getSelectedElement(materialSelectElement).dataset.internalName;
        if (material == "zirconia") {
            changeMaterialProductOptions(
                materialProductSelectElement,
                [
@if ($userIsDentist)
                    "genesiszr-st1100",
                    "genesiszr-multi-pro",
@else
                    "genesiszr-st1100",
                    "genesiszr-lvht",
                    "genesiszr-uht700",
                    "high-strength",
                    "3d-pro-multi-layer",
                    "genesiszr-multi-pro",
@endif
                ]
            );
            columnsToShow.push("material-product");
        } else if (material == "lithium-disilicate") {
            changeMaterialProductOptions(
                materialProductSelectElement,
                ["genesiszr-lithdi", "genesiszr-lithdi-ht", "emax"]
            );
            columnsToShow.push("material-product");
@if ($userIsDentist)
            // sintering is always included
@else
            columnsToShow.push("lithdi-sintering");
            var includeSintering
                = $("input[name^='lithdi-sintering']:checked", jobInputTable)
                  .val() == "1";
            if (!includeSintering) {
                // lock stain and glaze to no
                $("input[name^='stain-and-glaze'][value='0']",
                  jobInputTable)[0].checked = true;
                $("input[name^='stain-and-glaze'][value='1']",
                  jobInputTable)[0].disabled = true;
                $("input[name^='stain-and-glaze'][value='0']",
                  jobInputTable)[0].disabled = true;
            }
@endif
        }
        if (shouldMaterialHaveShadeOption(material)) {
            columnsToShow.push("shade");
@if ($userIsDentist)
            // stain and glaze is always included
@else
            columnsToShow.push("stain-and-glaze");
@endif
        }
        columnsToShow.push("tooth-number");
        columnsToShow.push("material");
        columnsToShow.push("design-service");
    } else if (restorationType == "crown-with-access-hole") {
        changeMaterialOptions(
            materialSelectElement,
            [
@if ($userIsDentist)
                "zirconia",
                "pmma",
@else
                "zirconia",
                "pmma",
                "wax",
@endif
            ]
        );
        var material
            = getSelectedElement(materialSelectElement).dataset.internalName;
        if (material == "zirconia") {
            changeMaterialProductOptions(
                materialProductSelectElement,
                [
@if ($userIsDentist)
                    "genesiszr-st1100",
                    "genesiszr-multi-pro",
@else
                    "genesiszr-st1100",
                    "genesiszr-lvht",
                    "genesiszr-uht700",
                    "high-strength",
                    "3d-pro-multi-layer",
                    "genesiszr-multi-pro",
@endif
                ]
            );
            columnsToShow.push("material-product");
        }
        if (shouldMaterialHaveShadeOption(material)) {
            columnsToShow.push("shade");
@if ($userIsDentist)
            // stain and glaze is always included
@else
            columnsToShow.push("stain-and-glaze");
@endif
        }
        columnsToShow.push("tooth-number");
        columnsToShow.push("material");
        columnsToShow.push("design-service");
    } else if (restorationType == "coping") {
        changeMaterialOptions(
            materialSelectElement,
            [
@if ($userIsDentist)
                "zirconia",
                "pmma",
                "lithium-disilicate",
                "chrome-cobalt",
                "shofu-hc",
@else
                "zirconia",
                "pmma",
                "wax",
                "lithium-disilicate",
                "chrome-cobalt",
                "shofu-hc",
@endif
            ]
        );
        var material
            = getSelectedElement(materialSelectElement).dataset.internalName;
        if (material == "zirconia") {
            changeMaterialProductOptions(
                materialProductSelectElement,
                [
@if ($userIsDentist)
                    "genesiszr-st1100",
                    "genesiszr-multi-pro",
@else
                    "genesiszr-st1100",
                    "high-strength",
                    "genesiszr-multi-pro",
@endif
                ]
            );
            columnsToShow.push("material-product");
        } else if (material == "lithium-disilicate") {
            changeMaterialProductOptions(
                materialProductSelectElement,
                ["genesiszr-lithdi", "genesiszr-lithdi-ht", "emax"]
            );
            columnsToShow.push("material-product");
@if ($userIsDentist)
            // sintering is always included
@else
            columnsToShow.push("lithdi-sintering");
@endif
        }
        if (shouldMaterialHaveShadeOption(material)) {
            columnsToShow.push("shade");
        }
        columnsToShow.push("tooth-number");
        columnsToShow.push("material");
        columnsToShow.push("design-service");
    } else if (restorationType == "screw-retained-crown") {
        changeMaterialOptions(
            materialSelectElement,
@if ($userIsDentist)
            ["zirconia", "pmma"]
@else
            ["zirconia", "pmma", "wax", "chrome-cobalt"]
@endif
        );
        var material
            = getSelectedElement(materialSelectElement).dataset.internalName;
        if (material == "zirconia") {
            changeMaterialProductOptions(
                materialProductSelectElement,
                [
@if ($userIsDentist)
                    "genesiszr-st1100",
                    "genesiszr-multi-pro",
@else
                    "genesiszr-st1100",
                    "genesiszr-lvht",
                    "high-strength",
                    "3d-pro-multi-layer",
                    "genesiszr-multi-pro",
@endif
                ]
            );
            columnsToShow.push("material-product");
        }
        if (shouldMaterialHaveShadeOption(material)) {
            columnsToShow.push("shade");
@if ($userIsDentist)
            // stain and glaze is always included
@else
            columnsToShow.push("stain-and-glaze");
@endif
        }
        if (material == "chrome-cobalt") {
            columnsToShow.push("implant-model");
            columnsToShow.push("implant-size");
        } else {
            columnsToShow.push("include-tibase");
            var includeTibase
                = $("input[name^='include-tibase']:checked", jobInputTable)
                  .val();
            if (
                includeTibase == '1' && material != "pmma" && material != "wax"
            ) {
            // assembled makes no sense without a tibase. and apparently you
            // would never want a wax or pmma src assembled
                columnsToShow.push("assembled");
            }
            var designServiceAdded
                = $("input[name^='design-service']:checked", jobInputTable)
                  .val();
            if (designServiceAdded == "1" || includeTibase == "1") {
                columnsToShow.push("implant-model");
                columnsToShow.push("implant-size");
                columnsToShow.push("tibase-type");
            }
            if (designServiceAdded == "1") {
                $(jobInputTable).find("th[name='tibase-type']")
                                .html('Scan Flag Used');
            }
        }
        columnsToShow.push("tooth-number");
        columnsToShow.push("material");
        columnsToShow.push("design-service");
    } else if (restorationType == "bridge") {
@if ($userIsDentist)
        var materialOptions = ["zirconia", "pmma"];
@else
        var materialOptions = ["zirconia", "pmma", "wax"];
@endif
        var isAllOnX
            = $("input[name^='bridge-is-all-on-x']:checked", jobInputTable).val();
        if (isAllOnX != "1") {
            materialOptions.push("chrome-cobalt");
        }
        changeMaterialOptions(materialSelectElement, materialOptions);
        var material
            = getSelectedElement(materialSelectElement).dataset.internalName;
        if (material == "zirconia") {
            var numberOfBridgeUnits = $(
                "[name='bridge-number-of-units'] select",
                jobInputTable
            ).val();

@if ($userIsDentist)
            var validMaterialProducts = [
                "genesiszr-st1100",
                "genesiszr-multi-pro",
            ];
@else
            var validMaterialProducts = [
                "genesiszr-st1100",
                "genesiszr-lvht",
                "high-strength",
                "3d-pro-multi-layer",
                "genesiszr-multi-pro",
            ];
            if (numberOfBridgeUnits <= 3) {
                validMaterialProducts.push("genesiszr-uht700");
            }
@endif

            changeMaterialProductOptions(
                materialProductSelectElement,
                validMaterialProducts
            );
            columnsToShow.push("material-product");
        }
        if (shouldMaterialHaveShadeOption(material)) {
            columnsToShow.push("shade");
@if ($userIsDentist)
            // stain and glaze is always included
@else
            columnsToShow.push("stain-and-glaze");
@endif
        }
        var designServiceAdded
            = $("input[name^='design-service']:checked", jobInputTable)
              .val();
        if (designServiceAdded == "1") {
            columnsToShow.push("bridge-tooth-numbers");
        }
        var isScrewRetained
            = $("input[name^='bridge-is-screw-retained']:checked",
                jobInputTable).val();
        if (isScrewRetained == "1") {
            var numberOfSubjobs = findInJob(
                jobElement,
                "ul[name='bridge-subjobs']"
            )[0].children.length;
            if (numberOfSubjobs < 1) {
                addSubjobListItemToJob(jobElement);
                addSubjobListItemToJob(jobElement);
            }
            findInJob(jobElement, "button[name='add-subjob-button']").show();
        } else {
            removeAllSubjobListItemsFromJob(jobElement);
        }
        columnsToShow.push("bridge-is-all-on-x");
        columnsToShow.push("material");
        columnsToShow.push("design-service");
        columnsToShow.push("bridge-number-of-units");
        columnsToShow.push("bridge-is-screw-retained");
        if (isAllOnX == "1") {
            columnsToShow.push("all-on-x-pre-sintered-tissue-shading");
        }
    } else if (restorationType == "custom-abutment") {
        changeMaterialOptions(materialSelectElement,
                              ["titanium",
                               "titanium-blue-sky",
                               "hybrid"]);
        var material
            = getSelectedElement(materialSelectElement).dataset.internalName;
        if (material == "hybrid") {
            changeMaterialProductOptions(
                materialProductSelectElement,
                ["high-strength"]
            );
            columnsToShow.push("material-product");
        }
        if (shouldMaterialHaveShadeOption(material)) {
            columnsToShow.push("shade");
        }
        if (material == "titanium" || material == "titanium-blue-sky") {
            columnsToShow.push("gold-anodizing");
        }
        var designServiceAdded
            = $("input[name^='design-service']:checked", jobInputTable).val();
        if (designServiceAdded == "1") {
            columnsToShow.push("tibase-type");
            $(jobInputTable).find("th[name='tibase-type']")
                            .html('Scan Flag Used');
        }
        if (material == "hybrid") {
            columnsToShow.push("include-tibase");
            var includeTibase
                = $("input[name^='include-tibase']:checked", jobInputTable)
                  .val();
            if (includeTibase == "1") {
                columnsToShow.push("tibase-type");
                columnsToShow.push("bonded");
            }
@if ($userIsDentist)
            // lock "include tibase" to yes
            $("input[name^='include-tibase'][value='1']",
              jobInputTable)[0].checked = true;
            $("input[name^='include-tibase'][value='1']",
              jobInputTable)[0].disabled = true;
            $("input[name^='include-tibase'][value='0']",
              jobInputTable)[0].disabled = true;
@endif
        }
        columnsToShow.push("tooth-number");
        columnsToShow.push("material");
        columnsToShow.push("design-service");
        columnsToShow.push("implant-model");
        columnsToShow.push("implant-size");

        // dentists must include design
@if ($userIsDentist)
        $("input[name^='design-service'][value='1']",
          jobInputTable)[0].checked = true;
        $("input[name^='design-service'][value='1']",
          jobInputTable)[0].disabled = true;
        $("input[name^='design-service'][value='0']",
          jobInputTable)[0].disabled = true;
@endif
    } else if (restorationType == "bar") {
        columnsToShow.push("bar-note");
    } else if (restorationType == "3d-model") {
        var modelTypeSelectElement
            = $(jobInputTable).find("[name='model-type'] select")[0];
        var modelType
            = getSelectedElement(modelTypeSelectElement).dataset.internalName;
        if (modelType != "implant") {
            columnsToShow.push("extra-separate-dies");
            if (modelType == "removable-dies") {
                $(jobInputTable).find(
                    "th[name='extra-separate-dies']"
                ).html('Extra Separate Dies');
            }
        }
        var designServiceAdded
            = $("input[name^='design-service']:checked", jobInputTable).val();
        var archTypeSelectElement
            = $(jobInputTable).find("[name='model-arch-type'] select")[0];
        var archType
            = getSelectedElement(archTypeSelectElement).dataset.internalName;
        var sizeSelectElement
            = $(jobInputTable).find("[name='model-size'] select")[0];
        var size = getSelectedElement(sizeSelectElement).dataset.internalName;
        if (designServiceAdded == "1" && archType == "both") {
            columnsToShow.push("bite-pins");
        }
        if (size != "check") {
            columnsToShow.push("vertex-articulator");
        }
        columnsToShow.push("design-service");
        columnsToShow.push("model-type");
        columnsToShow.push("model-arch-type");
        columnsToShow.push("model-size");
        columnsToShow.push("3d-model-note");

        $(jobInputTable).find(
            "td[name='design-service'] span[name='mill-only-name']"
        ).html('Print Only');
        $(jobInputTable).find(
            "td[name='design-service'] span[name='mill-and-design-name']"
        ).html('Design and Print');

        // dentists must include design
@if ($userIsDentist)
        $("input[name^='design-service'][value='1']",
          jobInputTable)[0].checked = true;
        $("input[name^='design-service'][value='1']",
          jobInputTable)[0].disabled = true;
        $("input[name^='design-service'][value='0']",
          jobInputTable)[0].disabled = true;
@endif
    }
    columnsToShow.push("restoration-type");
    // only important if implant model and size cols are shown
    changeImplantSizeSelectElementOptions(jobInputTable);

    // select the lab's default zirconia material product (if applicable and if
    // it hasn't already been done for this job)
@if (!is_null($userDefaultZirconiaProductId))
    changeSelectedMaterialProductOption(
        jobElement,
        {{ $userDefaultZirconiaProductId }}
    );
@endif

    if (restorationType == "bridge") {
        // update any subjobs since they pull from this parent bridge job
        $(jobElement).find("[name='subjob-list-item']").each(function() {
            updateJob(this);
        });
    }

    if (!isSubjob) {
@if ($userIsDentist)
        forceZirconiaMaterialProductForAnteriorsIfNeeded(jobElement);
@endif
    }
    // show blocker column if it applies. and if it does, do product change
    // if blocker is 'yes'
    var material
        = getSelectedElement(materialSelectElement).dataset.internalName;
    var blockerApplies = false;
    if (columnsToShow.includes("material") && (material == 'zirconia')) {
        var availableMaterialProducts = materialProductSelectElement.options;
        for (var availableMaterialProduct of availableMaterialProducts) {
            if (
                availableMaterialProduct.dataset.internalName
                == 'genesiszr-multi-pro'
            ) {
                blockerApplies = true;
                break;
            }
        }
    }
    removeWarningFromJob(jobElement, "blocker-product");
    if (blockerApplies) {
        // show column
        columnsToShow.push("blocker");

        // change material if blocker is yes
        var addBlocker
            = $("input[name^='blocker']:checked", jobInputTable)
              .val() == "1";
        if (addBlocker) {
            changeMaterialProductOptions(
                materialProductSelectElement, ["genesiszr-multi-pro"]
            );
            addWarningToJob(
                jobElement,
                "blocker-product",
                "Note",
                "Only GenesisZr Multi Pro can be used with blocker"
            );
        }
    }

    if (!isSubjob) {
@if ($userIsDentist)
        updateDentistBridgeMaterialProductMessage(jobElement);
@endif
@if (!$userIsDentist)
        updateZirconiaBridgeJobMaterialProductMessage(jobElement);
@endif
    }
@if (!$userIsDentist)
    updateAnteriorZirconiaJobMaterialProductMessage(jobElement);
@endif
    updateIncludeTibaseTypeMessage(jobElement);

    // column stuff
    showOnlySpecificColumns(jobInputTable, columnsToShow);
    // hide inputs and controls that aren't needed for subjob
    if (isSubjob) {
        findInJob(jobElement, "button[name='remove-subjob-button']").show();
        findInJob(jobElement, "[name='estimated-price']").hide();
        findInJob(jobElement, "[name='job-note']").hide();
        hideJobTableColumn(jobInputTable, "material");
        hideJobTableColumn(jobInputTable, "material-product");
        hideJobTableColumn(jobInputTable, "shade");
        hideJobTableColumn(jobInputTable, "stain-and-glaze");
        hideJobTableColumn(jobInputTable, "design-service");
    }

    // update price
    if (!isSubjob) {
        updateJobPrice(jobElement);
        // anything that will effect case turnaround time should be in the
        // parent job, not the subjob, so only update case turnaround time for
        // non-subjobs
        var caseElement = $(jobElement).closest("[name='case-list-item']")[0];
        updateCaseTurnaroundSpeed(caseElement); // may call updateJobPrice()
    } else {
        var parentBridgeJobElement
            = $(jobElement).closest("[name='job-list-item']")[0];
        updateJobPrice(parentBridgeJobElement);
    }
}

// jobElementOrChild :: either the job element itself or any of its child
//                      elements
function updateJobAfterMaterialProductChange(jobElementOrChild) {
    var jobElement
        = $(jobElementOrChild)
          .closest("[name='job-list-item'], [name='subjob-list-item']")[0];
@if (!$userIsDentist)
    updateZirconiaBridgeJobMaterialProductMessage(jobElement);
    updateAnteriorZirconiaJobMaterialProductMessage(jobElement);
@endif
    updateJobPrice(jobElement);
}

// jobElementOrChild :: either the job element itself or any of its child
//                      elements
function updateJobAfterTibaseTypeChange(jobElementOrChild) {
    var jobElement
        = $(jobElementOrChild)
          .closest("[name='job-list-item'], [name='subjob-list-item']")[0];
    updateIncludeTibaseTypeMessage(jobElement);
    updateJobPrice(jobElement);
}

// jobElementOrChild :: either the job element itself or any of its child
//                      elements
function updateAnteriorZirconiaJobMaterialProductMessage(jobElementOrChild) {
    var jobElement
        = $(jobElementOrChild)
          .closest("[name='job-list-item'], [name='subjob-list-item']")[0];
    var isSubjob = jobElement.getAttribute("name") == "subjob-list-item";
    var jobInputTable = findInJob(jobElement, "table")[0];
    var restorationType = getSelectedElement(
        $(jobInputTable).find("[name='restoration-type'] select")[0]
    ).dataset.internalName;
    var material = getSelectedElement(
        $(jobInputTable).find("[name='material'] select")[0]
    ).dataset.internalName;
    var toothNumber = getSelectedElement(
        $(jobInputTable).find("[name='tooth-number'] select")[0]
    ).value;
    var materialProductSelectElement
        = $(jobInputTable).find("[name='material-product'] select")[0];
    var materialProduct
        = getSelectedElement(materialProductSelectElement).dataset.internalName;

    removeWarningFromJob(jobElement, "uht-anterior");
    if (
        !isSubjob
        && ["crown", "crown-with-access-hole"].includes(restorationType)
        && isToothAnterior(parseInt(toothNumber))
        && (material == "zirconia")
        && (materialProduct != 'genesiszr-uht700')
    ) {
        addWarningToJob(
            jobElement,
            "uht-anterior",
            "Notice",
            "AmericaSmiles recommends UHT700 for anterior zirconia restorations"
        );
    }
}

function updateZirconiaBridgeJobMaterialProductMessage(jobElement) {
    var jobInputTable = findInJob(jobElement, "table")[0];
    var restorationTypeSelectElement
        = $(jobInputTable).find("[name='restoration-type'] select")[0];
    var restorationType
        = getSelectedElement(restorationTypeSelectElement).dataset.internalName;
    var materialSelectElement
        = $(jobInputTable).find("[name='material'] select")[0];
    var material
        = getSelectedElement(materialSelectElement).dataset.internalName;
    var materialProductSelectElement
        = $(jobInputTable).find("[name='material-product'] select")[0];
    var materialProduct
        = getSelectedElement(materialProductSelectElement).dataset.internalName;

    removeWarningFromJob(jobElement, "bridge-uht");
    if (
        restorationType == 'bridge'
        && material == 'zirconia'
        && materialProduct == 'genesiszr-uht700'
    ) {
        addWarningToJob(
            jobElement,
            "bridge-uht",
            "Warning",
            "GenesisZr UHT700 is only recommended for 2-3 unit"
            + " bridges that include only anterior teeth."
        );
    }
}

function updateDentistBridgeMaterialProductMessage(jobElement) {
    var jobInputTable = findInJob(jobElement, "table")[0];
    var restorationTypeSelectElement
        = $(jobInputTable).find("[name='restoration-type'] select")[0];
    var restorationType
        = getSelectedElement(restorationTypeSelectElement).dataset.internalName;
    var materialSelectElement
        = $(jobInputTable).find("[name='material'] select")[0];
    var material
        = getSelectedElement(materialSelectElement).dataset.internalName;

    removeWarningFromJob(jobElement, "dentist-bridge-anterior");
    if (
        restorationType == 'bridge' && material == 'zirconia'
    ) {
        addWarningToJob(
            jobElement,
            "dentist-bridge-anterior",
            "Notice",
            "AmericaSmiles recommends GenesisZr Multi Pro for all Anterior restorations, including bridges. Multi Pro is FDA cleared for all indications and can be used for any and all restorations. Please be sure to select Multi Pro if you would like your bridge to be produced using this material."
        );
    }
}

function updateIncludeTibaseTypeMessage(jobElementOrChild) {
    var jobElement
        = $(jobElementOrChild)
          .closest("[name='job-list-item'], [name='subjob-list-item']")[0];
    var jobInputTable = findInJob(jobElement, "table")[0];
    var includeTibase
        = $("input[name^='include-tibase']:checked", jobInputTable).val();

    var tibaseTypeId = getSelectedElement(
        $("[name='tibase-type'] select", jobInputTable)[0]
    ).value;

    removeWarningFromJob(jobElement, "tibase-elos");
    if (
        !isColumnHidden(jobInputTable, 'include-tibase')
        && (includeTibase == "1")
        && !isColumnHidden(jobInputTable, 'tibase-type')
        && (tibaseTypeId == "3") // Elos
    ) {
        addWarningToJob(
            jobElement,
            "tibase-elos",
            "Warning",
            'We do not stock Elos tibases. Please set "Include Tibase" to "No".'
        );
    }
}

function forceZirconiaMaterialProductForAnteriorsIfNeeded(jobElement) {
    var isSubjob = jobElement.getAttribute("name") == "subjob-list-item";
    var jobInputTable = findInJob(jobElement, "table")[0];
    var restorationType = getSelectedElement(
        $(jobInputTable).find("[name='restoration-type'] select")[0]
    ).dataset.internalName;
    var material = getSelectedElement(
        $(jobInputTable).find("[name='material'] select")[0]
    ).dataset.internalName;
    var toothNumber = getSelectedElement(
        $(jobInputTable).find("[name='tooth-number'] select")[0]
    ).value;
    var materialProductSelectElement
        = $(jobInputTable).find("[name='material-product'] select")[0];
    if (
        !isSubjob
        && [
            "crown",
            "crown-with-access-hole",
            "screw-retained-crown",
        ].includes(restorationType)
        && isToothAnterior(parseInt(toothNumber))
        && (material == "zirconia")
    ) {
        changeMaterialProductOptions(
            materialProductSelectElement,
            ["genesiszr-multi-pro"]
        );
    }
}

function addWarningToJob(jobElement, warningName, warningLabel, warningMessage) {
    var warningsListElement = findInJob(jobElement, "div.job-warnings");
    var newWarningElement = document.createElement("div");
    newWarningElement.classList.add("alert");
    newWarningElement.classList.add("alert-danger");
    newWarningElement.setAttribute("name", warningName);

    newWarningElement.innerHTML = `
        <strong>` + warningLabel + `: </strong>` + warningMessage;

    warningsListElement.append(newWarningElement);
}

function removeWarningFromJob(jobElement, warningName) {
    var warningElement = findInJob(jobElement, "div[name='" + warningName + "']");
    warningElement.remove();
}

// jobElementOrChild :: either the job element itself or any of its child
//                      elements
// updates price by sending a request to php to calc price for job.
// after, updates the price of the case that it's in
function updateJobPrice(jobElementOrChild) {
    var jobElement = $(jobElementOrChild).closest("[name='job-list-item']")[0];
    var jobJson = createJsonDataOfJob(jobElement);
    var jobPriceElement = findInJob(jobElement, "[name='estimated-price']")[0];
    var caseElement = $(jobElement).closest("[name='case-list-item']")[0];
    var caseTurnaroundSpeedId
        = createJsonDataOfCase(caseElement).turnaroundSpeedId;
    updatePrice(
        jobPriceElement,
        -1,
        'Loading...'
    );
    $.ajax({
        url: '/job/price',
        type: 'POST',
        dataType: 'json',
        data: {
            'jobJsonString' : JSON.stringify(jobJson),
            'caseTurnaroundSpeedId' : caseTurnaroundSpeedId,
            'userDlpId' : {{ $userDlpId }},
            '_token': '