@extends('layouts.admin')

@section('page-title', 'Staff Members')

@section('content')

<div class="container-fluid py-4 px-4">

    {{-- Page Header --}}
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="fw-bold mb-1">Staff Members</h4>
            <p class="text-muted mb-0 small">Manage your workforce, designations and regions</p>
        </div>
        <div class="d-flex gap-2 flex-wrap">
            <a href="{{ route('staff.create') }}" class="btn btn-sm fw-semibold"
                style="background:#6d28d9; color:#fff; padding:7px 16px; border-radius:8px;">
                <i class="bi bi-person-plus me-1"></i> Add Staff
            </a>
            <a href="{{ route('designation.create') }}" class="btn btn-sm fw-semibold"
                style="background:#0ea5e9; color:#fff; padding:7px 16px; border-radius:8px;">
                <i class="bi bi-briefcase me-1"></i> Add Designation
            </a>
            <a href="{{ route('region.create') }}" class="btn btn-sm fw-semibold"
                style="background:#22c55e; color:#fff; padding:7px 16px; border-radius:8px;">
                <i class="bi bi-map me-1"></i> Add Region
            </a>
        </div>
    </div>

    {{-- Stats Row --}}
    <div class="row g-3 mb-4">
        <div class="col-6 col-md-3">
            <div class="rounded-3 p-3 d-flex align-items-center gap-3"
                style="background:#ede9fe; border:1px solid #ddd6fe;">
                <div class="rounded-circle d-flex align-items-center justify-content-center"
                    style="width:42px;height:42px;background:#6d28d9;">
                    <i class="bi bi-people-fill text-white" style="font-size:16px;"></i>
                </div>
                <div>
                    <div class="fw-bold" style="font-size:20px; color:#3b0764;">
                        {{ $staff->count() }}
                    </div>
                    <div class="text-muted small">Total Staff</div>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="rounded-3 p-3 d-flex align-items-center gap-3"
                style="background:#e0f2fe; border:1px solid #bae6fd;">
                <div class="rounded-circle d-flex align-items-center justify-content-center"
                    style="width:42px;height:42px;background:#0ea5e9;">
                    <i class="bi bi-briefcase-fill text-white" style="font-size:16px;"></i>
                </div>
                <div>
                    <div class="fw-bold" style="font-size:20px; color:#0c4a6e;">
                        {{ $staff->pluck('designation_id')->filter()->unique()->count() }}
                    </div>
                    <div class="text-muted small">Designations</div>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="rounded-3 p-3 d-flex align-items-center gap-3"
                style="background:#dcfce7; border:1px solid #bbf7d0;">
                <div class="rounded-circle d-flex align-items-center justify-content-center"
                    style="width:42px;height:42px;background:#22c55e;">
                    <i class="bi bi-geo-alt-fill text-white" style="font-size:16px;"></i>
                </div>
                <div>
                    <div class="fw-bold" style="font-size:20px; color:#14532d;">
                        {{ $staff->pluck('region_id')->filter()->unique()->count() }}
                    </div>
                    <div class="text-muted small">Regions</div>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="rounded-3 p-3 d-flex align-items-center gap-3"
                style="background:#fef9c3; border:1px solid #fde68a;">
                <div class="rounded-circle d-flex align-items-center justify-content-center"
                    style="width:42px;height:42px;background:#eab308;">
                    <i class="bi bi-person-check-fill text-white" style="font-size:16px;"></i>
                </div>
                <div>
                    <div class="fw-bold" style="font-size:20px; color:#713f12;">
                        {{ $staff->where('created_at', '>=', now()->startOfMonth())->count() }}
                    </div>
                    <div class="text-muted small">Joined This Month</div>
                </div>
            </div>
        </div>
    </div>

    {{-- Search Bar --}}
    <div class="bg-white rounded-3 p-3 mb-3 shadow-sm d-flex flex-wrap gap-2 align-items-center"
        style="border:1px solid #f0f0f0;">
        <div class="input-group" style="max-width:280px;">
            <span class="input-group-text bg-white border-end-0 text-muted">
                <i class="bi bi-search"></i>
            </span>
            <input type="text" id="staffSearch" class="form-control border-start-0 ps-0"
                placeholder="Search by name, email...">
        </div>
        <select class="form-select form-select-sm" id="designationFilter" style="max-width:180px;">
            <option value="">All Designations</option>
            @foreach($staff->pluck('designation')->filter()->unique('id') as $des)
                <option value="{{ $des->name }}">{{ $des->name }}</option>
            @endforeach
        </select>
        <select class="form-select form-select-sm" id="regionFilter" style="max-width:160px;">
            <option value="">All Regions</option>
            @foreach($staff->pluck('region')->filter()->unique('id') as $reg)
                <option value="{{ $reg->name }}">{{ $reg->name }}</option>
            @endforeach
        </select>
    </div>

    {{-- Table Card --}}
    <div class="bg-white rounded-3 shadow-sm overflow-hidden" style="border:1px solid #f0f0f0;">

        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0" id="staffTable">

                <thead style="background:#fafafa; border-bottom:2px solid #f0f0f0;">
                    <tr style="font-size:12px; text-transform:uppercase; letter-spacing:0.5px; color:#888;">
                        <th class="px-4 py-3">#</th>
                        <th class="py-3">Staff Member</th>
                        <th class="py-3">Contact</th>
                        <th class="py-3">Designation</th>
                        <th class="py-3">Region</th>
                        <th class="py-3">Current Projects</th> <th class="py-3">Joined</th>
                        </tr>
                </thead>

                <tbody id="staffTableBody">
                    @forelse($staff as $member)
                    <tr style="border-bottom:1px solid #f8f8f8; font-size:14px;"
                        data-name="{{ strtolower($member->name) }}"
                        data-email="{{ strtolower($member->email) }}"
                        data-designation="{{ $member->designation->name ?? '' }}"
                        data-region="{{ $member->region->name ?? '' }}">

                        {{-- Sr No --}}
                        <td class="px-4 py-3 text-muted" style="font-size:13px;">
                            {{ $loop->iteration }}
                        </td>

                        {{-- Name + Avatar --}}
                        <td class="py-3">
                            <div class="d-flex align-items-center gap-2">
                                @php
                                    $colors = ['#6d28d9','#0ea5e9','#22c55e','#f59e0b','#ef4444','#6366f1','#ec4899'];
                                    $color  = $colors[$loop->index % count($colors)];
                                @endphp
                                <div class="rounded-circle d-flex align-items-center justify-content-center fw-semibold text-white"
                                    style="width:36px;height:36px;min-width:36px;font-size:13px;background:{{ $color }};">
                                    {{ strtoupper(substr($member->name, 0, 1)) }}
                                </div>
                                <div>
                                    <div class="fw-semibold text-dark" style="font-size:14px;">
                                        {{ $member->name }}
                                    </div>
                                </div>
                            </div>
                        </td>

                        {{-- Contact --}}
                        <td class="py-3">
                            <div class="text-muted" style="font-size:13px;">
                                <i class="bi bi-envelope me-1" style="font-size:11px;"></i>
                                {{ $member->email }}
                            </div>
                            <div class="mt-1" style="font-size:13px;">
                                <i class="bi bi-telephone me-1 text-muted" style="font-size:11px;"></i>
                                {{ $member->phone ?? '—' }}
                            </div>
                        </td>

                        {{-- Designation --}}
                        <td class="py-3">
                            @if($member->designation)
                                <span class="badge rounded-pill px-3 py-2"
                                    style="background:#ede9fe; color:#6d28d9; font-size:12px; font-weight:500;">
                                    <i class="bi bi-briefcase me-1" style="font-size:10px;"></i>
                                    {{ $member->designation->name }}
                                </span>
                            @else
                                <span class="text-muted" style="font-size:13px;">—</span>
                            @endif
                        </td>

                        {{-- Region --}}
                        <td class="py-3">
                            @if($member->region)
                                <div class="d-flex align-items-center gap-1" style="font-size:13px;">
                                    <i class="bi bi-geo-alt-fill text-success" style="font-size:12px;"></i>
                                    <span>{{ $member->region->name }}</span>
                                </div>
                            @else
                                <span class="text-muted" style="font-size:13px;">—</span>
                            @endif
                        </td>

                        {{-- Current Projects (ADDED DATA) --}}
                        <td class="py-3">
                            @if($member->projects->count() > 0)
                                <div class="d-flex flex-wrap gap-1">
                                    @foreach($member->projects as $project)
                                        <span class="badge" style="background:#f1f5f9; color:#475569; border:1px solid #cbd5e1; font-weight:500; font-size: 11px;">
                                            {{ $project->title }} 
                                            <span style="color:#0ea5e9;">
                                                ({{ \App\Models\ProjectRole::find($project->pivot->role_id)->name ?? 'Assigned' }})
                                            </span>
                                        </span>
                                    @endforeach
                                </div>
                            @else
                                <span class="text-muted" style="font-size:13px;">No active projects</span>
                            @endif
                        </td>

                        {{-- Joined --}}
                        <td class="py-3">
                            <div style="font-size:13px;" class="text-dark">
                                {{ $member->created_at->format('d M Y') }}
                            </div>
                            <div style="font-size:11px;" class="text-muted">
                                {{ $member->created_at->diffForHumans() }}
                            </div>
                        </td>

                        {{-- Actions --}}
                        </tr>
                    @empty
                    <tr>
                        <td colspan="7" class="text-center py-5">
                            <div class="py-4">
                                <div class="mb-3" style="font-size:48px; color:#e5e7eb;">
                                    <i class="bi bi-people"></i>
                                </div>
                                <h6 class="text-muted fw-semibold">No staff members found</h6>
                                <p class="text-muted small mb-0">Start by adding your first staff member.</p>
                                <a href="{{ route('staff.create') }}" class="btn btn-sm mt-3"
                                    style="background:#6d28d9; color:#fff; border-radius:8px;">
                                    <i class="bi bi-person-plus me-1"></i> Add Staff
                                </a>
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>

            </table>
        </div>

        {{-- Footer --}}
        <div class="px-4 py-3 d-flex justify-content-between align-items-center flex-wrap gap-2"
            style="border-top:1px solid #f0f0f0; background:#fafafa;">
            <small class="text-muted">
                Showing <strong id="visibleCount">{{ $staff->count() }}</strong>
                of <strong>{{ $staff->count() }}</strong> staff members
            </small>
        </div>

    </div>

</div>

{{-- Live Search & Filter --}}
<script>
    const searchInput      = document.getElementById('staffSearch');
    const designationFilter = document.getElementById('designationFilter');
    const regionFilter     = document.getElementById('regionFilter');
    const rows             = document.querySelectorAll('#staffTableBody tr[data-name]');
    const visibleCount     = document.getElementById('visibleCount');

    function filterTable() {
        const search = searchInput.value.toLowerCase();
        const des    = designationFilter.value.toLowerCase();
        const reg    = regionFilter.value.toLowerCase();
        let count    = 0;

        rows.forEach(row => {
            const nameMatch  = row.dataset.name.includes(search) || row.dataset.email.includes(search);
            const desMatch   = !des || row.dataset.designation.toLowerCase() === des;
            const regMatch   = !reg || row.dataset.region.toLowerCase() === reg;
            const show       = nameMatch && desMatch && regMatch;
            row.style.display = show ? '' : 'none';
            if (show) count++;
        });

        visibleCount.textContent = count;
    }

    searchInput.addEventListener('input', filterTable);
    designationFilter.addEventListener('change', filterTable);
    regionFilter.addEventListener('change', filterTable);
</script>

@endsection