@extends('layouts.dashboard')

@section('content')

<div class="breadcrumbs">
    <div class="col-sm-4">
        <div class="page-header float-left">
            <div class="page-title">
                <h1>Dashboard</h1>
            </div>
        </div>
    </div>
    <div class="col-sm-8">
        <div class="page-header float-right">
            <div class="page-title">
                <ol class="breadcrumb text-right">
                    <li class="active">Dashboard</li>
                </ol>
            </div>
        </div>
    </div>
</div>

<div class="content mt-3">

    <div class="col-sm-6 col-lg-3">
        <h2>Dashboard</h2>
    </div>


    {{-- <div class="col-sm-6 col-lg-3">
        <div class="card text-white bg-flat-color-1">
            <div class="card-body pb-3">
                <p class="text-light">Total Services</p>
                <h4 class="mb-0">
                    <span class="count">{{ App\Models\MerchantSubscription::getSubscriptionCount() }}</span>
                </h4>
                <div class="pt-5 pb-1"></div>
            </div>

        </div>
    </div> --}}
    <!--/.col-->

{{--
    @php
        $subscriptions = App\Models\MerchantRequestBalance::where(['merchant_id'=>auth()->id()])->get();
    @endphp

    @foreach ($subscriptions as $subscription)
        <div class="col-sm-6 col-lg-3">
            <div class="card text-white bg-flat-color-{{ $loop->iteration + 1 }}">
                <div class="card-body pb-3">
                    <h4 class="mb-2">{{ isset($subscription->subscription)?$subscription->subscription->name: '-' }}</h4>
                    <p class="text-light">Total Request - <span class="count"> {{ App\Models\MerchantSubscription::getFixedSubscriptionCount($subscription->subscription_id)['total_quantity'] }}</span></p>
                    <p class="text-light">Total Used - <span class="count"> {{ App\Models\MerchantSubscription::getFixedSubscriptionCount($subscription->subscription_id)['used'] }}</span></p>
                    <p class="text-light">Total Pending - <span class="count">{{ App\Models\MerchantSubscription::getFixedSubscriptionCount($subscription->subscription_id)['pending'] }}</span>
                    </p>
                </div>
            </div>
        </div>

    @endforeach --}}

    <!--/.col-->

</div> <!-- .content -->
@if(auth()->user()->id == 12)
<div class="content">
    <div class="chartcontainerwrapper">
        <div class="card">
            <div class="card-header">
                <h3>AMS Chart</h3>
            </div>
            <div class="card-body">
                <form action="" class="merchnt-form">
                    <ul class="list-inline d-flex justify-content-end">
                        <li class="list-inline-item">
                            <div class="form-group mb-0">
                                <input type="date" class="form-control" value="date" name="fromdate" placeholder="From Date">
                            </div>
                        </li>
                        <li class="list-inline-item">
                            <p class="mb-0 mt-2">To</p>
                        </li>
                        <li class="list-inline-item">
                            <div class="form-group mb-0">
                                <input type="date"class="form-control"  value="date" name="fromdate" placeholder="To Date">
                            </div>
                        </li>
                        <li class="list-inline-item">
                            <div class="form-group mb-0">
                               <select class="form-control">
                                  <option value="m">Merchant</option>
                                  <option value="m1">Merchant 1</option>
                               </select>
                            </div>
                        </li>
                    </ul>
                </form>
            <div class="row">
                <div class="col-12">
                    <canvas id="sales-chart"></canvas>
                </div>
            </div>
            </div>
        </div>
    </div>
</div>
@endif

@endsection
@push('scripts')

<script>
var ctx = document.getElementById("sales-chart");
ctx.height = 150;

// Generate date labels for the range 1 Jan 2023 to 7 Jan 2023
//var labels = Array.from({ length: 7 }, (_, i) => `${i + 1} Jan 2023`);
var labels = ['1 Jan 2023','2 Jan 2023','3 Jan 2023','4 Jan 2023','5 Jan 2023','6 Jan 2023','7 Jan 2023']

//var labels = '{{ $dates }}';

var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: labels, // Dates in "1 Jan 2023" format
        datasets: [
            {
                label: "Fail",
                data: [10, 24, 15, 37, 45, 65], // Normalized to 0-100 scale
                backgroundColor: 'transparent',
                borderColor: 'rgba(220,53,69,0.75)',
                borderWidth: 3,
                pointStyle: 'circle',
                pointRadius: 5,
                pointBorderColor: 'transparent',
                pointBackgroundColor: 'rgba(220,53,69,0.75)',
            },
            {
                label: "Pass",
                data: [1, 30, 15, 37, 50, 79], // Normalized to 0-100 scale
                backgroundColor: 'transparent',
                borderColor: 'rgba(40,167,69,0.75)',
                borderWidth: 3,
                pointStyle: 'circle',
                pointRadius: 5,
                pointBorderColor: 'transparent',
                pointBackgroundColor: 'rgba(40,167,69,0.75)',
            }
        ]
    },
    options: {
        responsive: true,
        tooltips: {
            mode: 'index',
            titleFontSize: 12,
            titleFontColor: '#000',
            bodyFontColor: '#000',
            backgroundColor: '#fff',
            titleFontFamily: 'Montserrat',
            bodyFontFamily: 'Montserrat',
            cornerRadius: 3,
            intersect: false,
        },
        legend: {
            display: true,
            labels: {
                usePointStyle: true,
                fontFamily: 'Montserrat',
            },
        },
        scales: {
            xAxes: [{
                display: true,
                gridLines: {
                    display: false,
                    drawBorder: false
                },
                scaleLabel: {
                    display: true,
                    labelString: 'Date'
                }
            }],
            yAxes: [{
                display: true,
                ticks: {
                    min: 0,
                    max: 100, // Y-axis range for percentage
                    callback: function(value) {
                        return value + '%'; // Append % to y-axis labels
                    }
                },
                gridLines: {
                    display: true,
                    drawBorder: false
                },
                scaleLabel: {
                    display: true,
                    labelString: 'Percentage'
                }
            }]
        },
        title: {
            display: true,
            text: 'Merchant Graph'
        }
    }
});
</script>
@endpush