@extends('layouts/web')

@section('content')

    <div class="container-fluid">
        @include('customer.partials.header')

        <h3 class="text-center text-white mt-5">{{ Auth::user()->name }}</h3>
        <div class="px-3 px-md-5">
            <div class="row">
                <div class="col-5 text-center bg-white bg-opacity-10 py-2 rounded-pill me-auto">
                    <small class="text-uppercase text-white">{{ __('Total Played') }}</small>
                    <h4 class="text-blue">{{ Auth::user()->total_spent }}</h4>
                </div>
                <div class="col-5 text-center bg-white bg-opacity-10 py-2 rounded-pill">
                    <small class="text-uppercase text-white">{{ __('Overall Played') }}</small>
                    <h4 class="text-blue">{{ Auth::user()->overall_spent }}</h4>
                </div>
            </div>
            <input id="referral_link" onclick="copy()" type="text" class="form-control mt-2 text-center text-white bg-black bg-opacity-25 cursor-pointer" value="{{ url(route('referral.create', Auth::user()->name)) }}" readonly>
        </div>

        <div class="row row-cols-3 row-cols-md-5 d-flex justify-content-center gap-2 gy-4 mt-2">
            <div class="box-div col border rounded">
                <a class="row text-decoration-none text-reset" href="{{ route('customer.referrals.index') }}">
                    <span class="text-center pt-2"><i class="uil-users-alt" style="font-size: 2rem; color: #35e9f7"></i></span>
                    <span class="text-center py-2 menu-text">{{ __('My Downline') }}</span>
                </a>
            </div>
            <div class="box-div col border rounded">
                <a class="row text-decoration-none text-reset" href="{{ route('customer.plays.index') }}">
                    <span class="text-center pt-2"><i class="uil-usd-circle" style="font-size: 2rem; color: #35e9f7"></i></span>
                    <span class="text-center py-2 menu-text">{{ __('My Play') }}</span>
                </a>
            </div>
            <div class="box-div col border rounded">
                <a class="row text-decoration-none text-reset" href="{{ route('customer.deposits.create') }}">
                    <span class="text-center pt-2"><i class="uil-money-withdraw" style="font-size: 2rem; color: #35e9f7"></i></span>
                    <span class="text-center py-2 menu-text">{{ __('My Deposits') }}</span>
                </a>
            </div>
            <div class="box-div col border rounded">
                <a class="row text-decoration-none text-reset" href="{{ route('customer.withdrawals.create') }}">
                    <span class="text-center pt-2"><i class="uil-money-insert" style="font-size: 2rem; color: #35e9f7"></i></span>
                    <span class="text-center py-2 menu-text">{{ __('My Withdrawals') }}</span>
                </a>
            </div>
            <div class="box-div col border rounded">
                <a class="row text-decoration-none text-reset" href="{{ route('customer.transaction-logs.index') }}">
                    <span class="text-center pt-2"><i class="uil-exchange-alt" style="font-size: 2rem; color: #35e9f7"></i></span>
                    <span class="text-center py-2 menu-text">{{ __('My Transactions') }}</span>
                </a>
            </div>
            <div class="box-div col border rounded">
                <a class="row text-decoration-none text-reset" href="{{ route('customer.profile.editPin') }}">
                    <span class="text-center pt-2"><i class="uil-lock-alt" style="font-size: 2rem; color: #35e9f7"></i></span>
                    <span class="text-center py-2 menu-text">{{ __('Change Security Password') }}</span>
                </a>
            </div>
            <div class="box-div col border rounded">
                <a class="row text-decoration-none text-reset" href="{{ route('customer.profile.edit') }}">
                    <span class="text-center pt-2"><i class="uil-edit-alt" style="font-size: 2rem; color: #35e9f7"></i></span>
                    <span class="text-center py-2 menu-text">{{ __('Edit Profile') }}</span>
                </a>
            </div>
{{--            <div class="box-div col border rounded">--}}
{{--                <a class="row text-decoration-none text-reset" href="{{ route('customer.news.index') }}">--}}
{{--                    <span class="text-center pt-2"><i class="uil-newspaper" style="font-size: 2rem; color: #35e9f7"></i></span>--}}
{{--                    <span class="text-center py-2 menu-text">{{ __('News') }}</span>--}}
{{--                </a>--}}
{{--            </div>--}}
            <div class="box-div col border rounded">
                <a class="row text-decoration-none text-reset" href="{{ route('logout') }}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
                    <span class="text-center pt-2"><i class="uil-sign-out-alt" style="font-size: 2rem; color: #35e9f7"></i></span>
                    <span class="text-center py-2 menu-text">{{ __('Logout') }}</span>
                    <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
                        @csrf
                    </form>
                </a>
            </div>
        </div>
    </div>
@endsection

@section('footer')

    <script>
        function copy() {
            // Get the text field
            var copyText = document.getElementById("referral_link");

            // Select the text field
            copyText.select();
            copyText.setSelectionRange(0, 99999); // For mobile devices

            navigator.clipboard.writeText(copyText.value);

            Swal.fire({
                position: 'center',
                icon: 'success',
                title: 'Copied to clipboard!',
                timer: 1000,
                showConfirmButton: true,
            }).catch((e) => {
                console.log(e);
            });
        }
    </script>

@endsection