window.componentes = window.componentes || {};
  const EvaluationForm = {
    template: `
      <div> <v-container fluid>
  <!-- Header -->
  <v-row class="mb-4">
    <v-col cols="12">
      <v-card>
        <v-card-title class="d-flex align-center justify-space-between">
          <div>
            <h2 class="text-h5">
              <v-icon class="mr-2">mdi-clipboard-edit-outline</v-icon>
              Bulk Grades Entry
            </h2>
            <p class="text-subtitle-1 text-grey">
              Enter grades for all students and activities at once
            </p>
          </div>
          <v-btn
                 v-if="hasChanges"
                 color="success"
                 size="large"
                 prepend-icon="mdi-content-save"
                 :loading="saving"
                 @click="saveAllGrades"
                 >
            Save All ({{ modifiedCount }})
          </v-btn>
        </v-card-title>
      </v-card>
    </v-col>
  </v-row>

  <!-- Filters -->
  <v-row class="mb-4">
    <v-col cols="12" md="3">
      <v-select
                v-model="filters.school_year_id"
                :items="schoolYears"
                item-title="name"
                item-value="id"
                label="School Year"
                prepend-icon="mdi-calendar"
                density="compact"
                variant="outlined"
                @update:model-value="loadMatrix"
                />
    </v-col>
    <v-col cols="12" md="3">
      <v-select
                v-model="filters.grade_id"
                :items="grades"
                item-title="name"
                item-value="id"
                label="Grade"
                prepend-icon="mdi-school"
                density="compact"
                variant="outlined"
                @update:model-value="loadMatrix"
                />
    </v-col>
    <v-col cols="12" md="3">
      <v-select
                v-model="filters.section_id"
                :items="sections"
                item-title="name"
                item-value="id"
                label="Section"
                prepend-icon="mdi-account-group"
                density="compact"
                variant="outlined"
                @update:model-value="loadMatrix"
                />
    </v-col>
    <v-col cols="12" md="3">
      <v-select
                v-model="filters.period_id"
                :items="periods"
                item-title="name"
                item-value="id"
                label="Period (Optional)"
                prepend-icon="mdi-timer"
                density="compact"
                variant="outlined"
                clearable
                @update:model-value="loadMatrix"
                />
    </v-col>
  </v-row>

  <!-- Loading State -->
  <v-row v-if="loading">
    <v-col cols="12" class="text-center py-8">
      <v-progress-circular indeterminate color="primary" size="64" />
      <p class="mt-4 text-h6">Loading grades matrix...</p>
    </v-col>
  </v-row>

  <!-- Grades Matrix Table -->
  <v-row v-else>
    <v-col cols="12">
      <v-card>
        <v-card-title class="d-flex justify-space-between align-center">
          <div>
            <v-icon class="mr-2">mdi-table</v-icon>
            Grades Matrix
            <v-chip class="ml-2" color="primary" size="small">
              {{ students.length }} students
            </v-chip>
            <v-chip class="ml-2" color="secondary" size="small">
              {{ activities.length }} activities
            </v-chip>
          </div>
          <div class="d-flex gap-2">
            <v-btn
                   size="small"
                   variant="text"
                   prepend-icon="mdi-refresh"
                   @click="loadMatrix"
                   >
              Reload
            </v-btn>
          </div>
        </v-card-title>

        <v-table density="compact" hover fixed-header height="600">
          <thead>
            <!-- Header Row 1: Periods and Subjects -->
            <tr>
              <th rowspan="2" class="text-center" style="min-width: 180px; position: sticky; left: 0; background: white; z-index: 2;">
                Student
              </th>
              <template v-for="period in groupedActivities" :key="period.period_id">
                <th
                    :colspan="period.activities.length"
                    class="text-center bg-primary-lighten-4"
                    >
                  {{ period.period_name }}
                </th>
              </template>
              <th rowspan="2" class="text-center bg-success-lighten-4" style="min-width: 100px;">
                Average
              </th>
            </tr>
            <!-- Header Row 2: Activities -->
            <tr>
              <template v-for="period in groupedActivities" :key="period.period_id">
                <th
                    v-for="activity in period.activities"
                    :key="activity.id"
                    class="text-center"
                    style="min-width: 90px;"
                    >
                  <div class="text-caption font-weight-bold">
                    {{ activity.subject_code }}
                  </div>
                  <div class="text-caption">
                    {{ activity.name }}
                  </div>
                  <div class="text-caption text-grey">
                    /{{ activity.max_score }}
                  </div>
                </th>
              </template>
            </tr>
          </thead>
          <tbody>
            <tr v-for="student in students" :key="student.id">
              <td class="font-weight-medium" style="position: sticky; left: 0; background: white; z-index: 1;">
                <div>{{ student.last_name }}, {{ student.first_name }}</div>
                <small class="text-grey">{{ student.student_code }}</small>
              </td>
              <td
                  v-for="activity in allActivities"
                  :key="activity.id"
                  :class="getCellClass(student.id, activity.id)"
                  >
                <v-text-field
                              v-model="grades[student.id + '__' + activity.id]"
                              type="number"
                              density="compact"
                              variant="plain"
                              hide-details
                              class="grade-input"
                              :min="0"
                              :max="activity.max_score"
                              step="0.01"
                              @focus="onFocus($event)"
                              @blur="onBlur(student.id, activity.id, $event)"
                              @input="markAsModified(student.id, activity.id)"
                              />
              </td>
              <td class="text-center font-weight-bold text-success bg-success-lighten-4">
                {{ calculateStudentAverage(student.id) }}
              </td>
            </tr>
          </tbody>
        </v-table>
      </v-card>
    </v-col>
  </v-row>

  <!-- Stats Cards -->
  <v-row v-if="!loading" class="mt-4">
    <v-col cols="12" md="3">
      <v-card color="primary" variant="tonal">
        <v-card-text>
          <div class="text-h6">{{ students.length }}</div>
          <div class="text-subtitle-2">Total Students</div>
        </v-card-text>
      </v-card>
    </v-col>
    <v-col cols="12" md="3">
      <v-card color="secondary" variant="tonal">
        <v-card-text>
          <div class="text-h6">{{ activities.length }}</div>
          <div class="text-subtitle-2">Total Activities</div>
        </v-card-text>
      </v-card>
    </v-col>
    <v-col cols="12" md="3">
      <v-card color="warning" variant="tonal">
        <v-card-text>
          <div class="text-h6">{{ modifiedCount }}</div>
          <div class="text-subtitle-2">Modified Grades</div>
        </v-card-text>
      </v-card>
    </v-col>
    <v-col cols="12" md="3">
      <v-card color="success" variant="tonal">
        <v-card-text>
          <div class="text-h6">{{ filledCount }}</div>
          <div class="text-subtitle-2">Filled Grades</div>
        </v-card-text>
      </v-card>
    </v-col>
  </v-row>

  <!-- Snackbar for notifications -->
  <v-snackbar
              v-model="showSnackbar"
              :color="snackbarColor"
              location="top"
              :timeout="4000"
              >
    <v-icon class="mr-2">{{ snackbarIcon }}</v-icon>
    {{ snackbarMessage }}
  </v-snackbar>

  <!-- Unsaved changes warning -->
  <v-snackbar
              v-model="showUnsavedWarning"
              color="warning"
              location="bottom"
              :timeout="-1"
              >
    <v-icon class="mr-2">mdi-alert</v-icon>
    You have {{ modifiedCount }} unsaved changes
    <template v-slot:actions>
      <v-btn variant="text" @click="saveAllGrades">Save Now</v-btn>
      <v-btn variant="text" @click="discardChanges">Discard</v-btn>
    </template>
  </v-snackbar>
</v-container> </div>
    `,
    data() {
      return {
        data:{ ...{
  loading: false,
  saving: false,

  // Filters
  filters: {
    school_year_id: null,
    grade_id: null,
    section_id: null,
    period_id: null
  },

  // Filter options
  schoolYears: [],
  grades: [],
  sections: [],
  periods: [],

  // Data
  students: [],
  activities: [],
  grades: {},
  modifiedGrades: new Set(),
  originalGrades: {},

  // Snackbar
  showSnackbar: false,
  snackbarMessage: '',
  snackbarColor: 'success',
  snackbarIcon: 'mdi-check-circle',
  showUnsavedWarning: false
  }},
        brick:{
          id:"EvaluationForm",
          name:"Evaluar",
          description:"",
        }
      };
    },
    computed:{allActivities() {
  return this.activities;
},

groupedActivities() {
  const grouped = {};
  this.activities.forEach(activity => {
    if (!grouped[activity.period_id]) {
      grouped[activity.period_id] = {
        period_id: activity.period_id,
        period_name: activity.period_code,
        activities: []
      };
    }
    grouped[activity.period_id].activities.push(activity);
  });
  return Object.values(grouped);
},

hasChanges() {
  return this.modifiedGrades.size > 0;
},

modifiedCount() {
  return this.modifiedGrades.size;
},

filledCount() {
  return Object.values(this.grades).filter(g => g !== null && g !== undefined && g !== '').length;
}},
    props: {
      admin:{
        type: Boolean,
        default: true
      },
      binds: {
        type: Object,
        default: () => {}
      },
      received_values: {
        type: Object,
        default: () => {}
      },

      ...{}    },
    watch: {},
    methods: {async loadFilters() {
      try {
        const years = await this.$you.find('school_years');
        if (years.data?.data.length > 0) {
          this.schoolYears = years.data?.data ?? []
          this.filters.school_year_id = this.schoolYears[0].id;
        }
        const grades = await this.$you.find('grades');
        if (grades.data?.data.length > 0) {
          this.grades = grades.data?.data ?? []
          this.filters.grade_id = this.grades[0].id;
        }
        const sections = await this.$you.find('sections');
        if (sections.data?.data.length > 0) {
          this.sections = sections.data?.data ?? []
          this.filters.section_id = this.sections[0].id;
        }
        
        if (this.filters.school_year_id && this.filters.grade_id && this.filters.section_id) {
          await this.loadMatrix();
        }
      } catch (error) {
        this.showNotification('Error loading filters', 'error');
        console.error(error);
      }
    },

    /**
     * Load the grades matrix from the server
     */
    async loadMatrix() {
      if (!this.filters.school_year_id || !this.filters.grade_id || !this.filters.section_id) {
        return;
      }

      this.loading = true;
      this.modifiedGrades.clear();
      this.showUnsavedWarning = false;

      try {
        const params = {
          school_year_id: this.filters.school_year_id,
          grade_id: this.filters.grade_id,
          section_id: this.filters.section_id
        }

        if (this.filters.period_id) {
          params['period_id'] = this.filters.period_id;
        }

        const students = await this.$you.find('students',params);
        if (students.data?.data.length > 0) {
          this.students = students.data?.data ?? []
        }
        
        const periods = await this.$you.find('periods',{school_year_id:params.school_year_id});
        if (periods.data?.data.length > 0) {
          this.periods = periods.data?.data ?? []
        }
        
        const activities = await this.$you.find('periods',{school_year_id:params.school_year_id});
        if (activities.data?.data.length > 0) {
          this.activities = activities.data?.data ?? []
        }

        if (result.success) {
          // Build grades object
          this.grades = {};
          this.originalGrades = {};
          
          result.data.students.forEach(student => {
            result.data.activities.forEach(activity => {
              const key = `${student.id}__${activity.id}`;
              const existingGrade = result.data.grades[key];
              const score = existingGrade ? existingGrade.score : '';
              this.grades[key] = score;
              this.originalGrades[key] = score;
            });
          });
        } else {
          this.showNotification(result.message, 'error');
        }
      } catch (error) {
        this.showNotification('Error loading grades matrix', 'error');
        console.error(error);
      } finally {
        this.loading = false;
      }
    },

    /**
     * Mark a grade cell as modified
     */
    markAsModified(studentId, activityId) {
      const key = `${studentId}__${activityId}`;
      this.modifiedGrades.add(key);
      
      if (this.modifiedGrades.size > 0) {
        this.showUnsavedWarning = true;
      }
    },

    /**
     * Get CSS class for a cell
     */
    getCellClass(studentId, activityId) {
      const key = `${studentId}__${activityId}`;
      if (this.modifiedGrades.has(key)) {
        return 'modified-cell';
      }
      return '';
    },

    /**
     * Calculate average for a student
     */
    calculateStudentAverage(studentId) {
      let total = 0;
      let count = 0;
      
      this.activities.forEach(activity => {
        const key = `${studentId}__${activity.id}`;
        const score = this.grades[key];
        
        if (score !== null && score !== undefined && score !== '') {
          const numScore = parseFloat(score);
          if (!isNaN(numScore)) {
            total += numScore;
            count++;
          }
        }
      });
      
      return count > 0 ? (total / count).toFixed(2) : '-';
    },

    /**
     * Focus handler - select all text
     */
    onFocus(event) {
      event.target.select();
    },

    /**
     * Blur handler - validate score
     */
    onBlur(studentId, activityId, event) {
      const key = `${studentId}__${activityId}`;
      const activity = this.activities.find(a => a.id === activityId);
      
      if (!activity) return;
      
      let value = event.target.value;
      
      if (value === '' || value === null) {
        this.grades[key] = '';
        return;
      }
      
      let numValue = parseFloat(value);
      
      if (isNaN(numValue)) {
        this.showNotification('Invalid number', 'error');
        this.grades[key] = this.originalGrades[key] || '';
        return;
      }
      
      if (numValue < 0) {
        this.showNotification('Score cannot be negative', 'error');
        this.grades[key] = this.originalGrades[key] || '';
        return;
      }
      
      if (numValue > activity.max_score) {
        this.showNotification(`Score cannot exceed ${activity.max_score}`, 'error');
        this.grades[key] = this.originalGrades[key] || '';
        return;
      }
      
      this.grades[key] = numValue.toFixed(2);
    },

    /**
     * Save all modified grades
     */
    async saveAllGrades() {
      if (this.modifiedGrades.size === 0) {
        this.showNotification('No changes to save', 'info');
        return;
      }

      this.saving = true;

      try {
        const gradesToSave = [];

        this.modifiedGrades.forEach(key => {
          const [studentId, activityId] = key.split('__');
          const score = this.grades[key];
          
          gradesToSave.push({
            student_id: studentId,
            activity_id: activityId,
            score: score === '' ? null : parseFloat(score),
            comments: null
          });
        });

        const response = await fetch('/api/grades/bulk-save', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({ grades: gradesToSave })
        });

        const result = await response.json();

        if (result.success) {
          this.modifiedGrades.clear();
          this.showUnsavedWarning = false;
          
          // Update original grades
          Object.keys(this.grades).forEach(key => {
            this.originalGrades[key] = this.grades[key];
          });
          
          this.showNotification(
            `Successfully saved ${result.saved_count} grades`,
            'success'
          );
          
          if (result.errors && result.errors.length > 0) {
            console.warn('Save errors:', result.errors);
          }
        } else {
          this.showNotification(result.message, 'error');
        }
      } catch (error) {
        this.showNotification('Error saving grades', 'error');
        console.error(error);
      } finally {
        this.saving = false;
      }
    },

    /**
     * Discard all changes
     */
    discardChanges() {
      this.grades = { ...this.originalGrades };
      this.modifiedGrades.clear();
      this.showUnsavedWarning = false;
      this.showNotification('Changes discarded', 'info');
    },

    /**
     * Show notification
     */
    showNotification(message, type = 'success') {
      this.snackbarMessage = message;
      this.snackbarColor = type;
      this.snackbarIcon = type === 'error' ? 'mdi-alert-circle' : 'mdi-check-circle';
      this.showSnackbar = true;
    }},
    mounted(){this.loadFilters();},
    created(){},
  };
  window.componentes.EvaluationForm = EvaluationForm;
  const ProductCard = {
    template: `
      <div> <v-hover v-slot="{ isHovering, props }">
  <v-card width="300" class="mr-2" @click="Move(info.id)" v-bind="props" :color="$root.settings.WEB_BTN.config.primary.color" :variant="!isHovering?'tonal':'flat'" rounded="xl" tile flat>
    <v-card-text style="overflow: hidden; display: block;" class="pa-0">
      <v-img 
             v-if="info.gallery" 
             :src="info.gallery[0].file" 
             :alt="info.gallery[0].name" 
             :style="{display: 'block','transition': 'all 0.6s cubic-bezier(0.4, 0, 0.2, 1)','transform-origin': 'center center',transform: !isHovering?'scale(1)':'scale(1.5)'}"
             >
      </v-img>
    </v-card-text>
    <v-card-text class="text-h5 font-weight-bold px-5">
      {{info.name ?? 'Product Name'}}
    </v-card-text>
  </v-card>
</v-hover> </div>
    `,
    data() {
      return {
        data:{ ...{}},
        brick:{
          id:"ProductCard",
          name:"Product Card",
          description:"",
        }
      };
    },
    computed:{},
    props: {
      admin:{
        type: Boolean,
        default: true
      },
      binds: {
        type: Object,
        default: () => {}
      },
      received_values: {
        type: Object,
        default: () => {}
      },

      ...{
  info:Object,
  required:false,
  default:()=>{}
}    },
    watch: {},
    methods: {Move(id){
  this.$hash('view',id)
  if(this.$root.url.hash=='view'){
    window.location.reload()
  }
}},
    mounted(){},
    created(){},
  };
  window.componentes.ProductCard = ProductCard;
  const RechargeTotal = {
    template: `
      <div> <v-card :color="$root.settings.WEB_BTN.config.primary.color" :key="received_values" tile flat>
  <v-card-text class="pa-0">
    <p class="pa-0 text-center text-h2 font-weight-black">
      {{received_values.amount ?? 0}} {{$root.settings.APP_DATA.config.currency}}
    </p>
    <v-divider></v-divider>
    <p class="pa-0 text-center text-h4 font-weight-black">
      {{(received_values.amount??0)*$root.settings.APP_DATA.config.currency_tax}} {{$root.settings.APP_DATA.config.currency_alt}}
    </p>
    <p class="pa-0 text-center text-h6 font-weight-bold">
      Total Amount Payable
    </p>
    {{received_values}}
  </v-card-text>
</v-card> </div>
    `,
    data() {
      return {
        data:{ ...{}},
        brick:{
          id:"RechargeTotal",
          name:"Total Amount",
          description:"Display the total amount",
        }
      };
    },
    computed:{},
    props: {
      admin:{
        type: Boolean,
        default: true
      },
      binds: {
        type: Object,
        default: () => {}
      },
      received_values: {
        type: Object,
        default: () => {}
      },

      ...{}    },
    watch: {received_values: {
        handler(newValue, oldValue) {
          this.$emit('send-value','tax',parseFloat(this.$root.settings.APP_DATA.config.currency_tax).toFixed(2)??0)
        },
        immediate: true, // Ejecutar inmediatamente
        deep: false
}},
    methods: {},
    mounted(){},
    created(){},
  };
  window.componentes.RechargeTotal = RechargeTotal;
  const SimilarProducts = {
    template: `
      <div> 
<v-slide-group show-arrows>
  <v-slide-group-item v-for="(item,i) in data" :key="i">
    <ProductCard :info="item" width="300" :key="i"></ProductCard>
  </v-slide-group-item>
</v-slide-group> </div>
    `,
    data() {
      return {
        data:{ ...{
  data:[]
}},
        brick:{
          id:"SimilarProducts",
          name:"Productos Similares",
          description:"",
        }
      };
    },
    computed:{},
    props: {
      admin:{
        type: Boolean,
        default: true
      },
      binds: {
        type: Object,
        default: () => {}
      },
      received_values: {
        type: Object,
        default: () => {}
      },

      ...{
  filter:{
    type:Object,
    required:false,
    default:()=>{}
  }
}    },
    watch: {},
    methods: {async getSimilar(){
  const promise = await apiAppProducts.getAll(this.binds)
  if(promise.data.error==false){
    this.data = promise.data.data
  } else {
    this.$toast_validation("No se pudo obtener los productos similares",promise.data.data)
  }
}},
    mounted(){this.getSimilar()},
    created(){},
  };
  window.componentes.SimilarProducts = SimilarProducts;
  const TestData = {
    template: `
      <div> <v-card :color="$root.settings.WEB_BTN.config.primary.color" rounded="xl" variant="tonal" tile flat height="100%">
  <v-card-text>
    <v-card-title class="text-h5 text-center">Filtrar por <strong class="font-weight-bold">Marca</strong></v-card-title>
    <v-list bg-color="transparent" density="compact">
      <v-list-item v-for="item in data.data" @click="pushParams('_brand',item.id)" link>
        {{item.name}}
      </v-list-item>
    </v-list>
  </v-card-text>
  <v-card-actions>
    <v-btn @click="$emit('send-value','_brand',null)" block>Limpiar</v-btn>
  </v-card-actions>
</v-card>  </div>
    `,
    data() {
      return {
        data:{ ...{
  data:[]
}},
        brick:{
          id:"TestData",
          name:"Test",
          description:"",
        }
      };
    },
    computed:{},
    props: {
      admin:{
        type: Boolean,
        default: true
      },
      binds: {
        type: Object,
        default: () => {}
      },
      received_values: {
        type: Object,
        default: () => {}
      },

      ...{}    },
    watch: {},
    methods: {async getData(){
  const promise = await apiAppProductBrands.getAll()
  this.data = promise.data
},
pushParams(k,v){
  const params = new URLSearchParams(window.location.search)
  params.set(k,v)
  
  const new_params = (params?'?':'')+params.toString()
  
  const base_url = window.location.hash+(this.$root.url.param??'')
  const newUrl = window.location.pathname+new_params+base_url
  
  history.replaceState({},"",newUrl)
  
  this.$emit('send-value',k,v)
}},
    mounted(){this.getData()},
    created(){},
  };
  window.componentes.TestData = TestData;