@extends('layouts.app')

@section('content')
<style>

/* =========================================================
   JEWELL EXCEL LOGIN PAGE
========================================================= */

:root {
    --jewel-navy: #173b5b;
    --jewel-navy-dark: #0d273d;
    --jewel-gold: #c99a3e;
    --jewel-gold-light: #d8b36a;
    --jewel-cream: #f7f4ee;
    --jewel-ivory: #fbfaf7;
    --jewel-border: #e7e1d7;
    --jewel-text: #173b5b;
    --jewel-muted: #77736c;
}


/* =========================
   MAIN
========================= */

.jewell-login-page {
    min-height: 100vh;
    background: var(--jewel-cream);
    color: var(--jewel-text);
}


/* =========================
   LOGIN SECTION
========================= */

.login-section {
    padding: 75px 20px 90px;
    background:
        radial-gradient(
            circle at 10% 15%,
            rgba(201,154,62,0.07),
            transparent 25%
        ),
        var(--jewel-cream);
}


.login-container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
}


/* =========================
   MAIN LOGIN LAYOUT
========================= */

.login-layout {
    display: grid;
    grid-template-columns: 46% 54%;
    background: #fff;
    border: 1px solid var(--jewel-border);
    box-shadow: 0 25px 70px rgba(13,39,61,0.12);
}


/* =========================
   LEFT PANEL
========================= */

.login-brand-panel {
    min-height: 690px;
    position: relative;
    overflow: hidden;
    color: #fff;
    background:
        linear-gradient(
            145deg,
            #0d273d 0%,
            #173b5b 55%,
            #204d70 100%
        );
}


.login-brand-panel::before {
    content: "";
    position: absolute;
    width: 430px;
    height: 430px;
    right: -220px;
    top: -180px;
    border: 1px solid rgba(216,179,106,0.25);
    transform: rotate(45deg);
}


.login-brand-panel::after {
    content: "";
    position: absolute;
    width: 380px;
    height: 380px;
    left: -250px;
    bottom: -220px;
    border: 1px solid rgba(216,179,106,0.18);
    transform: rotate(45deg);
}


/* Decorative patterns */

.brand-pattern {
    position: absolute;
    border: 1px solid rgba(255,255,255,0.08);
    transform: rotate(45deg);
}

.pattern-one {
    width: 160px;
    height: 160px;
    right: 45px;
    bottom: 55px;
}

.pattern-two {
    width: 85px;
    height: 85px;
    right: 85px;
    bottom: 95px;
    border-color: rgba(201,154,62,0.25);
}


/* =========================
   BRAND CONTENT
========================= */

.brand-content {
    position: relative;
    z-index: 3;
    padding: 62px 55px;
}


.brand-mark {
    width: 58px;
    height: 58px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 55px;
    border: 1px solid rgba(255,255,255,0.35);
}


.brand-logo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* Small label */

.eyebrow {
    display: block;
    font-family: Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--jewel-gold);
    text-transform: uppercase;
    margin-bottom: 17px;
}


/* Brand heading */

.brand-content h1 {
    margin: 0 0 25px;
    max-width: 410px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 48px;
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -1px;
}


.brand-content h1 span {
    display: block;
    color: var(--jewel-gold-light);
}


.brand-description {
    max-width: 390px;
    color: rgba(255,255,255,0.72);
    font-family: Arial, sans-serif;
    font-size: 13px;
    line-height: 1.9;
    margin-bottom: 30px;
}


/* Gold line */

.brand-line {
    width: 70px;
    height: 1px;
    background: var(--jewel-gold);
    margin-bottom: 32px;
}


/* =========================
   BRAND FEATURES
========================= */

.brand-features {
    display: flex;
    flex-direction: column;
    gap: 18px;
}


.brand-feature {
    display: flex;
    align-items: center;
    gap: 15px;
}


.feature-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(216,179,106,0.45);
    color: var(--jewel-gold-light);
    font-size: 13px;
}


.brand-feature strong {
    display: block;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 3px;
}


.brand-feature span {
    display: block;
    color: rgba(255,255,255,0.53);
    font-family: Arial, sans-serif;
    font-size: 10px;
}


/* =========================
   QUOTE
========================= */

.brand-quote {
    margin-top: 42px;
    padding: 20px 22px;
    border-left: 1px solid var(--jewel-gold);
    background: rgba(255,255,255,0.045);
    max-width: 390px;
}


.quote-mark {
    color: var(--jewel-gold);
    font-family: Georgia, serif;
    font-size: 25px;
    line-height: 1;
}


.brand-quote p {
    margin: 4px 0 0;
    color: rgba(255,255,255,0.68);
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 12px;
    line-height: 1.7;
}


/* =========================
   RIGHT FORM PANEL
========================= */

.login-form-panel {
    background: #fff;
    min-height: 690px;
    display: flex;
    align-items: center;
}


.login-form-inner {
    width: 100%;
    max-width: 470px;
    margin: 0 auto;
    padding: 65px 65px;
}


/* =========================
   HEADING
========================= */

.login-heading {
    margin-bottom: 40px;
}


.login-heading h2 {
    margin: 0 0 10px;
    font-family: Georgia, "Times New Roman", serif;
    color: var(--jewel-navy);
    font-size: 42px;
    line-height: 1.05;
    font-weight: 400;
}


.login-heading h2 span {
    color: var(--jewel-gold);
}


.login-heading p {
    margin: 0;
    color: #817d76;
    font-family: Arial, sans-serif;
    font-size: 12px;
    line-height: 1.7;
}


/* =========================
   ALERTS
========================= */

.login-alert {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 13px 15px;
    margin-bottom: 22px;
    font-family: Arial, sans-serif;
    font-size: 12px;
    line-height: 1.6;
    border: 1px solid;
}


.login-alert i {
    margin-top: 2px;
}


.success-alert {
    background: #f3f8f2;
    border-color: #d7e7d3;
    color: #47703f;
}


.error-alert {
    background: #fbf3f1;
    border-color: #ead6d0;
    color: #8a4d43;
}


.login-alert ul {
    margin: 0;
    padding-left: 17px;
}


/* =========================
   FORM
========================= */

.form-field {
    margin-bottom: 25px;
}


.form-field label {
    display: block;
    margin-bottom: 9px;
    color: var(--jewel-navy);
    font-family: Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
}


.form-field label span {
    color: var(--jewel-gold);
}


.input-wrapper {
    position: relative;
}


.input-icon {
    position: absolute;
    left: 17px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--jewel-gold);
    font-size: 12px;
    z-index: 2;
}


.input-wrapper input {
    width: 100%;
    height: 53px;
    padding: 0 45px 0 45px;
    border: 1px solid #ded9d0;
    background: #fbfaf7;
    color: var(--jewel-navy);
    outline: none;
    font-family: Arial, sans-serif;
    font-size: 12px;
    transition: all .25s ease;
    border-radius: 0;
}


.input-wrapper input::placeholder {
    color: #aaa59c;
}


.input-wrapper input:hover {
    border-color: #c9c1b4;
}


.input-wrapper input:focus {
    background: #fff;
    border-color: var(--jewel-gold);
    box-shadow: 0 0 0 3px rgba(201,154,62,0.08);
}


/* =========================
   PASSWORD
========================= */

.password-toggle {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: #9a968e;
    cursor: pointer;
    padding: 5px;
    transition: color .2s ease;
}


.password-toggle:hover {
    color: var(--jewel-gold);
}


/* =========================
   LOGIN OPTIONS
========================= */

.login-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin: 2px 0 28px;
}


.remember-option {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: #77736d;
    font-family: Arial, sans-serif;
    font-size: 11px;
}


.remember-option input {
    display: none;
}


.custom-checkbox {
    width: 15px;
    height: 15px;
    border: 1px solid #cfc9bf;
    display: inline-block;
    position: relative;
    background: #fff;
}


.remember-option input:checked + .custom-checkbox {
    background: var(--jewel-navy);
    border-color: var(--jewel-navy);
}


.remember-option input:checked + .custom-checkbox::after {
    content: "";
    position: absolute;
    width: 5px;
    height: 9px;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    transform: rotate(45deg);
    left: 4px;
    top: 1px;
}


.forgot-link {
    color: var(--jewel-navy);
    text-decoration: none;
    font-family: Arial, sans-serif;
    font-size: 11px;
    font-weight: 600;
    transition: color .2s ease;
}


.forgot-link:hover {
    color: var(--jewel-gold);
}


/* =========================
   LOGIN BUTTON
========================= */

.login-submit {
    width: 100%;
    min-height: 54px;
    border: 0;
    background: var(--jewel-navy);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    font-family: Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    transition: all .3s ease;
}


.login-submit i {
    color: var(--jewel-gold-light);
    font-size: 11px;
    transition: transform .3s ease;
}


.login-submit:hover {
    background: var(--jewel-gold);
    color: #fff;
}


.login-submit:hover i {
    color: #fff;
    transform: translateX(5px);
}


/* =========================
   SECURITY NOTE
========================= */

.secure-note {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    color: #99948b;
    font-family: Arial, sans-serif;
    font-size: 9px;
    margin-top: 13px;
}


.secure-note i {
    color: var(--jewel-gold);
}


/* =========================
   DIVIDER
========================= */

.form-divider {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 30px 0 22px;
}


.form-divider span {
    height: 1px;
    flex: 1;
    background: #e8e3db;
}


.form-divider small {
    color: #aaa59d;
    font-family: Arial, sans-serif;
    font-size: 9px;
    letter-spacing: 1px;
}


/* =========================
   SOCIAL LOGIN
========================= */

.social-login {
    display: flex;
    justify-content: center;
    gap: 10px;
}


.social-button {
    width: 39px;
    height: 39px;
    border: 1px solid #e3ddd3;
    background: #fff;
    color: var(--jewel-navy);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all .25s ease;
}


.social-button:hover {
    background: var(--jewel-navy);
    color: #fff;
    border-color: var(--jewel-navy);
    transform: translateY(-2px);
}


/* =========================
   REGISTER
========================= */

.register-area {
    text-align: center;
    margin-top: 30px;
    padding-top: 25px;
    border-top: 1px solid #eee9e1;
}


.register-area p {
    margin: 0 0 7px;
    color: #99948c;
    font-family: Arial, sans-serif;
    font-size: 10px;
}


.register-area a {
    color: var(--jewel-navy);
    text-decoration: none;
    font-family: Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    transition: color .2s ease;
}


.register-area a:hover {
    color: var(--jewel-gold);
}


.register-area a i {
    margin-left: 5px;
    font-size: 9px;
}


/* =========================
   BOTTOM STRIP
========================= */

.login-bottom-strip {
    background: var(--jewel-navy);
    color: #fff;
    border-top: 1px solid rgba(255,255,255,.05);
}


.bottom-strip-inner {
    max-width: 1180px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}


.bottom-item {
    min-height: 100px;
    padding: 22px 25px;
    display: flex;
    align-items: center;
    gap: 15px;
    border-right: 1px solid rgba(255,255,255,.08);
}


.bottom-item:last-child {
    border-right: 0;
}


.bottom-item > i {
    color: var(--jewel-gold-light);
    font-size: 17px;
}


.bottom-item strong {
    display: block;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 13px;
    font-weight: 400;
    margin-bottom: 4px;
}


.bottom-item span {
    display: block;
    color: rgba(255,255,255,.52);
    font-family: Arial, sans-serif;
    font-size: 8px;
    line-height: 1.5;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991px) {

    .login-section {
        padding: 50px 20px 60px;
    }

    .login-layout {
        grid-template-columns: 1fr;
    }

    .login-brand-panel {
        min-height: auto;
    }

    .brand-content {
        padding: 50px 45px;
    }

    .brand-mark {
        margin-bottom: 35px;
    }

    .brand-content h1 {
        font-size: 42px;
    }

    .login-form-panel {
        min-height: auto;
    }

    .login-form-inner {
        max-width: 600px;
        padding: 55px 50px;
    }

    .bottom-strip-inner {
        grid-template-columns: repeat(2, 1fr);
    }

    .bottom-item:nth-child(2) {
        border-right: 0;
    }

    .bottom-item:nth-child(-n+2) {
        border-bottom: 1px solid rgba(255,255,255,.08);
    }

}


@media (max-width: 767px) {

    .login-section {
        padding: 25px 15px 40px;
    }

    .login-layout {
        box-shadow: 0 15px 40px rgba(13,39,61,.10);
    }

    .login-brand-panel {
        min-height: auto;
    }

    .brand-content {
        padding: 40px 28px;
    }

    .brand-mark {
        width: 52px;
        height: 52px;
        margin-bottom: 35px;
    }

    .brand-content h1 {
        font-size: 36px;
        letter-spacing: -.5px;
    }

    .brand-description {
        font-size: 12px;
    }

    .brand-quote {
        margin-top: 32px;
    }

    .login-form-inner {
        padding: 42px 25px;
    }

    .login-heading {
        margin-bottom: 30px;
    }

    .login-heading h2 {
        font-size: 35px;
    }

    .login-options {
        align-items: flex-start;
    }

    .bottom-strip-inner {
        grid-template-columns: 1fr;
    }

    .bottom-item {
        min-height: 80px;
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.08);
    }

    .bottom-item:last-child {
        border-bottom: 0;
    }

}


@media (max-width: 420px) {

    .brand-content {
        padding: 35px 22px;
    }

    .brand-content h1 {
        font-size: 32px;
    }

    .login-form-inner {
        padding: 38px 20px;
    }

    .login-heading h2 {
        font-size: 31px;
    }

    .login-options {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .bottom-item {
        padding: 20px;
    }

}


/* =========================
   REMOVE DEFAULT MAIN
========================= */

.jewell-login-page *,
.jewell-login-page *::before,
.jewell-login-page *::after {
    box-sizing: border-box;
}


/* Prevent theme styles from affecting inputs */

.jewell-login-page input,
.jewell-login-page button {
    font-family: inherit;
}


/* =========================
   FADE ANIMATION
========================= */

@keyframes jewelFadeUp {

    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


.login-layout {
    animation: jewelFadeUp .7s ease both;
}

.login-bottom-strip {
    animation: jewelFadeUp .9s ease both;
}

</style>

<main class="jewell-login-page">

    <!-- =========================
         LOGIN PAGE
    ========================== -->
    <section class="login-section">

        <div class="login-container">

            <div class="login-layout">

                <!-- =========================
                     LEFT BRAND PANEL
                ========================== -->
                <div class="login-brand-panel">

                    <div class="brand-pattern pattern-one"></div>
                    <div class="brand-pattern pattern-two"></div>

                    <div class="brand-content">

                        <div class="brand-mark">
                            <img
                                src="{{ asset('assets/images/jewell-excel-logo.jpeg') }}"
                                alt="Jewell Excel"
                                class="brand-logo"
                            >
                        </div>

                        <span class="eyebrow">
                            JEWELL EXCEL
                        </span>

                        <h1>
                            Welcome to
                            <span>Jewell Excel.</span>
                        </h1>

                        <p class="brand-description">
                            Discover a refined jewellery experience where timeless
                            elegance meets contemporary design.
                        </p>

                        <div class="brand-line"></div>

                        <div class="brand-features">

                            <div class="brand-feature">
                                <div class="feature-icon">
                                    <i class="fas fa-gem"></i>
                                </div>

                                <div>
                                    <strong>Timeless Elegance</strong>
                                    <span>Designed to shine beautifully.</span>
                                </div>
                            </div>

                            <div class="brand-feature">
                                <div class="feature-icon">
                                    <i class="fas fa-shield-alt"></i>
                                </div>

                                <div>
                                    <strong>Secure Experience</strong>
                                    <span>Your account stays protected.</span>
                                </div>
                            </div>

                            <div class="brand-feature">
                                <div class="feature-icon">
                                    <i class="fas fa-heart"></i>
                                </div>

                                <div>
                                    <strong>Made for Moments</strong>
                                    <span>Jewellery for every occasion.</span>
                                </div>
                            </div>

                        </div>

                        <div class="brand-quote">
                            <span class="quote-mark">“</span>

                            <p>
                                Jewellery is more than an accessory —
                                it is a reflection of the moments and
                                memories that make us who we are.
                            </p>
                        </div>

                    </div>

                </div>


                <!-- =========================
                     RIGHT LOGIN PANEL
                ========================== -->
                <div class="login-form-panel">

                    <div class="login-form-inner">

                        <!-- Top Label -->
                        <div class="login-heading">

                            <span class="eyebrow">
                                MEMBER ACCESS
                            </span>

                            <h2>
                                Welcome
                                <span>back.</span>
                            </h2>

                            <p>
                                Sign in to continue your jewellery journey.
                            </p>

                        </div>


                        <!-- =========================
                             ALERTS
                        ========================== -->

                        @if(session('success'))

                            <div class="login-alert success-alert">
                                <i class="fas fa-check-circle"></i>

                                <span>
                                    {{ session('success') }}
                                </span>
                            </div>

                        @endif


                        @if(session('error'))

                            <div class="login-alert error-alert">
                                <i class="fas fa-exclamation-circle"></i>

                                <span>
                                    {{ session('error') }}
                                </span>
                            </div>

                        @endif


                        @if($errors->any())

                            <div class="login-alert error-alert">

                                <i class="fas fa-exclamation-circle"></i>

                                <div>
                                    <ul>
                                        @foreach($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>

                            </div>

                        @endif


                        <!-- =========================
                             LOGIN FORM
                        ========================== -->

                        <form
                            action="#"
                            method="POST"
                            class="luxury-login-form"
                        >

                            @csrf


                            <!-- Phone -->
                            <div class="form-field">

                                <label for="login-phone">
                                    Use Mobile or Email
                                    <span>*</span>
                                </label>

                                <div class="input-wrapper">

                                    <span class="input-icon">
                                        <i class="fas fa-phone-alt"></i>
                                    </span>

                                    <input
                                        type="text"
                                        name="phone"
                                        id="login-phone"
                                        placeholder="Mobile or Email"
                                        autocomplete="tel"
                                        required
                                    >

                                </div>

                            </div>


                            <!-- Password -->
                            <div class="form-field">

                                <label for="login-password">
                                    Password
                                    <span>*</span>
                                </label>

                                <div class="input-wrapper">

                                    <span class="input-icon">
                                        <i class="fas fa-lock"></i>
                                    </span>

                                    <input
                                        type="password"
                                        name="password"
                                        id="login-password"
                                        placeholder="Enter your password"
                                        required
                                    >

                                    <button
                                        type="button"
                                        class="password-toggle"
                                        id="togglePassword"
                                        aria-label="Show password"
                                    >
                                        <i class="fas fa-eye-slash"></i>
                                    </button>

                                </div>

                            </div>


                            <!-- Remember / Forgot -->
                            <div class="login-options">

                                <label class="remember-option">

                                    <input
                                        type="checkbox"
                                        name="remember"
                                        id="remember-me"
                                    >

                                    <span class="custom-checkbox"></span>

                                    <span>
                                        Remember me
                                    </span>

                                </label>


                                <a
                                    href="{{ url('/forgot-password') }}"
                                    class="forgot-link"
                                >
                                    Forgot Password?
                                </a>

                            </div>


                            <!-- Login Button -->
                            <button
                                type="submit"
                                class="login-submit"
                            >

                                <span>
                                    Login to Account
                                </span>

                                <i class="fas fa-arrow-right"></i>

                            </button>


                            <!-- Security -->
                            <div class="secure-note">

                                <i class="fas fa-shield-alt"></i>

                                <span>
                                    Secure & protected member access
                                </span>

                            </div>


                            <!-- Divider -->
                            <!--<div class="form-divider">-->

                            <!--    <span></span>-->

                            <!--    <small>-->
                            <!--        OR-->
                            <!--    </small>-->

                            <!--    <span></span>-->

                            <!--</div>-->


                            <!-- Social Login -->
                            <!--<div class="social-login">-->

                            <!--    <button-->
                            <!--        type="button"-->
                            <!--        class="social-button"-->
                            <!--        aria-label="Google"-->
                            <!--    >-->
                            <!--        <i class="fab fa-google"></i>-->
                            <!--    </button>-->

                            <!--    <button-->
                            <!--        type="button"-->
                            <!--        class="social-button"-->
                            <!--        aria-label="Facebook"-->
                            <!--    >-->
                            <!--        <i class="fab fa-facebook-f"></i>-->
                            <!--    </button>-->

                            <!--    <button-->
                            <!--        type="button"-->
                            <!--        class="social-button"-->
                            <!--        aria-label="Apple"-->
                            <!--    >-->
                            <!--        <i class="fab fa-apple"></i>-->
                            <!--    </button>-->

                            <!--</div>-->


                            <!-- Register -->
                            <div class="register-area">

                                <p>
                                    Don't have an account?
                                </p>

                                <a href="{{ url('/register') }}">
                                    Create Account
                                    <i class="fas fa-arrow-right"></i>
                                </a>

                            </div>

                        </form>

                    </div>

                </div>

            </div>

        </div>

    </section>


    <!-- =========================
         BOTTOM BRAND STRIP
    ========================== -->

    <section class="login-bottom-strip">

        <div class="bottom-strip-inner">

            <div class="bottom-item">

                <i class="fas fa-gem"></i>

                <div>
                    <strong>Premium Quality</strong>
                    <span>Crafted with attention to detail</span>
                </div>

            </div>


            <div class="bottom-item">

                <i class="fas fa-lock"></i>

                <div>
                    <strong>Secure Login</strong>
                    <span>Your information stays protected</span>
                </div>

            </div>


            <div class="bottom-item">

                <i class="fas fa-truck"></i>

                <div>
                    <strong>Trusted Service</strong>
                    <span>A seamless shopping experience</span>
                </div>

            </div>


            <div class="bottom-item">

                <i class="fas fa-headset"></i>

                <div>
                    <strong>Customer Care</strong>
                    <span>We're here whenever you need us</span>
                </div>

            </div>

        </div>

    </section>

</main>

<script>

document.addEventListener('DOMContentLoaded', function () {

    /* ==========================================
       PASSWORD SHOW / HIDE
    ========================================== */

    const togglePassword =
        document.getElementById('togglePassword');

    const passwordField =
        document.getElementById('login-password');


    if (togglePassword && passwordField) {

        togglePassword.addEventListener('click', function () {

            const icon =
                this.querySelector('i');

            if (passwordField.type === 'password') {

                passwordField.type = 'text';

                icon.classList.remove('fa-eye-slash');
                icon.classList.add('fa-eye');

                this.setAttribute(
                    'aria-label',
                    'Hide password'
                );

            } else {

                passwordField.type = 'password';

                icon.classList.remove('fa-eye');
                icon.classList.add('fa-eye-slash');

                this.setAttribute(
                    'aria-label',
                    'Show password'
                );

            }

        });

    }


    /* ==========================================
       SOCIAL LOGIN
    ========================================== */

    const socialButtons =
        document.querySelectorAll('.social-button');


    socialButtons.forEach(function (button) {

        button.addEventListener('click', function () {

            const existingAlert =
                document.querySelector('.social-login-alert');

            if (existingAlert) {
                return;
            }


            const alert =
                document.createElement('div');

            alert.className =
                'login-alert social-login-alert';

            alert.style.marginTop = '15px';

            alert.innerHTML =
                '<i class="fas fa-info-circle"></i>' +
                '<span>Social login will be available soon.</span>';


            const socialLogin =
                document.querySelector('.social-login');

            if (socialLogin) {

                socialLogin.parentNode.insertBefore(
                    alert,
                    socialLogin.nextSibling
                );

            }


            setTimeout(function () {

                alert.style.opacity = '0';
                alert.style.transition = 'opacity .3s ease';

                setTimeout(function () {

                    if (alert.parentNode) {
                        alert.remove();
                    }

                }, 300);

            }, 3000);

        });

    });


    /* ==========================================
       INPUT FOCUS EFFECT
    ========================================== */

    const inputs =
        document.querySelectorAll(
            '.input-wrapper input'
        );


    inputs.forEach(function (input) {

        input.addEventListener('focus', function () {

            const wrapper =
                this.closest('.input-wrapper');

            if (wrapper) {

                wrapper.classList.add(
                    'input-focused'
                );

            }

        });


        input.addEventListener('blur', function () {

            const wrapper =
                this.closest('.input-wrapper');

            if (wrapper) {

                wrapper.classList.remove(
                    'input-focused'
                );

            }

        });

    });


    /* ==========================================
       PHONE NUMBER - BASIC CLEANING
    ========================================== */

    const phoneInput =
        document.getElementById('login-phone');


    if (phoneInput) {

        phoneInput.addEventListener(
            'input',
            function () {

                this.value =
                    this.value.replace(
                        /[^0-9+\-\s]/g,
                        ''
                    );

            }
        );

    }

});

</script>

@endsection