@extends('layouts.master-without-nav')

@section('title')
TRON Agent Registration Portal
@endsection

@section('css')

<style>
.auth-body-bg {
    background: #f8fafc;
}

.auth-full-bg {
    position: relative;
    min-height: 100vh;
    background:
        linear-gradient(rgba(0,0,0,.65), rgba(0,0,0,.65)),
        url('https://images.unsplash.com/photo-1503376780353-7e6692767b70');
    background-size: cover;
    background-position: center;
}

.auth-full-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(245,130,32,.75),
        rgba(20,20,20,.85)
    );
}

.hero-content {
    position: absolute;
    left: 60px;
    right: 60px;
    bottom: 80px;
    z-index: 2;
    color: #fff;
}

.hero-badge {
    display: inline-block;
    background: rgba(255,255,255,.15);
    backdrop-filter: blur(10px);
    border-radius: 30px;
    padding: 8px 18px;
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 600;
}

.hero-content h1 {
    font-size: 3.2rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 20px;
}

.hero-content p {
    max-width: 650px;
    font-size: 1.1rem;
    line-height: 1.8;
}

.feature-list {
    margin-top: 35px;
}

.feature-list div {
    margin-bottom: 15px;
    font-size: 1rem;
    font-weight: 500;
}

.stat-boxes {
    display: flex;
    gap: 15px;
    margin-top: 35px;
    flex-wrap: wrap;
}

.stat-box {
    background: rgba(255,255,255,.12);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 15px 20px;
    min-width: 150px;
}

.stat-box h5 {
    color: #fff;
    margin: 0;
    font-weight: 700;
}

.stat-box small {
    color: rgba(255,255,255,.85);
}

.auth-card {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
}

.login-box {
    width: 100%;
    max-width: 450px;
}

.login-logo {
    text-align: center;
    margin-bottom: 35px;
}

.login-logo img {
    width: 100%;
    max-width: 280px;
}

.system-name {
    color: #f58220;
    font-weight: 800;
    margin-top: 15px;
}

.login-title {
    font-weight: 700;
    color: #1e293b;
}

.login-subtitle {
    color: #64748b;
    line-height: 1.8;
    margin-bottom: 30px;
}

.form-label {
    font-weight: 600;
}

.form-control {
    border-radius: 10px;
    padding: 12px 15px;
}

.form-control:focus {
    border-color: #f58220;
    box-shadow: 0 0 0 .15rem rgba(245,130,32,.2);
}

.btn-primary {
    background: #f58220;
    border-color: #f58220;
    border-radius: 10px;
    padding: 13px;
    font-weight: 600;
}

.btn-primary:hover {
    background: #de6f0f;
    border-color: #de6f0f;
}

.btn-outline-primary {
    border-color: #f58220;
    color: #f58220;
}

.btn-outline-primary:hover {
    background: #f58220;
    border-color: #f58220;
}

.copyright {
    font-size: 13px;
    color: #94a3b8;
}

@media(max-width:1200px){
    .hero-content h1{
        font-size:2.5rem;
    }
}
</style>

<style>
    .register-btn {
    position: relative;
    overflow: hidden;
    border: none;
    background: linear-gradient(135deg, #f58220, #ff9d3f);
    color: #fff !important;
    font-weight: 700;
    border-radius: 12px;
    padding: 14px;
    animation: pulseRegister 2s infinite;
    transition: all .3s ease;
}

.register-btn:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 15px 35px rgba(245,130,32,.4);
    color: #fff !important;
}

.register-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 70%;
    height: 100%;
    background: rgba(255,255,255,.3);
    transform: skewX(-25deg);
    animation: shine 3s infinite;
}

.register-badge {
    position: absolute;
    top: -10px;
    right: -10px;
    background: #ef4444;
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    animation: bounce 1.5s infinite;
    z-index: 10;
}

@keyframes pulseRegister {
    0% {
        box-shadow: 0 0 0 0 rgba(245,130,32,.7);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(245,130,32,0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(245,130,32,0);
    }
}

@keyframes shine {
    0% {
        left: -100%;
    }
    100% {
        left: 150%;
    }
}

@keyframes bounce {
    0%,100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-4px);
    }
}
</style>

@endsection

@section('body')
<body class="auth-body-bg">
@endsection

@section('content')

<div class="container-fluid p-0">
    <div class="row g-0">

        <!-- LEFT PANEL -->
        <div class="col-xl-8 d-none d-xl-block">
            <div class="auth-full-bg">

                <div class="hero-content">

                    <div class="hero-badge">
                        TRON Authorized Agent Program
                    </div>

                    <h1>
                        Become a TRON Agent<br>
                        Grow Your Business
                    </h1>

                    <p>
                        Join the TRON Agent Network and unlock new opportunities
                        through product sales, commission earnings, exclusive
                        promotions and business support across Malaysia.
                    </p>

                    <div class="feature-list">
                        <div>🤝 Official TRON Agent Registration</div>
                        <div>💰 Attractive Commission Structure</div>
                        <div>📈 Sales Performance Tracking</div>
                        <div>🎯 Marketing & Promotional Support</div>
                        <div>📱 Agent Dashboard Access</div>
                        <div>🏆 Rewards & Incentive Programs</div>
                    </div>

                    <div class="stat-boxes">

                        <div class="stat-box">
                            <h5>Nationwide</h5>
                            <small>Coverage</small>
                        </div>

                        <div class="stat-box">
                            <h5>24/7</h5>
                            <small>Portal Access</small>
                        </div>

                        <div class="stat-box">
                            <h5>Fast</h5>
                            <small>Registration Approval</small>
                        </div>

                    </div>

                </div>

            </div>
        </div>

        <!-- RIGHT PANEL -->
        <div class="col-xl-4 bg-white">
            <div class="auth-card px-4 px-md-5">

                <div class="login-box">

                    <div class="login-logo">

                        <img src="https://tron.my/wp-content/uploads/2021/02/logo-memanjang-01-1536x384.png"
                             alt="TRON">

                        <h3 class="system-name">
                            TRON
                        </h3>

                        <h6 class="text-muted">
                            Agent Registration Portal
                        </h6>

                    </div>

                    @if(session('success'))
                    <div class="alert alert-success alert-dismissible fade show">
                        {{ session('success') }}

                        <button type="button"
                                class="btn-close"
                                data-bs-dismiss="alert"></button>
                    </div>
                    @endif

                    <form method="POST" action="{{ url('logincheck') }}">
                        @csrf

                        <div class="mb-3">
                            <label class="form-label">
                                Phone Number
                            </label>

                            <input type="text"
                                   name="phonenumber"
                                   value="{{ old('phonenumber') }}"
                                   class="form-control @error('phonenumber') is-invalid @enderror"
                                   placeholder="Enter your Phone Number">

                            @error('phonenumber')
                            <span class="invalid-feedback">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>

                        <div class="mb-3">

                            <div class="d-flex justify-content-between mb-2">

                                <label class="form-label mb-0">
                                    Password
                                </label>

                                @if(Route::has('password.request'))
                                <a href="{{ route('password.request') }}"
                                   class="text-decoration-none">
                                    Forgot Password?
                                </a>
                                @endif

                            </div>

                            <div class="input-group">

                                <input type="password"
                                       id="userpassword"
                                       name="password"
                                       class="form-control @error('password') is-invalid @enderror"
                                       placeholder="Enter your password">

                                <button class="btn btn-light"
                                        type="button"
                                        id="password-addon">
                                    <i class="mdi mdi-eye-outline"></i>
                                </button>

                            </div>

                            @error('password')
                            <span class="invalid-feedback d-block">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror

                        </div>

                        <div class="form-check mb-4">
                            <input class="form-check-input"
                                   type="checkbox"
                                   id="remember"
                                   name="remember">

                            <label class="form-check-label"
                                   for="remember">
                                Remember Me
                            </label>
                        </div>

                        <div class="d-grid">
                            <button type="submit"
                                    class="btn btn-primary btn-lg">
                                <i class="bx bx-log-in-circle me-1"></i>
                                Sign In
                            </button>
                        </div>

                        <div class="text-center mt-4">

                            <p class="text-muted mb-2">
                                New Agent Registration
                            </p>

                            <div class="position-relative">

                                <span class="register-badge">
                                    JOIN NOW
                                </span>

                                <a href="{{ url('register') }}"
                                class="btn register-btn w-100">
                                    🚀 Become A TRON Agent Today
                                </a>

                            </div>

                        </div>

                    </form>

                    <div class="text-center mt-5">
                        <p class="copyright mb-0">
                            © {{ date('Y') }} TRON Agent Registration Portal.
                            All Rights Reserved.
                        </p>
                    </div>

                </div>

            </div>
        </div>

    </div>
</div>

@endsection

@section('script')

<script>
document.getElementById('password-addon').addEventListener('click', function () {

    const passwordField = document.getElementById('userpassword');
    const icon = this.querySelector('i');

    if(passwordField.type === 'password'){
        passwordField.type = 'text';
        icon.classList.remove('mdi-eye-outline');
        icon.classList.add('mdi-eye-off-outline');
    }else{
        passwordField.type = 'password';
        icon.classList.remove('mdi-eye-off-outline');
        icon.classList.add('mdi-eye-outline');
    }

});
</script>

@endsection