@extends('layout.app')
@section('content')
    <div class="content">
        <div class="animated fadeIn">
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <strong class="card-title">Data User</strong>
                        </div>
                        <div class="card-body">
                            <p class="card-text mb-4">
                                Data pengguna yang terdaftar dalam sistem:
                            </p>
                            <div class="table-responsive">
                                <div class="table-wrapper">
                                    <table class="table table-striped table-bordered">
                                        <thead>
                                            <tr>
                                                <th>No</th>
                                                <th>Name</th>
                                                <th>Email</th>
                                                <th>Status</th>
                                                <th>Aksi</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($users as $index => $item)
                                                <tr>
                                                    <td>{{ $index + 1 }}</td>
                                                    <td>{{ $item->name }}</td>
                                                    <td>{{ $item->email }}</td>
                                                    <td>{{ $item->status }}</td>
                                                    <td>
                                                        <div class="button-group">
                                                            <button class="btn btn-warning btn-sm" data-toggle="modal" 
                                                                data-target="#updateModal" onclick="updateData({{ $item }})">
                                                                Edit
                                                            </button>
                                                            <button class="btn btn-danger btn-sm" data-toggle="modal"
                                                                data-target="#deleteModal" onclick="deleteData({{ $item->id }})">
                                                                Hapus
                                                            </button>
                                                        </div>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Edit -->
    <div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="updateModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="updateModalLabel">Edit User</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="formEdit" method="POST">
                        @csrf
                        <input type="hidden" name="_method" value="PUT">
                        <div class="form-group">
                            <label for="nama">Nama</label>
                            <input type="text" class="form-control" id="nama" name="nama" required>
                        </div>
                        <div class="form-group">
                            <label for="email">Email</label>
                            <input type="email" class="form-control" id="email" name="email" required>
                        </div>
                        <div class="form-group">
                            <label for="status">Status</label>
                            <input type="text" class="form-control" id="status" name="status" required>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                    <button type="button" class="btn btn-primary" onclick="document.getElementById('formEdit').submit();">Simpan</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Hapus -->
    <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteModalLabel">Hapus User</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    Apakah Anda yakin ingin menghapus user ini?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                    <button type="button" class="btn btn-danger" onclick="deleteDataConfirmed()">Hapus</button>
                </div>
            </div>
        </div>
    </div>

<style>
/* Styling untuk tabel */
.table-responsive {
    margin: 0;
    border: 1px solid #dee2e6;
    border-radius: 4px;
}

.table-wrapper {
    position: relative;
}

.table {
    margin-bottom: 0;
}

.table th {
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    white-space: nowrap;
}

.table td {
    vertical-align: middle;
}

/* Button group styling */
.button-group {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    white-space: nowrap;
}

/* Card styling */
.card {
    border: none;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.card-header {
    background-color: #fff;
    border-bottom: 1px solid #dee2e6;
    padding: 1rem;
}

.card-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

/* Modal styling */
.modal-content {
    border: none;
    border-radius: 10px;
}

.modal-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

.modal-footer {
    border-top: 1px solid #dee2e6;
}

/* Responsive styling */
@media (max-width: 768px) {
    .table {
        font-size: 14px;
    }

    .table td, .table th {
        padding: 8px;
    }

    .button-group {
        flex-direction: column;
        gap: 4px;
    }

    .btn-sm {
        width: 100%;
    }

    /* Indikator scroll horizontal */
    .table-wrapper::after {
        content: '⟷ Geser untuk melihat lebih banyak';
        display: block;
        text-align: center;
        font-size: 12px;
        padding: 5px;
        color: #666;
        background: #f8f9fa;
        border-top: 1px solid #dee2e6;
    }
}
</style>

<script>
    function updateData(data) {
        console.log(data);
        const form = document.getElementById('formEdit');
        form.action = "{{ route('users.update', ':id') }}".replace(':id', data.id);
        form.querySelector('#nama').value = data.name;
        form.querySelector('#email').value = data.email;
        form.querySelector('#status').value = data.status;
    }

    function deleteData(id) {
        // Store the ID for use in deleteDataConfirmed
        window.deleteUserId = id;
    }

    function deleteDataConfirmed() {
        if (window.deleteUserId) {
            // Buat form untuk delete request
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = "{{ route('users.destroy', ':id') }}".replace(':id', window.deleteUserId);
            
            // Tambahkan CSRF token
            const csrfToken = document.createElement('input');
            csrfToken.type = 'hidden';
            csrfToken.name = '_token';
            csrfToken.value = '{{ csrf_token() }}';
            form.appendChild(csrfToken);
            
            // Tambahkan method DELETE
            const methodField = document.createElement('input');
            methodField.type = 'hidden';
            methodField.name = '_method';
            methodField.value = 'DELETE';
            form.appendChild(methodField);
            
            // Tambahkan form ke document dan submit
            document.body.appendChild(form);
            form.submit();
        }
    }
</script>
@endsection