  <style>
    body {
      background-color: #eb8015;
      padding: 15px;
    }
    .form-section {
      margin-bottom: 15px;
    }
    .btn-footer {
      display: flex;
      justify-content: flex-end;
    }
  </style>
<body>
   <div class="history-container">
    <div class="meeting-card">
      <div class="d-flex justify-content-between align-items-center">
        <h5 class="m-0">Meeting</h5>
        <div>
          <button class="btn btn-light btn-sm" onclick="<?php echo $this->createMenuFunc("ScheduleList", "ScheduleList", "") ?>">
            <i class="bi bi-house"></i>
          </button>
          <button class="btn btn-light btn-sm" id="btnNewMeeting" onclick="<?php echo $this->createMenuFunc("Account", "Account", "") ?>">
            <i class="bi bi-person-plus"></i>
          </button>
          <button class="btn btn-light btn-sm" id="btnMeetingLogout">
            <i class="bi bi-box-arrow-right"></i>
          </button>
        </div>
      </div>
    </div>

    <!-- Main Form -->		
    <div class="row g-2 form-section">
        <div class="col-12">
          <input type="text" class="form-control" id="txtMeetingName" placeholder="Account Name" onchange="changeAccountName();">
          <input type="hidden" class="form-control" id="txtMeetingProspectID">
          <input type="hidden" class="form-control" id="txtMeetingConversationID">
        </div>
        <div class="col-7">
          <select class="form-control" id="cboContactName" placeholder="Contact Name" onchange="changeContactName();">
            <option value="" disabled selected>Contact Name</option>
          </select>
          <input type="hidden" class="form-control" id="txtMeetingContactID">
          <input type="hidden" class="form-control" id="txtMeetingPersonID">
        </div>
        <div class="col-5">
          <input type="text" class="form-control" id="txtMeetingPhone" placeholder="Phone" readonly>
        </div>
        <div class="col-12">
          <input type="email" class="form-control" id="txtMeetingEmail" placeholder="Email" readonly>
        </div>
        <div class="col-12">
          <input type="text" class="form-control" id="txtMeetingLocation" placeholder="Meeting Place">
        </div>
        <div class="col-12">
          <button class="btn btn-primary w-100" id="btnStartMeeting" onclick="startMeeting();">Start Meeting</button>
        </div>
        <div class="col-7">
          <input type="date" class="form-control" id="txtMeetingDate" placeholder="Select Meeting Date" disabled>
        </div>
        <div class="col-5">
          <input type="time" class="form-control" id="txtMeetingTime" placeholder="Select Meeting Time" disabled>
        </div>
        <div class="col-12">
            <textarea class="form-control" rows="5" id="txtMeetingConversation" placeholder="Conversation"></textarea>
        </div>
      </div>

      <!-- Attach -->
      <div class="row g-2 form-section">
        <div class="col-7">
          <form class="m-form m-form--fit m-form--label-align-right m-form--group-seperator-dashed" id="formMeetingAttachment" enctype="multipart/form-data">
            <input type="file" style="display:inline; margin-right: 5px;" class="form-control" id="txtMeetingAttachment" name="txtMeetingAttachment" accept=".jpg, .jpeg, .png, .pdf, .doc, .docx, .xls, .xlsx" onchange="changeAttachment(this.form);" />
          </form>
          <div id="divMeetingAttachment"></div>
        </div>
        <div class="col-5">
            <button type="button" class="btn btn-primary w-100" id="btnMeetingAttach" onclick="uploadMeetingAttchment();">
              <i class="bi bi-paperclip"></i> Attach
            </button>
        </div>
        <!-- Display attachments in collapsible panel -->
        <div class="col-12">
          <div class="accordion" id="accordionMeetingAttachments">
            <div class="accordion-item">
              <h2 class="accordion-header" id="headingMeetingAttachments">
                <button class="accordion-button collapsed" style="padding: 10px !important;background-color: antiquewhite;" type="button" data-bs-toggle="collapse" data-bs-target="#collapseMeetingAttachments" aria-expanded="false" aria-controls="collapseMeetingAttachments">
                  Attachments
                </button>
              </h2>
              <div id="collapseMeetingAttachments" class="accordion-collapse collapse" aria-labelledby="headingMeetingAttachments" data-bs-parent="#accordionMeetingAttachments">
                <div class="accordion-body p-2">
                  <ul class="list-group list-group-flush" id="divMeetingAttachments">
                    <?php
                    if (isset($attachments) && is_array($attachments) && count($attachments) > 0) {
                        foreach ($attachments as $att) {
                            // file stored under doc/prospect_attach/{prospect_id}/{filedoc}
                            $filePath = "../doc/prospect_attach/" . (isset($prospect_id) ? $prospect_id : '') . "/" . $att['filedoc'];
                            if(!file_exists($filePath)) { // file may have been deleted
                              //delete from db
                              $this->deleteMissingAttachment($prospect_id, $att['filedoc']);
                            } else {
                              $displayName = htmlspecialchars($att['filename'] ?: $att['filedoc']);
                              $fileExt = htmlspecialchars($att['fileext']);
                              echo '<li class="list-group-item d-flex justify-content-between align-items-center" style="padding: 0px !important;" data-filedoc="' . htmlspecialchars($att['filedoc']) . '">';
                              echo '    <div>';
                              echo '        <a href="' . $filePath . '" target="_blank">' . $displayName . '</a>';
                              echo '    </div>';
                              echo '    <div>';
                              echo "        <button type='button' class='btn btn-sm btn-outline-danger ms-2' onclick='deleteMeetingAttachment($prospect_id, null, this);'><i class='bi bi-trash'></i></button>";
                              echo '    </div>';
                              echo '</li>';
                            }
                        }
                    } else {
                        echo '<li class="list-group-item text-muted" style="padding: 0px !important;">No attachments</li>';
                    }
                    ?>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Status -->
      <div class="row g-2 form-section">
        <div class="col-7">
          <select class="form-select" id="cobMeetingStatus" onchange="changeMeetingStatus()">
            <option value="">Select Status</option>
            <option value="0">Follow Up</option>
            <option value="1">Confirmed</option>
            <option value="2">Closed</option>
            <option value="3">KIV</option>
          </select>
        </div>
      </div>

      <!-- Follow Up Fields (Hidden by Default) -->
      <div id="followUpSection" class="row g-2 form-section" style="display:none;">
        <div class="col-12">
          <input type="text" class="form-control" id="txtMeetingFollowUpLocation" placeholder="Location">
        </div>
        <div class="col-7">
          <input type="date" class="form-control" id="txtMeetingFollowUpDate" placeholder="Select Date">
        </div>
        <div class="col-5">
          <input type="time" class="form-control" id="txtMeetingFollowUpTime" placeholder="Select Time">
        </div>
        <div class="col-12">
          <textarea class="form-control" rows="3" id="txtMeetingNextAction" placeholder="Next Action"></textarea>
        </div>
        
        <div class="col-7 mt-2" style="display:none;">
          <input type="checkbox" class="form-check-input" id="txtMeetingInsertToCalendar" onchange="showReminder();"> Insert to Calendar
        </div>
        <div class="col-7">
          <select class="form-select" id="cboMeetingReminder">
            <option value="0">Set Reminder</option>
            <option value="1">1 Day Before</option>
            <option value="3">3 Days Before</option>
            <option value="7">7 Days Before</option>
          </select>
        </div>
        <div class="col-5">
          <button class="btn btn-primary" style="white-space: nowrap;" id="btnDownloadICS" onclick="downloadICS()">Add to Calendar</button>
        </div>
      </div>

      <div class="btn-footer">
        <button type="button" class="btn btn-outline-secondary" style="margin-right: 10px;" onclick="<?php echo $this->createMenuFunc("ScheduleList", "ScheduleList", "") ?>">Cancel</button>
        <button class="btn btn-primary" id="btnMeetingSave">Save</button>
        <button class="btn btn-primary" id="btnMeetingUpdate" style="display:none;">Update</button>
      </div>
  </div>
  <script>
    <?php include(PATH_CODE . "js/mobile/meeting/meeting.js"); ?>
  </script>