@extends('layouts.app')

@section('content')
<div class="d-flex justify-content-between align-items-center flex-wrap grid-margin mb-3">
    <div>
        <h4 class="mb-0">Departments</h4>
        <div class="text-secondary small mt-1">Group extensions, dialable codes, recording &amp; per-team stats.</div>
    </div>
    <div class="mt-2 mt-md-0">
        <a href="{{ route('applications.departments.create') }}" class="btn btn-primary btn-sm">
            <i data-feather="plus" class="icon-sm"></i> New Department
        </a>
    </div>
</div>

@if (session('success'))
    <div class="alert alert-success">{{ session('success') }}</div>
@endif

<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-6">
                <label class="form-label small">Search</label>
                <input type="text" name="q" value="{{ $q }}" class="form-control" placeholder="Name, code, description">
            </div>
            <div class="col-md-2">
                <button class="btn btn-primary w-100">Filter</button>
            </div>
        </form>
    </div>
</div>

<div class="card">
    <div class="card-body">
        @if($departments->isEmpty())
            <div class="text-center py-5 text-secondary">
                <p class="mb-3">No departments yet.</p>
                <a href="{{ route('applications.departments.create') }}" class="btn btn-primary btn-sm">Create your first department</a>
            </div>
        @else
            <div class="table-responsive">
                <table class="table table-hover align-middle">
                    <thead>
                        <tr>
                            <th></th>
                            <th>Name</th>
                            <th>Code</th>
                            <th>Strategy</th>
                            <th class="text-center">Members</th>
                            <th>Manager</th>
                            <th>CID Prefix</th>
                            <th class="text-center">Recording</th>
                            <th class="text-center">Enabled</th>
                            <th class="text-end">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($departments as $d)
                            <tr>
                                <td>
                                    <span class="d-inline-block rounded-circle" style="width:14px;height:14px;background:{{ $d->color ?: '#6366f1' }};"></span>
                                </td>
                                <td>
                                    <div class="fw-semibold">{{ $d->name }}</div>
                                    @if($d->description)
                                        <div class="text-secondary small">{{ $d->description }}</div>
                                    @endif
                                </td>
                                <td>@if($d->code)<code>{{ $d->code }}</code>@else<span class="text-secondary">—</span>@endif</td>
                                <td><span class="badge bg-secondary">{{ ucfirst($d->strategy ?? 'ringall') }}</span></td>
                                <td class="text-center">{{ $d->members_count }}</td>
                                <td>{{ $d->manager_extension ? "Ext {$d->manager_extension}" : '—' }}</td>
                                <td>@if($d->callerid_prefix)<span class="badge bg-info">{{ $d->callerid_prefix }}</span>@else<span class="text-secondary">—</span>@endif</td>
                                <td class="text-center">
                                    @if($d->force_recording)
                                        <span class="badge bg-danger"><i data-feather="circle" class="icon-sm"></i> ON</span>
                                    @else
                                        <span class="text-secondary">—</span>
                                    @endif
                                </td>
                                <td class="text-center">
                                    @if($d->enabled)
                                        <span class="badge bg-success">Yes</span>
                                    @else
                                        <span class="badge bg-secondary">No</span>
                                    @endif
                                </td>
                                <td class="text-end text-nowrap">
                                    <a href="{{ route('applications.departments.show', $d->id) }}" class="btn btn-sm btn-outline-info">Stats</a>
                                    <a href="{{ route('applications.departments.edit', $d->id) }}" class="btn btn-sm btn-outline-primary">Edit</a>
                                    <form action="{{ route('applications.departments.destroy', $d->id) }}" method="POST" class="d-inline" onsubmit="return confirm('Delete department {{ $d->name }}?');">
                                        @csrf @method('DELETE')
                                        <button type="submit" class="btn btn-sm btn-outline-danger">Delete</button>
                                    </form>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    </div>
</div>
@endsection