@extends('users::user-profile')
@section('css')
<link rel="stylesheet" type="text/css" href="{{asset('app-assets/css/core/colors/palette-gradient.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('app-assets/css/pages/dashboard-ecommerce.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('app-assets/css/pages/card-analytics.css')}}">
    @endsection
@section('inside')
    <div class="dashboard">
        <div class="dashboard__profile card profile-card">
            <div class="card-body profile-card__body">
                <div class="profile-card__name">{{Auth::user()->name}}</div>
                <div class="profile-card__email">{{Auth::user()->email}}</div>
                <div class="profile-card__edit">
                    <a href="{{route('affiliate-profile',['slug' => \Illuminate\Support\Facades\Auth::user()->partnerinfo->code])}}" class="btn btn-secondary btn-sm">Profili Görüntüle</a>
                </div>
            </div>
        </div>
        <div class="dashboard__address card address-card address-card--featured">
            <div class="address-card__badge" style="background-color: orangered">Satış Ortağı Hesap Bilgileri</div>
            <div class="address-card__body">
                <p><b>Toplam Bakiye:</b> {{priceFormat($total_amount)}}</p>
                <p><b>Kesinleşmiş Bakiye:</b> {{priceFormat($payable_amount)}}</p>
                <p><b>Ortaklık Bağlantısı</b>:<br> <a id="partner_url" href="{{getenv('APP_URL')}}?a={{!empty(\Illuminate\Support\Facades\Auth::user()->partnerinfo->code) ? \Illuminate\Support\Facades\Auth::user()->partnerinfo->code : ''}}">{{getenv('APP_URL')}}?a={{!empty(\Illuminate\Support\Facades\Auth::user()->partnerinfo->code) ? \Illuminate\Support\Facades\Auth::user()->partnerinfo->code : ''}}</a></p>
                <p>
                    <button id="copy_button" class="btn btn-sm btn-primary" onclick="fallbackCopyTextToClipboard('{{getenv('APP_URL')}}?a={{!empty(\Illuminate\Support\Facades\Auth::user()->partnerinfo->code) ? \Illuminate\Support\Facades\Auth::user()->partnerinfo->code : ''}}')">Kopyala</button>
                    <a class="btn btn-sm btn-success" href="whatsapp://send?text={{getenv('APP_URL')}}?a={{!empty(\Illuminate\Support\Facades\Auth::user()->partnerinfo->code) ? \Illuminate\Support\Facades\Auth::user()->partnerinfo->code : ''}}" data-action="share/whatsapp/share"><i style="font-size: 17px" class="fab fa-whatsapp"></i> Paylaş</a>
                    <a style="background-color: #4177F2;border: 1px solid #4177F2;color: white" class="btn btn-sm btn-info" href="https://www.facebook.com/sharer/sharer.php?u={{getenv('APP_URL')}}?a={{!empty(\Illuminate\Support\Facades\Auth::user()->partnerinfo->code) ? \Illuminate\Support\Facades\Auth::user()->partnerinfo->code : ''}}" target="_blank">
                        <i style="font-size: 17px" class="fab fa-facebook"></i> Paylaş
                    </a>
                </p>
        </div>
        </div>

    </div>
    @if($announce)
        <div class="alert alert-info" style="width: 100%;text-align: center;color: gray;margin-top: 20px">
            {{$announce->announce}}
        </div>
    @endif
    <!--- grafik -->

    <div class="card" style="text-align: center">
        <div class="card-header d-flex justify-content-between align-items-end">
            <h4 class="card-title">Aylık Komisyon Grafiği</h4>
            <p class="font-medium-5 mb-0"><i class="feather icon-settings text-muted cursor-pointer"></i></p>
        </div>
        <div class="card-content">
            <div class="card-body pb-0">
                <div class="d-flex justify-content-start">
                    <div class="mr-2">
                        <p class="mb-50 text-bold-600">Bu Ay</p>
                        <h2 class="text-bold-400">
                            <span class="text-success">{{@$orders_this}}</span>
                            <sup class="font-medium-1">₺</sup>
                        </h2>
                    </div>
                    <div>
                        <p class="mb-50 text-bold-600">Geçen Ay</p>
                        <h2 class="text-bold-400">
                            <span class="text-success">{{@$orders_last}}</span>
                            <sup class="font-medium-1">₺</sup>
                        </h2>
                    </div>

                </div>
                <div id="revenue-chart"></div>
            </div>
        </div>
    </div>
    <!-- grafik bitiş -->
        <div class="dashboard__orders card">
            <div class="card-header">
                <h5>{{__('general.user-profile.orders')}}</h5>
            </div>
            <div class="card-divider"></div>
            <div class="card-table">
                <div class="table-responsive-sm">
                    <table>
                        <thead>
                        <tr>
                            <th>{{__('general.orders.id')}}</th>
                            <th>{{__('general.orders.date')}}</th>
                            <th>{{__('general.orders.status')}}</th>
                            <th>{{__('general.orders.products')}}</th>
                            <th>{{__('general.track_shipping')}}</th>
                            <th>{{__('general.orders.order_total')}}</th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach($orders as $order)
                        <tr>
                            <td>{{$order->id}}</td>
                            <td>{{date('d/m/Y H:i',strtotime($order->created_at))}}</td>
                            <td>{{@$order->orderStatus->status_name}}</td>
                            <td><button class="btn btn-primary" data-toggle="modal" data-target="#op-{{$order->id}}">{{__('general.show')}}</button></td>
                            <td><a href="{{route('track-shipping',['order_id' => $order->id,'email' => $order->email,'run' => 1])}}" target="_blank" class="btn btn-primary">{{__('general.show')}}</a></td>
                            <td>{{$order->total_order}}₺</td>
                        </tr>
                       @endforeach
                        </tbody>
                    </table>
                    {{$orders->links()}}
                </div>
            </div>
        </div>
    </div>

@endsection
@section('js')
<!-- BEGIN: Page Vendor JS-->
<script src="{{asset('app-assets/vendors/js/charts/apexcharts.min.js')}}"></script>
<!-- END: Page Vendor JS-->

<!-- BEGIN: Page JS-->
    <script>

        var $primary = '#7367F0';
        var $success = '#28C76F';
        var $danger = '#EA5455';
        var $warning = '#FF9F43';
        var $info = '#00cfe8';
        var $primary_light = '#A9A2F6';
        var $danger_light = '#f29292';
        var $success_light = '#55DD92';
        var $warning_light = '#ffc085';
        var $info_light = '#1fcadb';
        var $strok_color = '#b9c3cd';
        var $label_color = '#e7e7e7';
        var $white = '#fff';

        var revenueChartoptions = {
            chart: {
                height: 270,
                toolbar: {show: false},
                type: 'line',
            },
            stroke: {
                curve: 'smooth',
                dashArray: [0, 8],
                width: [4, 2],
            },
            grid: {
                borderColor: $label_color,
            },
            legend: {
                show: false,
            },
            colors: [$danger_light, $strok_color],

            fill: {
                type: 'gradient',
                gradient: {
                    shade: 'dark',
                    inverseColors: false,
                    gradientToColors: [$primary, $strok_color],
                    shadeIntensity: 1,
                    type: 'horizontal',
                    opacityFrom: 1,
                    opacityTo: 1,
                    stops: [0, 100, 100, 100]
                },
            },
            markers: {
                size: 0,
                hover: {
                    size: 5
                }
            },
            xaxis: {
                labels: {
                    style: {
                        colors: $strok_color,
                    }
                },
                axisTicks: {
                    show: false,
                },
                categories: ['1', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'],
                axisBorder: {
                    show: false,
                },
                tickPlacement: 'on',
            },
            yaxis: {
                tickAmount: 5,
                labels: {
                    style: {
                        color: $strok_color,
                    },
                    formatter: function (val) {
                        return val > 999 ? (val / 1000).toFixed(1) + 'k' : val;
                    }
                }
            },
            tooltip: {
                x: {show: false}
            },
            series: [{
                name: "Bu Ay",
                data: {{@$orders_this_daily}}
            },
                {
                    name: "Geçen Ay",
                    data: {{@$orders_last_daily}}
                }
            ],

        };

        var revenueChart = new ApexCharts(
            document.querySelector("#revenue-chart"),
            revenueChartoptions
        );

        revenueChart.render();
    </script>
@endsection
<script>
    function fallbackCopyTextToClipboard(text) {
        var textArea = document.createElement("textarea");
        textArea.value = text;

        // Avoid scrolling to bottom
        textArea.style.top = "0";
        textArea.style.left = "0";
        textArea.style.position = "fixed";

        document.body.appendChild(textArea);
        textArea.focus();
        textArea.select();

        try {
            var successful = document.execCommand('copy');
            var msg = successful ? 'successful' : 'unsuccessful';
            $('#copy_button').text('Kopyalandı');
        } catch (err) {
            console.error('Fallback: Oops, unable to copy', err);
        }

        document.body.removeChild(textArea);
    }
    function copyTextToClipboard(text) {
        if (!navigator.clipboard) {
            fallbackCopyTextToClipboard(text);
            return;
        }
        navigator.clipboard.writeText(text).then(function() {
            console.log('Async: Copying to clipboard was successful!');
        }, function(err) {
            console.error('Async: Could not copy text: ', err);
        });
    }

    var copyBobBtn = document.querySelector('.js-copy-bob-btn'),
        copyJaneBtn = document.querySelector('.js-copy-jane-btn');

    copyBobBtn.addEventListener('click', function(event) {
        copyTextToClipboard('Bob');
    });


    copyJaneBtn.addEventListener('click', function(event) {
        copyTextToClipboard('Jane');
    });



</script>