@extends('theme::layouts.app')

@section('content')
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <div class="flex flex-col justify-center py-20 px-2 sm:px-6 lg:px-8 min-h-screen main-wrapper login-signup-page" style="background-image: url({{ asset('themes/tailwind/images/login-bg.png') }})">
        <div class="mx-auto login-signup-card">
            <form action="{{ route('login') }}" method="POST">
                @csrf
                <input type="hidden" name="user_type" value="user">

                <img class="logo mb-6 mx-auto" src="{{ asset('themes/tailwind/images/logo.png') }}" height="90">
                <h3 class="form-title mb-6">Login To Your Account</h3>

                <div class="form-group mb-6">
                    <label for="email">Email</label>
                    <input id="email" type="email" name="email" required class="w-full form-input no-radius" autofocus>

                    @if ($errors->has('email'))
                        <div class="mt-1 text-red-500">
                            {{ $errors->first('email') }}
                        </div>
                    @endif
                </div>

                <div class="form-group mb-6">
                    <label for="password">
                        Password
                    </label>

                    <div class="password-wrapper">
                        <input id="password" type="password" name="password" required class="w-full form-input no-radius">
                        <img class="mx-auto password-hide-show" src="{{ asset('themes/tailwind/images/password-hide-show.png') }}">
                    </div>

                    @if ($errors->has('password'))
                        <div class="mt-1 text-red-500">
                            {{ $errors->first('password') }}
                        </div>
                    @endif
                </div>

                <div class="mb-6">
                    <a href="{{ route('forgot-password') }}" class="blue-link ">Forgot Password?</a>
                </div>

                <div class="mb-6">
                    <div class="custom-radio-checkbox">
                        <input type="checkbox" class="remember" name="remember" id="remember" value="1">
                        <label class="remember_label" for="remember">
                            Remember Me
                        </label>
                    </div>
                </div>

                <div class="mb-6">
                    <span class="block w-full rounded-md shadow-sm">
                        <button type="submit" class="flex justify-center w-full px-4 py-3 text-sm font-medium text-black transition duration-150 ease-in-out border primary-button submit-btn">
                            Sign in
                        </button>
                    </span>
                </div>

                <p class="bottom-desc">
                    Don't have an account? <a href="{{ route('register') }}" class="link">Sign Up</a>
                </p>
            </form>
        </div>

        <div class="mx-auto bottom-links-wrapper">
            <a href="{{ route('user-terms-and-conditions') }}" class="link">Terms and Conditions</a>
            <a href="{{ route('user-privacy-policy') }}" class="link">Privacy Policy</a>
        </div>
    </div>

    @if(Session::has('message'))
        <div class="modal fade validation-modal style1" id="validationModal" tabindex="-1" aria-labelledby="validationModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content mx-auto w-100">
                    <div class="modal-body p-0">
                        <p class="text-center error-message">{{ Session::get('message') }}</p>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">OK</button>
                    </div>
                </div>
            </div>
        </div>
    @endif
@endsection

@section('script')
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    <script>
        $(function() {
            if ($('#validationModal').length) {
                $('#validationModal').modal('show');
            }

            $('.password-hide-show').click(function() {
                var type = $(this).parent().find('input').attr('type');

                if (type == 'password') {
                    $(this).parent().find('input').attr('type', 'text');
                }
                else {
                    $(this).parent().find('input').attr('type', 'password');
                }
            });
        });
    </script>
@endsection