@extends('layouts.app')

@section('title', 'Data Users')
@section('content')
    <div id="alert-container" class="alert-container"></div>

    <div class="main-content">
        <div class="container-fluid">
            <!-- Page Header -->
            <div class="page-header">
                <div class="row align-items-end">
                    <div class="col-lg-8">
                        <div class="page-header-title">
                            <i class="ik ik-user bg-blue"></i>
                            <div class="d-inline">
                                <h5>Data Users</h5>
                                <span>Manajemen Data Users</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <nav class="breadcrumb-container" aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item">
                                    <a href="{{ route('dashboard') }}"><i class="ik ik-home"></i></a>
                                </li>
                                <li class="breadcrumb-item active" aria-current="page">Data Users</li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>

            <!-- Tabel Data Users -->
            <div class="row" style="margin-bottom: 16px">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header d-flex justify-content-between">
                            <h3>Daftar Data Users</h3>
                            <div>
                                <button type="button" class="btn btn-danger" id="deleteSelectedBtn" style="display: none;">
                                    <i class="ik ik-trash-2"></i> Hapus Terpilih
                                </button>
                                <button type="button" class="btn btn-primary" id="btnTambahUser">
                                    <i class="ik ik-plus"></i> Tambah Data User
                                </button>
                            </div>
                        </div>
                        <div class="card-body">
                            <table id="data_table" class="table table-hover table-striped table-bordered nowrap dataTable">
                                <thead>
                                    <tr>
                                        <th>No</th>
                                        <th>Username</th>
                                        <th>Email</th>
                                        <th>Created At</th>
                                        <th>Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($users as $item)
                                        <tr>
                                           <td>{{ $loop->iteration }}</td>
                                            <td>{{ $item->username }}</td>
                                            <td>{{ $item->email }}</td>
                                            <td>{{ $item->created_at }}</td>
                                            <td>
                                                <a href="#" class="editUser" data-id="{{ $item->id }}"
                                                    data-username="{{ $item->username }}" data-email="{{ $item->email }}">
                                                    <i class="ik ik-edit f-18 mr-15 text-green"></i>
                                                </a>
                                                <a href="#" class="deleteUser" data-id="{{ $item->id }}">
                                                    <i class="ik ik-trash-2 f-18 mr-15 text-red"></i>
                                                </a>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Modal Tambah Data User -->
            <div class="modal fade" id="modalTambahUser" tabindex="-1" role="dialog">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">Tambah Data User</h5>
                            <button type="button" class="close" data-dismiss="modal">
                                <span>&times;</span>
                            </button>
                        </div>
                        <form action="{{ route('users.store') }}" method="POST" id="formTambahUser">
                            @csrf
                            <div class="modal-body">
                                <!-- Username -->
                                <div class="form-group">
                                    <label>Username</label>
                                    <input type="text" name="username" class="form-control" required maxlength="50"
                                        oninvalid="this.setCustomValidity('Username tidak boleh kosong.')"
                                        oninput="this.setCustomValidity(''); this.value = this.value.trim()">
                                    <span id="usernameError" class="text-danger"></span>
                                </div>
                                <!-- Email -->
                                <div class="form-group">
                                    <label>Email</label>
                                    <input type="email" name="email" class="form-control"
                                        oninvalid="this.setCustomValidity('Email tidak valid.')"
                                        oninput="this.setCustomValidity(''); this.value = this.value.trim()">
                                    <span id="emailError" class="text-danger"></span>
                                </div>
                                <!-- Password -->
                                <div class="form-group">
                                    <label>Password</label>
                                    <input type="password" name="password" class="form-control" required minlength="6"
                                        oninvalid="this.setCustomValidity('Password tidak boleh kosong dan minimal 6 karakter.')"
                                        oninput="this.setCustomValidity(''); this.value = this.value.trim()">
                                    <span id="passwordError" class="text-danger"></span>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                                <button type="submit" class="btn btn-primary">Simpan</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Modal Edit Data User -->
            <div class="modal fade" id="modalEditUser" tabindex="-1" role="dialog">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <form id="formEditUser" action="{{ route('users.update', 0) }}" method="POST">
                            @csrf
                            <!-- Jika menggunakan method spoofing -->
                            @method('PUT')
                            <div class="modal-header">
                                <h5 class="modal-title">Edit Data User</h5>
                                <button type="button" class="close" data-dismiss="modal">
                                    <span>&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <!-- Username -->
                                <div class="form-group">
                                    <label>Username</label>
                                    <input type="text" name="username" class="form-control" required maxlength="50"
                                        oninvalid="this.setCustomValidity('Username tidak boleh kosong.')"
                                        oninput="this.setCustomValidity(''); this.value = this.value.trim()">
                                </div>
                                <!-- Email -->
                                <div class="form-group">
                                    <label>Email</label>
                                    <input type="email" name="email" class="form-control"
                                        oninvalid="this.setCustomValidity('Email tidak valid.')"
                                        oninput="this.setCustomValidity(''); this.value = this.value.trim()">
                                </div>
                                <!-- Password -->
                                <div class="form-group">
                                    <label>Password</label>
                                    <input type="password" name="password" class="form-control">
                                    <small class="text-muted">Kosongkan jika tidak ingin mengganti password.</small>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                                <button type="submit" class="btn btn-primary">Update</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>


            <!-- Modal Konfirmasi Hapus -->
            <div class="modal fade" id="deleteConfirmModal" tabindex="-1" role="dialog"
                aria-labelledby="deleteConfirmModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="deleteConfirmModalLabel">Konfirmasi Hapus</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Tutup">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            Apakah Anda yakin ingin menghapus data ini?
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                            <button type="button" id="confirmDeleteBtn" class="btn btn-danger">Hapus</button>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
@endsection

@section('script')

    <script>
        // Fungsi showBootstrapAlert
        function showBootstrapAlert(message) {
            var alertHtml = '<div class="alert alert-warning alert-dismissible fade show custom-alert" role="alert">' +
                '<strong>Perhatian!</strong> ' + message +
                '<button type="button" class="close" data-dismiss="alert" aria-label="Close">' +
                '<span aria-hidden="true">&times;</span></button></div>';
            $('#alert-container').append(alertHtml);
            setTimeout(function() {
                $('.custom-alert').fadeOut(500, function() {
                    $(this).remove();
                });
            }, 3000);
        }

        $(document).ready(function() {
            // Inisialisasi DataTable
            if ($.fn.DataTable.isDataTable('#data_table')) {
                $('#data_table').DataTable().destroy();
            }
            var table = $('#data_table').DataTable({
                destroy: true,
                dom: "<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
                    "<'row'<'col-sm-12'tr>>" +
                    "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
                language: {
                    lengthMenu: "Tampilkan _MENU_ entri",
                    search: "Cari:",
                    info: "Menampilkan _START_ hingga _END_ dari _TOTAL_ entri",
                    infoEmpty: "Menampilkan 0 hingga 0 dari 0 entri",
                    infoFiltered: "(disaring dari _MAX_ total entri)",
                    paginate: {
                        first: "Pertama",
                        last: "Terakhir",
                        next: "Selanjutnya",
                        previous: "Sebelumnya"
                    },
                    zeroRecords: "Tidak ditemukan data yang sesuai"
                },
                paging: true,
                searching: true,
                ordering: true,
                columnDefs: [{
                    orderable: false,
                    targets: [0, 4]
                }],
                drawCallback: function(settings) {
                    var api = this.api();
                    api.column(0, {
                        page: 'current'
                    }).nodes().each(function(cell, i) {
                        cell.innerHTML = i + 1;
                    });
                }
            });
            $('#data_table_filter input').addClass('form-control form-control-sm');
            $('#data_table_length select').addClass('form-control form-control-sm');

            // Modal Tambah User
            $('#btnTambahUser').on('click', function(e) {
                e.preventDefault();
                $('#modalTambahUser').modal('show');
            });

            // Handler untuk editUser: bikin modal edit muncul dan mengisi data
            $(document).on('click', '.editUser', function(e) {
                e.preventDefault();
                var id = $(this).data('id');
                var username = $(this).data('username');
                var email = $(this).data('email');

                // Set data di form edit
                var form = $('#formEditUser');
                form.data('user-id', id);
                form.find('input[name="username"]').val(username);
                form.find('input[name="email"]').val(email);
                form.find('input[name="password"]').val(''); // Pastikan password dikosongkan

                // Tampilkan modal edit
                $('#modalEditUser').modal('show');
            });

            // Submit Form Tambah User
            $('#formTambahUser').on('submit', function(e) {
                e.preventDefault();
                var form = $(this);
                var username = form.find('input[name="username"]').val().trim();
                var password = form.find('input[name="password"]').val().trim();

                // Validasi password minimal 6 karakter
                if (password.length < 6) {
                    showBootstrapAlert('Password harus berisi minimal 6 karakter!');
                    return;
                }

                // Cek username sudah ada
                $.ajax({
                    url: '{{ route('users.checkUsername') }}',
                    method: 'GET',
                    data: {
                        username: username
                    },
                    dataType: 'json',
                    success: function(response) {
                        if (response.exists) {
                            showBootstrapAlert('Username sudah ada, pakai username yang lain!');
                        } else {
                            // Lanjut simpan data user via AJAX
                            $.ajax({
                                url: form.attr('action'),
                                method: 'POST',
                                data: form.serialize(),
                                success: function(resp) {
                                    window.location.href =
                                        '{{ route('users.index') }}';
                                },
                                error: function(xhr) {
                                    showBootstrapAlert(
                                        'Terjadi kesalahan saat menyimpan data.'
                                        );
                                }
                            });
                        }
                    },
                    error: function() {
                        showBootstrapAlert('Terjadi kesalahan saat memeriksa username.');
                    }
                });
            });

            // Handler Delete User
            $(document).on('click', '.deleteUser', function(e) {
                e.preventDefault();
                var id = $(this).data('id');
                $('#deleteConfirmModal').data('id', id).modal('show');
            });

            $('#confirmDeleteBtn').on('click', function() {
                var id = $('#deleteConfirmModal').data('id');
                $.ajax({
                    url: '/users/' + id,
                    method: 'DELETE',
                    data: {
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        if (response.success) {
                            alert('Data berhasil dihapus.');
                            location.reload();
                        } else {
                            alert(response.message || 'Gagal menghapus data.');
                        }
                    },
                    error: function() {
                        alert('Terjadi kesalahan server.');
                    }
                });
            });

            // Handler submit form Edit User
            // Unbind submit event agar tidak duplikasi
            $('#formEditUser').off('submit').on('submit', function(e) {
                e.preventDefault();
                var form = $(this);
                var newUsername = form.find('input[name="username"]').val().trim();
                var password = form.find('input[name="password"]').val().trim();

                // Kalau password diisi, maka validasi harus minimal 6 karakter.
                if (password !== "" && password.length < 6) {
                    showBootstrapAlert('Password harus berisi minimal 6 karakter!');
                    return;
                }

                // Lanjut cek username (exclude user yang sedang diedit)
                $.ajax({
                    url: '{{ route('users.checkUsername') }}',
                    method: 'GET',
                    data: {
                        username: newUsername,
                        exclude_id: form.data('user-id')
                    },
                    dataType: 'json',
                    success: function(response) {
                        if (response.exists) {
                            showBootstrapAlert(
                                "Username sudah dipakai orang lain, pakai username yang lain!"
                                );
                        } else {
                            $.ajax({
                                url: form.attr('action').replace('/0', '/' + form.data(
                                    'user-id')),
                                method: 'PUT',
                                data: form.serialize(),
                                success: function(resp) {
                                    $('#modalEditUser').modal('hide');
                                    window.location.href =
                                        '{{ route('users.index') }}';
                                },
                                error: function() {
                                    showBootstrapAlert(
                                        "Terjadi kesalahan saat mengupdate data."
                                        );
                                }
                            });
                        }
                    },
                    error: function() {
                        showBootstrapAlert("Terjadi kesalahan saat memeriksa username.");
                    }
                });
            });

        });
    </script>

    <style>
        div.dataTables_wrapper div.dataTables_paginate {
            margin-top: 12px;
            margin-bottom: 8px;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button {
            background-color: #fdfdfd !important;
            color: #212529 !important;
            border: 1px solid #e9e9e9 !important;
            border-radius: 0.25rem;
            padding: 0.375rem 0.75rem;
            margin-top: 15px;
            padding-bottom: 10px;
            cursor: pointer;
            transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
            background-color: #e2e6ea !important;
            border-color: #dae0e5 !important;
            color: #212529 !important;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.current {
            background-color: #e2e6ea !important;
            border-color: #dae0e5 !important;
            color: #212529 !important;
        }

        .alert-container {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1100;
            max-width: 350px;
        }

        .custom-alert {
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
            font-size: 14px;
            padding: 10px 15px;
        }

        #data_table th:first-child,
        #data_table td:first-child {
            width: 80px !important;
            text-align: center !important;
            padding: 5px !important;
        }

        #data_table th:nth-child(2),
        #data_table td:nth-child(2) {
            width: 40px !important;
        }

        #data_table th:last-child,
        #data_table td:last-child {
            width: 140px !important;
            text-align: center !important;
        }


        #alert-container {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1100;
            /* pastikan nilainya lebih tinggi dari modal (misal: modal bootstrap default 1050) */
            max-width: 350px;
        }
    </style>
@endsection