@extends('layouts.auth')

@section('styles')

@endsection

@section('content')
    <!-- CONTAINER OPEN -->       
    <div class="container-lg">
        <div class="row justify-content-center mt-4 mx-0">
            <div class="col-xl-4 col-lg-6 col-md-6 col-sm-6">
                <div class="card shadow-none">
                    <div class="card-body p-sm-6">
                        <div class="mb-4">
                            <div class="text-center">
                                <a href="/"><img src="{{asset('build/assets/images/brand/desktop-dark.png')}}" class="header-brand-img" alt=""></a>
                            </div>
                        </div>

                        <div class="text-center mb-4">
                            <h4 class="mb-1">Verify Phone</h4>
                            <p>Please verify phone to access account!</p>
                        </div>
                        <form action="{{ route('verify.code') }}" method="post">
                            @csrf

                            <div class="row">
                                <div class="col-md-7 mb-4">
                                    <div class="">
                                        <label class="mb-2 fw-500">Verification Code<span class="text-danger ms-1">*</span></label>
                                        <input type="text" name="code" class="form-control ms-0" placeholder="Enter code" required>
                                    </div>
                                </div>
                                <div class="col-md-5 col-12 mb-4">
                                    <div class="">
                                        <label class="mb-2 fw-500"><span class="text-danger ms-1"></span></label>
                                        <div class="btn btn-primary-light get-verify-code w-100">Get Code</div>
                                    </div>
                                </div>
                                <div class="col-xl-12">
                                    <div class="d-grid mb-3">
                                        <button type="submit" class="btn btn-primary">Verify</button>
                                    </div>
                                </div>

                                <div class="col-xl-12">
                                    <div class="d-grid mb-3">
                                        <a href="{{ route('logout') }}" class="btn btn-secondary-light">Log Out</a>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- CONTAINER CLOSED -->
@endsection

@section('scripts')
	
	<script>
        $(document).ready(function(){
            $('.get-verify-code').click(function(){
                $.ajax({
                    url: '{{ route("get.verify.code") }}',
                    type: 'GET',
                    success: function(response) {
                        if (response.success) {
                            Swal.fire({
                                position: "center",
                                icon: "success",
                                title: response.message,
                                showConfirmButton: false,
                                timer: 4500
                            });
                        } else {
                            Swal.fire({
                                position: "center",
                                icon: "error",
                                title: response.message,
                                confirmButtonColor: "#3085d6",
                                confirmButtonText: "Got it!"
                            });
                        }
                    },
                    error: function(xhr, status, error) {
                    }
                });
            });
        });
    </script>

@endsection