@extends('layouts/contentNavbarLayout')

@section('title', 'Employees')

@section('content')
    <nav aria-label="breadcrumb" class="mb-3">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
            <li class="breadcrumb-item active">Employees</li>
        </ol>
    </nav>

    <!-- Statistics Cards -->
    <style>
        .stat-card {
            transition: all 0.3s ease;
            cursor: pointer;
            border: none;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .stat-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 3px 8px rgba(0,0,0,0.15);
        }
        .stat-card .card-body {
            padding: 0.75rem 1rem;
        }
        .stat-number {
            font-size: 1.5rem;
            font-weight: 700;
            line-height: 1.2;
        }
        .stat-label {
            font-size: 0.75rem;
            opacity: 0.95;
            font-weight: 500;
            margin-top: 0.15rem;
        }
        .stat-icon {
            font-size: 1.75rem;
            opacity: 0.3;
        }
        .stats-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 0.75rem;
        }
        @media (min-width: 1200px) {
            .stats-container {
                grid-template-columns: repeat(3, 1fr);
            }
        }
        @media (max-width: 1199px) and (min-width: 768px) {
            .stats-container {
                grid-template-columns: repeat(3, 1fr);
            }
        }
        @media (max-width: 767px) {
            .stats-container {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        .filter-section .form-label {
            font-size: 0.75rem;
            font-weight: 500;
            margin-bottom: 0.25rem;
        }
        .filter-section .form-control,
        .filter-section .form-select {
            font-size: 0.875rem;
            padding: 0.375rem 0.75rem;
        }
        .filter-section .btn {
            font-size: 0.875rem;
            padding: 0.375rem 0.75rem;
        }
    </style>

    <div class="stats-container mb-3">
        <!-- Total Employees -->
        <div class="card bg-primary text-white stat-card h-100">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <div class="stat-number mb-0">{{ number_format($stats['total']) }}</div>
                        <div class="stat-label">Total Employees</div>
                    </div>
                    <i class="mdi mdi-account-group stat-icon"></i>
                </div>
            </div>
        </div>
        <!-- Active Employees -->
        <div class="card bg-success text-white stat-card h-100">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <div class="stat-number mb-0">{{ number_format($stats['active']) }}</div>
                        <div class="stat-label">Active</div>
                    </div>
                    <i class="mdi mdi-account-check stat-icon"></i>
                </div>
            </div>
        </div>
        <!-- Inactive Employees -->
        <div class="card bg-danger text-white stat-card h-100">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <div class="stat-number mb-0">{{ number_format($stats['inactive']) }}</div>
                        <div class="stat-label">Inactive</div>
                    </div>
                    <i class="mdi mdi-account-off stat-icon"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Search and Filter Section -->
    <div class="card mb-3 filter-section">
        <div class="card-body py-2">
            <form method="GET" action="{{ route('employees.index') }}" id="filter-form">
                <div class="row g-2">
                    <!-- Search -->
                    <div class="col-md-4">
                        <label class="form-label">Search</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="mdi mdi-magnify"></i></span>
                            <input type="text" class="form-control form-control-sm" name="search" 
                                   value="{{ request('search') }}" 
                                   placeholder="Name, Username, Email, Phone...">
                            @if(request('search'))
                                <button type="button" class="btn btn-outline-secondary btn-sm" onclick="clearSearch()">
                                    <i class="mdi mdi-close"></i>
                                </button>
                            @endif
                        </div>
                    </div>

                    <!-- Company Filter -->
                    <div class="col-md-2">
                        <label class="form-label">Company</label>
                        <select class="form-select form-select-sm select2" name="company_id" onchange="this.form.submit()">
                            <option value="">All Companies</option>
                            @foreach($companies as $company)
                                <option value="{{ $company->id }}" {{ request('company_id') == $company->id ? 'selected' : '' }}>
                                    {{ $company->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Sort by Status -->
                    <div class="col-md-3">
                        <label class="form-label">Status</label>
                        <select class="form-select form-select-sm" name="sort_status" onchange="this.form.submit()">
                            <option value="">All Status</option>
                            <option value="active" {{ request('sort_status') == 'active' ? 'selected' : '' }}>Active</option>
                            <option value="inactive" {{ request('sort_status') == 'inactive' ? 'selected' : '' }}>Inactive</option>
                        </select>
                    </div>

                    <!-- Action Buttons -->
                    <div class="col-md-{{ !request()->has('company_id') ? '3' : '5' }} d-flex align-items-end gap-2">
                        <button type="submit" class="btn btn-primary btn-sm">
                            <i class="mdi mdi-filter"></i> Apply Filters
                        </button>
                        @if(request('search') || request('sort_status') || request('company_id'))
                            <a href="{{ route('employees.index') }}" class="btn btn-secondary btn-sm">
                                <i class="mdi mdi-close"></i> Clear
                            </a>
                        @endif
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="card">
        @if(session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
        @endif
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0">Employees List</h5>
            <a href="{{ routeWithQuery('employees.create', ['company_id' => $company_id ?? null]) }}" class="btn btn-info btn-sm">
                <i class="mdi mdi-plus"></i> Create Employee
            </a>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Username</th>
                            <th>Phone</th>
                            <th>Department</th>
                            @if(!request()->has('company_id'))
                                <th>Company</th>
                            @endif
                            <th>Joined At</th>
                            <th>Status</th>
                            <th class="text-center">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($users as $user)
                            <tr>
                                <td>
                                    <div class="d-flex align-items-center">
                                        @if($user->avatar && is_object($user->avatar) && isset($user->avatar->picture))
                                            <img src="{{ asset('uploads/images/' . $user->avatar->picture) }}" 
                                                 alt="{{ $user->name }}" 
                                                 class="rounded-circle me-2" 
                                                 style="width: 40px; height: 40px; object-fit: cover;">
                                        @else
                                            <div class="rounded-circle bg-secondary d-flex align-items-center justify-content-center me-2" 
                                                 style="width: 40px; height: 40px;">
                                                <i class="mdi mdi-account text-white"></i>
                                            </div>
                                        @endif
                                        <div>
                                            <strong>{{ $user->name ?? '-' }}</strong>
                                        </div>
                                    </div>
                                </td>
                                <td>{{ $user->username ?? '-' }}</td>
                                <td>{{ $user->phone ?? '-' }}</td>
                                <td>
                                    @if($user->department)
                                        <span class="badge bg-info">{{ $user->department->name }}</span>
                                    @else
                                        <span class="text-muted">-</span>
                                    @endif
                                </td>
                                @if(!request()->has('company_id'))
                                    <td>
                                        @if($user->company)
                                            <span class="badge bg-primary">{{ $user->company->name }}</span>
                                        @else
                                            <span class="text-muted">-</span>
                                        @endif
                                    </td>
                                @endif
                                <td>{{ $user->created_at->format('d/m/Y') }}</td>
                                <td>
                                    <span class="badge bg-{{ $user->status == 1 ? 'success' : 'danger' }}">
                                        {{ $user->status == 1 ? 'Active' : 'Inactive' }}
                                    </span>
                                </td>
                                <td class="text-center">
                                    <a href="{{ route('employees.edit', $user->id) }}" 
                                       class="btn btn-icon btn-info btn-sm" 
                                       title="Edit">
                                        <i class="mdi mdi-pencil-outline"></i>
                                    </a>
                                    <button type="button" class="btn btn-icon btn-danger btn-sm" data-bs-toggle="modal"
                                        data-bs-target="#deleteConfirmModal" data-user-id="{{ $user->id }}">
                                        <i class="mdi mdi-trash-can-outline"></i>
                                    </button>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="{{ !request()->has('company_id') ? '8' : '7' }}">
                                    <div class="alert alert-info col-md-6" role="alert">
                                        No employees found!
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
        @if($users->hasPages())
            <div class="card-footer">
                <div class="d-flex justify-content-center">
                    {{ $users->appends(request()->query())->links() }}
                </div>
            </div>
        @endif
    </div>
    @include('components.delete_confirm_modal', ['entity' => 'employee', 'action' => ''])
@endsection

@section('page-script')
<script>
    function clearSearch() {
        document.querySelector('input[name="search"]').value = '';
        document.getElementById('filter-form').submit();
    }
</script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var deleteConfirmModal = document.getElementById('deleteConfirmModal');
        deleteConfirmModal.addEventListener('show.bs.modal', function (event) {
            var button = event.relatedTarget;
            var userId = button.getAttribute('data-user-id');
            var form = document.getElementById('deleteForm');
            form.action = '{{ route("employees.destroy", ":id") }}'.replace(':id', userId);
        });
    });
</script>
@endsection