@extends('admin.layouts.master')

@section('title', 'Manage Teams')

@section('content')

    <style>
        .table {
            width: 100%;
            border-collapse: collapse;
            font-size: 14px;
            color: #333;
            font-family: Arial, Helvetica, sans-serif;
        }

        .table th,
        .table td {
            padding: 10px 12px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

        .table th {
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            font-size: 13px;
        }

        .table tbody tr:hover {
            background-color: #f9f9f9;
        }

        .btn-success {
            background-color: #28a745;
            border: none;
            color: white;
            border-radius: 4px;
            padding: 5px 10px;
            font-size: 13px;
        }

        .btn-danger {
            background-color: #dc3545;
            border: none;
            color: white;
            border-radius: 4px;
            padding: 5px 10px;
            font-size: 13px;
        }

        .btn-info {
            background-color: #17a2b8;
            border: none;
            color: white;
            border-radius: 4px;
            padding: 5px 10px;
            font-size: 13px;
        }

        .btn i {
            font-size: 14px;
        }

        .rounded-circle {
            object-fit: cover;
        }

        @media (max-width: 768px) {

            .table th,
            .table td {
                padding: 6px 8px;
                font-size: 12px;
            }
        }
    </style>

    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="text-left">
                        Employee/Team
                        <a class="btn btn-info text-white  " href="{{ route('employees.create') }}"
                            style="float: right; margin-left:5px;">
                            <span class="fa fa-plus"></span> Add Employee
                        </a>

                    </h3>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>SL</th>
                                    <th>Status</th>
                                    <th>Picture</th>
                                    <th>QR Code</th>
                                    <th>Name</th>
                                    <th>Emp Id</th>
                                    <th>Designation</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($employees as $key => $info)
                                    <tr>
                                        <td>{{ $loop->iteration }}</td>
                                        <td>
                                            <button type="button" data-id="{{ $info->id }}"
                                                class="newsStatus postClass{{ $info->id }} btn btn-{{ $info->status == 1 ? 'success' : 'danger' }}">
                                                @if ($info->status == 1)
                                                    <i class="fa fa-check-circle"></i>
                                                @else
                                                    <i class="fa fa-times-circle"></i>
                                                @endif
                                            </button>
                                        </td>
                                        <td>
                                            <img class="rounded-circle" height="50px" width="50px"
                                                src="{{ asset($info->image) }}" alt="{{ $info->name }}">
                                        </td>
                                        <td>
                                            <div class="id-card"
                                                style="width:97px; border:2px solid #007bff; border-radius:12px; padding:0px 0px 8px 6px; text-align:center; background:#fff; display:inline-block; box-shadow:0 4px 8px rgba(0,0,0,0.1); cursor:pointer;"
                                                data-id="{{ $info->id }}" data-name="{{ $info->name }}">
                                                <!-- QR Code Container -->
                                                <div class="employee-qr" style="margin-top:10px;"></div>
                                            </div>

                                        </td>

                                        <td>{{ $info->name }}</td>
                                        <td>{{ $info->employee_id }}</td>
                                        <td>{{ $info->designation }}</td>
                                        <td>
                                            <div class="btn-group">
                                                <button type="button" class="btn btn-sm btn-primary dropdown-toggle"
                                                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                    Actions
                                                </button>
                                                <div class="dropdown-menu">
                                                    <!-- Edit -->
                                                    <a class="dropdown-item"
                                                        href="{{ route('employees.edit', $info->id) }}">
                                                        <i class="fa fa-edit"></i> Edit
                                                    </a>
                                                    <!-- Delete -->
                                                    <form action="{{ route('employees.destroy', $info->id) }}"
                                                        method="POST" onsubmit="return confirm('Are you sure?');">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button class="dropdown-item" type="submit">
                                                            <i class="fa fa-trash"></i> Delete
                                                        </button>
                                                    </form>
                                                    <!-- View -->
                                                    <a class="dropdown-item" href="#" data-toggle="modal"
                                                        data-target="#employeeModal{{ $info->id }}">
                                                        <i class="fa fa-eye"></i> View
                                                    </a>

                                                </div>
                                            </div>
                                        </td>
                                    </tr>

                                    <!-- Modal -->
                                    <div class="modal fade" id="employeeModal{{ $info->id }}" tabindex="-1"
                                        role="dialog" aria-labelledby="employeeModalLabel{{ $info->id }}"
                                        aria-hidden="true">
                                        <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
                                            <div class="modal-content shadow-lg border-0 rounded">
                                                <div class="modal-header bg-primary text-white">
                                                    <h5 class="modal-title" id="employeeModalLabel{{ $info->id }}">
                                                        <i class="fa fa-user-circle mr-2"></i> {{ $info->name }} -
                                                        Details
                                                    </h5>
                                                    <button type="button" class="close text-white" data-dismiss="modal"
                                                        aria-label="Close">
                                                        <span aria-hidden="true">&times;</span>
                                                    </button>
                                                </div>
                                                <div class="modal-body">
                                                    <div class="row">
                                                        <div class="col-md-4 text-center mb-3">
                                                            <img src="{{ asset($info->image) }}"
                                                                class="img-fluid rounded-circle border"
                                                                alt="{{ $info->name }}"
                                                                style="width:150px; height:150px; object-fit:cover;">
                                                        </div>
                                                        <div class="col-md-8">
                                                            <h5 class="mb-2"><strong>Designation:</strong>
                                                                {{ $info->designation }}</h5>
                                                            <h6 class="mb-2"><strong>Department:</strong>
                                                                {{ isset($info->department) ? $info->department->name : 'N/A' }}
                                                            </h6>
                                                            <p class="mb-1"><strong>Position:</strong>
                                                                {{ $info->position }}</p>
                                                            <p class="mb-1"><strong>Email:</strong> <a
                                                                    href="mailto:{{ $info->email }}">{{ $info->email }}</a>
                                                            </p>
                                                            <p class="mb-1"><strong>Phone:</strong> <a
                                                                    href="tel:{{ $info->phone }}">{{ $info->phone }}</a>
                                                            </p>
                                                            <p class="mb-1"><strong>Social Links:</strong>
                                                                @if ($info->socialLink)
                                                                    <a href="{{ $info->socialLink->facebook }}"
                                                                        target="_blank" class="text-primary">Facebook</a> |
                                                                    <a href="{{ $info->socialLink->twitter }}"
                                                                        target="_blank" class="text-info">Twitter</a> |
                                                                    <a href="{{ $info->socialLink->instagram }}"
                                                                        target="_blank" class="text-danger">Instagram</a> |
                                                                    <a href="{{ $info->socialLink->linkedIn }}"
                                                                        target="_blank" class="text-secondary">LinkedIn</a>
                                                                @else
                                                                    N/A
                                                                @endif
                                                            </p>
                                                            <p class="mb-0"><strong>Address:</strong>
                                                                {{ $info->address ?? 'N/A' }}</p>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button"
                                                        class="btn btn-secondary btn-sm rounded-pill px-4"
                                                        data-dismiss="modal">
                                                        <i class="fa fa-times-circle mr-1"></i> Close
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>


                                @empty
                                    <tr>
                                        <td colspan="7">
                                            <p class="text-center text-muted py-3">No Team Member Found</p>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection
@section('script')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const QR_SIZE = 80; // small QR code

            document.querySelectorAll('.id-card').forEach(function(card) {
                const el = card.querySelector('.employee-qr');
                const employeeId = card.getAttribute('data-id');
                const employeeName = card.getAttribute('data-name');
                const url = "{{ url('employee/profile') }}/" + employeeId;

                // Generate QR code
                new QRCode(el, {
                    text: url,
                    width: QR_SIZE,
                    height: QR_SIZE,
                    colorDark: "#000000",
                    colorLight: "#ffffff",
                    correctLevel: QRCode.CorrectLevel.H
                });

                // Click to download HD QR with padding
                card.addEventListener("click", function() {
                    const canvas = el.querySelector("canvas");
                    if (canvas) {
                        const scale = 4; // HD scale
                        const padding = 20; // padding in px

                        // Create new HD canvas
                        const hdCanvas = document.createElement("canvas");
                        hdCanvas.width = canvas.width * scale + padding * 2;
                        hdCanvas.height = canvas.height * scale + padding * 2;
                        const ctx = hdCanvas.getContext("2d");
                        ctx.fillStyle = "#fff"; // background color
                        ctx.fillRect(0, 0, hdCanvas.width, hdCanvas.height);
                        ctx.imageSmoothingEnabled = true;
                        ctx.imageSmoothingQuality = "high";

                        // Draw QR in center with padding
                        ctx.drawImage(canvas, padding, padding, canvas.width * scale, canvas
                            .height * scale);

                        // Add name text below QR
                        ctx.fillStyle = "#000";
                        ctx.font = "20px Arial";
                        ctx.textAlign = "center";
                        ctx.fillText(employeeName, hdCanvas.width / 2, hdCanvas.height - 10);

                        // Download as PNG
                        const imgUrl = hdCanvas.toDataURL("image/png");
                        const a = document.createElement("a");
                        a.href = imgUrl;
                        a.download = "employee-" + employeeId + "-qr.png";
                        document.body.appendChild(a);
                        a.click();
                        document.body.removeChild(a);
                    }
                });
            });
        });
    </script>



@endsection