@extends('layouts.app')
@section('title', 'Laporan Pengguna')

@section('content')
<div class="page-header mb-4">
    <div class="d-flex justify-content-between align-items-center">
        <div>
            <h2>Laporan Pengguna</h2>
            <p>Lihat dan cetak laporan data pengguna sistem</p>
        </div>
        <a href="{{ route('admin.users') }}" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left me-1"></i> Kembali
        </a>
    </div>
</div>

<!-- Statistik -->
<div class="row g-3 mb-4">
    <div class="col-md-2 col-sm-4">
        <div class="stat-card-mini">
            <div class="stat-value">{{ $statistik['semua'] }}</div>
            <div class="stat-label">Total Pengguna</div>
        </div>
    </div>
    <div class="col-md-2 col-sm-4">
        <div class="stat-card-mini" style="border-left: 3px solid #1e3a5f;">
            <div class="stat-value">{{ $statistik['admin'] }}</div>
            <div class="stat-label">Admin</div>
        </div>
    </div>
    <div class="col-md-2 col-sm-4">
        <div class="stat-card-mini" style="border-left: 3px solid #6366f1;">
            <div class="stat-value">{{ $statistik['operator'] }}</div>
            <div class="stat-label">Operator</div>
        </div>
    </div>
    <div class="col-md-2 col-sm-4">
        <div class="stat-card-mini" style="border-left: 3px solid #059669;">
            <div class="stat-value">{{ $statistik['tpa'] }}</div>
            <div class="stat-label">TPA</div>
        </div>
    </div>
    <div class="col-md-2 col-sm-4">
        <div class="stat-card-mini" style="border-left: 3px solid #0891b2;">
            <div class="stat-value">{{ $statistik['tpt'] }}</div>
            <div class="stat-label">TPT</div>
        </div>
    </div>
    <div class="col-md-2 col-sm-4">
        <div class="stat-card-mini" style="border-left: 3px solid #8b5cf6;">
            <div class="stat-value">{{ $statistik['pemohon'] }}</div>
            <div class="stat-label">Pemohon</div>
        </div>
    </div>
</div>

<!-- Filter Form -->
<div class="content-card mb-4">
    <div class="card-header">
        <i class="bi bi-funnel-fill me-2"></i> Filter Laporan
    </div>
    <div class="card-body">
        <form method="GET" action="{{ route('admin.laporan_pengguna') }}" id="filterForm">
            <div class="row">
                <div class="col-md-3 mb-3">
                    <label class="form-label fw-bold">Role</label>
                    <select name="role" class="form-select" style="border-radius:10px;">
                        <option value="semua" {{ request('role') == 'semua' || !request('role') ? 'selected' : '' }}>Semua Role</option>
                        <option value="admin" {{ request('role') == 'admin' ? 'selected' : '' }}>Admin</option>
                        <option value="operator" {{ request('role') == 'operator' ? 'selected' : '' }}>Operator</option>
                        <option value="tpa" {{ request('role') == 'tpa' ? 'selected' : '' }}>TPA</option>
                        <option value="tpt" {{ request('role') == 'tpt' ? 'selected' : '' }}>TPT</option>
                        <option value="pemohon" {{ request('role') == 'pemohon' ? 'selected' : '' }}>Pemohon</option>
                    </select>
                </div>
                <div class="col-md-3 mb-3">
                    <label class="form-label fw-bold">Tanggal Mulai</label>
                    <input type="date" name="tanggal_mulai" class="form-control" value="{{ request('tanggal_mulai') }}" style="border-radius:10px;">
                </div>
                <div class="col-md-3 mb-3">
                    <label class="form-label fw-bold">Tanggal Selesai</label>
                    <input type="date" name="tanggal_selesai" class="form-control" value="{{ request('tanggal_selesai') }}" style="border-radius:10px;">
                </div>
                <div class="col-md-2 mb-3">
                    <label class="form-label fw-bold">Cari</label>
                    <input type="text" name="search" class="form-control" placeholder="Nama / Email..." value="{{ request('search') }}" style="border-radius:10px;">
                </div>
                <div class="col-md-1 mb-3 d-flex align-items-end">
                    <div class="d-flex gap-2 w-100">
                        <button type="submit" class="btn btn-primary w-100" style="border-radius:10px;">
                            <i class="bi bi-search"></i>
                        </button>
                        <a href="{{ route('admin.laporan_pengguna') }}" class="btn btn-outline-secondary" style="border-radius:10px;">
                            <i class="bi bi-arrow-clockwise"></i>
                        </a>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
{{-- DATA TANDA TANGAN ADMIN --}}
<div class="content-card mb-4">

    <div class="card-header">
        <i class="bi bi-pen me-2"></i>
        Data Tanda Tangan Admin
    </div>

    <div class="card-body">

        <form method="POST" action="{{ route('admin.laporan_pengguna.simpan-ttd') }}">
            @csrf

            <div class="row g-3 align-items-end">

                <div class="col-md-5">
                    <label class="form-label fw-semibold">
                        Nama Admin
                    </label>

                    <input
                        type="text"
                        name="nama_admin"
                        class="form-control"
                        value="{{ session('nama_admin', auth()->user()->name) }}"
                        placeholder="Masukkan nama admin"
                        maxlength="100"
                        required>
                </div>

                <div class="col-md-5">
                    <label class="form-label fw-semibold">
                        NIP Admin
                    </label>

                    <input
                        type="text"
                        name="nip_admin"
                        class="form-control"
                        value="{{ session('nip_admin', auth()->user()->nip ?? '') }}"
                        placeholder="Masukkan 18 digit NIP"
                        maxlength="18"
                        minlength="18"
                        pattern="[0-9]{18}"
                        inputmode="numeric"
                        oninput="this.value=this.value.replace(/[^0-9]/g,'').slice(0,18)"
                        required>

                    <small class="text-muted">
                        NIP harus terdiri dari 18 digit angka.
                    </small>
                </div>

                <div class="col-md-2">
                    <button type="submit" class="btn btn-primary w-100">
                        <i class="bi bi-save me-1"></i>
                        Simpan
                    </button>
                </div>

            </div>

        </form>

    </div>

</div>
<!-- Tabel Data & Tombol Cetak -->
<div class="content-card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <span><i class="bi bi-table me-2"></i> Data Pengguna ({{ $users->total() }})</span>
        <div class="d-flex gap-2">
            <a href="{{ route('admin.cetak_laporan_pengguna', request()->all()) }}" 
               target="_blank" 
               class="btn btn-accent btn-sm">
                <i class="bi bi-printer me-1"></i> Cetak PDF
            </a>
        </div>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-modern">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>Nama</th>
                        <th>Email</th>
                        <th>Telepon</th>
                        <th>Role</th>
                        <th>Terdaftar</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($users as $user)
                    <tr>
                        <td>{{ $loop->iteration }}</td>
                        <td><strong>{{ $user->name }}</strong></td>
                        <td>{{ $user->email }}</td>
                        <td>{{ $user->phone ?? '-' }}</td>
                        <td>
                            <span class="badge" style="background:
                                {{ $user->role === 'admin' ? '#1e3a5f' :
                                   ($user->role === 'operator' ? '#6366f1' :
                                   ($user->role === 'tpa' ? '#059669' :
                                   ($user->role === 'tpt' ? '#0891b2' : '#8b5cf6'))) }};
                                font-size:11px; padding: 4px 10px; border-radius:6px;">
                                {{ strtoupper($user->role) }}
                            </span>
                        </td>
                        <td>{{ $user->created_at->format('d/m/Y H:i') }}</td>
                        <td>
                            @if($user->id === auth()->id())
                                <span class="badge bg-success">Aktif (Anda)</span>
                            @else
                                <span class="badge bg-info">Aktif</span>
                            @endif
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7" class="text-center text-muted py-4">
                            <i class="bi bi-people" style="font-size: 32px;"></i>
                            <p class="mt-2">Tidak ada data pengguna</p>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
    <div class="card-footer">
        {{ $users->links() }}
    </div>
</div>

<style>
    .stat-card-mini {
        background: white;
        border-radius: 10px;
        padding: 15px 20px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        border-left: 3px solid #1e3a5f;
    }
    
    .stat-card-mini .stat-value {
        font-size: 24px;
        font-weight: 700;
        color: #1a1a2e;
        line-height: 1.2;
    }
    
    .stat-card-mini .stat-label {
        font-size: 12px;
        color: #666;
        margin-top: 2px;
    }
    
    .btn-accent {
        background: linear-gradient(135deg, #667eea, #764ba2);
        color: white;
        border: none;
        transition: all 0.3s ease;
    }
    
    .btn-accent:hover {
        transform: scale(1.05);
        color: white;
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    }
    
    .table-modern {
        margin-bottom: 0;
    }
    
    .table-modern th {
        background: #f8f9fa;
        border-bottom: 2px solid #dee2e6;
        font-weight: 600;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #666;
        padding: 12px 15px;
    }
    
    .table-modern td {
        vertical-align: middle;
        padding: 12px 15px;
        border-bottom: 1px solid #f0f0f0;
    }
    
    .table-modern tbody tr:hover {
        background: #f8f9fa;
    }
    
    .content-card .card-footer {
        background: #fafafa;
        border-top: 1px solid #f0f0f0;
        padding: 12px 20px;
    }
</style>
@endsection