@extends('layouts.master')

@section('content')

<div class="page-header mb-3">

    <div class="row">

        <div class="col-lg-12 col-md-12 col-12">

            <ul class="breadcrumb">

                <li class="breadcrumb-item">

                    <a href="#">{{ $title }}</a>

                </li>

                <li class="breadcrumb-item active">{{ $subtitle }}</li>

            </ul>

        </div>

    </div>

</div>

    <div class="row">

        <div class="col-sm-12">

            <div class="card">

                <div class="card-header d-md-flex border-bottom-1">

                    <div class="flex-grow-1">

                        <a href="{{ route('users/create') }}" class="btn btn-primary"><i class="feather-16" data-feather="plus-circle"></i> Tambah User</a>

                    </div>

                    {{-- <div class="mt-3 mt-md-0">

                        <a href="#!" class="btn  btn-white ms-2"><i class="featherbtn-16" data-feather="download"></i>

                            Import</a>

                        <a href="#!" class="btn  btn-white ms-2"><i class="featherbtn-16" data-feather="upload"></i>

                            Export</a>

                    </div> --}}

                </div>

                <div class="card-body">

                    <div class="table-responsive">

                        <table class="datatable table table-stripped">

                            <thead>

                                <tr>

                                    <th>No</th>

                                    <th>Name</th>

                                    <th>Email</th>

                                    <th>Status</th>

                                    <th>Flag Login</th>

                                    {{-- <th>Date Join</th> --}}

                                    <th class="text-center">Action</th>

                                </tr>

                            </thead>

                            <tbody>

                                @foreach ($listUser as $u)

                                <tr>

                                    <td>{{ $loop->iteration }}</td>

                                    <td class="ps-0">

                                        <h2 class="table-avatar">

                                            <a href="general.html" class="avatar avatar-sm me-2"><img

                                                    class="avatar-img rounded-circle"

                                                    src="{{ asset('storage/'.$u->photo) }}" alt="User Image"></a>

                                            <a>{{ $u->name }} <span>{{ $u->username }}</span></a>

                                        </h2>

                                    </td>

                                    <td>{{ $u->email }}</td>

                                    @if ($u->is_active == 1)

                                        <td><span class="badge badge-success"><i class="featherbtn-16 text-white" data-feather="check-circle"></i></span>

                                            {{-- <a href="#" class="badge badge-primary"><i class="featherbtn-16 text-white" data-feather="eye"></i></a> --}}

                                        </td>

                                    @else

                                        <td><span class="badge badge-danger"><i class="featherbtn-16 text-white" data-feather="x-circle"></i></span>

                                            {{-- <a href="#" class="badge badge-primary"><i class="featherbtn-16 text-white" data-feather="eye"></i></a> --}}

                                        </td>

                                    @endif

                                    @if ($u->is_login == 1)

                                    <td><span class="badge badge-success flagIcon" name="{{ $u->username }}" id="{{ $u->id }}"><i class="featherbtn-16 text-white" data-feather="check-circle"></i> Login</span>

                                        {{-- <a href="#" class="badge badge-primary"><i class="featherbtn-16 text-white" data-feather="eye"></i></a> --}}

                                    </td>

                                    @else

                                        <td><span class="badge badge-danger"><i class="featherbtn-16 text-white" data-feather="x-circle"></i> Logout</span>

                                            {{-- <a href="#" class="badge badge-primary"><i class="featherbtn-16 text-white" data-feather="eye"></i></a> --}}

                                        </td>

                                    @endif

                                    {{-- <td>2011/04/25</td> --}}

                                    <td class="text-center">

                                        <div class="dropdown">

                                            <a data-bs-toggle="dropdown">

                                                <i class="featherbtn-16" data-feather="more-vertical"

                                                    class="icon-xs"></i>

                                            </a>

                                            <div class="dropdown-menu">

                                                <a class="dropdown-item" href="{{ route('users/edit', $u->username) }}"><i class="featherbtn-16" data-feather="edit"></i> Edit</a>

                                                <a href="#" name="{{ $u->username }}" id="{{ $u->id }}" class="dropdown-item deleteIcon"><i class="featherbtn-16" data-feather="trash"></i> Delete</a>

                                            </div>

                                        </div>

                                    </td>

                                </tr>

                            @endforeach

                            </tbody>

                        </table>

                    </div>

                </div>

            </div>

        </div>

    </div>

    @section('script')

        <script>

        $(function(){

            // delete user ajax request

        $(document).on('click', '.deleteIcon', function(e) {

            e.preventDefault();

            let id = $(this).attr('id');

            let name = $(this).attr('name');

            let csrf = '{{ csrf_token() }}';

            Swal.fire({

            title: 'Apakah anda yakin?',

            text: "Menghapus data user : "+name+" !!",

            icon: "warning",

            showCancelButton: true,

            confirmButtonColor: "#3085d6",

            cancelButtonColor: "#d33",

            confirmButtonText: "Delete user!"

            }).then((result) => {

            if (result.isConfirmed) {

                $.ajax({

                url: '{{ route('users/delete') }}',

                method: 'delete',

                data: {

                    id: id,

                    _token: csrf

                },

                success: function(response) {

                    console.log(response);

                    let timerInterval;

                        Swal.fire({

                        title: 'Deleted!',

                        text: "Data user berhasil dihapus!!",

                        icon: 'success',

                        timer: 2500,

                        timerProgressBar: true,

                        showConfirmButton:false,

                        willClose: () => {

                            clearInterval(timerInterval);

                        }

                        }).then((result) => {

                            window.location.reload();

                        });

                }

            })

            }

            });

        });



            // delete user ajax request

            $(document).on('click', '.flagIcon', function(e) {

            e.preventDefault();

            let id = $(this).attr('id');

            let name = $(this).attr('name');

            let csrf = '{{ csrf_token() }}';

            Swal.fire({

            title: 'Apakah anda yakin?',

            text: "Mengapus login user : "+name+" !!",

            icon: "warning",

            showCancelButton: true,

            confirmButtonColor: "#3085d6",

            cancelButtonColor: "#d33",

            confirmButtonText: "Hapus login!"

            }).then((result) => {

            if (result.isConfirmed) {

                $.ajax({

                url: '{{ route('users/flag-login') }}',

                method: 'post',

                data: {

                    id: id,

                    _token: csrf

                },

                success: function(response) {

                    console.log(response);

                    let timerInterval;

                        Swal.fire({

                        title: 'Deleted!',

                        text: "Data login user berhasil dihapus!!",

                        icon: 'success',

                        timer: 2500,

                        timerProgressBar: true,

                        showConfirmButton:false,

                        willClose: () => {

                            clearInterval(timerInterval);

                        }

                        }).then((result) => {

                            window.location.reload();

                        });

                    }

                })

            }

            });

        });



        });

        </script>

    @endsection

@endsection