@extends('layouts.app')

@section('title', 'Virtual Topup')

@section('content')
<style>
    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        margin: 0;
        padding: 0;
        background-color: #f5f5f5;
    }
    
    .header {
        background: linear-gradient(135deg, #6c63ff, #9b59b6);
        color: white;
        padding: 20px 0;
        text-align: center;
        position: relative;
        overflow: hidden;
    }
    
    .header::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: 
            url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7z' fill='%23ffffff' fill-opacity='0.1'/%3E%3C/svg%3E") repeat,
            url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h100v100H0z' fill='%23ffffff' fill-opacity='0.05'/%3E%3C/svg%3E") repeat;
    }
    
    .header h2 { margin: 0 0 20px 0; font-size: 24px; }
    .wallet-info { display: flex; justify-content: center; align-items: center; gap: 20px; margin-bottom: 15px; }
    .wallet-balance { font-size: 28px; font-weight: bold; }
    .commission { font-size: 16px; }
    .buttons { display: flex; justify-content: center; gap: 15px; margin-top: 15px; }
    .btn { background-color: transparent; color: white; border: 2px solid white; border-radius: 20px; padding: 8px 20px; cursor: pointer; font-weight: bold; transition: all 0.3s ease; display: flex; align-items: center; gap: 5px; }
    .btn:hover { background-color: rgba(255, 255, 255, 0.1); }
    .main-content { padding: 20px; max-width: 1200px; margin: 20px auto; background-color: white; border-radius: 15px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
    .service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 15px; margin-bottom: 20px; }
    .service-card { padding: 20px; border-radius: 10px; text-align: center; cursor: pointer; transition: transform 0.2s ease; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100px; }
    .service-card:hover { transform: translateY(-5px); }
    .service-icon { font-size: 24px; margin-bottom: 10px; }
    .service-name { font-weight: bold; font-size: 14px; }
    .bottom-nav { display: flex; justify-content: space-around; background-color: white; padding: 10px 0; border-top: 1px solid #eee; position: fixed; bottom: 0; width: 100%; box-shadow: 0 -2px 5px rgba(0,0,0,0.1); }
    .nav-item { display: flex; flex-direction: column; align-items: center; padding: 5px 10px; cursor: pointer; }
    .nav-icon { font-size: 20px; margin-bottom: 5px; }
    .nav-text { font-size: 12px; text-align: center; }
    .pink-bg { background-color: #ffebee; }
    .blue-bg { background-color: #e3f2fd; }
    .green-bg { background-color: #e8f5e9; }
    .deco { position: absolute; opacity: 0.2; border-radius: 50%; }
    .deco-1 { top: 10px; left: 20px; width: 60px; height: 60px; background: #fff; }
    .deco-2 { top: 50px; right: 30px; width: 40px; height: 40px; background: #fff; }
    .deco-3 { bottom: 20px; left: 10px; width: 30px; height: 30px; background: #fff; }
    .deco-4 { bottom: 40px; right: 10px; width: 20px; height: 20px; background: #fff; }
</style>

<div class="header" style="padding: 50px 20px; text-align: center;">
    <h2>Welcome to WapsChat VTU — powered by Leopay Nigeria</h2>

    <p>
        <b>Note:</b> Please log in or create an account before using the Virtual Top-up features below.<br>
        You can use the same login details you use on WapsChat.
    </p>
    <div style="display: flex; justify-content: center; margin: 20px 0;">
     <button data-popup="chat" data-popup-url="https://app.leopay.ng/mobile/login" class="btn btn-primary">
     Go To Dashboard 
</button>
</div>
</div>
</div>
 <div style="text-align: center; margin-top: 30px;">
    <p>For the best experience, use this on a large screen. On smaller devices, access it via your browser.
    <a href="https://app.leopay.ng/mobile/login" target="_blank" 
       class="btn btn-custom-link" 
       style="display: inline-block; padding: 12px 25px; background-color: #fff; color: #dc3545; border-radius: 5px; text-decoration: none; margin-top: 10px;">
        Click here to login on browser
    </a></p>
</div>
</div>




    <div class="deco deco-1"></div>
    <div class="deco deco-2"></div>
    <div class="deco deco-3"></div>
    <div class="deco deco-4"></div>
</div>

<div class="main-content">
    <div class="service-grid">
        <!-- Row 1 -->
        <div class="service-card pink-bg" data-popup-url="https://app.leopay.ng/mobile/login">
            <div class="service-icon">📞</div>
            <div class="service-name">Buy Airtime</div>
        </div>
        <div class="service-card blue-bg" data-popup-url="https://app.leopay.ng/mobile/home2/buy-data">
            <div class="service-icon">📶</div>
            <div class="service-name">Buy Data</div>
        </div>
        <div class="service-card green-bg" data-popup-url="https://app.leopay.ng/mobile/home2/cable-tv">
            <div class="service-icon">📺</div>
            <div class="service-name">Cable TV</div>
        </div>

        <!-- Row 2 -->
        <div class="service-card green-bg" data-popup-url="https://app.leopay.ng/mobile/home2/electricity">
            <div class="service-icon">⚡</div>
            <div class="service-name">Electricity</div>
        </div>
        <div class="service-card pink-bg" data-popup-url="https://app.leopay.ng/mobile/home2/exam-pins">
            <div class="service-icon">🎓</div>
            <div class="service-name">Education</div>
        </div>
        <div class="service-card blue-bg" data-popup-url="https://app.leopay.ng/mobile/home2/recharge-pin">
            <div class="service-icon">📱</div>
            <div class="service-name">Recharge Pin</div>
        </div>

        
    </div>
</div>

<div class="bottom-nav">
    <div class="nav-item" data-popup-url="/home">
        <div class="nav-icon">🏠</div>
        <div class="nav-text">Home</div>
    </div>
    <div class="nav-item" data-popup-url="/profile">
        <div class="nav-icon">👤</div>
        <div class="nav-text">Profile</div>
    </div>
    <div class="nav-item" data-popup-url="/support">
        <div class="nav-icon">📞</div>
        <div class="nav-text">Support</div>
    </div>
    <div class="nav-item" data-popup-url="/history">
        <div class="nav-icon">📜</div>
        <div class="nav-text">History</div>
    </div>
    <div class="nav-item" data-popup-url="/more">
        <div class="nav-icon">🟦</div>
        <div class="nav-text">More</div>
    </div>
</div>
@endsection