@extends('admin.admin_dashboard')

@section('customcss')
<style>
.card {
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  margin-bottom: 10px;
}
.card-body { background: #FBFCEB !important; }

.print-container{
  text-align:center;
  padding:10px;
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}

#printButton{
  background-color:#1d4ed8;
  color:#fff;
  border:none;
  padding:8px 20px;
  font-weight:700;
  border-radius:6px;
  cursor:pointer;
}
#printButton:hover{ background-color:#1e40af; }

.no-data-box{
  background:#fff;
  padding:60px 20px;
  text-align:center;
  border-radius:8px;
  box-shadow:0 2px 8px rgba(0,0,0,0.05);
  margin-top:40px;
}
.no-data-icon{
  font-size:48px;
  color:#dc2626;
  margin-bottom:15px;
}
.no-data-box h4{
  font-weight:800;
  margin-bottom:10px;
}
.no-data-box p{
  color:#6b7280;
  font-size:14px;
  margin:0;
}

.marksheet-page{
  width:100%;
  page-break-inside:avoid;
  break-inside:avoid;
}

.marksheet-card{
  width:100%;
  background:#fff;
  border:none!important;
  box-shadow:none!important;
  padding:14px 18px;
  box-sizing:border-box;
  color:#000;
  font-family:"Times New Roman",serif;
  margin-bottom:16px;
}

.marksheet-header{ text-align:center; margin-bottom:10px; }
.marksheet-header .logo{ height:60px; margin-bottom:6px; }
.marksheet-header .school-name{ font-size:18px; font-weight:700; margin:0; }
.marksheet-header .address{ font-size:12px; font-weight:700; margin:0; }
.marksheet-header .exam-line{ font-size:16px; margin:2px 0 0 0; }
.marksheet-header .title{ font-size:16px; font-weight:800; margin-top:6px; letter-spacing:.2px; }

.info-block{ font-size:14px; margin:8px 0 10px; }
.info-block div{ margin-bottom:3px; }

.table-wrapper{
  display:flex;
  justify-content:space-between;
  gap:24px;
}

.table-wrapper table{
  border-collapse:collapse;
  width:100%;
  table-layout:fixed;
}

.table-wrapper th,
.table-wrapper td{
  border:1px solid #000;
  padding:4px 5px;
  font-size:12px;
}

.table-wrapper th{
  text-align:center;
  font-weight:700;
}

.table-wrapper td:nth-child(1){ text-align:center; }
.table-wrapper td:nth-child(n+3){ text-align:center; }

.table-wrapper td:nth-child(2){
  white-space:normal;
  word-break:break-word;
}

@media print{
  body *{ visibility:hidden!important; }

  #printableMarkSheets,
  #printableMarkSheets *{
    visibility:visible!important;
  }

  #printableMarkSheets{
    position:relative!important;
    left:0;
    top:0;
    width:100%;
    background:#fff;
    margin:0 auto!important;
    padding:0!important;
    box-sizing:border-box;
  }

  .marksheet-page{
    page-break-inside:avoid;
    break-inside:avoid;
  }

  .marksheet-page:not(:last-child){
    page-break-after:always;
    break-after:page;
  }

  .marksheet-card{
    border:none!important;
    box-shadow:none!important;
    background:#fff!important;
    margin-bottom:0!important;
    page-break-inside:avoid;
    break-inside:avoid;
  }

  @page{
    size:A4;
    margin:10mm 10mm 12mm 10mm;
  }

  html, body{
    -webkit-print-color-adjust:exact!important;
    print-color-adjust:exact!important;
    background:#fff!important;
    margin:0!important;
    padding:0!important;
  }

  .print-container{ display:none!important; }
}
</style>
@endsection

@section('admin')
<div class="content-body">
  <div class="container-fluid">

    <div class="row page-titles mb-2">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
        <li class="breadcrumb-item active"><a href="javascript:void(0)">Manual Mark Sheet</a></li>
      </ol>
    </div>

    <div class="print-container">
      <button id="printButton" onclick="printMarkSheets()">
        <i class="bi bi-printer"></i> PRINT
      </button>
    </div>

    <div id="printableMarkSheets">

      @php
        $hasData = false;

        foreach (($sectionsData ?? []) as $sectionId => $students) {
          if (!empty($students) && $students->count() > 0) {
            $hasData = true;
            break;
          }
        }
      @endphp

      @if(!$hasData)

        <div class="no-data-box">
          <div class="no-data-icon">
            <i class="bi bi-exclamation-circle"></i>
          </div>
          <h4>No Manual Mark Sheet Data Found</h4>
          <p>
            This exam has no approved students to group by section.<br>
            Please check the class registration data first.
          </p>
        </div>

      @else

        @foreach(($sectionsData ?? []) as $sectionId => $students)

          @continue(empty($students) || $students->count() === 0)

          @php
            $sectionName = $students->first()->section->name ?? 'N/A';
            $className = $exam->class->name ?? '-';
            $showFull = $isJunior;

            $half = (int) ceil($students->count() / 2);
            $leftStudents = $students->slice(0, $half);
            $rightStudents = $students->slice($half);
          @endphp

          <div class="marksheet-page">
            <div class="marksheet-card">

              <div class="marksheet-header">
                @if($schoolInfo && $schoolInfo->school_logo)
                  <img class="logo" src="{{ asset('core/storage/app/public/' . $schoolInfo->school_logo) }}" alt="Logo">
                @endif

                <h3 class="school-name">{{ $schoolInfo->school_name ?? 'School Name' }}</h3>
                <p class="address">{{ $schoolInfo->address ?? 'Address' }}</p>
                <p class="exam-line">{{ $exam->exam_name ?? '' }}</p>
                <div class="title">MARK ENTRY SHEET</div>
              </div>

              <div class="info-block">
                <div>Subject:.....................................................</div>
                <div>Class: {{ $className }}, Section: {{ $sectionName }}, Number ..........</div>
                <div>Paper Receive Date ......../......../...............</div>
                <div>Paper Submit Last Date ......../......../.........</div>
              </div>

              <div class="table-wrapper">

                <table>
                  @if($showFull)
                    <colgroup>
                      <col style="width:40px">
                      <col style="width:auto">
                      <col style="width:80px">
                      <col style="width:90px">
                    </colgroup>
                  @else
                    <colgroup>
                      <col style="width:40px">
                      <col style="width:auto">
                      <col style="width:55px">
                      <col style="width:55px">
                      <col style="width:55px">
                      <col style="width:55px">
                    </colgroup>
                  @endif

                  <thead>
                    <tr>
                      <th>Roll</th>
                      <th>Student Name</th>

                      @if($showFull)
                        <th>Full Marks</th>
                        <th>Total Obtain</th>
                      @else
                        <th>CQ</th>
                        <th>MCQ</th>
                        <th>Pract.</th>
                        <th>Total</th>
                      @endif
                    </tr>
                  </thead>

                  <tbody>
                    @foreach($leftStudents as $s)
                      <tr>
                        <td>{{ $s->class_roll ?? '' }}</td>
                        <td>{{ strtoupper($s->student->student_name_english ?? '') }}</td>

                        @if($showFull)
                          <td></td>
                          <td></td>
                        @else
                          <td></td>
                          <td></td>
                          <td></td>
                          <td></td>
                        @endif
                      </tr>
                    @endforeach
                  </tbody>
                </table>

                <table>
                  @if($showFull)
                    <colgroup>
                      <col style="width:40px">
                      <col style="width:auto">
                      <col style="width:80px">
                      <col style="width:90px">
                    </colgroup>
                  @else
                    <colgroup>
                      <col style="width:40px">
                      <col style="width:auto">
                      <col style="width:55px">
                      <col style="width:55px">
                      <col style="width:55px">
                      <col style="width:55px">
                    </colgroup>
                  @endif

                  <thead>
                    <tr>
                      <th>Roll</th>
                      <th>Student Name</th>

                      @if($showFull)
                        <th>Full Marks</th>
                        <th>Total Obtain</th>
                      @else
                        <th>CQ</th>
                        <th>MCQ</th>
                        <th>Pract.</th>
                        <th>Total</th>
                      @endif
                    </tr>
                  </thead>

                  <tbody>
                    @foreach($rightStudents as $s)
                      <tr>
                        <td>{{ $s->class_roll ?? '' }}</td>
                        <td>{{ strtoupper($s->student->student_name_english ?? '') }}</td>

                        @if($showFull)
                          <td></td>
                          <td></td>
                        @else
                          <td></td>
                          <td></td>
                          <td></td>
                          <td></td>
                        @endif
                      </tr>
                    @endforeach
                  </tbody>
                </table>

              </div>

            </div>
          </div>

        @endforeach

      @endif

    </div>

  </div>
</div>
@endsection

@section('customjs')
<script>
function printMarkSheets(){
  try{
    const printable = document.getElementById('printableMarkSheets');

    if (!printable) {
      alert('Printable area not found.');
      return;
    }

    const win = window.open('', '_blank', 'width=1000,height=800,scrollbars=yes');

    if (!win) {
      alert('Popup blocked. Allow popups and try again.');
      return;
    }

    win.document.open();
    win.document.write(`
      <!doctype html>
      <html>
        <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width,initial-scale=1">
          <title>Mark Entry Sheet</title>
        </head>
        <body></body>
      </html>
    `);
    win.document.close();

    const d = win.document;
    const head = d.head;
    const body = d.body;

    const base = d.createElement('base');
    base.href = document.baseURI || window.location.href;
    head.appendChild(base);

    const links = Array.from(document.querySelectorAll('link[rel="stylesheet"]'))
      .map(link => link.href)
      .filter(Boolean);

    const inlineStyles = Array.from(document.querySelectorAll('style'))
      .map(style => style.textContent || '');

    const helper = d.createElement('style');
    helper.textContent = `
      @page{
        size:A4;
        margin:10mm 10mm 12mm 10mm;
      }

      html, body{
        margin:0!important;
        padding:0!important;
        background:#fff!important;
        -webkit-print-color-adjust:exact!important;
        print-color-adjust:exact!important;
        font-family:"Times New Roman",serif;
      }

      #printableMarkSheets{
        width:100%;
        margin:0!important;
        padding:0!important;
        background:#fff!important;
      }

      .marksheet-page{
        width:100%;
        page-break-inside:avoid;
        break-inside:avoid;
      }

      .marksheet-page:not(:last-child){
        page-break-after:always;
        break-after:page;
      }

      .marksheet-card{
        border:none!important;
        box-shadow:none!important;
        background:#fff!important;
        margin-bottom:0!important;
        page-break-inside:avoid;
        break-inside:avoid;
      }

      .table-wrapper{
        display:flex;
        justify-content:space-between;
        gap:24px;
      }

      .table-wrapper table{
        width:100%;
        border-collapse:collapse;
        table-layout:fixed;
      }

      .print-container{
        display:none!important;
      }
    `;
    head.appendChild(helper);

    const sheetPromises = links.map(href => new Promise(resolve => {
      const link = d.createElement('link');
      link.rel = 'stylesheet';
      link.href = href;
      link.onload = () => resolve(true);
      link.onerror = () => resolve(false);
      head.appendChild(link);
    }));

    inlineStyles.forEach(css => {
      const style = d.createElement('style');
      style.textContent = css;
      head.appendChild(style);
    });

    const wrapper = d.createElement('div');
    wrapper.innerHTML = printable.outerHTML;
    body.appendChild(wrapper);

    const images = Array.from(wrapper.querySelectorAll('img'));

    const imagePromises = images.map(img => new Promise(resolve => {
      if (img.complete) {
        resolve(true);
        return;
      }

      img.onload = () => resolve(true);
      img.onerror = () => resolve(true);
    }));

    Promise.race([
      Promise.all([
        Promise.all(sheetPromises),
        Promise.all(imagePromises)
      ]),
      new Promise(resolve => setTimeout(resolve, 3000))
    ]).then(() => {
      win.focus();

      setTimeout(() => {
        try {
          const mediaQueryList = win.matchMedia('print');
          let printModeEntered = false;

          const closeAfterPrint = function(event) {
            if (event.matches) {
              printModeEntered = true;
            } else if (printModeEntered) {
              setTimeout(() => {
                if (!win.closed) {
                  win.close();
                }
              }, 100);
            }
          };

          if (mediaQueryList.addEventListener) {
            mediaQueryList.addEventListener('change', closeAfterPrint);
          } else {
            mediaQueryList.addListener(closeAfterPrint);
          }

          win.print();

        } catch (error) {
          alert('Print failed. Use Ctrl+P.');
          if (!win.closed) {
            win.close();
          }
        }
      }, 500);
    });

  } catch(error) {
    console.error(error);
    alert('Print error occurred.');
  }
}
</script>
@endsection