@extends('layout.dashboard_layout')

@section('content')
    <div class="pw-container">

        {{-- ── Flash Messages ── --}}
        @if (session('success'))
            <div class="pw-alert pw-alert-success">
                <i class="bi bi-check-circle-fill"></i>
                {{ session('success') }}
            </div>
        @endif

        @if (session('error'))
            <div class="pw-alert pw-alert-danger">
                <i class="bi bi-x-circle-fill"></i>
                {{ session('error') }}
            </div>
        @endif

        {{-- ── Header ── --}}
        <div class="pw-header">
            <div class="pw-header-left">
                <h4>Data User</h4>
                <p>Kelola akun pengguna pada sistem</p>
            </div>

            <div class="pw-header-right">
                <a href="{{ route('users.create') }}" class="pw-btn pw-btn-primary">
                    <i class="bi bi-plus-lg"></i> Tambah
                </a>
            </div>
        </div>

        {{-- ── Table Card ── --}}
        <div class="pw-card">

            <div style="overflow-x:auto">
                <table id="usersTable" class="table w-100">

                    <thead>
                        <tr>
                            <th width="50">No</th>
                            <th>Nama</th>
                            <th>Username</th>
                            <th>AFD</th>
                            <th>Role</th>
                            <th width="120" class="text-center">Aksi</th>
                        </tr>
                    </thead>

                    <tbody>

                        @foreach ($users as $user)
                            <tr>

                                <td></td>

                                <td>
                                    <div class="td-name-wrap">

                                        <span class="td-avatar">
                                            {{ strtoupper(substr($user->name, 0, 2)) }}
                                        </span>

                                        <span class="td-name">
                                            {{ $user->name }}
                                        </span>

                                    </div>
                                </td>

                                <td>
                                    <span class="pw-badge badge-code">
                                        {{ $user->username }}
                                    </span>
                                </td>

                                <td>
                                    @if ($user->afd)
                                        <span class="pw-badge badge-afd">
                                            {{ $user->afd }}
                                        </span>
                                    @else
                                        <span class="text-muted">-</span>
                                    @endif
                                </td>

                                <td>
                                    @foreach ($user->roles as $role)
                                        <span class="pw-badge badge-afd">
                                            {{ ucfirst($role->name) }}
                                        </span>
                                    @endforeach
                                </td>

                                <td>
                                    <div class="td-actions">

                                        <a href="{{ route('users.edit', $user->id) }}" class="act-btn act-edit"
                                            title="Edit {{ $user->name }}">

                                            <i class="bi bi-pencil"></i>
                                        </a>

                                        <form action="{{ route('users.destroy', $user->id) }}" method="POST"
                                            class="d-inline delete-form">

                                            @csrf
                                            @method('DELETE')

                                            <button type="submit" class="act-btn act-del"
                                                title="Hapus {{ $user->name }}">

                                                <i class="bi bi-trash"></i>
                                            </button>

                                        </form>

                                    </div>
                                </td>

                            </tr>
                        @endforeach

                    </tbody>

                </table>
            </div>

        </div>

    </div>
@endsection


@push('scripts')
    <script>
        $(document).ready(function() {

            /* ── Init DataTable ── */
            let table = $('#usersTable').DataTable({
                processing: true,
                responsive: true,
                autoWidth: false,
                pageLength: 10,
                lengthMenu: [10, 25, 50, 100],
                language: {
                    lengthMenu: "Tampilkan _MENU_ data",
                    search: "",
                    searchPlaceholder: "Cari nama atau username...",
                    info: "Menampilkan _START_–_END_ dari _TOTAL_ data",
                    infoEmpty: "Tidak ada data",
                    zeroRecords: "Data tidak ditemukan",
                    paginate: {
                        previous: "‹",
                        next: "›"
                    }
                },

                columnDefs: [{
                    targets: 0,
                    searchable: false,
                    orderable: false
                }],

                order: [
                    [1, 'asc']
                ],

                dom: '<"pw-toolbar"lf>' +
                    't' +
                    '<"pw-footer"ip>',
            });

            /* ── Auto numbering ── */
            table.on('draw.dt', function() {

                let info = table.page.info();

                table.column(0, {
                    page: 'current'
                }).nodes().each(function(cell, i) {

                    cell.innerHTML = i + 1 + info.start;

                });

            }).draw();

            /* ── Delete confirmation ── */
            $(document).on('submit', '.delete-form', function(e) {

                e.preventDefault();

                const form = this;

                Swal.fire({
                    title: 'Hapus data ini?',
                    text: 'Data yang dihapus tidak dapat dikembalikan.',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#DC2626',
                    cancelButtonColor: '#6B7280',
                    confirmButtonText: '<i class="bi bi-trash me-1"></i> Ya, Hapus',
                    cancelButtonText: 'Batal',
                    reverseButtons: true,
                    focusCancel: true,
                    customClass: {
                        popup: 'swal-popup-custom',
                        confirmButton: 'swal-confirm-custom',
                        cancelButton: 'swal-cancel-custom',
                    }

                }).then(result => {

                    if (result.isConfirmed) {
                        form.submit();
                    }

                });

            });

        });
    </script>

    <style>
        .swal-popup-custom {
            border-radius: 14px !important;
            font-family: 'Plus Jakarta Sans', sans-serif !important;
        }

        .swal-confirm-custom,
        .swal-cancel-custom {
            border-radius: 8px !important;
            font-size: 0.8125rem !important;
            padding: 8px 18px !important;
            font-family: 'Plus Jakarta Sans', sans-serif !important;
        }
    </style>
@endpush