@extends('layouts.admin')

@section('title', 'Member')
@section('breadcrumb', 'admin.member')
@section('content')
    <div class="col-md-12">
        <div class="card">
            <div class="card-body">
                <x-common.create-button route="member.qr-code.create" />

                <table class="table table-bordered" id="datatable">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Name</th>
                            <th>Email</th>
                            <th>Status</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($member as $item)
                            <tr>
                                <td>
                                    {{ $loop->index + 1 }}
                                </td>
                                <td>
                                    {{ $item->name }}
                                </td>
                                <td>
                                    {{ $item->email }}
                                </td>
                                <td>
                                    <div class="form-group">
                                        <div class="custom-control custom-switch">
                                            <input type="checkbox" class="custom-control-input toggle-status"
                                                id="customSwitch{{ $item->id }}"
                                                {{ $item->is_verified ? 'checked' : '' }} data-id="{{ $item->id }}">
                                            <label class="custom-control-label" for="customSwitch{{ $item->id }}">
                                                @if ($item->is_verified)
                                                    Verified
                                                @else
                                                    Not Verified
                                                @endif
                                            </label>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <a href="{{ url('/images/e-sign/' . $item->file . '.png') }}" download>
                                        Download
                                    </a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        $(document).ready(function() {
            const Toast = Swal.mixin({
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 3000
            });

            $(document).on("change", ".toggle-status", function() {
                const checked = $(this).prop("checked");
                const id = $(this).attr("data-id");
                const dictStatus = [{
                    status: 1,
                    updatedTitle: "Verified",
                }, {
                    status: 0,
                    updatedTitle: "Not Verified",
                }];

                const labelElement = $(this).next();
                const toggleElement = $(this);

                const index = checked ? 0 : 1;

                $.ajax({
                    url: `{{ route('api.member.verify') }}/${id}`,
                    method: "PUT",
                    dataType: "JSON",
                    data: {
                        verified: dictStatus[index].status
                    },
                    success: function(res) {
                        Toast.fire({
                            icon: 'success',
                            title: 'User status was updated successfully!'
                        });
                        labelElement.html(dictStatus[index].updatedTitle);
                    },
                    error: function(err) {
                        const {
                            responseJSON
                        } = err;
                        Toast.fire({
                            icon: 'error',
                            title: responseJSON.message
                        });
                        toggleElement.prop('checked', !checked);
                    }
                })
            })
        });
    </script>
@endsection