@extends('admin.layout.layout')

@section('title', 'Data User')

@section('content')
            <div id="layoutSidenav_content">
                <main>
                    <div class="container-fluid px-4">
                        <h1 class="mt-4">Data User</h1>
                        <ol class="breadcrumb mb-4">
                            <li class="breadcrumb-item"><a href="/dashboard">Dashboard</a></li>
                            <li class="breadcrumb-item active">Data User</li>
                        </ol>
                        <div class="card mb-4">
                            <div class="card-body">
                                <button type="submit" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#userAdd">
                                    <i class="fa-solid fa-plus"></i> Tambah User
                                </button>
                            </div>
                        </div>

                        @if ($errors->any())
                            <div class="alert alert-danger">
                                    @foreach ($errors->all() as $error)
                                    <div style="text-align: center" class="alert alert-danger"><strong>{{ $error }}</strong></div>
                                    @endforeach
                            </div>
                        @endif

                        @if (session('success'))
                            <div class="alert alert-success" style="text-align: center">
                                <strong>{{ session('success') }}</strong>
                            </div>
                        @endif

                        <div class="card mb-4">
                            <div class="card-header">
                                <i class="fas fa-table me-1"></i>
                            </div>
                            <div class="card-body">
                                <table id="datatablesSimple">
                                    <thead>
                                        <tr>
                                            <th>Nama</th>
                                            <th>Email</th>
                                            <th>Nomor Telepon</th>
                                            <th>Alamat</th>
                                            <th>Role</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($user as $user)
                                        <tr>
                                            <td>{{ $user->nama }}</td>
                                            <td>{{ $user->email }}</td>
                                            <td>{{ $user->no_telp }}</td>
                                            <td>{{ $user->alamat }}</td>
                                            <td>{{ $user->role_user }}</td>
                                            <td>
                                                <button class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#userEdit{{ $user->id }}">Edit</button>
                                                <form style="display: inline;" method="post" action="{{ url('userDelete/'.$user->id) }}" enctype="multipart/form-data">
                                                    @csrf
                                                    @method('delete')
                                                <button class="btn btn-danger" type="submit">Hapus</button>
                                                </form>
                                            </td>
                                        </tr>

                                        <div class="modal fade" id="userEdit{{ $user->id}}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                        <div class="modal-dialog modal-xl">
                                            <div class="modal-content">
                                            <div class="modal-header">
                                                <h1 class="modal-title fs-5" id="exampleModalLabel"></h1>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                            </div>
                                            <div class="modal-body">
                                                <form method="post" action="{{ url('userUpdate/'.$user->id) }}" enctype="multipart/form-data">
                                                    @csrf
                                            <div class="row">
                                                <div class="col-6 mb-3">
                                                    <input name="nama" class="form-control large-input" type="text" placeholder="Nama" value="{{ $user->nama }}" required/>
                                                </div>

                                                <div class="col-6 mb-3 position-relative">
                                                    <input id="password{{ $user->id }}" name="password" class="form-control large-input pe-5" type="password" placeholder="Password"/>
                                                    <button type="button" class="btn btn-outline-secondary position-absolute top-50 translate-middle-y" style="right: 20px;" onclick="togglePasswordVisibility('password{{ $user->id }}', this)">
                                                        Tampilkan
                                                    </button>
                                                </div>

                                                <div class="col-6 mb-3">
                                                    <input name="email" class="form-control large-input" type="email" placeholder="Email" />
                                                </div>

                                                <div class="col-4 mb-3">
                                                    <input name="no_telp" class="form-control large-input" type="string" placeholder="No Telp" value="{{ $user->no_telp }}"/>
                                                </div>

                                                <div class="col-8 mb-3">
                                                    <input name="alamat" class="form-control large-input" type="string" placeholder="Alamat" value="{{ $user->alamat }}"/>
                                                </div>

                                                <div class="col-3 mb-3">
                                                    <select name="role_user" class="form-control large-input" required>
                                                        <option value="admin" {{ $user->role_user == 'admin' ? 'selected' : '' }}>Admin</option>
                                                        <option value="user" {{ $user->role_user == 'user' ? 'selected' : '' }}>User</option>
                                                    </select>
                                                </div>
                                            </div>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                                <button type="submit" class="btn btn-primary">Save changes</button>
                                            </div>
                                            </form>
                                            </div>
                                        </div>
                                        </div>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                </main>

                                    <div class="modal fade" id="userAdd" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                        <div class="modal-dialog modal-xl">
                                            <div class="modal-content">
                                            <div class="modal-header">
                                                <h1 class="modal-title fs-5" id="exampleModalLabel"></h1>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                            </div>
                                            <div class="modal-body">
                                                <form method="post" action="{{ route('user.create') }}" enctype="multipart/form-data">
                                                    @csrf
                                            <div class="row">
                                                <div class="col-6 mb-3">
                                                <input name="nama" class="form-control large-input" type="text" placeholder="Nama" required/>
                                                </div>

                                                <div class="col-6 mb-3 position-relative">
                                                    <input id="password2" name="password" class="form-control large-input pe-5" type="password" placeholder="Password" required/>
                                                    <button type="button" class="btn btn-outline-secondary position-absolute top-50 translate-middle-y" style="right: 20px;" onclick="togglePasswordVisibility('password2', this)">
                                                            Tampilkan
                                                    </button>
                                                </div>

                                                <div class="col-6 mb-3">
                                                <input name="email" class="form-control large-input" type="email" placeholder="Email" required/>
                                                </div>

                                                <div class="col-4 mb-3">
                                                <input name="no_telp" class="form-control large-input" type="string" placeholder="No Telp" />
                                                </div>

                                                <div class="col-8 mb-3">
                                                <input name="alamat" class="form-control large-input" type="string" placeholder="Alamat" />
                                                </div>

                                                <div class="col-3 mb-3">
                                                    <select name="role_user" class="form-control large-input" required>
                                                        <option value="admin" {{ $user->role_user == 'admin' ? 'selected' : '' }}>Admin</option>
                                                        <option value="user" {{ $user->role_user == 'user' ? 'selected' : '' }}>User</option>
                                                    </select>
                                                </div>
                                            </div>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                                <button type="submit" class="btn btn-primary">Save changes</button>
                                            </div>
                                            </form>
                                            </div>
                                        </div>
                                        </div>

                                        <script>
                                        function togglePasswordVisibility(inputId, button) {
                                            var passwordField = document.getElementById(inputId);

                                            if (passwordField.type === "password") {
                                                passwordField.type = "text";
                                                button.innerText = "Sembunyikan";
                                            } else {
                                                passwordField.type = "password";
                                                button.innerText = "Tampilkan";
                                            }
                                        }
                                        </script>
@endsection