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

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

    {{-- Sweet Alert handlers untuk session error/success --}}
    @if (session('error'))
        <script>
            document.addEventListener("DOMContentLoaded", function () {
                Swal.fire({
                    icon: 'error',
                    title: 'Gagal',
                    text: @json(session('error')),
                    confirmButtonColor: '#028284',
                    confirmButtonText: 'OK'
                });
            });
        </script>
    @endif
    @if (session('success'))
        <script>
            document.addEventListener("DOMContentLoaded", function () {
                Swal.fire({
                    icon: 'success',
                    title: 'Berhasil',
                    text: @json(session('success')),
                    confirmButtonColor: '#028284',
                    confirmButtonText: 'OK'
                });
            });
        </script>
    @endif

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="card mb-4">
                    <div class="card-header col-md-auto">
                        <h5 class="mb-0">List {{ $title_menu }}</h5>
                    </div>
                    <div class="col">
                        @include('components.alert')
                    </div>
                    <hr class="horizontal dark mt-0">
                    <div class="row px-4 py-2">
                        <div class="col-lg">
                            <div class="nav-wrapper">
                                @if ($authorize->add == '1')
                                    <button class="btn btn-primary mb-0"
                                        onclick="window.location='{{ URL::to($url_menu . '/add') }}'">
                                        <i class="fas fa-plus me-1"></i>
                                        <span class="font-weight-bold">Tambah</span>
                                    </button>
                                @endif
                            </div>
                        </div>
                    </div>
                    <div class="row px-4 py-2">
                        <div class="table-responsive" style="overflow: visible !important;">
                            <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</th>
                                        <th>Nama</th>
                                        <th>Departemen</th>
                                        <th width="160">Preview TTD</th>
                                        <th width="140">Status Karyawan</th>
                                        <th width="180">Tanggal Dibuat</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($table_detail as $detail)
                                        @php
                                            $encId = encrypt($detail->id);
                                            $rowNum = $table_detail->firstItem() + $loop->index;
                                        @endphp
                                        <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::to($url_menu . '/show/' . $encId) }}'">
                                                        <i class="fas fa-eye"> </i><span class="font-weight-bold"> View</span>
                                                    </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')
                                                            @if ($detail->isactive == 1)
                                                                <li>
                                                                    <hr class="dropdown-divider">
                                                                </li>
                                                                <button type="button"
                                                                    class="btn btn-sm btn-warning mx-2 mb-0 w-90"
                                                                    title="Edit Data"
                                                                    onclick="window.location='{{ URL::to($url_menu . '/edit/' . $encId) }}'">
                                                                    <i class="fas fa-edit"></i><span
                                                                        class="font-weight-bold">
                                                                        Edit</span>
                                                                </button>
                                                            @endif
                                                        @endif
                                                        @if ($authorize->delete == '1')
                                                            <form action="{{ URL::to($url_menu . '/' . $encId) }}"
                                                                method="POST" style="display: inline">
                                                                @csrf
                                                                @method('DELETE')
                                                                <li>
                                                                    <hr class="dropdown-divider">
                                                                </li>
                                                                <button type="submit"
                                                                    class="btn btn-sm btn-{{ $detail->isactive == '0' ? 'success' : 'danger' }} mx-2 mb-0 w-90"
                                                                    title="Delete Data"
                                                                    onclick="return deleteData(event, '{{ $detail->nama_karyawan ?? $detail->firstname }} (NIK: {{ $detail->nik ?? $detail->username }})','{{ $detail->isactive == '0' ? 'Aktifkan' : 'Hapus' }}')">
                                                                    <i class="fas fa-trash"></i><span
                                                                        class="font-weight-bold">
                                                                        Delete</span>
                                                                </button>
                                                            </form>
                                                        @endif
                                                        <li>
                                                            <hr class="dropdown-divider">
                                                        </li>
                                                    </ul>
                                                </div>
                                            </td>
                                            <td class="text-sm">{{ $rowNum }}</td>
                                            <td class="text-sm font-weight-bold">{{ $detail->nik ?? $detail->username }}</td>
                                            <td class="text-sm">{{ $detail->nama_karyawan ?? $detail->firstname }}</td>
                                            <td class="text-sm">{{ $detail->departemen ?? '-' }}</td>
                                            <td class="text-sm text-center">
                                                @if ($detail->signature)
                                                    <img src="{{ $detail->signature }}" alt="TTD {{ $detail->nama_karyawan ?? $detail->firstname }}"
                                                        style="max-height: 50px; max-width: 140px; background: white; border: 1px solid #dee2e6; border-radius: 4px; padding: 2px; cursor: pointer;"
                                                        data-bs-toggle="modal"
                                                        data-bs-target="#ttdModal{{ $detail->id }}">
                                                @else
                                                    <span class="text-danger">N/A</span>
                                                @endif
                                            </td>
                                            <td class="text-sm">
                                                @if ($detail->isactive == '1')
                                                    <span class="badge bg-success px-3 py-2">Aktif</span>
                                                @else
                                                    <span class="badge bg-secondary px-3 py-2">Nonaktif</span>
                                                @endif
                                            </td>
                                            <td class="text-sm">
                                                {{ $format->TanggalIndonesia($detail->updated_at) }}
                                            </td>
                                        </tr>

                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                        {{-- Modal preview tanda tangan (besar) ditaruh di luar tabel agar HTML valid bagi DataTables --}}
                        @foreach ($table_detail as $detail)
                            @if ($detail->signature)
                                <div class="modal fade" id="ttdModal{{ $detail->id }}" tabindex="-1"
                                    aria-hidden="true">
                                    <div class="modal-dialog modal-dialog-centered">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title">Tanda Tangan {{ $detail->nama_karyawan ?? $detail->firstname }}</h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                    aria-label="Close"></button>
                                            </div>
                                            <div class="modal-body text-center">
                                                <img src="{{ $detail->signature }}" alt="TTD {{ $detail->nama_karyawan ?? $detail->firstname }}"
                                                    style="max-width: 100%; height: auto; border: 1px solid #dee2e6; border-radius: 8px; padding: 8px; background: white;">
                                                <p class="mt-3 mb-0 text-muted small">
                                                    NIK: {{ $detail->nik ?? $detail->username }} &middot; Diperbarui: {{ $format->TanggalIndonesia($detail->updated_at) }}
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endif
                        @endforeach
                    </div>

                    {{-- Pagination --}}
                    <div class="row px-4 py-3 d-flex justify-content-between align-items-center">
                        <div class="col-auto">
                            <small class="text-muted">
                                Menampilkan {{ $table_detail->count() }} dari {{ $table_detail->total() }} data
                            </small>
                        </div>
                        <div class="col-auto">
                            {{ $table_detail->links() }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        $(document).ready(function () {
            // Matikan dialog alert error bawaan DataTables
            $.fn.dataTable.ext.errMode = 'none';

            // DataTables untuk search/sort (pagination server-side, search & sort disable untuk hindari konflik)
            $('#list_{{ $dmenu }}').DataTable({
                "language": {
                    "search": "Cari :",
                    "lengthMenu": "Tampilkan _MENU_ baris",
                    "zeroRecords": "Maaf - Data tidak ada",
                    "info": "Data _START_ - _END_ dari _TOTAL_",
                    "infoEmpty": "Tidak ada data",
                    "infoFiltered": "(pencarian dari _MAX_ data)"
                },
                paging: false,
                searching: false,
                info: false,
                ordering: true,
                responsive: true,
                dom: 'frtip'
            });
        });

        // Konfirmasi hapus (toggle status aktif/nonaktif) via SweetAlert
        function deleteData(event, name, msg) {
            event.preventDefault();
            Swal.fire({
                title: 'Konfirmasi',
                text: 'Apakah Anda Yakin ' + msg + ' Data ' + name + ' ini?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Ya, ' + msg,
                cancelButtonText: 'Batal',
                confirmButtonColor: '#028284'
            }).then((result) => {
                if (result.isConfirmed) {
                    event.target.closest('form').submit();
                }
            });
        }
    </script>
@endpush