@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    @php
        $splStatusLabel = [
            'draft' => 'Draft',
            'pending_atasan' => 'Pending Atasan',
            'pending_hrd' => 'Pending HRD',
            'approved_atasan' => 'Approved Atasan',
            'approved_hrd' => 'Approved HRD',
            'rejected_atasan' => 'Rejected Atasan',
            'rejected_hrd' => 'Rejected HRD',
            'cancelled' => 'Cancelled',
        ];

        $splStatusClass = [
            'draft' => 'secondary',
            'pending_atasan' => 'warning text-white',
            'pending_hrd' => 'warning text-white',
            'approved_atasan' => 'success',
            'approved_hrd' => 'success',
            'rejected_atasan' => 'danger',
            'rejected_hrd' => 'danger',
            'cancelled' => 'dark',
        ];

        $dklStatusLabel = [
            'draft' => 'Draft',
            'pending_atasan' => 'Pending Atasan',
            'pending_personalia' => 'Pending Personalia',
            'approved_atasan' => 'Approved Atasan',
            'approved_personalia' => 'Approved Personalia',
            'rejected_atasan' => 'Rejected Atasan',
            'rejected_personalia' => 'Rejected Personalia',
        ];

        $dklStatusClass = [
            'draft' => 'secondary',
            'pending_atasan' => 'warning text-white',
            'pending_personalia' => 'warning text-white',
            'approved_atasan' => 'success',
            'approved_personalia' => 'success',
            'rejected_atasan' => 'danger',
            'rejected_personalia' => 'danger',
        ];
    @endphp

    <style>
        .dashboard-card-link {
            color: inherit;
            text-decoration: none;
            display: block;
        }

        .dashboard-card-link .card {
            transition: transform .15s ease, box-shadow .15s ease;
        }

        .dashboard-card-link:hover .card {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
        }
    </style>

    <div class="container-fluid py-4">
        <div class="row mb-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-body p-4">
                        <div class="d-flex flex-column flex-lg-row justify-content-between align-items-lg-center">
                            <div>
                                <h5 class="mb-1">Selamat datang, {{ $dashboard_user['nama'] ?? '-' }}</h5>
                                <p class="text-sm text-muted mb-2 mb-lg-0">
                                    Username: {{ $dashboard_user['username'] ?? '-' }}
                                    | NIK: {{ $dashboard_user['nik'] ?? '-' }}
                                    | Departemen: {{ $dashboard_user['departemen'] ?? '-' }}
                                </p>
                            </div>
                            <div class="text-lg-end d-flex flex-column flex-lg-row align-items-lg-center gap-2 mt-3 mt-lg-0">
                                @if (array_intersect(['admins', 'shr123', 'hr1234'], $dashboard_user['roles'] ?? []))
                                    <div>
                                        <button id="btn-sync-hris" class="btn btn-primary mb-0 text-white font-weight-bold">
                                            <i class="fas fa-sync-alt me-1"></i> Sync dari HRIS
                                        </button>
                                    </div>
                                @endif
                                <div>
                                    <span class="badge bg-info text-white">Role: {{ implode(', ', $dashboard_user['roles'] ?? []) }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-xl col-md-6 mb-4">
                <a href="{{ url($dashboard_links['spl_total'] ?? 'dashboard') }}" class="dashboard-card-link" title="Buka daftar SPL">
                    <div class="card h-100">
                        <div class="card-body p-3">
                            <p class="text-sm mb-1 text-uppercase font-weight-bold">{{ array_intersect($dashboard_user['roles'] ?? [], ['admins', 'shr123', 'hr1234']) ? 'Total SPL' : 'Total SPL Saya' }}</p>
                            <h4 class="font-weight-bolder mb-0">{{ $spl_stats['total'] ?? 0 }}</h4>
                        </div>
                    </div>
                </a>
            </div>

            <div class="col-xl col-md-6 mb-4">
                <a href="{{ url($dashboard_links['dkl_total'] ?? 'dashboard') }}" class="dashboard-card-link" title="Buka daftar DKL">
                    <div class="card h-100">
                        <div class="card-body p-3">
                            <p class="text-sm mb-1 text-uppercase font-weight-bold">{{ array_intersect($dashboard_user['roles'] ?? [], ['admins', 'shr123', 'hr1234']) ? 'Total DKL' : 'Total DKL Saya' }}</p>
                            <h4 class="font-weight-bolder mb-0">{{ $dkl_stats['total'] ?? 0 }}</h4>
                        </div>
                    </div>
                </a>
            </div>

            <div class="col-xl col-md-6 mb-4">
                <a href="{{ url($dashboard_links['pending_spl'] ?? 'dashboard') }}" class="dashboard-card-link" title="Buka SPL yang perlu aksi">
                    <div class="card h-100">
                        <div class="card-body p-3">
                            <p class="text-sm mb-1 text-uppercase font-weight-bold">Perlu Aksi SPL</p>
                            <h4 class="font-weight-bolder mb-0 text-warning">{{ $pending_action['spl'] ?? 0 }}</h4>
                        </div>
                    </div>
                </a>
            </div>

            <div class="col-xl col-md-6 mb-4">
                <a href="{{ url($dashboard_links['pending_dkl'] ?? 'dashboard') }}" class="dashboard-card-link" title="Buka DKL yang perlu aksi">
                    <div class="card h-100">
                        <div class="card-body p-3">
                            <p class="text-sm mb-1 text-uppercase font-weight-bold">Perlu Aksi DKL</p>
                            <h4 class="font-weight-bolder mb-0 text-warning">{{ $pending_action['dkl'] ?? 0 }}</h4>
                        </div>
                    </div>
                </a>
            </div>

        </div>

        <div class="row">
            <div class="col-lg-6 mb-4">
                <div class="card h-100">
                    <div class="card-header pb-0">
                        <h6 class="mb-0">Ringkasan Status SPL</h6>
                    </div>
                    <div class="card-body">
                        <div class="row text-center">
                            <div class="col-6 mb-3">
                                <span class="text-sm text-muted d-block">Approved</span>
                                <span class="badge bg-success">{{ $spl_stats['approved'] ?? 0 }}</span>
                            </div>
                            <div class="col-6 mb-3">
                                <span class="text-sm text-muted d-block">Rejected/Cancelled</span>
                                <span class="badge bg-danger">{{ $spl_stats['rejected'] ?? 0 }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-6 mb-4">
                <div class="card h-100">
                    <div class="card-header pb-0">
                        <h6 class="mb-0">Ringkasan Status DKL</h6>
                    </div>
                    <div class="card-body">
                        <div class="row text-center">
                        
                            <div class="col-6 mb-3">
                                <span class="text-sm text-muted d-block">Approved</span>
                                <span class="badge bg-success">{{ $dkl_stats['approved'] ?? 0 }}</span>
                            </div>
                            <div class="col-6 mb-3">
                                <span class="text-sm text-muted d-block">Rejected</span>
                                <span class="badge bg-danger">{{ $dkl_stats['rejected'] ?? 0 }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-6 mb-4">
                <div class="card h-100">
                    <div class="card-header pb-0">
                        <h6 class="mb-0">SPL Draft / Pending</h6>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive" style="max-height: 300px; overflow-y: auto;">
                            <table class="table align-items-center mb-0">
                                <thead>
                                    <tr>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">No SPL</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Tanggal</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($spl_draft_pending as $row)
                                        <tr>
                                            <td class="text-sm px-3">
                                                @if (!empty($spl_show_page) && $spl_show_page !== 'txhist')
                                                    <a href="{{ url($spl_show_page . '/show/' . encrypt($row->id)) }}" class="text-primary font-weight-bold">{{ $row->no_spl }}</a>
                                                @else
                                                    {{ $row->no_spl }}
                                                @endif
                                            </td>
                                            <td class="text-sm">{{ $row->tanggal_pengajuan ? \Carbon\Carbon::parse($row->tanggal_pengajuan)->format('d-m-Y') : '-' }}</td>
                                            <td class="text-sm">
                                                <span class="badge bg-{{ $splStatusClass[$row->status] ?? 'secondary' }}">{{ $splStatusLabel[$row->status] ?? $row->status }}</span>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="3" class="text-center text-muted py-3">Tidak ada SPL draft/pending.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-6 mb-4">
                <div class="card h-100">
                    <div class="card-header pb-0">
                        <h6 class="mb-0">DKL Pending</h6>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive" style="max-height: 300px; overflow-y: auto;">
                            <table class="table align-items-center mb-0">
                                <thead>
                                    <tr>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">No DKL</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Tanggal</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($dkl_pending as $row)
                                        <tr>
                                            <td class="text-sm px-3">
                                                <a href="{{ url(($dkl_show_page ?? 'txedkl') . '/show/' . encrypt($row->id)) }}" class="text-primary font-weight-bold">{{ $row->no_dkl }}</a>
                                            </td>
                                            <td class="text-sm">{{ $row->tanggal_dkl ? \Carbon\Carbon::parse($row->tanggal_dkl)->format('d-m-Y') : '-' }}</td>
                                            <td class="text-sm">
                                                <span class="badge bg-{{ $dklStatusClass[$row->status] ?? 'secondary' }}">{{ $dklStatusLabel[$row->status] ?? $row->status }}</span>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="3" class="text-center text-muted py-3">Tidak ada DKL pending.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-6 mb-4">
                <div class="card h-100">
                    <div class="card-header pb-0">
                        <h6 class="mb-0">5 SPL Terbaru</h6>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table align-items-center mb-0">
                                <thead>
                                    <tr>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">No SPL</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Tanggal</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($recent_spl as $row)
                                        <tr>
                                            <td class="text-sm px-3">{{ $row->no_spl }}</td>
                                            <td class="text-sm">{{ $row->tanggal_pengajuan ? \Carbon\Carbon::parse($row->tanggal_pengajuan)->format('d-m-Y') : '-' }}</td>
                                            <td class="text-sm">
                                                <span class="badge bg-{{ $splStatusClass[$row->status] ?? 'secondary' }}">{{ $splStatusLabel[$row->status] ?? $row->status }}</span>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="3" class="text-center text-muted py-3">Belum ada data SPL.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-6 mb-4">
                <div class="card h-100">
                    <div class="card-header pb-0">
                        <h6 class="mb-0">5 DKL Terbaru</h6>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table align-items-center mb-0">
                                <thead>
                                    <tr>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">No DKL</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Tanggal</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($recent_dkl as $row)
                                        <tr>
                                            <td class="text-sm px-3">{{ $row->no_dkl }}</td>
                                            <td class="text-sm">{{ $row->tanggal_dkl ? \Carbon\Carbon::parse($row->tanggal_dkl)->format('d-m-Y') : '-' }}</td>
                                            <td class="text-sm">
                                                <span class="badge bg-{{ $dklStatusClass[$row->status] ?? 'secondary' }}">{{ $dklStatusLabel[$row->status] ?? $row->status }}</span>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="3" class="text-center text-muted py-3">Belum ada data DKL.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@if (array_intersect(['admins', 'shr123', 'hr1234'], $dashboard_user['roles'] ?? []))
    @push('js')
    <script>
        $(document).ready(function() {
            $('#btn-sync-hris').on('click', function() {
                Swal.fire({
                    title: 'Konfirmasi Sync',
                    text: 'Apakah Anda yakin ingin mensinkronisasi semua data dari HRIS?',
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, Sync',
                    cancelButtonText: 'Batal',
                    confirmButtonColor: '#028284',
                    showLoaderOnConfirm: true,
                    preConfirm: () => {
                        return $.ajax({
                            url: "{{ route('hris.sync.all') }}",
                            method: "POST",
                            data: {
                                _token: "{{ csrf_token() }}"
                            }
                        }).then(response => {
                            if (response.success) {
                                return response.data;
                            } else {
                                Swal.showValidationMessage(`Sync Gagal: ${response.message}`);
                            }
                        }).catch(error => {
                            let msg = 'Terjadi kesalahan pada server';
                            if (error.responseJSON && error.responseJSON.message) {
                                msg = error.responseJSON.message;
                            }
                            Swal.showValidationMessage(`Sync Gagal: ${msg}`);
                        });
                    },
                    allowOutsideClick: () => !Swal.isLoading()
                }).then((result) => {
                    if (result.isConfirmed && result.value) {
                        let data = result.value;
                        let text = `
                            <div class="text-start">
                                <p><strong>Detail Sinkronisasi:</strong></p>
                                <ul style="list-style-type: none; padding-left: 0;">
                                    <li class="mb-2"><strong>1. Users:</strong>
                                        <ul class="ps-3 mt-1">
                                            <li>User Baru: <span class="badge bg-success">${data.users.inserted}</span></li>
                                            <li>User Diperbarui: <span class="badge bg-warning">${data.users.updated}</span></li>
                                            <li>User Dinonaktifkan: <span class="badge bg-danger">${data.users.deactivated}</span></li>
                                            <li>Gagal Diproses: <span class="badge bg-secondary">${data.users.failed}</span></li>
                                        </ul>
                                    </li>
                                    <li class="mb-2"><strong>2. Hierarki Karyawan:</strong>
                                        <ul class="ps-3 mt-1">
                                            <li>Data Disinkronkan: <span class="badge bg-success">${data.hierarki_karyawan.synced}</span></li>
                                        </ul>
                                    </li>
                                    <li class="mb-2"><strong>3. Link User Profile:</strong>
                                        <ul class="ps-3 mt-1">
                                            <li>Data Disinkronkan: <span class="badge bg-success">${data.link_user_profile.synced}</span></li>
                                        </ul>
                                    </li>
                                </ul>
                            </div>
                        `;
                        Swal.fire({
                            title: 'Sync Berhasil',
                            html: text,
                            icon: 'success',
                            confirmButtonColor: '#028284'
                        }).then(() => {
                            window.location.reload();
                        });
                    }
                });
            });
        });
    </script>
    @endpush
@endif