@extends('website.webLayouts.master')

@section('content')
<style>
    .gw-auth-section {
        background: linear-gradient(135deg, #0b1329 0%, #1e293b 50%, #0f172a 100%);
        padding: 50px 0 80px;
        min-height: 90vh;
    }
    .gw-auth-card {
        background: #ffffff;
        border-radius: 20px;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.15);
    }
    .gw-auth-header {
        background: #f8fafc;
        padding: 30px 36px;
        border-bottom: 1px solid #e2e8f0;
        text-align: center;
    }
    .gw-auth-header h2 {
        font-size: 26px;
        font-weight: 800;
        color: #0f172a;
        margin-bottom: 6px;
    }
    .gw-auth-body {
        padding: 36px;
    }
    .gw-step-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 13.5px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #2563eb;
        margin-bottom: 16px;
    }
    .gw-form-label {
        font-size: 13px;
        font-weight: 600;
        color: #1e293b;
        margin-bottom: 6px;
        display: block;
    }
    .gw-form-control {
        width: 100%;
        padding: 10px 14px;
        font-size: 14px;
        border: 1px solid #cbd5e1;
        border-radius: 10px;
        background: #ffffff;
        color: #0f172a;
        outline: none;
        transition: all 0.2s ease;
    }
    .gw-form-control:focus {
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
    }

    /* Package Selector Cards */
    .gw-pkg-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
        gap: 14px;
        margin-bottom: 24px;
    }
    .gw-pkg-radio-card {
        border: 2px solid #e2e8f0;
        border-radius: 14px;
        padding: 16px;
        cursor: pointer;
        transition: all 0.2s ease;
        position: relative;
        background: #f8fafc;
    }
    .gw-pkg-radio-card:hover {
        border-color: #93c5fd;
        background: #ffffff;
    }
    .gw-pkg-radio-card.selected {
        border-color: #2563eb;
        background: #eff6ff;
        box-shadow: 0 4px 14px rgba(37, 99, 235, 0.15);
    }
    .gw-pkg-radio-card input[type="radio"] {
        position: absolute;
        top: 14px;
        right: 14px;
    }

    /* Payment Method Tabs & QR Box */
    .gw-pay-pill-btn {
        border: 2px solid #e2e8f0;
        border-radius: 10px;
        padding: 10px 16px;
        font-weight: 700;
        font-size: 13.5px;
        cursor: pointer;
        background: #ffffff;
        color: #334155;
        transition: all 0.15s ease;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }
    .gw-pay-pill-btn.active-bkash {
        background: #e2136e;
        color: #ffffff;
        border-color: #e2136e;
    }
    .gw-pay-pill-btn.active-nagad {
        background: #f7941d;
        color: #ffffff;
        border-color: #f7941d;
    }
    .gw-pay-pill-btn.active-rocket {
        background: #8c3494;
        color: #ffffff;
        border-color: #8c3494;
    }
    .gw-pay-pill-btn.active-bank {
        background: #0f172a;
        color: #ffffff;
        border-color: #0f172a;
    }

    .gw-qr-box {
        background: #ffffff;
        border: 2px dashed #cbd5e1;
        border-radius: 16px;
        padding: 24px;
        text-align: center;
    }
    .gw-qr-img {
        width: 170px;
        height: 170px;
        border-radius: 12px;
        border: 1px solid #e2e8f0;
        padding: 6px;
        background: #ffffff;
    }
</style>

<section class="gw-auth-section">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-10 col-xl-9">
                <div class="gw-auth-card">
                    <!-- Header -->
                    <div class="gw-auth-header">
                        <span class="badge bg-primary px-3 py-2 rounded-pill mb-2 fw-bold">INSTANT ONBOARDING</span>
                        <h2>Create Account &amp; Activate SMS Package</h2>
                        <p class="text-muted mb-0 fs-14">Complete registration and instant package activation via QR Code payment &amp; Transaction ID.</p>
                    </div>

                    <!-- Body -->
                    <div class="gw-auth-body">
                        @if ($errors->any())
                            <div class="alert alert-danger mb-4">
                                <ul class="mb-0">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        <form action="{{ url('/register_store') }}" method="post" id="signupForm">
                            @csrf

                            <!-- ============================================== -->
                            <!-- STEP 1: Account Information -->
                            <!-- ============================================== -->
                            <div class="gw-step-badge">
                                <i class="fa fa-user-circle"></i>
                                <span>Step 1: Account &amp; Organization Details</span>
                            </div>

                            <div class="row g-3 mb-4">
                                <div class="col-md-6">
                                    <label class="gw-form-label">Full Name <span class="text-danger">*</span></label>
                                    <input type="text" class="gw-form-control" name="name" placeholder="John Doe" value="{{ old('name') }}" required>
                                </div>
                                <div class="col-md-6">
                                    <label class="gw-form-label">Email Address (Login ID) <span class="text-danger">*</span></label>
                                    <input type="email" class="gw-form-control" name="email" placeholder="john@example.com" value="{{ old('email') }}" required>
                                </div>
                                <div class="col-md-6">
                                    <label class="gw-form-label">Mobile Number (Contact) <span class="text-danger">*</span></label>
                                    <input type="tel" class="gw-form-control" name="contact_number" placeholder="017XXXXXXXX" value="{{ old('contact_number') }}" required>
                                </div>
                                <div class="col-md-6">
                                    <label class="gw-form-label">Company / Brand Name</label>
                                    <input type="text" class="gw-form-control" name="company_name" placeholder="Acme Technologies Ltd." value="{{ old('company_name') }}">
                                </div>
                                <div class="col-md-6">
                                    <label class="gw-form-label">Desired Username <span class="text-danger">*</span></label>
                                    <input type="text" class="gw-form-control" autocomplete="off" name="username" placeholder="johndoe" value="{{ old('username') }}" required>
                                </div>
                                <div class="col-md-6">
                                    <label class="gw-form-label">Password <span class="text-danger">*</span></label>
                                    <input type="password" class="gw-form-control" name="password" placeholder="Create a secure password" required>
                                </div>
                            </div>

                            <!-- ============================================== -->
                            <!-- STEP 2: Choose SMS Package -->
                            <!-- ============================================== -->
                            <div class="gw-step-badge mt-2">
                                <i class="fa fa-cubes"></i>
                                <span>Step 2: Choose SMS Package to Activate</span>
                            </div>

                            <div class="gw-pkg-grid">
                                <!-- Free Tier / Balance Mode -->
                                <div class="gw-pkg-radio-card {{ empty($selectedPackageId) ? 'selected' : '' }}" onclick="selectPackage(this, '', 0, 'Free Starter Mode', 'Pay-as-you-go balance')">
                                    <input type="radio" name="package_id" value="" {{ empty($selectedPackageId) ? 'checked' : '' }}>
                                    <span class="badge bg-secondary mb-1">Starter Tier</span>
                                    <div class="fw-bold fs-15 text-dark">Pay-As-You-Go</div>
                                    <div class="text-primary fw-bolder fs-16 mt-1">৳0.00</div>
                                    <small class="text-muted d-block mt-1">Activate account without upfront package purchase.</small>
                                </div>

                                <!-- Dynamic Active Packages -->
                                @foreach ($packages as $pkg)
                                    @php
                                        $isSelected = ($selectedPackageId == $pkg->id);
                                    @endphp
                                    <div class="gw-pkg-radio-card {{ $isSelected ? 'selected' : '' }}" onclick="selectPackage(this, '{{ $pkg->id }}', {{ $pkg->price }}, '{{ $pkg->title }}', '{{ $pkg->billing_type }}')">
                                        <input type="radio" name="package_id" value="{{ $pkg->id }}" {{ $isSelected ? 'checked' : '' }}>
                                        <span class="badge bg-primary mb-1 text-uppercase">{{ $pkg->billing_type ?: 'Monthly' }}</span>
                                        <div class="fw-bold fs-15 text-dark">{{ $pkg->title }}</div>
                                        <div class="text-primary fw-bolder fs-17 mt-1">৳{{ number_format($pkg->price, 2) }}</div>
                                        <small class="text-muted d-block mt-1">
                                            <strong>{{ $pkg->sms_limit > 0 ? number_format($pkg->sms_limit) . ' SMS' : 'Quota Plan' }}</strong> • {{ $pkg->validity_length }} {{ $pkg->validity_type }}
                                        </small>
                                    </div>
                                @endforeach
                            </div>

                            <!-- ============================================== -->
                            <!-- STEP 3: QR Code & Manual TrxID Payment -->
                            <!-- ============================================== -->
                            <div id="paymentSection" style="{{ empty($selectedPackageId) ? 'display:none;' : 'display:block;' }}">
                                <div class="gw-step-badge mt-2">
                                    <i class="fa fa-qrcode"></i>
                                    <span>Step 3: Scan QR Code &amp; Enter Transaction ID</span>
                                </div>

                                <div class="card border bg-light mb-4 rounded-3">
                                    <div class="card-body p-4">
                                        <!-- Payment Method Selector -->
                                        <div class="d-flex flex-wrap gap-2 mb-3">
                                            <button type="button" class="gw-pay-pill-btn active-bkash" id="btn-bkash" onclick="setPaymentMethod(2, 'bkash', '01725785256', 'Personal / Merchant')">
                                                <i class="fa fa-mobile-phone"></i> bKash
                                            </button>
                                            <button type="button" class="gw-pay-pill-btn" id="btn-nagad" onclick="setPaymentMethod(4, 'nagad', '01725785256', 'Personal / Merchant')">
                                                <i class="fa fa-mobile-phone"></i> Nagad
                                            </button>
                                            <button type="button" class="gw-pay-pill-btn" id="btn-rocket" onclick="setPaymentMethod(5, 'rocket', '01725785256-8', 'Personal')">
                                                <i class="fa fa-mobile-phone"></i> Rocket
                                            </button>
                                            <button type="button" class="gw-pay-pill-btn" id="btn-bank" onclick="setPaymentMethod(3, 'bank', '20501450200874100', 'Islami Bank Bangladesh Ltd')">
                                                <i class="fa fa-university"></i> Bank Transfer
                                            </button>
                                        </div>

                                        <input type="hidden" name="payment_method" id="selected_payment_method" value="2">

                                        <!-- QR Display & Payment Instructions Grid -->
                                        <div class="row g-4 align-items-center">
                                            <div class="col-md-5 text-center">
                                                <div class="gw-qr-box">
                                                    <img id="qrImage" src="https://api.qrserver.com/v1/create-qr-code/?size=180x180&data=01725785256" alt="QR Code" class="gw-qr-img mb-2 shadow-sm">
                                                    <div class="fw-bold fs-14 text-dark" id="qrMethodTitle">bKash QR Code</div>
                                                    <div class="text-primary fw-bolder fs-16" id="qrAmountLabel">Pay ৳0.00</div>
                                                </div>
                                            </div>

                                            <div class="col-md-7">
                                                <div class="bg-white p-3 rounded border mb-3">
                                                    <div class="d-flex justify-content-between align-items-center mb-1">
                                                        <span class="text-muted fs-12 text-uppercase fw-bold" id="accountTypeLabel">bKash Number</span>
                                                        <button type="button" class="btn btn-sm btn-outline-primary py-0 px-2 fs-11" onclick="copyAccountNumber()">
                                                            <i class="fa fa-copy"></i> Copy Number
                                                        </button>
                                                    </div>
                                                    <div class="font-monospace fs-18 fw-bolder text-dark" id="accountNumberDisplay">01725785256</div>
                                                </div>

                                                <!-- Instructions -->
                                                <div class="fs-13 text-muted mb-3" id="paymentInstructions">
                                                    1. Open your <strong>bKash App</strong> and tap <strong>"Send Money"</strong> or <strong>"Scan QR"</strong>.<br>
                                                    2. Enter/scan the number above and input amount <strong class="text-primary" id="instrAmount">৳0.00</strong>.<br>
                                                    3. Complete payment and copy the <strong>TrxID</strong> from your confirmation SMS.
                                                </div>

                                                <!-- Input Fields: Sender Phone & TrxID -->
                                                <div class="row g-2">
                                                    <div class="col-sm-6">
                                                        <label class="gw-form-label">Your Sender Phone Number *</label>
                                                        <input type="text" class="gw-form-control" name="sender_phone" id="sender_phone" placeholder="e.g. 017XXXXXXXX" value="{{ old('sender_phone') }}">
                                                    </div>
                                                    <div class="col-sm-6">
                                                        <label class="gw-form-label">Transaction ID (TrxID) *</label>
                                                        <input type="text" class="gw-form-control font-monospace" name="transaction_id" id="transaction_id" placeholder="e.g. BK7893X92" value="{{ old('transaction_id') }}">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Submit Row -->
                            <div class="row align-items-center mt-4 pt-3 border-top">
                                <div class="col-md-7 mb-3 mb-md-0">
                                    <button type="submit" class="btn btn-primary px-4 py-3 fw-bold fs-15 rounded-3 w-100 w-md-auto">
                                        <i class="fa fa-check-circle me-1"></i> Register &amp; Activate Account
                                    </button>
                                </div>
                                <div class="col-md-5 text-md-end">
                                    <span class="text-muted fs-13">Already have an account?</span>
                                    <a href="{{ url('/login') }}" class="btn btn-outline-primary btn-sm ms-2 fw-bold rounded-2">
                                        <i class="fa fa-sign-in me-1"></i> Log In
                                    </a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<script>
let currentPrice = 0;
let currentMethodNumber = '01725785256';

function selectPackage(card, pkgId, price, title, billingType) {
    document.querySelectorAll('.gw-pkg-radio-card').forEach(c => {
        c.classList.remove('selected');
        c.querySelector('input[type="radio"]').checked = false;
    });
    card.classList.add('selected');
    card.querySelector('input[type="radio"]').checked = true;

    currentPrice = price;
    const paymentSection = document.getElementById('paymentSection');
    const qrAmountLabel = document.getElementById('qrAmountLabel');
    const instrAmount = document.getElementById('instrAmount');

    if (price > 0) {
        paymentSection.style.display = 'block';
        qrAmountLabel.innerText = 'Pay ৳' + price.toLocaleString('en-IN', {minimumFractionDigits: 2});
        instrAmount.innerText = '৳' + price.toLocaleString('en-IN', {minimumFractionDigits: 2});
        document.getElementById('transaction_id').required = true;
        document.getElementById('sender_phone').required = true;
    } else {
        paymentSection.style.display = 'none';
        document.getElementById('transaction_id').required = false;
        document.getElementById('sender_phone').required = false;
    }
}

function setPaymentMethod(methodId, code, number, desc) {
    document.getElementById('selected_payment_method').value = methodId;
    currentMethodNumber = number;

    // Reset buttons
    const buttons = ['btn-bkash', 'btn-nagad', 'btn-rocket', 'btn-bank'];
    buttons.forEach(id => {
        const btn = document.getElementById(id);
        btn.className = 'gw-pay-pill-btn';
    });

    const activeBtn = document.getElementById('btn-' + code);
    if (activeBtn) {
        activeBtn.className = 'gw-pay-pill-btn active-' + code;
    }

    // Update QR & Display
    document.getElementById('accountNumberDisplay').innerText = number;
    document.getElementById('accountTypeLabel').innerText = code.toUpperCase() + ' (' + desc + ')';
    document.getElementById('qrMethodTitle').innerText = code.toUpperCase() + ' Payment QR';
    document.getElementById('qrImage').src = 'https://api.qrserver.com/v1/create-qr-code/?size=180x180&data=' + encodeURIComponent(number);

    // Update instructions
    const instr = document.getElementById('paymentInstructions');
    if (code === 'bank') {
        instr.innerHTML = '<strong>Bank Transfer Details:</strong><br>Bank: <strong>Islami Bank Bangladesh Ltd</strong><br>Account Name: <strong>SMS GATEWAY PORTAL</strong><br>A/C Number: <strong>20501450200874100</strong> (Mirpur Branch)<br>Enter your Bank Deposit/Transfer Reference in Transaction ID.';
    } else {
        instr.innerHTML = `1. Open your <strong>${code.toUpperCase()} App</strong> and tap <strong>"Send Money"</strong> or <strong>"Scan QR"</strong>.<br>2. Enter/scan the number above and input amount <strong class="text-primary">৳${currentPrice.toLocaleString('en-IN', {minimumFractionDigits: 2})}</strong>.<br>3. Complete payment and copy the <strong>TrxID</strong> from your confirmation SMS.`;
    }
}

function copyAccountNumber() {
    navigator.clipboard.writeText(currentMethodNumber).then(() => {
        alert('Account number ' + currentMethodNumber + ' copied to clipboard!');
    });
}

// Initialize on page load if pre-selected
document.addEventListener('DOMContentLoaded', () => {
    const selected = document.querySelector('.gw-pkg-radio-card.selected');
    if (selected) {
        selected.click();
    }
});
</script>
@endsection
