@extends('layouts.adminlte')
@section('title','User Access')

@section('content')
<style>
    .badge-blocked {
        background: #f8d7da;
        color: #842029;
        border: 1px solid #f5c2c7;
    }
    .pwd-eye {
        cursor: pointer;
        margin-left: .5rem;
        color: #6c757d;
    }
    .pwd-eye:hover {
        color: #343a40;
    }
</style>
<div id="updateNoticeAccess" class="alert alert-success" style="display:none; position: fixed; top: 70px; right: 20px; z-index: 1051;">
    Update berhasil
</div>
<button class="btn btn-primary mb-2" id="btnTambah">Tambah User</button>

<table class="table table-bordered" id="tableUserAccess" width="100%">
    <thead>
        <tr>
            <th class="d-none">ID</th>
            <th>Aksi</th>
            <th>Nama</th>
            <th>Email</th>
            <th>Username</th>
            <th>Password</th>
            <th>Role</th>
            <th>Status</th>
            <th>Updated At</th>
        </tr>
    </thead>
</table>

<div class="modal fade" id="modalForm">
    <div class="modal-dialog">
        <form id="formUserAccess">
            @csrf
            <input type="hidden" name="id" id="id">
            <div class="modal-content">
                <div class="modal-header"><h5>User Access</h5></div>
                <div class="modal-body">
                    <input class="form-control mb-2" name="name" placeholder="Nama">
                    <input class="form-control mb-2" name="email" placeholder="Email">
                    <input class="form-control mb-2" name="username" placeholder="Username">
                    <input class="form-control mb-2" name="password" type="password" placeholder="Password (hanya saat tambah)">
                    <select class="form-control mb-2" name="role">
                        <option value="user">user</option>
                        <option value="admin">admin</option>
                        <option value="auditor">auditor</option>
                        <option value="checking">checking</option>
                        <option value="validator">validator</option>
                        <option value="atasan">atasan</option>
                        <option value="purchase">purchase</option>
                    </select>
                    <select class="form-control mb-2" name="status">
                        <option value="active">active</option>
                        <option value="blocked">non aktif</option>
                    </select>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-success">Simpan</button>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="modal fade" id="modalPassword">
    <div class="modal-dialog">
        <form id="formPassword">
            @csrf
            <input type="hidden" id="pwd_id">
            <div class="modal-content">
                <div class="modal-header"><h5>Ubah Password</h5></div>
                <div class="modal-body">
                    <input class="form-control" name="password" type="password" placeholder="Password baru" required>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-success">Simpan</button>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(function () {
    let table = $('#tableUserAccess').DataTable({
        ajax: {
            url: "{{ route('user-access.data') }}",
            dataSrc: 'data'
        },
        columns: [
            { data: 'id' },
            { data: 'id', render: function (data, type, row) {
                let blockLabel = row.status === 'blocked' ? 'Unblock' : 'Block';
                return `
                    <button class="btn btn-warning btn-sm edit" data-id="${data}">Edit</button>
                    <button class="btn btn-info btn-sm password" data-id="${data}">Password</button>
                    <button class="btn btn-secondary btn-sm block" data-id="${data}">${blockLabel}</button>
                    <button class="btn btn-danger btn-sm delete" data-id="${data}">Hapus</button>
                `;
            }, orderable: false, searchable: false },
            { data: 'name' },
            { data: 'email' },
            { data: 'username' },
            { data: 'password_mask', render: function (data) {
                if (!data) return '-';
                return `
                    <span class="pwd-mask" data-hidden="••••••" data-shown="********">••••••</span>
                    <i class="fas fa-eye pwd-eye" title="Show/Hide (mask)"></i>
                `;
            }},
            { data: 'role' },
            { data: 'status', render: function (data) {
                if (data === 'blocked') return '<span class="badge badge-blocked">non aktif</span>';
                return '<span class="badge badge-success">active</span>';
            }},
            { data: 'updated_at' },
        ],
        columnDefs: [
            { targets: 0, visible: false },
            { targets: 1, width: '220px' },
        ]
    });

    $('#btnTambah').click(function () {
        $('#formUserAccess')[0].reset();
        $('#id').val('');
        $('#modalForm').modal('show');
    });

    $('#formUserAccess').submit(function (e) {
        e.preventDefault();
        $.ajax({
            url: "{{ route('user-access.store') }}",
            type: "POST",
            data: $(this).serialize(),
            success: function () {
                $('#modalForm').modal('hide');
                table.ajax.reload();
            },
            error: function (xhr) {
                let msg = 'Gagal menyimpan.';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    msg = xhr.responseJSON.message;
                }
                alert(msg);
            }
        });
    });

    $(document).on('click', '.edit', function () {
        let id = $(this).data('id');
        $.get("{{ url('master/user-access/edit') }}/" + id, function (res) {
            $('#id').val(res.id);
            $('[name=name]').val(res.name);
            $('[name=email]').val(res.email);
            $('[name=username]').val(res.username);
            $('[name=password]').val('');
            $('[name=role]').val(res.role);
            $('[name=status]').val(res.status || 'active');
            $('#modalForm').modal('show');
        });
    });

    $(document).on('click', '.delete', function () {
        if (!confirm('Hapus data?')) return;
        $.ajax({
            url: "{{ url('master/user-access/delete') }}/" + $(this).data('id'),
            type: "DELETE",
            data: { _token: "{{ csrf_token() }}" },
            success: function () {
                table.ajax.reload();
            }
        });
    });

    $(document).on('click', '.password', function () {
        $('#pwd_id').val($(this).data('id'));
        $('#formPassword')[0].reset();
        $('#modalPassword').modal('show');
    });

    $('#formPassword').submit(function (e) {
        e.preventDefault();
        let id = $('#pwd_id').val();
        $.ajax({
            url: "{{ url('master/user-access/password') }}/" + id,
            type: "POST",
            data: $(this).serialize(),
            success: function () {
                $('#modalPassword').modal('hide');
                $('#updateNoticeAccess').text('Password diperbarui').stop(true, true).fadeIn(150).delay(1200).fadeOut(300);
            },
            error: function () {
                alert('Gagal update password.');
            }
        });
    });

    $(document).on('click', '.block', function () {
        let id = $(this).data('id');
        $.post("{{ url('master/user-access/block') }}/" + id, { _token: "{{ csrf_token() }}" }, function () {
            table.ajax.reload(null, false);
        });
    });

    $(document).on('dblclick', '#tableUserAccess tbody td', function (e) {
        e.stopPropagation();
        let cell = table.cell(this);
        let rowData = table.row(this).data();
        let colIndex = cell.index().column;
        if (colIndex === 0 || colIndex === 1 || colIndex === 5 || colIndex === 8) return;
        let oldValue = cell.data();
        if ($(this).find('.edit-cell').length) return;

        let editor;
        if (colIndex === 6) {
            let options = `
                <option value="user" ${String(oldValue) === 'user' ? 'selected' : ''}>user</option>
                <option value="admin" ${String(oldValue) === 'admin' ? 'selected' : ''}>admin</option>
                <option value="auditor" ${String(oldValue) === 'auditor' ? 'selected' : ''}>auditor</option>
                <option value="checking" ${String(oldValue) === 'checking' ? 'selected' : ''}>checking</option>
                <option value="validator" ${String(oldValue) === 'validator' ? 'selected' : ''}>validator</option>
                <option value="atasan" ${String(oldValue) === 'atasan' ? 'selected' : ''}>atasan</option>
                <option value="purchase" ${String(oldValue) === 'purchase' ? 'selected' : ''}>purchase</option>
            `;
            $(this).html(`<select class="form-control form-control-sm edit-cell">${options}</select>`);
        } else if (colIndex === 7) {
            let options = `
                <option value="active" ${String(oldValue) === 'active' ? 'selected' : ''}>active</option>
                <option value="blocked" ${String(oldValue) === 'blocked' ? 'selected' : ''}>non aktif</option>
            `;
            $(this).html(`<select class="form-control form-control-sm edit-cell">${options}</select>`);
        } else {
            $(this).html(`<input type="text" class="form-control form-control-sm edit-cell" value="${oldValue || ''}">`);
        }

        editor = $(this).find('.edit-cell');
        editor.focus().select();

        function saveValue() {
            let newValue = editor.val();
            cell.data(newValue).draw(false);

            let field = [
                'id',
                null,
                'name',
                'email',
                'username',
                'password_mask',
                'role',
                'status',
                'updated_at'
            ][colIndex];

            if (!field || field === 'password_mask') {
                cell.data(oldValue).draw(false);
                return;
            }

            $.post("{{ route('user-access.store') }}", {
                _token: "{{ csrf_token() }}",
                id: rowData.id,
                [field]: newValue
            }).done(function () {
                $('#updateNoticeAccess').stop(true, true).fadeIn(150).delay(1200).fadeOut(300);
            }).fail(function () {
                cell.data(oldValue).draw(false);
            });
        }

        editor.on('blur', saveValue);
        editor.on('keydown', function(e){
            if(e.key === 'Enter' && this.tagName !== 'TEXTAREA'){
                e.preventDefault();
                saveValue();
            }
        });
    });

    $(document).on('click', '.pwd-eye', function (e) {
        e.stopPropagation();
        let mask = $(this).siblings('.pwd-mask');
        if (!mask.length) return;
        let current = mask.text();
        let next = current === mask.data('hidden') ? mask.data('shown') : mask.data('hidden');
        mask.text(next);
        $(this).toggleClass('fa-eye fa-eye-slash');
    });
});
</script>
@endpush