@extends('Staff.layout')
<style>
    .image-upload {
        border: 2px dashed #ddd;
        border-radius: 6px;
        cursor: pointer;
        height: 160px;
        width: 100%;
        padding: 12px;
    }

    .image-upload span {
        font-size: 14px;
    }

    .upload-box {
        border: 2px dashed #999;
        border-radius: 8px;
        padding: 24px;
        text-align: center;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .upload-box img {
        width: 140px;
        height: auto;
        border-radius: 8px;
        margin-bottom: 8px;
    }

    .upload-box p {
        color: #444;
        font-weight: 600;
    }

    .upload-box small {
        color: #777;
    }

    .late-reason-row {
        background: #d9f5ff;
        border-bottom: 1px solid #b8eaf5;
        padding: 10px 20px;

        display: flex;
        justify-content: center;
        align-items: center;
    }

    .late-reason-content {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        color: #087990;
        text-align: center;
        max-width: 100%;
    }

    .late-reason-content i {
        font-size: 20px;
        flex-shrink: 0;
    }

    .late-reason-label {
        font-weight: 600;
        white-space: nowrap;
    }

    .late-reason-text {
        font-weight: 500;
        overflow-wrap: anywhere;
    }
</style>
@section('content')

    <div class="row d-flex justify-content-center">
        <div class="col-lg-8">

            <div id="attendanceCard" class="card border-0 shadow-lg rounded-4 overflow-hidden">

                {{-- HEADER --}}
                <div class="px-4 py-3 text-white" style="background: linear-gradient(135deg, #2b5382, #03377d);">

                    <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-2">

                        {{-- Employee Name --}}
                        <div class="d-flex align-items-center gap-2">
                            <!-- <i class="ti tabler-user-circle fs-4"></i> -->
                            <div>
                                <!-- <div class="fw-semibold">Good Morning, Employee</div> -->
                                <div class="fw-semibold">
                                    Good Morning, {{ auth()->guard('staff')->user()->name ?? 'Employee' }}
                                </div>
                                <small class="opacity-75">Start your productive day 🚀</small>
                            </div>
                        </div>

                        {{-- Date Time --}}
                        <div>
                            <span id="currentDateTime" class="badge bg-info text-white px-3 py-2 shadow-sm"></span>
                        </div>
                        <div>
                            Check-in Time :
                            <span class="fw-semibold">
                                {{ $loginEntry ? \Carbon\Carbon::parse($loginEntry->check_in)->format('h:i:s A') : 'Not checked in yet' }}
                            </span>
                            <!-- <button type="button" id="shareAttendanceBtn"
                                    class="btn btn-success px-3 shadow-sm fw-semibold">
                                    <i class="ti tabler-brand-whatsapp fs-4 me-1"></i>
                                    Share
                                </button> -->
                        </div>

                    </div>

                    <div class="d-flex justify-content-between mt-2">

                        <div>
                            <span>
                                Task Status :

                                @if($currentTask)

                                    @if($currentTask->task_status == 'inprogress')
                                        <span class="badge bg-warning">In Progress</span>
                                    @else
                                        <span class="badge bg-danger">Not Started</span>
                                    @endif

                                @else
                                    <span class="badge bg-secondary">No Task Assigned</span>
                                @endif

                            </span>
                        </div>


                        <div>
                            Project Name :
                            {{ $currentTask->project->project_name ?? 'No Project Assigned' }}
                        </div>

                    </div>

                </div>
                {{-- LATE REASON ROW --}}
                @if($loginEntry && !empty($loginEntry->late_reason))
                    <div class="late-reason-row">
                        <div class="late-reason-content">
                            <i class="ti tabler-clock-exclamation"></i>

                            <div>
                                <span class="late-reason-label">Late Check-in Reason : </span>
                                <span class="late-reason-text text-danger">
                                    {{ $loginEntry->late_reason }}
                                </span>
                            </div>
                        </div>
                    </div>
                @endif
                <div class="card-body p-4">


                    <div class="row g-3">

                        <div class="col-lg-3 col-md-6 col-12">
                            <a href="{{ route('today_task')}}" class="text-decoration-none text-dark">
                                <div class="p-3 border rounded-4 h-100 d-flex align-items-center gap-3 bg-light">
                                    <i class="ti tabler-clipboard-plus fs-4 text-primary"></i>
                                    <div>
                                        <div class="text-muted small">New Tasks</div>
                                        <div class="fw-bold fs-5">{{ $newTasks }}</div>
                                    </div>
                                </div>
                            </a>
                        </div>

                        <div class="col-lg-3 col-md-6 col-12">
                            <a href="{{ route('completed_task')}}" class="text-decoration-none text-dark">
                                <div class="p-3 border rounded-4 h-100 d-flex align-items-center gap-3 bg-light">
                                    <i class="ti tabler-circle-check fs-4 text-success"></i>
                                    <div>
                                        <div class="text-muted small">Completed</div>
                                        <div class="fw-bold fs-5">{{ $completedTasks }}</div>
                                    </div>
                                </div>
                            </a>
                        </div>

                        <div class="col-lg-3 col-md-6 col-12">
                            <a href="{{ route('pending_task_table')}}" class="text-decoration-none text-dark">
                                <div class="p-3 border rounded-4 h-100 d-flex align-items-center gap-3 bg-light">
                                    <i class="ti tabler-clock-hour-4 fs-4 text-warning"></i>
                                    <div>
                                        <div class="text-muted small">Pending</div>
                                        <div class="fw-bold fs-5">{{ $pendingTasks }}</div>
                                    </div>
                                </div>
                            </a>
                        </div>

                        <div class="col-lg-3 col-md-6 col-12">
                            <a href="{{ route('hold_tasks')}}" class="text-decoration-none text-dark">
                                <div class="p-3 border rounded-4 h-100 d-flex align-items-center gap-3 bg-light">
                                    <i class="ti tabler-player-pause fs-4 text-danger"></i>
                                    <div>
                                        <div class="text-muted small">On Hold</div>
                                        <div class="fw-bold fs-5">{{ $holdTasks }}</div>
                                    </div>
                                </div>
                            </a>
                        </div>

                    </div>

                    {{-- TASK TABLE --}}
                    <div class="mt-4">
                        <div class="d-flex align-items-center justify-content-between mb-2">
                            <h6 class="mb-0 fw-semibold">
                                <i class="ti tabler-list-check me-1"></i> Task Overview
                            </h6>
                        </div>

                        <div class="table-responsive">
                            <table class="table table-hover align-middle">
                                <thead class="table-light">
                                    <tr>
                                        <th>Project</th>
                                        <th>Task</th>
                                        <th>Status</th>
                                    </tr>
                                </thead>

                                <tbody id="taskTable">
                                    @foreach ($newTaskList as $index => $task)
                                        <tr class="task-row {{ $index >= 2 ? 'd-none' : '' }}">

                                            <td>
                                                <i class="ti tabler-folder text-primary me-1"></i>
                                                {{ $task->project->project_name ?? '-' }}
                                            </td>

                                            <td>
                                                <i class="ti tabler-subtask me-1 text-muted"></i>
                                                {{ $task->task_name }}
                                            </td>

                                            <td>
                                                @if(optional($task->project)->created_at?->isToday())
                                                    <span class="badge bg-success">
                                                        <i class="ti tabler-sparkles"></i> New
                                                    </span>
                                                @else
                                                    <span class="badge bg-danger">
                                                        <i class="ti tabler-alert-circle"></i> Pending
                                                    </span>
                                                @endif
                                            </td>

                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        <div class="text-center mt-2">
                            <button id="showMoreBtn" class="btn btn-sm  btn-outline-primary">
                                Show More
                            </button>
                        </div>
                    </div>

                    <div class="alert alert-info d-flex align-items-center gap-2 rounded-3 m-3">
                        <i class="ti tabler-bulb"></i>
                        <span><strong>Note:</strong> Start the task and share the check-in screenshot in NovelX Technology
                            Whatsapp Group.</span>
                    </div>
                    <form action="{{ route('daily_login_form') }}" method="POST" id="login_form" class="mt-4">
                        @csrf


                        <div class="mb-3">
                            <label class="form-label fw-semibold">
                                Work Mode
                            </label>

                            <select class="form-select" name="work_mode">
                                <option value="office" {{ old('work_mode', $loginEntry->work_mode ?? 'office') == 'office' ? 'selected' : '' }}>
                                    In Office
                                </option>

                                <option value="wfh" {{ old('work_mode', $loginEntry->work_mode ?? 'office') == 'wfh' ? 'selected' : '' }}>
                                    WFH
                                </option>
                            </select>
                        </div>
                        <div id="lateSection" class="mb-3 d-none">
                            <label class="form-label fw-semibold">
                                Reason for Late Check-in
                            </label>

                            <input type="text" class="form-control" name="late_reason"
                                placeholder="Enter reason if you are late..." required>
                        </div>

                        <div class="text-center mt-3">
                            @if($loginEntry)
                                <button type="button" id="shareAttendanceBtn"
                                    class="btn btn-success px-4 shadow-sm fw-semibold">
                                    <i class="ti tabler-brand-whatsapp fs-4 me-1"></i>
                                    Share
                                </button>
                            @else
                                <button type="submit" class="btn btn-primary px-4" id="checkInBtn">
                                    Check In
                                </button>
                            @endif
                        </div>

                    </form>

                </div>
            </div>
        </div>

    </div>
    <script>
        document.getElementById('login_form').addEventListener('submit', function () {

            let btn = document.getElementById('checkInBtn');

            btn.disabled = true;
            btn.innerHTML = `
                            <span class="spinner-border spinner-border-sm me-1" role="status"></span>
                            Processing...
                        `;
        });
    </script>
    <script>
        const uploadBox = document.getElementById('uploadBox');
        const fileInput = document.getElementById('fileInput');
        const previewImage = document.getElementById('previewImage');
        const uploadText = document.getElementById('uploadText');
        uploadBox.addEventListener('click', () => {
            fileInput.click();
        });
        // Handle file selection
        fileInput.addEventListener('change', () => {
            const file = fileInput.files[0];
            if (!file) return;
            if (file.size > 5 * 1024 * 1024) {
                alert('File size must be less than 5 MB.');
                fileInput.value = '';
                return;
            }
            // Show preview
            const reader = new FileReader();
            reader.onload = function (e) {
                previewImage.src = e.target.result;
                previewImage.style.display = 'block';
                uploadText.textContent = 'Image uploaded';
            };
            reader.readAsDataURL(file);
        });
    </script>
    <!-- <script>
                        document.addEventListener('DOMContentLoaded', function() {
                            const liveTime = document.getElementById('currentDateTime');
                            const lateSection = document.getElementById('lateSection');
                            const reasonInput = document.querySelector('[name="late_reason"]');
                            const submitBtn = document.getElementById('finalSubmit');
                            const form = document.getElementById('login_form');

                            function getISTTime() {
                                const now = new Date();
                                return new Date(now.toLocaleString('en-US', {
                                    timeZone: 'Asia/Kolkata'
                                }));
                            }
                            const lateTime = new Date();
                            lateTime.setHours(9, 10, 0, 0);

                            function updateDateTime() {
                                const now = getISTTime();
                                liveTime.innerText =
                                    now.toLocaleDateString('en-GB') + ' | ' +
                                    now.toLocaleTimeString('en-US');
                                // Late check
                                if (now.getTime() >= lateTime.getTime()) {
                                    lateSection.classList.remove('d-none');
                                    reasonInput.setAttribute('required', true);
                                } else {
                                    lateSection.classList.add('d-none');
                                    reasonInput.removeAttribute('required');
                                }
                            }
                            // Start clock
                            updateDateTime();
                            setInterval(updateDateTime, 1000);
                            // Submit handler
                            submitBtn.addEventListener('click', function(e) {
                                e.preventDefault();
                                submitBtn.disabled = true;
                                submitBtn.innerText = 'Processing...';
                                form.submit();
                            });
                        });
                    </script> -->
    <script>
        document.addEventListener('DOMContentLoaded', function () {

            const liveTime = document.getElementById('currentDateTime');
            const lateSection = document.getElementById('lateSection');
            const reasonInput = document.querySelector('[name="late_reason"]');
            const submitBtn = document.getElementById('checkInBtn');
            const form = document.getElementById('login_form');
            const hasCheckedIn = {{ $loginEntry ? 'true' : 'false' }};
            function getISTTime() {
                const now = new Date();
                return new Date(
                    now.toLocaleString('en-US', {
                        timeZone: 'Asia/Kolkata'
                    })
                );
            }

            function updateDateTime() {

                const now = getISTTime();

                liveTime.innerText =
                    now.toLocaleDateString('en-GB') +
                    ' | ' +
                    now.toLocaleTimeString('en-US');
                if (hasCheckedIn) {
                    lateSection.classList.add('d-none');
                    reasonInput.removeAttribute('required');
                    return;
                }
                const day = now.toLocaleDateString('en-US', {
                    weekday: 'long'
                });

                const lateTime = new Date(now);

                // Saturday → 10:01 AM
                if (day === 'Saturday') {
                    lateTime.setHours(10, 1, 0, 0);
                }
                // Monday-Friday → 9:10 AM
                else {
                    lateTime.setHours(9, 10, 0, 0);
                }

                if (now >= lateTime) {
                    lateSection.classList.remove('d-none');
                    reasonInput.setAttribute('required', true);
                } else {
                    lateSection.classList.add('d-none');
                    reasonInput.removeAttribute('required');
                }
            }

            updateDateTime();
            setInterval(updateDateTime, 1000);

            if (submitBtn) {
                submitBtn.addEventListener('click', function (e) {
                    e.preventDefault();

                    submitBtn.disabled = true;
                    submitBtn.innerText = 'Processing...';

                    form.submit();
                });
            }

        });
    </script>
    <script>
        const button = document.getElementById('showMoreBtn');
        const rows = document.querySelectorAll('.task-row');
        let expanded = false;
        button.addEventListener('click', function () {
            if (!expanded) {
                // SHOW ALL
                rows.forEach(row => row.classList.remove('d-none'));
                button.textContent = 'Hide';
                expanded = true;
            } else {
                // SHOW ONLY FIRST 5
                rows.forEach((row, index) => {
                    if (index >= 5) {
                        row.classList.add('d-none');
                    }
                });
                button.textContent = 'Show More';
                expanded = false;
            }
        });
    </script>
    <script>
        if (/Mobi|Android|iPhone|iPad/i.test(navigator.userAgent)) {
            alert("Mobile login is not allowed. Please use desktop.");
            window.location.href = "{{ route('staff.dashboard') }}";
        }
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function () {

            const shareBtn = document.getElementById('shareAttendanceBtn');
            const attendanceCard = document.getElementById('attendanceCard');

            if (!shareBtn || !attendanceCard) {
                console.error('Attendance elements not found');
                return;
            }



            const tablerIcons = {

                'tabler-clipboard-plus': `
                    <path d="M9 5h6"></path>
                    <path d="M9 3h6v4H9z"></path>
                    <path d="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2"></path>
                    <path d="M12 11v6"></path>
                    <path d="M9 14h6"></path>
                `,

                'tabler-circle-check': `
                    <circle cx="12" cy="12" r="9"></circle>
                    <path d="m9 12 2 2 4-4"></path>
                `,

                'tabler-clock-hour-4': `
                    <circle cx="12" cy="12" r="9"></circle>
                    <path d="M12 12l4 2"></path>
                    <path d="M12 7v5"></path>
                `,

                'tabler-player-pause': `
                    <circle cx="12" cy="12" r="9"></circle>
                    <path d="M10 15V9"></path>
                    <path d="M14 15V9"></path>
                `,

                'tabler-list-check': `
                    <path d="M3 5h2"></path>
                    <path d="M3 10h2"></path>
                    <path d="M3 15h2"></path>
                    <path d="M3 20h2"></path>
                    <path d="M7 5h14"></path>
                    <path d="M7 10h10"></path>
                    <path d="m7 15 2 2 4-4"></path>
                    <path d="M7 20h14"></path>
                `,

                'tabler-folder': `
                    <path d="M5 4h5l2 2h7a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2"></path>
                `,

                'tabler-subtask': `
                    <path d="M6 9l6 6 6-6"></path>
                    <path d="M12 3v12"></path>
                    <path d="M6 21h12"></path>
                `,

                'tabler-sparkles': `
                    <path d="M12 3l1.5 5.5L19 10l-5.5 1.5L12 17l-1.5-5.5L5 10l5.5-1.5z"></path>
                    <path d="M19 15l.7 2.3L22 18l-2.3.7L19 21l-.7-2.3L16 18l2.3-.7z"></path>
                `,

                'tabler-alert-circle': `
                    <circle cx="12" cy="12" r="9"></circle>
                    <path d="M12 8v4"></path>
                    <path d="M12 16v.01"></path>
                `,

                'tabler-bulb': `
                    <path d="M9 18h6"></path>
                    <path d="M10 22h4"></path>
                    <path d="M12 2a7 7 0 0 0-4 12.74c.63.47 1 1.2 1 2.06V17h6v-.2c0-.86.37-1.59 1-2.06A7 7 0 0 0 12 2z"></path>
                `,

                'tabler-clock-exclamation': `
                    <circle cx="12" cy="12" r="9"></circle>
                    <path d="M12 7v5"></path>
                    <path d="M12 15v.01"></path>
                    <path d="M19 16v3"></path>
                    <path d="M19 22v.01"></path>
                `,

                'tabler-brand-whatsapp': `
                    <path d="M3 21l1.7-5.1A9 9 0 1 1 8.1 19.3z"></path>
                    <path d="M8 10.5c.5 2 2 3.5 4 4"></path>
                    <path d="M9 9c.2-.5.6-.8 1-.8h.7c.3 0 .5.2.6.5l.5 1.4c.1.3 0 .6-.2.8l-.6.6"></path>
                `
            };



            function getCurrentTheme() {

                return document.documentElement.getAttribute(
                    'data-bs-theme'
                ) || 'light';

            }



            function containsUnsupportedColor(value) {

                if (!value) {
                    return false;
                }

                value = value.toLowerCase();

                return (
                    value.includes('color(') ||
                    value.includes('oklab') ||
                    value.includes('oklch') ||
                    value.includes('lab(') ||
                    value.includes('lch(') ||
                    value.includes('color-mix')
                );

            }


            shareBtn.addEventListener('click', async function () {

                const originalHTML = shareBtn.innerHTML;

                try {

                    shareBtn.disabled = true;

                    shareBtn.innerHTML = `
                        <span class="spinner-border spinner-border-sm me-1"></span>
                        Creating Screenshot...
                    `;


                    if (
                        document.fonts &&
                        document.fonts.ready
                    ) {
                        await document.fonts.ready;
                    }


                    const currentTheme = getCurrentTheme();

                    const isDark =
                        currentTheme === 'dark';

                    console.log(
                        'Attendance screenshot theme:',
                        currentTheme
                    );


                    const canvas = await html2canvas(
                        attendanceCard,
                        {

                            scale: 2,

                            /*
                            | Keep current theme
                            */

                            backgroundColor:
                                isDark
                                    ? '#2b2b40'
                                    : '#ffffff',

                            useCORS: true,
                            allowTaint: false,
                            logging: false,
                            foreignObjectRendering: false,
                            imageTimeout: 15000,
                            scrollX: 0,
                            scrollY: 0,




                            onclone: function (clonedDocument) {

                                const clonedCard =
                                    clonedDocument.getElementById(
                                        'attendanceCard'
                                    );

                                if (!clonedCard) {
                                    return;
                                }


                                clonedDocument.documentElement
                                    .setAttribute(
                                        'data-bs-theme',
                                        currentTheme
                                    );

                                clonedDocument.body
                                    .setAttribute(
                                        'data-bs-theme',
                                        currentTheme
                                    );



                                const clonedShareBtn =
                                    clonedDocument.getElementById(
                                        'shareAttendanceBtn'
                                    );

                                if (clonedShareBtn) {
                                    clonedShareBtn.remove();
                                }



                                const style =
                                    clonedDocument.createElement(
                                        'style'
                                    );

                                style.innerHTML = `


                                    #attendanceCard {

                                        background:
                                            ${isDark
                                        ? '#2b2b40'
                                        : '#ffffff'
                                    } !important;

                                        background-color:
                                            ${isDark
                                        ? '#2b2b40'
                                        : '#ffffff'
                                    } !important;

                                        color:
                                            ${isDark
                                        ? '#e5e7eb'
                                        : '#212529'
                                    } !important;

                                        box-shadow:
                                            none !important;
                                    }

                                    #attendanceCard * {
                                        text-shadow: none !important;
                                    }

                                    #attendanceCard > div:first-child {

                                        background:
                                            linear-gradient(
                                                135deg,
                                                #2b5382,
                                                #03377d
                                            ) !important;

                                        background-image:
                                            linear-gradient(
                                                135deg,
                                                #2b5382,
                                                #03377d
                                            ) !important;

                                        color:
                                            #ffffff !important;
                                    }

                                    #attendanceCard > div:first-child * {
                                        color: #ffffff !important;
                                    }

                                    #attendanceCard .late-reason-row {

                                        background:
                                            ${isDark
                                        ? '#243b4a'
                                        : '#d9f5ff'
                                    } !important;

                                        background-image: none !important;

                                        border-bottom:
                                            1px solid
                                            ${isDark
                                        ? '#365b6d'
                                        : '#b8eaf5'
                                    } !important;

                                        color:
                                            ${isDark
                                        ? '#9edff2'
                                        : '#087990'
                                    } !important;
                                    }

                                    #attendanceCard .late-reason-content {

                                        color:
                                            ${isDark
                                        ? '#9edff2'
                                        : '#087990'
                                    } !important;
                                    }

                                    #attendanceCard .late-reason-label {

                                        color:
                                            ${isDark
                                        ? '#9edff2'
                                        : '#087990'
                                    } !important;
                                    }

                                    #attendanceCard .late-reason-text {

                                        color:
                                            #dc3545 !important;
                                    }


                                    #attendanceCard .bg-light {

                                        background:
                                            ${isDark
                                        ? '#34344a'
                                        : '#f8f9fa'
                                    } !important;

                                        background-image:
                                            none !important;

                                        color:
                                            ${isDark
                                        ? '#e5e7eb'
                                        : '#212529'
                                    } !important;
                                    }


                                    #attendanceCard .text-primary {
                                        color: #0d6efd !important;
                                    }

                                    #attendanceCard .text-success {
                                        color: #198754 !important;
                                    }

                                    #attendanceCard .text-warning {
                                        color: #ffc107 !important;
                                    }

                                    #attendanceCard .text-danger {
                                        color: #dc3545 !important;
                                    }

                                    #attendanceCard .text-muted {

                                        color:
                                            ${isDark
                                        ? '#adb5bd'
                                        : '#6c757d'
                                    } !important;
                                    }

                                    #attendanceCard .text-white {
                                        color: #ffffff !important;
                                    }


                                    #attendanceCard .bg-success {

                                        background:
                                            #198754 !important;

                                        background-image:
                                            none !important;

                                        color:
                                            #ffffff !important;
                                    }

                                    #attendanceCard .bg-warning {

                                        background:
                                            #ffc107 !important;

                                        background-image:
                                            none !important;

                                        color:
                                            #212529 !important;
                                    }

                                    #attendanceCard .bg-danger {

                                        background:
                                            #dc3545 !important;

                                        background-image:
                                            none !important;

                                        color:
                                            #ffffff !important;
                                    }

                                    #attendanceCard .bg-secondary {

                                        background:
                                            #6c757d !important;

                                        background-image:
                                            none !important;

                                        color:
                                            #ffffff !important;
                                    }

                                    #attendanceCard .bg-info {

                                        background:
                                            #0dcaf0 !important;

                                        background-image:
                                            none !important;

                                        color:
                                            #ffffff !important;
                                    }

                                    #attendanceCard .table {

                                        color:
                                            ${isDark
                                        ? '#e5e7eb'
                                        : '#212529'
                                    } !important;

                                        background:
                                            ${isDark
                                        ? '#2b2b40'
                                        : '#ffffff'
                                    } !important;
                                    }

                                    #attendanceCard .table th,
                                    #attendanceCard .table td {

                                        color:
                                            ${isDark
                                        ? '#e5e7eb'
                                        : '#212529'
                                    } !important;

                                        background:
                                            ${isDark
                                        ? '#2b2b40'
                                        : '#ffffff'
                                    } !important;

                                        border-color:
                                            ${isDark
                                        ? '#44445a'
                                        : '#dee2e6'
                                    } !important;
                                    }

                                    #attendanceCard .table-light,
                                    #attendanceCard .table-light th {

                                        background:
                                            ${isDark
                                        ? '#34344a'
                                        : '#f8f9fa'
                                    } !important;

                                        color:
                                            ${isDark
                                        ? '#e5e7eb'
                                        : '#212529'
                                    } !important;
                                    }


                                    #attendanceCard .alert-info {

                                        background:
                                            ${isDark
                                        ? '#263f4d'
                                        : '#cff4fc'
                                    } !important;

                                        background-image:
                                            none !important;

                                        border-color:
                                            ${isDark
                                        ? '#365b6d'
                                        : '#b6effb'
                                    } !important;

                                        color:
                                            ${isDark
                                        ? '#b8e9f7'
                                        : '#055160'
                                    } !important;
                                    }

                                    #attendanceCard .alert-info * {

                                        color:
                                            ${isDark
                                        ? '#b8e9f7'
                                        : '#055160'
                                    } !important;
                                    }

                                    #attendanceCard .border {

                                        border-color:
                                            ${isDark
                                        ? '#44445a'
                                        : '#dee2e6'
                                    } !important;
                                    }


                                    #attendanceCard .form-control,
                                    #attendanceCard .form-select {

                                        background:
                                            ${isDark
                                        ? '#34344a'
                                        : '#ffffff'
                                    } !important;

                                        background-color:
                                            ${isDark
                                        ? '#34344a'
                                        : '#ffffff'
                                    } !important;

                                        color:
                                            ${isDark
                                        ? '#e5e7eb'
                                        : '#212529'
                                    } !important;

                                        border-color:
                                            ${isDark
                                        ? '#55556d'
                                        : '#ced4da'
                                    } !important;
                                    }

                                    #attendanceCard .btn-primary {

                                        background:
                                            #0d6efd !important;

                                        background-image:
                                            none !important;

                                        border-color:
                                            #0d6efd !important;

                                        color:
                                            #ffffff !important;
                                    }


                                    #attendanceCard .shadow,
                                    #attendanceCard .shadow-sm,
                                    #attendanceCard .shadow-lg {

                                        box-shadow:
                                            none !important;
                                    }

                                    #attendanceCard {

                                        --bs-body-color:
                                            ${isDark
                                        ? '#e5e7eb'
                                        : '#212529'
                                    } !important;

                                        --bs-body-bg:
                                            ${isDark
                                        ? '#2b2b40'
                                        : '#ffffff'
                                    } !important;

                                        --bs-card-color:
                                            ${isDark
                                        ? '#e5e7eb'
                                        : '#212529'
                                    } !important;

                                        --bs-card-bg:
                                            ${isDark
                                        ? '#2b2b40'
                                        : '#ffffff'
                                    } !important;

                                        --bs-table-color:
                                            ${isDark
                                        ? '#e5e7eb'
                                        : '#212529'
                                    } !important;

                                        --bs-table-bg:
                                            ${isDark
                                        ? '#2b2b40'
                                        : '#ffffff'
                                    } !important;

                                        --bs-border-color:
                                            ${isDark
                                        ? '#44445a'
                                        : '#dee2e6'
                                    } !important;
                                    }

                                `;

                                clonedDocument.head.appendChild(style);


                                const elements =
                                    clonedCard.querySelectorAll('*');

                                elements.forEach(function (element) {

                                    const computed =
                                        clonedDocument
                                            .defaultView
                                            .getComputedStyle(
                                                element
                                            );

                                    const color =
                                        computed.getPropertyValue(
                                            'color'
                                        );

                                    if (
                                        containsUnsupportedColor(
                                            color
                                        )
                                    ) {

                                        element.style.setProperty(
                                            'color',
                                            isDark
                                                ? '#e5e7eb'
                                                : '#212529',
                                            'important'
                                        );

                                    }

                                    const backgroundColor =
                                        computed.getPropertyValue(
                                            'background-color'
                                        );

                                    if (
                                        containsUnsupportedColor(
                                            backgroundColor
                                        )
                                    ) {

                                        element.style.setProperty(
                                            'background-color',
                                            isDark
                                                ? '#2b2b40'
                                                : '#ffffff',
                                            'important'
                                        );

                                    }

                                    const borderColor =
                                        computed.getPropertyValue(
                                            'border-color'
                                        );

                                    if (
                                        containsUnsupportedColor(
                                            borderColor
                                        )
                                    ) {

                                        element.style.setProperty(
                                            'border-color',
                                            isDark
                                                ? '#44445a'
                                                : '#dee2e6',
                                            'important'
                                        );

                                    }

                                    const boxShadow =
                                        computed.getPropertyValue(
                                            'box-shadow'
                                        );

                                    if (
                                        containsUnsupportedColor(
                                            boxShadow
                                        )
                                    ) {

                                        element.style.setProperty(
                                            'box-shadow',
                                            'none',
                                            'important'
                                        );

                                    }

                                    const backgroundImage =
                                        computed.getPropertyValue(
                                            'background-image'
                                        );

                                    if (
                                        containsUnsupportedColor(
                                            backgroundImage
                                        )
                                    ) {

                                        element.style.setProperty(
                                            'background-image',
                                            'none',
                                            'important'
                                        );

                                    }

                                });


                                const icons =
                                    clonedCard.querySelectorAll(
                                        '.ti'
                                    );

                                icons.forEach(function (icon) {

                                    const iconClass =
                                        Array.from(
                                            icon.classList
                                        ).find(function (className) {

                                            return className.startsWith(
                                                'tabler-'
                                            );

                                        });

                                    if (!iconClass) {
                                        return;
                                    }


                                    const svgContent =
                                        tablerIcons[iconClass];

                                    if (!svgContent) {
                                        return;
                                    }


                                    const computed =
                                        clonedDocument
                                            .defaultView
                                            .getComputedStyle(
                                                icon
                                            );


                                    let iconColor = computed.getPropertyValue('color');

                                    if (icon.classList.contains('text-primary')
                                    ) {
                                        iconColor = '#0d6efd';
                                    } else if (
                                        icon.classList.contains('text-success')
                                    ) {
                                        iconColor = '#198754';
                                    } else if (icon.classList.contains('text-warning')
                                    ) {
                                        iconColor = '#ffc107';
                                    } else if (
                                        icon.classList.contains('text-danger')
                                    ) {
                                        iconColor = '#dc3545';
                                    } else if (icon.classList.contains('text-muted')
                                    ) {
                                        iconColor = isDark ? '#adb5bd' : '#6c757d';
                                    } else if (
                                        icon.classList.contains('text-white')
                                    ) {
                                        iconColor = '#ffffff';
                                    }


                                    if (
                                        !iconColor ||
                                        containsUnsupportedColor(iconColor)
                                    ) {
                                        iconColor =
                                            isDark ? '#e5e7eb' : '#212529';
                                    }

                                    const svg =
                                        clonedDocument
                                            .createElementNS(
                                                'http://www.w3.org/2000/svg',
                                                'svg'
                                            );


                                    svg.setAttribute(
                                        'xmlns',
                                        'http://www.w3.org/2000/svg'
                                    );

                                    svg.setAttribute(
                                        'width',
                                        '18'
                                    );

                                    svg.setAttribute(
                                        'height',
                                        '18'
                                    );

                                    svg.setAttribute(
                                        'viewBox',
                                        '0 0 24 24'
                                    );

                                    svg.setAttribute(
                                        'fill',
                                        'none'
                                    );

                                    svg.setAttribute(
                                        'stroke',
                                        iconColor
                                    );

                                    svg.setAttribute(
                                        'stroke-width',
                                        '2'
                                    );

                                    svg.setAttribute(
                                        'stroke-linecap',
                                        'round'
                                    );

                                    svg.setAttribute(
                                        'stroke-linejoin',
                                        'round'
                                    );


                                    svg.innerHTML =
                                        svgContent;


                                    svg.style.width =
                                        '18px';

                                    svg.style.height =
                                        '18px';

                                    svg.style.display =
                                        'inline-block';

                                    svg.style.verticalAlign =
                                        '-3px';

                                    svg.style.flexShrink =
                                        '0';


                                    svg.style.marginRight =
                                        computed.getPropertyValue(
                                            'margin-right'
                                        );

                                    svg.style.marginLeft =
                                        computed.getPropertyValue(
                                            'margin-left'
                                        );


                                    icon.replaceWith(svg);

                                });

                                clonedCard.style.setProperty(
                                    'background',
                                    isDark
                                        ? '#2b2b40'
                                        : '#ffffff',
                                    'important'
                                );

                                clonedCard.style.setProperty(
                                    'background-color',
                                    isDark
                                        ? '#2b2b40'
                                        : '#ffffff',
                                    'important'
                                );

                                clonedCard.style.setProperty(
                                    'color',
                                    isDark
                                        ? '#e5e7eb'
                                        : '#212529',
                                    'important'
                                );

                            }

                        }
                    );


                    const blob =
                        await new Promise(function (resolve) {

                            canvas.toBlob(
                                resolve,
                                'image/png',
                                1
                            );

                        });


                    if (!blob) {

                        throw new Error(
                            'Could not create attendance screenshot.'
                        );

                    }

                    const file =
                        new File(
                            [blob],
                            'attendance-checkin.png',
                            {
                                type: 'image/png'
                            }
                        );
                    const shareData = {
                        files: [file],
                        text: `{{ auth()->guard('staff')->user()->name ?? 'Employee' }} - Check-in - {{ $loginEntry ? \Carbon\Carbon::parse($loginEntry->check_in)->format('h:i:s A') : 'Not checked in yet' }}`

                    };

                    if (
                        navigator.share &&
                        navigator.canShare &&
                        navigator.canShare({
                            files: [file]
                        })
                    ) {

                        await navigator.share(shareData);

                    } else {

                        alert(
                            'Your browser does not support direct image sharing.'
                        );

                    }


                } catch (error) {

                    console.error(
                        'ATTENDANCE SCREENSHOT ERROR:',
                        error
                    );


                    if (
                        error.name !== 'AbortError'
                    ) {

                        alert(
                            'Screenshot failed.\n\n' +
                            error.message
                        );

                    }

                } finally {

                    shareBtn.disabled =
                        false;

                    shareBtn.innerHTML =
                        originalHTML;

                }

            });

        });
    </script>
@endsection