@extends('layouts.core.frontend', [
    'menu' => 'list',
])

@section('title', $list->name)

@section('head')
    <script type="text/javascript" src="{{ AppUrl::asset('core/echarts/echarts.min.js') }}"></script>
    <script type="text/javascript" src="{{ AppUrl::asset('core/echarts/dark.js') }}"></script>
@endsection

@section('page_header')

    @include('lists._header')

@endsection

@section('content')

    @include('lists._menu', [
        'menu' => 'email_verification',
    ])

    <div class="row">
        <div class="col-md-6">
            <div class="d-flex align-items-center">
                <h2 class="text-semibold my-4" style="margin-bottom: 10px">{{ trans('messages.list_verification') }}</h2>

                @if ($hasActiveAthenaSubscription)
                    <a href="{{ action('\\Athena\\Evs\\Controllers\\AthenaVerificationConnectorController@dashboard', $list->uid) }}" class="btn btn-light ms-auto">
                        <span class="material-symbols-rounded">verified</span>
                        Athena Verification Dashboard
                    </a>
                @endif
            </div>

            <div id="progressBar" class="form-group processing hide">
                <div id="errorBox" class="alert alert-danger"
                    style="display: none; flex-direction: row; align-items: center; justify-content: space-between;">
                    <div style="display: flex; flex-direction: row; align-items: center;">
                        <div style="margin-right:15px">
                            <i class="lnr lnr-circle-minus"></i>
                        </div>
                        <div style="padding-right: 40px">
                            <h4>ERROR</h4>
                            <p id="errorMsg"></p>
                        </div>
                    </div>
                </div>
                <p style="margin-bottom: 20px" id="notice">{!! trans('messages.list.verify.progress') !!}</p>
                <div class="progress progress-lg">

                    <div class="progress-bar progress-error progress-bar-danger" style="width: 0%">
                        <span><span class="number">0</span>% {{ trans('messages.error') }}</span>
                    </div>

                    <div class="progress-bar progress-total active" style="width: 0%">
                        <span><span class="number">0</span>% {{ trans('messages.complete') }}</span>
                    </div>

                </div>
                <label style="margin-bottom:20px;font-style:italic;" id="bottomNotice"></label>
                <a role="button" id="cancelBtn" class="btn btn-secondary btn-icon cancel processing">
                    {{ trans('messages.cancel') }}
                </a>

                <div class="form-group finish hide">
                    <div class="text-left">
                        <a id="doneBtn" target="_blank" href="#" type="button" class="btn btn-secondary success">
                            {{ trans('messages.label.done') }}
                        </a>
                        <a id="retryBtn" href="retryBtn" class="btn bg-grey-600 me-2 retry"><span
                                class="material-symbols-rounded">restart_alt</span> {{ trans('messages.retry') }}</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row" id="verifyForm">
        <div class="col-md-6">
            @if (!Auth::user()->customer->getCurrentActiveGeneralSubscription()->planGeneral->useOwnEmailVerificationServer())
                @php
                    $sub = Auth::user()->customer->getCurrentActiveSubscription();
                    $verifyCredits = $sub->getVerifyEmailCreditTracker()->getRemainingCredits();
                @endphp

                <form action="#" method="POST" class="form-validate-jquery">
                    {{ csrf_field() }}

                    <p>{{ trans('messages.list.verify.intro') }}</p>





                    @if (!\Auth::user()->customer->getCurrentActiveGeneralSubscription()->planGeneral->getEmailVerificationServers()->count())
                        <div class="alert alert-danger mt-3">
                            {{ trans('messages.error.there_no_email_verification_servers_from_system') }}
                        </div>
                    @else
                        <div class="text-left">
                            <button id="startBtn" class="btn btn-primary fs-6 px-3 me-2">
                                <span class="material-symbols-rounded">
                                    play_arrow
                                </span>
                                {{ trans('messages.verification.button.start') }}
                            </button>
                        </div>

                        <div class="alert alert-info mt-4">
                            {!! trans('messages.verification.you_have_credits_left', [
                                'credits' => $verifyCredits,
                                'link' => action('EmailVerificationPlanController@index'),
                            ]) !!}
                        </div>

                        <script>
                            $(function() {
                                new VerificationStart({
                                    startBtn: $('#startBtn'),
                                    url: '{{ action('MailListController@startVerification', ['uid' => $list->uid]) }}',
                                });
                            });

                            var VerificationStart = class {
                                constructor(options) {
                                    this.startBtn = options.startBtn;
                                    this.url = options.url;

                                    this.events();
                                }

                                events() {
                                    this.startBtn.on("click", (e) => {
                                        e.preventDefault();

                                        this.start();
                                    });
                                }

                                start() {
                                    var token = $('#verifyForm').find('input[name="_token"]').val();

                                    $.ajax({
                                        url: this.url,
                                        type: 'POST',
                                        data: {
                                            '_token': token,
                                        },
                                        success: function(data) {
                                            $("#notice").show();
                                            $("#bottomNotice").hide();
                                            $('#errorBox').hide();
                                            AcelleList.hideFinishButtonBar();
                                            AcelleList.setCurrentJob(data);
                                            AcelleList.checkProgress();
                                        }
                                    }).fail(function(jqXHR, textStatus, errorThrown) {
                                        alert("Cannot start verification process: " + errorThrown);
                                    });
                                }
                            }
                        </script>
                    @endif
                </form>
            @else
                
                <div id="athenaServerVerification" style="display: none">
                </div>

                <div id="defaultServerSelection">
                    <form action="#" method="POST" class="form-validate-jquery">
                        {{ csrf_field() }}
                        <p>{{ trans('messages.list.verify.intro') }}</p>
                        @include('helpers.form_control', [
                            'type' => 'select',
                            'name' => 'email_verification_server_id',
                            'value' => '',
                            'options' => \Auth::user()->customer->emailVerificationServerSelectOptions(),
                            'help_class' => 'verification',
                            'rules' => ['email_verification_server_id' => 'required'],
                            'include_blank' => trans('messages.select_email_verification_server'),
                        ])

                        <div class="text-left">
                            <button id="startBtn" class="btn btn-primary fs-6 px-3 me-2">
                                <span class="material-symbols-rounded">
                                    play_arrow
                                </span>
                                {{ trans('messages.verification.button.start') }}
                            </button>
                        </div>

                        <script>
                            $(function() {
                                new VerificationStart({
                                    startBtn: $('#startBtn'),
                                    url: '{{ action('MailListController@startVerification', ['uid' => $list->uid]) }}',
                                });
                            });

                            var VerificationStart = class {
                                constructor(options) {
                                    this.startBtn = options.startBtn;
                                    this.url = options.url;

                                    this.events();
                                }

                                events() {
                                    this.startBtn.on("click", (e) => {
                                        e.preventDefault();

                                        this.start();
                                    });
                                }

                                start() {
                                    var serverUID = $('select[name="email_verification_server_id"]').find(':selected').val();
                                    var token = $('#verifyForm').find('input[name="_token"]').val();

                                    if (!serverUID) {
                                        alert('Please choose a verification server from the list');
                                        return;
                                    }

                                    $.ajax({
                                        url: this.url,
                                        type: 'POST',
                                        data: {
                                            '_token': token,
                                            'email_verification_server_id': serverUID
                                        },
                                        success: function(data) {
                                            $("#notice").show();
                                            $("#bottomNotice").hide();
                                            $('#errorBox').hide();
                                            AcelleList.hideFinishButtonBar();
                                            AcelleList.setCurrentJob(data);
                                            AcelleList.checkProgress();
                                        }
                                    }).fail(function(jqXHR, textStatus, errorThrown) {
                                        alert("Cannot start verification process: " + errorThrown);
                                    });
                                }
                            }
                        </script>
                    </form>
                </div>
                    
            @endif

            <!-- if -->
            <h2 class="text-semibold" style="margin-top:40px;margin-bottom:10px">
                {{ trans('messages.verification_status') }}</h2>
            <p>{!! trans('messages.verification_process_not_running', [
                'verified' => $list->subscribers()->verified()->count(),
                'total' => number_with_delimiter($list->readCache('SubscriberCount')),
            ]) !!}</p>
            <p>
                <a link-confirm="{{ trans('messages.reset_list_verification_confirm') }}" link-method="POST"
                    class="btn btn-secondary" href="{{ action('MailListController@resetVerification', $list->uid) }}">
                    {{ trans('messages.verification.button.reset') }}
                </a>
            </p>

        </div>

        <div class="col-md-6">

            <div class="row">
                <div class="col-md-12">
                    @if (true)
                        <!-- Basic column chart -->
                        <div class="" style="margin-top:-50px">
                            <div class="">
                                <div class="chart-container px-5">
                                    <div class="chart has-fixed-height-250" id="emailVerificationChart"
                                        style="width: 100%;height:450px;"
                                        data-url="{{ action('Admin\PlanController@pieChart') }}"></div>
                                </div>
                            </div>
                        </div>
                        <!-- /basic column chart -->
                    @endif
                </div>
            </div>

            <script>
                $(function() {
                    EmailVerificationChart.showChart();
                });
                var EmailVerificationChart = {
                    url: '{{ action('MailListController@emailVerificationChart', [
                        'uid' => $list->uid,
                    ]) }}',
                    getChart: function() {
                        return $('#emailVerificationChart');
                    },

                    showChart: function() {
                        $.ajax({
                                method: "GET",
                                url: this.url,
                            })
                            .done(function(response) {
                                EmailVerificationChart.renderChart(response.data);
                            });
                    },

                    renderChart: function(data) {
                        // based on prepared DOM, initialize echarts instance
                        var chart = echarts.init(EmailVerificationChart.getChart()[0], ECHARTS_THEME);

                        var colors = [
                            '#5cb2b2',
                            '#b25977',
                            '#aab25a',
                            '#5b7bb2',
                            '#555555',
                            '#626eb2',
                            '#81ac8d',
                            '#7d5fb2',
                            '#b26e59'
                        ];

                        var cData = data.map(function(item, index) {
                            return {
                                name: item.name,
                                value: item.value,
                                itemStyle: {
                                    color: colors[index],
                                    borderWidth: 1,
                                    borderType: 'solid',
                                    borderColor: '#fff'
                                }
                            };
                        });

                        var option = {
                            title: {
                                text: '{{ trans('messages.email_verification.statistics') }}',
                                // subtext: '{{ trans('messages.statistics_chart') }}',
                                left: 'center'
                            },
                            tooltip: {
                                trigger: 'item',
                                formatter: '{b}: {c} ({d}%)'
                            },
                            legend: {
                                left: 'center',
                                bottom: 0,
                            },
                            series: [{
                                selectedMode: 'single',
                                type: 'pie',
                                radius: '60%',
                                center: ['50%', '47%'],
                                data: cData,
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                },
                                label: {
                                    // position: 'inner',
                                    fontSize: 12,
                                    color: ECHARTS_THEME == 'dark' ? '#fff' : null,
                                    formatter: '{b}\n{d}% ({c})',
                                },
                            }]
                        };

                        // use configuration item and data specified to show chart
                        chart.setOption(option);
                    }
                }
            </script>

        </div>
    </div>

    <script>
        var AcelleList = {

            // Current job
            currentJobUid: null,
            progressCheckUrl: null,
            cancelUrl: null,

            progressCheck: null,

            setCurrentJob: function(data) {
                this.currentJobUid = data.currentJobUid;
                this.progressCheckUrl = data.progressCheckUrl;
                this.cancelUrl = data.cancelUrl;
            },

            resetCurrentJob: function() {
                AcelleList.currentJobUid = null;
                AcelleList.progressCheckUrl = null;
                AcelleList.cancelUrl = null;
            },

            updateProgressBar: function(percentage, message) { // percentage from 0 to 100
                var form = $("#progressBar");
                var bar = form.find('.progress-total');

                form.find("#bottomNotice").show();
                form.find("#bottomNotice").html(message);
                bar.find(".number").html(percentage);
                bar.css({
                    width: (percentage) + '%'
                });
            },

            stopCheckingProgress: function() {
                clearTimeout(AcelleList.progressCheck);
            },

            checkProgress: function(completeAlert = true) {
                $.ajax({
                    url: AcelleList.progressCheckUrl,
                    type: "GET",
                    success: function(result, textStatus, jqXHR) {
                        // Upgrade progress, no matter which status is
                        AcelleList.showProgressBar();
                        AcelleList.updateProgressBar(result.percentage, result.message);

                        if (result.status == "failed") {
                            AcelleList.showFinishButtonBar();
                            AcelleList.hideCancelButton();
                            $("#notice").hide();
                            $("#bottomNotice").hide();
                            $('#errorBox').show();
                            $('#errorMsg').html(result.error);
                        } else if (result.status == "done") {
                            AcelleList.showFinishButtonBar();
                            AcelleList.hideCancelButton();
                            $("#notice").show();
                            $("#notice").html('{{ trans('messages.list.verify.complete') }}');
                            $('#bottomNotice').show();
                            $("#bottomNotice").html(result.message);

                            if (completeAlert) {
                                // Success alert
                                new Dialog('alert', {
                                    title: "{{ trans('messages.notify.success') }}",
                                    message: '{{ trans('messages.list.verify.complete') }}'
                                });
                            }
                        } else if (result.status == "cancelled") {
                            /*
                            AcelleList.hideProgressBar();
                            form.find('.finish').addClass("hide");
                            form.find('.success').removeClass("hide");
                            */
                        } else if (result.status == "running" || result.status == "queued") {
                            AcelleList.showProgressBar();
                            AcelleList.progressCheck = setTimeout(function() {
                                AcelleList.checkProgress();
                            }, 2000);
                        }
                    }
                });
            },

            cancel: function() {
                AcelleList.stopCheckingProgress();

                var token = $('#verifyForm').find('input[name="_token"]').val();

                $.ajax({
                    url: AcelleList.cancelUrl,
                    type: "POST",
                    data: {
                        '_token': token
                    },
                    success: function(result, textStatus, jqXHR) {
                        // AcelleList.hideProgressBar();
                        // AcelleList.resetCurrentJob();

                        // Reload the page to refresh the verification stats
                        window.location.href =
                            '{{ action('MailListController@verification', [
                                'uid' => $list->uid,
                                'board' => 'default',
                            ]) }}';
                    }
                }).fail(function(jqXHR, textStatus, errorThrown) {
                    alert(errorThrown);

                    // Resume progress checking
                    AcelleList.checkProgress();

                    return false;
                });
            },

            // Toggle: show progress bar, hide input upload bar
            hideProgressBar: function() {
                $("#progressBar").addClass('hide');
                $("#verifyForm").removeClass('hide');
            },

            showProgressBar: function() {
                $("#progressBar").removeClass('hide');
                $("#verifyForm").addClass('hide');
            },

            showFinishButtonBar: function() {
                $(".finish").removeClass('hide');
            },

            hideFinishButtonBar: function() {
                $(".finish").addClass('hide');
            },

            showCancelButton: function() {
                $('#cancelBtn').removeClass('hide');
            },

            hideCancelButton: function() {
                $('#cancelBtn').addClass('hide');
            },
        };

        $(document).ready(function() {
            // EVENT BINDING
            $(document).on("click", "#cancelBtn", function(e) {
                e.preventDefault();

                var cancelConfirm = confirm("{{ trans('messages.list.verify.cancel_confirm') }}");

                if (cancelConfirm) {
                    AcelleList.cancel();
                }
            });

            $(document).on("click", "#doneBtn", function(e) {
                e.preventDefault();

                // Done = Cancel
                AcelleList.cancel();
            });

            $(document).on("click", "#retryBtn", function(e) {
                e.preventDefault();

                // Done = Cancel
                AcelleList.cancel();
            });

            // SET UP CURRENT RUNNING JOB
            @if (isset($currentJobUid))
                // Temporary show the progress bar of 0 percentage, waiting for the checkProgress() call to update it
                AcelleList.showProgressBar();
                AcelleList.updateProgressBar(0, 'Initializing...');

                // Set up current job information
                AcelleList.setCurrentJob({
                    currentJobUid: '{{ $currentJobUid }}',
                    progressCheckUrl: '{{ $progressCheckUrl }}',
                    cancelUrl: '{{ $cancelUrl }}',
                });

                // false means do not show the alert popup when progress is complete
                // Don't worry, this is for the first check only
                AcelleList.checkProgress(false);
            @endif
        });
    </script>

    @if (\Acelle\Model\Plugin::isInstalled('athena/evs') && \Acelle\Model\Plugin::getByName('athena/evs')->isActive()) {
        <script>
            var AthenaVerifcationConnecter = class {
                constructor() {
                    this.popup = new Popup();
                    //
                    this.welcomeUrl = '{!! action('\\Athena\\Evs\\Controllers\\AthenaVerificationConnectorController@welcome', $list->uid) !!}';
                    this.infoUrl = '{!! action('\\Athena\\Evs\\Controllers\\AthenaVerificationConnectorController@subscriptionInfo') !!}';

                    this.defaultServerSelection = $('#defaultServerSelection');
                    this.athenaServerVerification = $('#athenaServerVerification');
                }

                getSubscriptionInfo(callback) {
                    var self = this;
                    $.get(this.infoUrl, function(data) {
                        callback(data);
                    });
                }

                welcome() {
                    this.popup.load(this.welcomeUrl);
                }

                checkout(url) {
                    this.popup.loadHtml(`
                        <div class="modal-dialog modal-xl">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <a href="javascript:;" class="material-symbols-rounded back" style="display: none;">keyboard_backspace</a>
                                    <h5 class="modal-title text-center" style="width:100%">
                                    </h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal-body px-2 py-3">
                                    
                                    <!-- display flash message -->
                                    <iframe src="` + url + `" style="width:100%; height:80vh; border:none;"></iframe>
                                    <!-- main inner content -->
                                    
                                </div>
                            </div>
                        </div>
                    `);

                    // event iframe change url then call iframeUrlChanged
                    var iframe = this.popup.popup.find('iframe');
                    var self = this;
                    iframe.on('load', function() {
                        var iframeUrl = iframe[0].contentWindow.location.href;
                        self.iframeUrlChanged(iframeUrl);
                    });
                }

                iframeUrlChanged(url) {
                    console.log("iframe url changed: " + url);

                    if (!url.includes('cashier')) {
                        this.popup.hide();
                        new Dialog('alert', {
                            title: "Subscription Activated",
                            message: 'Your Athena Verification Connector subscription has been successfully activated! You can now start using the service.',
                            ok: () => {
                                window.location = '{{ action('\\Athena\\Evs\\Controllers\\AthenaVerificationConnectorController@dashboard', $list->uid) }}';
                            }
                        });
                    }
                }

                showDefaultServerSelection() {
                    this.defaultServerSelection.show();
                    this.athenaServerVerification.hide();
                }
                
                showAthenaServerVerification() {
                    this.defaultServerSelection.hide();
                    this.athenaServerVerification.show();
                }
            }

            $(() => {
                // Your code here
                window.athenaVerifcationConnecter = new AthenaVerifcationConnecter();
                // athenaVerifcationConnecter.welcome();

                window.athenaVerifcationConnecter.getSubscriptionInfo(function(subscriptionInfo) {
                    if(subscriptionInfo.status) {
                        // has subscription
                        console.log("has subscription");

                        // checkout
                        if (subscriptionInfo.status == 'new') {
                            new Dialog('confirm', {
                                title: "Complete Your Subscription",
                                message: 'You are currently subscribing to Athena Verification Service. Please proceed to checkout to activate your subscription and start using the service.',
                                ok: () => {
                                    // new subscription, go to checkout
                                    setTimeout(() => {
                                        window.athenaVerifcationConnecter.checkout(subscriptionInfo.payment_url);
                                    }, 500);
                                }
                            });
                        } else {
                            // // active subscription
                            // // {
                            // //     "status": "active",
                            // //     "remain_credits": -1
                            // // }

                            // console.log(subscriptionInfo);

                            // window.athenaVerifcationConnecter.showAthenaServerVerification();

                            // // update athenaServerVerification content with subscriptionInfo
                            // // the subscriptionInfo should like this: {status: "active", remain_credits: -1, current_period_ends_at: "2025-12-25 05:56"}
                            // // remain_credits = -1 means unlimited
                            // window.athenaVerifcationConnecter.athenaServerVerification.html(`
                            //     <div class="text-center" style="background: linear-gradient(135deg, #2c3e50, #34495e); border-radius: 10px; padding: 20px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);">
                            //         <div class="">
                            //             <img src="https://evs.spam-killer.com/setting/site_logo_light-c32c9343c4aafc4042ebc58178f9a89b.svg" alt="Athena Logo" style="width: 200px; height: auto;">
                            //         </div>
                            //         <h2 class="fw-bold" style="color: #E9983E;">Congratulations, you're now subscribed!</h2>
                            //         <p class="mb-3" style="color: #ecf0f1;">
                            //             You are subscribed to the Free monthly verification credits for Acelle.<br>
                            //             Your available credits: <span class="fw-bold" style="color: #E9983E;">Unlimited</span><br>
                            //             Refill in <span class="fw-bold" style="color: #E9983E;">30 days</span> on <span class="fw-bold" style="color: #E9983E;">Dec 25</span>
                            //         </p>
                            //         <div class="card shadow-sm" style="background-color: #34495e; border: none; border-radius: 10px;">
                            //             <div class="card-body">
                            //                 <h4 class="fw-bold" style="color: #ecf0f1;">Subscribe to Our Newsletter!</h4>
                            //                 <p style="color: #bdc3c7;">
                            //                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                            //                 </p>
                            //                 <button class="btn btn-lg fw-bold" style="background-color: #E9983E; color: #fff; border-radius: 5px;">
                            //                     Verify Now
                            //                 </button>
                            //             </div>
                            //         </div>
                            //         <div class="mt-3">
                            //             <a href="javascript:void(0);" onclick="window.athenaVerifcationConnecter.showDefaultServerSelection();" style="color: #E9983E; text-decoration: underline;">
                            //                 Use other verify services
                            //             </a>
                            //         </div>
                            //     </div>
                            // `);
                        }
                    } else {
                        // no subscription
                        console.log("no subscription");
                        athenaVerifcationConnecter.welcome();

                        //
                        window.athenaVerifcationConnecter.showDefaultServerSelection();
                    }
                });
            });
        </script>
    @endif
@endsection