@extends('connect.layout')

@section('title', 'Waiting for Approval - American Tire Stores Free WiFi')

@section('content')
    <div class="wifi-status-wrap">

        <div
            class="wifi-status-icon"
            id="status-icon"
            aria-hidden="true"
        >
            <svg
                id="status-svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
            >
                <path d="M20 6 9 17l-5-5"/>
            </svg>
        </div>

        <p
            class="wifi-eyebrow"
            id="eyebrow"
        >
            Email verified
        </p>

        <h1
            class="wifi-title"
            id="page-title"
        >
            Waiting for approval
        </h1>

        <p
            class="wifi-subtitle"
            id="message"
        >
            Your email is verified.
            A store team member is reviewing your WiFi request.
            Keep this page open.
        </p>

        <div
            class="wifi-spinner"
            id="spinner"
            aria-label="Waiting for approval"
        ></div>

        <div
            class="wifi-state"
            id="state"
        >
            Pending approval
        </div>

        <div class="wifi-request-id">
            Request #{{ $wifi->id }}
        </div>

    </div>
@endsection


@push('scripts')

<script>

const statusUrl = @json(
    route(
        'connect.status',
        ['token' => $wifi->portal_token]
    )
);

const title = document.getElementById('page-title');
const message = document.getElementById('message');
const state = document.getElementById('state');
const spinner = document.getElementById('spinner');
const icon = document.getElementById('status-icon');
const eyebrow = document.getElementById('eyebrow');
const svg = document.getElementById('status-svg');

let finished = false;


/*
|--------------------------------------------------------------------------
| Approved
|--------------------------------------------------------------------------
*/

function successState() {

    eyebrow.textContent = 'Approved';

    title.textContent = 'Connecting…';

    message.textContent =
        'Your WiFi access has been approved. We are finishing your connection.';

    state.textContent = 'Approved';

    state.className = 'wifi-state ok';

    icon.className = 'wifi-status-icon success';

    spinner.hidden = false;

    svg.innerHTML =
        '<path d="M20 6 9 17l-5-5"/>';

}


/*
|--------------------------------------------------------------------------
| Failed / Declined / Revoked
|--------------------------------------------------------------------------
*/

function failedState(status) {

    eyebrow.textContent =
        status === 'declined'
            ? 'Request declined'
            : status === 'revoked'
                ? 'Access revoked'
                : 'Access unavailable';

    title.textContent =
        status === 'declined'
            ? 'WiFi request not approved'
            : status === 'revoked'
                ? 'WiFi access revoked'
                : 'WiFi access unavailable';

    message.textContent =
        status === 'declined'
            ? 'Your request was not approved at this time. Please speak with a store associate if you need assistance.'
            : status === 'revoked'
                ? 'Your WiFi access has been revoked. Please speak with a store associate if you need assistance.'
                : 'We could not activate WiFi access. Please speak with a store associate.';

    state.textContent =
        status.replaceAll('_', ' ');

    state.className = 'wifi-state bad';

    icon.className = 'wifi-status-icon danger';

    spinner.hidden = true;

    svg.innerHTML =
        '<path d="M18 6 6 18M6 6l12 12"/>';

}


/*
|--------------------------------------------------------------------------
| Poll WiFi request status
|--------------------------------------------------------------------------
*/

async function poll() {

    if (finished) {
        return;
    }

    try {

        const response = await fetch(
            statusUrl,
            {
                headers: {
                    'Accept': 'application/json'
                },

                cache: 'no-store'
            }
        );

        if (!response.ok) {

            state.textContent =
                'Checking connection…';

            setTimeout(
                poll,
                5000
            );

            return;
        }


        const data =
            await response.json();


        /*
        |--------------------------------------------------------------------------
        | APPROVED
        |--------------------------------------------------------------------------
        */

        if (
            data.status === 'approved'
        ) {

            finished = true;

            successState();


            /*
             * Redirect to our own connected page.
             *
             * The connected page can then show:
             *
             * "You are now connected"
             */

            if (
                data.connected_url
            ) {

                setTimeout(
                    () => {
                        window.location.href =
                            data.connected_url;
                    },
                    1200
                );

                return;
            }


            /*
             * Fallback if connected_url
             * is unavailable.
             */

            if (
                data.continue_url
            ) {

                setTimeout(
                    () => {
                        window.location.href =
                            data.continue_url;
                    },
                    1500
                );

                return;
            }

            return;
        }


        /*
        |--------------------------------------------------------------------------
        | FAILED STATES
        |--------------------------------------------------------------------------
        */

        if (
            [
                'declined',
                'revoked',
                'approval_failed'
            ].includes(
                data.status
            )
        ) {

            finished = true;

            failedState(
                data.status
            );

            return;
        }


        /*
        |--------------------------------------------------------------------------
        | STILL WAITING
        |--------------------------------------------------------------------------
        */

        state.textContent =
            data.status === 'pending_approval'
                ? 'Pending approval'
                : data.status
                    .replaceAll(
                        '_',
                        ' '
                    );


    } catch (error) {

        state.textContent =
            'Checking connection…';

    }


    if (!finished) {

        setTimeout(
            poll,
            5000
        );

    }

}


/*
|--------------------------------------------------------------------------
| Start polling
|--------------------------------------------------------------------------
*/

poll();

</script>

@endpush