@extends('layouts.blank')

@push('custom_css')
    <link rel="stylesheet" href="{{ asset('admin-lte/plugins/fontawesome-free/css/all.min.css') }}">
    <link rel="stylesheet" href="{{ asset('admin-lte/plugins/icheck-bootstrap/icheck-bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ asset('admin-lte/plugins/jquery-ui/jquery-ui.theme.css') }}">
    <link rel="stylesheet" href="{{ asset('admin-lte/plugins/jquery-ui/jquery-ui.css') }}">
{{--   <link rel="stylesheet" href="{{ asset('admin-lte/dist/css/adminlte.min.css') }}">--}}
    <link rel="stylesheet" href="{{ mix('css/app.css') }}">
@endpush

@section('custom_script')
    <script src="{{ asset('admin-lte/plugins/jquery/jquery.min.js') }}"></script>
    <script src="{{ asset('admin-lte/plugins/jquery-ui/jquery-ui.js') }}"></script>
    <script src="{{ asset('admin-lte/plugins/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
    <script src="{{ asset('admin-lte/dist/js/adminlte.min.js') }}"></script>

    <script>
        $(document).ready(function(){

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
             });


               var date = new Date();
               var year = date.getFullYear();
               var month = date.getMonth();
               var day = date.getDate();
               $('#bdate').datepicker({
                dateFormat: "dd/mm/yy",
                changeYear: true,
                changeMonth: true,
                maxDate: new Date,
                minDate: new Date(day,month,year),
                });

            $('.btn_submit').click(function (e){
                e.preventDefault();
                var fname = $('#fname').val();
                var lname = $('#lname').val();
                var bdate = $('#bdate').val();
                var gender = $('#gender').val();


                if (fname.length == '') {
                    $('#fname').addClass('is-invalid');
                    $('.fname').fadeIn();
                    $('.fname').text('This field is required.');
                    setTimeout(() => {
                        $('.fname').fadeOut();
                    }, 3000);
                }
                    $('#fname').keydown(function (e) {
                        $('#fname').removeClass('is-invalid');
                    });

                if (lname.length == '') {
                    $('#lname').addClass('is-invalid');
                    $('.lname').fadeIn();
                    $('.lname').text('This field is required.');
                    setTimeout(() => {
                        $('.lname').fadeOut();
                    }, 3000);
                }
                    $('#lname').keydown(function (e) {
                        $('#lname').removeClass('is-invalid');
                    });
                if (bdate.length == '') {
                    $('#bdate').addClass('is-invalid');
                    $('.bdate').fadeIn();
                    $('.bdate').text('This field is required.');
                    setTimeout(() => {
                        $('.bdate').fadeOut();
                    }, 3000);
                }
                    $('#bdate').on('click',function (e) {
                        $('#bdate').removeClass('is-invalid');
                    });


                if (gender.length == '') {
                    $('#gender').addClass('is-invalid');
                    $('.gender').fadeIn();
                    $('.gender').text('This field is required.');
                    setTimeout(() => {
                        $('.gender').fadeOut();
                    }, 3000);
                }
                    $('#gender').on('click',function (e) {
                        $('#gender').removeClass('is-invalid');
                    });

                $.ajax({
                    type: "POST",
                    url: "completeRegistration",
                    data: {
                        fname:fname,
                        lname:lname,
                        bdate:bdate,
                        gender:gender,

                    },
                    success: function (data) {
                        if($.isEmptyObject(data.error)){
                            if(data.success) {
                                $('#notifDiv').fadeIn();
                                $('#notifDiv').css('background', 'green');
                                $('#notifDiv').text('User Registration Complete');
                                setTimeout(() => {
                                    $('#notifDiv').fadeOut();
                                }, 3000);
                                window.location = data.redirectTo;

                            } else {
                               $('#notifDiv').fadeIn();
                               $('#notifDiv').css('background', 'red');
                               $('#notifDiv').text('Registration Failed');
                               setTimeout(() => {
                                $('#notifDiv').fadeOut();
                               }, 3000);
                            }
                        }
                    }
                });
            });
        });
    </script>
@endsection

@section('content')
<div class=" col-12 items-top  min-h-screen bg-gray-100 dark:bg-gray-900">
    @if (Route::has('login'))
        <div class="">
            @auth
               @if(Auth::check() && Auth::user()->is_first_login == 2)
                  <div class="row">
                  <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4"></div>
                  <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4"></div>
                    <div class="col-4 text-center mt-3 flex">
                        {{-- <a href="{{ route('login') }}" class="text-sm text-gray-700 dark:text-gray-500 underline">Log in</a> --}}
                        <a href="{{ url('/logout_') }}" class=" text-white text-md text-gray-700 dark:text-gray-500 underline">Logout</a>
                    </div>
                  </div>
                @endif
            @else
                <a href="{{ route('login') }}" class="text-sm text-gray-700 dark:text-gray-500 underline">Log in</a>

                @if (Route::has('register'))
                    <a href="{{ route('register') }}" class="ml-4 text-sm text-gray-700 dark:text-gray-500 underline">Register</a>
                @endif
            @endauth
        </div>
    @endif
    </div>
    <div style="width: 40%; margin-top: 5%;">
        <div class="login-logo">
            <a href="{{ route('home') }}"><b>{{ $env_app_name ?? config('app.name') }}</b></a>
        </div>
        <!-- /.complete-registration logo -->
        <div class="card">
            <div class="card-body login-card-body">
                <p id="notifDiv" class="p-2 rounded text-center"></p>
                <p class="login-box-msg">Hi <b>{{ $user->name }}</b>, Please fill up the form below!</p>

                <form action="{{ route('complete.registration.store') }}" method="post">
                    @csrf
                    <input type="hidden" name="user_id" value="{{$user->id}}">
                    <div class="row p-3">
                        <div class="input-group mb-3 col-12">
                            <div class="col-12">
                                <label for="">First Name:</label>
                            </div>
                            <input type="text" name="fname" id="fname" class="form-control" placeholder="First Name" required>
                            <div class="input-group-append">
                                <div class="input-group-text">
                                    <span class="fas fa-user"></span>
                                </div>
                            </div>
                            <div class="col-12 text-center">
                                <span style="font-size: 10px;"class="text-danger fname" ></span>
                            </div>
                        </div>

                        <div class="input-group mb-3 col-12">
                            <div class="col-12">
                                <label for="">Last Name:</label>
                            </div>
                            <input type="text" name="lname" id="lname" class="form-control" placeholder="Last Name" required>
                            <div class="input-group-append">
                                <div class="input-group-text">
                                    <span class="fas fa-user"></span>
                                </div>
                            </div>
                            <div class="col-12 text-center">
                                <span style="font-size: 10px;"class="text-danger lname"></span>
                            </div>

                        </div>

                        <div class="input-group mb-3 col-6" id="date">
                            <div class="col-12">
                                <label for="">Birth Date:</label>
                            </div>
                            <input type="text" name="bdate" id="bdate" class="form-control" placeholder="dd/mm/yyyy"  required>
                            <div class="input-group-append">
                                <div class="input-group-text">
                                    <span class="fas fa-calendar"></span>
                                </div>
                            </div>
                            <div class="col-12 text-center">
                                <span style="font-size: 9px;"class="text-danger bdate"></span>
                            </div>
                        </div>

                        <div class="input-group mb-3 col-6">
                            <div class="col-12">
                                <label for="">Gender:</label>
                            </div>
                           <select name="gender" id="gender" class="form-control">
                           <option value="">Select One</option>
                            <option value="Male">Male</option>
                            <option value="Female">Female</option>
                           </select>
                            <div class="input-group-append">
                                <div class="input-group-text">
                                    <span class="fas fa-user"></span>
                                </div>
                            </div>
                            <div class="col-12 text-center">
                                <span style="font-size: 9px;"class="text-danger gender"></span>
                            </div>
                        </div>

                      <div class="col-12">
                        <div class="row">
                            <div class="col-md-4"></div>
                            <div class="col-md-4"></div>
                            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
                                  <button type="submit" class="btn btn-primary btn-block btn_submit">Submit</button>
                            </div>
                        </div>
                      </div>
                    </div>
                </form>
            </div>
            <!-- /.complete-registration-card-body -->
        </div>
    </div>
@endsection