@extends('layouts.user')
@section('title', 'Dashboard - StarHela')
@section('page-title', 'Home')
@section('breadcrumb-current', 'Dashboard')

@section('content')
<!-- Language switcher -->
<form id="languageForm" action="{{ route('user.dashboard') }}" method="POST" class="mb-0">
    @csrf
    <select id="langSelect" class="form-select form-select-sm" style="background-color:transparent;width:115px;float:right;margin-top:-50px;" name="lang" onchange="this.form.submit()">
        <option value="en" {{ ($user->lang ?? 'en') === 'en' ? 'selected' : '' }}>English</option>
        <option value="fr" {{ ($user->lang ?? 'en') === 'fr' ? 'selected' : '' }}>Français</option>
        <option value="sw" {{ ($user->lang ?? 'en') === 'sw' ? 'selected' : '' }}>Kiswahili</option>
        <option value="rw" {{ ($user->lang ?? 'en') === 'rw' ? 'selected' : '' }}>Kinyarwanda</option>
    </select>
</form>

<!-- Row 1: Stats -->
<div class="row">
    <div class="col-xxl-5 col-xl-12">
        <div class="row">
            <div class="col-xl-12 col-lg-12">
                <div class="card custom-card upgrade-card text-fixed-white" style="height:auto;">
                    <div class="card-body text-fixed-white" style="padding-bottom:0px;">
                        <span class="avatar avatar-xxl">
                            <img src="{{ asset('user/assets/images/media/media-84.png') }}" alt="">
                        </span>
                        <div class="upgrade-card-content" style="padding-top:22px;position:relative;">
                            <button type="button" onclick="hideContent()" class="btn btn-sm btn-success btn-wave" style="font-size:15px;text-transform:capitalize;">
                                Welcome: {{ $user->username }} 👋
                            </button>
                            <p id="welcomeText" style="padding-top:20px;">
                                @if($todayRows > 4)
                                    <div class="alert alert-secondary alert-dismissible fade show" role="alert">
                                        Well done on bringing in <b>{{ $todayRows }}</b> active affiliates today! Keep it up!
                                    </div>
                                @endif
                                {{ $langTexts['welcome_message'] ?? 'Welcome to StarHela!' }}
                                <a href="{{ asset('starhela.apk') }}" class="fw-bold text-info text-decoration-underline"> CLICK HERE </a> to get android app
                            </p>
                            <div class="row">
                                <div id="statsRow" class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-4 border-end p-1 text-center">
                                    <p class="mb-1 text-warning">Expense</p>
                                    <h6 class="mb-1 text-white">{{ $expenses }}</h6>
                                </div>
                                <div class="col-xl-8 col-lg-8 col-md-8 col-sm-8 col-8 p-1 text-center">
                                    <br>
                                    <p class="mb-1 text-success fw-bold">{{ $langTexts['Total_Earnings'] ?? 'Total Earnings' }} <i class="ri-arrow-up-s-line me-2 fw-bold align-middle d-inline-block"></i></p>
                                    <h4 class="mb-1 text-white fw-bold">{{ $profit }}</h4>
                                </div>
                            </div>
                            <script>
                                function hideContent(){
                                    let p=document.getElementById('welcomeText');
                                    let r=document.getElementById('statsRow');
                                    let d=(p.style.display==='none')?'block':'none';
                                    p.style.display=d; r.style.display=d;
                                }
                            </script>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Balance -->
    <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6">
        <div class="card custom-card" style="background-color:rgba(3,221,73,0.6)!important;">
            <div class="card-body">
                <div class="row">
                    <div class="col-6 pe-0">
                        <p class="mb-2"><span class="fs-16 fw-semibold">{{ $langTexts['Balance'] ?? 'Balance' }}</span></p>
                        <p class="mb-2 fs-12">
                            <span class="fs-25 fw-semibold lh-1 vertical-bottom mb-0">{{ $balancetotal }}</span>
                            <span class="d-block fs-10 fw-semibold text-muted">ALL TIME</span>
                        </p>
                    </div>
                    <div class="col-6">
                        <p class="badge bg-success-transparent float-end d-inline-flex"><i class="ti ti-caret-up me-1"></i>42%</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Withdrawn -->
    <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6">
        <div class="card custom-card" style="background-color:rgba(247,14,14,0.54)!important">
            <div class="card-body">
                <div class="row">
                    <div class="col-6 pe-0">
                        <p class="mb-2"><span class="fs-16">{{ $langTexts['Withdrawn'] ?? 'Withdrawn' }}</span></p>
                        <p class="mb-2 fs-12">
                            <span class="fs-25 fw-semibold lh-1 vertical-bottom mb-0">{{ $withdrawn }}</span>
                            <span class="d-block fs-10 fw-semibold text-muted">ALL TIME</span>
                        </p>
                    </div>
                    <div class="col-6">
                        <p class="badge bg-danger-transparent float-end d-inline-flex"><i class="ti ti-caret-down me-1"></i>12%</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Referral -->
    <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6">
        <div class="card custom-card" style="background-color:rgba(228,233,68,0.6)!important">
            <div class="card-body">
                <div class="row">
                    <div class="col-6 pe-0">
                        <p class="mb-2"><span class="fs-16">{{ $langTexts['Referral_Earnings'] ?? 'Referral Earnings' }}</span></p>
                        <p class="mb-2 fs-12">
                            <span class="fs-25 fw-semibold lh-1 vertical-bottom mb-0">{{ $totalreferral }}</span>
                            <span class="d-block fs-10 fw-semibold text-muted">ALL TIME</span>
                        </p>
                    </div>
                    <div class="col-6">
                        <p class="badge bg-success-transparent float-end d-inline-flex"><i class="ti ti-caret-up me-1"></i>27%</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bonus -->
    <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6">
        <div class="card custom-card" style="background-color:rgba(227,11,190,0.3)!important;">
            <div class="card-body">
                <div class="row">
                    <div class="col-6 pe-0">
                        <p class="mb-2"><span class="fs-16">{{ $langTexts['Agent_Bonus'] ?? 'Agent Bonus' }}</span></p>
                        <p class="mb-2 fs-12">
                            <span class="fs-25 fw-semibold lh-1 vertical-bottom mb-0">{{ $bonustotal }}</span>
                            <span class="d-block fs-10 fw-semibold text-muted">ALL TIME</span>
                        </p>
                    </div>
                    <div class="col-6">
                        <p class="badge bg-success-transparent float-end d-inline-flex"><i class="ti ti-caret-up me-1"></i>32.5%</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Row 2: Service Balance + Invite Link + Timetable -->
<div class="row">
    <!-- Service Balance -->
    <div class="col-xxl-3 col-xl-12">
        <div class="card custom-card recent-transactions-card overflow-hidden">
            <div class="card-header justify-content-between">
                <div class="card-title">SERVICE BALANCE</div>
            </div>
            <div class="card-body p-0">
                <div class="list-group">
                    @if($user->country !== 'ke' && $totalRefered > 1)
                    <a href="javascript:void(0);" class="border-0">
                        <div class="list-group-item border-0">
                            <div class="d-flex align-items-start">
                                <div class="w-100">
                                    <div class="d-flex align-items-top justify-content-between">
                                        <p class="mb-0 fw-semibold">{{ $langTexts['Whatsapp_Earnings'] ?? 'WhatsApp Earnings' }}</p>
                                        <span class="text-end text-danger d-block">{{ $whatsapp }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                    @endif

                    @if($user->country !== 'ke')
                    <a href="javascript:void(0);" class="border-0">
                        <div class="list-group-item border-0">
                            <div class="d-flex align-items-top justify-content-between">
                                <p class="mb-0 fw-semibold">{{ $langTexts['Deposit_Balance'] ?? 'Deposit Balance' }}</p>
                                <span class="text-end text-danger d-block">{{ $activationdeposit }}</span>
                            </div>
                        </div>
                    </a>
                    @endif

                    <a href="javascript:void(0);" class="border-0">
                        <div class="list-group-item border-0">
                            <div class="d-flex align-items-top justify-content-between">
                                <p class="mb-0 fw-semibold">{{ $langTexts['Ads_Earnings'] ?? 'Ads Earnings' }}</p>
                                <span class="text-end text-success d-block">{{ $displayads }}</span>
                            </div>
                        </div>
                    </a>
                    <a href="javascript:void(0);" class="border-0">
                        <div class="list-group-item border-0">
                            <div class="d-flex align-items-top justify-content-between">
                                <p class="mb-0 fw-semibold">{{ $langTexts['TikTok_Earnings'] ?? 'TikTok Earnings' }}</p>
                                <span class="text-end text-danger d-block">{{ $tiktoktotal }}</span>
                            </div>
                        </div>
                    </a>
                    <a href="javascript:void(0);" class="border-0">
                        <div class="list-group-item border-0">
                            <div class="d-flex align-items-top justify-content-between">
                                <p class="mb-0 fw-semibold">{{ $langTexts['Youtube_Earnings'] ?? 'Youtube Earnings' }}</p>
                                <span class="text-end text-success d-block">{{ $youtubetotal }}</span>
                            </div>
                        </div>
                    </a>
                    <a href="javascript:void(0);" class="border-0">
                        <div class="list-group-item border-0">
                            <div class="d-flex align-items-top justify-content-between">
                                <p class="mb-0 fw-semibold">{{ $langTexts['Trivia_Earnings'] ?? 'Trivia Earnings' }}</p>
                                <span class="text-end text-danger d-block">{{ $triviatotal }}</span>
                            </div>
                        </div>
                    </a>
                    <a href="javascript:void(0);" class="border-0">
                        <div class="list-group-item border-0">
                            <div class="d-flex align-items-top justify-content-between">
                                <p class="mb-0 fw-semibold">Blog Earnings</p>
                                <span class="text-end text-danger d-block">{{ $blogtotal }}</span>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Invite Link -->
    <div class="col-lg-6 col-sm-12 col-md-6 col-xxl-6 col-xl-8">
        <div class="card custom-card">
            <div class="card-header">
                <div class="card-title">INVITE LINK</div>
            </div>
            <div class="card-body">
                <div class="accordion" id="accordionExample">
                    <div class="accordion-item">
                        <h2 class="accordion-header">
                            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">Invite link</button>
                        </h2>
                        <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
                            <div class="col-md-12 mb-1">
                                <input id="myInput1" type="text" class="form-control" style="color:black!important;background-color:#5053f852;font-size:12px;" value="{{ $referralLink }}">
                            </div>
                            <div class="col-md mg-t-10 mg-md-t-0">
                                <button type="button" class="btn btn-primary btn-block" onclick="copyText('myInput1')">{{ $langTexts['Copy_link'] ?? 'Copy Link' }}</button>
                            </div>
                        </div>
                    </div>
                    <div class="accordion-item">
                        <h2 class="accordion-header">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo">Alternative link</button>
                        </h2>
                        <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                            <div class="accordion-body">
                                <div class="col-md-12 mb-1">
                                    <input id="myInput2" type="text" class="form-control" style="color:black!important;background-color:#5053f852;font-size:12px;" value="{{ $encodedLink }}">
                                </div>
                                <div class="col-md mg-t-10 mg-md-t-0">
                                    <button type="button" class="btn btn-primary btn-block" onclick="copyText('myInput2')">{{ $langTexts['Copy_link'] ?? 'Copy Link' }}</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <br>
                    <p>{{ $langTexts['or_click'] ?? 'Or share via:' }}</p>
                </div>

                <div class="social-networks noprint" style="font-size:23px;">
                    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
                    <a href="https://api.whatsapp.com/send?text={{ urlencode($referralLink) }}" target="_blank"><i class="fa-brands fa-whatsapp" style="color:#25d366;padding-left:12px;"></i></a>
                    <a href="https://twitter.com/share?text=Join+Starhela+and+earn!&url={{ urlencode($referralLink) }}" target="_blank"><i class="fa-brands fa-twitter" style="color:#00aced;padding-left:12px;"></i></a>
                    <a href="https://www.facebook.com/sharer.php?u={{ urlencode($referralLink) }}" target="_blank"><i class="fa-brands fa-facebook-square" style="color:#3b5998;padding-left:12px;"></i></a>
                    <a href="mailto:?subject=Join+Starhela&body={{ urlencode($referralLink) }}" target="_blank"><i class="fa-solid fa-envelope" style="color:#bb001b;padding-left:12px;"></i></a>
                </div>
            </div>
        </div>
    </div>

    <!-- Timetable -->
    <div class="col-lg-6 col-sm-12 col-md-6 col-xxl-3 col-xl-4">
        <div class="card custom-card">
            <div class="card-header justify-content-between">
                <div class="card-title">TIMETABLE</div>
            </div>
            <div class="card-body mt-0">
                <div class="table-responsive">
                    @if($days->count() > 0)
                    <table class="table table-hover card-table table-vcenter text-nowrap">
                        <tr><th>ID</th><th>Name</th><th>Day 1</th><th>Day 2</th><th>Day 3</th></tr>
                        @foreach($days as $i => $day)
                        <tr>
                            <td>{{ $i + 1 }}</td>
                            <td>{{ $day->name }}</td>
                            <td>{{ $day->day1 }}</td>
                            <td>{{ $day->day2 }}</td>
                            <td>{{ $day->day3 }}</td>
                        </tr>
                        @endforeach
                    </table>
                    @else
                    <p>0 results</p>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<!-- User Details -->
<div class="row">
    <div class="col-xxl-6 col-xl-12 col-md-12">
        <div class="card custom-card">
            <div class="card-header justify-content-between">
                <div class="card-title">USER DETAILS</div>
            </div>
            <div class="card">
                <div class="card-body px-0">
                    <div class="accordion-item">
                        <h2 class="accordion-header">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#successBorderTwo">CLICK TO VIEW</button>
                        </h2>
                        <div id="successBorderTwo" class="accordion-collapse collapse">
                            <div class="accordion-body">
                                <ul class="list-unstyled p-4 my-auto">
                                    <li class="mb-3"><span class="fs-12"><i class="ri-checkbox-blank-circle-fill align-middle me-2 d-inline-block text-primary"></i>Username</span><span class="fw-semibold float-end">{{ $user->username }}</span></li>
                                    <li class="mb-3"><span class="fs-12"><i class="ri-checkbox-blank-circle-fill align-middle me-2 d-inline-block text-success"></i>Active Referrals</span><span class="fw-semibold float-end">{{ $totalRefered }}</span></li>
                                    <li class="mb-3"><span class="fs-12"><i class="ri-checkbox-blank-circle-fill align-middle me-2 d-inline-block text-info"></i>Mobile</span><span class="fw-semibold float-end">{{ $user->mobile }}</span></li>
                                    <li class="mb-3"><span class="fs-12"><i class="ri-checkbox-blank-circle-fill align-middle me-2 d-inline-block text-danger"></i>Email</span><span class="fw-semibold float-end">{{ $user->email }}</span></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function copyText(inputId){
    var t=document.getElementById(inputId);
    navigator.clipboard.writeText(t.value).then(()=>{alert("Copied: "+t.value);}).catch(()=>{alert("Failed to copy.");});
}
</script>
@endsection