@extends('Staff.layout')
<!-- Tabler Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">
<style>
    :root {
        --primary-blue: #2f80ed;
        --primary-blue-dark: #1c5dc9;
        --primary-blue-light: #f4f8ff;
        --border-blue: #d6e6ff;
    }
    .dashboard-card {
        border-radius: 18px;
        overflow: hidden;
        border: 0;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.05);
    }
    .dashboard-header {
        background: linear-gradient(135deg, #2b5382, #03377d);
        color: #fff !important;
    }
    .dashboard-header small {
        opacity: 0.9;
    }
    .stat-card {
        border: 1px solid var(--border-blue);
        border-radius: 14px;
        transition: 0.25s ease-in-out;
    }
    .stat-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
    }
    .stat-icon {
        font-size: 22px;
        color: var(--primary-blue);
    }
    .info-box {
        border-radius: 14px;
        padding: 6px;
        border: 1px solid var(--border-blue);
        transition: 0.2s ease;
    }
    .info-title {
        font-size: 13px;
        font-weight: 600;
        margin-bottom: 6px;
        color: #6c757d;
    }
    .info-value {
        font-size: 18px;
        font-weight: 700;
        color: var(--primary-blue-dark);
    }
    .info-icon {
        font-size: 20px;
        margin-bottom: 6px;
        color: var(--primary-blue);
    }
</style>
@section('content')
<div class="row justify-content-center">
    <div class="col-lg-7">
        <div class="card dashboard-card">
            <div class="card-header dashboard-header py-3 px-4">
                <div class="d-flex justify-content-between align-items-center flex-wrap">
                    <div>
                        <div class="fw-bold fs-5">
                            {{ Auth::guard('staff')->user()->name }}
                        </div>
                    </div>
                    <div>
                        <span><small>Current Time :</small>&nbsp;<span class="fw-semibold" id="currentDateTime"></span></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>
            <div class="card-body pt-2">
                <div class="row g-3 mb-4">
                    <div class="col-md-3 col-6">
                        <div class="p-3 stat-card text-center">
                            <div class="stat-icon mb-2"><i class="ti tabler-list-check"></i></div>
                            <div class="text-muted small">New Tasks</div>
                            <h5 class="mb-0 fw-bold">{{ $newTasks }}</h5>
                        </div>
                    </div>
                    <div class="col-md-3 col-6">
                        <div class="p-3 stat-card text-center">
                            <div class="stat-icon mb-2"><i class="ti tabler-check"></i></div>
                            <div class="text-muted small">Completed</div>
                            <h5 class="mb-0 fw-bold">{{ $completedTasks }}</h5>
                        </div>
                    </div>
                    <div class="col-md-3 col-6">
                        <div class="p-3 stat-card text-center">
                            <div class="stat-icon mb-2"><i class="ti tabler-loader"></i></div>
                            <div class="text-muted small">Pending</div>
                            <h5 class="mb-0 fw-bold">{{ $pendingTasks }}</h5>
                        </div>
                      
                    </div>
                    <div class="col-md-3 col-6">
                        <div class="p-3 stat-card text-center">
                            <div class="stat-icon mb-2"><i class="ti tabler-pause"></i></div>
                            <div class="text-muted small">Hold</div>
                            <h5 class="mb-0 fw-bold">{{ $holdTasks }}</h5>
                        </div>
                    </div>
                </div>
                <!-- CHECK INFO -->
                <div class="row g-3 mb-4 text-center">
                    <div class="col-md-3">
                        <div class="info-box">
                            <!-- <div class="info-icon"><i class="ti tabler-login"></i></div> -->
                            <div class="info-title">
                                Check-In
                                @if($loginEntry && $loginEntry->type)
                                <span id="lateBadge"
                                    class="badge {{ $loginEntry->type == 'late'
                                ? 'bg-label-danger'
                                : 'bg-label-success' }}">
                                    {{ ucfirst($loginEntry->type) }}
                                </span>
                                @endif
                            </div>
                            <div class="info-value">
                                {{ $loginEntry?->check_in
                            ? \Carbon\Carbon::parse($loginEntry->check_in)->format('h:i A')
                            : '—' }}
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="info-box">
                            <!-- <div class="info-icon"><i class="ti tabler-clock-hour-4"></i></div> -->
                            <div class="info-title">Total&nbsp;Productive&nbsp;Hours</div>
                            <div class="info-value">
                                <span id="totalHours">{{ $totalProductiveHours }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="info-box">
                            <!-- <div class="info-icon"><i class="ti tabler-clock-hour-4"></i></div> -->
                            <div class="info-title">Total&nbsp;Break&nbsp;Hours</div>
                            <div class="info-value">
                                <span id="totalHours">{{ $totalBreakTime}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="info-box">
                            <!-- <div class="info-icon"><i class="ti tabler-logout"></i></div> -->
                            <div class="info-title">Check-Out</div>
                            <div class="info-value" id="checkoutTime">
                                {{ $loginEntry?->check_out
                    ? \Carbon\Carbon::parse($loginEntry->check_out)->format('h:i A')
                    : '—' }}
                            </div>
                        </div>
                    </div>
                </div>
                <!-- TABLE -->
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead>
                            <tr>
                                <th>Project</th>
                                <th>Task</th>

                                <th>EH</th>
                                <th>Start</th>
                                <th>End</th>
                                <th>Time</th>

                                <th>Extra Hours</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($completedTaskList as $row)
                            <tr>
                                <td>{{ $row['project'] }}</td>
                                <td>{{ $row['task'] }}</td>

                                <td>{{ $row['estimated_time'] ?? '-' }}</td>
                                <td>{{ $row['start_time'] }}</td>
                                <td>{{ $row['end_time'] }}</td>
                                <td class="task-hours">{{ $row['working_hours'] }}</td>

                                @php

                                $extraHours = 0;
                                if($row['start_time'] != '-' && $row['end_time'] != '-') {
                                $start = \Carbon\Carbon::parse($row['start_time']);

                                $end = \Carbon\Carbon::parse($row['end_time']);
                                $totalHours = $start->diffInMinutes($end) / 60;
                                $expectedHours = 8;
                                $extraHours = $totalHours > $expectedHours ? $totalHours - $expectedHours : 0;

                                }

                                @endphp
                                <td>{{ number_format($extraHours,2) }} hrs</td>
                                <td>
                                    @switch($row['status'])
                                    @case('new')
                                    <span class="badge bg-label-secondary w-100">Not Started</span>
                                    @break
                                    @case('inprogress')
                                    <span class="badge bg-label-warning w-100">In Progress</span>
                                    @break
                                    @case('complete')
                                    <span class="badge bg-label-success w-100">Completed</span>
                                    @break
                                    @case('hold')
                                    <span class="badge bg-label-danger w-100">Hold</span>
                                    @break
                                    @endswitch
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="6" class="text-center text-muted py-4">
                                    No completed tasks found
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                    <div class="card mt-4">
                        <div class="card-header">
                            <h6 class="mb-0">
                                <i class="ti tabler-coffee"></i> Break History
                            </h6>
                        </div>

                        <div class="card-body p-0">

                            <table class="table table-sm table-bordered mb-0 text-center">

                                <thead class="table-light">
                                    <tr>
                                        <th>#</th>
                                        <th>Break Start</th>
                                        <th>Break End</th>
                                        <th>Duration</th>
                                    </tr>
                                </thead>

                                <tbody>

                                    @forelse($breakHistory as $key => $break)

                                    @php
                                    $start = \Carbon\Carbon::parse($break->break_start_time);
                                    $end = $break->break_end_time ? \Carbon\Carbon::parse($break->break_end_time) : null;

                                    $duration = '-';

                                    if($end){
                                    $minutes = $start->diffInMinutes($end);
                                    $h = floor($minutes/60);
                                    $m = $minutes%60;
                                    $duration = "{$h}h {$m}m";
                                    }
                                    @endphp

                                    <tr>
                                        <td>{{ $key+1 }}</td>

                                        <td>{{ $start->format('h:i A') }}</td>

                                        <td>
                                            {{ $break->break_end_time ? $end->format('h:i A') : '-' }}
                                        </td>

                                        <td>{{ $duration }}</td>

                                    </tr>

                                    @empty

                                    <tr>
                                        <td colspan="4" class="text-muted">No break taken today</td>
                                    </tr>

                                    @endforelse

                                </tbody>

                            </table>

                        </div>
                    </div>
                </div>
                <!-- CHECKOUT BUTTON -->
@if($loginEntry?->check_out)
    <div class="text-center mt-4">
        <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>
    </div>
@else
    <form action="{{ route('final_logout_form') }}" method="post" id="login_form" class="text-center mt-4">
        @csrf
        <button type="submit" class="btn btn-primary" id="finalSubmit">
            <i class="ti tabler-logout me-1"></i> Check Out
        </button>
    </form>
@endif
            </div>
        </div>
    </div>
</div>
<script>
    // Live Date Time
    function updateDateTime() {
        const now = new Date();
        document.getElementById('currentDateTime').innerText =
            now.toLocaleDateString('en-GB') + ' | ' +
            now.toLocaleTimeString('en-US');
    }
    updateDateTime();
    setInterval(updateDateTime, 1000);
    // Checkout
    document.getElementById('finalSubmit').addEventListener('click', function(e) {
        e.preventDefault();
        let btn = this;
        btn.disabled = true;
        btn.innerHTML = '<i class="ti tabler-loader tabler-spin me-1"></i> Processing...';
        const now = new Date();
        document.getElementById('checkoutTime').innerText =
            now.toLocaleTimeString('en-US');
        document.getElementById('login_form').submit();
    });
    // Total Hours
    document.addEventListener("DOMContentLoaded", function() {
        let totalMinutes = 0;
        document.querySelectorAll('.task-hours').forEach(function(el) {
            let text = el.innerText.trim();
            let hoursMatch = text.match(/(\d+)h/);
            let minsMatch = text.match(/(\d+)m/);
            let hours = hoursMatch ? parseInt(hoursMatch[1]) : 0;
            let mins = minsMatch ? parseInt(minsMatch[1]) : 0;
            totalMinutes += (hours * 60) + mins;
        });
        // convert back to hours + minutes
        let finalHours = Math.floor(totalMinutes / 60);
        let finalMins = totalMinutes % 60;
        document.getElementById('totalHours').innerText =
            finalHours + "h " + finalMins + "m";
    });
</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.querySelector('.dashboard-card');

    if (!shareBtn || !attendanceCard) {
        console.error('Share button or dashboard card not found');
        return;
    }

    const tablerIcons = {

        '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-check': `
            <path d="M5 12l5 5l10-10"></path>
        `,

        'tabler-loader': `
            <path d="M12 6v6l4 2"></path>
            <circle cx="12" cy="12" r="9"></circle>
        `,

        'tabler-pause': `
            <rect x="6" y="5" width="4" height="14" rx="1"></rect>
            <rect x="14" y="5" width="4" height="14" rx="1"></rect>
        `,

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

        'tabler-login': `
            <path d="M15 8l4 4l-4 4"></path>
            <path d="M19 12H9"></path>
            <path d="M13 4H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h7"></path>
        `,

        'tabler-logout': `
            <path d="M14 8v-2a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2v-2"></path>
            <path d="M9 12h12"></path>
            <path d="M18 9l3 3l-3 3"></path>
        `,

        'tabler-coffee': `
            <path d="M4 11h12v5a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4v-5z"></path>
            <path d="M16 13h2a3 3 0 0 0 0-6h-2"></path>
            <path d="M6 2v3"></path>
            <path d="M10 2v3"></path>
            <path d="M14 2v3"></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(
                'Screenshot theme:',
                currentTheme
            );



            const canvas = await html2canvas(
                attendanceCard,
                {

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

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


                    onclone: function (clonedDocument) {

                        const clonedCard =
                            clonedDocument.querySelector(
                                '.dashboard-card'
                            );

                        if (!clonedCard) {
                            return;
                        }


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


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

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


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

                        safeStyle.innerHTML = `

                            .dashboard-card {
                                box-shadow: none !important;
                            }
                            .dashboard-header {
                                color: #ffffff !important;
                            }

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

                            #attendanceCard svg {
                                display: inline-block;
                                vertical-align: middle;
                            }

                        `;

                        clonedDocument.head.appendChild(
                            safeStyle
                        );



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


                        allElements.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'
                                );

                            }

                        });


                      //Convert Tabler font icons → SVG
                    
                        const iconElements =
                            clonedCard.querySelectorAll(
                                '.ti'
                            );


                        iconElements.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 (
                                !iconColor ||
                                containsUnsupportedColor(
                                    iconColor
                                )
                            ) {

                                iconColor = isDark
                                    ? '#6ea8fe'
                                    : '#2f80ed';

                            }

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


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

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

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

                            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;


                            const computedWidth =
                                computed.getPropertyValue(
                                    'font-size'
                                );


                            svg.style.width =
                                computedWidth ||
                                '20px';

                            svg.style.height =
                                computedWidth ||
                                '20px';

                            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);

                        });



                        const cardComputed =
                            clonedDocument.defaultView
                                .getComputedStyle(
                                    clonedCard
                                );


                        if (
                            containsUnsupportedColor(
                                cardComputed.backgroundColor
                            )
                        ) {

                            clonedCard.style.setProperty(
                                'background-color',
                                isDark
                                    ? '#2b2b40'
                                    : '#ffffff',
                                '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-checkout.png',
                {
                    type: 'image/png'
                }
            );


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

                await navigator.share({

                    files: [file],

                    title: 'Checkout',

                 text: `{{ auth()->guard('staff')->user()->name ?? 'Employee' }} - Checkout - {{ $loginEntry?->check_out ? \Carbon\Carbon::parse($loginEntry->check_out)->format('h:i:s A') : 'Not checked out yet' }}`

                });

            } 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