@extends("common.layout-popup")

@section("header")

@endsection

@section("page-title", "기기관리")
@section("content")

<section>
    <header>회원기기관리</header>
    <main>
        <form action="" method="POST" class="default">
            <div class="row col-12 mx-0 px-0">
                <label class="col-1 mx-0 px-0">기기제한여부</label>
                <div class="col-3 mx-0 px-0">
                     <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" role="switch" id="is_device_unlimited" name="is_device_unlimited" value="1" @checked($user->is_device_unlimited == 1)>
                        <label class="form-check-label" for="activated">
                            기기제한해제
                        </label>
                    </div>
                </div>
            </div>
        </form>

        <table class="table table-striped table-hover mt-5">
            <thead>
                <tr>
                    <th>번호</th>
                    <th>등록일시</th>
                    <th>기기명</th>
                    <th>Kollus Player ID</th>
                    <th>상태</th>
                    <th>관리</th>
                </tr>
            </thead>
            <tbody>
            @foreach ($user->userDevices as $userDevice)
                <tr>
                    <td>{{ $userDevice->id }}</td>
                    <td>
                        <div>{{ !empty($userDevice->created_at) ? explode(" ", $userDevice->created_at)[0] : "" }}</div>
                        <div>{{ !empty($userDevice->created_at) ? explode(" ", $userDevice->created_at)[1] : "" }}</div>
                    </td>
                    <td>{{ $userDevice->device_name }}</td>
                    <td>{{ $userDevice->kollus_player_id }}</td>
                    <td>{{ $userDevice->block == 1 ? "사용자삭제" : "사용중" }}</td>
                    <td>
                        @if ( $userDevice->block == 0 )
                            <button class="btn btn-sm btn-danger" onclick="deleteDevice(this, {{ $userDevice->id }})">삭제</button>
                        @endif
                    </td>
                </tr>
            @endforeach
        </tbody>
        </table>
    </body>
    <footer>

    </footer>
</section>



@endsection


@push("script")
<script>
    function onCloseEvent() {
        window.close();
    }

    // 등록 기기 삭제
    function deleteDevice(elem, deviceId) {
        alertify.confirm('등록 기기 삭제', "삭제 하시겠습니까? 삭제 후 복구할 수 없습니다.",
            async () => {
                const deleteUserDeviceUrl = "{{ route('api.user.delete-device') }}";

                const result = await customFetch(deleteUserDeviceUrl + "/" + deviceId, {
                    method: "DELETE",
                    headers: { "Content-Type" : "application/json"}
                });

                if ( result.status ) {
                    alertify.alert("확인", "삭제되었습니다. ", () => { location.reload() } )
                }
            },
            () => {return;}
        ).set('labels',{ok:'확인',cancel:'취소'});
    }


    $(function() {
        $('#is_device_unlimited').on("change", async function() {
            const href = "{{ route('api.user.change-device-unlimited', ['userId' => $user->id, 'flag' => ':flag']) }}"
            const flag = $(this).is(":checked") ? 1 : 0;
            const result = await customFetch(href.replace(":flag", flag), {
                method: "POST",
                headers: { "Content-Type" : "application/json"}
            });

            if ( result.status ) {
                alertify.alert("확인", "변경되었습니다. ", () => { } )
            }
        })
    })
</script>
@endpush