@extends('layouts.app')
@section('title', 'Kelola Akun')

@section('content')
    <div class="container my-4">
        <div
            class="card p-4 m-2 bg-white d-flex flex-column flex-sm-row align-items-center justify-content-between gap-2 mb-3 shadow-sm">
            <h1 class="fs-4 fw-semibold mb-2 mb-sm-0 text-primary">
                <i class="fa fa-users-cog me-2"></i> Kelola Akun
            </h1>
            <button data-bs-toggle="modal" data-bs-target="#tambah-akun" class="btn btn-outline-primary">
                <i class="fa fa-user-plus me-1"></i> Tambah Akun
            </button>

        </div>

        <div class="card border-0 shadow-lg p-1 m-2">
            <div class="card-body">
                <table id="tableUser" class="table table-bordered align-middle table-hover">
                    <thead class="table-light">
                        <tr>
                            <th class="text-center">No</th>
                            <th class="text-center">Username</th>
                            <th class="text-center">No. HP</th>
                            <th class="text-center">Email</th>
                            <th class="text-center">Role</th>
                            <th class="text-center">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($user as $item)
                            <tr>
                                <td class="text-center">{{ $loop->iteration }}</td>
                                <td class="text-center">{{ $item->username }}</td>
                                <td class="text-center">
                                    {{ preg_replace('/(\d{4})(\d{4})(\d+)/', '$1 $2 $3', $item->phone) }}
                                </td>

                                <td class="text-center">{{ $item->email }}</td>
                                <td class="text-center">
                                    <span
                                        class="badge
    @if ($item->role == 'superadmin') bg-danger
    @elseif($item->role == 'admin') bg-warning
    @else bg-secondary @endif">

                                        @if ($item->role == 'superadmin')
                                            <i class="fa fa-crown me-1"></i>
                                        @elseif ($item->role == 'admin')
                                            <i class="fa fa-user-shield me-1"></i>
                                        @else
                                            <i class="fa fa-user me-1"></i>
                                        @endif

                                        {{ ucfirst($item->role) }}
                                    </span>

                                </td>
                                <td class="text-center">
                                    <div class="d-flex justify-content-center gap-2">

                                        <button class="btn btn-sm btn-outline-primary" data-bs-toggle="modal"
                                            data-bs-target="#edit-akun-{{ $item->id }}">
                                            <i class="fa fa-pencil-alt"></i>
                                        </button>

                                        <button class="btn btn-sm btn-outline-danger" data-bs-toggle="modal"
                                            data-bs-target="#delete-akun-{{ $item->id }}">
                                            <i class="fa fa-trash-alt"></i>
                                        </button>

                                    </div>
                                </td>
                            </tr>

                            @include('components.modal-form-akun', [
                                'modalId' => 'edit-akun-' . $item->id,
                                'action' => route('user-management.update', $item->id),
                                'method' => 'PATCH',
                                'title' => 'Edit Akun Admin',
                                'buttonClass' => 'btn-primary',
                                'buttonText' => 'Simpan',
                                'data' => $item,
                            ])

                            @include('components.modal-delete-akun', [
                                'modalId' => 'delete-akun-' . $item->id,
                                'route' => route('user-management.destroy', $item->id),
                                'message' => "Yakin ingin menghapus akun <strong>{$item->name}</strong>?",
                            ])
                        @empty
                            <tr>
                                <td colspan="6" class="text-center text-muted py-3">Belum ada data pengguna</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    @include('components.modal-form-akun', [
        'modalId' => 'tambah-akun',
        'action' => route('user-management.store'),
        'method' => 'POST',
        'title' => 'Tambah Akun Admin',
        'buttonClass' => 'btn-success',
        'buttonText' => 'Simpan',
    ])

    @if (session('info'))
        @include('components.modal-success', [
            'message' => session('info'),
        ])
    @endif

    <div class="modal fade" id="modalConfirmReset" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 shadow">
                <div class="modal-header bg-warning text-white">
                    <h5 class="modal-title"><i class="fa fa-undo me-2"></i>Konfirmasi Reset Password</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body text-center">
                    <p class="mb-3 fs-5">
                        Apakah Anda yakin ingin mereset password <br>
                        <strong id="reset-username">username</strong> ke default
                        (<code>username1234</code>)?
                    </p>
                    <div class="d-flex justify-content-center gap-2">
                        <button class="btn btn-outline-secondary" data-bs-dismiss="modal">Batal</button>
                        <button id="btnConfirmReset" class="btn btn-warning text-white">Ya, Reset Sekarang</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <form id="resetPasswordForm" method="POST" style="display:none;">
        @csrf
        @method('PATCH')
    </form>
@endsection

@push('pageScripts')
    <script>
        document.addEventListener("DOMContentLoaded", function() {

            const dtUser = new DataTable('#tableUser', {
                ordering: false,
                responsive: false,
                autoWidth: false,
                scrollX: true,
                pageLength: 10,
                order: [
                    [0, 'asc']
                ],
                language: {
                    emptyTable: "Belum ada data yang dapat ditampilkan 😴",
                    lengthMenu: "",
                    zeroRecords: "Data tidak ditemukan",
                    info: "",
                    infoEmpty: "Tidak ada data tamu",
                    infoFiltered: "",
                    search: "Cari:",
                    paginate: {
                        first: `<i class="fa fa-angles-left"></i>`,
                        last: `<i class="fa fa-angles-right"></i>`,
                        next: `<i class="fa fa-chevron-right"></i>`,
                        previous: `<i class="fa fa-chevron-left"></i>`
                    }
                },
                renderer: 'bootstrap',
                dom: `
            <"datatable-header d-flex flex-wrap justify-content-end align-items-center mb-2"lf>
            <"table-responsive"t>
            <"datatable-footer d-flex justify-content-between align-items-center mt-3"ip>
        `
            });

            if (window.feather) {
                dtUser.on('draw', () => feather.replace());
            }

            const modalConfirm = new bootstrap.Modal(document.getElementById("modalConfirmReset"));
            const usernameText = document.getElementById("reset-username");
            const form = document.getElementById("resetPasswordForm");
            let selectedUserId = null;

            document.body.addEventListener("click", function(e) {
                const btn = e.target.closest(".btn-reset-password");
                if (!btn) return;

                selectedUserId = btn.dataset.id;
                const username = btn.dataset.username;

                usernameText.textContent = username;

                form.action = `/user-management/reset-${selectedUserId}`;

                modalConfirm.show();
            });

            document.getElementById("btnConfirmReset").addEventListener("click", function() {
                if (!form.action) return;
                modalConfirm.hide();
                form.submit();
            });

            const modalSuccess = document.getElementById("info-modal-success");
            if (modalSuccess) {
                const modal = new bootstrap.Modal(modalSuccess);
                modal.show();
            }

            const phoneInputs = document.querySelectorAll('.phone-input');

            function formatPhone(value) {
                if (!value) return '';
                value = value.replace(/\D/g, '');
                if (value.length > 14) value = value.slice(0, 14);
                let formatted = '';
                for (let i = 0; i < value.length; i++) {
                    if (i === 4 || i === 8) formatted += ' ';
                    formatted += value[i];
                }
                return formatted;
            }

            phoneInputs.forEach(input => {
                input.value = formatPhone(input.value);
                input.addEventListener('input', function() {
                    this.value = formatPhone(this.value);
                });
            });

            document.querySelectorAll('form').forEach(form => {
                form.addEventListener('submit', function() {
                    const phoneField = form.querySelector('input[name="phone"]');
                    if (phoneField) {
                        phoneField.value = phoneField.value.replace(/\s+/g, '');
                    }
                }, true);
            });
        });
    </script>
@endpush