@extends('frontend.auth.master')
@section('content')
    @use('App\Models\Setting')
    @php
        $settings = Setting::first()->values;
    @endphp
    <div class="login-title">
        <h2>{{ $themeOptions['authentication']['title'] ??  __('static.get_started')}}</h2>
        <p>{{ $themeOptions['authentication']['description'] ?? __('static.sortnote') }}</p>
    </div>

    <div class="login-detail mb-0">
        @if (session()->has('error'))
            <div class="alert alert-danger">
                {{ session()->get('error') }}
            </div>
        @endif
        <form action="{{ route('frontend.login') }}" method="POST" id="loginForm">
            @csrf
            @method('POST')
            <div class="row g-sm-4 g-3">
                <div class="col-12">
                    <div class="form-group">
                        <label for="email">{{ __('frontend::auth.email') }}</label>
                        <div class="position-relative">
                            <i class="iconsax" icon-name="mail"></i>
                            <input class="form-control" id="email" placeholder="{{ __('frontend::auth.enter_email') }}" name="email" type="email">
                        </div>
                        @error('email')
                            <span class="invalid-feedback d-block" role="alert">{{ $message }}</span>
                        @enderror
                    </div>
                </div>
                <div class="col-12">
                    <div class="form-group">
                        <label for="password">{{ __('frontend::auth.password') }}</label>
                        <div class="position-relative">
                            <i class="iconsax" icon-name="lock-2"></i>
                            <input class="form-control form-control-white pr-45" id="password" placeholder="{{ __('frontend::auth.enter_your_password') }}" name="password" type="password">
                            <div class="toggle-password">
                                <i class="iconsax eye" icon-name="eye"></i>
                                <i class="iconsax eye-slash" icon-name="eye-slash"></i>
                            </div>
                        </div>
                        @error('password')
                            <span class="invalid-feedback d-block" role="alert">{{ $message }}</span>
                        @enderror
                    </div>
                </div>
            </div>

            <div class="forgot-pass">
                <a href="{{ route('frontend.forgot.index') }}">{{ __('frontend::auth.forgot_password') }} </a>
            </div>
            <button type="submit" class="btn btn-solid submit spinner-btn">
                {{ __('frontend::auth.login_now') }}
                <span class="spinner-border spinner-border-sm" style="display: none;"></span>
            </button>

            <div class="not-member">
                <span>Don't have an account?</span>
                <a href="{{ route('frontend.register.index') }}">Sign up</a>
            </div>
        </form>
        @isset($settings['activation']['default_credentials'])
            @if($settings['activation']['default_credentials'])
                <div class="demo-credential">
                    <button class="btn btn-outline default-credentials" data-email="user@urbanpro.com">User</button>
                </div>
            @endif
        @endisset
    </div>
    <div class="other-options">
        <span class="options">
            <span>OR</span>
        </span>
        <ul class="social-media">
            @if ($settings['activation']['social_login_enable'] == 1)
                <li>
                    <a href="{{ route('frontend.redirectToProvider', ['provider' => 'google']) }}" target="_blank"
                        class="social-icon">
                        <img src="{{ asset('frontend/images/social/google.png') }}" alt="google" class="img-fluid">
                        <span>Sign in with Google</span>
                    </a>
                </li>
            @endif
            <li>
                <a href="{{ route('frontend.login.number') }}" class="social-icon">
                    <img src="{{ asset('frontend/images/social/mobile.png') }}" class="img-fluid" alt="mobile">
                    <span>Sign in with Phone number</span>
                </a>
            </li>
        </ul>
    </div>
@endsection
@push('js')
<script>
    (function($) {
        "use strict";
        $(document).ready(function() {
            $(".default-credentials").click(function() {
                $("#email").val("");
                $("#password").val("");
                var email = $(this).data("email");
                $("#email").val(email);
                $("#password").val("123456789");
            });
            $("#registerForm").validate({
                ignore: [],
                rules: {
                    "email": {
                            required: true,
                            email: true
                        },
                        "password": {
                            required: true
                        },
                },
            });

        });
    })(jQuery);
</script>
@endpush