@extends('layouts.registration')

@push('css')
	<!-- <link rel="stylesheet" href="{{ asset('/assets/vendor/intl-tel/17.0.15/css/intlTel.css') }}"> -->
@endpush
@section('nav')
    <x-nav brand="EKYC REGISTRATION"></x-nav>
@endsection

@section('content')
    <div class="container-fluid breadcrum-wrapper">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="hero-componentainer hero-content-componentainer">
						{{-- <x-application-logo class="block h-20 fill-current text-gray-600"></x-application-logo> --}}
                        <h4 class="text-dark">Mango CA EKYC</h4>
                        <h1 class="text-dark">EKYC Registration</h1>
                        <h2 class="text-dark">Mango CA EKYC is a full technology stack for e-sign platform.</h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <div class="row">
            <div class="col-md-12">
                <div class="flex justify-between py-12">
                    <div class="text-center flex align-items-center" style="flex-flow: column;">
                       {{-- <img style="height:100px;" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTYiIGhlaWdodD0iOTYiIHZpZXdCb3g9IjAgMCA5NiA5NiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgb3BhY2l0eT0iMC4zIiB4PSIxNCIgeT0iMzAiIHdpZHRoPSI4MCIgaGVpZ2h0PSI1MiIgcng9IjQiIGZpbGw9IiMwMEJGQjIiLz4KPHBhdGggZD0iTTU4LjUgNzRIMjZNNjYgNzRINzBNMTguNSA3NEgxMEM3Ljc5MDg2IDc0IDYgNzIuMjA5MSA2IDcwVjI2QzYgMjMuNzkwOSA3Ljc5MDg2IDIyIDEwIDIySDM2TTQzLjUgMjJIODJDODQuMjA5MSAyMiA4NiAyMy43OTA5IDg2IDI2VjQ4VjYxIiBzdHJva2U9IiMwMEJGQjIiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=" alt="document icon"> --}}
                       <svg class="step-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M504 312h-144C355.6 312 352 315.6 352 320s3.578 8 8 8h144c4.422 0 8-3.578 8-8S508.4 312 504 312zM176 256c35.35 0 64-28.65 64-64s-28.65-64-64-64c-35.34 0-64 28.65-64 64S140.7 256 176 256zM176 144C202.5 144 224 165.5 224 192S202.5 240 176 240S128 218.5 128 192S149.5 144 176 144zM512 32H64C28.65 32 0 60.65 0 96v320c0 35.35 28.65 64 64 64h448c35.35 0 64-28.65 64-64V96C576 60.65 547.3 32 512 32zM560 416c0 26.51-21.49 48-48 48H64c-26.51 0-48-21.49-48-48V96c0-26.51 21.49-48 48-48h448c26.51 0 48 21.49 48 48V416zM504 248h-144C355.6 248 352 251.6 352 256s3.578 8 8 8h144C508.4 264 512 260.4 512 256S508.4 248 504 248zM504 184h-144C355.6 184 352 187.6 352 192s3.578 8 8 8h144C508.4 200 512 196.4 512 192S508.4 184 504 184zM208 288h-64C99.89 288 64 323.9 64 368v8C64 380.4 67.58 384 72 384s8-3.578 8-8V368c0-35.3 28.7-64 64-64h64c35.3 0 64 28.7 64 64v8C272 380.4 275.6 384 280 384S288 380.4 288 376V368C288 323.9 252.1 288 208 288z"/></svg>
                       <h3 class="content-title">1. Verify Your NID</h3>
                       <p class="content">Position your document inside the rectangle</p>
                    </div>
                    <div class="text-center flex align-items-center" style="flex-flow: column;">
                       {{-- <img style="height:100px;" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTYiIGhlaWdodD0iOTYiIHZpZXdCb3g9IjAgMCA5NiA5NiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggb3BhY2l0eT0iMC4zIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTUzIDU4QzQyLjUwNjYgNTggMzQgNDcuNzAyNSAzNCAzNUMzNCAyMi4yOTc1IDQyLjUwNjYgMTIgNTMgMTJDNjMuNDkzNSAxMiA3MiAyMi4yOTc1IDcyIDM1QzcyIDQ3LjcwMjUgNjMuNDkzNSA1OCA1MyA1OFpNMzQuMTI5NiA2OEg3MS44NzA1QzgwLjE5MzUgNjggODcuNjQ2NSA3My4xNTQ1IDkwLjU4MzcgODAuOTQyTDkzLjQ4OTggODguNjQ3MUM5My43MzY1IDg5LjMwMTEgOTMuMjUzMSA5MCA5Mi41NTQxIDkwSDgzLjc1MDFINjMuMjVINTNIMTMuNDQ2QzEyLjc0NyA5MCAxMi4yNjM2IDg5LjMwMTEgMTIuNTEwMyA4OC42NDcxTDE1LjQxNjQgODAuOTQyQzE4LjM1MzYgNzMuMTU0NSAyNS44MDY2IDY4IDM0LjEyOTYgNjhaIiBmaWxsPSIjMDBCRkIyIi8+CjxwYXRoIGQ9Ik02Ni45MjMxIDMxQzY2LjkyMzEgMTguMjk3NSA1OC4yMDk5IDggNDcuNDYxNSA4QzM2LjcxMzIgOCAyOCAxOC4yOTc1IDI4IDMxQzI4IDQzLjcwMjUgMzYuNzEzMiA1NCA0Ny40NjE1IDU0QzUyLjkwNTcgNTQgNTcuODI3NyA1MS4zNTgxIDYxLjM1OTkgNDcuMSIgc3Ryb2tlPSIjMDBCRkIyIiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgo8cGF0aCBkPSJNNzUgODRIODQuMzgyQzg1LjEyNTMgODQgODUuNjA4OCA4My4yMTc3IDg1LjI3NjQgODIuNTUyOEw4MS45MDk4IDc1LjgxOTdDNzcuNjc1IDY3LjM1MDEgNjkuMDE4NCA2MiA1OS41NDkxIDYySDMyLjQ1MDhDMjIuOTgxNSA2MiAxNC4zMjUgNjcuMzUwMSAxMC4wOTAyIDc1LjgxOTdMNi43MjM2MSA4Mi41NTI4QzYuMzkxMTYgODMuMjE3NyA2Ljg3NDY1IDg0IDcuNjE4MDMgODRINDZINTciIHN0cm9rZT0iIzAwQkZCMiIgc3Ryb2tlLXdpZHRoPSIzIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KPC9zdmc+Cg==" alt="face icon"> --}}
                       <svg class="step-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M152 0C156.4 0 160 3.582 160 8C160 12.42 156.4 16 152 16H40C26.75 16 16 26.75 16 40V152C16 156.4 12.42 160 8 160C3.582 160 0 156.4 0 152V40C0 17.91 17.91 0 40 0H152zM512 152C512 156.4 508.4 160 504 160C499.6 160 496 156.4 496 152V40C496 26.75 485.3 16 472 16H360C355.6 16 352 12.42 352 8C352 3.582 355.6 0 360 0H472C494.1 0 512 17.91 512 40V152zM320 256C320 291.3 291.3 320 256 320C220.7 320 192 291.3 192 256C192 220.7 220.7 192 256 192C291.3 192 320 220.7 320 256zM256 208C229.5 208 208 229.5 208 256C208 282.5 229.5 304 256 304C282.5 304 304 282.5 304 256C304 229.5 282.5 208 256 208zM325.8 111.6L332 128H368C394.5 128 416 149.5 416 176V336C416 362.5 394.5 384 368 384H144C117.5 384 96 362.5 96 336V176C96 149.5 117.5 128 144 128H180L186.2 111.6C189.7 102.2 198.6 96 208.6 96H303.4C313.4 96 322.3 102.2 325.8 111.6zM144 144C126.3 144 112 158.3 112 176V336C112 353.7 126.3 368 144 368H368C385.7 368 400 353.7 400 336V176C400 158.3 385.7 144 368 144H320.9L310.9 117.2C309.7 114.1 306.7 112 303.4 112H208.6C205.3 112 202.3 114.1 201.1 117.2L191.1 144H144zM0 360C0 355.6 3.582 352 8 352C12.42 352 16 355.6 16 360V472C16 485.3 26.75 496 40 496H152C156.4 496 160 499.6 160 504C160 508.4 156.4 512 152 512H40C17.91 512 0 494.1 0 472V360zM360 512C355.6 512 352 508.4 352 504C352 499.6 355.6 496 360 496H472C485.3 496 496 485.3 496 472V360C496 355.6 499.6 352 504 352C508.4 352 512 355.6 512 360V472C512 494.1 494.1 512 472 512H360z"/></svg>
                       <h3 class="content-title">2. Verify Your Photo</h3>
                       <p class="content">Position your face inside the rectangle</p>
                    </div>
                    <div class="text-center flex align-items-center" style="flex-flow: column;">
                       {{-- <img style="height:100px;" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTYiIGhlaWdodD0iOTYiIHZpZXdCb3g9IjAgMCA5NiA5NiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggb3BhY2l0eT0iMC4zIiBkPSJNNzIgMThDODQgMTggOTIgMjcuMzc2NiA5MiAzOEM5MiA0My4zMzU1IDkwLjMxNTUgNDguNzU1MyA4Ny42Mzc5IDU0Qzg0Ljk2MDMgNTkuMjQ0NyA3Ni40MDU1IDcwIDc2LjQwNTUgNzBDNjUuMTc3NCA4Mi43NzU4IDUyIDkyIDUyIDkyQzUyIDkyIDM4LjgyMjYgODIuNzc1OCAyNy41OTQ1IDcwQzI3LjU5NDUgNzAgMTkuMDM5NyA1OS4yNDQ3IDE2LjM2MjEgNTRDMTMuNjg0NSA0OC43NTUzIDEyIDQzLjMzNTUgMTIgMzhDMTIgMzUuMDYzIDEyLjYzMTEgMzIuMjIxMyAxMy43OTI1IDI5LjY0NjZDMTMuNzkyNSAyOS42NDY2IDE1LjM0MzkgMjUuOTA4NiAxOC43NzMyIDIyLjg5MDJDMjIuMjAyNiAxOS44NzE3IDI2Ljc1MzMgMTggMzIgMThDNDQgMTggNTIgMzQgNTIgMzRDNTIgMzQgNjAgMTggNzIgMThaIiBmaWxsPSIjMDBCRkIyIi8+CjxwYXRoIGQ9Ik0xMC4zNjIxIDQ4QzcuNjg0NDkgNDIuNzU1MyA2IDM3LjMzNTUgNiAzMkM2IDI5LjA2MyA2LjYzMTExIDI2LjIyMTMgNy43OTI1MSAyMy42NDY2TTgxLjYzNzkgNDhDODQuMzE1NSA0Mi43NTUzIDg2IDM3LjMzNTUgODYgMzJDODYgMjEuMzc2NiA3OCAxMiA2NiAxMkM1NCAxMiA0NiAyOCA0NiAyOEM0NiAyOCAzOCAxMiAyNiAxMkMyMC43NTMzIDEyIDE2LjIwMjYgMTMuODcxNyAxMi43NzMyIDE2Ljg5MDJNMjEuNTk0NSA2NEMzMi44MjI2IDc2Ljc3NTggNDYgODYgNDYgODZDNDYgODYgNTkuMTc3NCA3Ni43NzU4IDcwLjQwNTUgNjQiIHN0cm9rZT0iIzAwQkZCMiIgc3Ryb2tlLXdpZHRoPSIzIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KPHBhdGggZD0iTTQgNTZIMjRMMjcgNDlMMzIgNjNMMzYgNTZIMzlMNDEgNDlMNDMgNTJMNDggMzhMNTYgNjVMNjUgNTRMNjkgNTZIODgiIHN0cm9rZT0iIzAwQkZCMiIgc3Ryb2tlLXdpZHRoPSIzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==" alt="document icon"> --}}
                       <svg class="step-icon" style="width: 125px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M560 32h-384C149.5 32 128 53.5 128 80v256C128 362.5 149.5 384 176 384h384c26.5 0 48-21.5 48-48v-256C608 53.5 586.5 32 560 32zM592 336c0 17.64-14.36 32-32 32h-384c-17.64 0-32-14.36-32-32V133.3l200.3 146.9C351.4 285.4 359.7 288 368 288s16.59-2.594 23.66-7.781L592 133.3V336zM592 113.5l-209.8 153.9c-8.5 6.219-19.94 6.219-28.44 0L144 113.5V80c0-17.64 14.36-32 32-32h384c17.64 0 32 14.36 32 32V113.5zM504 416c-4.422 0-8 3.594-8 8c0 22.06-17.94 40-40 40h-352c-30.88 0-56-25.12-56-56v-256c0-22.06 17.94-40 40-40C92.42 112 96 108.4 96 104S92.42 96 88 96C57.13 96 32 121.1 32 152v256C32 447.7 64.3 480 104 480h352c30.88 0 56-25.12 56-56C512 419.6 508.4 416 504 416z"/></svg>
                       <h3 class="content-title">3. Register Your Email/Mobile</h3>
                       <p class="content">Submit your one time password</p>
                    </div>
                    <div class="text-center flex align-items-center" style="flex-flow: column;">
                        {{-- <img style="height:100px;" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTYiIGhlaWdodD0iOTYiIHZpZXdCb3g9IjAgMCA5NiA5NiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggb3BhY2l0eT0iMC4zIiBkPSJNNzIgMThDODQgMTggOTIgMjcuMzc2NiA5MiAzOEM5MiA0My4zMzU1IDkwLjMxNTUgNDguNzU1MyA4Ny42Mzc5IDU0Qzg0Ljk2MDMgNTkuMjQ0NyA3Ni40MDU1IDcwIDc2LjQwNTUgNzBDNjUuMTc3NCA4Mi43NzU4IDUyIDkyIDUyIDkyQzUyIDkyIDM4LjgyMjYgODIuNzc1OCAyNy41OTQ1IDcwQzI3LjU5NDUgNzAgMTkuMDM5NyA1OS4yNDQ3IDE2LjM2MjEgNTRDMTMuNjg0NSA0OC43NTUzIDEyIDQzLjMzNTUgMTIgMzhDMTIgMzUuMDYzIDEyLjYzMTEgMzIuMjIxMyAxMy43OTI1IDI5LjY0NjZDMTMuNzkyNSAyOS42NDY2IDE1LjM0MzkgMjUuOTA4NiAxOC43NzMyIDIyLjg5MDJDMjIuMjAyNiAxOS44NzE3IDI2Ljc1MzMgMTggMzIgMThDNDQgMTggNTIgMzQgNTIgMzRDNTIgMzQgNjAgMTggNzIgMThaIiBmaWxsPSIjMDBCRkIyIi8+CjxwYXRoIGQ9Ik0xMC4zNjIxIDQ4QzcuNjg0NDkgNDIuNzU1MyA2IDM3LjMzNTUgNiAzMkM2IDI5LjA2MyA2LjYzMTExIDI2LjIyMTMgNy43OTI1MSAyMy42NDY2TTgxLjYzNzkgNDhDODQuMzE1NSA0Mi43NTUzIDg2IDM3LjMzNTUgODYgMzJDODYgMjEuMzc2NiA3OCAxMiA2NiAxMkM1NCAxMiA0NiAyOCA0NiAyOEM0NiAyOCAzOCAxMiAyNiAxMkMyMC43NTMzIDEyIDE2LjIwMjYgMTMuODcxNyAxMi43NzMyIDE2Ljg5MDJNMjEuNTk0NSA2NEMzMi44MjI2IDc2Ljc3NTggNDYgODYgNDYgODZDNDYgODYgNTkuMTc3NCA3Ni43NzU4IDcwLjQwNTUgNjQiIHN0cm9rZT0iIzAwQkZCMiIgc3Ryb2tlLXdpZHRoPSIzIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KPHBhdGggZD0iTTQgNTZIMjRMMjcgNDlMMzIgNjNMMzYgNTZIMzlMNDEgNDlMNDMgNTJMNDggMzhMNTYgNjVMNjUgNTRMNjkgNTZIODgiIHN0cm9rZT0iIzAwQkZCMiIgc3Ryb2tlLXdpZHRoPSIzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==" alt="document icon"> --}}
                        <svg class="step-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M192 160C192 155.6 195.6 152 200 152H440C444.4 152 448 155.6 448 160C448 164.4 444.4 168 440 168H200C195.6 168 192 164.4 192 160zM192 256C192 251.6 195.6 248 200 248H440C444.4 248 448 251.6 448 256C448 260.4 444.4 264 440 264H200C195.6 264 192 260.4 192 256zM192 352C192 347.6 195.6 344 200 344H440C444.4 344 448 347.6 448 352C448 356.4 444.4 360 440 360H200C195.6 360 192 356.4 192 352zM128 144C136.8 144 144 151.2 144 160C144 168.8 136.8 176 128 176C119.2 176 112 168.8 112 160C112 151.2 119.2 144 128 144zM128 272C119.2 272 112 264.8 112 256C112 247.2 119.2 240 128 240C136.8 240 144 247.2 144 256C144 264.8 136.8 272 128 272zM128 336C136.8 336 144 343.2 144 352C144 360.8 136.8 368 128 368C119.2 368 112 360.8 112 352C112 343.2 119.2 336 128 336zM512 32C547.3 32 576 60.65 576 96V416C576 451.3 547.3 480 512 480H64C28.65 480 0 451.3 0 416V96C0 60.65 28.65 32 64 32H512zM512 48H64C37.49 48 16 69.49 16 96V416C16 442.5 37.49 464 64 464H512C538.5 464 560 442.5 560 416V96C560 69.49 538.5 48 512 48z"/></svg>
                        <h3 class="content-title">4. Complete Registration</h3>
                        <p class="content">Check your information</p>
                     </div>
                 </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-8 offset-md-2">
                <div class="terms-condition-wrapper align-item-start d-flex justify-content-center">
                    <input id="termsCheckbox" type="checkbox" name="" class="mt-1 termsCheckbox">
                    <label class="ml-2" for="termsCheckbox">I agree my biometric information and copy of my ID can be used for research and development and product <br /> improvements of the Digital Onboarding Toolkit, <a href="#" target="_blank" rel="noopener noreferrer">more information on privacy policy</a>. </label>
                </div>
            </div>
            <div class="col-12 text-center">
                <a href="{{ url('/registration?step=1') }}" class="btn btn-primary button-component-submit disabled mt-4" type="button" title="Please agree with our privacy policy to proceed">Start Registration</a>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $('input[type="checkbox"]').click(function(){
            if($(this).prop("checked") == true){
                $(".button-component-submit").removeClass('disabled');
            }
            else if($(this).prop("checked") == false){
                $(".button-component-submit").addClass('disabled');
            }
        });
    </script>
@endpush