@extends('layouts.app')

@section('content')
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h4 class="mb-0" style="font-weight: 700; color: #222;">Data Petugas Kebersihan</h4>
        <button type="button" class="btn btn-primary-custom" id="btnTambahModal" style="padding: 8px 16px; border-radius: 8px;" data-bs-toggle="modal" data-bs-target="#tambahPetugasModal">
            <i class="fa-solid fa-plus me-1"></i> Tambah Petugas
        </button>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover align-middle" id="usersTable">
                <thead class="table-light">
                    <tr>
                        <th>No</th>
                        <th>Nama Petugas</th>
                        <th>Username (Email/ID)</th>
                        <th class="text-center" width="200">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($users as $index => $user)
                    <tr class="user-row">
                        <td>{{ $index + 1 }}</td>
                        <td class="fw-bold text-dark">{{ $user->name }}</td>
                        <td>{{ $user->username }}</td>
                        <td class="text-center">
                            <button class="btn btn-sm btn-warning edit-btn" style="border-radius: 6px; color: #fff;" data-id="{{ $user->id }}" data-name="{{ $user->name }}" data-username="{{ $user->username }}" data-bs-toggle="modal" data-bs-target="#tambahPetugasModal">
                                <i class="fa-solid fa-pen-to-square"></i> Edit
                            </button>
                            <form action="{{ route('users.destroy', $user->id) }}" method="POST" class="d-inline delete-form">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-sm btn-danger delete-btn" style="border-radius: 6px;">
                                    <i class="fa-solid fa-trash"></i> Hapus
                                </button>
                            </form>
                        </td>
                    </tr>
                    @empty
                    <tr id="emptyRow">
                        <td colspan="4" class="text-center text-muted py-4">Belum ada data petugas.</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Modal Tambah/Edit Petugas -->
<div class="modal fade" id="tambahPetugasModal" tabindex="-1" aria-labelledby="tambahPetugasModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content" style="border-radius: 12px; border: none;">
            <div class="modal-header border-bottom-0 pb-0">
                <h5 class="modal-title" id="tambahPetugasModalLabel" style="font-weight: 700; color: #222;">Tambah Petugas Baru</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="modalAlertPlaceholder"></div>
                <form id="tambahPetugasForm" action="{{ route('users.store') }}" method="POST">
                    @csrf
                    <input type="hidden" name="_method" id="modalMethod" value="POST">
                    <div class="mb-4">
                        <label class="form-label" style="font-weight: 600; color: #444; font-size: 14px;">Nama Lengkap</label>
                        <input type="text" id="modalInputName" name="name" class="form-control" style="height: 48px; border-radius: 8px;" required placeholder="Contoh: Budi Santoso">
                    </div>

                    <div class="mb-4">
                        <label class="form-label" style="font-weight: 600; color: #444; font-size: 14px;">Username / Email / ID Staff</label>
                        <input type="text" id="modalInputUsername" name="username" class="form-control" style="height: 48px; border-radius: 8px;" required placeholder="Contoh: budi@siresik.com">
                    </div>

                    <div class="mb-4">
                        <label class="form-label" style="font-weight: 600; color: #444; font-size: 14px;">
                            Password <span id="passwordHelpText"></span>
                        </label>
                        <div class="position-relative">
                            <input type="password" name="password" id="modalInputPassword" class="form-control" style="height: 48px; border-radius: 8px;" required placeholder="••••••••">
                            <i class="fa-regular fa-eye position-absolute" id="togglePassword" style="right: 15px; top: 50%; transform: translateY(-50%); color: #888; cursor: pointer;"></i>
                        </div>
                    </div>

                    <div class="d-flex justify-content-end gap-2 mt-2">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal" style="border-radius: 8px; font-weight: 600;">Tutup</button>
                        <button type="submit" id="modalBtnSubmit" class="btn btn-primary-custom" style="border-radius: 8px; padding-left: 20px; padding-right: 20px;">
                            <i class="fa-solid fa-save me-1"></i> Simpan
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const togglePassword = document.getElementById('togglePassword');
        const password = document.getElementById('modalInputPassword');
        
        togglePassword.addEventListener('click', function (e) {
            if (password.type === 'password') {
                password.type = 'text';
                this.classList.remove('fa-eye');
                this.classList.add('fa-eye-slash');
            } else {
                password.type = 'password';
                this.classList.remove('fa-eye-slash');
                this.classList.add('fa-eye');
            }
        });

        // Edit Modal Setup
        const modalTitle = document.getElementById('tambahPetugasModalLabel');
        const modalMethod = document.getElementById('modalMethod');
        const inputName = document.getElementById('modalInputName');
        const inputUsername = document.getElementById('modalInputUsername');
        const inputPassword = document.getElementById('modalInputPassword');
        const passwordHelpText = document.getElementById('passwordHelpText');
        const modalForm = document.getElementById('tambahPetugasForm');
        const baseUrlStore = "{{ route('users.store') }}";
        const baseUrlEdit = "{{ route('users.update', ':id') }}";
        let currentRowEdit = null;

        const tambahPetugasModalEl = document.getElementById('tambahPetugasModal');
        if (tambahPetugasModalEl) {
            tambahPetugasModalEl.addEventListener('show.bs.modal', function (event) {
                const button = event.relatedTarget; 
                document.getElementById('modalAlertPlaceholder').innerHTML = '';
                
                if (button && button.classList.contains('edit-btn')) {
                    // Mode Edit
                    const id = button.getAttribute('data-id');
                    modalTitle.textContent = 'Edit Petugas';
                    modalForm.setAttribute('action', baseUrlEdit.replace(':id', id));
                    modalMethod.value = 'PUT';
                    inputName.value = button.getAttribute('data-name');
                    inputUsername.value = button.getAttribute('data-username');
                    inputPassword.value = '';
                    inputPassword.removeAttribute('required');
                    passwordHelpText.textContent = '(Kosongkan jika tidak ingin mengubah)';
                    currentRowEdit = button.closest('tr');
                } else {
                    // Mode Tambah
                    modalTitle.textContent = 'Tambah Petugas Baru';
                    modalForm.setAttribute('action', baseUrlStore);
                    modalMethod.value = 'POST';
                    inputName.value = '';
                    inputUsername.value = '';
                    inputPassword.value = '';
                    inputPassword.setAttribute('required', 'required');
                    passwordHelpText.textContent = '';
                    currentRowEdit = null;
                }
            });
        }

        // SweetAlert Delete Verification
        const usersTableTbody = document.querySelector('#usersTable tbody');
        if (usersTableTbody) {
            usersTableTbody.addEventListener('submit', function(e) {
                if (e.target && e.target.classList.contains('delete-form')) {
                    e.preventDefault(); 
                    const form = e.target;
                    Swal.fire({
                        title: 'Yakin ingin menghapus?',
                        text: 'Data petugas yang dihapus tidak bisa dikembalikan!',
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#dc3545',
                        cancelButtonColor: '#6c757d',
                        confirmButtonText: 'Ya, Hapus!',
                        cancelButtonText: 'Batal'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            form.submit(); 
                        }
                    });
                }
            });
        }

        const modalAlertPlaceholder = document.getElementById('modalAlertPlaceholder');
        const modalBtnSubmit = document.getElementById('modalBtnSubmit');

        if(modalForm) {
            modalForm.addEventListener('submit', function(e) {
                e.preventDefault();
                modalBtnSubmit.disabled = true;
                modalBtnSubmit.innerHTML = '<i class="fa-solid fa-spinner fa-spin me-1"></i> Menyimpan...';
                
                const formData = new FormData(modalForm);
                const url = modalForm.getAttribute('action');
                
                fetch(url, {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                })
                .then(response => response.json().then(data => ({status: response.status, body: data})))
                .then(res => {
                    modalAlertPlaceholder.innerHTML = '';
                    modalBtnSubmit.disabled = false;
                    modalBtnSubmit.innerHTML = '<i class="fa-solid fa-save me-1"></i> Simpan';

                    if (res.status === 422) {
                        let errorHtml = '<ul class="mb-0">';
                        for (const [key, messages] of Object.entries(res.body.errors)) {
                            messages.forEach(msg => { errorHtml += `<li>${msg}</li>`; });
                        }
                        errorHtml += '</ul>';
                        modalAlertPlaceholder.innerHTML = `
                            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                <strong>Gagal menyimpan!</strong> Periksa isian Anda.<br>${errorHtml}
                                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                            </div>
                        `;
                    } else if (res.status === 200 || res.status === 201) {
                        modalAlertPlaceholder.innerHTML = `
                            <div class="alert alert-success alert-dismissible fade show" role="alert">
                                <i class="fa-solid fa-circle-check me-1"></i> <strong>Berhasil!</strong> ${res.body.message}
                                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                            </div>
                        `;
                        
                        const isEdit = modalMethod.value === 'PUT';
                        const userId = res.body.user.id;
                        const name = inputName.value;
                        const username = inputUsername.value;
                        
                        const destroyUrlBase = "{{ route('users.destroy', ':id') }}";
                        const csrfToken = "{{ csrf_token() }}";
                        const destroyUrl = destroyUrlBase.replace(':id', userId);

                        const rowContentHtml = `
                            <td class="fw-bold text-dark">${name}</td>
                            <td>${username}</td>
                            <td class="text-center">
                                <button class="btn btn-sm btn-warning edit-btn" style="border-radius: 6px; color: #fff;" data-id="${userId}" data-name="${name}" data-username="${username}" data-bs-toggle="modal" data-bs-target="#tambahPetugasModal">
                                    <i class="fa-solid fa-pen-to-square"></i> Edit
                                </button>
                                <form action="${destroyUrl}" method="POST" class="d-inline delete-form" onsubmit="return confirm('Apakah Anda yakin ingin menghapus akun petugas ini?')">
                                    <input type="hidden" name="_token" value="${csrfToken}">
                                    <input type="hidden" name="_method" value="DELETE">
                                    <button type="submit" class="btn btn-sm btn-danger delete-btn" style="border-radius: 6px;">
                                        <i class="fa-solid fa-trash"></i> Hapus
                                    </button>
                                </form>
                            </td>
                        `;

                        if (isEdit && currentRowEdit) {
                            // We keep the index cell, just replace the rest
                            const noCellHtml = currentRowEdit.querySelector('td:first-child').outerHTML;
                            currentRowEdit.innerHTML = noCellHtml + rowContentHtml;
                            
                            setTimeout(() => {
                                const modalInstance = bootstrap.Modal.getInstance(document.getElementById('tambahPetugasModal'));
                                if (modalInstance) modalInstance.hide();
                            }, 1000);
                        } else {
                            // Append new row
                            const tbody = document.querySelector('#usersTable tbody');
                            const emptyRow = document.getElementById('emptyRow');
                            if (emptyRow) emptyRow.style.display = 'none';
                            
                            const newTr = document.createElement('tr');
                            newTr.className = 'user-row';
                            
                            const currentRowsCount = document.querySelectorAll('#usersTable tbody tr.user-row').length;
                            newTr.innerHTML = `<td>${currentRowsCount + 1}</td>` + rowContentHtml;
                            
                            tbody.appendChild(newTr);

                            // Reset form for next insert
                            inputName.value = '';
                            inputUsername.value = '';
                            inputPassword.value = '';
                        }
                    } else {
                        modalAlertPlaceholder.innerHTML = `<div class="alert alert-danger">Kesalahan server.</div>`;
                    }
                })
                .catch(error => {
                    modalBtnSubmit.disabled = false;
                    modalBtnSubmit.innerHTML = '<i class="fa-solid fa-save me-1"></i> Simpan';
                    modalAlertPlaceholder.innerHTML = `<div class="alert alert-danger">Gagal terhubung!</div>`;
                });
            });
        }
    });
</script>
@endsection