@extends('layouts.app')
@section('page-title', 'Dashboard')

@push('styles')
<style>
    .stats-grid {
        display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 16px; margin-bottom: 24px;
    }
    .stat-card {
        background: white; border-radius: 10px; padding: 20px;
        border: 1px solid #e2e8f0; display: flex; align-items: center; gap: 16px;
    }
    .stat-icon {
        width: 50px; height: 50px; border-radius: 12px;
        display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
    }
    .stat-icon.blue   { background: #e0f5fb; color: #0097c4; }
    .stat-icon.green  { background: #dcfce7; color: #16a34a; }
    .stat-icon.red    { background: #fee2e2; color: #dc2626; }
    .stat-icon.yellow { background: #fef9c3; color: #ca8a04; }
    .stat-value { font-size: 1.8rem; font-weight: 700; line-height: 1; }
    .stat-label { font-size: 0.8rem; color: #64748b; margin-top: 4px; }

    .filter-bar {
        background: white; border-radius: 10px; padding: 16px 20px;
        border: 1px solid #e2e8f0; margin-bottom: 20px;
        display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap;
    }
    .filter-bar .form-group { margin-bottom: 0; flex: 1; min-width: 150px; }
    .filter-bar label { font-size: 0.8rem; font-weight: 500; color: #374151; display: block; margin-bottom: 5px; }
    .filter-bar select, .filter-bar input[type=date] {
        width: 100%; padding: 8px 10px; border: 1px solid #e2e8f0;
        border-radius: 6px; font-size: 0.875rem; font-family: inherit;
    }

    .emp-grid {
        display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px;
    }
    .emp-card {
        background: white; border-radius: 10px; border: 1px solid #e2e8f0;
        padding: 18px; display: flex; align-items: center; gap: 14px;
        text-decoration: none; color: inherit; transition: all 0.2s;
    }
    .emp-card:hover { border-color: #0097c4; box-shadow: 0 4px 20px rgba(0,151,196,0.1); transform: translateY(-2px); }
    .emp-avatar {
        width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
        background: #e0f5fb; display: flex; align-items: center; justify-content: center;
        font-weight: 700; font-size: 1.2rem; color: #0097c4; flex-shrink: 0;
        border: 2px solid #e0f5fb;
    }
    .emp-avatar img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
    .emp-name  { font-weight: 600; font-size: 0.95rem; }
    .emp-meta  { font-size: 0.8rem; color: #64748b; margin-top: 3px; }
    .emp-badge { margin-top: 6px; }
    .header-bar {
        background: #0097c4; color: white; padding: 12px 20px;
        border-radius: 10px; margin-bottom: 20px; text-align: center;
        font-size: 1.3rem; font-weight: 700; letter-spacing: 0.5px;
    }
    .top-summary {
        display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 12px; background: white; border: 1px solid #e2e8f0;
        border-radius: 10px; padding: 14px; margin-bottom: 20px;
    }
    .summary-cell { text-align: center; }
    .summary-cell .label { font-size: 0.75rem; font-weight: 600; color: #64748b; border-bottom: 1px solid #e2e8f0; padding-bottom: 4px; margin-bottom: 4px; }
    .summary-cell .value { font-size: 0.95rem; font-weight: 600; color: #1e293b; }
</style>
@endpush

@section('content')
<div class="header-bar">Royal Group</div>

<div class="top-summary">
    <div class="summary-cell">
        <div class="label">Date</div>
        <div class="value">{{ \Carbon\Carbon::parse($date)->format('d-M-y') }}</div>
    </div>
    <div class="summary-cell">
        <div class="label">Legal Entity</div>
        <div class="value">Royal Gold Pvt. Ltd.</div>
    </div>
    <div class="summary-cell">
        <div class="label">Department</div>
        <div class="value">{{ $departments->where('id', $departmentId)->first()?->name ?? 'All' }}</div>
    </div>
    <div class="summary-cell">
        <div class="label">Total Employee</div>
        <div class="value">{{ $totalEmployees }}</div>
    </div>
    <div class="summary-cell">
        <div class="label">Present</div>
        <div class="value" style="color:#16a34a">{{ $presentCount }}</div>
    </div>
    <div class="summary-cell">
        <div class="label">Leave</div>
        <div class="value" style="color:#dc2626">{{ $leaveCount }}</div>
    </div>
</div>

<form method="GET" action="{{ route('dashboard.index') }}">
    <div class="filter-bar">
        <div class="form-group">
            <label>Date</label>
            <input type="date" name="date" value="{{ $date }}">
        </div>
        <div class="form-group">
            <label>Department</label>
            <select name="department_id">
                <option value="">All Departments</option>
                @foreach($departments as $dept)
                    <option value="{{ $dept->id }}" {{ $departmentId == $dept->id ? 'selected' : '' }}>{{ $dept->name }}</option>
                @endforeach
            </select>
        </div>
        <button type="submit" class="btn btn-primary" style="flex-shrink:0;">
            <i class="fas fa-filter"></i> Filter
        </button>
        <a href="{{ route('employees.create') }}" class="btn btn-outline" style="flex-shrink:0;">
            <i class="fas fa-plus"></i> Add Employee
        </a>
    </div>
</form>

<div class="emp-grid">
    @forelse(\App\Models\Employee::with(['department','section','location'])->when($departmentId, fn($q) => $q->where('department_id', $departmentId))->orderBy('name')->get() as $emp)
        <a href="{{ route('dashboard.employee-card', ['employee' => $emp->id, 'date' => $date]) }}" class="emp-card">
            <div class="emp-avatar">
                @if($emp->photo)
                    <img src="{{ asset('storage/' . $emp->photo) }}" alt="{{ $emp->name }}">
                @else
                    {{ strtoupper(substr($emp->name, 0, 1)) }}
                @endif
            </div>
            <div>
                <div class="emp-name">{{ $emp->name }}</div>
                <div class="emp-meta">{{ $emp->designation }} | ID: {{ $emp->rg_id }}</div>
                <div class="emp-meta">{{ $emp->department?->name }} • {{ $emp->section?->name }}</div>
                <div class="emp-badge">
                    <span class="badge {{ $emp->status === 'Active' ? 'badge-success' : 'badge-danger' }}">
                        {{ $emp->status }}
                    </span>
                </div>
            </div>
        </a>
    @empty
        <div style="grid-column:1/-1; text-align:center; padding: 40px; color: #94a3b8;">
            <i class="fas fa-users" style="font-size:2rem; display:block; margin-bottom:8px;"></i>
            No employees found.
        </div>
    @endforelse
</div>
@endsection