@extends('backend.auth.layouts.auth-template')
@section('title', 'Login')
@section('content')
    <section>
        <div class="row">
            @include('backend.auth.left-banner')
            <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 p-0">
                <div class="login-form-section">
                    <div class="row justify-content-center">
                        <div class="col-md-10 col-lg-10 col-sm-10">
                            <div class="login-form-title text-center">
                                <div class="logo-wrapper position-relative">
                                    <img src="{{ asset('backend/template/images/logo/logo.gif') }}" alt="Logo" />
                                </div>
                                <h2>Welcome Back!</h2>
                                <p>Enter your email and password to access you account.</p>
                            </div>
                            @if ($errors->has('errors'))
                                <div class="alert alert-danger text-center" role="alert">
                                    {{ $errors->first('errors') }}
                                </div>
                            @endif
                            @if (Session::has('message'))
                                <div class="alert alert-success" role="alert">
                                    {{ Session::get('message') }}
                                </div>
                            @endif

                            <form action="{{ route('backend.auth.login') }}" method="post" id="sign-in">
                                @csrf

                                <div class="row field-container">
                                    <!-- Email Input -->
                                    {{-- <label>Email Address </label>
                                    <input type="text" name="username" id="login-email" class="input-field"
                                        placeholder="Enter your email address" value="{{ old('username') }}" />
                                    @error('username')
                                        <span class="error-message">{{ $message }}</span>
                                    @enderror --}}
                                    <div class="flex-column">
                                        <label>Email Address <span class="text-danger">*</span></label>
                                    </div>
                                    <div class="inputForm position-relative">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                                            viewBox="0 0 20 20" fill="none">
                                            <g clip-path="url(#clip0_218_617)">
                                                <mask id="mask0_218_617" style="mask-type:luminance"
                                                    maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
                                                    <path d="M20 0H0V20H20V0Z" fill="white" />
                                                </mask>
                                                <g mask="url(#mask0_218_617)">
                                                    <path
                                                        d="M14.1667 17.0834H5.83341C3.33341 17.0834 1.66675 15.8334 1.66675 12.9167V7.08341C1.66675 4.16675 3.33341 2.91675 5.83341 2.91675H14.1667C16.6667 2.91675 18.3334 4.16675 18.3334 7.08341V12.9167C18.3334 15.8334 16.6667 17.0834 14.1667 17.0834Z"
                                                        stroke="#9CA3AF" stroke-width="1.5" stroke-miterlimit="10"
                                                        stroke-linecap="round" stroke-linejoin="round" />
                                                    <path
                                                        d="M14.1668 7.5L11.5585 9.58333C10.7002 10.2667 9.29183 10.2667 8.4335 9.58333L5.8335 7.5"
                                                        stroke="#9CA3AF" stroke-width="1.5" stroke-miterlimit="10"
                                                        stroke-linecap="round" stroke-linejoin="round" />
                                                </g>
                                            </g>
                                            <defs>
                                                <clipPath id="clip0_218_617">
                                                    <rect width="20" height="20" fill="white" />
                                                </clipPath>
                                            </defs>
                                        </svg>
                                        <input type="text" name="username" id="login-email" class="input-field"
                                            placeholder="Enter your email address" value="{{ old('username') }}">
                                    </div>
                                    @error('username')
                                        <span class="error-message">{{ $message }}</span>
                                    @enderror

                                    <div class="flex-column mt-2">
                                        <label>Password <span class="text-danger">*</span></label>
                                    </div>
                                    <div class="inputForm position-relative">
                                        <div class="password-field">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                                                viewBox="0 0 20 20" fill="none">
                                                <g clip-path="url(#clip0_218_628)">
                                                    <mask id="mask0_218_628" style="mask-type:luminance"
                                                        maskUnits="userSpaceOnUse" x="0" y="0" width="20"
                                                        height="20">
                                                        <path d="M20 0H0V20H20V0Z" fill="white" />
                                                    </mask>
                                                    <g mask="url(#mask0_218_628)">
                                                        <path
                                                            d="M9.99992 18.9591C9.79992 18.9591 9.6 18.9341 9.40833 18.8757C5.0833 17.6841 1.94995 13.6424 1.94995 9.25908V5.60072C1.94995 4.66738 2.62496 3.65909 3.49163 3.30076L8.1333 1.40073C9.34167 0.909066 10.6666 0.909066 11.8666 1.40073L16.5083 3.30076C17.3749 3.65909 18.05 4.66738 18.05 5.60072V9.25908C18.05 13.6341 14.9083 17.6758 10.5916 18.8757C10.3999 18.9341 10.1999 18.9591 9.99992 18.9591ZM9.99992 2.29241C9.52492 2.29241 9.05825 2.38409 8.60825 2.56742L3.96663 4.46739C3.56663 4.63406 3.19995 5.17572 3.19995 5.60906V9.26742C3.19995 13.0924 5.94996 16.6257 9.74158 17.6757C9.90825 17.7257 10.0916 17.7257 10.2583 17.6757C14.0499 16.6257 16.8 13.0924 16.8 9.26742V5.60906C16.8 5.17572 16.4333 4.63406 16.0333 4.46739L11.3917 2.56742C10.9417 2.38409 10.4749 2.29241 9.99992 2.29241Z"
                                                            fill="#9CA3AF" />
                                                        <path
                                                            d="M10.0002 11.0418C8.7335 11.0418 7.7085 10.0168 7.7085 8.75016C7.7085 7.4835 8.7335 6.4585 10.0002 6.4585C11.2668 6.4585 12.2918 7.4835 12.2918 8.75016C12.2918 10.0168 11.2668 11.0418 10.0002 11.0418ZM10.0002 7.7085C9.42516 7.7085 8.9585 8.17516 8.9585 8.75016C8.9585 9.32516 9.42516 9.79183 10.0002 9.79183C10.5752 9.79183 11.0418 9.32516 11.0418 8.75016C11.0418 8.17516 10.5752 7.7085 10.0002 7.7085Z"
                                                            fill="#9CA3AF" />
                                                        <path
                                                            d="M10 13.5417C9.65833 13.5417 9.375 13.2584 9.375 12.9167V10.4167C9.375 10.0751 9.65833 9.79175 10 9.79175C10.3417 9.79175 10.625 10.0751 10.625 10.4167V12.9167C10.625 13.2584 10.3417 13.5417 10 13.5417Z"
                                                            fill="#9CA3AF" />
                                                    </g>
                                                </g>
                                                <defs>
                                                    <clipPath id="clip0_218_628">
                                                        <rect width="20" height="20" fill="white" />
                                                    </clipPath>
                                                </defs>
                                            </svg>

                                            <input type="password" name="password" id="login-password" class="input-field"
                                                placeholder="Enter your password" value="{{ old('password') }}" />
                                            <span id="toggle-password" class="toggle-password-icon disabled">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                                                    viewBox="0 0 20 20" fill="none" class="position-unset">
                                                    <g clip-path="url(#clip0_218_637)">
                                                        <mask id="mask0_218_637" style="mask-type:luminance"
                                                            maskUnits="userSpaceOnUse" x="0" y="0" width="20"
                                                            height="20">
                                                            <path d="M20 0H0V20H20V0Z" fill="white" />
                                                        </mask>
                                                        <g mask="url(#mask0_218_637)">
                                                            <path
                                                                d="M12.1085 7.8916L7.89185 12.1083C7.35018 11.5666 7.01685 10.8249 7.01685 9.99992C7.01685 8.34992 8.35015 7.0166 10.0001 7.0166C10.8251 7.0166 11.5668 7.34994 12.1085 7.8916Z"
                                                                stroke="#111827" stroke-width="1.5" stroke-linecap="round"
                                                                stroke-linejoin="round" />
                                                            <path
                                                                d="M14.8501 4.80889C13.3918 3.70889 11.7251 3.10889 10.0001 3.10889C7.05845 3.10889 4.31678 4.84222 2.40845 7.84222C1.65845 9.01725 1.65845 10.9922 2.40845 12.1672C3.06678 13.2006 3.83345 14.0922 4.66678 14.8089"
                                                                stroke="#111827" stroke-width="1.5"
                                                                stroke-linecap="round" stroke-linejoin="round" />
                                                            <path
                                                                d="M7.01685 16.2748C7.96685 16.6748 8.97515 16.8915 10.0001 16.8915C12.9418 16.8915 15.6835 15.1582 17.5918 12.1582C18.3418 10.9832 18.3418 9.00816 17.5918 7.83315C17.3168 7.39982 17.0168 6.99149 16.7085 6.60815"
                                                                stroke="#111827" stroke-width="1.5"
                                                                stroke-linecap="round" stroke-linejoin="round" />
                                                            <path
                                                                d="M12.925 10.5828C12.7083 11.7578 11.75 12.7161 10.575 12.9328"
                                                                stroke="#111827" stroke-width="1.5"
                                                                stroke-linecap="round" stroke-linejoin="round" />
                                                            <path d="M7.89175 12.1079L1.66675 18.3329" stroke="#111827"
                                                                stroke-width="1.5" stroke-linecap="round"
                                                                stroke-linejoin="round" />
                                                            <path d="M18.3334 1.66675L12.1084 7.89175" stroke="#111827"
                                                                stroke-width="1.5" stroke-linecap="round"
                                                                stroke-linejoin="round" />
                                                        </g>
                                                    </g>
                                                    <defs>
                                                        <clipPath id="clip0_218_637">
                                                            <rect width="20" height="20" fill="white" />
                                                        </clipPath>
                                                    </defs>
                                                </svg>
                                            </span>
                                        </div>
                                    </div>
                                    @error('password')
                                        <span class="error-message">{{ $message }}</span>
                                    @enderror

                                    <!-- Remember Me and Forgot Password -->
                                    <div class="checkbox-item">
                                        <div class="checkbox-gap">
                                            <input type="checkbox" id="remember-check" name="remember"
                                                {{ old('remember') ? 'checked' : '' }} />
                                            <label for="remember-check" class="mb-0">Remember me</label>
                                        </div>
                                        <span>
                                            <a href="{{ route('backend.auth.forgot-password') }}"
                                                class="text-highlight fw-normal">Forgot
                                                Password?</a>
                                        </span>
                                    </div>

                                    <!-- General Errors -->
                                    @if (session('error'))
                                        <span class="error-message">{{ session('error') }}</span>
                                    @endif

                                    <!-- Submit Button -->
                                    <button type="submit" class="btn login-btn">Log In</button>
                                </div>

                            </form>

                        </div>
                    </div>
                    {{-- @include('backend.auth.layouts.patterns') --}}
                </div>
            </div>
        </div>
    </section>
@endsection
@section('script')
    <script>
        $(document).ready(function() {
            $("#sign-in").validate({
                rules: {

                    username: {
                        required: true,
                    },
                    password: {
                        required: true,
                        minlength: 6,
                    },
                },
                messages: {
                    password: {
                        required: "Please enter your password.",
                        minlength: "Password must be at least 6 characters long."
                    }
                },
                errorPlacement: function(error, element) {
                    error.insertAfter(element.closest('.inputForm'));
                },
                highlight: function(element) {
                    $(element).closest('.form-group').addClass('has-error');
                },
                unhighlight: function(element) {
                    $(element).closest('.form-group').removeClass('has-error');
                }
            });
        });
        // Elements
        const passwordInput = document.getElementById('login-password');
        const toggleIcon = document.getElementById('toggle-password');

        const eyeOpen = `
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" class="position-unset">
            <path d="M10 4C6 4 2.73 6.61 1.5 10C2.73 13.39 6 16 10 16C14 16 17.27 13.39 18.5 10C17.27 6.61 14 4 10 4Z"
                    stroke="#111827" stroke-width="1.5"/>
            <path d="M10 13C11.65 13 13 11.65 13 10C13 8.34 11.65 7 10 7C8.34 7 7 8.34 7 10C7 11.65 8.34 13 10 13Z"
                    stroke="#111827" stroke-width="1.5"/>
            </svg>
            `;

        const eyeSlash = `
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" class="position-unset">
                    <g clip-path="url(#clip0_218_637)" >
                    <mask id="mask0_218_637" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
                    <path d="M20 0H0V20H20V0Z" fill="white"/>
                    </mask>
                    <g mask="url(#mask0_218_637)">
                    <path d="M12.1085 7.8916L7.89185 12.1083C7.35018 11.5666 7.01685 10.8249 7.01685 9.99992C7.01685 8.34992 8.35015 7.0166 10.0001 7.0166C10.8251 7.0166 11.5668 7.34994 12.1085 7.8916Z" stroke="#111827" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M14.8501 4.80889C13.3918 3.70889 11.7251 3.10889 10.0001 3.10889C7.05845 3.10889 4.31678 4.84222 2.40845 7.84222C1.65845 9.01725 1.65845 10.9922 2.40845 12.1672C3.06678 13.2006 3.83345 14.0922 4.66678 14.8089" stroke="#111827" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M7.01685 16.2748C7.96685 16.6748 8.97515 16.8915 10.0001 16.8915C12.9418 16.8915 15.6835 15.1582 17.5918 12.1582C18.3418 10.9832 18.3418 9.00816 17.5918 7.83315C17.3168 7.39982 17.0168 6.99149 16.7085 6.60815" stroke="#111827" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M12.925 10.5828C12.7083 11.7578 11.75 12.7161 10.575 12.9328" stroke="#111827" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M7.89175 12.1079L1.66675 18.3329" stroke="#111827" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M18.3334 1.66675L12.1084 7.89175" stroke="#111827" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                    </g>
                    </g>
                    <defs>
                    <clipPath id="clip0_218_637">
                    <rect width="20" height="20" fill="white"/>
                    </clipPath>
                    </defs>
                    </svg>
            `;

        // Enable/Disable Eye Icon Based on Password Input
        passwordInput.addEventListener('input', function() {
            if (passwordInput.value.trim() !== "") {
                toggleIcon.classList.remove('disabled');
            } else {
                toggleIcon.classList.add('disabled');
            }
        });

        // Toggle Password Visibility on Icon Click
        toggleIcon.addEventListener('click', function() {
            if (!toggleIcon.classList.contains('disabled')) {

                const isPassword = passwordInput.type === 'password';

                passwordInput.type = isPassword ? 'text' : 'password';

                // 🔥 Swap SVG
                this.innerHTML = isPassword ? eyeOpen : eyeSlash;
            }
        });
    </script>
@endsection