(self["webpackChunkapp"] = self["webpackChunkapp"] || []).push([["src_app_pages_facility-supervision-view_facility-supervision-view_module_ts"],{

/***/ 76263:
/*!*********************************************************************************************!*\
  !*** ./src/app/pages/facility-supervision-view/facility-supervision-view-routing.module.ts ***!
  \*********************************************************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   FacilitySupervisionViewPageRoutingModule: () => (/* binding */ FacilitySupervisionViewPageRoutingModule)
/* harmony export */ });
/* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! tslib */ 24398);
/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @angular/core */ 37580);
/* harmony import */ var _angular_router__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @angular/router */ 95072);
/* harmony import */ var _facility_supervision_view_page__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./facility-supervision-view.page */ 93737);




const routes = [{
  path: '',
  component: _facility_supervision_view_page__WEBPACK_IMPORTED_MODULE_0__.FacilitySupervisionViewPage
}];
let FacilitySupervisionViewPageRoutingModule = class FacilitySupervisionViewPageRoutingModule {};
FacilitySupervisionViewPageRoutingModule = (0,tslib__WEBPACK_IMPORTED_MODULE_1__.__decorate)([(0,_angular_core__WEBPACK_IMPORTED_MODULE_2__.NgModule)({
  imports: [_angular_router__WEBPACK_IMPORTED_MODULE_3__.RouterModule.forChild(routes)],
  exports: [_angular_router__WEBPACK_IMPORTED_MODULE_3__.RouterModule]
})], FacilitySupervisionViewPageRoutingModule);


/***/ }),

/***/ 14198:
/*!*************************************************************************************!*\
  !*** ./src/app/pages/facility-supervision-view/facility-supervision-view.module.ts ***!
  \*************************************************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   FacilitySupervisionViewPageModule: () => (/* binding */ FacilitySupervisionViewPageModule)
/* harmony export */ });
/* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! tslib */ 24398);
/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @angular/core */ 37580);
/* harmony import */ var _angular_common__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @angular/common */ 60316);
/* harmony import */ var _angular_forms__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @angular/forms */ 34456);
/* harmony import */ var _ionic_angular__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @ionic/angular */ 21507);
/* harmony import */ var _facility_supervision_view_routing_module__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./facility-supervision-view-routing.module */ 76263);
/* harmony import */ var _facility_supervision_view_page__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./facility-supervision-view.page */ 93737);
/* harmony import */ var src_app_components_shared_module__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! src/app/components/shared.module */ 47774);








let FacilitySupervisionViewPageModule = class FacilitySupervisionViewPageModule {};
FacilitySupervisionViewPageModule = (0,tslib__WEBPACK_IMPORTED_MODULE_3__.__decorate)([(0,_angular_core__WEBPACK_IMPORTED_MODULE_4__.NgModule)({
  imports: [_angular_common__WEBPACK_IMPORTED_MODULE_5__.CommonModule, _angular_forms__WEBPACK_IMPORTED_MODULE_6__.FormsModule, _ionic_angular__WEBPACK_IMPORTED_MODULE_7__.IonicModule, _facility_supervision_view_routing_module__WEBPACK_IMPORTED_MODULE_0__.FacilitySupervisionViewPageRoutingModule, src_app_components_shared_module__WEBPACK_IMPORTED_MODULE_2__.SharedModule],
  declarations: [_facility_supervision_view_page__WEBPACK_IMPORTED_MODULE_1__.FacilitySupervisionViewPage]
})], FacilitySupervisionViewPageModule);


/***/ }),

/***/ 93737:
/*!***********************************************************************************!*\
  !*** ./src/app/pages/facility-supervision-view/facility-supervision-view.page.ts ***!
  \***********************************************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   FacilitySupervisionViewPage: () => (/* binding */ FacilitySupervisionViewPage)
/* harmony export */ });
/* harmony import */ var _workdir_node_modules_babel_runtime_helpers_esm_asyncToGenerator_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js */ 89204);
/* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! tslib */ 24398);
/* harmony import */ var _facility_supervision_view_page_html_ngResource__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./facility-supervision-view.page.html?ngResource */ 67459);
/* harmony import */ var _facility_supervision_view_page_scss_ngResource__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./facility-supervision-view.page.scss?ngResource */ 60895);
/* harmony import */ var _facility_supervision_view_page_scss_ngResource__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_facility_supervision_view_page_scss_ngResource__WEBPACK_IMPORTED_MODULE_2__);
/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @angular/core */ 37580);
/* harmony import */ var _angular_router__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @angular/router */ 95072);
/* harmony import */ var src_app_services_facility_supervision_api_service__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! src/app/services/facility_supervision_api.service */ 73556);
/* harmony import */ var src_app_util_baseHelper__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! src/app/util/baseHelper */ 76434);

var _FacilitySupervisionViewPage;







let FacilitySupervisionViewPage = (_FacilitySupervisionViewPage = class FacilitySupervisionViewPage {
  constructor(activatedRoute, router, api, b) {
    this.activatedRoute = activatedRoute;
    this.router = router;
    this.api = api;
    this.b = b;
  }
  ngOnInit() {
    var _this = this;
    return (0,_workdir_node_modules_babel_runtime_helpers_esm_asyncToGenerator_js__WEBPACK_IMPORTED_MODULE_0__["default"])(function* () {
      _this.id = _this.activatedRoute.snapshot.paramMap.get('id');
      _this.load(null);
    })();
  }
  /**
   * Load facility supervision data
   */
  load(event) {
    var _this2 = this;
    return (0,_workdir_node_modules_babel_runtime_helpers_esm_asyncToGenerator_js__WEBPACK_IMPORTED_MODULE_0__["default"])(function* () {
      try {
        const supervisionResponse = yield _this2.api.getSupervision(_this2.id);
        const schemaResponse = yield _this2.api.getFormSchemaAndPrefill();
        if (supervisionResponse.data && schemaResponse.data) {
          // Format response to match survey-view structure
          _this2.response = {
            survey_form: {
              schema: schemaResponse.data.schema || [],
              title: schemaResponse.data.title || 'Facility Supervision',
              description: schemaResponse.data.description || ''
            },
            response: supervisionResponse.data.response || {},
            created_at: supervisionResponse.data.created_at,
            updated_at: supervisionResponse.data.updated_at,
            sync_status: supervisionResponse.data.sync_status,
            remarks: supervisionResponse.data.remarks
          };
        }
        if (event) {
          setTimeout(() => {
            event.target.complete();
          }, 2000);
        }
      } catch (error) {
        _this2.b.errorToast('Failed to load supervision data');
      }
    })();
  }
  // Reuse survey-view methods
  getCombinedSchemaWithAnswers() {
    var _this$response;
    if (!((_this$response = this.response) !== null && _this$response !== void 0 && (_this$response = _this$response.survey_form) !== null && _this$response !== void 0 && _this$response.schema)) return [];
    return this.flattenFields(this.response.survey_form.schema);
  }
  /**
   * Recursively flatten fields including those inside fieldGroup
   */
  flattenFields(fields) {
    const result = [];
    for (const field of fields) {
      var _field$templateOption;
      // Skip hidden fields
      if (((_field$templateOption = field.templateOptions) === null || _field$templateOption === void 0 ? void 0 : _field$templateOption.type) === 'hidden') continue;
      // Handle fieldGroup - recursively process nested fields
      if (field.fieldGroup && Array.isArray(field.fieldGroup)) {
        var _field$props, _field$templateOption2;
        // Add section header if it has a label
        if ((_field$props = field.props) !== null && _field$props !== void 0 && _field$props.label || (_field$templateOption2 = field.templateOptions) !== null && _field$templateOption2 !== void 0 && _field$templateOption2.label) {
          var _field$props2, _field$templateOption3;
          result.push({
            type: 'section-header',
            label: ((_field$props2 = field.props) === null || _field$props2 === void 0 ? void 0 : _field$props2.label) || ((_field$templateOption3 = field.templateOptions) === null || _field$templateOption3 === void 0 ? void 0 : _field$templateOption3.label)
          });
        }
        // Recursively flatten the field group
        result.push(...this.flattenFields(field.fieldGroup));
        continue;
      }
      // Handle template fields
      if (field.type === 'template') {
        result.push(field);
        continue;
      }
      // Handle regular fields
      const hasAnswer = field.key && this.response.response[field.key] !== undefined && this.response.response[field.key] !== null && this.response.response[field.key] !== '' && this.isFieldVisible(field);
      result.push({
        ...field,
        hasAnswer,
        value: hasAnswer ? this.response.response[field.key] : null
      });
    }
    return result;
  }
  isFieldVisible(field) {
    if (!field.hideExpression) return true;
    const model = this.response.response;
    try {
      if (typeof field.hideExpression === 'string') {
        let expression = field.hideExpression;
        // Replace model references with actual values
        Object.keys(model).forEach(key => {
          const value = model[key];
          if (Array.isArray(value)) {
            expression = expression.replace(new RegExp(`model\\.${key}`, 'g'), JSON.stringify(value));
            expression = expression.replace(new RegExp(`model\\.${key}\\.indexOf\\('([^']+)'\\)`, 'g'), (match, searchValue) => {
              return value.indexOf(searchValue).toString();
            });
          } else {
            expression = expression.replace(new RegExp(`model\\.${key}`, 'g'), typeof value === 'string' ? `'${value}'` : String(value));
          }
        });
        return !eval(expression);
      }
      return true;
    } catch (e) {
      return true;
    }
  }
  getAnswerLabel(field, value) {
    var _field$templateOption5;
    if (value === null || value === undefined) return '';
    switch (field.type) {
      case 'multicheckbox':
        if (Array.isArray(value)) {
          var _field$templateOption4;
          const options = (_field$templateOption4 = field.templateOptions) === null || _field$templateOption4 === void 0 ? void 0 : _field$templateOption4.options;
          if (options && Array.isArray(options)) {
            return value.map(v => {
              const option = options.find(opt => opt.value === v);
              return option ? option.label : v;
            }).join(', ');
          }
          return value.join(', ');
        }
        break;
      case 'radio':
        const options = (_field$templateOption5 = field.templateOptions) === null || _field$templateOption5 === void 0 ? void 0 : _field$templateOption5.options;
        if (options && Array.isArray(options)) {
          const option = options.find(opt => opt.value === value);
          return option ? option.label : String(value);
        }
        break;
      case 'checkbox':
        return value === true ? 'Yes' : 'No';
      default:
        return String(value);
    }
    return String(value);
  }
  getSyncStatusColor(status) {
    switch (status) {
      case 'created':
        return 'success';
      case 'synced':
        return 'primary';
      case 'pending':
        return 'warning';
      case 'failed':
        return 'danger';
      default:
        return 'medium';
    }
  }
  /**
   * Parse remarks string into structured data with colors
   */
  parseRemarks(remarks) {
    if (!remarks) return [];
    try {
      // Split by pipe to get individual items
      const items = remarks.split('|').map(item => item.trim());
      const parsedItems = [];
      items.forEach(item => {
        // Match pattern: "ACRONYM:X/Y (Z% - STATUS)"
        const match = item.match(/^([^:]+):(\d+)\/(\d+)\s*\((\d+\.?\d*)%\s*-\s*([^)]+)\)$/);
        if (match) {
          const percentage = match[4];
          const percentageNum = parseFloat(percentage);
          parsedItems.push({
            text: item,
            percentage: percentageNum,
            color: this.getColorByPercentage(percentageNum)
          });
        }
      });
      return parsedItems;
    } catch (error) {
      return [];
    }
  }
  /**
   * Get color based on percentage
   */
  getColorByPercentage(percentage) {
    if (percentage >= 90) return 'score-success';
    if (percentage >= 70) return 'score-primary';
    if (percentage >= 50) return 'score-warning';
    return 'score-danger';
  }
  /**
   * Get score color class for a field value
   */
  getScoreColorClass(field, value) {
    // Only apply color to score fields
    if (!field.key || typeof field.key !== 'string' || !field.key.includes('_score')) {
      return '';
    }
    if (!value || typeof value !== 'string') return 'score-default';
    // Extract percentage from format like "45/51 (88.2% - Good)"
    const match = value.match(/\((\d+\.?\d*)%/);
    if (!match) return 'score-default';
    const percentage = parseFloat(match[1]);
    return this.getColorByPercentage(percentage);
  }
  /**
   * Track by function for parsed remarks
   */
  trackByRemark(index, item) {
    return item.text + index;
  }
  hasResponses() {
    var _this$response2, _this$response3;
    if (!((_this$response2 = this.response) !== null && _this$response2 !== void 0 && (_this$response2 = _this$response2.survey_form) !== null && _this$response2 !== void 0 && _this$response2.schema) || !((_this$response3 = this.response) !== null && _this$response3 !== void 0 && _this$response3.response)) return false;
    return this.checkFieldsForResponses(this.response.survey_form.schema);
  }
  /**
   * Recursively check if any fields have responses
   */
  checkFieldsForResponses(fields) {
    for (const field of fields) {
      var _field$templateOption6;
      // Check nested fieldGroup
      if (field.fieldGroup && Array.isArray(field.fieldGroup)) {
        if (this.checkFieldsForResponses(field.fieldGroup)) {
          return true;
        }
        continue;
      }
      // Skip template and hidden fields
      if (field.type === 'template' || ((_field$templateOption6 = field.templateOptions) === null || _field$templateOption6 === void 0 ? void 0 : _field$templateOption6.type) === 'hidden' || !field.key) {
        continue;
      }
      const value = this.response.response[field.key];
      if (value !== undefined && value !== null && value !== '' && this.isFieldVisible(field)) {
        return true;
      }
    }
    return false;
  }
  /**
   * Refresh data
   */
  refresh(event) {
    this.load(event);
  }
}, _FacilitySupervisionViewPage.ctorParameters = () => [{
  type: _angular_router__WEBPACK_IMPORTED_MODULE_5__.ActivatedRoute
}, {
  type: _angular_router__WEBPACK_IMPORTED_MODULE_5__.Router
}, {
  type: src_app_services_facility_supervision_api_service__WEBPACK_IMPORTED_MODULE_3__.FacilitySupervisionAPIService
}, {
  type: src_app_util_baseHelper__WEBPACK_IMPORTED_MODULE_4__.BaseHelper
}], _FacilitySupervisionViewPage);
FacilitySupervisionViewPage = (0,tslib__WEBPACK_IMPORTED_MODULE_6__.__decorate)([(0,_angular_core__WEBPACK_IMPORTED_MODULE_7__.Component)({
  selector: 'app-facility-supervision-view',
  template: _facility_supervision_view_page_html_ngResource__WEBPACK_IMPORTED_MODULE_1__,
  styles: [(_facility_supervision_view_page_scss_ngResource__WEBPACK_IMPORTED_MODULE_2___default())]
})], FacilitySupervisionViewPage);


/***/ }),

/***/ 60895:
/*!************************************************************************************************!*\
  !*** ./src/app/pages/facility-supervision-view/facility-supervision-view.page.scss?ngResource ***!
  \************************************************************************************************/
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

// Imports
var ___CSS_LOADER_API_SOURCEMAP_IMPORT___ = __webpack_require__(/*! ../../../../node_modules/css-loader/dist/runtime/sourceMaps.js */ 53142);
var ___CSS_LOADER_API_IMPORT___ = __webpack_require__(/*! ../../../../node_modules/css-loader/dist/runtime/api.js */ 35950);
var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_SOURCEMAP_IMPORT___);
// Module
___CSS_LOADER_EXPORT___.push([module.id, `ion-content {
  --padding-start: 16px;
  --padding-end: 16px;
  --padding-top: 20px;
  --padding-bottom: 20px;
}

.card-container {
  max-width: 800px;
  margin: 0 auto 20px auto;
}

ion-card {
  border-radius: 16px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  margin: 0 0 16px 0;
}

.section-header-main {
  max-width: 800px;
  margin: 0 auto 24px auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 4px;
  flex-wrap: wrap;
}

.section-title-main {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 24px;
  font-weight: 700;
  margin: 0;
  color: var(--ion-color-dark);
  flex: 1 1 auto;
}
.section-title-main ion-icon {
  font-size: 28px;
  flex-shrink: 0;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding: 0 16px;
  gap: 16px;
  flex-wrap: wrap;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  color: var(--ion-color-dark);
  flex: 1 1 auto;
  min-width: 0;
}
.section-title ion-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.summary-stat {
  background: var(--ion-color-light);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
}
.summary-stat .stat-label {
  font-size: 12px;
  color: var(--ion-color-medium);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.summary-stat .stat-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--ion-color-primary);
  line-height: 1.3;
  word-break: break-word;
}

.description-block {
  margin-top: 12px;
  background: rgba(var(--ion-color-primary-rgb), 0.04);
  border-radius: 12px;
  padding: 16px;
}
.description-block .stat-label {
  display: block;
  font-size: 12px;
  color: var(--ion-color-medium);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 8px;
}
.description-block .description-content {
  margin: 0;
  color: var(--ion-color-dark);
  font-size: 15px;
  line-height: 1.5;
}

.scores-block {
  margin-top: 12px;
  background: rgba(var(--ion-color-primary-rgb), 0.04);
  border-radius: 12px;
  padding: 16px;
}
.scores-block .stat-label {
  display: block;
  font-size: 12px;
  color: var(--ion-color-medium);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 12px;
}

.scores-badges {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.score-badge {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 6px;
  white-space: nowrap;
}
.score-badge.score-success {
  --background: #09AA4E;
  --color: #ffffff;
  background: #09AA4E;
  color: #ffffff;
}
.score-badge.score-primary {
  --background: #0EA5E9;
  --color: #ffffff;
  background: #0EA5E9;
  color: #ffffff;
}
.score-badge.score-warning {
  --background: #FFA500;
  --color: #ffffff;
  background: #FFA500;
  color: #ffffff;
}
.score-badge.score-danger {
  --background: #BF0A0B;
  --color: #ffffff;
  background: #BF0A0B;
  color: #ffffff;
}

.survey-content {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.template-section .template-content {
  background: rgba(var(--ion-color-tertiary-rgb), 0.08);
  border-left: 4px solid var(--ion-color-tertiary);
  border-radius: 12px;
  padding: 16px;
  color: var(--ion-color-dark);
  font-size: 14px;
  line-height: 1.5;
}

.section-header-item {
  margin-top: 8px;
  margin-bottom: 4px;
}
.section-header-item .section-header-label {
  font-size: 16px;
  font-weight: 700;
  color: var(--ion-color-primary);
  margin: 0;
  padding: 12px 16px;
  background: rgba(var(--ion-color-primary-rgb), 0.08);
  border-left: 4px solid var(--ion-color-primary);
  border-radius: 8px;
}

.question-item {
  padding: 16px;
  border-radius: 14px;
  border: 1px solid rgba(var(--ion-color-primary-rgb), 0.12);
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.question-item .question-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.question-item .question-row .question-text {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  color: var(--ion-color-dark);
  line-height: 1.45;
}
.question-item .question-row .answer-pill {
  flex-shrink: 0;
  max-width: 55%;
  min-height: 32px;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  white-space: normal;
  background: rgba(146, 148, 156, 0.16);
  color: var(--ion-color-dark);
  border: 1px solid transparent;
  letter-spacing: 0.2px;
}
.question-item .question-row .answer-pill.score-success {
  background: rgba(9, 170, 78, 0.15);
  color: #09AA4E;
  border-color: #09AA4E;
  font-weight: 700;
}
.question-item .question-row .answer-pill.score-primary {
  background: rgba(14, 165, 233, 0.15);
  color: #0EA5E9;
  border-color: #0EA5E9;
  font-weight: 700;
}
.question-item .question-row .answer-pill.score-warning {
  background: rgba(255, 165, 0, 0.15);
  color: #FFA500;
  border-color: #FFA500;
  font-weight: 700;
}
.question-item .question-row .answer-pill.score-danger {
  background: rgba(191, 10, 11, 0.15);
  color: #BF0A0B;
  border-color: #BF0A0B;
  font-weight: 700;
}
.question-item .question-row .answer-pill.score-default {
  background: rgba(146, 148, 156, 0.16);
  color: var(--ion-color-medium);
  border-color: var(--ion-color-medium);
  font-weight: 600;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  color: var(--ion-color-medium);
}
.empty-state ion-icon {
  font-size: 48px;
  margin-bottom: 12px;
}
.empty-state h3 {
  margin: 0 0 8px;
  font-size: 20px;
  color: var(--ion-color-dark);
}
.empty-state p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  max-width: 320px;
}

@media (max-width: 768px) {
  ion-content {
    --padding-start: 12px;
    --padding-end: 12px;
    --padding-top: 16px;
    --padding-bottom: 16px;
  }
  .section-title-main {
    font-size: 20px;
  }
  .section-title-main ion-icon {
    font-size: 24px;
  }
  .section-header {
    padding: 0 12px;
  }
  .summary-stat .stat-value {
    font-size: 16px;
  }
  .question-item .question-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .question-item .question-row .answer-pill {
    max-width: 100%;
    width: 100%;
  }
}
@media (prefers-color-scheme: dark) {
  ion-card {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
    background: #1c1c1d;
  }
  .summary-stat {
    background: rgba(255, 255, 255, 0.04);
  }
  .summary-stat .stat-value {
    color: var(--ion-color-primary-tint);
  }
  .description-block {
    background: rgba(255, 255, 255, 0.05);
  }
  .question-item {
    background: #1f1f20;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
  }
  .question-item .answer-pill {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: #f4f5f8;
  }
  .template-section .template-content {
    background: rgba(var(--ion-color-tertiary-rgb), 0.16);
  }
}`, "",{"version":3,"sources":["webpack://./src/app/pages/facility-supervision-view/facility-supervision-view.page.scss"],"names":[],"mappings":"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","sourcesContent":["ion-content {\n  --padding-start: 16px;\n  --padding-end: 16px;\n  --padding-top: 20px;\n  --padding-bottom: 20px;\n}\n\n.card-container {\n  max-width: 800px;\n  margin: 0 auto 20px auto;\n}\n\nion-card {\n  border-radius: 16px;\n  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);\n  overflow: hidden;\n  margin: 0 0 16px 0;\n}\n\n.section-header-main {\n  max-width: 800px;\n  margin: 0 auto 24px auto;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 16px;\n  padding: 0 4px;\n  flex-wrap: wrap;\n}\n\n.section-title-main {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  font-size: 24px;\n  font-weight: 700;\n  margin: 0;\n  color: var(--ion-color-dark);\n  flex: 1 1 auto;\n\n  ion-icon {\n    font-size: 28px;\n    flex-shrink: 0;\n  }\n}\n\n.section-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 16px;\n  padding: 0 16px;\n  gap: 16px;\n  flex-wrap: wrap;\n}\n\n.section-title {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 20px;\n  font-weight: 600;\n  margin: 0;\n  color: var(--ion-color-dark);\n  flex: 1 1 auto;\n  min-width: 0;\n\n  ion-icon {\n    font-size: 24px;\n    flex-shrink: 0;\n  }\n}\n\n.summary-stat {\n  background: var(--ion-color-light);\n  border-radius: 12px;\n  padding: 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  height: 100%;\n\n  .stat-label {\n    font-size: 12px;\n    color: var(--ion-color-medium);\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.6px;\n  }\n\n  .stat-value {\n    font-size: 18px;\n    font-weight: 700;\n    color: var(--ion-color-primary);\n    line-height: 1.3;\n    word-break: break-word;\n  }\n}\n\n.description-block {\n  margin-top: 12px;\n  background: rgba(var(--ion-color-primary-rgb), 0.04);\n  border-radius: 12px;\n  padding: 16px;\n\n  .stat-label {\n    display: block;\n    font-size: 12px;\n    color: var(--ion-color-medium);\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.6px;\n    margin-bottom: 8px;\n  }\n\n  .description-content {\n    margin: 0;\n    color: var(--ion-color-dark);\n    font-size: 15px;\n    line-height: 1.5;\n  }\n}\n\n// Scores section styles\n.scores-block {\n  margin-top: 12px;\n  background: rgba(var(--ion-color-primary-rgb), 0.04);\n  border-radius: 12px;\n  padding: 16px;\n\n  .stat-label {\n    display: block;\n    font-size: 12px;\n    color: var(--ion-color-medium);\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.6px;\n    margin-bottom: 12px;\n  }\n}\n\n.scores-badges {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  align-items: flex-start;\n}\n\n.score-badge {\n  display: inline-flex;\n  align-items: center;\n  font-size: 12px;\n  font-weight: 500;\n  padding: 8px 12px;\n  border-radius: 6px;\n  white-space: nowrap;\n\n  // Custom score colors matching facility-supervision-list\n  &.score-success {\n    --background: #09AA4E;\n    --color: #ffffff;\n    background: #09AA4E;\n    color: #ffffff;\n  }\n\n  &.score-primary {\n    --background: #0EA5E9;\n    --color: #ffffff;\n    background: #0EA5E9;\n    color: #ffffff;\n  }\n\n  &.score-warning {\n    --background: #FFA500;\n    --color: #ffffff;\n    background: #FFA500;\n    color: #ffffff;\n  }\n\n  &.score-danger {\n    --background: #BF0A0B;\n    --color: #ffffff;\n    background: #BF0A0B;\n    color: #ffffff;\n  }\n}\n\n.survey-content {\n  display: flex;\n  flex-direction: column;\n  gap: 18px;\n}\n\n.template-section {\n  .template-content {\n    background: rgba(var(--ion-color-tertiary-rgb), 0.08);\n    border-left: 4px solid var(--ion-color-tertiary);\n    border-radius: 12px;\n    padding: 16px;\n    color: var(--ion-color-dark);\n    font-size: 14px;\n    line-height: 1.5;\n  }\n}\n\n.section-header-item {\n  margin-top: 8px;\n  margin-bottom: 4px;\n\n  .section-header-label {\n    font-size: 16px;\n    font-weight: 700;\n    color: var(--ion-color-primary);\n    margin: 0;\n    padding: 12px 16px;\n    background: rgba(var(--ion-color-primary-rgb), 0.08);\n    border-left: 4px solid var(--ion-color-primary);\n    border-radius: 8px;\n  }\n}\n\n.question-item {\n  padding: 16px;\n  border-radius: 14px;\n  border: 1px solid rgba(var(--ion-color-primary-rgb), 0.12);\n  background: #ffffff;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n\n  .question-row {\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    gap: 16px;\n\n    .question-text {\n      flex: 1;\n      font-size: 15px;\n      font-weight: 600;\n      color: var(--ion-color-dark);\n      line-height: 1.45;\n    }\n\n    .answer-pill {\n      flex-shrink: 0;\n      max-width: 55%;\n      min-height: 32px;\n      padding: 7px 16px;\n      border-radius: 999px;\n      font-size: 13px;\n      font-weight: 600;\n      line-height: 1.35;\n      text-align: center;\n      white-space: normal;\n      background: rgba(146, 148, 156, 0.16);\n      color: var(--ion-color-dark);\n      border: 1px solid transparent;\n      letter-spacing: 0.2px;\n\n      // Dynamic score colors for answer pills\n      &.score-success {\n        background: rgba(9, 170, 78, 0.15);\n        color: #09AA4E;\n        border-color: #09AA4E;\n        font-weight: 700;\n      }\n\n      &.score-primary {\n        background: rgba(14, 165, 233, 0.15);\n        color: #0EA5E9;\n        border-color: #0EA5E9;\n        font-weight: 700;\n      }\n\n      &.score-warning {\n        background: rgba(255, 165, 0, 0.15);\n        color: #FFA500;\n        border-color: #FFA500;\n        font-weight: 700;\n      }\n\n      &.score-danger {\n        background: rgba(191, 10, 11, 0.15);\n        color: #BF0A0B;\n        border-color: #BF0A0B;\n        font-weight: 700;\n      }\n\n      &.score-default {\n        background: rgba(146, 148, 156, 0.16);\n        color: var(--ion-color-medium);\n        border-color: var(--ion-color-medium);\n        font-weight: 600;\n      }\n    }\n  }\n}\n\n.empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 60px 20px;\n  text-align: center;\n  color: var(--ion-color-medium);\n\n  ion-icon {\n    font-size: 48px;\n    margin-bottom: 12px;\n  }\n\n  h3 {\n    margin: 0 0 8px;\n    font-size: 20px;\n    color: var(--ion-color-dark);\n  }\n\n  p {\n    margin: 0;\n    font-size: 14px;\n    line-height: 1.6;\n    max-width: 320px;\n  }\n}\n\n@media (max-width: 768px) {\n  ion-content {\n    --padding-start: 12px;\n    --padding-end: 12px;\n    --padding-top: 16px;\n    --padding-bottom: 16px;\n  }\n\n  .section-title-main {\n    font-size: 20px;\n\n    ion-icon {\n      font-size: 24px;\n    }\n  }\n\n  .section-header {\n    padding: 0 12px;\n  }\n\n  .summary-stat .stat-value {\n    font-size: 16px;\n  }\n\n  .question-item {\n    .question-row {\n      flex-direction: column;\n      align-items: flex-start;\n\n      .answer-pill {\n        max-width: 100%;\n        width: 100%;\n      }\n    }\n  }\n}\n\n@media (prefers-color-scheme: dark) {\n  ion-card {\n    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);\n    background: #1c1c1d;\n  }\n\n  .summary-stat {\n    background: rgba(255, 255, 255, 0.04);\n\n    .stat-value {\n      color: var(--ion-color-primary-tint);\n    }\n  }\n\n  .description-block {\n    background: rgba(255, 255, 255, 0.05);\n  }\n\n  .question-item {\n    background: #1f1f20;\n    border-color: rgba(255, 255, 255, 0.08);\n    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);\n  }\n\n  .question-item .answer-pill {\n    background: rgba(255, 255, 255, 0.06);\n    border-color: rgba(255, 255, 255, 0.12);\n    color: #f4f5f8;\n  }\n\n  .template-section .template-content {\n    background: rgba(var(--ion-color-tertiary-rgb), 0.16);\n  }\n}\n"],"sourceRoot":""}]);
// Exports
module.exports = ___CSS_LOADER_EXPORT___.toString();


/***/ }),

/***/ 67459:
/*!************************************************************************************************!*\
  !*** ./src/app/pages/facility-supervision-view/facility-supervision-view.page.html?ngResource ***!
  \************************************************************************************************/
/***/ ((module) => {

"use strict";
module.exports = "<ion-header>\n  <ion-toolbar>\n    <ion-buttons slot=\"start\">\n      <ion-back-button defaultHref=\"/facility-supervision-list\"></ion-back-button>\n    </ion-buttons>\n    <ion-title>{{ response?.survey_form?.title || 'Facility Supervision' }}</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n  <ion-refresher slot=\"fixed\" (ionRefresh)=\"refresh($event)\">\n    <ion-refresher-content></ion-refresher-content>\n  </ion-refresher>\n\n  <ng-container *ngIf=\"response; else skeleton\">\n    <div class=\"section-header-main\">\n      <h2 class=\"section-title-main\">\n        <ion-icon name=\"clipboard-outline\" color=\"primary\"></ion-icon>\n        {{ response?.survey_form?.title || 'Facility Supervision' }}\n      </h2>\n    </div>\n\n    <div class=\"card-container\">\n      <ion-card class=\"survey-summary-card\">\n        <div class=\"section-header\">\n          <h2 class=\"section-title\">\n            <ion-icon name=\"information-circle-outline\" color=\"primary\"></ion-icon>\n            Supervision Summary\n          </h2>\n        </div>\n        <ion-card-content>\n          <ion-grid>\n            <ion-row>\n              <ion-col size=\"12\" size-md=\"4\" *ngIf=\"response?.created_at\">\n                <div class=\"summary-stat\">\n                  <span class=\"stat-label\">Created On</span>\n                  <span class=\"stat-value\">{{ response.created_at | date:'d MMM yyyy, h:mm a' }}</span>\n                </div>\n              </ion-col>\n              <ion-col size=\"12\" size-md=\"4\" *ngIf=\"response?.updated_at\">\n                <div class=\"summary-stat\">\n                  <span class=\"stat-label\">Last Updated</span>\n                  <span class=\"stat-value\">{{ response.updated_at | date:'d MMM yyyy, h:mm a' }}</span>\n                </div>\n              </ion-col>\n              <ion-col size=\"12\" size-md=\"4\" *ngIf=\"response?.sync_status\">\n                <div class=\"summary-stat\">\n                  <span class=\"stat-label\">Status</span>\n                  <ion-badge [color]=\"getSyncStatusColor(response.sync_status)\">\n                    {{ response.sync_status }}\n                  </ion-badge>\n                </div>\n              </ion-col>\n            </ion-row>\n            <ion-row *ngIf=\"response?.remarks\">\n              <ion-col size=\"12\">\n                <div class=\"scores-block\">\n                  <span class=\"stat-label\">Scores</span>\n                  <div class=\"scores-badges\">\n                    <ion-badge\n                      *ngFor=\"let remark of parseRemarks(response.remarks); trackBy: trackByRemark\"\n                      class=\"score-badge {{remark.color}}\">\n                      {{ remark.text }}\n                    </ion-badge>\n                  </div>\n                </div>\n              </ion-col>\n            </ion-row>\n            <ion-row *ngIf=\"response?.survey_form?.description\">\n              <ion-col size=\"12\">\n                <div class=\"description-block\">\n                  <span class=\"stat-label\">Description</span>\n                  <div class=\"description-content\" [innerHTML]=\"response.survey_form.description\"></div>\n                </div>\n              </ion-col>\n            </ion-row>\n          </ion-grid>\n        </ion-card-content>\n      </ion-card>\n    </div>\n\n    <div class=\"card-container\">\n      <ion-card class=\"survey-response-card\">\n        <div class=\"section-header\">\n          <h2 class=\"section-title\">\n            <ion-icon name=\"list-outline\" color=\"primary\"></ion-icon>\n            Responses\n          </h2>\n        </div>\n        <ion-card-content>\n          <div class=\"survey-content\" *ngIf=\"hasResponses(); else noResponses\">\n            <ng-container *ngFor=\"let item of getCombinedSchemaWithAnswers()\">\n              <div *ngIf=\"item.type === 'section-header'\" class=\"section-header-item\">\n                <h3 class=\"section-header-label\">{{ item.label }}</h3>\n              </div>\n\n              <div *ngIf=\"item.type === 'template'\" class=\"template-section\">\n                <div [innerHTML]=\"item.templateOptions?.template\" class=\"template-content\"></div>\n              </div>\n\n              <div *ngIf=\"item.type !== 'template' && item.type !== 'section-header' && item.hasAnswer\" class=\"question-item\">\n                <div class=\"question-row\">\n                  <div class=\"question-text\">{{ item.templateOptions?.label || item.props?.label }}</div>\n                  <div class=\"answer-pill\" [ngClass]=\"getScoreColorClass(item, item.value)\">\n                    {{ getAnswerLabel(item, item.value) }}\n                  </div>\n                </div>\n              </div>\n            </ng-container>\n          </div>\n\n          <ng-template #noResponses>\n            <div class=\"empty-state\">\n              <ion-icon name=\"document-outline\" color=\"medium\"></ion-icon>\n              <h3>No responses recorded</h3>\n              <p>We could not find any answered questions for this submission.</p>\n            </div>\n          </ng-template>\n        </ion-card-content>\n      </ion-card>\n    </div>\n  </ng-container>\n\n  <ng-template #skeleton>\n    <app-skeleton></app-skeleton>\n  </ng-template>\n</ion-content>\n";

/***/ })

}]);
//# sourceMappingURL=src_app_pages_facility-supervision-view_facility-supervision-view_module_ts.js.map