@extends('teacher.teacher_dashboard')

@section('customcss')
<style>
  body,
  .content-body,
  .card {
    color: #000000;
    font-size: 11px;
  }

  .diary-wrapper {
    display: none;
  }

  .diary-card .card {
    padding: 5px !important;
    margin-bottom: 16px;
  }

  .school-header {
    text-align: center;
    margin-bottom: 5px;
    padding: 8px;
    border-bottom: 2px solid #4CA49D;
  }

  .school-header h3 {
    color: #4CA49D;
    font-weight: 700;
    margin-bottom: 3px;
    font-size: 16px;
  }

  .school-header p {
    margin: 1px 0;
    color: #555;
    font-size: 11px;
  }

  .class-info {
    text-align: center;
    margin: 5px 0;
    padding: 5px;
    background: #e8f4f3;
    border-radius: 4px;
  }

  .class-info h5 {
    color: #4CA49D;
    margin: 2px 0;
    font-weight: 600;
    font-size: 12px;
  }

  .date-section {
    text-align: center;
    margin: 5px 0;
    padding: 5px;
    background: #f8f9fa;
    border-radius: 4px;
  }

  .date-section h4 {
    color: #4CA49D;
    margin: 0;
    font-size: 13px;
  }

  .date-section p {
    margin: 2px 0;
    font-size: 11px;
  }

  .diary-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 5px;
    font-size: 11px;
  }

  .diary-table th {
    background-color: #4CA49D !important;
    color: #ffffff !important;
    padding: 6px;
    text-align: left;
    font-weight: 600;
    font-size: 11px;
  }

  .diary-table td {
    padding: 6px;
    border: 1px solid #ddd;
    font-size: 11px;
  }

  .diary-table tbody tr:nth-child(even) {
    background-color: #f8f9fa;
  }

  .period-cell {
    font-weight: 600;
    color: #4CA49D;
    text-align: center;
    width: 50px;
  }

  .time-cell {
    color: #666;
    font-size: 11px;
    width: 120px;
  }

  .subject-cell {
    font-weight: 500;
    color: #333;
    width: 100px;
  }

  .teacher-cell {
    color: #555;
    width: 120px;
  }

  .description-cell {
    width: auto;
  }

  @media print {
    @page {
      size: A4;
      margin: 10mm;
    }

    .filter-card,
    .print-btn,
    .header,
    .nav-header,
    .dlabnav,
    .footer,
    .page-titles {
      display: none !important;
    }

    .diary-wrapper {
      display: block !important;
    }

    .diary-card {
      page-break-after: always;
      break-after: page;
    }

    .diary-card:last-child {
      page-break-after: auto;
      break-after: auto;
    }
  }
</style>
@endsection

@section('admin')
<div class="content-body">
  <div class="container-fluid">
    <div class="row page-titles">
      <h4>All Class Diary</h4>
    </div>

    <div class="row">
      <div class="col-lg-12 filter-card">
        <div class="card p-3">
          <h6 class="mb-3">Select Session / Shift / Class / Section (Optional) / Date</h6>
          <div class="row">
            <div class="mb-2 col-lg-2">
              <label class="form-label">Session</label>
              <select id="session_id" class="form-select">
                @foreach($sessions as $session)
                  <option value="{{ $session->id }}" {{ $session->is_current ? 'selected' : '' }}>{{ $session->name }}</option>
                @endforeach
              </select>
            </div>

            <div class="mb-2 col-lg-2">
              <label class="form-label">Shift</label>
              <select id="shift_id" class="form-select">
                <option value="">-- Select Shift --</option>
                @foreach($shifts as $shift)
                  <option value="{{ $shift->id }}">{{ $shift->name }}</option>
                @endforeach
              </select>
            </div>

            <div class="mb-2 col-lg-2">
              <label class="form-label">Class</label>
              <select id="class_id" class="form-select">
                <option value="">-- Select Class --</option>
                @foreach($classList as $classItem)
                  <option value="{{ $classItem->id }}">{{ $classItem->name }}</option>
                @endforeach
              </select>
            </div>

            <div class="mb-2 col-lg-2">
              <label class="form-label">Section (Optional)</label>
              <select id="section_id" class="form-select">
                <option value="">-- All Sections --</option>
              </select>
            </div>

            <div class="mb-2 col-lg-3">
              <label class="form-label">Date</label>
              <input type="date" id="diary_date" class="form-control" value="{{ date('Y-m-d') }}">
            </div>

            <div class="mb-2 col-lg-1 d-flex align-items-end">
              <button id="loadDiary" class="btn btn-primary w-100">Load</button>
            </div>
          </div>
        </div>
      </div>

      <div class="col-lg-12 diary-wrapper" id="diaryWrapper">
        <div class="text-center print-btn mb-2">
          <button class="btn btn-success" onclick="window.print()">
            <i class="fas fa-print"></i> Print Diary
          </button>
        </div>
        <div id="diaryCardsContainer"></div>
      </div>
    </div>
  </div>
</div>
@endsection

@section('customjs')
<script>
  (function () {
    const classSelect = document.getElementById('class_id');
    const sectionSelect = document.getElementById('section_id');
    const loadButton = document.getElementById('loadDiary');
    const diaryWrapper = document.getElementById('diaryWrapper');
    const cardsContainer = document.getElementById('diaryCardsContainer');

    function escapeHtml(value) {
      return String(value ?? '')
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/\"/g, '&quot;')
        .replace(/'/g, '&#039;');
    }

    function selectedText(id) {
      const element = document.getElementById(id);
      return element?.selectedOptions?.[0]?.text || '';
    }

    classSelect.addEventListener('change', async function () {
      sectionSelect.innerHTML = '<option value="">-- All Sections --</option>';

      if (!this.value) {
        return;
      }

      try {
        const response = await fetch('{{ route("teacher.daily-diary.get-sections") }}', {
          method: 'POST',
          headers: {
            'X-Requested-With': 'XMLHttpRequest',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({ class_id: this.value })
        });

        const data = await response.json();

        if (data.sections && data.sections.length) {
          data.sections.forEach(section => {
            const option = document.createElement('option');
            option.value = section.id;
            option.textContent = section.name;
            sectionSelect.appendChild(option);
          });
        }
      } catch (error) {
        console.error(error);
        alert('Unable to load sections. Please try again.');
      }
    });

    loadButton.addEventListener('click', async function () {
      const payload = {
        session_id: document.getElementById('session_id').value,
        class_id: classSelect.value,
        date: document.getElementById('diary_date').value
      };

      const shiftId = document.getElementById('shift_id').value;
      const sectionId = sectionSelect.value;

      if (shiftId) {
        payload.shift_id = shiftId;
      }

      if (sectionId) {
        payload.section_id = sectionId;
      }

      if (!payload.session_id || !payload.class_id || !payload.date) {
        alert('Please select Session, Class and Date');
        return;
      }

      loadButton.disabled = true;
      loadButton.textContent = 'Loading...';

      try {
        const response = await fetch('{{ route("teacher.daily-diary.get-diary") }}', {
          method: 'POST',
          headers: {
            'X-Requested-With': 'XMLHttpRequest',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(payload)
        });

        const data = await response.json();

        const shiftText = selectedText('shift_id');
        const classText = selectedText('class_id');
        const selectedSectionText = selectedText('section_id');

        if (!data.diaries || !data.diaries.length) {
          cardsContainer.innerHTML = '<div class="card"><div class="card-body text-center">No diary data found.</div></div>';
          diaryWrapper.style.display = 'block';
          return;
        }

        const cardsHtml = data.diaries.map(sectionDiary => {
          const classInfoParts = [];

          if (shiftText && shiftText !== '-- Select Shift --') {
            classInfoParts.push('Shift: ' + escapeHtml(shiftText));
          }

          classInfoParts.push('Class: ' + escapeHtml(classText));

          const sectionLabel = sectionId
            ? (selectedSectionText || sectionDiary.section_name)
            : sectionDiary.section_name;

          classInfoParts.push('Section: ' + escapeHtml(sectionLabel));

          const rows = (sectionDiary.diaryData || []).length
            ? sectionDiary.diaryData.map(item => {
                return `
                  <tr>
                    <td class="period-cell">${escapeHtml(item.period)}</td>
                    <td class="time-cell">${escapeHtml(item.time)}</td>
                    <td class="subject-cell">${escapeHtml(item.subject)}</td>
                    <td class="teacher-cell">${escapeHtml(item.teacher)}</td>
                    <td class="description-cell">${escapeHtml(item.homework_title)}</td>
                    <td class="description-cell">${escapeHtml(item.description)}</td>
                  </tr>
                `;
              }).join('')
            : '<tr><td colspan="6" class="text-center">No periods found for this section</td></tr>';

          return `
            <div class="diary-card">
              <div class="card">
                <div class="school-header">
                  <h3>${escapeHtml(data.schoolProfile?.school_name || 'School Name')}</h3>
                  <p>${escapeHtml(data.schoolProfile?.address || '')}</p>
                  <p>Phone: ${escapeHtml(data.schoolProfile?.phone || '')}</p>
                </div>

                <div class="class-info">
                  <h5>${classInfoParts.join(' | ')}</h5>
                </div>

                <div class="date-section">
                  <h4>Date: ${escapeHtml(data.date)}</h4>
                  <p>Day: ${escapeHtml(data.dayName)}</p>
                </div>

                <div class="table-responsive">
                  <table class="diary-table">
                    <thead>
                      <tr>
                        <th class="period-cell">Period</th>
                        <th class="time-cell">Time</th>
                        <th class="subject-cell">Subject</th>
                        <th class="teacher-cell">Teacher</th>
                        <th class="teacher-cell">Home Work</th>
                        <th class="description-cell">Description</th>
                      </tr>
                    </thead>
                    <tbody>${rows}</tbody>
                  </table>
                </div>
              </div>
            </div>
          `;
        }).join('');

        cardsContainer.innerHTML = cardsHtml;
        diaryWrapper.style.display = 'block';
      } catch (error) {
        console.error(error);
        alert('Unable to load diary. Please try again.');
      } finally {
        loadButton.disabled = false;
        loadButton.textContent = 'Load';
      }
    });
  })();
</script>
@endsection