@extends('admin.layouts.app')

@section('title', 'Administrator')

@push('style')
    <style>
        #edit .modal-dialog{
            max-width: 800px!important;
        }


        .wrap-image {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            width: 200px;
            height: auto;
            box-sizing: border-box;
            border: solid 1px #E5E5E5;
            border-radius: 8px;
            background-color: #EEE;
            font-size: 46px;
            color: #00000030;
        }

        .wrap-image img {
            width: 200px;
            height: auto;
            object-fit: cover;
        }

        .wrap-image .btn {
            position: absolute;
            bottom: 12px;
            right: 12px;
            background-color: #f3f6f9CC;
            border-color: #f3f6f9CC;
            border-radius: 13px;
            padding: 0;
            width: 35px;
            height: 35px;
        }
        .wrap-image i{
            margin-block: 20px;
        }

        .password-box {
            position: relative;
        }
        .password-box input {
            padding-right: 40px;
        }
        .password-box .toggle-password {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            color: #aaa;
            font-size: 15px;
            z-index: 5;
            transition: color .2s;
        }
        .password-box .toggle-password:hover {
            color: #555;
        }
    </style>
@endpush

@section('main')
    {{--  delete  --}}
    <div class="modal fade" id="Delete" tabindex="-1" role="dialog"
         aria-labelledby="deleteUserModalLabel" 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="deleteUserModalLabel"><i class="fa-solid fa-bolt p-1 bg-danger text-white" style="border-radius: 4px;"></i> Peringatan Hapus Data</h5>
                </div>
                <div class="modal-body">
                    <p>Apakah anda yakin ingin menghapus data ini?</p>
                    <form id="FormDelete" method="POST" action="">
                        @csrf
                        @method('DELETE')
                        <input type="hidden" name="id" id="delete_id">
                        <button type="submit" class="btn btn-danger">Hapus</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- create -->
    <div class="modal fade" id="Create" tabindex="-1" role="dialog" aria-labelledby="editUserModalLabel"
         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="editUserModalLabel">Tambah Data</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true" class="font-weight-normal">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="FormCreate" method="POST" action="/admin/user-admin" enctype="multipart/form-data">
                        @csrf
                        @method('POST')
                        <div class="form-group">
                            <label for="name" class="form-label">Nama</label>
                            <input type="text" class="form-control @error('name') is-invalid @enderror" id="name" placeholder="masukkan nama admin" name="name" value="{{ old('name')  }}">
                            @error('name')
                            <div class="invalid-feedback">
                                {{ $message }}
                            </div>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label for="email" class="form-label">Email</label>
                            <input type="email" class="form-control @error('email') is-invalid @enderror" id="email" placeholder="masukkan email admin" name="email" value="{{ old('email')  }}">
                            @error('email')
                            <div class="invalid-feedback">
                                {{ $message }}
                            </div>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label for="username" class="form-label">Username</label>
                            <input type="text" class="form-control @error('username') is-invalid @enderror" id="username" placeholder="masukkan username" name="username" value="{{ old('username')  }}">
                            @error('username')
                            <div class="invalid-feedback">
                                {{ $message }}
                            </div>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label for="password" class="form-label">Password</label>
                            <div class="password-box">
                                <input type="password" class="form-control @error('password') is-invalid @enderror" id="password" placeholder="buat password atau kosongi untuk password default" name="password" value="{{ old('password')  }}">
                                <i class="fa-solid fa-eye-slash toggle-password" data-target="password"></i>
                            </div>
                            @error('password')
                            <div class="invalid-feedback">
                                {{ $message }}
                            </div>
                            @enderror
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary text-dark" data-dismiss="modal">Tutup</button>
                    <button type="submit" class="btn btn-primary" form="FormCreate">Simpan</button>
                </div>
            </div>
        </div>
    </div>

    <!-- edit -->
    <div class="modal fade" id="Edit" tabindex="-1" role="dialog" aria-labelledby="editUserModalLabel"
         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="editUserModalLabel">Edit</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true" class="font-weight-normal">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="FormEdit" method="POST" action="" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')
                        <div class="form-group">
                            <label for="editnama" class="form-label">Nama</label>
                            <input type="text" class="form-control @error('name') is-invalid @enderror" id="editnama" placeholder="masukkan nama admin" name="name" value="{{ old('name')  }}">
                            @error('name')
                            <div class="invalid-feedback">
                                {{ $message }}
                            </div>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label for="editemail" class="form-label">Email</label>
                            <input type="email" class="form-control @error('email') is-invalid @enderror" id="editemail" placeholder="masukkan email admin" name="email" value="{{ old('email')  }}">
                            @error('email')
                            <div class="invalid-feedback">
                                {{ $message }}
                            </div>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label for="editusername" class="form-label">Username</label>
                            <input type="text" class="form-control @error('username') is-invalid @enderror" id="editusername" placeholder="masukkan username" name="username" value="{{ old('username')  }}">
                            @error('username')
                            <div class="invalid-feedback">
                                {{ $message }}
                            </div>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label for="editpassword" class="form-label">Password</label>
                            <div class="password-box">
                                <input type="password" class="form-control @error('password') is-invalid @enderror" id="editpassword" placeholder="kosongi jika tidak ingin merubah password" name="password" value="{{ old('password')  }}">
                                <i class="fa-solid fa-eye-slash toggle-password" data-target="editpassword"></i>
                            </div>
                            @error('password')
                            <div class="invalid-feedback">
                                {{ $message }}
                            </div>
                            @enderror
                        </div>
                        <input type="hidden" id="edit_id">
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary text-dark" data-dismiss="modal">Tutup</button>
                    <button type="submit" class="btn btn-primary" form="FormEdit">Simpan</button>
                </div>
            </div>
        </div>
    </div>
    {{--  create user  --}}

    <div class="main-content">
        <section class="section">
            <div class="section-header" style="display: flex; justify-content: space-between; align-items: center">
                <h1>Pengguna Admin</h1>
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#Create">Admin Baru</button>
            </div>

            <div class="section-body">
                <div class="row">
                    <div class="col-12">
                        <div class="card" id="id-table">
                            <div class="card-header">
                                <h4></h4>
                                <div class="card-header-form">
                                    <form>
                                        <div class="input-group">
                                            <input type="search" class="search form-control" placeholder="Search">
                                            <div class="input-group-btn">
                                                <span class="btn bg-primary text-white" style="cursor: text"><i class="fas fa-search"></i></span>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                            <div class="card-body">

                                <div class="table-responsive table-hover">
                                    <table class="table-striped table-md table" id="pegawaiTable">
                                        <thead>
                                        <tr>
                                            <th scope="col" style="width: 60px" class="sort asc" data-sort="no">#</th>
                                            <th scope="col" class="sort" data-sort="nama">Nama</th>
                                            <th scope="col" class="sort" data-sort="username">Username</th>
                                            <th scope="col" class="sort" data-sort="email">Email</th>
                                            <th scope="col" style="text-align: center; width: 120px">Action</th>
                                        </tr>
                                        </thead>
                                        <tbody class="list">
                                        <style>
                                            tbody td{
                                                vertical-align: middle!important;
                                            }
                                        </style>
                                        @foreach($data as $item)
                                            <tr>
                                                <td valign="middle" scope="row" class="no">{{ $loop->iteration }}</td>
                                                <td  valign="middle" class="nama"  scope="row">{{ $item->name  }}</td>
                                                <td  valign="middle" class="username"  scope="row">{{ $item->username  }}</td>
                                                <td  valign="middle" class="email"  scope="row">{{ $item->email  }}</td>
                                                <td  scope="row">
                                                    <div class="action d-flex justify-content-center align-items-center gap-1">
                                                        <button type="button" class="btn edit-data" data-id="{{ $item->id }}" data-toggle="modal"
                                                                data-target="#Edit">
                                                            <i class="fa-regular fa-pen-to-square"></i>
                                                        </button>
                                                        <button type="button" class="btn delete-data" data-id="{{ $item->id }}" data-toggle="modal"
                                                                data-target="#Delete">
                                                            <i class="fa-regular fa-trash-can"></i>
                                                        </button>
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforeach
                                        </tbody>
                                    </table>
                                </div>
                                <ul class="pagination"></ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('library/listjs/list.min.js') }}"></script>
    <script>
        const options = {
            valueNames: ['no', 'nama', 'username', 'email'],
            page: 10,
            pagination: true
        };

        const tableList = new List('id-table', options);

        $(document).on('click', '.edit-data', function(e) {
            e.preventDefault();
            let id = $(this).data('id');

            let nama = $(this).closest('tr').find('td:nth-child(2)').text();
            let username = $(this).closest('tr').find('td:nth-child(3)').text();
            let email = $(this).closest('tr').find('td:nth-child(4)').text();

            $('#editnama').val(nama);
            $('#editusername').val(username);
            $('#editemail').val(email);

            $("#FormEdit").attr('action', `/admin/user-admin/${id}`);
        });

        $(document).on('click', '.delete-data', function(e) {
            let id = $(this).data('id');
            $('#delete_id').val(id);
            $("#FormDelete").attr('action',
                `/admin/user-admin/${id}`);
        });

        // Toggle show/hide password
        $(document).on('click', '.toggle-password', function () {
            const targetId = $(this).data('target');
            const input = $('#' + targetId);
            if (input.attr('type') === 'password') {
                input.attr('type', 'text');
                $(this).removeClass('fa-eye-slash').addClass('fa-eye');
            } else {
                input.attr('type', 'password');
                $(this).removeClass('fa-eye').addClass('fa-eye-slash');
            }
        });
    </script>


    <!-- Page Specific JS File -->
@endpush