@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <style>
        .status-badge {
            display: inline-flex !important;
            align-items: center !important;
            padding: 4px 10px !important;
            border-radius: 999px !important;
            font-size: 0.75rem !important;
            font-weight: 600 !important;
            text-transform: capitalize !important;
            line-height: 1.2 !important;
        }
        .status-pengadaan { background: rgba(245, 158, 11, 0.18) !important; color: #b45309 !important; }
        .status-revisi { background: rgba(251, 146, 60, 0.18) !important; color: #c2410c !important; }
        .status-pengerjaan { background: rgba(20, 184, 166, 0.18) !important; color: #0f766e !important; }
        .status-pending { background: rgba(59, 130, 246, 0.18) !important; color: #1e40af !important; }
        .kpi-card-link {
            display: block;
            height: 100%;
            color: inherit;
            text-decoration: none;
            transition: transform 0.15s ease, box-shadow 0.15s ease;
        }
        .kpi-card-link:hover {
            transform: translateY(-2px);
        }
        .kpi-card-link .card {
            height: 100%;
            cursor: pointer;
        }
    </style>
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-12">
                <div class="card mb-4">
                    <div class="card-body">
                        <div class="d-flex flex-column flex-lg-row align-items-start align-items-lg-center justify-content-between gap-3">
                            <div>
                                <h4 class="mb-0">Dashboard Petugas - {{ $user_role }}</h4>
                            </div>
                            <form method="GET" action="{{ url()->current() }}" class="d-flex flex-nowrap gap-2 align-items-center mb-0">
                                <select name="bulan" class="form-select form-select-sm" style="min-width: 110px;" onchange="this.form.submit()">
                                    @foreach ($month_names as $monthValue => $monthLabel)
                                        <option value="{{ $monthValue }}" {{ (string) $filter_month === (string) $monthValue ? 'selected' : '' }}>{{ $monthLabel }}</option>
                                    @endforeach
                                </select>
                                <select name="tahun" class="form-select form-select-sm" style="min-width: 86px;" onchange="this.form.submit()">
                                    @for ($year = now()->year - 2; $year <= now()->year + 1; $year++)
                                        <option value="{{ $year }}" {{ (string) $filter_year === (string) $year ? 'selected' : '' }}>{{ $year }}</option>
                                    @endfor
                                </select>
                            </form>
                        </div>
                        <p class="text-muted mb-0 mt-2">Menampilkan data periode {{ $selected_period_label }}</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Statistics Cards -->
        @php
            $totalTasksUrl = route('dashboard.petugas', ['bulan' => $filter_month, 'tahun' => $filter_year]);
            $dailyUrl = url('pekerjaan-daily');
            $periodicUrl = url('pekerjaan-periodic');
            $nonPeriodicUrl = url('pekerjaan-nonperiodic');
            $pendingVerificationUrl = url('pekerjaan-nonperiodic') . '?status=verifikasi';
        @endphp

        @php
            $visibleKpiCount = ($user_role === 'Office') ? 3 : 5; // Office: Total, Daily, Periodic
            $kpiColsClass = 'row row-cols-1 row-cols-md-2 row-cols-xl-' . $visibleKpiCount . ' g-3 mb-4';
        @endphp
        <div class="{{ $kpiColsClass }} align-items-stretch">
            <div class="col">
                <a href="{{ $totalTasksUrl }}" class="kpi-card-link" aria-label="Buka KPI Total Tugas">
                    <div class="card border-left-primary">
                        <div class="card-body">
                            <h6 class="text-xs text-uppercase mb-1">Total Tugas</h6>
                            <h3 class="mb-0">{{ $total_tasks }}</h3>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col">
                <a href="{{ $dailyUrl }}" class="kpi-card-link" aria-label="Buka KPI Daily">
                    <div class="card border-left-warning">
                        <div class="card-body">
                            <h6 class="text-xs text-uppercase mb-1">Daily</h6>
                            <h3 class="mb-0">{{ $daily_count ?? 0 }}</h3>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col">
                <a href="{{ $periodicUrl }}" class="kpi-card-link" aria-label="Buka KPI Periodic">
                    <div class="card border-left-info">
                        <div class="card-body">
                            <h6 class="text-xs text-uppercase mb-1">Periodic</h6>
                            <h3 class="mb-0">{{ $periodic_count }}</h3>
                        </div>
                    </div>
                </a>
            </div>
            @if ($user_role !== 'Office')
                <div class="col">
                    <a href="{{ $nonPeriodicUrl }}" class="kpi-card-link" aria-label="Buka KPI Non Periodic">
                        <div class="card border-left-secondary">
                            <div class="card-body">
                                <h6 class="text-xs text-uppercase mb-1">Non Periodic</h6>
                                <h3 class="mb-0">{{ $non_periodic_count }}</h3>
                            </div>
                        </div>
                    </a>
                </div>
            @endif
            @if ($user_role !== 'Office')
                <div class="col">
                    <a href="{{ $pendingVerificationUrl }}" class="kpi-card-link" aria-label="Buka KPI Pending Verifikasi">
                        <div class="card border-left-success">
                            <div class="card-body">
                                <h6 class="text-xs text-uppercase mb-1">Pending Verifikasi</h6>
                                <h3 class="mb-0">{{ $pending_verification }}</h3>
                            </div>
                        </div>
                    </a>
                </div>
            @endif
        </div>

        <!-- Pekerjaan Belum Selesai -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h6 class="mb-0">Daftar Pekerjaan Belum Selesai - {{ $selected_period_label }}</h6>
                    </div>
                    <div class="card-body">
                        @if ($total_tasks > 0)
                            <div class="table-responsive">
                                <table class="table align-items-center mb-0" id="petugas-unfinished-tasks-table">
                                    <thead>
                                        <tr>
                                            <th class="text-uppercase text-xs">Tanggal</th>
                                            <th class="text-uppercase text-xs">Jenis</th>
                                            <th class="text-uppercase text-xs">Pekerjaan</th>
                                            <th class="text-uppercase text-xs">Keterangan</th>
                                            <th class="text-uppercase text-xs">Status</th>
                                            <th class="text-uppercase text-xs">Aksi</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse ($non_periodic_tasks as $task)
                                            <tr>
                                                <td>
                                                    <small>{{ $task->created_at ? \Carbon\Carbon::parse($task->created_at)->format('d M Y') : '-' }}</small>
                                                </td>
                                                <td>
                                                    <span class="badge bg-secondary">Non Periodic</span>
                                                </td>
                                                <td>
                                                    <small>{{ $task->job_description ?? '-' }}</small>
                                                </td>
                                                <td>
                                                    <small>
                                                        {{ $task->area_name ?? '-' }}
                                                        @if (!empty($task->work_type))
                                                            | {{ ucfirst($task->work_type) }}
                                                        @endif
                                                    </small>
                                                </td>
                                                <td>
                                                        @php
                                                            $rawStatus = $task->request_status ?? $task->status ?? '';
                                                            $statusNormalized = strtolower(trim($rawStatus));
                                                            $badgeClass = 'status-badge status-' . ($statusNormalized ?: 'pending');
                                                            $statusLabel = $statusNormalized ? ucfirst($statusNormalized) : 'Pending';
                                                        @endphp
                                                        <span class="{{ $badgeClass }}" data-raw-status="{{ $rawStatus }}">{{ $statusLabel }}</span>
                                                </td>
                                                <td>
                                                    @if ($user_role === 'Office')
                                                        <span class="text-xs text-muted">Tidak tersedia</span>
                                                    @else
                                                        <a href="{{ url('pekerjaan-nonperiodic') }}" class="btn btn-sm btn-primary mb-0">
                                                            Buka Transaksi
                                                        </a>
                                                    @endif
                                                </td>
                                            </tr>
                                        @empty
                                        @endforelse

                                        @forelse ($periodic_items as $item)
                                            <tr>
                                                <td>
                                                    <small>{{ \Carbon\Carbon::parse($item->planned_date)->format('d M Y') }}</small>
                                                </td>
                                                <td>
                                                    <span class="badge bg-info">Periodic</span>
                                                </td>
                                                <td>
                                                    <small>{{ $item->job_description ?? '-' }}</small>
                                                </td>
                                                <td>
                                                    <small>
                                                        {{ $item->area_name ?? '-' }}
                                                        @if (!empty($item->periode))
                                                            | {{ ucfirst($item->periode) }}
                                                        @endif
                                                    </small>
                                                </td>
                                                <td>
                                                    <span class="badge bg-danger">Belum Realisasi</span>
                                                </td>
                                                <td>
                                                    <a href="{{ url('pekerjaan-periodic') }}" class="btn btn-sm btn-primary mb-0">
                                                        Buka Transaksi
                                                    </a>
                                                </td>
                                            </tr>
                                        @empty
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        @else
                            <div class="text-center text-muted py-5">
                                <i class="fas fa-check-circle fa-3x mb-3"></i>
                                <p>Tidak ada pekerjaan yang perlu diselesaikan.</p>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    <style>
        .border-left-primary {
            border-left: 4px solid #0d6efd !important;
        }
        .border-left-warning {
            border-left: 4px solid #ffc107 !important;
        }
        .border-left-info {
            border-left: 4px solid #0dcaf0 !important;
        }
        .border-left-secondary {
            border-left: 4px solid #6c757d !important;
        }
        .border-left-success {
            border-left: 4px solid #198754 !important;
        }
    </style>

    @push('js')
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                var tableSelector = '#petugas-unfinished-tasks-table';

                    if (window.jQuery && $.fn.DataTable && $(tableSelector).length && !$.fn.DataTable.isDataTable(tableSelector)) {
                        $(tableSelector).DataTable({
                            pageLength: 10,
                            lengthChange: true,
                            ordering: true,
                            searching: true,
                            info: true,
                            autoWidth: false,
                            language: {
                                search: 'Cari:',
                                paginate: {
                                    previous: 'Sebelumnya',
                                    next: 'Berikutnya'
                                },
                                emptyTable: 'Tidak ada pekerjaan yang perlu diselesaikan.'
                            }
                        });
                    }
            });
        </script>
    @endpush
@endsection