@extends('layouts.app')
@section('page-title', 'Employee Dashboard - ' . $employee->name)

@push('styles')
<style>
    /* Header Bar */
    .rg-header {
        background: #0097c4; color: white; text-align: center;
        padding: 10px; font-size: 1.2rem; font-weight: 700;
        border-radius: 8px; margin-bottom: 12px;
    }
    /* Summary Row */
    .summary-row {
        display: grid; grid-template-columns: auto 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        gap: 8px; margin-bottom: 12px;
    }
    .summary-cell {
        background: white; border: 1px solid #d1d5db; border-radius: 6px;
        text-align: center; min-width: 80px;
    }
    .summary-cell .s-label {
        background: #f1f5f9; font-size: 0.7rem; font-weight: 600;
        padding: 5px 8px; border-bottom: 1px solid #d1d5db; color: #374151;
    }
    .summary-cell .s-value {
        padding: 6px 8px; font-size: 0.875rem; font-weight: 500;
    }

    /* Main Grid */
    .main-grid {
        display: grid; grid-template-columns: 90px 1fr 1fr 1fr 1fr 1fr;
        gap: 10px; margin-bottom: 12px;
    }
    .photo-cell {
        background: white; border: 1px solid #d1d5db; border-radius: 6px;
        overflow: hidden; display: flex; align-items: center; justify-content: center;
        min-height: 160px;
    }
    .photo-cell img {
        width: 88px; height: 120px; object-fit: cover;
    }
    .photo-placeholder {
        width: 88px; height: 120px; background: #e0f5fb;
        display: flex; align-items: center; justify-content: center;
        font-size: 2rem; color: #0097c4; font-weight: 700;
    }

    /* Info Block */
    .info-block {
        background: white; border: 1px solid #d1d5db; border-radius: 6px; overflow: hidden;
    }
    .info-block .block-title {
        background: #0097c4; color: white; font-size: 0.75rem; font-weight: 600;
        padding: 6px 10px; text-align: center;
    }
    .info-row {
        display: flex; border-bottom: 1px solid #f1f5f9; font-size: 0.8rem;
    }
    .info-row:last-child { border-bottom: none; }
    .info-key {
        font-weight: 600; padding: 6px 8px; min-width: 100px;
        border-right: 1px solid #f1f5f9; color: #374151; white-space: nowrap;
    }
    .info-val { padding: 6px 8px; color: #1e293b; flex: 1; }

    /* Attendance Block */
    .att-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
    .att-table th { background: #f1f5f9; padding: 5px 8px; text-align: center;
        border: 1px solid #e2e8f0; font-weight: 600; font-size: 0.72rem; }
    .att-table td { padding: 5px 8px; text-align: center; border: 1px solid #e2e8f0; }
    .att-late { color: #ef4444; font-weight: 700; }
    .att-p    { color: #16a34a; font-weight: 600; }
    .att-a    { color: #dc2626; }

    /* Leave Table */
    .leave-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
    .leave-table th { background: #f1f5f9; padding: 5px 6px;
        border: 1px solid #e2e8f0; font-weight: 600; font-size: 0.72rem; }
    .leave-table td { padding: 5px 6px; border: 1px solid #e2e8f0; text-align: center; font-size: 0.78rem; }
    .leave-table td:first-child { text-align: left; }

    /* Performance */
    .perf-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
    .perf-table th { background: #f1f5f9; padding: 5px 8px; border: 1px solid #e2e8f0; font-weight: 600; font-size: 0.72rem; }
    .perf-table td { padding: 5px 8px; border: 1px solid #e2e8f0; text-align: center; }

    /* Fixed Asset & Award */
    .asset-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
    .asset-table th { background: #f1f5f9; padding: 5px 6px; border: 1px solid #e2e8f0; font-weight: 600; font-size: 0.72rem; }
    .asset-table td { padding: 5px 6px; border: 1px solid #e2e8f0; }

    /* Task Summary Row */
    .task-row {
        display: grid; grid-template-columns: 1fr 180px;
        gap: 10px; margin-bottom: 12px;
    }
    .task-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
    .task-table th { background: #f1f5f9; padding: 5px 8px; border: 1px solid #e2e8f0; font-weight: 600; font-size: 0.72rem; text-align: left; }
    .task-table td { padding: 5px 8px; border: 1px solid #e2e8f0; }

    /* Notice Board */
    .notice-item { padding: 8px 10px; border-bottom: 1px solid #f1f5f9; font-size: 0.8rem; }
    .notice-item:last-child { border-bottom: none; }
    .notice-title { font-weight: 600; color: #1e293b; }
    .notice-date  { font-size: 0.72rem; color: #94a3b8; }

    /* Priority badges */
    .p-low      { color: #16a34a; }
    .p-medium   { color: #ca8a04; }
    .p-high     { color: #dc2626; }
    .p-critical { color: #7c3aed; font-weight: 700; }

    .back-btn { margin-bottom: 12px; display: inline-flex; align-items: center; gap: 6px;
        color: #0097c4; font-size: 0.875rem; text-decoration: none; font-weight: 500; }
    .back-btn:hover { text-decoration: underline; }

    @media print {
        .sidebar, .topbar, .back-btn, .print-btn { display: none !important; }
        .main { margin-left: 0 !important; }
        .page-content { padding: 10px !important; }
    }
</style>
@endpush

@section('content')
<a href="{{ route('dashboard.index', ['date' => $date]) }}" class="back-btn">
    <i class="fas fa-arrow-left"></i> Back to Dashboard
</a>
<button onclick="window.print()" class="btn btn-outline btn-sm print-btn" style="float:right; margin-bottom:8px;">
    <i class="fas fa-print"></i> Print
</button>

<!-- Header -->
<div class="rg-header">Royal Group</div>

<!-- Summary Row -->
<div class="summary-row">
    <div></div>{{-- spacer --}}
    <div class="summary-cell">
        <div class="s-label">Date</div>
        <div class="s-value">{{ \Carbon\Carbon::parse($date)->format('d-M-y') }}</div>
    </div>
    <div class="summary-cell">
        <div class="s-label">Legal Entity</div>
        <div class="s-value">{{ $employee->legalEntity?->name ?? '—' }}</div>
    </div>
    <div class="summary-cell">
        <div class="s-label">Department</div>
        <div class="s-value">{{ $employee->department?->name ?? '—' }}</div>
    </div>
    <div class="summary-cell">
        <div class="s-label">Section</div>
        <div class="s-value">{{ $employee->section?->name ?? '—' }}</div>
    </div>
    <div class="summary-cell">
        <div class="s-label">Location</div>
        <div class="s-value">{{ $employee->location?->name ?? '—' }}</div>
    </div>
    <div class="summary-cell">
        <div class="s-label">Status</div>
        <div class="s-value" style="color:{{ $employee->status === 'Active' ? '#16a34a' : '#dc2626' }}">{{ $employee->status }}</div>
    </div>
</div>

<!-- Main Info Grid -->
<div class="main-grid">
    <!-- Photo -->
    <div class="photo-cell">
        @if($employee->photo)
            <img src="{{ asset('storage/' . $employee->photo) }}" alt="{{ $employee->name }}">
        @else
            <div class="photo-placeholder">{{ strtoupper(substr($employee->name, 0, 1)) }}</div>
        @endif
    </div>

    <!-- Employee Info -->
    <div class="info-block">
        <div class="block-title">Employee Information</div>
        @foreach([
            'Name'          => $employee->name,
            'RG-ID'         => $employee->rg_id,
            'DOB'           => $employee->dob->format('d-m-Y'),
            'Joining Date'  => $employee->joining_date->format('d/m/Y'),
            'Duration (Days)' => $employee->duration,
            'Status'        => $employee->status,
            'Blood Group'   => $employee->blood_group ?? '—',
            'Contact No'    => $employee->contact_no ?? '—',
            'Designation'   => $employee->designation ?? '—',
        ] as $key => $val)
        <div class="info-row">
            <div class="info-key">{{ $key }}</div>
            <div class="info-val">{{ $val }}</div>
        </div>
        @endforeach
    </div>

    <!-- Attendance -->
    <div class="info-block">
        <div class="block-title">Attendance</div>
        <table class="att-table">
            <thead><tr><th>Date</th><th>Status</th></tr></thead>
            <tbody>
                @forelse($employee->attendances as $att)
                <tr>
                    <td>{{ $att->date->format('d-M-y') }}</td>
                    <td class="{{ $att->status === 'Late' ? 'att-late' : ($att->status === 'P' ? 'att-p' : ($att->status === 'A' ? 'att-a' : '')) }}">
                        {{ $att->status }}
                    </td>
                </tr>
                @empty
                    <tr><td colspan="2" class="text-muted" style="padding:10px">No records</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <!-- Leave Status -->
    <div class="info-block">
        <div class="block-title">Leave Status</div>
        <table class="leave-table">
            <thead><tr><th>Category</th><th>Taken</th><th>Remain</th></tr></thead>
            <tbody>
                @forelse($employee->leaves as $leave)
                <tr>
                    <td>{{ $leave->leaveType?->name }}</td>
                    <td>{{ $leave->taken ?: '' }}</td>
                    <td>{{ $leave->remain ?: '' }}</td>
                </tr>
                @empty
                    <tr><td colspan="3" class="text-muted">—</td></tr>
                @endforelse
                <tr style="font-weight:700; background:#f8fafc;">
                    <td>Total</td>
                    <td>{{ $employee->leaves->sum('taken') }}</td>
                    <td>{{ $employee->leaves->sum('remain') }}</td>
                </tr>
            </tbody>
        </table>
    </div>

    <!-- Performance Score -->
    <div class="info-block">
        <div class="block-title">Performance Score</div>
        <table class="perf-table">
            <thead><tr><th>Year</th><th>Point</th></tr></thead>
            <tbody>
                @forelse($employee->performanceScores as $ps)
                <tr><td>{{ $ps->year }}</td><td>{{ number_format($ps->point, 2) }}</td></tr>
                @empty
                    <tr><td colspan="2" class="text-muted">—</td></tr>
                @endforelse
            </tbody>
        </table>

        <div class="block-title" style="margin-top:6px;">Award/Achievement</div>
        @forelse($employee->awards as $award)
            <div style="padding:5px 8px; font-size:0.78rem; border-bottom:1px solid #f1f5f9;">
                <strong>{{ $award->title }}</strong><br>
                <span style="color:#64748b;">{{ $award->awarded_date->format('d M Y') }}</span>
            </div>
        @empty
            <div style="padding:8px; font-size:0.78rem; color:#94a3b8;">No awards yet</div>
        @endforelse
    </div>

    <!-- Fixed Asset -->
    <div class="info-block">
        <div class="block-title">Fixed Asset</div>
        <table class="asset-table">
            <thead><tr><th>SL</th><th>Name</th></tr></thead>
            <tbody>
                @forelse($employee->fixedAssets as $i => $asset)
                <tr><td>{{ $i + 1 }}</td><td>{{ $asset->name }}</td></tr>
                @empty
                <tr><td>—</td><td>—</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

<!-- Task Summary + Notice Board -->
<div class="task-row">
    <div class="info-block">
        <div class="block-title">Task Summary</div>
        <table class="task-table">
            <thead>
                <tr>
                    <th>SL</th><th>Task Code</th><th>Description</th><th>Priority</th>
                    <th>Assigned To</th><th>Start Date</th><th>Due Date</th>
                    <th>Status</th><th>Comments/Notes</th>
                </tr>
            </thead>
            <tbody>
                @forelse($tasks as $i => $task)
                <tr>
                    <td>{{ $task->id }}</td>
                    <td>{{ $task->task_code }}</td>
                    <td>{{ $task->description }}</td>
                    <td class="p-{{ strtolower($task->priority) }}">{{ $task->priority }}</td>
                    <td>{{ $task->assignedEmployee?->name ?? '—' }}</td>
                    <td>{{ $task->start_date?->format('d-M-y') ?? '—' }}</td>
                    <td>{{ $task->due_date?->format('d-M-y') ?? '—' }}</td>
                    <td>
                        <span class="badge {{ match($task->status) {
                            'Completed' => 'badge-success',
                            'In Progress' => 'badge-info',
                            'Cancelled' => 'badge-danger',
                            default => 'badge-secondary'
                        } }}">{{ $task->status }}</span>
                    </td>
                    <td>{{ $task->comments }}</td>
                </tr>
                @empty
                <tr><td colspan="9" class="text-muted text-center" style="padding:12px;">No tasks</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <div class="info-block">
        <div class="block-title">Notice Board</div>
        @forelse($notices as $notice)
            <div class="notice-item">
                <div class="notice-title">{{ $notice->title }}</div>
                <div style="font-size:0.78rem; color:#374151; margin-top:3px;">{{ \Str::limit($notice->content, 80) }}</div>
                <div class="notice-date">{{ $notice->published_date->format('d M Y') }}</div>
            </div>
        @empty
            <div style="padding:12px; font-size:0.8rem; color:#94a3b8;">No notices</div>
        @endforelse
    </div>
</div>

<!-- Footer bar -->
<div style="background:#0097c4; height:8px; border-radius:4px;"></div>
@endsection