@extends('layouts.app')

@php
    $pageTitle = 'Departments';
    $pageHeading = 'Department Directory';
    $pageDescription = 'Struktur departemen ADMS untuk kebutuhan organisasi, employee mapping, dan approval flow.';
    $tableThemeClass = 'ops-datatable-theme ops-datatable-theme--departments';
@endphp

@section('content')
    <style>
        .department-summary-strip {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 10px;
        }
        .department-summary-item,
        .department-list-meta {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            min-height: 30px;
            padding: 4px 9px;
            border: 1px solid #dee2e6;
            border-radius: 4px;
            background: #f8f9fa;
            color: #495057;
            font-size: 12px;
            white-space: nowrap;
        }
        .department-summary-item strong {
            color: #212529;
            font-size: 14px;
        }
        .department-list-meta {
            background: #e9ecef;
        }
    </style>

    <section class="table-card">
        @if (session('status'))
            <div class="hero" style="margin: 0 0 16px; border-color: rgba(45, 106, 79, 0.24); background: rgba(45, 106, 79, 0.08);">
                <strong style="display: block; color: var(--green-deep); margin-bottom: 6px;">Berhasil</strong>
                <div>{{ session('status') }}</div>
            </div>
        @endif

        <div class="department-summary-strip" aria-label="Ringkasan department">
            <span class="department-summary-item">Total <strong>{{ number_format($summary['total']) }}</strong></span>
            <span class="department-summary-item">Default <strong>{{ number_format($summary['default']) }}</strong></span>
            <span class="department-summary-item">Root <strong>{{ number_format($summary['root']) }}</strong></span>
        </div>

        <form method="GET" action="{{ route('departments.index') }}" class="filters" style="margin-bottom: 12px;">
            <input type="text" name="q" value="{{ $filters['q'] }}" placeholder="Cari code atau nama department...">
            <select name="per_page">
                @foreach ([10,25,50,100,250] as $size)
                    <option value="{{ $size }}" @selected((int) ($filters['per_page'] ?? 25) === $size)>{{ $size }} rows</option>
                @endforeach
            </select>
            <button type="submit" class="primary">Filter</button>
            <a href="{{ route('departments.index') }}" class="pill-link secondary">Reset</a>
            <a href="{{ route('departments.export.xlsx') }}" class="pill-link primary">Export to XLSX</a>
            <a href="{{ route('departments.create') }}" class="pill-link primary" style="background: linear-gradient(135deg, var(--green-deep), var(--green)); color: #fffaf2;">
                + Add Department
            </a>
        </form>

        <div style="display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; flex-wrap:wrap;">
            <h3 style="margin:0;">Department List</h3>
            <span class="department-list-meta">
                Menampilkan {{ $departments->firstItem() ?? 0 }}-{{ $departments->lastItem() ?? 0 }} dari {{ $departments->total() }} department
            </span>
        </div>
        <div data-datatable data-datatable-server="1">
        <div class="table-scroll">
        <table>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Code</th>
                    <th>Name</th>
                    <th>Default</th>
                    <th>Company</th>
                    <th>Parent</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($departments as $department)
                    <tr>
                        <td>{{ $department->id }}</td>
                        <td>{{ $department->dept_code }}</td>
                        <td>{{ $department->dept_name }}</td>
                        <td>{{ (int) $department->is_default === 1 ? 'Yes' : 'No' }}</td>
                        <td>{{ $department->company_id }}</td>
                        <td>{{ $department->parent_dept_id ?: '-' }}</td>
                        <td>
                            <a href="{{ route('departments.edit', $department) }}" class="btn btn-primary btn-sm" title="Edit department">
                                <i class="fas fa-pen"></i> Edit
                            </a>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="7" class="muted">Belum ada data department.</td></tr>
                @endforelse
            </tbody>
        </table>
        </div>
        </div>
        <div style="margin-top: 16px; display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;">
            <div class="muted" style="font-size:13px;">
                Menampilkan {{ $departments->firstItem() ?? 0 }}-{{ $departments->lastItem() ?? 0 }} dari {{ $departments->total() }} department
            </div>
            {{ $departments->onEachSide(1)->links() }}
        </div>
    </section>
@endsection