@extends('frontend.layouts.contentLayoutMaster')
{{-- title --}}
@section('title', '登入')

@section('vendor-styles')
@endsection

@section('page-styles')
    <style>
        html body {
            height: fit-content;
        }
    </style>
@endsection

@section('content')
    @php
        // if (Auth::user()) {
           // dump(Auth::user()->info);
        // }
    @endphp
    <div class="container" id="thisPageVue">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Login</div>

                    <div class="card-body">
                        <form method="POST" action="">
                            @csrf
                            <div class="form-group row">
                                <label for="mobile" class="col-md-4 col-form-label text-md-right">mobile</label>
                                <div class="col-md-6">
                                    <input id="mobile" type="text"
                                           class="form-control @error('mobile') is-invalid @enderror" name="mobile"
                                           required autocomplete="mobile" autofocus v-model="form.mobile">

                                    {{-- error message --}}
                                    {{--                                <div class="invalid-feedback d-block">--}}
                                    {{--                                    <i class="bx bx-radio-circle"></i>--}}
                                    {{--                                </div>--}}


                                </div>
                            </div>

                            <div class="form-group row">
                                <label for="password" class="col-md-4 col-form-label text-md-right">Password</label>
                                <div class="col-md-6">
                                    <input id="password" type="password" class="form-control" name="password"
                                           autocomplete="current-password" v-model="form.password">
                                </div>
                            </div>

                            <div class="form-group row">
                                <label for="sms_verify" class="col-md-4 col-form-label text-md-right">Sms Verify</label>
                                <div class="col-md-6">
                                    <div class="input-group">
                                        <input type="text" class="form-control" id="sms_verify" name="sms_verify"  v-model="form.smsVerify">
                                        <div class="input-group-append">
                                            <button type="button" class="btn btn-outline-secondary" @click="sendSms">Send</button>
                                        </div>
                                    </div>
                                </div>
                            </div>


                            <div class="form-group row mb-0">
                                <div class="col-md-8 offset-md-4">
                                    <button type="button" class="btn btn-primary" @click="actionAuth">
                                        Login / Register
                                    </button>
                                </div>
                            </div>

                            <div class="invalid-feedback d-block" v-if="hasError">
                                <i class="bx bx-radio-circle"></i>
                                @{{ errors }}
                            </div>

                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection


@section('vendor-scripts')

@endsection

@section('page-scripts')
    <script src="{{ mix('assets/js/frontend/auth.js')}}"></script>
@endsection