@include('livewire.user.modal.attendance')    
      <div class="row">
        <div class="col-xl-12 col-12">
          <div class="box bg-primary-light">
            <div class="box-body d-flex px-0">
              <div class="flex-grow-1 p-10 flex-grow-1 bg-img dask-bg bg-none-md">
                <div class="row">
                  <div class="col-12 col-xl-7">
                  @if (session()->has('error'))  
                    <div class="alert alert-warning alert-dismissible" id="Timer">
                      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                      {!! session('error') !!} </div>
                    @endif                        
                    <h2>Welcome back, <strong>NICMAR!</strong></h2>
                    <p class="text-dark my-10 fs-16"> Your Profile complated <strong class="text-warning">{{$profileCompletionPercent}}%</strong> of the tasks. </p>
                    <p>

<button wire:click="openScanner" class="btn btn-primary btn-xs btn-outline">
    <i class="fa fa-qrcode"></i> Scan QR
</button>
                    </p>
                   </div>
                  <div class="col-12 col-xl-5">
                     @if(count($docToBeUploaded))<h3>Important Notes:</h3>@endif
                    <div class="overflow-hidden">
                      <div class="scroll-up">
                        <ul>
                          @foreach($docToBeUploaded as $docRec)
                          <li>{{$docRec->file_label}}, not uploaded</li>
                          @endforeach
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="row g-3">
             <div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-6">
              <div class="box">
                <div class="box-header with-border">
                  <h4 class="box-title">Profile Status </h4>
                  <ul class="box-controls pull-right d-md-flex d-none">
                    <li class="dropdown">
                      <a class="btn btn-primary px-10" href="{{ url('/exedu-student/student-detail') }}">View Detail</a>
                    </li>
                  </ul>
                </div>
                <div class="box-body">
                <div class="row bg-light rounded align-items-center p-3 mb-3 bs-5 border-primary">
                  <div class="d-flex align-items-center gap-items-3 justify-content-between">
                    <div class="d-flex align-items-center fw-500">
                      <div class="me-15 w-50 d-table"> <img src="{{ $profilePhoto ? asset('storage/profile/'.$profilePhoto) : asset('backend/layouts/img/No-Image.png') }}" class="avatar avatar-lg rounded10 bg-primary-light" alt="profile-photo"> </div>
                      <div> <a href="{{ url('/user/personal-detail') }}" class="text-dark hover-primary mb-5 d-block fs-16">Personal Detail</a>
                        <div class="w-200">
                          <span class="text-fade fs-12">Last Modified: 17-May-25 10:15 AM</span>
                        </div>
                      </div>
                    </div>
                    <div class="text-end">
                      <span class="badge bg-{{ $hasPersonalDetailFilled ? 'success' : 'danger'}}">{{ $hasPersonalDetailFilled ? 'Completed' : 'Incomplete'}}</span>
                    </div>
                  </div>
                </div>

                <div class="row bg-light rounded align-items-center p-3 mb-3 bs-5 border-primary">
                  <div class="d-flex align-items-center gap-items-3 justify-content-between">
                    <div class="d-flex align-items-center fw-500">
                      <div class="me-15 bg-warning h-50 w-50 l-h-60 rounded text-center"> <span class="icon-Book-open fs-24"><span class="path1"></span><span class="path2"></span></span> </div>
                      <div> <a href="{{ url('/user/academic-detail') }}" class="text-dark hover-primary mb-5 d-block fs-16">Academic Detail</a>
                        <div class="w-200">
                          <span class="text-fade fs-12">Last Modified: 17-May-25 10:15 AM</span>
                        </div>
                      </div>
                    </div>
                    <div class="text-end">
                      <span class="badge bg-{{ $hasAcademicFilled ? 'success' : 'danger'}}">{{ $hasAcademicFilled ? 'Completed' : 'Incomplete'}}</span>
                    </div>
                  </div>
                </div>                
                  
                <div class="row bg-light rounded align-items-center p-3 mb-3 bs-5 border-primary responsive">
                  <div class="d-flex align-items-center gap-items-3 justify-content-between">
                    <div class="d-flex align-items-center fw-500">
                      <div class="me-15 bg-warning h-50 w-50 l-h-60 rounded text-center"> <span class="ti-briefcase fs-24"><span class="path1"></span><span class="path2"></span></span> </div>
                      <div> <a href="{{ url('/user/document') }}" class="text-dark hover-primary mb-5 d-block fs-16">Documents Status</a>
                        <div class="w-200">
                            <div class="progress mb-0">
                              <div class="progress-bar progress-bar-primary progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="{{$documentProgress}}" aria-valuemin="0" aria-valuemax="100" style="width: {{$documentProgress}}%"><div class="text-center mt-1">{{$documentProgress}}%</div>
                            </div>
													</div>            
                          <!-- <div class="d-flex align-items-center justify-content-between mb-2"> <span class="text-fade"> 83% </span> <span class="text-fade"> Progress </span> </div>               -->
                          <span class="text-fade fs-12">Last Modified: 17-May-25 10:15 AM</span>
                        </div>
                      </div>
                    </div>
                    <div class="text-end">
                      <span class="badge bg-{{ $hasDocumentUploaded ? 'success' : 'danger'}}">{{ $hasDocumentUploaded ? 'Completed' : 'Incomplete'}}</span>
                    </div>
                  </div>
                </div> 
               

                </div>
              </div>
            </div>
            <div class="col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6 col-xxl-3">
              <div class="box">
                <div class="box-header with-border">
                  <h4 class="box-title">Profile Status</h4>
                </div>
                <div class="box-body">
                  <div id="profileStatus" data-percent="{{ $profileCompletionPercent }}"></div>
                  <div class="d-flex justify-content-center">
                    <p class="d-flex align-items-center fw-600 mx-20"><span class="badge badge-xl badge-dot badge-warning me-20"></span> Progress</p>
                    <p class="d-flex align-items-center fw-600 mx-20"><span class="badge badge-xl badge-dot badge-primary me-20"></span> Done</p>
                  </div>
                </div>
              </div>
            </div>
          <div class="col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6 col-xxl-3">
            <div class="box">
              <div class="box-body">
                <div class="box no-shadow mb-0">
                  <div class="box-body px-0 pt-0">
                    <div id="calendar" class="dask evt-cal"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>            
          </div>
        <!-- end row -->

        </div>

      </div>
      @push('toggleScript')
<script src="https://unpkg.com/html5-qrcode" type="text/javascript"></script>
<script>
document.addEventListener("livewire:init", () => {
    let html5QrCode = null;
    let qrScanInProgress = false;
    const modalEl = document.getElementById("bscontent");
    const bsModal = new bootstrap.Modal(modalEl, { backdrop: 'static', keyboard: false });

    // 🟢 Open scanner when Livewire emits event
    Livewire.on("openQrScanner", () => {
        bsModal.show();

        // Start scanner once modal is visible
        modalEl.addEventListener('shown.bs.modal', async () => {
            try {
                if (html5QrCode) {
                    await html5QrCode.stop();
                    await html5QrCode.clear();
                    html5QrCode = null;
                }

                html5QrCode = new Html5Qrcode("reader");

                // ✅ Get available cameras
                const cameras = await Html5Qrcode.getCameras();
                if (!cameras || cameras.length === 0) {
                    alert("No camera detected on this device.");
                    return;
                }

                // Prefer back camera (mobile)
                const backCamera = cameras.find(cam =>
                    cam.label.toLowerCase().includes("back")
                ) || cameras[0];

                // ✅ Enhanced settings for stability & distance scanning
                const config = {
                    fps: 10,
                    qrbox: { width: 280, height: 280 },
                    aspectRatio: 1.7778,
                    experimentalFeatures: {
                        useBarCodeDetectorIfSupported: true
                    },
                    rememberLastUsedCamera: true,
                    videoConstraints: {
                        deviceId: { exact: backCamera.id },
                        facingMode: "environment",
                        width: { ideal: 1920 },
                        height: { ideal: 1080 },
                        focusMode: "continuous"
                    }
                };

                // Start scanner
                await html5QrCode.start(
                    { deviceId: { exact: backCamera.id } },
                    config,
                    (decodedText) => {
                        if (qrScanInProgress) return; // avoid double-scan
                        qrScanInProgress = true;

                        console.log("✅ QR Scanned:", decodedText);

                        // Send to Livewire
                        Livewire.dispatch("qr-scanned", { code: decodedText });

                        // Smooth stop and close modal
                        setTimeout(async () => {
                            try {
                                await html5QrCode.stop();
                                await html5QrCode.clear();
                                html5QrCode = null;
                                bsModal.hide();
                                qrScanInProgress = false;
                            } catch (e) {
                                console.warn("Stop error:", e);
                            }
                        }, 300);
                    },
                    (scanError) => {
                        // Ignore minor errors, continuous scanning
                        // console.debug("Scan error:", scanError);
                    }
                );
            } catch (err) {
                console.error("Camera start error:", err);
                alert("Camera access failed. Please allow permissions or use HTTPS.");
            }
        }, { once: true });
    });

    // 🧹 Cleanup when modal closes
    modalEl.addEventListener("hidden.bs.modal", async () => {
        try {
            if (html5QrCode) {
                await html5QrCode.stop();
                await html5QrCode.clear();
                html5QrCode = null;
                qrScanInProgress = false;
            }
        } catch (e) {
            console.warn("Cleanup error:", e);
        }
    });

    // 🔴 Allow Livewire to close modal externally
    window.addEventListener("close-model", () => {
        bsModal.hide();
    });
});
</script>
@endpush