@extends('admin.layouts.app')
@section('panel')
    <div class="row">
        <div class="col-lg-12">
            <div class="card  ">
                <div class="card-body p-0">
                    <div class="table-responsive--md  table-responsive" id="device-table">
                        <table class="table table--light style--two">
                            <thead>
                                <tr>
                                    <th>@lang('Name')</th>
                                    <th>@lang('Model')</th>
                                    <th>@lang('Device ID')</th>
                                    <th>@lang('Android Verison')</th>
                                    <th>@lang('App Version')</th>
                                    <th>@lang('Status')</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($allDevice as $device)
                                    <tr class="device-{{ $device->device_id }}">
                                        <td>
                                            <strong>{{ __($device->device_name) }}</strong>
                                        </td>
                                        <td>{{ __(@$device->device_model) }}</td>
                                        <td>{{ __(@$device->device_id) }}</td>
                                        <td>{{ __(@$device->android_version) }}</td>
                                        <td>{{ __(@$device->app_version) }}</td>
                                        <td class="device-status">
                                            @if ($device->status)
                                                <span class="badge badge--success">@lang('Connected')</span>
                                            @else
                                                <span class="badge badge--danger">@lang('Disconnected')</span>
                                            @endif
                                        </td>
                                    </tr>
                                @empty
                                    <tr class="empty-message-row">
                                        <td class="text-muted text-center" colspan="100%">{{ __($emptyMessage) }}</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
                @if ($allDevice->hasPages())
                    <div class="card-footer py-4">
                        {{ paginateLinks($allDevice) }}
                    </div>
                @endif
            </div>
        </div>
    </div>

    <div class="modal fade modal-lg" id="modal">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <div>
                        <h4 class="modal-title">@lang('Connect your device')</h4>
                        <span class=" text--small">@lang('Follow the below steps to connect your device smoothly')</span>
                    </div>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                        <i class="las la-times"></i>
                    </button>
                </div>
                <div class="modal-body p-0">
                    <ul class="list-group mb-3 list-group-flush list-group-numbered  mt-0">
                        <li class="list-group-item">
                            @lang('Download the ') {{ gs('site_name') }} @lang('APK file from the')
                            <a href="{{ asset('assets/files/apk/smslab.apk') }}" download>
                                @lang('here') <i class="las la-download"></i>
                            </a>
                        </li>
                        <li class="list-group-item"> @lang('Install our SMSLab android app on your mobile device.')</li>
                        <li class="list-group-item"> @lang('Scan the below QR code to connect your device.')</li>
                    </ul>
                    <div class="text-center pb-3">
                        <img src="{{ $qrCodeImgSrc }}" class="b--5 p-3 border--primary rounded" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="custom--loader d-none">
        <div class="custom--loader-content text-center">
            <div class="progress"></div>
            <span>@lang('A device is connecting to the system')</span>
        </div>
    </div>
@endsection


@push('breadcrumb-plugins')
    <button type="button" class="btn btn-outline--primary btn-sm addBtn">
        <i class="las la-plus"></i> @lang('Add Device')
    </button>
@endpush

@push('script')
    <script src="{{ asset('assets/admin/js/vendor/pusher.min.js') }}"></script>
    <script src="{{ asset('assets/admin/js/broadcasting.js') }}"></script>

    <script>
        "use strict";

        (function($) {
            $('.addBtn').on('click', function(e) {
                $("#modal").modal('show');
            });
            const pusherConnection = (eventName) => {
                pusher.connection.bind('connected', () => {
                    const SOCKET_ID = pusher.connection.socket_id;
                    const CHANNEL_NAME = `private-${eventName}`;
                    pusher.config.authEndpoint = makeAuthEndPointForPusher(SOCKET_ID, CHANNEL_NAME);
                    let channel = pusher.subscribe(CHANNEL_NAME);
                    channel.bind('pusher:subscription_succeeded', function() {
                        channel.bind(eventName, function(data) {
                            if (eventName == 'device-logout') {
                                deviceLogOut(data.deviceId)
                            } else {
                                newDeviceHtml(data.device)
                            }
                        })
                    });
                });
            };

            //device logout event lisiten
            pusherConnection('device-logout');

            //device add eveent lisiten
            pusherConnection('device-add');

            const newDeviceHtml = device => {
                let exitsDevice = $("#device-table").find(`tbody .device-${device.device_id}`);
                $(".custom--loader").find("span").text("@lang('A device is connecting to the system')");
                $(".custom--loader").removeClass('d-none');

                setTimeout(() => {

                    $(".custom--loader").addClass('d-none');
                    $(".modal").find(".modal-header button").click();

                    if (exitsDevice.length > 0) {
                        $("#device-table").find(`tbody .device-${device.device_id} .device-status`)
                            .html(`<span class="badge badge--success">@lang('Connected')</span>`);
                    } else {
                        let html = `
                        <tr class="device-${device.device_id}">
                            <td>
                                <strong>${device.device_name}</strong>
                            </td>
                            <td> ${device.device_model}</td>
                            <td> ${device.device_id}</td>
                            <td>${device.android_version}</td>
                            <td>${device.app_version}</td>
                            <td  class="device-status">
                                <span class="badge badge--success">@lang('Connected')</span>
                            </td>
                        </tr>`;
                        $("#device-table").find("tbody").prepend(html);
                        $("#device-table").find(".empty-message-row").remove();
                    }
                }, 3000);
            }

            const deviceLogOut = deviceId => {
                $(".custom--loader").find("span").text("@lang('A device is disconnecting to the system')");
                $(".custom--loader").removeClass('d-none');
                setTimeout(() => {
                    $(".custom--loader").addClass('d-none');
                    $(".modal").find(".modal-header button").click();
                    $("#device-table").find(`tbody .device-${deviceId} .device-status`)
                        .html(`<span class="badge badge--danger">@lang('Disconnected')</span>`);
                }, 3000);
            }
        })(jQuery);
    </script>
@endpush


@push('style')
    <style>
        .custom--loader {
            position: fixed;
            width: 100%;
            height: 100%;
            background: #00000070;
            z-index: 9999999;
            left: 0;
            top: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .progress {
            width: 100.8px;
            height: 16.8px;
            -webkit-mask: linear-gradient(90deg, #474bff 70%, #0000 0) left/20% 100%;
            background: linear-gradient(#474bff 0 0) left/0% 100% no-repeat #dbdcef;
            animation: progress-422c3u 2s infinite steps(6);
            width: 100%;
        }

        @keyframes progress-422c3u {
            100% {
                background-size: 120% 100%;
            }
        }

        .custom--loader-content {
            background: #fff;
            padding: 30px 40px;
            border-radius: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            gap: 3px;
        }
    </style>
@endpush