@extends('layouts.app')

@section('content')
<style>
    .warning-row {
        background-color: #fff3cd !important;
        border-left: 4px solid #ffc107;
    }

    .warning-row:hover {
        background-color: #ffeaa7 !important;
    }

    .badge.red {
        background-color: #f44336 !important;
        color: white !important;
        padding: 4px 8px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: bold;
    }
</style>

<div class="row">
    <div class="col s12">
        <div class="card">
            <div class="card-content">
                <div class="d-flex justify-content-between align-items-center">
                    <span class="card-title">Daftar Pengguna</span>
                    @can('create')
                    <a href="{{ route('pengguna.create') }}" class="btn waves-effect waves-light indigo right">
                        <i class="mdi-content-add"></i> Tambah Pengguna
                    </a>
                    @endcan
                </div>

                @if (session('success'))
                    <div id="card-alert" class="card green" style="position: fixed; top: 20px; right: 20px; z-index: 1000; min-width: 300px;">
                        <div class="card-content white-text">
                            <p><i class="mdi-navigation-check"></i> {{ session('success') }}</p>
                        </div>
                        <button type="button" class="close white-text" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                    </div>
                @endif

                @if($users->whereNull('role_id')->count() > 0)
                    <div class="card orange lighten-4">
                        <div class="card-content orange-text text-darken-4">
                            <p><i class="mdi-alert-warning"></i>
                                <strong>Peringatan:</strong>
                                Ada {{ $users->whereNull('role_id')->count() }} pengguna yang belum memiliki role.
                                Silakan edit pengguna tersebut untuk menambahkan role yang sesuai.
                            </p>
                        </div>
                    </div>
                @endif

                <table class="centered striped responsive-table">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th class="left">Nama</th>
                            <th>Email</th>
                            <th>Role</th>
                            @canany(['update', 'delete'])
                            <th>Aksi</th>
                            @endcanany
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($users as $user)
                            <tr class="{{ !$user->role_id ? 'warning-row' : '' }}">
                                <td>{{ ($users->currentPage() - 1) * $users->perPage() + $loop->iteration }}</td>
                                <td class="left">{{ $user->name }}</td>
                                <td>{{ $user->email }}</td>
                                <td>
                                    @if($user->role_id)
                                        {{ $user->role->name }}
                                    @else
                                        <div class="chip red lighten-1 white-text">
                                            Tidak ada role
                                        </div>
                                    @endif
                                </td>
                                @canany(['update', 'delete'])
                                <td>
                                    @can('update')
                                    <a href="{{ route('pengguna.edit', $user->id) }}" class="btn-floating btn-flat waves-effect waves-light amber accent-2 white-text tooltipped" data-position="top" data-delay="50" data-tooltip="Edit"><i class="mdi-editor-mode-edit"></i></a>
                                    @endcan
                                    @can('update')
                                    <a href="{{ route('pengguna.reset-password', $user->id) }}" class="btn-floating btn-flat waves-effect waves-light blue accent-2 white-text tooltipped reset-password-btn" data-position="top" data-delay="50" data-tooltip="Reset Password"><i class="mdi-action-lock"></i></a>
                                    @endcan
                                    @can('delete')
                                    <a href="{{ route('pengguna.destroy', $user->id) }}" class="btn-floating btn-flat waves-effect waves-light red accent-2 white-text tooltipped delete-btn" data-position="top" data-delay="50" data-tooltip="Hapus"><i class="mdi-action-delete"></i></a>
                                    @endcan
                                </td>
                                @endcanany
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="center-align">Tidak ada data pengguna</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>

                <div class="center-align mt-3">
                    {{ $users->links() }}
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const deleteButtons = document.querySelectorAll('.delete-btn');
        const resetPasswordButtons = document.querySelectorAll('.reset-password-btn');

        // Handle delete buttons
        deleteButtons.forEach(button => {
            button.addEventListener('click', function(e) {
                e.preventDefault();
                const href = this.getAttribute('href');

                swal({
                    title: "Apakah Anda yakin?",
                    text: "Data pengguna akan dihapus secara permanen!",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "Ya, hapus!",
                    cancelButtonText: "Batal",
                    closeOnConfirm: false,
                    closeOnCancel: false
                }, function(isConfirm) {
                    if (isConfirm) {
                        const form = document.createElement('form');
                        form.method = 'POST';
                        form.action = href;

                        const csrfToken = document.createElement('input');
                        csrfToken.type = 'hidden';
                        csrfToken.name = '_token';
                        csrfToken.value = '{{ csrf_token() }}';

                        const methodField = document.createElement('input');
                        methodField.type = 'hidden';
                        methodField.name = '_method';
                        methodField.value = 'DELETE';

                        form.appendChild(csrfToken);
                        form.appendChild(methodField);
                        document.body.appendChild(form);
                        form.submit();
                    } else {
                        swal("Dibatalkan", "Data pengguna tidak dihapus", "error");
                    }
                });
            });
        });

        // Handle reset password buttons
        resetPasswordButtons.forEach(button => {
            button.addEventListener('click', function(e) {
                e.preventDefault();
                const href = this.getAttribute('href');

                swal({
                    title: "Reset Password?",
                    text: "Password akan direset menjadi '12345678'",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#2196F3",
                    confirmButtonText: "Ya, reset password!",
                    cancelButtonText: "Batal",
                    closeOnConfirm: false,
                    closeOnCancel: false
                }, function(isConfirm) {
                    if (isConfirm) {
                        const form = document.createElement('form');
                        form.method = 'POST';
                        form.action = href;

                        const csrfToken = document.createElement('input');
                        csrfToken.type = 'hidden';
                        csrfToken.name = '_token';
                        csrfToken.value = '{{ csrf_token() }}';

                        form.appendChild(csrfToken);
                        document.body.appendChild(form);
                        form.submit();
                    } else {
                        swal("Dibatalkan", "Password tidak direset", "error");
                    }
                });
            });
        });
    });
</script>
@endpush