@extends('frontend.layouts.app')
@section('frontend_title', 'Tushar Enterprise')

@section('frontend_content')
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-md-offset-3 mx-auto px-5 py-5 my-5 shadow-sm rounded">
                <div id="signin" class="px-2 py-3 border-1">
                    <form method="POST" action="{{ route('login') }}">
                        @csrf
                        <h4 class="border-b pb-2 mb-3">Sign In</h4>
                        @error('account_status')
                            <div class="form-text text-danger mb-2">{{ $message }}</div>
                        @enderror
                        @if (session('status'))
                            <div class="form-text text-danger mb-2">{{ session('status') }}</div>
                        @endif
                        <div class="form-group">
                            <label for="singin-email">Username or email address *</label>
                            <input type="text" class="form-control" id="singin-email" name="email" value="{{ old('email') }}" required>
                            @error('email')
                                <div class="form-text text-danger">{{ $message }}</div>
                            @enderror
                        </div><!-- End .form-group -->

                        <div class="form-group">
                            <label for="singin-password">Password *</label>
                            <div class="position-relative passwordshowhide">
                                <input type="password" class="form-control pe-4" id="singin-password" name="password" required>
                                <div class="icon" style="position: absolute; top: 50%; transform: translateY(-50%); right: 10px;">
                                    <i class="la la-eye-slash show" style="font-size: 24px; cursor: pointer;"></i>
                                    <i class="la la-eye d-none hide" style="font-size: 24px; cursor: pointer;"></i>
                                </div>
                            </div>
                            @error('password')
                                <div class="form-text text-danger">{{ $message }}</div>
                            @enderror
                        </div><!-- End .form-group -->

                        <div class="form-footer gx-3 justify-content-between">
                            <button type="submit" class="btn btn-outline-primary-2">
                                <span>LOG IN</span>
                                <i class="icon-long-arrow-right"></i>
                            </button>

                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" name="remember" id="signin-remember">
                                <label class="custom-control-label" for="signin-remember">Remember Me</label>
                            </div><!-- End .custom-checkbox -->

                            @if (Route::has('password.request'))
                                <a class="forgot-link" href="{{ route('password.request') }}">
                                    Forgot Your Password?
                                </a>
                            @endif
                        </div><!-- End .form-footer -->
                    </form>
                 
                </div>
            </div>
        </div>
    </div>
@endsection
@section('frontend_scripts')
    <script>
        $(document).ready(function() {

            $(document).on('click', '.passwordshowhide .icon .show', function() {
                let passwordshowhide = $(this).closest('.passwordshowhide');
                passwordshowhide.find('.show').addClass('d-none');
                passwordshowhide.find('.hide').removeClass('d-none');
                passwordshowhide.find('input').attr('type', 'text');
            });

            $(document).on('click', '.passwordshowhide .icon .hide', function() {
                let passwordshowhide = $(this).closest('.passwordshowhide');
                passwordshowhide.find('.hide').addClass('d-none');
                passwordshowhide.find('.show').removeClass('d-none');
                passwordshowhide.find('input').attr('type', 'password');
            });

        });
    </script>
@endsection