@extends('layouts.app')

@section('content')
    <div class="page-content">
        <div class="container-fluid">

            <!-- start page title -->
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box d-flex align-items-center justify-content-between">
                        <h4 class="mb-0">OTP</h4>
                        <div class="page-title-right">
                            <ol class="breadcrumb m-0">
                                <li class="breadcrumb-item"><a href="javascript: void(0);">Unga Group</a></li>
                                <li class="breadcrumb-item active">OTP</li>
                            </ol>
                        </div>

                    </div>
                </div>
            </div>
            <!-- end page title -->

            <div class="row">
                <div class="col-md-4 offset-md-4">
                   <form action="{{ route('otp.store') }}" method="POST">
                    @csrf
                    <div class="card text-center">
                        <div class="card-header p-5">
                            <h5 class="mb-2 text-white">OTP VERIFICATION</h5>
                            <div>
                                <small>Code has been sent to {{ $new_phone }}</small>
                            </div>
                        </div>
                        <div class="input-container d-flex flex-row justify-content-center mt-2">
                            <input name="one" class="m-1 form-control text-center rounded" maxlength="1" required>
                            <input name="two" class="m-1 form-control text-center rounded" maxlength="1" required>
                            <input name="three" class="m-1 form-control text-center rounded" maxlength="1" required>
                            <input name="four" class="m-1 form-control text-center rounded" maxlength="1" required>
                            <input name="five" class="m-1 form-control text-center rounded" maxlength="1" required>
                            <input name="six" class="m-1 form-control text-center rounded" maxlength="1" required>
                        </div>
                        <div>
                            <small>Didn't get the OTP </small>
                            <a href="" class="text-decoration-none">Resend</a>
                        </div>
                        <div class="mt-3 mb-5">
                            <button class="btn btn-success px-4 verify-btn">Verify</button>
                        </div>
                    </div>
                   </form>

                </div>
            </div>


        </div> <!-- container-fluid -->
    </div>
    <style>
        .card{
            border: none !important;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0,0,0,0.3) 0px 3px 7px -3px;
        }
        .card-header{
            color: #fff !important;
            background: #3366FF !important;
            text-align: center;
        }
        .input-container input{
            width: 40px;
            height: 40px;
        }
        .form-control:focus{
            box-shadow: none !important;
            border: 1px solid #3366FF !important;
        }
        .verify-btn{
            border-radius: 20px !important;
            border: 0px !important;
            width: 140px;
            background-color: #3366FF !important;
        }
    </style>
@endsection