@extends('layouts.admin')

@section('title', 'Employees')

@section('content')
    <header class="page-header">
        <div>
            <p class="eyebrow">Team</p>
            <h1>Employee Management</h1>
            <p class="muted">Manage your workforce and employee details</p>
        </div>
    </header>

    @php
        $statIcons = [
            'users' => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" /><circle cx="10" cy="7" r="4" /><path d="M22 21v-2a4 4 0 0 0-3-3.87" /><path d="M16 3.13a4 4 0 0 1 0 7.75" /></svg>',
            'shield' => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3 4 5v6c0 5 3.5 9.74 8 11 4.5-1.26 8-6 8-11V5Z" /><path d="m9 12 2 2 4-4" /></svg>',
            'calendar' => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" /><path d="M16 2v4" /><path d="M8 2v4" /><path d="M3 10h18" /></svg>',
            'pause' => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="3" width="16" height="18" rx="2" /><line x1="10" y1="8" x2="10" y2="16" /><line x1="14" y1="8" x2="14" y2="16" /></svg>',
        ];
    @endphp

    <section class="card-grid four-col">
        @foreach ($employeeStats as $stat)
            <article class="stat-card compact stat-card--metric"
                style="--card-accent-soft: {{ $stat['accent_soft'] ?? 'var(--accent-soft)' }}; --card-accent: {{ $stat['accent'] ?? 'var(--accent)' }};">
                <div class="stat-card__icon" aria-hidden="true">
                    {!! $statIcons[$stat['icon']] ?? '' !!}
                </div>
                <div class="stat-card__content">
                    <p class="muted">{{ $stat['label'] }}</p>
                    <h3>{{ $stat['value'] }}</h3>
                    @isset($stat['meta'])
                        <p class="stat-meta">{{ $stat['meta'] }}</p>
                    @endisset
                </div>
            </article>
        @endforeach
    </section>

    <section class="toolbar toolbar--filters">
        <div class="toolbar__search">
            <input type="search" placeholder="Search by name, email or department..." class="input">
        </div>
        <div class="toolbar__filters">
            <div class="select-wrapper">
                <select class="select">
                    <option>All Departments</option>
                    @foreach ($departments as $department)
                        <option>{{ $department }}</option>
                    @endforeach
                </select>
                <span class="select-icon">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="16" height="16">
                        <path d="m6 9 6 6 6-6"/>
                    </svg>
                </span>
            </div>
            <div class="select-wrapper">
                <select class="select">
                    @foreach ($statuses as $status)
                        <option>{{ $status }}</option>
                    @endforeach
                </select>
                <span class="select-icon">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="16" height="16">
                        <path d="m6 9 6 6 6-6"/>
                    </svg>
                </span>
            </div>
        </div>
        <div class="toolbar__actions">
            <button class="ghost-btn ghost-btn--icon">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="16" height="16">
                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                    <polyline points="7 10 12 15 17 10"/>
                    <line x1="12" y1="15" x2="12" y2="3"/>
                </svg>
                Export
            </button>
            <button class="primary-btn js-open-add-employee" style="display: inline-flex; align-items: center; gap: 6px;">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="16" height="16">
                    <line x1="12" y1="5" x2="12" y2="19"/>
                    <line x1="5" y1="12" x2="19" y2="12"/>
                </svg>
                Add Employee
            </button>
        </div>
    </section>

    <section class="panel panel--table">
        <div class="panel__body">
            <table class="data-table data-table--employees">
                <thead>
                    <tr>
                        <th>Employee</th>
                        <th>Contact</th>
                        <th>Department</th>
                        <th>Designation</th>
                        <th>Status</th>
                        <th>Join Date</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($employees as $employee)
                        <tr>
                            <td>
                                <div class="table-person">
                                    <span class="avatar small">{{ $employee['initials'] }}</span>
                                    <div>
                                        <p>{{ $employee['name'] }}</p>
                                        <span class="muted">{{ $employee['id'] }}</span>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <p>{{ $employee['email'] }}</p>
                                <span class="muted">{{ $employee['phone'] }}</span>
                            </td>
                            <td>{{ $employee['department'] }}</td>
                            <td>{{ $employee['designation'] }}</td>
                            <td><span class="pill success">{{ $employee['status'] }}</span></td>
                            <td>{{ $employee['joined'] }}</td>
                            <td>
                                <div class="table-actions">
                                    <button class="icon-btn icon-btn--round" aria-label="View employee" title="View">
                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                            <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
                                            <circle cx="12" cy="12" r="3"/>
                                        </svg>
                                    </button>
                                    <button class="icon-btn icon-btn--round" aria-label="Edit employee" title="Edit">
                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                            <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
                                            <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
                                        </svg>
                                    </button>
                                    <button class="icon-btn icon-btn--round icon-btn--danger" aria-label="Delete employee" title="Delete">
                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                            <polyline points="3 6 5 6 21 6"/>
                                            <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
                                            <line x1="10" y1="11" x2="10" y2="17"/>
                                            <line x1="14" y1="11" x2="14" y2="17"/>
                                        </svg>
                                    </button>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </section>

    <div class="modal" id="addEmployeeModal" role="dialog" aria-modal="true" aria-labelledby="addEmployeeTitle" aria-hidden="true">
        <div class="modal__overlay" data-modal-close></div>
        <div class="modal__content">
            <div class="modal__header">
                <div>
                    <h2 id="addEmployeeTitle">Add New Employee</h2>
                </div>
                <button class="icon-btn icon-btn--ghost" aria-label="Close modal" data-modal-close>
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="18" height="18">
                        <line x1="18" y1="6" x2="6" y2="18"/>
                        <line x1="6" y1="6" x2="18" y2="18"/>
                    </svg>
                </button>
            </div>
            <form class="form-grid">
                <label class="field">
                    <span>Full Name *</span>
                    <input type="text" placeholder="Enter full name" class="input">
                </label>
                <label class="field">
                    <span>Email *</span>
                    <input type="email" placeholder="email@example.com" class="input">
                </label>
                <label class="field">
                    <span>Phone Number *</span>
                    <input type="text" placeholder="+44 7700 900000" class="input">
                </label>
                <label class="field">
                    <span>Department *</span>
                    <select class="select">
                        <option>Select department</option>
                        @foreach ($departments as $department)
                            <option>{{ $department }}</option>
                        @endforeach
                    </select>
                </label>
                <label class="field">
                    <span>Designation *</span>
                    <input type="text" placeholder="Job title" class="input">
                </label>
                <label class="field">
                    <span>Join Date *</span>
                    <input type="date" class="input">
                </label>
                <label class="field">
                    <span>Hourly Rate (£) *</span>
                    <input type="number" step="0.01" placeholder="14.50" class="input">
                </label>
                <label class="field">
                    <span>Status *</span>
                    <select class="select">
                        @foreach ($statuses as $status)
                            <option>{{ $status }}</option>
                        @endforeach
                    </select>
                </label>
                <div class="form-actions">
                    <button type="button" class="ghost-btn" data-modal-close>Cancel</button>
                    <button type="submit" class="primary-btn">Add Employee</button>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const modal = document.getElementById('addEmployeeModal');
            const openButtons = document.querySelectorAll('.js-open-add-employee');
            const closeElements = modal.querySelectorAll('[data-modal-close]');

            const openModal = () => {
                modal.setAttribute('aria-hidden', 'false');
                modal.classList.add('is-visible');
                document.body.classList.add('modal-open');
            };

            const closeModal = () => {
                modal.setAttribute('aria-hidden', 'true');
                modal.classList.remove('is-visible');
                document.body.classList.remove('modal-open');
            };

            openButtons.forEach((btn) => btn.addEventListener('click', openModal));
            closeElements.forEach((el) => el.addEventListener('click', closeModal));
            modal.addEventListener('click', (event) => {
                if (event.target === modal) {
                    closeModal();
                }
            });
        });
    </script>
@endpush


