upload-business-case.html

{% extends prototypeVersion + '/layouts/layout-signed-in.html' %}

{% set pageName = "Upload a business case" %}
{% set serviceHeader = "Search and evaluate medical technologies" %}

{% block beforeContent %}
  {{ breadcrumb({
    items: [
      {
        text: "Home",
        href: "/"
      },
      {
        text: "Share evaluation",
        href: "/share-evaluation"
      },
      {
        text: "Upload a business case",
        href: "/upload-business-case"
      }
    ],
    attributes: {
      "aria-label": "Breadcrumb"
    }
  }) }}
{% endblock %}

{% block content %}
<div class="nhsuk-grid-row">
  <div class="nhsuk-grid-column-two-thirds">

    <form action="review-business-case" method="post" enctype="multipart/form-data">

      <h1 class="nhsuk-heading-l">Upload a business case</h1>

      <p>Business cases help other trusts understand the strategic, clinical and financial rationale behind a procurement decision.</p>

    

      <hr class="nhsuk-section-break nhsuk-section-break--l nhsuk-section-break--visible">

      <!-- Document upload -->
      <div class="nhsuk-form-group">
        <fieldset class="nhsuk-fieldset">
          <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--m">
            <h2 class="nhsuk-fieldset__heading">Your document</h2>
          </legend>

          <div class="nhsuk-form-group">
            <label class="nhsuk-label nhsuk-label--s" for="bc-file-upload">
              Upload your business case
            </label>
            <div class="nhsuk-hint" id="bc-file-upload-hint">
              Formats accepted: PDF, Word, Excel. Maximum 10MB.
            </div>
            <input class="nhsuk-input" id="bc-file-upload" name="bc-file-upload" type="file" accept=".pdf,.doc,.docx,.xls,.xlsx" aria-describedby="bc-file-upload-hint">
          </div>

        

          <div class="nhsuk-u-margin-top-4 nhsuk-u-margin-bottom-4">
            <p class="nhsuk-body-s nhsuk-u-secondary-text-color" style="text-align: center;"><strong>OR</strong></p>
          </div>

          {{ input({
            label: {
              text: "Link to your document",
              classes: "nhsuk-label--s"
            },
            id: "bc-document-link",
            name: "bc-document-link",
            type: "url",
            hint: {
              text: "If you can't upload the document, provide a link to it"
            },
            attributes: {
              placeholder: "https://"
            }
          }) }}

        </fieldset>
      </div>

      <hr class="nhsuk-section-break nhsuk-section-break--l nhsuk-section-break--visible">

      <!-- Product link -->
      <h2 class="nhsuk-heading-m">Which product does this business case relate to?</h2>
      <p class="nhsuk-body-s nhsuk-u-secondary-text-color">This helps other trusts find your business case when searching for a specific product.</p>

      {{ select({
        id: "bc-product",
        name: "bc-product",
        label: {
          text: "Product",
          classes: "nhsuk-label--s"
        },
        items: [
          { value: "", text: "Select a product", selected: true },
          { value: "smartpump-infusion-device-pro", text: "SmartPump Infusion Device Pro" },
          { value: "medflow-infusion-system", text: "MedFlow Infusion System 3000" },
          { value: "vitalguard-patient-monitor", text: "VitalGuard Patient Monitor X1" },
          { value: "scanmaster-ultrasound", text: "ScanMaster Portable Ultrasound" },
          { value: "other", text: "Other - I'll enter the name" }
        ]
      }) }}

      <div class="nhsuk-form-group" id="bc-product-other-group" style="display:none;">
        {{ input({
          label: {
            text: "Product name",
            classes: "nhsuk-label--s"
          },
          id: "bc-product-other",
          name: "bc-product-other",
          hint: {
            text: "Enter the product name as it appears on the supplier's website or packaging"
          }
        }) }}
      </div>

      <hr class="nhsuk-section-break nhsuk-section-break--l nhsuk-section-break--visible">

      <!-- Business case details -->
      <h2 class="nhsuk-heading-m">About this business case</h2>

      {{ input({
        label: {
          text: "Title",
          classes: "nhsuk-label--s"
        },
        id: "bc-title",
        name: "bc-title",
        hint: {
          text: "A short, descriptive title. For example, 'Business case for VitalGuard Monitor X1 – Critical Care Unit'."
        }
      }) }}

      <!-- Date range: month/year -->
      <div class="nhsuk-form-group">
        <fieldset class="nhsuk-fieldset">
          <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--s">
            Date of business case
          </legend>
          <div class="nhsuk-hint">The month and year this business case was written or approved</div>
          <div style="display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap;">
            <div class="nhsuk-form-group nhsuk-u-margin-bottom-0">
              <label class="nhsuk-label nhsuk-body-s" for="bc-month">Month</label>
              <select class="nhsuk-select nhsuk-input--width-10" id="bc-month" name="bc-month">
                <option value="">Month</option>
                <option value="01">January</option><option value="02">February</option><option value="03">March</option>
                <option value="04">April</option><option value="05">May</option><option value="06">June</option>
                <option value="07">July</option><option value="08">August</option><option value="09">September</option>
                <option value="10">October</option><option value="11">November</option><option value="12">December</option>
              </select>
            </div>
            <div class="nhsuk-form-group nhsuk-u-margin-bottom-0">
              <label class="nhsuk-label nhsuk-body-s" for="bc-year">Year</label>
              <input class="nhsuk-input nhsuk-input--width-4" id="bc-year" name="bc-year" type="number" min="2000" max="2030" placeholder="YYYY">
            </div>
          </div>
        </fieldset>
      </div>

      <!-- Business case type -->
      {{ checkboxes({
        idPrefix: "bc-type",
        name: "bc-type",
        fieldset: {
          legend: {
            text: "What does this business case cover?",
            classes: "nhsuk-fieldset__legend--s"
          }
        },
        hint: {
          text: "Select all that apply"
        },
        items: [
          {
            value: "clinical-need",
            text: "Clinical need and rationale",
            hint: { text: "Evidence of why the product or change is needed" }
          },
          {
            value: "cost-benefit",
            text: "Financial analysis and cost-benefit",
            hint: { text: "Total cost of ownership, ROI, savings projections" }
          },
          {
            value: "options-appraisal",
            text: "Options appraisal",
            hint: { text: "Comparison of shortlisted products or approaches" }
          },
          {
            value: "implementation",
            text: "Implementation plan",
            hint: { text: "Rollout timeline, training, change management" }
          },
          {
            value: "risk",
            text: "Risk assessment",
            hint: { text: "Identified risks and mitigations" }
          },
          {
            value: "governance",
            text: "Governance and approvals",
            hint: { text: "Sign-off requirements, committee approvals" }
          }
        ]
      }) }}

      <!-- Outcome -->
      <div class="nhsuk-form-group">
        <fieldset class="nhsuk-fieldset">
          <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--s">
            Was this business case approved?
          </legend>
          <div class="nhsuk-radios">
            <div class="nhsuk-radios__item">
              <input class="nhsuk-radios__input" id="bc-approved-yes" name="bc-approved" type="radio" value="yes">
              <label class="nhsuk-label nhsuk-radios__label" for="bc-approved-yes">Yes, it was approved and procurement proceeded</label>
            </div>
            <div class="nhsuk-radios__item">
              <input class="nhsuk-radios__input" id="bc-approved-no" name="bc-approved" type="radio" value="no">
              <label class="nhsuk-label nhsuk-radios__label" for="bc-approved-no">No, it was rejected or not taken forward</label>
            </div>
            <div class="nhsuk-radios__item">
              <input class="nhsuk-radios__input" id="bc-approved-pending" name="bc-approved" type="radio" value="pending">
              <label class="nhsuk-label nhsuk-radios__label" for="bc-approved-pending">Pending, it's awaiting decision</label>
            </div>
          </div>
        </fieldset>
      </div>

      {{ textarea({
        name: "bc-summary",
        id: "bc-summary",
        label: {
          text: "Brief summary (optional)",
          classes: "nhsuk-label--s"
        },
        hint: {
          text: "A one or two sentence summary of this business case"
        },
        rows: "3"
      }) }}

      <hr class="nhsuk-section-break nhsuk-section-break--l nhsuk-section-break--visible">

      <!-- About your trust -->
      <h2 class="nhsuk-heading-m">About your trust</h2>

      {{ input({
        label: { text: "Your trust", classes: "nhsuk-label--s" },
        id: "bc-trust-name",
        name: "bc-trust-name",
        value: "Mid England NHS Foundation Trust",
        attributes: { readonly: "readonly" }
      }) }}

      {{ select({
        id: "bc-trust-department",
        name: "bc-trust-department",
        label: { text: "Department", classes: "nhsuk-label--s" },
        hint: { text: "The department that authored or submitted this business case" },
        items: [
          { value: "", text: "Select a department", selected: true },
          { value: "procurement", text: "Procurement" },
          { value: "finance", text: "Finance" },
          { value: "clinical-engineering", text: "Clinical Engineering" },
          { value: "cardiology", text: "Cardiology" },
          { value: "critical-care", text: "Critical Care / ICU" },
          { value: "diagnostics", text: "Diagnostics and Imaging" },
          { value: "emergency", text: "Emergency Medicine" },
          { value: "general-surgery", text: "General Surgery" },
          { value: "infection-control", text: "Infection Control" },
          { value: "maternity", text: "Maternity and Obstetrics" },
          { value: "medical-devices", text: "Medical Devices" },
          { value: "oncology", text: "Oncology" },
          { value: "pharmacy", text: "Pharmacy" },
          { value: "radiology", text: "Radiology" },
          { value: "theatre", text: "Theatre and Perioperative" },
          { value: "other", text: "Other" }
        ]
      }) }}

      <hr class="nhsuk-section-break nhsuk-section-break--l nhsuk-section-break--visible">

      <!-- Contact -->
      <h2 class="nhsuk-heading-m">Contact for queries</h2>
      <p class="nhsuk-body-s nhsuk-u-secondary-text-color">Other trusts may want to ask about this business case.</p>

      <!-- Contact 1 -->
      <div class="nhsuk-card nhsuk-u-margin-bottom-4" id="bc-contact-card-1">
        <div class="nhsuk-card__content">
          <h3 class="nhsuk-heading-s nhsuk-u-margin-bottom-3">Contact 1</h3>

          {{ input({
            label: { text: "Contact name", classes: "nhsuk-label--s" },
            id: "bc-contact-name-1",
            name: "bc-contact-name-1"
          }) }}

          {{ select({
            id: "bc-contact-role-1",
            name: "bc-contact-role-1",
            label: { text: "Role", classes: "nhsuk-label--s" },
            hint: { text: "This helps other trusts direct their question to the right person" },
            items: [
              { value: "", text: "Select a role", selected: true },
              { value: "clinical-lead", text: "Clinical lead" },
              { value: "procurement-lead", text: "Procurement lead" },
              { value: "procurement-manager", text: "Procurement manager" },
              { value: "finance-lead", text: "Finance lead" },
              { value: "nurse-specialist", text: "Nurse specialist" },
              { value: "clinical-engineer", text: "Clinical engineer" },
              { value: "digital-informatics", text: "Digital / informatics lead" },
              { value: "other", text: "Other" }
            ]
          }) }}

          {{ input({
            label: { text: "Email address", classes: "nhsuk-label--s" },
            id: "bc-contact-email-1",
            name: "bc-contact-email-1",
            type: "email"
          }) }}

          {{ input({
            label: { text: "UK phone number (optional)", classes: "nhsuk-label--s" },
            id: "bc-contact-phone-1",
            name: "bc-contact-phone-1",
            type: "tel",
            classes: "nhsuk-input--width-20",
            hint: { text: "For example, 07700 900000 or 0113 496 0000" }
          }) }}

        </div>
      </div>

      <!-- Contact 2 (hidden by default) -->
      <div class="nhsuk-card nhsuk-u-margin-bottom-4" id="bc-contact-card-2" style="display: none;">
        <div class="nhsuk-card__content">
          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
            <h3 class="nhsuk-heading-s nhsuk-u-margin-bottom-0">Contact 2</h3>
            <a href="#" class="nhsuk-link nhsuk-link--no-visited-state" id="bc-remove-contact-2">Remove</a>
          </div>

          {{ input({
            label: { text: "Contact name", classes: "nhsuk-label--s" },
            id: "bc-contact-name-2",
            name: "bc-contact-name-2"
          }) }}

          {{ select({
            id: "bc-contact-role-2",
            name: "bc-contact-role-2",
            label: { text: "Role", classes: "nhsuk-label--s" },
            items: [
              { value: "", text: "Select a role", selected: true },
              { value: "clinical-lead", text: "Clinical lead" },
              { value: "procurement-lead", text: "Procurement lead" },
              { value: "procurement-manager", text: "Procurement manager" },
              { value: "finance-lead", text: "Finance lead" },
              { value: "nurse-specialist", text: "Nurse specialist" },
              { value: "clinical-engineer", text: "Clinical engineer" },
              { value: "digital-informatics", text: "Digital / informatics lead" },
              { value: "other", text: "Other" }
            ]
          }) }}

          {{ input({
            label: { text: "Email address", classes: "nhsuk-label--s" },
            id: "bc-contact-email-2",
            name: "bc-contact-email-2",
            type: "email"
          }) }}

          {{ input({
            label: { text: "UK phone number (optional)", classes: "nhsuk-label--s" },
            id: "bc-contact-phone-2",
            name: "bc-contact-phone-2",
            type: "tel",
            classes: "nhsuk-input--width-20",
            hint: { text: "For example, 07700 900000 or 0113 496 0000" }
          }) }}

        </div>
      </div>

      <p class="nhsuk-u-margin-bottom-6">
        <a href="#" class="nhsuk-link nhsuk-link--no-visited-state" id="bc-add-another-contact">+ Add another contact</a>
      </p>

      <!-- Who can see this -->
      <div class="nhsuk-warning-callout">
        <h3 class="nhsuk-warning-callout__label">
          <span role="text">
            <span class="nhsuk-u-visually-hidden">Important: </span>
            Who can see this?
          </span>
        </h3>
        <p>This business case will be visible to:</p>
        <ul class="nhsuk-list nhsuk-list--bullet">
          <li><strong>All NHS trusts</strong> using this service</li>
          <li><strong>The supplier</strong> of the product this business case relates to</li>
        </ul>
        <p>Suppliers can see that your trust has submitted a business case and its approval status. They cannot see your contact details unless you choose to share them with suppliers on the next screen.</p>
      </div>

      <div class="nhsuk-form-group nhsuk-u-margin-top-6">
        <button class="nhsuk-button" data-module="nhsuk-button" type="submit">
          Continue
        </button>
        <p>
          <a href="/share-evaluation-choice" class="nhsuk-link nhsuk-link--no-visited-state">Cancel</a>
        </p>
      </div>

    </form>

  </div>

  <!-- Sidebar -->
  <div class="nhsuk-grid-column-one-third">
    
  </div>

</div>

<script>
// Show/hide "Other product" input
document.getElementById('bc-product').addEventListener('change', function() {
  var otherGroup = document.getElementById('bc-product-other-group');
  otherGroup.style.display = (this.value === 'other') ? 'block' : 'none';
});

// Add/remove second contact
document.getElementById('bc-add-another-contact').addEventListener('click', function(e) {
  e.preventDefault();
  document.getElementById('bc-contact-card-2').style.display = 'block';
  this.style.display = 'none';
});
document.getElementById('bc-remove-contact-2').addEventListener('click', function(e) {
  e.preventDefault();
  document.getElementById('bc-contact-card-2').style.display = 'none';
  document.getElementById('bc-add-another-contact').style.display = 'inline';
});

// File upload preview
document.getElementById('bc-file-upload').addEventListener('change', function(e) {
  var file = e.target.files[0];
  if (file) {
    document.getElementById('bc-file-name').textContent = file.name;
    document.getElementById('bc-file-size').textContent = (file.size / (1024*1024)).toFixed(1) + ' MB, uploaded just now';
    document.getElementById('bc-file-preview').style.display = 'block';
  }
});
document.getElementById('bc-remove-file').addEventListener('click', function(e) {
  e.preventDefault();
  document.getElementById('bc-file-preview').style.display = 'none';
  document.getElementById('bc-file-upload').value = '';
});
</script>

{% endblock %}

{% block pageScripts %}
<script src="https://cdn.jsdelivr.net/npm/accessible-autocomplete@2.0.4/dist/accessible-autocomplete.min.js"></script>
<script type="text/javascript">
  if (document.querySelector('#bc-product')) {
    accessibleAutocomplete.enhanceSelectElement({
      defaultValue: '',
      selectElement: document.querySelector('#bc-product')
    });
  }
</script>
{% endblock %}