@extends('layouts.app')

@section('title', 'Employee ID Card')

@push('css')
<style>
    .id-card-container {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 400px;
        perspective: 1000px;
        padding: 40px 0;
    }
    .id-card-frame {
        width: 320px;
        height: 500px;
        background: white;
        border-radius: 20px;
        box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        position: relative;
        overflow: hidden;
        border: 1px solid #e2e8f0;
        transition: transform 0.3s ease;
    }
    .id-card-frame:hover {
        transform: translateY(-5px) rotateY(5deg);
    }
    .card-header {
        background: linear-gradient(135deg, #2563eb, #1e40af);
        height: 140px;
        padding: 20px;
        text-align: center;
        color: white;
        position: relative;
    }
    .card-logo {
        max-height: 50px;
        margin-bottom: 10px;
    }
    .card-company-name {
        font-size: 14px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 2px;
        margin: 0;
    }
    .card-photo-wrapper {
        position: absolute;
        top: 80px;
        left: 50%;
        transform: translateX(-50%);
        width: 120px;
        height: 120px;
        border-radius: 60px;
        border: 6px solid white;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        overflow: hidden;
        background: #f1f5f9;
        z-index: 2;
    }
    .card-photo {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .card-body {
        margin-top: 70px;
        padding: 20px 30px;
        text-align: center;
    }
    .card-name {
        font-size: 22px;
        font-weight: 800;
        color: #1e293b;
        margin-bottom: 5px;
    }
    .card-designation {
        font-size: 14px;
        color: #64748b;
        margin-bottom: 25px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    .card-info-row {
        display: flex;
        justify-content: space-between;
        margin-bottom: 15px;
        text-align: left;
    }
    .card-info-item label {
        display: block;
        font-size: 10px;
        color: #94a3b8;
        text-transform: uppercase;
        font-weight: 700;
        margin-bottom: 2px;
    }
    .card-info-item span {
        display: block;
        font-size: 13px;
        color: #1e293b;
        font-weight: 600;
    }
    .card-qr-section {
        position: absolute;
        bottom: 30px;
        left: 0;
        right: 0;
        text-align: center;
    }
    .card-qr {
        width: 80px;
        height: 80px;
        margin: 0 auto 8px;
        padding: 5px;
        border: 1px solid #f1f5f9;
        border-radius: 8px;
    }
    .card-footer-strip {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 10px;
        background: linear-gradient(135deg, #2563eb, #1e40af);
    }
</style>
@endpush

@section('panel-actions')
    <a href="{{ route('employees.id-card.download', $employee->id) }}" class="btn btn-primary">
        <i class="fas fa-download me-2"></i> Download ID Card (PDF)
    </a>
@endsection

@section('content')
<div class="container-fluid">
    <div class="row align-items-center">
        <div class="col-lg-6">
            <div class="id-card-container">
                <div class="id-card-frame">
                    <div class="card-header border-0">
                        @if($settings->company_logo)
                            <img src="{{ asset('storage/' . $settings->company_logo) }}" class="card-logo">
                        @endif
                        <p class="card-company-name">{{ $settings->company_name ?? 'HRMS PRO' }}</p>
                    </div>

                    <div class="card-photo-wrapper">
                        <img src="{{ $employee->photo_url }}" class="card-photo">
                    </div>

                    <div class="card-body">
                        <div class="card-name">{{ $employee->name }}</div>
                        <div class="card-designation">{{ $employee->designation }}</div>

                        <div class="card-info-row">
                            <div class="card-info-item">
                                <label>Employee ID</label>
                                <span>#{{ str_pad($employee->id, 5, '0', STR_PAD_LEFT) }}</span>
                            </div>
                            <div class="card-info-item text-end">
                                <label>Joining Date</label>
                                <span>{{ \Carbon\Carbon::parse($employee->created_at)->format('d M Y') }}</span>
                            </div>
                        </div>
                        <div class="card-info-row">
                            <div class="card-info-item">
                                <label>Email Address</label>
                                <span>{{ $employee->email }}</span>
                            </div>
                        </div>
                    </div>

                    <div class="card-qr-section">
                        <img src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data={{ urlencode(url('employees/' . $employee->id)) }}" class="card-qr">
                        <div style="font-size: 10px; color: #94a3b8; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;">Scan to Verify</div>
                    </div>

                    <div class="card-footer-strip"></div>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="card p-4">
                <h4 class="fw-bold text-primary mb-3">ID Card Information</h4>
                <p class="text-muted">This is an automated virtual ID card for <strong>{{ $employee->name }}</strong>. It can be used for internal identification and office access.</p>
                
                <div class="alert alert-info border-0 shadow-sm mb-4">
                    <div class="d-flex">
                        <i class="fas fa-lightbulb mt-1 me-3"></i>
                        <div>
                            <strong>Printing Tip:</strong> For best results, print on high-quality PVC cards or glossy cardstock paper at 100% scale.
                        </div>
                    </div>
                </div>

                <div class="d-grid gap-2">
                    <button onclick="window.print()" class="btn btn-secondary py-2">
                        <i class="fas fa-print me-2"></i> Print Standard Badge
                    </button>
                    <a href="{{ route('employees.id-card.download', $employee->id) }}" class="btn btn-primary py-2 text-decoration-none text-center">
                        <i class="fas fa-file-pdf me-2"></i> Save as PDF Document
                    </a>
                </div>

                <hr class="my-4">
                
                <h6 class="fw-bold mb-2">Technical Details</h6>
                <ul class="text-muted small">
                    <li>Card Type: Standard Professional ID (CR-80)</li>
                    <li>QR Code: Dynamic (Points to Employee Profile)</li>
                    <li>Security: Verified by HRMS Secure Protocol</li>
                </ul>
            </div>
        </div>
    </div>
</div>
@endsection