@extends('layout.layout')

@section('title', 'Hesap Onayı')

@section('styles')
    @parent
    <style>
        .card {
            box-shadow: 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px 0 rgba(0,0,0,.06);
        }

        .card {
            position: relative;
            display: flex;
            flex-direction: column;
            min-width: 0;
            word-wrap: break-word;
            background-color: #fff;
            background-clip: border-box;
            border: 0 solid rgba(0,0,0,.125);
            border-radius: .25rem;
        }

        .card-body {
            flex: 1 1 auto;
            min-height: 1px;
            padding: 1rem;
        }
        .disabledBtn{
            pointer-events: none;
            cursor: default;
            opacity: 0.3;
        }
    </style>
@stop

@section('content')

    @include('flash_message.flash')

    <main class="bg-light">        
        <section>
            <header>
                <div class="py-5" style="background-color: rgb(0 0 0 / 82%);">
                    <div class="container py-3 position-relative text_shadow text-white">
                        <div class="row justify-content-center">
                            <div class="col-md-10 col-lg-8 col-xl-6">
                                <h2 class="font-weight-bold h1 section_title">Hesap Onayı</h2>
                            </div>
                        </div>
                    </div>
                </div>
            </header>
            <div class="container py-5" style="display: flex;justify-content: center;">                
                <div class="col-md-8">
                    <div class="card mb-3">
                        <div class="card-body">
                            <div class="row justify-content-center">
                                
                                <div class="col-sm-12">
                                    <form action="{{ route('user.smsVerification', ['slug' => Auth::user()->slug]) }}" method="POST" enctype="multipart/form-data" style="padding: 25px;">
                                        @csrf
                                        <div class="col-sm-12 text-center" style="margin-bottom: 45px;">
                                            <h6 class="mb-0" style="font-size: 23px;color: #521313;">Hesabınızı onaylamak için Markest'ten gelen 6 haneli kodu giriniz ve Onayla butonuna tıklayınız.</h6>
                                            <p style="margin-top: 1rem;color: #198754;">Eğer mesaj alamadıysanız Tekrar SMS al butonuna tıklayınız.</p>
                                        </div>
                                        <div class="col-md-12 text-center" style="display: flex;justify-content: center;">
                                            <div class="form-group">
                                                <label for="sms_code">SMS Kodu:</label>
                                                <input type="text" class="form-control" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');" maxlength="6" minlength="6" name="sms_code" id="sms_code" placeholder="******" autofocus required>
                                            </div>
                                        </div>
                                        <div class="col-md-12 text-center">
                                            <button class="btn btn-primary" style="border-radius: 0;">Onayla</button>
                                            <div class="theTarget">120</div>
                                            <a class="btn btn-danger disabledBtn" id="againSms" href="{{ route('user.smsPage', ['slug' => Auth::user()->slug]) }}" style="border-radius: 0;">Tekrar SMS al</a>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
@stop

@section('scripts')
    @parent
    <script>
        $(document).ready(function() {
            var timer = setInterval(function() {

            var count = parseInt($('.theTarget').html());
                if (count !== 0) {
                    $('.theTarget').html(count - 1);
                } else {
                    clearInterval(timer);
                    $("#againSms").removeClass("disabledBtn");
                }
            }, 1000);
        });
    </script>
@endsection