@extends('admin.layouts.app')
@section('title', 'Departments')
@section('breadcrumb')
    <span>/</span> <a href="{{ route('admin.departments.index') }}" style="color:inherit;text-decoration:none;">Departments</a>
@endsection

@section('content')
<div class="page-header">
    <div>
        <h1>Departments</h1>
        <p class="page-subtitle">Manage organisational departments</p>
    </div>
    @if(auth()->user()->hasPermission('departments.create'))
    <a href="{{ route('admin.departments.create') }}" class="btn btn-primary">
        <i class="fas fa-plus me-2"></i>Add Department
    </a>
    @endif
</div>

<!-- Filters -->
<div class="card mb-3">
    <div class="card-body py-3">
        <form method="GET" class="row g-2 align-items-end">
            <div class="col-md-5">
                <input type="text" name="search" class="form-control" placeholder="Search department name..."
                    value="{{ request('search') }}">
            </div>
            <div class="col-md-3">
                <select name="status" class="form-select">
                    <option value="">All Status</option>
                    <option value="active"   {{ request('status')=='active'   ? 'selected' : '' }}>Active</option>
                    <option value="inactive" {{ request('status')=='inactive' ? 'selected' : '' }}>Inactive</option>
                </select>
            </div>
            <div class="col-md-4 d-flex gap-2">
                <button class="btn btn-primary flex-grow-1"><i class="fas fa-search me-1"></i>Search</button>
                <a href="{{ route('admin.departments.index') }}" class="btn btn-outline-secondary">Reset</a>
            </div>
        </form>
    </div>
</div>

<!-- Table -->
<div class="card">
    <div class="card-header d-flex align-items-center justify-content-between">
        <h6 class="mb-0 fw-700"><i class="fas fa-building text-primary me-2"></i>All Departments</h6>
        <span class="badge bg-primary">{{ $departments->total() }} total</span>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0" id="deptTable">
                <thead style="background:#f8fafc;">
                    <tr>
                        <th class="ps-3" width="50">S.N.</th>
                        <th>Department Name</th>
                        <th>Description</th>
                        <th>Users</th>
                        <th>Status</th>
                        <th>Created</th>
                        <th class="text-center" width="140">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($departments as $i => $dept)
                    <tr>
                        <td class="ps-3 text-muted">{{ ($departments->currentPage()-1)*$departments->perPage() + $i + 1 }}</td>
                        <td>
                            <div style="font-weight:600;">{{ $dept->name }}</div>
                        </td>
                        <td>
                            <span style="font-size:12px;color:#64748b;">
                                {{ $dept->description ? Str::limit($dept->description, 60) : '—' }}
                            </span>
                        </td>
                        <td>
                            <span class="badge bg-light text-dark border">{{ $dept->users_count }} users</span>
                        </td>
                        <td>
                            <div class="form-check form-switch mb-0" style="min-height:auto;">
                                <input class="form-check-input status-toggle" type="checkbox"
                                    {{ $dept->status === 'active' ? 'checked' : '' }}
                                    data-id="{{ $dept->id }}"
                                    data-url="{{ route('admin.departments.toggle-status', $dept) }}"
                                    @if(!auth()->user()->hasPermission('departments.edit')) disabled @endif>
                            </div>
                        </td>
                        <td><span style="font-size:12px;color:#64748b;">{{ $dept->created_at->format('d M Y') }}</span></td>
                        <td class="text-center">
                            <div class="d-flex gap-1 justify-content-center">
                                <a href="{{ route('admin.departments.show', $dept) }}"
                                    class="btn btn-sm btn-outline-info" title="View">
                                    <i class="fas fa-eye"></i>
                                </a>
                                @if(auth()->user()->hasPermission('departments.edit'))
                                <a href="{{ route('admin.departments.edit', $dept) }}"
                                    class="btn btn-sm btn-outline-primary" title="Edit">
                                    <i class="fas fa-edit"></i>
                                </a>
                                @endif
                                @if(auth()->user()->hasPermission('departments.delete'))
                                <button class="btn btn-sm btn-outline-danger" title="Delete"
                                    onclick="confirmDelete('{{ route('admin.departments.destroy', $dept) }}', '{{ $dept->name }}')">
                                    <i class="fas fa-trash"></i>
                                </button>
                                @endif
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7" class="text-center py-5">
                            <i class="fas fa-building d-block mb-2" style="font-size:32px;color:#cbd5e1;"></i>
                            <p class="text-muted mb-2">No departments found</p>
                            @if(auth()->user()->hasPermission('departments.create'))
                            <a href="{{ route('admin.departments.create') }}" class="btn btn-sm btn-primary">
                                <i class="fas fa-plus me-1"></i>Add First Department
                            </a>
                            @endif
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
    @if($departments->hasPages())
    <div class="card-footer bg-white border-top-0 py-3">
        {{ $departments->links() }}
    </div>
    @endif
</div>
@endsection

@push('scripts')
<script>
// Toggle status via AJAX
document.querySelectorAll('.status-toggle').forEach(toggle => {
    toggle.addEventListener('change', function() {
        const url = this.dataset.url;
        const el  = this;
        fetch(url, {
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').content, 'Content-Type': 'application/json' }
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                toastr.success(data.message);
            } else {
                el.checked = !el.checked;
                toastr.error(data.message || 'Failed to update status.');
            }
        })
        .catch(() => { el.checked = !el.checked; toastr.error('Network error.'); });
    });
});
</script>
@endpush