@extends('layouts.app')

@section('title', 'Connect - Employee Directory Report')

@section('content')
<div class="page-header d-print-none mb-4">
    <div class="row align-items-center">
        <div class="col">
            <h2 class="page-title text-white">Employee Directory Report</h2>
            <div class="text-muted small">Generate filterable summaries of organization personnel.</div>
        </div>
        <div class="col-auto ms-auto">
            <div class="btn-list">
                <a href="{{ request()->fullUrlWithQuery(['export' => 'pdf']) }}" class="btn btn-outline-danger">
                    <i class="ti ti-file-text me-1"></i> Export PDF
                </a>
                <button onclick="window.print()" class="btn btn-outline-secondary">
                    <i class="ti ti-printer me-1"></i> Print Report
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Filters Card -->
<div class="card shadow-sm mb-4 d-print-none">
    <div class="card-body">
        <form action="{{ route('reports.employees') }}" method="GET" class="row g-3">
            <div class="col-md-3">
                <label class="form-label text-white-50">Department</label>
                <select name="department_id" class="form-select">
                    <option value="">All Departments</option>
                    @foreach($departments as $dept)
                        <option value="{{ $dept->id }}" {{ request('department_id') == $dept->id ? 'selected' : '' }}>{{ $dept->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label text-white-50">Designation</label>
                <select name="designation_id" class="form-select">
                    <option value="">All Designations</option>
                    @foreach($designations as $desg)
                        <option value="{{ $desg->id }}" {{ request('designation_id') == $desg->id ? 'selected' : '' }}>{{ $desg->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label text-white-50">Status</label>
                <select name="status" class="form-select">
                    <option value="">All Statuses</option>
                    <option value="active" {{ request('status') === 'active' ? 'selected' : '' }}>Active</option>
                    <option value="inactive" {{ request('status') === 'inactive' ? 'selected' : '' }}>Inactive</option>
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label text-white-50">Gender</label>
                <select name="gender" class="form-select">
                    <option value="">All Genders</option>
                    <option value="Male" {{ request('gender') === 'Male' ? 'selected' : '' }}>Male</option>
                    <option value="Female" {{ request('gender') === 'Female' ? 'selected' : '' }}>Female</option>
                </select>
            </div>
            <div class="col-md-2 d-flex align-items-end">
                <div class="btn-list w-100">
                    <button type="submit" class="btn btn-primary w-100"><i class="ti ti-search me-1"></i> Filter</button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Report Table -->
<div class="card shadow-sm">
    <div class="table-responsive">
        <table class="table table-vcenter card-table bg-transparent">
            <thead>
                <tr>
                    <th>Employee Name</th>
                    <th>Code</th>
                    <th>Email</th>
                    <th>Phone</th>
                    <th>Department</th>
                    <th>Designation</th>
                    <th>Status</th>
                </tr>
            </thead>
            <tbody>
                @if($employees->isEmpty())
                    <tr>
                        <td colspan="7" class="text-center text-muted py-5">No employees matching search criteria.</td>
                    </tr>
                @else
                    @foreach($employees as $employee)
                        <tr>
                            <td>
                                <div class="d-flex align-items-center">
                                    <span class="avatar avatar-sm me-2" style="background-image: url({{ $employee->avatar ? asset('storage/'.$employee->avatar) : 'https://www.gravatar.com/avatar/'.md5(strtolower(trim($employee->email))).'?d=mp' }})"></span>
                                    <div>
                                        <div class="font-weight-medium text-white">{{ $employee->first_name }} {{ $employee->last_name }}</div>
                                        <div class="text-muted small">{{ $employee->gender }}</div>
                                    </div>
                                </div>
                            </td>
                            <td class="text-muted">{{ $employee->employee_code }}</td>
                            <td class="text-muted">{{ $employee->email }}</td>
                            <td class="text-muted">{{ $employee->phone ?? '-' }}</td>
                            <td class="text-muted">{{ $employee->department ? $employee->department->name : '-' }}</td>
                            <td class="text-muted">{{ $employee->designation ? $employee->designation->name : '-' }}</td>
                            <td>
                                @if($employee->status === 'active')
                                    <span class="badge bg-success-lt text-success">Active</span>
                                @else
                                    <span class="badge bg-secondary-lt text-muted">Inactive</span>
                                @endif
                            </td>
                        </tr>
                    @endforeach
                @endif
            </tbody>
        </table>
    </div>
</div>
@endsection