@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                {{-- Panduan & Aturan Penting --}}
                <div class="row mx-1 mb-3">
                    <div class="card shadow-sm">
                        <div class="card-body">
                            <h5 class="mb-3">Panduan & Aturan Penting</h5>

                            <div class="mb-3">
                                <h6 class="text-primary">
                                    <i class="fas fa-info-circle me-1"></i> Petunjuk Umum
                                </h6>
                                <ul class="mb-0">
                                    <li>Atasan Step 1 adalah <strong>atasan langsung</strong> Karyawan.</li>
                                    <li>Atasan Step 2 adalah <strong>Kepala Bagian</strong> Karyawan.</li>
                                    <li>Jika Karyawan hanya memiliki <strong>1 atasan</strong>, gunakan atasan tersebut
                                        sebagai <strong>Atasan Step 1</strong>.</li>
                                    <li>Jika Karyawan <strong>tidak memiliki atasan</strong>, menu ini dapat diabaikan.</li>
                                </ul>
                            </div>

                            <div>
                                <h6 class="text-warning">
                                    <i class="fas fa-circle me-1" style="font-size: 0.6rem; vertical-align: middle;"></i>
                                    Keterangan Tambahan
                                </h6>
                                <p class="mb-0 text-sm text-muted">
                                    Pengaturan atasan digunakan untuk menentukan alur persetujuan surat pada sistem.
                                    Pastikan data sesuai dengan kondisi struktural Karyawan saat ini.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Data Table --}}
                <div class="row mx-1">
                    <div class="card">
                        <div class="row">
                            <div class="card-header col-md-auto">
                                <h5 class="mb-0">List {{ $title_menu }}</h5>
                            </div>
                            <div class="col">
                                @include('components.alert')
                            </div>
                        </div>
                        <hr class="horizontal dark mt-0">
                        <div class="row px-4 py-2">
                            <div class="col-lg">
                                <!-- <div class="nav-wrapper d-flex flex-wrap gap-2">
                                    @if (array_intersect($users_rules ?? [], ['admins', 'shr123', 'hr1234']))
                                        <button class="btn btn-success mb-0" id="btn-sync-hierarchy"
                                            onclick="syncHrisData('{{ route('hris.sync.hierarchy') }}', 'Hierarki Karyawan')">
                                            <i class="fas fa-sync-alt me-1"></i><span class="font-weight-bold">Sync dari HRIS</span>
                                        </button>
                                    @endif
                                </div> -->
                            </div>
                        </div>
                        <div class="row px-4 py-2">
                            <div class="col-lg">
                                <div class="nav-wrapper">
                                    <span class="badge bg-info text-white px-3 py-2 d-inline-block w-100 text-start" style="white-space:normal;word-break:break-word;line-height:1.35;">
                                        <i class="fas fa-info-circle me-1"></i>
                                        Data hierarki dapat dikelola manual melalui menu ini, atau disinkronkan dari HRIS
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="row px-4 py-2">
                            <div class="table-responsive">
                                <table class="table display" id="list_{{ $dmenu }}">
                                    <thead class="thead-light" style="background-color: #00b7bd4f;">
                                        <tr>
                                            <th width="110">Action</th>
                                            <th>No</th>
                                            <th>NIK Karyawan</th>
                                            <th>Nama Karyawan</th>
                                            <th>Departemen</th>
                                            <th>NIK Atasan</th>
                                            <th>Nama Atasan</th>
                                            <th>Dept. Atasan</th>
                                            <th>Step</th>
                                            <th>Status</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($table_detail as $detail)
                                            <tr {{ $detail->isactive == '0' ? 'class=not style=background-color:#ffe9ed;' : '' }}>
                                                <td class="text-sm font-weight-normal">
                                                    <div class="btn-group">
                                                        <button class="btn btn-primary btn-sm mb-0 px-3" type="button"
                                                            title="View Data"
                                                            onclick="window.location='{{ url($url_menu . '/show/' . encrypt($detail->id)) }}'">
                                                            <i class="fas fa-eye"></i> View
                                                        </button>
                                                        <button type="button"
                                                            class="btn btn-sm btn-primary mb-0 px-3 dropdown-toggle dropdown-toggle-split"
                                                            data-bs-toggle="dropdown" aria-expanded="false">
                                                            <span class="visually-hidden">Toggle Dropdown</span>
                                                        </button>
                                                        <ul class="dropdown-menu">
                                                            @if ($authorize->edit == '1')
                                                                <li>
                                                                    <a class="dropdown-item"
                                                                        href="{{ url($url_menu . '/edit/' . encrypt($detail->id)) }}">
                                                                        <i class="fas fa-edit text-warning me-1"></i> Edit
                                                                    </a>
                                                                </li>
                                                            @endif

                                                            @if ($authorize->delete == '1')
                                                                <li>
                                                                    <form action="{{ url($url_menu . '/' . encrypt($detail->id)) }}"
                                                                        method="POST" id="delete-form-{{ $detail->id }}">
                                                                        @csrf
                                                                        @method('DELETE')
                                                                        <button type="button" class="dropdown-item text-danger"
                                                                            title="Hapus Data"
                                                                            onclick="confirmDelete('delete-form-{{ $detail->id }}')">
                                                                            <i class="fas fa-trash me-1"></i> Hapus
                                                                        </button>
                                                                    </form>
                                                                </li>
                                                            @endif

                                                            @if ($authorize->edit != '1' && $authorize->delete != '1')
                                                                <li><span class="dropdown-item-text text-muted">Tidak ada aksi</span></li>
                                                            @endif
                                                        </ul>
                                                    </div>
                                                </td>
                                                <td>{{ $loop->iteration }}</td>
                                                <td class="text-sm font-weight-bold text-dark">
                                                    {{ $detail->nik_karyawan ?? '-' }}</td>
                                                <td class="text-sm font-weight-normal">{{ $detail->nama_karyawan }}</td>
                                                <td class="text-sm font-weight-normal">{{ $detail->departemen_karyawan ?? '-' }}
                                                </td>
                                                <td class="text-sm font-weight-bold text-dark">{{ $detail->nik_atasan ?? '-' }}
                                                </td>
                                                <td class="text-sm font-weight-normal">{{ $detail->nama_atasan }}</td>
                                                <td class="text-sm font-weight-normal">{{ $detail->departemen_atasan ?? '-' }}
                                                </td>
                                                <td class="text-sm font-weight-normal">
                                                    <span
                                                        class="badge bg-{{ $detail->step == 1 ? 'primary' : ($detail->step == 2 ? 'warning text-dark' : 'secondary') }}">
                                                        Step {{ $detail->step }}
                                                    </span>
                                                </td>
                                                <td class="text-sm font-weight-normal">
                                                    @if ($detail->isactive == '1')
                                                        <span class="badge bg-success">Active</span>
                                                    @else
                                                        <span class="badge bg-danger">Non Active</span>
                                                    @endif
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        {{-- Note --}}
                        <div class="row px-4 pb-3">
                            <div class="col">
                                <span class="text-danger text-sm">
                                    Note : <span class="badge bg-danger opacity-50"
                                        style="width: 12px; height: 12px; padding: 0;"></span>
                                    Data not active
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        function confirmDelete(formId) {
            const form = document.getElementById(formId);
            if (!form) {
                return;
            }

            if (typeof Swal === 'undefined') {
                if (confirm('Yakin ingin menghapus data ini?')) {
                    form.submit();
                }
                return;
            }

            Swal.fire({
                title: 'Hapus Data?',
                text: 'Data yang dihapus tidak dapat dikembalikan.',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'Ya, Hapus',
                cancelButtonText: 'Batal',
                reverseButtons: true
            }).then(function(result) {
                if (result.isConfirmed) {
                    form.submit();
                }
            });
        }

        $(document).ready(function () {
            $('#list_{{ $dmenu }}').DataTable({
                "paging": true,
                "lengthChange": true,
                "searching": true,
                "ordering": true,
                "info": true,
                "autoWidth": false,
                "order": [[1, 'asc']]
            });
        });

        function syncHrisData(url, label) {
            if (typeof Swal === 'undefined') {
                if (confirm('Sync data ' + label + ' dari HRIS? Data lokal akan diperbarui.')) {
                    doSync(url, label);
                }
                return;
            }

            Swal.fire({
                title: 'Sync dari HRIS?',
                html: 'Data <strong>' + label + '</strong> lokal akan diperbarui dengan data dari HRIS.<br><small class="text-muted">Data hierarki akan di-replace sepenuhnya dari HRIS.</small>',
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#2dce89',
                cancelButtonColor: '#6c757d',
                confirmButtonText: '<i class="fas fa-sync-alt me-1"></i> Ya, Sync Sekarang',
                cancelButtonText: 'Batal',
                reverseButtons: true
            }).then(function(result) {
                if (result.isConfirmed) {
                    doSync(url, label);
                }
            });
        }

        function doSync(url, label) {
            if (typeof Swal !== 'undefined') {
                Swal.fire({
                    title: 'Sedang Sync...',
                    html: 'Mengambil data <strong>' + label + '</strong> dari HRIS...',
                    allowOutsideClick: false,
                    allowEscapeKey: false,
                    didOpen: function() {
                        Swal.showLoading();
                    }
                });
            }

            $.ajax({
                url: url,
                type: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                },
                success: function(response) {
                    if (typeof Swal !== 'undefined') {
                        var detail = '';
                        if (response.data) {
                            if (response.data.inserted !== undefined) {
                                detail += '<br>Data di-sync: <strong>' + response.data.inserted + '</strong>';
                            }
                            if (response.data.source_count !== undefined) {
                                detail += '<br>Total data HRIS: <strong>' + response.data.source_count + '</strong>';
                            }
                        }
                        Swal.fire({
                            title: 'Sync Berhasil!',
                            html: (response.message || 'Data berhasil disinkronkan.') + detail,
                            icon: 'success',
                            confirmButtonColor: '#2dce89'
                        }).then(function() {
                            location.reload();
                        });
                    } else {
                        alert('Sync berhasil!');
                        location.reload();
                    }
                },
                error: function(xhr) {
                    var msg = 'Sync gagal.';
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        msg = xhr.responseJSON.message;
                    }
                    if (typeof Swal !== 'undefined') {
                        Swal.fire({
                            title: 'Sync Gagal!',
                            text: msg,
                            icon: 'error',
                            confirmButtonColor: '#f5365c'
                        });
                    } else {
                        alert(msg);
                    }
                }
            });
        }
    </script>
@endsection