@extends('admin.layouts.app')
@section('title', 'Designations')
@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('admin.employees.index') }}">Employees</a></li>
    <li class="breadcrumb-item active">Designations</li>
@endsection
@section('content')
<div class="page-header">
    <h1 class="page-title">Designation Management</h1>
    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addDesignationModal">
        <i class="bi bi-plus-lg me-1"></i>Add Designation
    </button>
</div>

<div class="row g-3">
    @foreach(['teaching','non-teaching','admin'] as $type)
    @php $items = $designations->where('type', $type); @endphp
    <div class="col-md-4">
        <div class="card">
            <div class="card-header" style="font-size:0.85rem;text-transform:uppercase;letter-spacing:0.06em;color:{{ $type==='teaching'?'#2563eb':($type==='admin'?'#7c3aed':'#16a34a') }}">
                <i class="bi bi-{{ $type==='teaching'?'mortarboard':($type==='admin'?'shield-lock':'person-workspace') }} me-2"></i>
                {{ ucfirst(str_replace('-',' ',$type)) }}
            </div>
            <div class="list-group list-group-flush">
                @forelse($items as $d)
                <div class="list-group-item d-flex justify-content-between align-items-center" style="font-size:0.87rem">
                    {{ $d->name }}
                    <span class="badge bg-secondary">{{ $d->employees_count }}</span>
                </div>
                @empty
                <div class="list-group-item text-muted" style="font-size:0.83rem">None yet</div>
                @endforelse
            </div>
        </div>
    </div>
    @endforeach
</div>

<!-- ADD MODAL -->
<div class="modal fade" id="addDesignationModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content" style="border-radius:14px;border:none">
            <div class="modal-header"><h5 class="modal-title fw-600">Add Designation</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
            <form method="POST" action="{{ route('admin.employees.designations.store') }}">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Designation Name <span class="text-danger">*</span></label>
                        <input type="text" name="name" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Type</label>
                        <select name="type" class="form-select" required>
                            <option value="teaching">Teaching</option>
                            <option value="non-teaching">Non-Teaching</option>
                            <option value="admin">Admin</option>
                        </select>
                    </div>
                    <div class="mb-1">
                        <label class="form-label">Description (optional)</label>
                        <input type="text" name="description" class="form-control">
                    </div>
                </div>
                <div class="modal-footer"><button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button><button type="submit" class="btn btn-primary">Add</button></div>
            </form>
        </div>
    </div>
</div>
@endsection