@extends('layouts.mainlayout')

@section('title','Management Users')


@section('tombol+')
<div class="ms-md-auto py-2 py-md-0">
    <!-- Button trigger -->
    <button type="button" class="btn btn-primary btn-round" data-bs-toggle="modal" data-bs-target="#exampleModal">
        Add User
    </button>
</div>
@endsection

@section('content')
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title">List Users</h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table id="basic-datatables"
                        class="display table table-sm table-striped table-hover nowrap-table text-center">
                        <thead class="table-danger">
                            <tr>
                                <th>No</th>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Username</th>
                                <th>Hak Akses</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($table_user as $Barang)
                            <tr>
                                <td>{{$loop->iteration }}</td>
                                <td>{{$Barang->name}}</td>
                                <td>{{$Barang->email}}</td>
                                <td>{{$Barang->username}}</td>
                                <td>{{$Barang->role_user}}</td>
                                <td class="text-center">
                                    <button href="#" class="btn btn-xs btn-warning editBtn" data-id="{{ $Barang->id }}">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <button href="#" class="btn btn-xs btn-danger deleteBtn"
                                        data-id="{{ $Barang->id }}">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Input -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="FormInput">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Form Add User</h5>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="names" class="form-label">Name</label>
                        <input type="text" class="form-control" id="names" name="names" required>
                    </div>

                    <div class="mb-3">
                        <label for="emails" class="form-label">Email Address</label>
                        <input type="email" class="form-control" id="emails" name="emails" placeholder="Enter Email"
                            required>
                    </div>

                    <div class="mb-3">
                        <label for="usernames" class="form-label">Username</label>
                        <div class="input-icon">
                            <span class="input-icon-addon">
                                <i class="fa fa-user"></i>
                            </span>
                            <input type="text" class="form-control" id="usernames" name="usernames"
                                placeholder="Username">
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="passwords" class="form-label">Password</label>
                        <input type="text" class="form-control" id="passwords" name="passwords" required>
                    </div>

                    <div class="mb-3">
                        <label for="hak_akses" class="form-label">Hak Akses</label>
                        <select class="form-select form-control" id="hak_akses" name="hak_akses" required>
                            <option selected disabled value> -- Select -- </option>
                            <option value="Admin">Admin</option>
                            <option value="Operator">Operator</option>

                        </select>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">Simpan</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Delete -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="FormDelete">
                @csrf
                <input type="hidden" id="delete_id" name="id">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Konfirmasi hapus data</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Apakah anda yakin menghapus user berikut
                            ?</label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary ">Ya</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection


@section('Script')
<!-- Script -->
<script>
    $(document).ready(function() {
                $('#FormInput').on('submit', function(e) {
                    e.preventDefault(); // cegah reload
            
                    $.ajax({
                        url: "{{ route('User.add') }}",
                        method: "POST",
                        data: $(this).serialize(),
                        success: function(response) {
                            alert('Data berhasil disimpan!');
                            $('#exampleModal').modal('hide');
                            $('#FormInput')[0].reset();
                            location.reload(); // reload page biar data tampil (atau update table via JS)
                        },
                        error: function(xhr) {
                            alert('Gagal menyimpan data!');
                        }
                    });
                });
            });
</script>

<script>
    $(document).ready(function() {
        $(document).on('click', '.deleteBtn', function () {
            let id = $(this).data('id');
            $('#delete_id').val(id);
            $('#deleteModal').modal('show');
        });

        $('#FormDelete').on('submit', function(e) {
            e.preventDefault(); // cegah reload
    
            $.ajax({
                url: "{{ route('User.delete') }}",
                method: "DELETE",
                data: $(this).serialize(),
                success: function(response) {
                    if(response.success){
                        alert(response.message);
                        $('#editModal').modal('hide');
                        $('#FormDelete')[0].reset();
                        location.reload(); // reload page biar data tampil (atau update table via JS)
                    }
                    else{
                        alert('Terjadi kesalahan: ' + response.message);
                    }
                },
            error: function(xhr) {alert('Terjadi kesalahan !');}
            });
        });

    });
</script>
@endsection