@extends('front.layouts.layout-login')

@section('content')
            <div>
            <div class="container-fluid p-0">
                <div class="row no-gutters">

                    <div class="col-xl-9">
                        <div class="auth-full-bg pt-lg-5 p-4">
                            <div class="w-100">
                                <div class="bg-overlay"></div>
                                <div class="d-flex h-100 flex-column">

                                    <div class="p-4 mt-auto">
                                        <div class="row justify-content-center">
                                            <div class="col-lg-7">
                                                <div class="text-center py-3 px-2 bg-white br rounded">

                                                    <h4 class="mb-3"><i class="bx bxs-quote-alt-left text-primary h1 align-middle mr-3"></i><span class="text-primary">5k</span>+ Satisfied clients</h4>

                                                    <div dir="ltr">
                                                        <div class="owl-carousel owl-theme auth-review-carousel" id="auth-review-carousel">
                                                            <div class="item">
                                                                <div class="py-3">
                                                                    <p class="font-size-16 mb-4">" Fantastic theme with a ton of options. If you just want the HTML to integrate with your project, then this is the package. You can find the files in the 'dist' folder...no need to install git and all the other stuff the documentation talks about. "</p>

                                                                    <div>
                                                                        <h4 class="font-size-16 text-primary">Abs1981</h4>
                                                                        <p class="font-size-14 mb-0">- Skote User</p>
                                                                    </div>
                                                                </div>

                                                            </div>

                                                            <div class="item">
                                                                <div class="py-3">
                                                                    <p class="font-size-16 mb-4">" If Every Vendor on Envato are as supportive as Themesbrand, Development with be a nice experience. You guys are Wonderful. Keep us the good work. "</p>

                                                                    <div>
                                                                        <h4 class="font-size-16 text-primary">nezerious</h4>
                                                                        <p class="font-size-14 mb-0">- Skote User</p>
                                                                    </div>
                                                                </div>

                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- end col -->

                    <div class="col-xl-3">
                        <div class="auth-full-page-content p-md-5 p-4">
                            <div class="w-100">

                                <div class="d-flex flex-column h-100">
                                    <div class="mb-4 mb-md-5">
                                        <a href="{{ route('index') }}" class="d-block auth-logo custom-login-page-logo">
                                            <img src="{{ asset("/images/logo-light.png") }}" alt="" height="30" class="auth-logo-dark">

                                        </a>
                                    </div>
                                    <div class="my-auto">

                                        <div>
                                            <h5 class="text-primary">Welcome Back !</h5>
                                            <p class="text-muted">Sign in to continue to Corporate Governance.</p>
                                        </div>

                                        <div class="mt-4">
                                            {{ Form::open(array('url' => 'user/setpassword', 'method' => 'post', 'id' => 'sign_in', 'class' => 'form-horizontal')) }}
                                                <div class="form-group">
                                                    <input type="hidden" name="tokenuser" value="{{$tokenuser}}" />
                                                    <label for="email">Password <span class="text-danger">*</span></label>
                                                    <input type="password" class="form-control" name="password" value="" id="password" placeholder="Password" aria-required="true"{{ $errors->has('email') ? ' aria-invalid="true"' : '' }} @required(true) autocomplete="off">
                                                    @if ($errors->has('password'))
                                                        <label class="error" for="password">
                                                            <strong>{{ $errors->first('password') }}</strong>
                                                        </label>
                                                    @endif
                                                </div>

                                                <div class="form-group">

                                                    <label for="password">Retype Password <span class="text-danger">*</span></label>
                                                    <input type="password" class="form-control" name="c_password" id="c_password" placeholder="Retype Password" aria-required="true"{{ $errors->has('repassword') ? ' aria-invalid="true"' : '' }} @required(true) autocomplete="off">
                                                    @if ($errors->has('c_password'))
                                                        <label class="error" for="c_password">
                                                            <strong>{{ $errors->first('c_password') }}</strong>
                                                        </label>
                                                    @endif
                                                </div>



                                                <div class="mt-3">
                                                    <button class="btn btn-primary btn-block waves-effect waves-light" type="submit">Set Password</button>
                                                </div>


                                                <div class="mt-4 text-center d-none">
                                                    <h5 class="font-size-14 mb-3">Sign in with</h5>

                                                    <ul class="list-inline">
                                                        <li class="list-inline-item">
                                                            <a href="javascript::void()" class="social-list-item bg-primary text-white border-primary">
                                                                <i class="mdi mdi-facebook"></i>
                                                            </a>
                                                        </li>
                                                        <li class="list-inline-item">
                                                            <a href="javascript::void()" class="social-list-item bg-info text-white border-info">
                                                                <i class="mdi mdi-twitter"></i>
                                                            </a>
                                                        </li>
                                                        <li class="list-inline-item">
                                                            <a href="javascript::void()" class="social-list-item bg-danger text-white border-danger">
                                                                <i class="mdi mdi-google"></i>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </div>

                                                {{ Form::close() }}
                                            <div class="mt-5 text-center d-none">
                                                <p>Don't have an account ? <a href="#" class="font-weight-medium text-primary"> Signup now </a> </p>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="mt-4 mt-md-5 text-center">
                                        <p class="mb-0">© <script>document.write(new Date().getFullYear())</script> DreamzTech Solutions.<i class="mdi mdi-heart text-danger"></i> Design & Develop by DreamzTech Solutions.</p>
                                    </div>
                                </div>


                            </div>
                        </div>
                    </div>
                    <!-- end col -->
                </div>
                <!-- end row -->
            </div>
            <!-- end container-fluid -->
        </div>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
        <script>
            $(document).ready(function() {
                $('#password, #c_password').on('keyup', function () {
                    if ($('#password').val() == $('#c_password').val()) {
                        $('#c_password').css('border-color', 'green');
                    } else {
                        $('#c_password').css('border-color', 'red');
                    }
                });

                $('#sign_in').on('submit', function(event) {
                    let isValid = true;

                    if ($('#password').val() == $('#c_password').val()) {
                        $('#c_password').css('border-color', 'green');
                    } else {
                        $('#c_password').css('border-color', 'red');
                        isValid = false;
                    }

                    if (!isValid) {
                    event.preventDefault();
                }

                });
            });
        </script>
@endsection