<x-app-layout>
@push('styles')
    <link rel="stylesheet" href="{{ asset('css/tugas.css') }}">
    <style>
        .pug-nav-tabs {
            display: flex; gap: 10px; margin-bottom: 24px; flex-wrap: wrap;
        }
        .pug-nav-item {
            padding: 12px 20px; border-radius: 12px; font-size: 13px; font-weight: 700;
            border: 1px solid var(--pug-border); color: var(--pug-t2);
            background: var(--pug-white); cursor: pointer; transition: all .2s; font-family: var(--pug-font);
            display: flex; align-items: center; gap: 8px; text-decoration: none;
            box-shadow: 0 1px 3px rgba(0,0,0,0.04);
        }
        .pug-nav-item i { font-size: 14px; opacity: 0.7; }
        .pug-nav-item:hover { border-color: var(--pug-green); color: var(--pug-green); background: var(--pug-green-l); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(26,122,74,0.1); }
        .pug-nav-item.active { border-color: var(--pug-green); color: var(--pug-green); background: var(--pug-green-l); box-shadow: 0 4px 12px rgba(26,122,74,0.15); }
        .pug-nav-item.active i { opacity: 1; }
    </style>
@endpush

<div class="pug-wrap">
    <div class="pug-inner">
        
        {{-- ── PAGE HEADER ── --}}
        <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:24px;">
            <div style="display:flex; align-items:center; gap:15px;">
                <div class="pug-icon-wrap" style="width: 54px; height: 54px; font-size: 22px;">
                    <i class="fas fa-money-check-alt"></i>
                </div>
                <div>
                    <h1 class="pug-page-title" style="font-size: 24px;">Laporan Penggajian</h1>
                    <p class="pug-page-sub">Rincian penggajian dan status pembayaran teknisi • {{ date('F Y') }}</p>
                </div>
            </div>
            <a href="{{ route('laporan.penggajian.export', request()->query()) }}" target="_blank" class="pug-btn-primary" style="text-decoration: none; background: linear-gradient(135deg, var(--pug-t1), #334155);">
                <i class="fas fa-print"></i> Cetak Laporan
            </a>
        </div>

        {{-- ── TAB NAVIGATION ── --}}
        <div class="pug-nav-tabs">
            <a href="{{ route('laporan.index') }}" class="pug-nav-item">
                <i class="fas fa-th-large"></i> Ringkasan
            </a>
            <a href="{{ route('laporan.kasbon') }}" class="pug-nav-item">
                <i class="fas fa-hand-holding-usd"></i> Kasbon
            </a>
            <a href="{{ route('laporan.absensi') }}" class="pug-nav-item">
                <i class="fas fa-calendar-check"></i> Kehadiran
            </a>
            <a href="{{ route('laporan.teknisi') }}" class="pug-nav-item">
                <i class="fas fa-users"></i> Performa Teknisi
            </a>
            <a href="{{ route('laporan.pekerjaan') }}" class="pug-nav-item">
                <i class="fas fa-tasks"></i> Pekerjaan
            </a>
            <a href="{{ route('laporan.penggajian') }}" class="pug-nav-item active">
                <i class="fas fa-money-check-alt"></i> Penggajian
            </a>
            <a href="{{ route('laporan.data_teknisi') }}" class="pug-nav-item">
                <i class="fas fa-id-card"></i> Data Teknisi
            </a>
        </div>

        {{-- ── STATS ── --}}
        <div class="pug-stats" style="grid-template-columns: repeat(3, 1fr);">
            <div class="pug-stat pug-stat-total">
                <div class="pug-stat-icon"><i class="fas fa-file-invoice-dollar"></i></div>
                <div class="pug-stat-label">TOTAL PENGGAJIAN</div>
                <div class="pug-stat-val">{{ $statsPenggajian['total'] ?? 0 }}</div>
                <div class="pug-page-sub">Keseluruhan data penggajian</div>
            </div>
            <div class="pug-stat pug-stat-selesai">
                <div class="pug-stat-icon"><i class="fas fa-check-circle"></i></div>
                <div class="pug-stat-label">LUNAS</div>
                <div class="pug-stat-val">{{ $statsPenggajian['lunas'] ?? 0 }}</div>
                <div class="pug-page-sub">Penggajian telah dibayar</div>
            </div>
            <div class="pug-stat pug-stat-batal">
                <div class="pug-stat-icon" style="background: var(--pug-rose-l); color: var(--pug-rose);"><i class="fas fa-times-circle"></i></div>
                <div class="pug-stat-label">BELUM DIBAYAR</div>
                <div class="pug-stat-val" style="color: var(--pug-rose);">{{ $statsPenggajian['belum'] ?? 0 }}</div>
                <div class="pug-page-sub">Menunggu pembayaran</div>
            </div>
        </div>

        {{-- ── TOOLBAR FILTER ── --}}
        <div class="pug-toolbar" style="margin-bottom: 24px;">
            <form method="GET" action="{{ route('laporan.penggajian') }}" class="pug-toolbar-form">
                
                <div class="pug-toolbar-item" style="flex: 1; min-width: 250px;">
                    <label class="pug-field-label">Tanggal</label>
                    <div class="pug-input-icon">
                        <i class="fas fa-calendar-alt"></i>
                        <input type="date" name="tanggal" class="pug-input" value="{{ request('tanggal') }}">
                    </div>
                </div>

                <div class="pug-toolbar-item" style="flex: 1; min-width: 150px;">
                    <label class="pug-field-label">Status Pembayaran</label>
                    <select name="status" class="pug-input">
                        <option value="">Semua Status</option>
                        <option value="sudah_bayar" {{ request('status') == 'sudah_bayar' ? 'selected' : '' }}>Sudah Bayar</option>
                        <option value="belum_bayar" {{ request('status') == 'belum_bayar' ? 'selected' : '' }}>Belum Bayar</option>
                    </select>
                </div>

                <div class="pug-toolbar-item" style="flex: 1; min-width: 180px;">
                    <label class="pug-field-label">Teknisi</label>
                    <div class="pug-input-icon">
                        <i class="fas fa-user-tie"></i>
                        <select name="id_teknisi" class="pug-input">
                            <option value="">Semua Teknisi</option>
                            @foreach($teknisis as $t)
                                <option value="{{ $t->id_teknisi }}" {{ request('id_teknisi') == $t->id_teknisi ? 'selected' : '' }}>{{ $t->nama }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="pug-toolbar-item item-btn d-flex align-items-end gap-2" style="flex: 0 0 auto;">
                    <button type="submit" class="pug-btn-primary" style="height: 44px; margin-bottom: 0;">
                        <i class="fas fa-filter"></i> Filter
                    </button>
                    @if(request()->hasAny(['tanggal', 'status', 'id_teknisi']))
                    <a href="{{ route('laporan.penggajian') }}" class="pug-reset-btn" style="height: 44px; text-decoration: none;">
                        <i class="fas fa-redo"></i> Reset
                    </a>
                    @endif
                </div>
            </form>
        </div>

        {{-- ── TABLE PANEL ── --}}
        <div class="pug-panel">
            <div class="pug-panel-head">
                <div class="pug-panel-head-left">
                    <i class="fas fa-list-ul" style="color:var(--pug-green);margin-right:8px;"></i>
                    Data Laporan Penggajian
                </div>
                <div class="pug-panel-head-right">
                    {{ $data->total() }} data ditemukan
                </div>
            </div>

            <div style="overflow-x:auto;">
                <table class="pug-table">
                    <thead>
                        <tr>
                            <th>Teknisi</th>
                            <th>Periode</th>
                            <th>Gaji Bersih</th>
                            <th>Status Pembayaran</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($data as $item)
                        <tr>
                            <td>
                                <div style="display:flex; align-items:center; gap:12px;">
                                    <div class="pug-av">{{ strtoupper(substr($item->nama_teknisi ?? '?', 0, 2)) }}</div>
                                    <div class="pug-av-name">{{ $item->nama_teknisi ?? '-' }}</div>
                                </div>
                            </td>
                            <td>
                                @php
                                    $bulan = [1=>'Januari',2=>'Februari',3=>'Maret',4=>'April',5=>'Mei',6=>'Juni',7=>'Juli',8=>'Agustus',9=>'September',10=>'Oktober',11=>'November',12=>'Desember'];
                                    $namaBulan = $bulan[(int)$item->periode_bulan] ?? '-';
                                @endphp
                                <div class="pug-date">{{ $namaBulan }} {{ $item->periode_tahun }}</div>
                            </td>
                            <td><div class="pug-money" style="font-weight: 700; color: var(--pug-green);">Rp {{ number_format($item->gaji_bersih, 0, ',', '.') }}</div></td>
                            <td>
                                <span class="pug-badge {{ $item->status_pembayaran == 'sudah_bayar' ? 'pug-badge-green' : 'pug-badge-rose' }}">
                                    <i class="fas {{ $item->status_pembayaran == 'sudah_bayar' ? 'fa-check-circle' : 'fa-times-circle' }}"></i> {{ strtoupper(str_replace('_', ' ', $item->status_pembayaran)) }}
                                </span>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="4">
                                <div class="pug-empty">
                                    <div class="pug-empty-icon"><i class="fas fa-inbox"></i></div>
                                    <div class="pug-empty-title">Tidak ada data penggajian</div>
                                    <div class="pug-empty-sub">Ubah filter pencarian untuk melihat data lain.</div>
                                </div>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            @if($data->hasPages())
            <div class="pug-pag">
                {{ $data->links() }}
            </div>
            @endif
        </div>

    </div>
</div>
</x-app-layout>
