<!doctype html>
<html lang="bn">
<head>
    <title>দেশি পে - সাইন আপ</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
    
    <!-- SEO & Meta Tags (ডিজাইন অনুযায়ী) -->
    <meta name="author" content="দেশি পে: আপনার ব্যবসার স্মার্ট পেমেন্ট পার্টনার">
    <meta name="description" content="দেশি পে: আপনার ব্যবসার স্মার্ট পেমেন্ট পার্টনার। পেমেন্ট কালেকশন নিয়ে দুশ্চিন্তা ছেড়ে ফেলুন!">
    <meta name="theme-color" content="#303030">

    <!-- External CSS (ডিজাইন অনুযায়ী) -->
    <link type="text/css" href="https://deshipay.xyz/public/assets/blithe/css/app.min.css" rel='stylesheet'/>
    <link type="text/css" href="https://deshipay.xyz/public/assets/blithe/css/style.css" rel='stylesheet'/>
    <link type="text/css" href="https://deshipay.xyz/public/assets/blithe/css/components.css" rel='stylesheet'/>
    <link type="text/css" href="https://deshipay.xyz/public/assets/js/jquery-toast/css/jquery.toast.css" rel='stylesheet'/>

    <style>
        body {
            background: #ffffff;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            margin: 0;
            padding: 20px;
            box-sizing: border-box;
            position: relative;
            overflow-x: hidden;
        }

        body::before {
            content: '';
            position: absolute;
            width: 300px;
            height: 300px;
            background: linear-gradient(135deg, #007aff, #00fbff);
            filter: blur(100px);
            border-radius: 50%;
            top: 5%;
            left: 5%;
            z-index: -1;
            opacity: 0.2;
        }

        .glow-wrap {
            position: relative;
            padding: 3px;
            border-radius: 28px;
            background: #f0f0f0;
            overflow: hidden;
            animation: floating 6s ease-in-out infinite;
            box-shadow: 0 20px 50px rgba(0,0,0,0.1);
        }

        .glow-wrap::before {
            content: '';
            position: absolute;
            width: 150%;
            height: 150%;
            background: conic-gradient(transparent, transparent, transparent, #007aff);
            animation: rotate 4s linear infinite;
            top: -25%;
            left: -25%;
        }

        @keyframes rotate { 100% { transform: rotate(360deg); } }
        @keyframes floating { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-15px); } }

        .auth-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            border-radius: 25px;
            padding: 30px;
            width: 100%;
            max-width: 420px; /* একটু বাড়ানো হয়েছে স্পেসিং এর জন্য */
            text-align: center;
            position: relative;
            z-index: 1;
        }

        .site-logo { width: 55px; margin-bottom: 10px; }

        .form-control {
            border-radius: 12px;
            padding: 10px;
            border: 1px solid #f0f0f0;
            width: 100%;
            margin-top: 5px;
            box-sizing: border-box;
            background: #f9f9f9;
            font-size: 13px;
            outline: none;
            transition: 0.3s;
        }

        .form-control:focus { border-color: #007aff; background: #fff; }
        .row-flex { display: flex; gap: 10px; margin-top: 12px; }
        .col-half { flex: 1; text-align: left; }
        
        /* Password Strength Indicator Styling */
        .pwindicator { height: 3px; margin-top: 5px; }
        .pwindicator .bar { height: 100%; width: 0; transition: all 0.3s; border-radius: 3px; }
        .pwindicator .label { font-size: 10px; margin-top: 2px; text-transform: uppercase; }
    </style>
</head>
<body>
    <div id="loader"></div>

    <div class="glow-wrap">
        <div class="auth-card">
            <a href="<?= base_url() ?>">
                <img src="https://deshipay.xyz/logo.png" alt="Logo" class="site-logo">
            </a>
            <h3 style="font-weight: 700; margin: 0; font-size: 20px; letter-spacing: -0.5px;">Create Account</h3>
            
            <!-- Logic: CodeIgniter Form Open -->
            <?= form_open(base_url('sign-up'), 'class="actionForm needs-validation" novalidate="" data-redirect="user"') ?>
                
                <div class="row-flex">
                    <div class="col-half">
                        <label style="font-size: 10px; font-weight: 700; color: #86868b;">FIRST NAME</label>
                        <input id="frist_name" type="text" class="form-control" name="first_name" autofocus required>
                    </div>
                    <div class="col-half">
                        <label style="font-size: 10px; font-weight: 700; color: #86868b;">LAST NAME</label>
                        <input id="last_name" type="text" class="form-control" name="last_name" required>
                    </div>
                </div>

                <div style="text-align: left; margin-top: 12px;">
                    <label style="font-size: 10px; font-weight: 700; color: #86868b;">EMAIL ADDRESS</label>
                    <input id="email" type="email" class="form-control" name="email" required>
                </div>

                <div style="text-align: left; margin-top: 12px;">
                    <label style="font-size: 10px; font-weight: 700; color: #86868b;">MOBILE NUMBER</label>
                    <input id="phone" type="text" class="form-control" name="phone" required>
                </div>

                <div class="row-flex">
                    <div class="col-half">
                        <label style="font-size: 10px; font-weight: 700; color: #86868b;">PASSWORD</label>
                        <input id="password" type="password" class="form-control pwstrength" data-indicator="pwindicator" name="password" required>
                        <!-- Password Strength Indicator -->
                        <div id="pwindicator" class="pwindicator">
                            <div class="bar"></div>
                            <div class="label"></div>
                        </div>
                    </div>
                    <div class="col-half">
                        <label style="font-size: 10px; font-weight: 700; color: #86868b;">CONFIRM</label>
                        <input id="password2" type="password" class="form-control" name="c_password" required>
                    </div>
                </div>

                <div style="display: flex; align-items: center; gap: 8px; margin-top: 15px; text-align: left;">
                    <input type="checkbox" name="agree" value="1" id="agree" required style="accent-color:#000">
                    <label for="agree" style="font-size: 12px; color: #555;">I agree with <a href="#" style="color: #007aff; text-decoration: none; font-weight: 600;">Terms</a></label>
                </div>

                <button type="submit" style="background: #000; color: #fff; border-radius: 12px; font-weight: 600; padding: 13px; width: 100%; border: none; cursor: pointer; margin-top: 15px; font-size: 15px; display: block;">
                    Get Started
                </button>

            <?= form_close() ?>

            <p style="margin-top: 15px; font-size: 13px; color: #86868b;">
                Member? <a href="<?= base_url('sign-in') ?>" style="color: #007aff; font-weight: 600; text-decoration: none;">Log In</a>
            </p>
        </div>
    </div>

    <!-- JS Scripts (আপনার সিস্টেমের প্রসেসিং এর জন্য প্রয়োজনীয়) -->
    <script type="text/javascript" src="https://deshipay.xyz/public/assets/blithe/js/app.min.js"></script>
    <script type="text/javascript" src="https://deshipay.xyz/public/assets/blithe/js/scripts.js"></script>
    <script type="text/javascript" src="https://deshipay.xyz/public/assets/js/jquery-toast/js/jquery.toast.js"></script>
    <script type="text/javascript" src="https://deshipay.xyz/public/assets/js/process.js"></script>
    <script type="text/javascript" src="https://deshipay.xyz/public/assets/js/general.js"></script>
</body>
</html>