@extends('layouts.app')
@section('page-title', $department->name)
@section('content')
<style>
    .dept-stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:1rem; margin-bottom:1.5rem; }
    .dept-stat-card { background:#fff; border:1px solid #eef0f2; border-radius:10px; padding:1.1rem; text-align:center; }
    .dept-stat-card .dsv { font-size:1.4rem; font-weight:700; color:#2a2f3a; }
    .dept-stat-card .dsl { font-size:.75rem; color:#8891a0; margin-top:2px; }

    .dept-bar-row { display:flex; align-items:center; gap:.75rem; margin-bottom:.6rem; }
    .dept-bar-label { min-width:90px; font-size:.82rem; font-weight:600; color:#333a45; }
    .dept-bar-track { flex:1; height:10px; border-radius:999px; background:#eef0f2; overflow:hidden; }
    .dept-bar-fill { height:100%; border-radius:999px; background:linear-gradient(90deg,#4f5fce,#7c8cf0); }
    .dept-bar-count { min-width:70px; text-align:right; font-size:.78rem; color:#8891a0; font-family:monospace; }

    .field-hint { font-size:.7rem; color:#8891a0; margin-top:.25rem; }
    .role-badge { display:inline-block; padding:3px 10px; border-radius:999px; font-size:.72rem; font-weight:600; }
    .role-HOD { background:#ede9fe; color:#5b21b6; }
    .role-Deputy { background:#dbeafe; color:#1e40af; }
    .role-Member { background:#d1fae5; color:#065f46; }
    .role-Intern { background:#fef3c7; color:#92400e; }
    .role-Developer { background:#fce7f3; color:#9d174d; }
</style>

<div class="card mb-3">
    <div class="card-header d-flex justify-content-between align-items-start flex-wrap gap-2">
        <div>
            <h2 class="mb-1">{{ $department->name }}</h2>
            <div class="text-muted" style="font-size:.85rem">
                Lead: <strong>{{ optional($department->lead)->name ?? 'Not assigned' }}</strong>
            </div>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ route('departments.index') }}" class="btn btn-outline-secondary btn-sm">Back to Departments</a>
            @if(auth()->user() && method_exists(auth()->user(), 'hasRole') && auth()->user()->hasRole(['Admin', 'Manager']))
                <a href="{{ route('departments.edit', $department) }}" class="btn btn-warning btn-sm">Edit</a>
            @endif
        </div>
    </div>
    <div class="card-body">
        @if(session('success'))
            <div class="alert alert-success mb-3">{{ session('success') }}</div>
        @endif
        @if(session('error'))
            <div class="alert alert-danger mb-3">{{ session('error') }}</div>
        @endif
        @if($errors->any())
            <div class="alert alert-danger mb-3">
                <ul class="mb-0">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        @if($department->description)
            <p class="mb-0" style="font-size:.9rem;line-height:1.6">{{ $department->description }}</p>
        @endif
    </div>
</div>

<div class="row g-3">
    <div class="col-lg-7">
        <div class="card mb-3">
            <div class="card-header"><h5 class="mb-0"><i class="bi bi-people me-2"></i>Members ({{ $totalMembers }})</h5></div>
            <div class="card-body">
                @if($totalMembers === 0)
                    <div class="text-muted text-center py-4">No members yet.</div>
                @else
                <div class="table-responsive">
                    <table class="table table-bordered align-middle mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>Name</th>
                                <th>Email</th>
                                <th style="width:160px">Role</th>
                                @if($canManage)
                                    <th style="width:110px">Actions</th>
                                @endif
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($department->members as $member)
                            <tr>
                                <td class="fw-semibold">
                                    {{ optional($member->user)->name ?? '—' }}
                                    @if($member->user_id === $department->lead_id)
                                        <span class="badge bg-secondary ms-1" style="font-size:.62rem">LEAD</span>
                                    @endif
                                </td>
                                <td>{{ optional($member->user)->email ?? '—' }}</td>
                                <td>
                                    @if($canManage)
                                        <form method="POST" action="{{ route('departments.members.update', [$department, $member]) }}" class="d-flex gap-1">
                                            @csrf @method('PUT')
                                            <select name="role" class="form-select form-select-sm" onchange="this.form.submit()">
                                                @foreach($roleOptions as $role)
                                                    <option value="{{ $role }}" {{ $member->role === $role ? 'selected' : '' }}>{{ $role }}</option>
                                                @endforeach
                                            </select>
                                        </form>
                                    @else
                                        <span class="role-badge role-{{ $member->role }}">{{ $member->role }}</span>
                                    @endif
                                </td>
                                @if($canManage)
                                <td>
                                    @if($member->user_id !== $department->lead_id)
                                    <form method="POST" action="{{ route('departments.members.remove', [$department, $member]) }}" onsubmit="return confirm('Remove this member from the department?');">
                                        @csrf @method('DELETE')
                                        <button class="btn btn-sm btn-danger" title="Remove"><i class="bi bi-x-lg"></i></button>
                                    </form>
                                    @endif
                                </td>
                                @endif
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                @endif
            </div>
        </div>

        @if($canManage)
        <div class="card">
            <div class="card-header"><h5 class="mb-0"><i class="bi bi-person-plus me-2"></i>Add Member</h5></div>
            <div class="card-body">
                <form method="POST" action="{{ route('departments.members.add', $department) }}">
                    @csrf
                    <div class="row g-2 align-items-end">
                        <div class="col-md-6">
                            <label class="form-label fw-semibold" style="font-size:.85rem">User</label>
                            <select name="user_id" class="form-select" required>
                                <option value="">-- Select user --</option>
                                @foreach($allUsers as $u)
                                    <option value="{{ $u->id }}">{{ $u->first_name }} {{ $u->last_name }} ({{ $u->email }})</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-semibold" style="font-size:.85rem">Role</label>
                            <select name="role" class="form-select" required>
                                @foreach($roleOptions as $role)
                                    <option value="{{ $role }}" {{ $role === 'Member' ? 'selected' : '' }}>{{ $role }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2">
                            <button type="submit" class="btn btn-primary w-100">Add</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        @endif
    </div>

    <div class="col-lg-5">
        <div class="card" style="position:sticky;top:75px">
            <div class="card-header"><h5 class="mb-0"><i class="bi bi-bar-chart me-2"></i>Role Distribution</h5></div>
            <div class="card-body">
                <div class="dept-stat-grid">
                    <div class="dept-stat-card">
                        <div class="dsv">{{ $totalMembers }}</div>
                        <div class="dsl">Total Members</div>
                    </div>
                    <div class="dept-stat-card">
                        <div class="dsv">{{ $distribution['HOD'] }}</div>
                        <div class="dsl">HOD</div>
                    </div>
                    <div class="dept-stat-card">
                        <div class="dsv">{{ $distribution['Deputy'] }}</div>
                        <div class="dsl">Deputy</div>
                    </div>
                </div>

                @foreach($distribution as $role => $count)
                    @php $pct = $totalMembers > 0 ? round(($count / $totalMembers) * 100) : 0; @endphp
                    <div class="dept-bar-row">
                        <div class="dept-bar-label">{{ $role }}</div>
                        <div class="dept-bar-track">
                            <div class="dept-bar-fill" style="width:{{ $pct }}%"></div>
                        </div>
                        <div class="dept-bar-count">{{ $count }} ({{ $pct }}%)</div>
                    </div>
                @endforeach

                @if($totalMembers === 0)
                    <div class="field-hint mt-2">Distribution will populate once members are added.</div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection