@extends('main-admin')

@section('content')
 <div class="container-xxl flex-grow-1 container-p-y">
    <div class="col-lg-12 mb-4 order-0">
    </div>
@if(session('success'))
<div class="alert alert-success">
    {{ session('success') }}
</div>
@endif
@if(session('error'))
<div class="alert alert-danger">
    {{ session('error') }}
</div>
@endif
<div class="card mb-3">
    <div class="card-body">
        <h4 class="mb-3 header-title mt-0">Tambah Member</h4>
        <form id="addMemberForm" action="{{ route('member.post') }}" method="POST">
            @csrf

            <div class="mb-3 row">
                <label for="nama" class="col-lg-2 col-form-label">Nama</label>
                <div class="col-lg-10">
                    <input type="text" class="form-control @error('nama') is-invalid @enderror" id="nama" name="nama" value="{{ old('nama') }}">
                    @error('nama')
                    <div class="invalid-feedback">
                        {{ $message }}
                    </div>
                    @enderror
                </div>
            </div>

            <div class="mb-3 row">
                <label for="username" class="col-lg-2 col-form-label">Username</label>
                <div class="col-lg-10">
                    <input type="text" class="form-control @error('username') is-invalid @enderror" id="username" name="username" value="{{ old('username') }}">
                    @error('username')
                    <div class="invalid-feedback">
                        {{ $message }}
                    </div>
                    @enderror
                </div>
            </div>

            <div class="mb-3 row">
                <label for="password" class="col-lg-2 col-form-label">Password</label>
                <div class="col-lg-10">
                    <input type="password" class="form-control @error('password') is-invalid @enderror" id="password" name="password" value="{{ old('password') }}">
                    @error('password')
                    <div class="invalid-feedback">
                        {{ $message }}
                    </div>
                    @enderror
                </div>
            </div>

            <div class="mb-3 row">
                <label for="no_wa" class="col-lg-2 col-form-label">No Whatsapp</label>
                <div class="col-lg-10">
                    <input type="number" class="form-control @error('no_wa') is-invalid @enderror" id="no_wa" name="no_wa" value="{{ old('no_wa') }}">
                    @error('no_wa')
                    <div class="invalid-feedback">
                        {{ $message }}
                    </div>
                    @enderror
                </div>
            </div>

            <div class="mb-3 row">
                <label for="role" class="col-lg-2 col-form-label">Role</label>
                <div class="col-lg-10">
                    <select class="form-control @error('role') is-invalid @enderror" id="role" name="role">
                        <option value="Member">Member</option>
                        <option value="Platinum">Platinum</option>
                        <option value="Gold">Gold</option>
                    </select>
                    @error('role')
                    <div class="invalid-feedback">
                        {{ $message }}
                    </div>
                    @enderror
                </div>
            </div>

            <div class="text-end">
                <button type="button" class="btn btn-danger" onclick="confirmAddMember()">Buat Member</button>
            </div>
        </form>
    </div>
</div>


<!--<div class="card mb-3">-->
<!--    <div class="card-body">-->
<!--        <h4 class="mb-3 header-title mt-0">Kirim saldo</h4>-->
<!--        <form action="{{ route('saldo.post') }}" method="POST">-->
<!--            @csrf-->

<!--            <div class="mb-3 row">-->
<!--                <label class="col-lg-2 col-form-label" for="example-fileinput">Username</label>-->
<!--                <div class="col-lg-10">-->
<!--                    <input type="text" class="form-control @error('username') is-invalid @enderror" value="{{ old('username') }}" name="username">-->
<!--                    @error('username')-->
<!--                    <div class="invalid-feedback">-->
<!--                        {{ $message }}-->
<!--                    </div>-->
<!--                    @enderror-->
<!--                </div>-->
<!--            </div>-->

<!--            <div class="mb-3 row">-->
<!--                <label for="" class="col-lg-2 col-form-label">Jumlah</label>-->
<!--                <div class="col-lg-10">-->
<!--                    <input type="number" class="form-control @error('balance') is-invalid @enderror" value="{{ old('balance') }}" name="balance">-->
<!--                    @error('balance')-->
<!--                    <div class="invalid-feedback">-->
<!--                        {{ $message }}-->
<!--                    </div>-->
<!--                    @enderror-->
<!--                </div>-->
<!--            </div>-->

<!--            <button type="submit" class="btn btn-danger">Kirim</button>-->
<!--        </form>-->
<!--    </div>-->
<!--</div>-->
<div class="row">
    <div class="col-lg-12">
        <div class="card mb-3">
            <div class="card-body">
                <div id="loadingSpinner" class="text-center">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                </div>
                <div class="table-responsive d-none" id="dataTableContainer">
                    <table id="userTable" class="table table-dark table-bordered table-striped m-0">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Nama</th>
                                <th>Username</th>
                                <th>No Whatsapp</th>
                                <th>Saldo</th>
                                <th>Level</th>
                                <th>Tanggal Dibuat</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach( $users as $user )
                            <tr>
                                <th scope="row">{{ $user->id }}</th>
                                <td>{{ $user->name }}</td>
                                <td>{{ $user->username }}</td>
                                <td>{{ $user->no_wa }}</td>
                                <td>Rp. {{ number_format($user->balance, 0, ',', '.') }}</td>
                                <td>{{ $user->role }}</td>
                                <td>{{ $user->created_at }}</td>
                                <td>
                                    <button class="btn btn-danger mt-2" onclick="confirmDelete('{{ route('member.delete', [$user->id]) }}')"><i class="bx bxs-message-alt-x"></i></button>
                                    <button class="btn btn-info mt-2" onclick="confirmEdit('{{ $user->username }}', '{{ route('member.detail', [$user->id]) }}')"><i class="bx bxs-edit"></i></button>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
$(document).ready(function() {
    setTimeout(function() {
        $('#loadingSpinner').addClass('d-none');
        $('#dataTableContainer').removeClass('d-none');
        $('#userTable').DataTable();
    }, 500); // Adjust the delay as needed
});
</script>


<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
   function confirmAddMember() {
        Swal.fire({
            title: 'Apakah Anda yakin?',
            text: "Pastikan data member yang anda buat sudah benar!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Ya, buat!',
            cancelButtonText: 'Batal'
        }).then((result) => {
            if (result.isConfirmed) {
                document.getElementById('addMemberForm').submit();
            }
        })
    }
    
    function confirmDelete(url) {
        Swal.fire({
            title: 'Apakah Anda yakin?',
            text: "Anda tidak akan bisa mengembalikan ini!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Ya, hapus!',
            cancelButtonText: 'Batal'
        }).then((result) => {
            if (result.isConfirmed) {
                window.location.href = url;
            }
        })
    }

    function confirmEdit(username, url) {
        Swal.fire({
            title: 'Edit User',
            text: `Apakah Anda yakin ingin mengedit pengguna ${username}?`,
            icon: 'info',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Ya, edit!',
            cancelButtonText: 'Batal'
        }).then((result) => {
            if (result.isConfirmed) {
                openModal(username, url);
            }
        })
    }

    function openModal(name, link) {
        var myModal = new bootstrap.Modal($('#modal-detail'))
        $.ajax({
            type: "GET",
            url: link,
            beforeSend: function() {
                $('#modal-detail-title').html(name);
                $('#modal-detail-body').html('Loading...');
            },
            success: function(result) {
                $('#modal-detail-title').html(name);
                $('#modal-detail-body').html(result);
            },
            error: function() {
                $('#modal-detail-title').html(name);
                $('#modal-detail-body').html('There is an error...');
            }
        });
        myModal.show();
    }
</script>

<script type="text/javascript">
    $(document).ready(function(){
        $('.table').DataTable({
            order: [], 
            columnDefs: [{
                targets: 0, 
                orderable: true, 
                orderData: [0], 
                orderSequence: ['desc'] 
            }]
        });
    });
</script>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" id="modal-detail" style="border-radius:7%">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="modal-detail-title"></h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="modal-detail-body"></div>
        </div>
    </div>
</div>
</div>

@endsection