@include('more.partials._header')

<section class="section-padding-equal-70">
    <div class="container">
        <div class="row">
            <div class="col-lg-4">
                <br />
                <img src="/more/media/logo-dark.png" alt="logo" class="img-fluid">
                <br />
                <hr>
                <br />
                <p class="lead">
                    To protect and help you sell or buy safely, please register or login.
                </p>
                {{-- <p><a href="/new-customer/" class="btn btn-info btn-block">Yes please, register now!</a></p> --}}
            </div>
            <div class="col-lg-8 sidebar-break-sm sidebar-widget-area mt-0">
                <div class="myaccount-login-form light-shadow-bg">
                    <div class="light-box-content">
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="form-box login-form">
                                    {{-- <h2 class="item-title">Login</h2>s --}}
                                    <div class="form-group">
                                            <label>Login with:</label>
                                            <div class="btn-group" role="group" aria-label="Login options">
                                                <button type="button" class="btn "
                                                    style="background-color: #2B303A;color:white"
                                                    id="login-by-phone">Phone</button>
                                                <button type="button" class="btn "
                                                    style="background-color: #F65016; color:white"
                                                    id="login-by-email">Email</button>
                                            </div>
                                        </div>
                                        @if ($errors->any())
                                            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                                <ul>
                                                    @foreach ($errors->all() as $error)
                                                        <li>{{ $error }}</li>
                                                    @endforeach
                                                </ul>
                                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                            </div>
                                        @endif

                                        @if (Session::has('error'))
                                            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                                {{ Session::get('error') }}
                                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                            </div>
                                        @endif
                                        <!-- //success -->
                                        @if (Session::has('success'))
                                            <div class="alert alert-success alert-dismissible fade show" role="alert">
                                                {{ Session::get('success') }}
                                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                            </div>
                                        @endif
                                        <form action="/signin" method="POST" enctype="multipart/form-data"
                                        autocomplete="off">
                                        @csrf
                                        @if ($errors->any())
                                            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                                <ul>
                                                    @foreach ($errors->all() as $error)
                                                        <li>{{ $error }}</li>
                                                    @endforeach
                                                </ul>
                                                <button type="button" class="close" data-dismiss="alert"
                                                    aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                            </div>
                                        @endif
                                            <div id="phone-login">
                                                <div class="form-group">
                                                    <label>Phone Number</label>
                                                    <input type="tel" class="form-control" name="phone"
                                                        id="login-phone" required>
                                                </div>
                                                <div class="form-group">
                                                    <label>Password</label>
                                                    <input type="password" class="form-control" name="password"
                                                        id="login-password" required>
                                                </div>

                                                <div class="form-group">
                                                    <a href="/forgot" class="forgot-password text-right">Forgot your
                                                        password?</a>
                                                </div>
        
                                                <div class="form-group row">
                                                    <div class="col-lg-6 col-sm-12">
                                                        <input type="submit" class="submit-btn" value="Sign in"
                                                            style="border-radius: 3.25rem;">
                                                    </div>
                                                    <div class="col-lg-6 col-sm-12">
                                                        <p style="margin-top: 3%">
                                                            <a href="/join" class="forgot-password">
                                                                New User? Join now
                                                            </a>
                                                        </p>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                </div>
                                            </div>
                                        </form>

                                        <form action="/signin" method="POST" enctype="multipart/form-data"
                                        autocomplete="off">
                                            @csrf
                                            <div id="email-login" style="display: none;">
                                                <div class="form-group">
                                                    <label>Email</label>
                                                    <input type="text" class="form-control" name="email"
                                                        id="login-email" required>
                                                </div>
                                                <div class="form-group">
                                                    <label>Password</label>
                                                    <input type="password" class="form-control" name="password"
                                                        id="login-password" required>
                                                </div>

                                                <div class="form-group">
                                                    <a href="/forgot" class="forgot-password text-right">Forgot your
                                                        password?</a>
                                                </div>
        
                                                <div class="form-group row">
                                                    <div class="col-lg-6 col-sm-12">
                                                        <input type="submit" class="submit-btn" value="Sign in"
                                                            style="border-radius: 3.25rem;">
                                                    </div>
                                                    <div class="col-lg-6 col-sm-12">
                                                        <p style="margin-top: 3%">
                                                            <a href="/join" class="forgot-password">
                                                                New User? Join now
                                                            </a>
                                                        </p>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                </div>
                                            </div>
                                        </form>

                                    <div class="or-container">
                                        <div class="line-separator"></div>
                                        <div class="or-label">or</div>
                                        <div class="line-separator"></div>
                                    </div>

                                    <div class="kpx_login" style="text-align: center">
                                        {{-- <h3 class="kpx_authTitle">Login using: </h3> --}}
                                        <div class="row">

                                            <div class="col-sm-4 col-xs-12">
                                                <a href="/google/redirect" class="btn-google login-with-google-btn" 
                                                    data-toggle="tooltip" data-placement="top" title="Sign in with Google">
                                                    Sign in with Google
                                                </a>
                                            </div>
                                                
                                            <div class="col-sm-4 col-xs-12 ">
                                                {{-- <a href="/facebook/redirect" class="btn-facebook"
                                                    data-toggle="tooltip" data-placement="top" title="Sign in with Facebook">
                                                    <i class="fab fa-facebook fa-4x"></i>
                                                    <span>Facebook sign in</span>
                                                </a> --}}
                                                {{-- <a name="button" type="submit" class="flex w-100 p-3 radius-default items-center bg-base-inverted registration__button-container brand-apple">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" role="img" aria-hidden="true" class="crayons-icon crayons-icon--default">
                                                        <path d="M12.38 6.615c.901 0 2.033-.61 2.707-1.423.61-.738 1.056-1.768 1.056-2.798 0-.14-.013-.28-.04-.394-1.004.038-2.21.673-2.936 1.525-.572.65-1.094 1.667-1.094 2.71 0 .152.026.304.038.354.064.013.166.026.267.026h.001ZM9.2 22c1.234 0 1.78-.827 3.319-.827 1.564 0 1.906.802 3.28.802 1.348 0 2.25-1.246 3.102-2.467.954-1.4 1.349-2.772 1.373-2.836-.089-.025-2.67-1.08-2.67-4.042 0-2.569 2.034-3.726 2.149-3.815-1.348-1.933-3.395-1.983-3.954-1.983-1.514 0-2.746.915-3.522.915-.84 0-1.946-.865-3.255-.865C6.529 6.882 4 8.942 4 12.832c0 2.416.94 4.972 2.097 6.625C7.088 20.857 7.954 22 9.2 22Z" fill="#000"></path>
                                                    </svg>
                                                    
                                                    <span class="w-100 flex fw-medium fs-s justify-center items-center self-center color-primary">
                                                        Sign in with Apple
                                                    </span>
                                                </a> --}}
                                                {{-- <div
                                                    id="appleid-signin"
                                                    data-mode="center-align"
                                                    data-type="sign-in"
                                                    data-color="black"
                                                    data-border="false"
                                                    data-border-radius="15"
                                                    data-width="200"
                                                    data-height="32"
                                                    data-logo-size="medium"
                                                    data-logo-position="15"
                                                    data-label-position="46"
                                                    data-toggle="tooltip" data-placement="top" title="Sign in with Apple"
                                                    ></div> --}}
                                                    <div
                                                        id="appleid-signin"
                                                        data-mode="center-align"
                                                        data-type="sign-in"
                                                        data-color="white"
                                                        data-border="true"
                                                        data-border-radius="15"
                                                        data-width="225"
                                                        data-height="36"
                                                        data-toggle="tooltip" data-placement="top" title="Sign in with Apple"
                                                        >
                                                    </div>
                                                    <script type="text/javascript" src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"></script>
                                            </div>

                                            <div class="col-sm-4 col-xs-12">
                                                {{-- <a name="button" type="submit" class="flex w-100 p-3 radius-default items-center bg-base-inverted registration__button-container brand-facebook">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" role="img" aria-hidden="true" class="crayons-icon crayons-icon--default">
                                                        <path d="M18.5 2.5a3 3 0 0 1 3 3v13a3 3 0 0 1-3 3h-13a3 3 0 0 1-3-3v-13a3 3 0 0 1 3-3h13Z" fill="#1877F2"></path>
                                                        <path d="M16.12 12h-2.636v-1.781c0-.754.368-1.485 1.544-1.485h1.2V6.395s-1.087-.184-2.126-.184c-2.167 0-3.586 1.312-3.586 3.693V12H8.105v2.75h2.41v6.75h2.97v-6.757h2.214L16.115 12h.006Z" fill="#fff"></path>
                                                    </svg>
                                                
                                                    <span class="w-100 flex fw-medium fs-s justify-center items-center self-center color-primary">
                                                        Sign in with Facebook
                                                    </span>
                                                </a> --}}
                                                <div
                                                    class="fb-login-button"
                                                    data-width="36px"
                                                    data-size="large"
                                                    data-button-type=""
                                                    data-layout=""
                                                    data-auto-logout-link="false"
                                                    data-use-continue-as="true">
                                                </div>
                                            </div>
                                            {{-- <div class="col-xs-4 col-sm-4">
                                                <a href="/twitter/redirect" class="btn-twitter"
                                                    data-toggle="tooltip" data-placement="top" title="Sign in with Twitter">
                                                    <i class="fab fa-twitter fa-4x"></i>
                                                    <span>Twitter sign in</span>
                                                </a>
                                            </div> --}}
                                        </div>
                                    </div>

                                    {{-- <div class="row">
                                        <div class="col-md-12">
                                            <a class="btn btn-lg btn-google btn-block text-uppercase btn-outline" href="#">
                                                <img src="https://img.icons8.com/color/16/000000/google-logo.png"> Signin Using Google
                                            </a>
                                            <br/>
                                            <p>
                                                By continuing, you agree to More Classified's <a href="#" target="__blank">User Agreement</a>, <a href="#" target="__blank">Privacy Policy</a>, and <a href="#" target="__blank">Cookie Policy</a>.
                                            </p>
                                        </div>
                                    </div> --}}
                                    <br>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>



        </div>
    </div>
</section>

@include('more.partials._footer')