@extends('layouts.app')

@section('content')

<style>
/* =========================================================
   JEWELL EXCEL — REGISTER PAGE
   Luxury Jewellery Theme
========================================================= */

:root {
    --jx-navy: #173957;
    --jx-navy-dark: #0d293f;
    --jx-navy-light: #234c6d;
    --jx-gold: #c99d4a;
    --jx-gold-light: #d9b56d;
    --jx-cream: #f7f4ee;
    --jx-cream-dark: #eee9df;
    --jx-text: #263c4d;
    --jx-muted: #74818a;
    --jx-white: #ffffff;
}

/* =========================
   PAGE
========================= */

.jx-register-page {
    min-height: calc(100vh - 100px);
    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(201,157,74,.08),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #f7f4ee 0%,
            #ffffff 48%,
            #f7f4ee 100%
        );
    color: var(--jx-text);
    font-family: Arial, Helvetica, sans-serif;
    padding: 75px 20px 80px;
    position: relative;
    overflow: hidden;
}

/* Decorative background lines */

.jx-register-page::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    border: 1px solid rgba(201,157,74,.13);
    border-radius: 50%;
    right: -250px;
    top: 70px;
    pointer-events: none;
}

.jx-register-page::after {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    border: 1px solid rgba(23,57,87,.08);
    transform: rotate(45deg);
    left: -250px;
    bottom: -200px;
    pointer-events: none;
}


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

.jx-register-container {
    width: min(1120px, 100%);
    margin: 0 auto;
    position: relative;
    z-index: 2;
}


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

.jx-register-card {
    display: grid;
    grid-template-columns: 0.92fr 1.08fr;
    background: #ffffff;
    box-shadow:
        0 25px 70px rgba(13,41,63,.13),
        0 5px 20px rgba(13,41,63,.05);
    border: 1px solid rgba(23,57,87,.08);
    overflow: hidden;
}


/* =========================================================
   LEFT BRAND / IMAGE PANEL
========================================================= */

.jx-register-brand {
    position: relative;
    min-height: 720px;
    overflow: hidden;
    background: var(--jx-navy);
    color: #fff;
}

.jx-register-brand-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: .72;
    transition: transform 1s ease;
}

.jx-register-brand:hover .jx-register-brand-image {
    transform: scale(1.035);
}

.jx-register-brand-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(10,34,52,.78) 0%,
            rgba(15,43,64,.58) 42%,
            rgba(8,29,45,.96) 100%
        );
}

.jx-register-brand-pattern {
    position: absolute;
    width: 330px;
    height: 330px;
    right: -125px;
    top: -100px;
    border: 1px solid rgba(255,255,255,.10);
    transform: rotate(45deg);
}

.jx-register-brand-pattern::before {
    content: "";
    position: absolute;
    inset: 45px;
    border: 1px solid rgba(201,157,74,.18);
}

.jx-register-brand-content {
    position: relative;
    z-index: 3;
    height: 100%;
    min-height: 720px;
    padding: 55px 52px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


/* Logo */

.jx-register-logo {
    width: 62px;
    height: 62px;
    border: 1px solid rgba(255,255,255,.55);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.06);
    margin-bottom: 55px;
}

.jx-register-logo img {
    max-width: 38px;
    max-height: 38px;
    object-fit: contain;
}


/* Eyebrow */

.jx-register-eyebrow {
    display: inline-block;
    color: var(--jx-gold-light);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 3px;
    margin-bottom: 16px;
}


/* Main heading */

.jx-register-brand h1 {
    font-family:
        Georgia,
        "Times New Roman",
        serif;
    font-size: clamp(38px, 4vw, 58px);
    line-height: .98;
    font-weight: 400;
    margin: 0 0 24px;
    color: #fff;
}

.jx-register-brand h1 span {
    color: var(--jx-gold-light);
}

.jx-register-brand-description {
    color: rgba(255,255,255,.78);
    max-width: 390px;
    font-size: 13px;
    line-height: 1.9;
    margin-bottom: 38px;
}


/* Feature list */

.jx-register-features {
    display: grid;
    gap: 12px;
}

.jx-register-feature {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 15px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.055);
    backdrop-filter: blur(5px);
    transition: .3s ease;
}

.jx-register-feature:hover {
    background: rgba(255,255,255,.10);
    border-color: rgba(201,157,74,.4);
    transform: translateX(4px);
}

.jx-register-feature-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(201,157,74,.45);
    color: var(--jx-gold-light);
}

.jx-register-feature h4 {
    margin: 0 0 4px;
    color: #fff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 14px;
    font-weight: 400;
}

.jx-register-feature p {
    margin: 0;
    color: rgba(255,255,255,.58);
    font-size: 10px;
    line-height: 1.5;
}


/* Bottom quote */

.jx-register-quote {
    border-left: 2px solid var(--jx-gold);
    padding: 16px 0 16px 18px;
    margin-top: 40px;
    background: rgba(255,255,255,.04);
}

.jx-register-quote p {
    margin: 0;
    color: rgba(255,255,255,.78);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 13px;
    line-height: 1.7;
    font-style: italic;
}


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

.jx-register-form-panel {
    background: #fff;
    padding: 58px 65px;
    display: flex;
    align-items: center;
}

.jx-register-form-inner {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
}


/* Form heading */

.jx-form-label {
    display: inline-block;
    color: var(--jx-gold);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 3px;
    margin-bottom: 13px;
}

.jx-register-form-heading {
    margin-bottom: 35px;
}

.jx-register-form-heading h2 {
    font-family:
        Georgia,
        "Times New Roman",
        serif;
    color: var(--jx-navy);
    font-size: clamp(38px, 4vw, 52px);
    font-weight: 400;
    line-height: 1;
    margin: 0 0 15px;
}

.jx-register-form-heading h2 span {
    color: var(--jx-gold);
}

.jx-register-form-heading p {
    color: var(--jx-muted);
    font-size: 12px;
    line-height: 1.8;
    margin: 0;
}


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

.jx-alert {
    padding: 14px 16px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    font-size: 12px;
    line-height: 1.6;
}

.jx-alert-success {
    color: #275c42;
    background: #eef8f1;
    border-color: #cce7d4;
}

.jx-alert-danger {
    color: #7b3030;
    background: #fbefef;
    border-color: #efd0d0;
}

.jx-alert ul {
    margin: 0;
    padding-left: 18px;
}


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

.jx-form-group {
    margin-bottom: 20px;
}

.jx-form-label-main {
    display: block;
    color: var(--jx-navy);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
    margin-bottom: 8px;
}

.jx-form-label-main i {
    color: var(--jx-gold);
    width: 16px;
}

.jx-input-wrap {
    position: relative;
}

.jx-input {
    width: 100%;
    height: 52px;
    border: 1px solid #ddd9d0;
    background: #faf9f6;
    color: var(--jx-text);
    padding: 0 16px;
    font-size: 13px;
    outline: none;
    border-radius: 0;
    transition: .25s ease;
}

.jx-input::placeholder {
    color: #a7aaa9;
}

.jx-input:hover {
    border-color: #cfc8ba;
    background: #fff;
}

.jx-input:focus {
    border-color: var(--jx-gold);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(201,157,74,.09);
}


/* Password fields */

.jx-password-input {
    padding-right: 48px;
}

.jx-toggle-password {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #92999d;
    cursor: pointer;
    font-size: 13px;
    transition: .25s ease;
}

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


/* Terms */

.jx-terms {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 6px 0 24px;
}

.jx-terms input {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    accent-color: var(--jx-navy);
    cursor: pointer;
}

.jx-terms label {
    color: var(--jx-muted);
    font-size: 11px;
    line-height: 1.6;
    cursor: pointer;
}

.jx-terms a {
    color: var(--jx-gold);
    text-decoration: none;
    font-weight: 700;
}

.jx-terms a:hover {
    color: var(--jx-navy);
}


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

.jx-register-button {
    width: 100%;
    height: 54px;
    border: 0;
    background: var(--jx-navy);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: .3s ease;
}

.jx-register-button::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--jx-gold);
    transform: translateX(-101%);
    transition: transform .35s ease;
}

.jx-register-button span,
.jx-register-button i {
    position: relative;
    z-index: 2;
}

.jx-register-button:hover::before {
    transform: translateX(0);
}

.jx-register-button:hover {
    color: #fff;
}


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

.jx-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 28px 0 22px;
}

.jx-divider::before,
.jx-divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: #e5e0d7;
}

.jx-divider span {
    color: #aaa49b;
    font-size: 9px;
    letter-spacing: 2px;
}


/* =========================
   SOCIAL BUTTONS
========================= */

.jx-socials {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 27px;
}

.jx-social {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e1ddd5;
    background: #fff;
    color: var(--jx-navy);
    cursor: pointer;
    transition: .3s ease;
}

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


/* =========================
   LOGIN LINK
========================= */

.jx-login-link {
    text-align: center;
    padding-top: 4px;
}

.jx-login-link p {
    margin: 0;
    color: var(--jx-muted);
    font-size: 11px;
}

.jx-login-link a {
    color: var(--jx-navy);
    text-decoration: none;
    font-weight: 700;
    margin-left: 5px;
}

.jx-login-link a:hover {
    color: var(--jx-gold);
}


/* =========================================================
   TRUST BAR
========================================================= */

.jx-register-trust {
    margin-top: 25px;
    background: var(--jx-navy);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    color: #fff;
}

.jx-trust-item {
    min-height: 82px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-right: 1px solid rgba(255,255,255,.10);
    padding: 14px;
}

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

.jx-trust-icon {
    color: var(--jx-gold-light);
    font-size: 16px;
}

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

.jx-trust-content span {
    display: block;
    color: rgba(255,255,255,.58);
    font-size: 8px;
    letter-spacing: .6px;
}


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

@media (max-width: 991px) {

    .jx-register-page {
        padding: 50px 18px 60px;
    }

    .jx-register-card {
        grid-template-columns: 1fr;
    }

    .jx-register-brand {
        min-height: 520px;
    }

    .jx-register-brand-content {
        min-height: 520px;
        padding: 42px;
    }

    .jx-register-logo {
        margin-bottom: 35px;
    }

    .jx-register-form-panel {
        padding: 50px 42px;
    }

    .jx-register-trust {
        grid-template-columns: repeat(2, 1fr);
    }

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

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


@media (max-width: 767px) {

    .jx-register-page {
        padding: 25px 12px 40px;
    }

    .jx-register-card {
        box-shadow: 0 15px 40px rgba(13,41,63,.12);
    }

    .jx-register-brand {
        min-height: 480px;
    }

    .jx-register-brand-content {
        min-height: 480px;
        padding: 32px 25px;
    }

    .jx-register-brand h1 {
        font-size: 40px;
    }

    .jx-register-brand-description {
        font-size: 12px;
        line-height: 1.75;
        margin-bottom: 25px;
    }

    .jx-register-feature {
        padding: 11px;
    }

    .jx-register-feature h4 {
        font-size: 12px;
    }

    .jx-register-feature p {
        font-size: 9px;
    }

    .jx-register-form-panel {
        padding: 38px 22px;
    }

    .jx-register-form-heading {
        margin-bottom: 28px;
    }

    .jx-register-form-heading h2 {
        font-size: 38px;
    }

    .jx-input {
        height: 50px;
    }

    .jx-register-trust {
        grid-template-columns: 1fr;
    }

    .jx-trust-item,
    .jx-trust-item:nth-child(2) {
        min-height: 70px;
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.10);
    }

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


@media (max-width: 420px) {

    .jx-register-brand {
        min-height: 450px;
    }

    .jx-register-brand-content {
        min-height: 450px;
        padding: 28px 20px;
    }

    .jx-register-logo {
        width: 52px;
        height: 52px;
        margin-bottom: 30px;
    }

    .jx-register-brand h1 {
        font-size: 34px;
    }

    .jx-register-form-panel {
        padding: 32px 18px;
    }

    .jx-register-form-heading h2 {
        font-size: 34px;
    }

    .jx-social {
        width: 38px;
        height: 38px;
    }
}
</style>


<main class="jx-register-page">

    <div class="jx-register-container">

        <!-- =====================================================
             REGISTER CARD
        ====================================================== -->

        <div class="jx-register-card">


            <!-- =================================================
                 LEFT — JEWELL EXCEL BRAND PANEL
            ================================================== -->

            <section class="jx-register-brand">

                <img
                    src="{{ asset('assets/images/jewellery-contact.jpg') }}"
                    alt="Jewell Excel Jewellery"
                    class="jx-register-brand-image"
                >

                <div class="jx-register-brand-overlay"></div>

                <div class="jx-register-brand-pattern"></div>


                <div class="jx-register-brand-content">

                    <div>

                        <!-- Logo -->

                        <div class="jx-register-logo">

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

                        </div>


                        <span class="jx-register-eyebrow">
                            JEWELL EXCEL
                        </span>


                        <h1>
                            Begin your
                            <span>beautiful</span>
                            journey.
                        </h1>


                        <p class="jx-register-brand-description">
                            Create your Jewell Excel account and enjoy a refined
                            jewellery shopping experience designed around elegance,
                            convenience and timeless beauty.
                        </p>


                        <!-- Features -->

                        <div class="jx-register-features">

                            <div class="jx-register-feature">

                                <div class="jx-register-feature-icon">
                                    <i class="fa-solid fa-shield-halved"></i>
                                </div>

                                <div>
                                    <h4>
                                        Secure Account
                                    </h4>

                                    <p>
                                        Your registration details are protected.
                                    </p>
                                </div>

                            </div>


                            <div class="jx-register-feature">

                                <div class="jx-register-feature-icon">
                                    <i class="fa-solid fa-gem"></i>
                                </div>

                                <div>
                                    <h4>
                                        Discover Fine Jewellery
                                    </h4>

                                    <p>
                                        Explore timeless pieces created for you.
                                    </p>
                                </div>

                            </div>


                            <div class="jx-register-feature">

                                <div class="jx-register-feature-icon">
                                    <i class="fa-solid fa-box-open"></i>
                                </div>

                                <div>
                                    <h4>
                                        Manage Your Orders
                                    </h4>

                                    <p>
                                        Keep your purchases and account details organised.
                                    </p>
                                </div>

                            </div>

                        </div>

                    </div>


                    <!-- Quote -->

                    <div class="jx-register-quote">

                        <p>
                            Jewellery is more than an accessory —
                            it is a reflection of your moments,
                            memories and personal style.
                        </p>

                    </div>

                </div>

            </section>


            <!-- =================================================
                 RIGHT — REGISTER FORM
            ================================================== -->

            <section class="jx-register-form-panel">

                <div class="jx-register-form-inner">


                    <!-- Heading -->

                    <div class="jx-register-form-heading">

                        <span class="jx-form-label">
                            CREATE YOUR ACCOUNT
                        </span>

                        <h2>
                            Register
                            <span>with us.</span>
                        </h2>

                        <p>
                            Create your Jewell Excel account to enjoy a
                            smoother and more personalised jewellery experience.
                        </p>

                    </div>


                    <!-- Success -->

                    @if(session('success'))

                        <div class="jx-alert jx-alert-success">

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

                            {{ session('success') }}

                        </div>

                    @endif


                    <!-- Error -->

                    @if(session('error'))

                        <div class="jx-alert jx-alert-danger">

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

                            {{ session('error') }}

                        </div>

                    @endif


                    <!-- Validation Errors -->

                    @if($errors->any())

                        <div class="jx-alert jx-alert-danger">

                            <ul>

                                @foreach($errors->all() as $error)

                                    <li>
                                        {{ $error }}
                                    </li>

                                @endforeach

                            </ul>

                        </div>

                    @endif


                    <!-- =================================================
                         REGISTER FORM
                    ================================================== -->

                    <form
                        action="{{ url('/register') }}"
                        method="post"
                        id="jxRegisterForm"
                    >

                        @csrf


                        <!-- Full Name -->

                        <div class="jx-form-group">

                            <label
                                for="name"
                                class="jx-form-label-main"
                            >
                                <i class="fas fa-user"></i>
                                Full Name
                            </label>

                            <input
                                type="text"
                                name="name"
                                id="name"
                                class="jx-input"
                                placeholder="Enter your full name"
                                value="{{ old('name') }}"
                                autocomplete="name"
                                required
                            >

                        </div>


                        <!-- Phone -->

                        <div class="jx-form-group">

                            <label
                                for="phone"
                                class="jx-form-label-main"
                            >
                                <i class="fas fa-phone-alt"></i>
                                Phone Number
                            </label>

                            <input
                                type="text"
                                name="phone"
                                id="phone"
                                class="jx-input"
                                placeholder="Enter your phone number"
                                value="{{ old('phone') }}"
                                autocomplete="tel"
                                required
                            >

                        </div>


                        <!-- Email -->

                        <div class="jx-form-group">

                            <label
                                for="email"
                                class="jx-form-label-main"
                            >
                                <i class="far fa-envelope"></i>
                                Email Address
                            </label>

                            <input
                                type="email"
                                name="email"
                                id="email"
                                class="jx-input"
                                placeholder="hello@example.com"
                                value="{{ old('email') }}"
                                autocomplete="email"
                                required
                            >

                        </div>


                        <!-- Password -->

                        <div class="jx-form-group">

                            <label
                                for="password"
                                class="jx-form-label-main"
                            >
                                <i class="fas fa-key"></i>
                                Password
                            </label>

                            <div class="jx-input-wrap">

                                <input
                                    type="password"
                                    name="password"
                                    id="password"
                                    class="jx-input jx-password-input"
                                    placeholder="Create a password"
                                    autocomplete="new-password"
                                    required
                                >

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

                            </div>

                        </div>


                        <!-- Confirm Password -->

                        <div class="jx-form-group">

                            <label
                                for="password_confirmation"
                                class="jx-form-label-main"
                            >
                                <i class="fas fa-lock"></i>
                                Confirm Password
                            </label>

                            <div class="jx-input-wrap">

                                <input
                                    type="password"
                                    name="password_confirmation"
                                    id="password_confirmation"
                                    class="jx-input jx-password-input"
                                    placeholder="Confirm your password"
                                    autocomplete="new-password"
                                    required
                                >

                                <i
                                    class="fas fa-eye-slash jx-toggle-password"
                                    id="toggleConfirmPassword"
                                    aria-label="Show confirmation password"
                                ></i>

                            </div>

                        </div>


                        <!-- Terms -->

                        <div class="jx-terms">

                            <input
                                type="checkbox"
                                name="terms"
                                id="terms"
                                required
                            >

                            <label for="terms">

                                I agree to the

                                <a href="{{ url('/terms-conditions') }}">
                                    Terms & Conditions
                                </a>

                                and understand the Jewell Excel
                                account policies.

                            </label>

                        </div>


                        <!-- Submit -->

                        <button
                            type="submit"
                            class="jx-register-button"
                            id="jxRegisterButton"
                        >

                            <span>
                                Create Account
                            </span>

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

                        </button>


                        <!-- Divider -->

                        <!--<div class="jx-divider">-->

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

                        <!--</div>-->


                        <!-- Social -->

                        <!--<div class="jx-socials">-->

                        <!--    <button-->
                        <!--        type="button"-->
                        <!--        class="jx-social"-->
                        <!--        aria-label="Register with Google"-->
                        <!--        data-provider="Google"-->
                        <!--    >-->
                        <!--        <i class="fab fa-google"></i>-->
                        <!--    </button>-->


                        <!--    <button-->
                        <!--        type="button"-->
                        <!--        class="jx-social"-->
                        <!--        aria-label="Register with Facebook"-->
                        <!--        data-provider="Facebook"-->
                        <!--    >-->
                        <!--        <i class="fab fa-facebook-f"></i>-->
                        <!--    </button>-->


                        <!--    <button-->
                        <!--        type="button"-->
                        <!--        class="jx-social"-->
                        <!--        aria-label="Register with Apple"-->
                        <!--        data-provider="Apple"-->
                        <!--    >-->
                        <!--        <i class="fab fa-apple"></i>-->
                        <!--    </button>-->


                        <!--    <button-->
                        <!--        type="button"-->
                        <!--        class="jx-social"-->
                        <!--        aria-label="Register with GitHub"-->
                        <!--        data-provider="GitHub"-->
                        <!--    >-->
                        <!--        <i class="fab fa-github"></i>-->
                        <!--    </button>-->

                        <!--</div>-->


                        <!-- Login -->

                        <div class="jx-login-link">

                            <p>

                                Already have an account?

                                <a href="{{ url('/login') }}">

                                    Login Here

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

                                </a>

                            </p>

                        </div>


                    </form>

                </div>

            </section>

        </div>


        <!-- =====================================================
             TRUST BAR
        ====================================================== -->

        <div class="jx-register-trust">

            <div class="jx-trust-item">

                <div class="jx-trust-icon">
                    <i class="fa-solid fa-gem"></i>
                </div>

                <div class="jx-trust-content">

                    <strong>
                        Premium Quality
                    </strong>

                    <span>
                        CAREFULLY CRAFTED
                    </span>

                </div>

            </div>


            <div class="jx-trust-item">

                <div class="jx-trust-icon">
                    <i class="fa-solid fa-lock"></i>
                </div>

                <div class="jx-trust-content">

                    <strong>
                        Secure Registration
                    </strong>

                    <span>
                        YOUR DATA IS PROTECTED
                    </span>

                </div>

            </div>


            <div class="jx-trust-item">

                <div class="jx-trust-icon">
                    <i class="fa-solid fa-truck-fast"></i>
                </div>

                <div class="jx-trust-content">

                    <strong>
                        Trusted Service
                    </strong>

                    <span>
                        A REFINED EXPERIENCE
                    </span>

                </div>

            </div>


            <div class="jx-trust-item">

                <div class="jx-trust-icon">
                    <i class="fa-solid fa-headset"></i>
                </div>

                <div class="jx-trust-content">

                    <strong>
                        Customer Care
                    </strong>

                    <span>
                        WE ARE HERE TO HELP
                    </span>

                </div>

            </div>

        </div>

    </div>

</main>


<script>
document.addEventListener('DOMContentLoaded', function () {

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

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

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


    if (togglePassword && passwordField) {

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

            const isPassword =
                passwordField.getAttribute('type') === 'password';

            passwordField.setAttribute(
                'type',
                isPassword ? 'text' : 'password'
            );

            this.classList.toggle(
                'fa-eye',
                isPassword
            );

            this.classList.toggle(
                'fa-eye-slash',
                !isPassword
            );

        });

    }


    /* =====================================================
       CONFIRM PASSWORD TOGGLE
    ===================================================== */

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

    const confirmPasswordField =
        document.getElementById('password_confirmation');


    if (
        toggleConfirmPassword &&
        confirmPasswordField
    ) {

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

                const isPassword =
                    confirmPasswordField.getAttribute('type')
                    === 'password';

                confirmPasswordField.setAttribute(
                    'type',
                    isPassword ? 'text' : 'password'
                );

                this.classList.toggle(
                    'fa-eye',
                    isPassword
                );

                this.classList.toggle(
                    'fa-eye-slash',
                    !isPassword
                );

            }
        );

    }


    /* =====================================================
       SOCIAL REGISTRATION
       UI ONLY — DOES NOT CHANGE REGISTER BACKEND
    ===================================================== */

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


    socialButtons.forEach(function (button) {

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

            const provider =
                this.getAttribute('data-provider');

            const existing =
                document.querySelector(
                    '.jx-social-message'
                );


            if (existing) {
                existing.remove();
            }


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

            message.className =
                'jx-alert jx-alert-danger jx-social-message';

            message.style.marginTop = '15px';

            message.innerHTML =
                '<i class="fas fa-info-circle"></i> ' +
                provider +
                ' registration is coming soon.';


            const form =
                document.getElementById('jxRegisterForm');

            if (form) {
                form.appendChild(message);
            }


            setTimeout(function () {

                if (message) {
                    message.remove();
                }

            }, 3000);

        });

    });


    /* =====================================================
       FORM SUBMISSION
       Prevent accidental double click
    ===================================================== */

    const registerForm =
        document.getElementById('jxRegisterForm');

    const registerButton =
        document.getElementById('jxRegisterButton');


    if (registerForm && registerButton) {

        registerForm.addEventListener(
            'submit',
            function () {

                if (registerForm.checkValidity()) {

                    registerButton.disabled = true;

                    registerButton.style.opacity = '0.75';

                    registerButton.style.cursor =
                        'not-allowed';

                    registerButton.querySelector('span')
                        .textContent = 'Creating Account...';

                }

            }
        );

    }

});
</script>

@endsection