@extends('wallet.layouts.master')
@section('title','Dashboard')
@section('content')
    {{--        <div class="heading d-flex justify-content-between align-items-center gap-3 mt-5 px-1">--}}
        {{--            <h2 class='fw-bold h1'>Overview</h2>--}}
        {{--            <a href='#' class='button fs-small'><i class="material-symbols-outlined me-2">shopping_bag</i>Buy Crypto</a>--}}
        {{--        </div>--}}
        <div class="row mt-20">
            <div class="col-lg-6">
                <div class="dark-card rounded-4 shadow">
                    <h6 class='fw-bold p-3 pb-1'>BTC</h6>
                    {{--                    <small class='text-clr px-3'>$0.00</small>--}}
                    <!-- TradingView Widget BEGIN -->
                    <div class="text-center mx-auto d-flex justify-content-center">
                        <div class="tradingview-widget-container">
                            <div class="tradingview-widget-container__widget"></div>
                            {{--                            <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/" rel="noopener nofollow" target="_blank"><span class="blue-text">Track all markets on TradingView</span></a></div>--}}
                            <script type="text/javascript"
                                    src="https://s3.tradingview.com/external-embedding/embed-widget-mini-symbol-overview.js"
                                    async>
                                {
                                    "symbol"
                                :
                                    "BINANCE:BTCUSD",
                                        "width"
                                :
                                    "100%",
                                        "height"
                                :
                                    "250",
                                        "locale"
                                :
                                    "en",
                                        "dateRange"
                                :
                                    "1D",
                                        "colorTheme"
                                :
                                    "dark",
                                        "trendLineColor"
                                :
                                    "#0098FF",
                                        "isTransparent"
                                :
                                    false,
                                        "autosize"
                                :
                                    true,
                                        "largeChartUrl"
                                :
                                    ""
                                }
                            </script>
                        </div>
                    </div>
                    <div class="p-3 mt-2 pt-0 d-flex align-items-center gap-3">
                        <img src="{{asset('wallet_d/assets/images/logo-bitcoin.svg')}}" alt="coin svg">
                        <h6 class='fw-600'>BTC/USD</h6>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 mt-20 mt-lg-0">
                <div class="dark-card rounded-4 shadow">
                    <h6 class='fw-bold p-3 pb-1'>ETH</h6>
                    {{--                    <small class='text-clr px-3'>$0.00</small>--}}
                    <!-- TradingView Widget BEGIN -->
                    <div class="tradingview-widget-container">
                        <div class="tradingview-widget-container__widget"></div>
                        {{--                        <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/" rel="noopener nofollow" target="_blank"><span class="blue-text">Track all markets on TradingView</span></a></div>--}}
                        <script type="text/javascript"
                                src="https://s3.tradingview.com/external-embedding/embed-widget-mini-symbol-overview.js"
                                async>
                            {
                                "symbol"
                            :
                                "BINANCE:ETHUSD",
                                    "width"
                            :
                                "100%",
                                    "height"
                            :
                                "250",
                                    "locale"
                            :
                                "en",
                                    "dateRange"
                            :
                                "1D",
                                    "colorTheme"
                            :
                                "dark",
                                    "trendLineColor"
                            :
                                "#0098FF",
                                    "isTransparent"
                            :
                                false,
                                    "autosize"
                            :
                                true,
                                    "largeChartUrl"
                            :
                                ""
                            }
                        </script>
                    </div>
                    <!-- TradingView Widget END -->
                    <div class="p-3 pt-0 mt-2 d-flex align-items-center gap-3">
                        <img src="{{asset('wallet_d/assets/images/logo-eth.svg')}}" alt="coin svg">
                        <h6 class='fw-600'>ETH/USD</h6>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-6 mt-20">
                <div class="dark-card rounded-4 shadow">
                    <h6 class='fw-bold p-3 pb-1'>Your Open Tickets</h6>
                    <div id="chart-blue"></div>
                    <div class="p-3 pt-0 d-flex align-items-center gap-3">
                        <span class="material-symbols-outlined display-1 text-clr lh-sm">confirmation_number</span>
                        <h3 class='fw-600'>{{$open_tickets}}</h3>
                    </div>
                </div>
                <div class="dark-card rounded-4 shadow mt-20">
                    <h6 class='fw-bold p-3 pb-1'>Your Resolved Tickets</h6>
                    <div id="chart-info"></div>
                    <div class="p-3 pt-0 d-flex align-items-center gap-3">
                        <span class="material-symbols-outlined display-1 text-clr lh-sm">emoji_objects</span>
                        <h3 class='fw-600'>{{$close_tickets}}</h3>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 mt-20">
                <div
                    class="dark-card rounded-4 shadow h-100 px-5 py-3 d-flex align-items-center justify-content-center flex-column text-center">
                    <img src="{{asset('wallet_d/assets/images/iconly-glass-tick.svg')}}" alt="check points">
                    @if(Auth::user()->manual_kyc)
                        <h5 class='fw-bold my-2'>KYC Verified</h5>
                    @else
                        <h5 class='fw-bold my-2'>KYC Not Verified</h5>
                        <small>Your account is not verified, you can only use the basic features, please verify your
                            account.</small>
                        <button type="button" data-bs-toggle="modal" data-bs-target="#kyc_verified"
                                class='button fs-small d-block mx-auto mt-3'>Verify Now
                        </button>
                    @endif


                </div>
            </div>
        </div>
        <div class="dark-card rounded-4 shadow mt-32">
            <div class="row p-32">
                <div class="col-md-3">
                    <h5 class='fw-bold'>Current Balance</h5>
                    <small class='text-clr'>Balance across all your accounts</small>
                    <div class='py-5 pe-3 text-center'>
                        <div id="donut-chart"></div>
                    </div>
                </div>
                <div class="col-md-9 d-flex flex-column justify-content-center">
                    <div class='content ps-md-5'>
                        <small class='text-uppercase text-clr fw-bold'>Total Balance</small>
                        <h2 class='fw-bold my-3'>${{round($total_usd,4)}}</h2>
                        {{--                        <small class='d-block fw-bold text-clr mt-2'>Available Balance: $0.00</small>--}}

                        <div class='mt-32'>
                            <small class='d-block fw-bold text-clr mt-2'>Available Currency</small>
                            <div class="curuncies">
                                @foreach($coins_balance as $coin)
                                    @php
                                        // Get the color for the current coin symbol, default to black if not found
                                        $backgroundColor = $coinColors[$coin->coin->short_name] ?? '#000000';
                                    @endphp

                                    <div class="mt-16 crncy-single d-flex justify-content-between">
                                        <div class="left d-flex align-items-center gap-3 fw-600 fs-14">
                                            <div class="box p-2 rounded-1"
                                                 style='background: {{$backgroundColor}};'></div> {{$coin->coin->short_name ?? ''}}
                                        </div>
                                        <div class="right fs-14 fw-bold text-clr">{{$coin->balance ?? ''}}</div>
                                    </div>
                                @endforeach

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <hr class='m-0'>
            <div class="p-16">
                @include('wallet.partials.deposit-addresses')
            </div>
            <div class="d-flex gap-3 p-16 flex-wrap">

                <a href="{{route('wallets')}}">
                    <div class="btn btn-outline-primary d-flex align-items-center gap-2 rounded-5 px-3 fs-14 fw-600">
                        Send Funds <span class="material-symbols-outlined">trending_up</span></div>
                </a>
                <a href="{{route('wallets')}}">
                    <div class="btn btn-outline-primary d-flex align-items-center gap-2 rounded-5 px-3 fs-14 fw-600">
                        Receive Funds <span class="material-symbols-outlined">trending_down</span></div>
                </a>
            </div>
        </div>
        <div class="dark-card rounded-4 shadow mt-32">
            <h5 class='fw-bold p-24'>Last 10 Transactions</h5>

            @if(!$transactions->isEmpty())
                <div class="table-responsive">
                    <table class="display table table-bordered" id="deafult_ordering_table"
                           style="width:100%">
                        <thead>
                        <tr>
                            <th scope="col">Transaction id</th>
                            <th scope="col">Type</th>
                            <th scope="col">Amount</th>
                            <th scope="col">USD Amount</th>
                            <th scope="col">Coin</th>
                            <th scope="col">Wallet id</th>
                            <th scope="col">Wallet name</th>
                            <th scope="col">Address</th>
                            <th scope="col">Address label</th>
                            <th scope="col">Confirmations</th>
                            <th scope="col">Payment date</th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach($transactions as $trans)
                            <tr>
                                <td class="text-white fw-bold" onclick="view_trx_id(`{{$trans->payment_id}}`)">
                                    @if($trans->payment_id)
                                        View
                                    @endif
                                </td>
                                <td>
                                    @if($trans->type == 'Deposit')
                                        <span class="bg-success p-1 rounded-3">Deposit</span>
                                    @else
                                        <span class="bg-danger p-1 rounded-3">Withdrawal</span>
                                    @endif
                                </td>
                                <td>

                                    <span>{{$trans->type == 'Deposit' ? '+' : '-'}} </span> {{$trans->amount}}

                                </td>
                                <td>{{$trans->usd_amount}}</td>
                                <td>{{$trans->coin_short_name}}</td>
                                <td>{{$trans->wallet_id}}</td>
                                <td>{{$trans->wallet_name}}</td>
                                <td class="text-white fw-bold" onclick="view_address(`{{$trans->address}}`)">View</td>
                                <td>{{$trans->address_label}}</td>
                                <td>{{$trans->confirmations}}</td>
                                <td>{{$trans->date}}</td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            @else
                <div class='no-found text-center opacity-50 pt-32 pb-32'>
                    <img class='w-250 object-fit-contain' src="{{asset('wallet_d/assets/images/you_lost.png')}}"
                         alt="you lost">
                    <h4 class='fw-bold'>Oops! Nothing is here.</h4>
                    <p class='fw-500'>We couldn't find any transactions.</p>
                </div>
            @endif

            <hr class='m-0'>
            <div class="d-flex gap-3 p-16 flex-wrap">
                <a href="{{route('transactions')}}">
                    <div class="btn btn-dark d-flex align-items-center gap-2 rounded-5 px-3 fs-14 fw-600">
                        See All
                        <span class="material-symbols-outlined">arrow_right_alt</span>
                    </div>
                </a>
            </div>
        </div>
        <!------Modals------>
        <div class="modal fade" id="kyc_verified" tabindex="-1" aria-labelledby="kyc_verifiedLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-centered">
                <div class="modal-content p-8">
                    <div class="modal-header border-0 pb-2">
                        <h6 class="modal-title fw-bold" id="kyc_verifiedLabel">KYC Verification</h6>
                        <button type="button" class="btn-close invert" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                    </div>
                    <div class="modal-body pt-0">
                        <div class="mt-32">
                            <div class='no-found text-center opacity-75'>
                                <img class='w-300 object-fit-contain rounded-4'
                                     src="{{asset('wallet_d/assets/images/coming-soon.jpeg')}}" alt="you lost">
                                <h4 class='fw-bold'>We are working on it</h4>
                                <p class='fw-500'>
                                    You can visit later.<span class="text-primary">Please!</span>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
@endsection

@section('script')

    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    {{--    <script src="{{asset('wallet_d/assets/js/charts.js')}}"></script>--}}
    <script>
        $(document).ready(function () {
            $("#dashboard-page").addClass('active')
        });


    </script>
    <script>
        // Get data from the Blade variables
        var coinData = @json($coins_balance);
        var coinColors = @json($coinColors);

        // Prepare chart data
        var seriesData = [];
        var labelsData = [];
        var colorsData = [];

        coinData.forEach(function (coin) {
            if (coin.balance) {
                // Add the balance and label for each coin
                seriesData.push(parseFloat(coin.balance)); // Ensure balance is a number
                labelsData.push(coin.coin.full_name || ''); // Use the coin's full name or empty string

                // Add color based on coin symbol
                colorsData.push(coinColors[coin.coin.short_name || ''] || '#000000'); // Fallback to black if no color is defined
            }
        });

        var options3 = {
            series: seriesData, // Dynamic data
            labels: labelsData, // Dynamic labels
            colors: colorsData, // Dynamic colors
            chart: {
                type: 'donut',
                width: 300,
                toolbar: {
                    show: false,
                },
            },
            tooltip: {
                enabled: true,
            },
            dataLabels: {
                enabled: false,
            },
            legend: {
                show: false,
            },
            stroke: {
                width: 0,
            },
            responsive: [{
                breakpoint: 480,
                options: {
                    chart: {
                        width: 200
                    },
                    legend: {
                        show: false,
                    }
                }
            }]
        };

        var donutchart = new ApexCharts(document.querySelector("#donut-chart"), options3);
        donutchart.render();
    </script>

@endsection