@extends('app')

@section('content')
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-md-6">
                    <div class="row justify-content-start align-items-center">
                        <div class="col-auto">
                            <h1 class="m-0">Pengguna Aplikasi / Tidak Aktif</h1>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="#" class="text-decoration-none">Tanggal syawal</a></li>
                    </ol>
                </div>
                <div class="col-md-6">
                    <div class="row justify-content-end align-items-center">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <!-- Data Table -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex justify-content-end mb-3">
                            <form class="form-inline" onsubmit="return false;">
                                <div class="input-group">
                                    <button class="btn btn-sm " type="submit">Search:</button>
                                    <input id="search-input" class="form-control" type="search" placeholder="Search"
                                        aria-label="Search" style="width: auto;" onkeyup="searchTable()">
                                </div>
                            </form>
                        </div>

                        <table id="user-table" class="table table-bordered table-hover">
                            <thead>
                                <tr class="text-center">
                                    <th style="background-color: #5268B5; color: #fff; width: auto;">No</th>
                                    <th style="background-color: #5268B5; color: #fff; width: auto;">Gambar</th>
                                    <th style="background-color: #5268B5; color: #fff; width: auto;">Nama</th>
                                    <th style="background-color: #5268B5; color: #fff; width: auto;">No. Handphone</th>
                                    <th style="background-color: #5268B5; color: #fff; width: auto;">Status</th>
                                    <th style="background-color: #5268B5; color: #fff; width: auto;">Aksi</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($users as $user)
                                    <tr>
                                        <td class="text-center">{{ $loop->iteration }}</td>
                                        <td><img src="{{ $user->photo }}" alt="{{ $user->name }}"
                                                style="width: 122px; height: 58px;"></td>
                                        <td class="text-center">{{ $user->name }}</td>
                                        <td class="text-center">{{ $user->phone }}</td>
                                        <td class="text-center">{{ $user->status ? 'Aktif' : 'Tidak Aktif' }}</td>
                                        <td>
                                            <button class="btn btn-warning btn-block"
                                                onclick="confirmUpdateStatus({{ $user->id }}, 'Aktifkan')">Aktifkan</button>
                                            <form id="update-status-form-{{ $user->id }}"
                                                action="{{ route('Auth.updatestatus', ['id' => $user->id]) }}"
                                                method="POST" style="display:none;">
                                                @method('PUT')
                                                @csrf
                                                <input type="hidden" name="status" value="1">
                                            </form>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>

                        {{-- pagination  --}}
                        <div
                            class="d-flex justify-content-between align-items-center border-top border-gray-200 bg-white px-4 py-3">
                            <div>
                                <p class="text-sm text-gray-700 mb-0">
                                    Showing
                                    <span class="font-weight-bold">{{ $users->firstItem() }}</span>
                                    to
                                    <span class="font-weight-bold">{{ $users->lastItem() }}</span>
                                    of
                                    <span class="font-weight-bold">{{ $users->total() }}</span>
                                    results
                                </p>
                            </div>
                            <div class="ms-3">
                                <nav aria-label="Pagination">
                                    <ul class="pagination mb-0">
                                        <!-- Tombol Previous -->
                                        @if ($users->onFirstPage())
                                            <li class="page-item disabled">
                                                <span class="page-link" aria-disabled="true">Previous</span>
                                            </li>
                                        @else
                                            <li class="page-item">
                                                <a class="page-link" href="{{ $users->previousPageUrl() }}"
                                                    tabindex="-1">Previous</a>
                                            </li>
                                        @endif

                                        <!-- Nomor Halaman Aktif -->
                                        <li class="page-item" aria-current="page">
                                            <span class="page-link">{{ $users->currentPage() }}</span>
                                        </li>

                                        <!-- Tombol Next -->
                                        @if ($users->hasMorePages())
                                            <li class="page-item">
                                                <a class="page-link" href="{{ $users->nextPageUrl() }}">Next</a>
                                            </li>
                                        @else
                                            <li class="page-item disabled">
                                                <span class="page-link" aria-disabled="true">Next</span>
                                            </li>
                                        @endif
                                    </ul>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- End Data Table -->
    </div>

    <script>
        function searchTable() {
            var input, filter, table, tr, td, i, j, txtValue;
            input = document.getElementById("search-input");
            filter = input.value.toLowerCase();
            table = document.getElementById("user-table");
            tr = table.getElementsByTagName("tr");

            for (i = 1; i < tr.length; i++) {
                tr[i].style.display = "none";
                td = tr[i].getElementsByTagName("td");
                for (j = 0; j < td.length; j++) {
                    if (td[j]) {
                        txtValue = td[j].textContent || td[j].innerText;
                        if (txtValue.toLowerCase().indexOf(filter) > -1) {
                            tr[i].style.display = "";
                            break;
                        }
                    }
                }
            }
        }

        function confirmUpdateStatus(userId, newStatus) {
            Swal.fire({
                title: 'Anda yakin?',
                text: newStatus ? "Pengguna akan diaktifkan kembali." : "Pengguna akan dinonaktifkan.",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Ya, lanjutkan!'
            }).then((result) => {
                if (result.isConfirmed) {
                    document.getElementById('update-status-form-' + userId).submit();
                }
            });
        }

        @if (session('success'))
            Swal.fire({
                title: 'Berhasil!',
                text: "{{ session('success') }}",
                icon: 'success',
                confirmButtonText: 'OK'
            });
        @endif

        @if (session('error'))
            Swal.fire({
                title: 'Error!',
                text: "{{ session('error') }}",
                icon: 'error',
                confirmButtonText: 'OK'
            });
        @endif
    </script>
@endsection