@extends('layouts.app')

@section('content')
    <div class="container px-4 mb-4">
        <h1 class="mt-4">Kelola Akun</h1>
    </div>

    <div id="tambah-akun" class="modal fade" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <!-- BEGIN: Modal Header -->
                <div class="modal-header" style="display: flex; justify-content: center;">
                    <h2 class="fw-medium fs-base">Tambah Akun Admin</h2>
                </div> <!-- END: Modal Header -->
                <!-- BEGIN: Modal Body -->
                <form action="{{ route('user-management.store') }}" method="POST">
                    <div class="modal-body grid columns-12 gap-4 gap-y-3">
                        @csrf
                        <div class="g-col-12 g-col-sm-6">
                            <label for="modal-form-nama" class="form-label">Nama Lengkap</label>
                            <input id="modal-form-nama" autocomplete="name" name="name" type="text"
                                class="form-control" placeholder="Nama Lengkap">
                        </div>
                        <div class="g-col-12 g-col-sm-6">
                            <label for="modal-form-username" class="form-label">Username</label>
                            <input id="modal-form-username" autocomplete="username" name="username" type="username"
                                class="form-control" placeholder="Username">
                        </div>
                        <div class="g-col-12 g-col-sm-6">
                            <label for="modal-form-email" class="form-label">Email</label>
                            <input id="modal-form-email" autocomplete="email" name="email" type="email"
                                class="form-control" placeholder="example@gmail.com">
                        </div>
                        <div class="g-col-12 g-col-sm-6 align-content-center">
                            <label for="modal-form-hp" class="form-label">No Hp</label>
                            <input id="modal-form-hp" autocomplete="phone" name="phone" type="text"
                                class="form-control" placeholder="0812.....">
                        </div>
                    </div> <!-- END: Modal Body -->
                    <!-- BEGIN: Modal Footer -->
                    <div class="modal-footer text-end"> <button type="button" data-bs-dismiss="modal"
                            class="btn btn-outline-secondary w-20 me-1">Cancel</button> <button type="submit"
                            class="btn btn-primary w-20">Simpan</button> </div> <!-- END: Modal Footer -->
                </form>
            </div>
        </div>
    </div>


    <div class="container">
        <div class="card mb-4">
            <div class="card-header d-flex justify-content-between align-items-center">
                <div>
                    <i class="fas fa-table me-1"></i>
                    Daftar Akun Pengguna
                </div>
                <div class="w-auto w-sm-auto d-flex mt-0 mt-sm-0">
                    <button data-bs-toggle="modal" data-bs-target="#tambah-akun" class="btn btn-primary shadow-md">
                        <div class="d-flex justify-content-center align-items-center gap-2"><i class="fa-solid fa-plus"></i>
                            <span>Tambah</span>
                        </div>
                    </button>
                </div>
            </div>
            <div class="card-body">
                <div style="border: 1px solid black;" class="rounded-2">
                    <table class="table table-sm table-striped table-hover">
                        <thead class="font-weight-bold text-uppercase">
                            <tr>
                                <th class="text-center">No</th>
                                <th class="text-center">Username</th>
                                <th class="text-center">Hp</th>
                                <th class="text-center">Email</th>
                                <th class="text-center">Role</th>
                                <th class="text-center">More</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($user as $item)
                                <tr>
                                    <td class="text-center">{{ $loop->iteration }}</td>
                                    <td class="text-center">{{ $item->username }}</td>
                                    <td class="text-center">{{ $item->phone }}</td>
                                    <td class="text-center">{{ $item->email }}</td>
                                    <td class="text-center">{{ $item->role }}</td>
                                    <td>
                                        <div class="d-flex justify-content-center align-items-center">
                                            <a data-bs-toggle="modal" data-bs-target="#edit-akun-{{ $item->id }}"
                                                class="d-flex align-items-center me-2" href="#"
                                                style="text-decoration: none;">
                                                <i data-feather="edit" class="w-4 h-4 me-1"></i> <span
                                                    class="text-primary">Edit</span>
                                            </a>
                                            <a data-bs-toggle="modal" data-bs-target="#delete-akun-{{ $item->id }}"
                                                class="d-flex align-items-center text-danger me-2" href="#"
                                                style="text-decoration: none;">
                                                <i data-feather="trash-2" class="w-4 h-4 me-1"></i> Delete
                                            </a>
                                        </div>
                                    </td>
                                </tr>

                                {{-- modal-delete --}}
                                <div id="delete-akun-{{ $item->id }}" class="modal fade" tabindex="-1"
                                    aria-hidden="true">
                                    <div class="modal-dialog modal-dialog-centered">
                                        <div class="modal-content">
                                            <div class="modal-body p-0">
                                                <div class="p-5 text-center"> <i data-feather="x-circle"
                                                        class="w-16 h-16 text-theme-6 mx-auto mt-3"></i>
                                                    <div class="fs-3xl mt-5">Are you sure?</div>
                                                    <div class="text-gray-600 mt-2">Apakah Anda benar ingin menghapus Akun
                                                        {{ $item->nama_lengkap }}?
                                                        <br>Proses ini tidak dapat dibatalkan.
                                                    </div>
                                                </div>
                                                <form action="{{ route('user-management.destroy', ['id' => $item->id]) }}"
                                                    method="POST">
                                                    @csrf
                                                    @method('DELETE')
                                                    <div class="px-5 pb-8 text-center"> <button type="button"
                                                            data-bs-dismiss="modal"
                                                            class="btn btn-outline-secondary w-24 me-1">Batal</button>
                                                        <button type="submit" class="btn btn-danger w-24">Hapus</button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div id="edit-akun-{{ $item->id }}" class="modal fade" tabindex="-1"
                                    aria-hidden="true">
                                    <div class="modal-dialog modal-dialog-centered modal-lg">
                                        <div class="modal-content">
                                            <!-- BEGIN: Modal Header -->
                                            <div class="modal-header" style="display: flex; justify-content: center;">
                                                <h2 class="fw-medium fs-base">Edit Akun Admin</h2>
                                            </div> <!-- END: Modal Header -->
                                            <!-- BEGIN: Modal Body -->
                                            <form action="{{ route('user-management.update', ['id' => $item->id]) }}"
                                                method="POST">
                                                <div class="modal-body grid columns-12 gap-4 gap-y-3">
                                                    @csrf
                                                    @method('PATCH')
                                                    <div class="g-col-12 g-col-sm-6">
                                                        <label for="modal-form-nama-{{ $item->id }}"
                                                            class="form-label">Nama
                                                            Lengkap</label>
                                                        <input id="modal-form-nama-{{ $item->id }}" name="name"
                                                            type="text" value="{{ $item->name }}"
                                                            class="form-control" placeholder="Nama Lengkap">
                                                    </div>
                                                    <div class="g-col-12 g-col-sm-6">
                                                        <label for="modal-form-username-{{ $item->id }}"
                                                            class="form-label">Username</label>
                                                        <input id="modal-form-username-{{ $item->id }}"
                                                            name="username" value="{{ $item->username }}"
                                                            type="username" class="form-control" placeholder="Username">
                                                    </div>
                                                    <div class="g-col-12 g-col-sm-6">
                                                        <label for="modal-form-email-{{ $item->id }}"
                                                            class="form-label">Email</label>
                                                        <input id="modal-form-email-{{ $item->id }}" name="email"
                                                            value="{{ $item->email }}" type="email"
                                                            class="form-control" placeholder="example@gmail.com">
                                                    </div>
                                                    <div class="g-col-12 g-col-sm-6 align-content-center">
                                                        <label for="modal-form-hp-{{ $item->id }}"
                                                            class="form-label">No
                                                            Hp</label>
                                                        <input id="modal-form-hp-{{ $item->id }}" name="phone"
                                                            value="{{ $item->phone }}" type="text"
                                                            class="form-control" placeholder="0812.....">
                                                    </div>
                                                    <div class="g-col-12 g-col-sm-6">
                                                        <label for="modal-form-role-{{ $item->id }}"
                                                            class="form-label">Role</label>
                                                        <select id="modal-form-role-{{ $item->id }}" name="role"
                                                            class="form-control">
                                                            <option value="superadmin"
                                                                {{ $item->role === 'superadmin' ? 'selected' : '' }}>
                                                                SuperAdmin</option>
                                                            <option value="admin"
                                                                {{ $item->role === 'admin' ? 'selected' : '' }}>
                                                                Admin</option>
                                                            <option value="user"
                                                                {{ $item->role === 'user' ? 'selected' : '' }}>
                                                                User
                                                            </option>
                                                        </select>
                                                    </div>

                                                </div> <!-- END: Modal Body -->
                                                <!-- BEGIN: Modal Footer -->
                                                <div class="modal-footer text-end"> <button type="button"
                                                        data-bs-dismiss="modal"
                                                        class="btn btn-outline-secondary w-20 me-1">Cancel</button> <button
                                                        type="submit" class="btn btn-primary w-20">Simpan</button> </div>
                                                <!-- END: Modal Footer -->
                                            </form>
                                        </div>
                                    </div>
                                </div> <!-- END: Modal Content -->
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection