@extends('admin.layout.app')

@section('title', 'Dashboard')

@section('header')
<div class="page-header-content d-lg-flex">
    <div class="d-flex">
        <h4 class="page-title mb-0">
            Home - <span class="fw-normal">Dashboard</span>
        </h4>
        <a href="#page_header" class="btn btn-light align-self-center collapsed d-lg-none border-transparent rounded-pill p-0 ms-auto" data-bs-toggle="collapse">
            <i class="ph-caret-down collapsible-indicator ph-sm m-1"></i>
        </a>
    </div>
</div>
@endsection

@section('content')
@php
    $hasPermission = false;
    $permissions = [
        'dashboard-uniqueCodesWidget',
        'dashboard-participantsWidget',
        'dashboard-prizesWidget',
        'dashboard-winnersWidget',
        'dashboard-uniqueCodesStats',
        'dashboard-participantsStats',
        'dashboard-participantsChart'
    ];

    foreach ($permissions as $permission) {
        if (auth()->user()->can($permission)) {
            $hasPermission = true;
            break;
        }
    }
@endphp

@if (!$hasPermission)
<div class="row">
    <div class="col-12">
        <div class="alert alert-info alert-icon-start alert-dismissible fade show">
            <span class="alert-icon bg-info text-white">
                <i class="ph-info"></i>
            </span>
            <span class="fw-semibold">Access Denied!</span> You currently do not have permission to view any of the dashboard widgets. Please contact the system administrator to request the necessary permissions.
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    </div>
</div>
@endif

<div class="row">
    <!-- Unique Codes Widget -->
    @can('dashboard-uniqueCodesWidget')
    <div class="col-sm-6 col-xl-3">
        <div class="card">
            <div class="card-body">
                <div class="d-flex">
                    <h4 class="mb-0">{{ number_format($coupons) }}</h4>
                </div>
                <div>
                    Total Unique Codes
                    <div class="text-muted fs-sm">
                        {{ number_format($usedCoupons) }} Used / {{ number_format($couponStats['bogusCoupons']) }} Duplicate Entry
                    </div>
                </div>
            </div>
            <div class="rounded-bottom overflow-hidden" id="sparklines_basic"><svg width="376.25" height="50"><g transform="translate(0,0)" width="376.25"><defs><clipPath id="load-clip-sparklines_basic"><rect class="load-clip" width="376.25" height="50"></rect></clipPath></defs><g clip-path="url(#load-clip-sparklines_basic)"><path d="M-14.471153846153847,6.333333333333332L-12.059294871794872,6.999999999999998C-9.647435897435898,7.666666666666665,-4.823717948717949,8.999999999999998,0,9.888888888888888C4.823717948717949,10.777777777777775,9.647435897435898,11.22222222222222,14.471153846153847,12.333333333333332C19.294871794871796,13.444444444444443,24.118589743589745,15.22222222222222,28.942307692307693,18.11111111111111C33.76602564102564,21,38.58974358974359,25,43.41346153846154,24.111111111111107C48.23717948717949,23.22222222222222,53.06089743589744,17.444444444444443,57.88461538461539,18.333333333333332C62.708333333333336,19.22222222222222,67.53205128205128,26.77777777777778,72.35576923076923,26.333333333333332C77.17948717948718,25.88888888888889,82.00320512820514,17.444444444444443,86.82692307692308,18.11111111111111C91.65064102564102,18.77777777777778,96.47435897435896,28.555555555555557,101.2980769230769,28.111111111111114C106.12179487179486,27.666666666666668,110.94551282051282,17,115.76923076923077,14.555555555555555C120.59294871794872,12.11111111111111,125.41666666666666,17.88888888888889,130.2403846153846,17.444444444444446C135.06410256410254,17,139.8878205128205,10.33333333333333,144.71153846153845,7.666666666666663C149.5352564102564,4.9999999999999964,154.35897435897436,6.333333333333331,159.18269230769232,10.555555555555554C164.00641025641025,14.777777777777777,168.8301282051282,21.888888888888886,173.65384615384616,26.333333333333332C178.4775641025641,30.77777777777778,183.30128205128204,32.55555555555556,188.125,27.666666666666664C192.94871794871793,22.77777777777778,197.77243589743586,11.222222222222223,202.5961538461538,9.444444444444446C207.41987179487177,7.666666666666668,212.24358974358972,15.666666666666668,217.06730769230768,16.77777777777778C221.89102564102564,17.88888888888889,226.7147435897436,12.11111111111111,231.53846153846155,9.888888888888888C236.3621794871795,7.666666666666665,241.18589743589743,8.999999999999998,246.00961538461536,10.111111111111109C250.83333333333331,11.22222222222222,255.65705128205127,12.111111111111107,260.4807692307692,11.444444444444441C265.3044871794871,10.777777777777775,270.1282051282051,8.555555555555554,274.95192307692304,10.999999999999998C279.775641025641,13.444444444444443,284.59935897435895,20.555555555555554,289.4230769230769,25.666666666666664C294.24679487179486,30.777777777777775,299.0705128205128,33.888888888888886,303.8942307692307,30.555555555555554C308.71794871794873,27.22222222222222,313.54166666666663,17.444444444444443,318.3653846153846,12.555555555555554C323.18910256410254,7.666666666666666,328.0128205128205,7.666666666666666,332.83653846153845,6.5555555555555545C337.6602564102564,5.444444444444443,342.48397435897436,3.2222222222222197,347.3076923076923,2.777777777777775C352.1314102564103,2.333333333333331,356.95512820512823,3.666666666666665,361.77884615384613,7.666666666666665C366.6025641025641,11.666666666666664,371.42628205128204,18.333333333333332,376.25,20.111111111111107C381.0737179487179,21.888888888888886,385.8974358974359,18.77777777777778,390.7211538461538,16.555555555555554C395.54487179487177,14.333333333333332,400.3685897435897,12.999999999999998,402.7804487179487,12.333333333333332L405.1923076923077,11.666666666666664L405.1923076923077,50L402.7804487179487,49.999999999999986C400.3685897435897,49.99999999999999,395.54487179487177,49.99999999999999,390.7211538461538,49.999999999999986C385.8974358974359,49.99999999999999,381.0737179487179,49.99999999999999,376.25,49.999999999999986C371.42628205128204,49.99999999999999,366.6025641025641,49.99999999999999,361.7788461538462,49.999999999999986C356.95512820512823,49.99999999999999,352.1314102564103,49.99999999999999,347.3076923076923,49.999999999999986C342.48397435897436,49.99999999999999,337.6602564102564,49.99999999999999,332.83653846153845,49.999999999999986C328.0128205128205,49.99999999999999,323.18910256410254,49.99999999999999,318.3653846153846,49.999999999999986C313.54166666666663,49.99999999999999,308.71794871794873,49.99999999999999,303.8942307692308,49.999999999999986C299.0705128205128,49.99999999999999,294.24679487179486,49.99999999999999,289.4230769230769,49.999999999999986C284.59935897435895,49.99999999999999,279.775641025641,49.99999999999999,274.95192307692304,49.999999999999986C270.1282051282051,49.99999999999999,265.3044871794871,49.99999999999999,260.48076923076917,49.999999999999986C255.65705128205127,49.99999999999999,250.83333333333331,49.99999999999999,246.00961538461536,49.999999999999986C241.18589743589743,49.99999999999999,236.3621794871795,49.99999999999999,231.53846153846155,49.999999999999986C226.7147435897436,49.99999999999999,221.89102564102564,49.99999999999999,217.06730769230768,49.999999999999986C212.24358974358972,49.99999999999999,207.41987179487177,49.99999999999999,202.5961538461538,49.999999999999986C197.77243589743586,49.99999999999999,192.94871794871793,49.99999999999999,188.125,49.999999999999986C183.30128205128204,49.99999999999999,178.4775641025641,49.99999999999999,173.65384615384613,49.999999999999986C168.8301282051282,49.99999999999999,164.00641025641025,49.99999999999999,159.1826923076923,49.999999999999986C154.35897435897436,49.99999999999999,149.5352564102564,49.99999999999999,144.71153846153845,49.999999999999986C139.8878205128205,49.99999999999999,135.06410256410254,49.99999999999999,130.2403846153846,49.999999999999986C125.41666666666666,49.99999999999999,120.59294871794872,49.99999999999999,115.76923076923077,49.999999999999986C110.94551282051282,49.99999999999999,106.12179487179486,49.99999999999999,101.2980769230769,49.999999999999986C96.47435897435896,49.99999999999999,91.65064102564102,49.99999999999999,86.82692307692308,49.999999999999986C82.00320512820514,49.99999999999999,77.17948717948718,49.99999999999999,72.35576923076923,49.999999999999986C67.53205128205128,49.99999999999999,62.708333333333336,49.99999999999999,57.88461538461539,49.999999999999986C53.06089743589744,49.99999999999999,48.23717948717949,49.99999999999999,43.41346153846154,49.999999999999986C38.58974358974359,49.99999999999999,33.76602564102564,49.99999999999999,28.942307692307693,49.999999999999986C24.118589743589745,49.99999999999999,19.294871794871796,49.99999999999999,14.471153846153847,49.999999999999986C9.647435897435898,49.99999999999999,4.823717948717949,49.99999999999999,0,49.999999999999986C-4.823717948717949,49.99999999999999,-9.647435897435898,49.99999999999999,-12.059294871794872,49.999999999999986L-14.471153846153847,50Z" class="d3-area" style="fill: rgb(102, 187, 106); opacity: 1;" transform="translate(-14.47115421295166,0)"></path></g></g></svg></div>
        </div>
    </div>
    @endcan

    <!-- Participants Widget -->
    @can('dashboard-participantsWidget')
    <div class="col-sm-6 col-xl-3">
        <div class="card">
            <div class="card-body">
                <div class="d-flex">
                    <h4 class="mb-0">{{ number_format($participants) }}</h4>
                </div>
                <div>
                    Total Participants
                    <div class="text-muted fs-sm">{{ number_format($participantStats['invalidParticipants']) }} Duplicate Entry</div>
                </div>
            </div>
            <div class="rounded-bottom overflow-hidden" id="sparklines_basic"><svg width="376.25" height="50"><g transform="translate(0,0)" width="376.25"><defs><clipPath id="load-clip-sparklines_basic"><rect class="load-clip" width="376.25" height="50"></rect></clipPath></defs><g clip-path="url(#load-clip-sparklines_basic)"><path d="M-14.471153846153847,6.333333333333332L-12.059294871794872,6.999999999999998C-9.647435897435898,7.666666666666665,-4.823717948717949,8.999999999999998,0,9.888888888888888C4.823717948717949,10.777777777777775,9.647435897435898,11.22222222222222,14.471153846153847,12.333333333333332C19.294871794871796,13.444444444444443,24.118589743589745,15.22222222222222,28.942307692307693,18.11111111111111C33.76602564102564,21,38.58974358974359,25,43.41346153846154,24.111111111111107C48.23717948717949,23.22222222222222,53.06089743589744,17.444444444444443,57.88461538461539,18.333333333333332C62.708333333333336,19.22222222222222,67.53205128205128,26.77777777777778,72.35576923076923,26.333333333333332C77.17948717948718,25.88888888888889,82.00320512820514,17.444444444444443,86.82692307692308,18.11111111111111C91.65064102564102,18.77777777777778,96.47435897435896,28.555555555555557,101.2980769230769,28.111111111111114C106.12179487179486,27.666666666666668,110.94551282051282,17,115.76923076923077,14.555555555555555C120.59294871794872,12.11111111111111,125.41666666666666,17.88888888888889,130.2403846153846,17.444444444444446C135.06410256410254,17,139.8878205128205,10.33333333333333,144.71153846153845,7.666666666666663C149.5352564102564,4.9999999999999964,154.35897435897436,6.333333333333331,159.18269230769232,10.555555555555554C164.00641025641025,14.777777777777777,168.8301282051282,21.888888888888886,173.65384615384616,26.333333333333332C178.4775641025641,30.77777777777778,183.30128205128204,32.55555555555556,188.125,27.666666666666664C192.94871794871793,22.77777777777778,197.77243589743586,11.222222222222223,202.5961538461538,9.444444444444446C207.41987179487177,7.666666666666668,212.24358974358972,15.666666666666668,217.06730769230768,16.77777777777778C221.89102564102564,17.88888888888889,226.7147435897436,12.11111111111111,231.53846153846155,9.888888888888888C236.3621794871795,7.666666666666665,241.18589743589743,8.999999999999998,246.00961538461536,10.111111111111109C250.83333333333331,11.22222222222222,255.65705128205127,12.111111111111107,260.4807692307692,11.444444444444441C265.3044871794871,10.777777777777775,270.1282051282051,8.555555555555554,274.95192307692304,10.999999999999998C279.775641025641,13.444444444444443,284.59935897435895,20.555555555555554,289.4230769230769,25.666666666666664C294.24679487179486,30.777777777777775,299.0705128205128,33.888888888888886,303.8942307692307,30.555555555555554C308.71794871794873,27.22222222222222,313.54166666666663,17.444444444444443,318.3653846153846,12.555555555555554C323.18910256410254,7.666666666666666,328.0128205128205,7.666666666666666,332.83653846153845,6.5555555555555545C337.6602564102564,5.444444444444443,342.48397435897436,3.2222222222222197,347.3076923076923,2.777777777777775C352.1314102564103,2.333333333333331,356.95512820512823,3.666666666666665,361.77884615384613,7.666666666666665C366.6025641025641,11.666666666666664,371.42628205128204,18.333333333333332,376.25,20.111111111111107C381.0737179487179,21.888888888888886,385.8974358974359,18.77777777777778,390.7211538461538,16.555555555555554C395.54487179487177,14.333333333333332,400.3685897435897,12.999999999999998,402.7804487179487,12.333333333333332L405.1923076923077,11.666666666666664L405.1923076923077,50L402.7804487179487,49.999999999999986C400.3685897435897,49.99999999999999,395.54487179487177,49.99999999999999,390.7211538461538,49.999999999999986C385.8974358974359,49.99999999999999,381.0737179487179,49.99999999999999,376.25,49.999999999999986C371.42628205128204,49.99999999999999,366.6025641025641,49.99999999999999,361.7788461538462,49.999999999999986C356.95512820512823,49.99999999999999,352.1314102564103,49.99999999999999,347.3076923076923,49.999999999999986C342.48397435897436,49.99999999999999,337.6602564102564,49.99999999999999,332.83653846153845,49.999999999999986C328.0128205128205,49.99999999999999,323.18910256410254,49.99999999999999,318.3653846153846,49.999999999999986C313.54166666666663,49.99999999999999,308.71794871794873,49.99999999999999,303.8942307692308,49.999999999999986C299.0705128205128,49.99999999999999,294.24679487179486,49.99999999999999,289.4230769230769,49.999999999999986C284.59935897435895,49.99999999999999,279.775641025641,49.99999999999999,274.95192307692304,49.999999999999986C270.1282051282051,49.99999999999999,265.3044871794871,49.99999999999999,260.48076923076917,49.999999999999986C255.65705128205127,49.99999999999999,250.83333333333331,49.99999999999999,246.00961538461536,49.999999999999986C241.18589743589743,49.99999999999999,236.3621794871795,49.99999999999999,231.53846153846155,49.999999999999986C226.7147435897436,49.99999999999999,221.89102564102564,49.99999999999999,217.06730769230768,49.999999999999986C212.24358974358972,49.99999999999999,207.41987179487177,49.99999999999999,202.5961538461538,49.999999999999986C197.77243589743586,49.99999999999999,192.94871794871793,49.99999999999999,188.125,49.999999999999986C183.30128205128204,49.99999999999999,178.4775641025641,49.99999999999999,173.65384615384613,49.999999999999986C168.8301282051282,49.99999999999999,164.00641025641025,49.99999999999999,159.1826923076923,49.999999999999986C154.35897435897436,49.99999999999999,149.5352564102564,49.99999999999999,144.71153846153845,49.999999999999986C139.8878205128205,49.99999999999999,135.06410256410254,49.99999999999999,130.2403846153846,49.999999999999986C125.41666666666666,49.99999999999999,120.59294871794872,49.99999999999999,115.76923076923077,49.999999999999986C110.94551282051282,49.99999999999999,106.12179487179486,49.99999999999999,101.2980769230769,49.999999999999986C96.47435897435896,49.99999999999999,91.65064102564102,49.99999999999999,86.82692307692308,49.999999999999986C82.00320512820514,49.99999999999999,77.17948717948718,49.99999999999999,72.35576923076923,49.999999999999986C67.53205128205128,49.99999999999999,62.708333333333336,49.99999999999999,57.88461538461539,49.999999999999986C53.06089743589744,49.99999999999999,48.23717948717949,49.99999999999999,43.41346153846154,49.999999999999986C38.58974358974359,49.99999999999999,33.76602564102564,49.99999999999999,28.942307692307693,49.999999999999986C24.118589743589745,49.99999999999999,19.294871794871796,49.99999999999999,14.471153846153847,49.999999999999986C9.647435897435898,49.99999999999999,4.823717948717949,49.99999999999999,0,49.999999999999986C-4.823717948717949,49.99999999999999,-9.647435897435898,49.99999999999999,-12.059294871794872,49.999999999999986L-14.471153846153847,50Z" class="d3-area" style="fill: rgb(25, 219, 219); opacity: 1;" transform="translate(-14.47115421295166,0)"></path></g></g></svg></div>
        </div>
    </div>
    @endcan

    <!-- Prizes Widget -->
    @can('dashboard-prizesWidget')
    <div class="col-sm-6 col-xl-3">
        <div class="card">
            <div class="card-body">
                <div class="d-flex">
                    <h4 class="mb-0">{{ number_format($prizes) }}</h4>
                </div>
                <div>
                    Total Prize
                    <div class="text-muted fs-sm">{{ number_format($prizeQuantity+$winners)}} Items</div>
                </div>
            </div>
            <div class="rounded-bottom overflow-hidden" id="sparklines_basic"><svg width="376.25" height="50"><g transform="translate(0,0)" width="376.25"><defs><clipPath id="load-clip-sparklines_basic"><rect class="load-clip" width="376.25" height="50"></rect></clipPath></defs><g clip-path="url(#load-clip-sparklines_basic)"><path d="M-14.471153846153847,6.333333333333332L-12.059294871794872,6.999999999999998C-9.647435897435898,7.666666666666665,-4.823717948717949,8.999999999999998,0,9.888888888888888C4.823717948717949,10.777777777777775,9.647435897435898,11.22222222222222,14.471153846153847,12.333333333333332C19.294871794871796,13.444444444444443,24.118589743589745,15.22222222222222,28.942307692307693,18.11111111111111C33.76602564102564,21,38.58974358974359,25,43.41346153846154,24.111111111111107C48.23717948717949,23.22222222222222,53.06089743589744,17.444444444444443,57.88461538461539,18.333333333333332C62.708333333333336,19.22222222222222,67.53205128205128,26.77777777777778,72.35576923076923,26.333333333333332C77.17948717948718,25.88888888888889,82.00320512820514,17.444444444444443,86.82692307692308,18.11111111111111C91.65064102564102,18.77777777777778,96.47435897435896,28.555555555555557,101.2980769230769,28.111111111111114C106.12179487179486,27.666666666666668,110.94551282051282,17,115.76923076923077,14.555555555555555C120.59294871794872,12.11111111111111,125.41666666666666,17.88888888888889,130.2403846153846,17.444444444444446C135.06410256410254,17,139.8878205128205,10.33333333333333,144.71153846153845,7.666666666666663C149.5352564102564,4.9999999999999964,154.35897435897436,6.333333333333331,159.18269230769232,10.555555555555554C164.00641025641025,14.777777777777777,168.8301282051282,21.888888888888886,173.65384615384616,26.333333333333332C178.4775641025641,30.77777777777778,183.30128205128204,32.55555555555556,188.125,27.666666666666664C192.94871794871793,22.77777777777778,197.77243589743586,11.222222222222223,202.5961538461538,9.444444444444446C207.41987179487177,7.666666666666668,212.24358974358972,15.666666666666668,217.06730769230768,16.77777777777778C221.89102564102564,17.88888888888889,226.7147435897436,12.11111111111111,231.53846153846155,9.888888888888888C236.3621794871795,7.666666666666665,241.18589743589743,8.999999999999998,246.00961538461536,10.111111111111109C250.83333333333331,11.22222222222222,255.65705128205127,12.111111111111107,260.4807692307692,11.444444444444441C265.3044871794871,10.777777777777775,270.1282051282051,8.555555555555554,274.95192307692304,10.999999999999998C279.775641025641,13.444444444444443,284.59935897435895,20.555555555555554,289.4230769230769,25.666666666666664C294.24679487179486,30.777777777777775,299.0705128205128,33.888888888888886,303.8942307692307,30.555555555555554C308.71794871794873,27.22222222222222,313.54166666666663,17.444444444444443,318.3653846153846,12.555555555555554C323.18910256410254,7.666666666666666,328.0128205128205,7.666666666666666,332.83653846153845,6.5555555555555545C337.6602564102564,5.444444444444443,342.48397435897436,3.2222222222222197,347.3076923076923,2.777777777777775C352.1314102564103,2.333333333333331,356.95512820512823,3.666666666666665,361.77884615384613,7.666666666666665C366.6025641025641,11.666666666666664,371.42628205128204,18.333333333333332,376.25,20.111111111111107C381.0737179487179,21.888888888888886,385.8974358974359,18.77777777777778,390.7211538461538,16.555555555555554C395.54487179487177,14.333333333333332,400.3685897435897,12.999999999999998,402.7804487179487,12.333333333333332L405.1923076923077,11.666666666666664L405.1923076923077,50L402.7804487179487,49.999999999999986C400.3685897435897,49.99999999999999,395.54487179487177,49.99999999999999,390.7211538461538,49.999999999999986C385.8974358974359,49.99999999999999,381.0737179487179,49.99999999999999,376.25,49.999999999999986C371.42628205128204,49.99999999999999,366.6025641025641,49.99999999999999,361.7788461538462,49.999999999999986C356.95512820512823,49.99999999999999,352.1314102564103,49.99999999999999,347.3076923076923,49.999999999999986C342.48397435897436,49.99999999999999,337.6602564102564,49.99999999999999,332.83653846153845,49.999999999999986C328.0128205128205,49.99999999999999,323.18910256410254,49.99999999999999,318.3653846153846,49.999999999999986C313.54166666666663,49.99999999999999,308.71794871794873,49.99999999999999,303.8942307692308,49.999999999999986C299.0705128205128,49.99999999999999,294.24679487179486,49.99999999999999,289.4230769230769,49.999999999999986C284.59935897435895,49.99999999999999,279.775641025641,49.99999999999999,274.95192307692304,49.999999999999986C270.1282051282051,49.99999999999999,265.3044871794871,49.99999999999999,260.48076923076917,49.999999999999986C255.65705128205127,49.99999999999999,250.83333333333331,49.99999999999999,246.00961538461536,49.999999999999986C241.18589743589743,49.99999999999999,236.3621794871795,49.99999999999999,231.53846153846155,49.999999999999986C226.7147435897436,49.99999999999999,221.89102564102564,49.99999999999999,217.06730769230768,49.999999999999986C212.24358974358972,49.99999999999999,207.41987179487177,49.99999999999999,202.5961538461538,49.999999999999986C197.77243589743586,49.99999999999999,192.94871794871793,49.99999999999999,188.125,49.999999999999986C183.30128205128204,49.99999999999999,178.4775641025641,49.99999999999999,173.65384615384613,49.999999999999986C168.8301282051282,49.99999999999999,164.00641025641025,49.99999999999999,159.1826923076923,49.999999999999986C154.35897435897436,49.99999999999999,149.5352564102564,49.99999999999999,144.71153846153845,49.999999999999986C139.8878205128205,49.99999999999999,135.06410256410254,49.99999999999999,130.2403846153846,49.999999999999986C125.41666666666666,49.99999999999999,120.59294871794872,49.99999999999999,115.76923076923077,49.999999999999986C110.94551282051282,49.99999999999999,106.12179487179486,49.99999999999999,101.2980769230769,49.999999999999986C96.47435897435896,49.99999999999999,91.65064102564102,49.99999999999999,86.82692307692308,49.999999999999986C82.00320512820514,49.99999999999999,77.17948717948718,49.99999999999999,72.35576923076923,49.999999999999986C67.53205128205128,49.99999999999999,62.708333333333336,49.99999999999999,57.88461538461539,49.999999999999986C53.06089743589744,49.99999999999999,48.23717948717949,49.99999999999999,43.41346153846154,49.999999999999986C38.58974358974359,49.99999999999999,33.76602564102564,49.99999999999999,28.942307692307693,49.999999999999986C24.118589743589745,49.99999999999999,19.294871794871796,49.99999999999999,14.471153846153847,49.999999999999986C9.647435897435898,49.99999999999999,4.823717948717949,49.99999999999999,0,49.999999999999986C-4.823717948717949,49.99999999999999,-9.647435897435898,49.99999999999999,-12.059294871794872,49.999999999999986L-14.471153846153847,50Z" class="d3-area" style="fill: rgb(214, 53, 53); opacity: 1;" transform="translate(-14.47115421295166,0)"></path></g></g></svg></div>
        </div>
    </div>
    @endcan

    <!-- Winners Widget -->
    @can('dashboard-winnersWidget')
    <div class="col-sm-6 col-xl-3">
        <div class="card">
            <div class="card-body">
                <div class="d-flex">
                    <h4 class="mb-0">{{ number_format($winners) }}</h4>
                </div>
                <div>
                    Total Winners
                    <div class="text-muted fs-sm">{{ number_format($prizeQuantity)}} Remaining Prize</div>
                </div>
            </div>
            <div class="rounded-bottom overflow-hidden" id="sparklines_basic"><svg width="376.25" height="50"><g transform="translate(0,0)" width="376.25"><defs><clipPath id="load-clip-sparklines_basic"><rect class="load-clip" width="376.25" height="50"></rect></clipPath></defs><g clip-path="url(#load-clip-sparklines_basic)"><path d="M-14.471153846153847,6.333333333333332L-12.059294871794872,6.999999999999998C-9.647435897435898,7.666666666666665,-4.823717948717949,8.999999999999998,0,9.888888888888888C4.823717948717949,10.777777777777775,9.647435897435898,11.22222222222222,14.471153846153847,12.333333333333332C19.294871794871796,13.444444444444443,24.118589743589745,15.22222222222222,28.942307692307693,18.11111111111111C33.76602564102564,21,38.58974358974359,25,43.41346153846154,24.111111111111107C48.23717948717949,23.22222222222222,53.06089743589744,17.444444444444443,57.88461538461539,18.333333333333332C62.708333333333336,19.22222222222222,67.53205128205128,26.77777777777778,72.35576923076923,26.333333333333332C77.17948717948718,25.88888888888889,82.00320512820514,17.444444444444443,86.82692307692308,18.11111111111111C91.65064102564102,18.77777777777778,96.47435897435896,28.555555555555557,101.2980769230769,28.111111111111114C106.12179487179486,27.666666666666668,110.94551282051282,17,115.76923076923077,14.555555555555555C120.59294871794872,12.11111111111111,125.41666666666666,17.88888888888889,130.2403846153846,17.444444444444446C135.06410256410254,17,139.8878205128205,10.33333333333333,144.71153846153845,7.666666666666663C149.5352564102564,4.9999999999999964,154.35897435897436,6.333333333333331,159.18269230769232,10.555555555555554C164.00641025641025,14.777777777777777,168.8301282051282,21.888888888888886,173.65384615384616,26.333333333333332C178.4775641025641,30.77777777777778,183.30128205128204,32.55555555555556,188.125,27.666666666666664C192.94871794871793,22.77777777777778,197.77243589743586,11.222222222222223,202.5961538461538,9.444444444444446C207.41987179487177,7.666666666666668,212.24358974358972,15.666666666666668,217.06730769230768,16.77777777777778C221.89102564102564,17.88888888888889,226.7147435897436,12.11111111111111,231.53846153846155,9.888888888888888C236.3621794871795,7.666666666666665,241.18589743589743,8.999999999999998,246.00961538461536,10.111111111111109C250.83333333333331,11.22222222222222,255.65705128205127,12.111111111111107,260.4807692307692,11.444444444444441C265.3044871794871,10.777777777777775,270.1282051282051,8.555555555555554,274.95192307692304,10.999999999999998C279.775641025641,13.444444444444443,284.59935897435895,20.555555555555554,289.4230769230769,25.666666666666664C294.24679487179486,30.777777777777775,299.0705128205128,33.888888888888886,303.8942307692307,30.555555555555554C308.71794871794873,27.22222222222222,313.54166666666663,17.444444444444443,318.3653846153846,12.555555555555554C323.18910256410254,7.666666666666666,328.0128205128205,7.666666666666666,332.83653846153845,6.5555555555555545C337.6602564102564,5.444444444444443,342.48397435897436,3.2222222222222197,347.3076923076923,2.777777777777775C352.1314102564103,2.333333333333331,356.95512820512823,3.666666666666665,361.77884615384613,7.666666666666665C366.6025641025641,11.666666666666664,371.42628205128204,18.333333333333332,376.25,20.111111111111107C381.0737179487179,21.888888888888886,385.8974358974359,18.77777777777778,390.7211538461538,16.555555555555554C395.54487179487177,14.333333333333332,400.3685897435897,12.999999999999998,402.7804487179487,12.333333333333332L405.1923076923077,11.666666666666664L405.1923076923077,50L402.7804487179487,49.999999999999986C400.3685897435897,49.99999999999999,395.54487179487177,49.99999999999999,390.7211538461538,49.999999999999986C385.8974358974359,49.99999999999999,381.0737179487179,49.99999999999999,376.25,49.999999999999986C371.42628205128204,49.99999999999999,366.6025641025641,49.99999999999999,361.7788461538462,49.999999999999986C356.95512820512823,49.99999999999999,352.1314102564103,49.99999999999999,347.3076923076923,49.999999999999986C342.48397435897436,49.99999999999999,337.6602564102564,49.99999999999999,332.83653846153845,49.999999999999986C328.0128205128205,49.99999999999999,323.18910256410254,49.99999999999999,318.3653846153846,49.999999999999986C313.54166666666663,49.99999999999999,308.71794871794873,49.99999999999999,303.8942307692308,49.999999999999986C299.0705128205128,49.99999999999999,294.24679487179486,49.99999999999999,289.4230769230769,49.999999999999986C284.59935897435895,49.99999999999999,279.775641025641,49.99999999999999,274.95192307692304,49.999999999999986C270.1282051282051,49.99999999999999,265.3044871794871,49.99999999999999,260.48076923076917,49.999999999999986C255.65705128205127,49.99999999999999,250.83333333333331,49.99999999999999,246.00961538461536,49.999999999999986C241.18589743589743,49.99999999999999,236.3621794871795,49.99999999999999,231.53846153846155,49.999999999999986C226.7147435897436,49.99999999999999,221.89102564102564,49.99999999999999,217.06730769230768,49.999999999999986C212.24358974358972,49.99999999999999,207.41987179487177,49.99999999999999,202.5961538461538,49.999999999999986C197.77243589743586,49.99999999999999,192.94871794871793,49.99999999999999,188.125,49.999999999999986C183.30128205128204,49.99999999999999,178.4775641025641,49.99999999999999,173.65384615384613,49.999999999999986C168.8301282051282,49.99999999999999,164.00641025641025,49.99999999999999,159.1826923076923,49.999999999999986C154.35897435897436,49.99999999999999,149.5352564102564,49.99999999999999,144.71153846153845,49.999999999999986C139.8878205128205,49.99999999999999,135.06410256410254,49.99999999999999,130.2403846153846,49.999999999999986C125.41666666666666,49.99999999999999,120.59294871794872,49.99999999999999,115.76923076923077,49.999999999999986C110.94551282051282,49.99999999999999,106.12179487179486,49.99999999999999,101.2980769230769,49.999999999999986C96.47435897435896,49.99999999999999,91.65064102564102,49.99999999999999,86.82692307692308,49.999999999999986C82.00320512820514,49.99999999999999,77.17948717948718,49.99999999999999,72.35576923076923,49.999999999999986C67.53205128205128,49.99999999999999,62.708333333333336,49.99999999999999,57.88461538461539,49.999999999999986C53.06089743589744,49.99999999999999,48.23717948717949,49.99999999999999,43.41346153846154,49.999999999999986C38.58974358974359,49.99999999999999,33.76602564102564,49.99999999999999,28.942307692307693,49.999999999999986C24.118589743589745,49.99999999999999,19.294871794871796,49.99999999999999,14.471153846153847,49.999999999999986C9.647435897435898,49.99999999999999,4.823717948717949,49.99999999999999,0,49.999999999999986C-4.823717948717949,49.99999999999999,-9.647435897435898,49.99999999999999,-12.059294871794872,49.999999999999986L-14.471153846153847,50Z" class="d3-area" style="fill: rgb(60, 82, 227); opacity: 1;" transform="translate(-14.47115421295166,0)"></path></g></g></svg></div>
        </div>
    </div>
    @endcan
</div>
<div class="row">
    @canany(['dashboard-uniqueCodesStats', 'dashboard-participantsStats'])
    <div class="col-md-12">
        <div class="card">
            <div class="card-body">
                <div class="row">
                    @can('dashboard-uniqueCodesStats')
                    <div class="col-md-6 text-center">
                        <h5 class="mb-0">Unique Code Overall Stats</h5>
                        <div class="chart-container">
                            <div class="chart has-fixed-height" id="couponStats1Chart"></div>
                        </div>
                    </div>
                    <div class="col-md-6 text-center">
                        <h5 class="mb-0">Unique Code Validity Stats</h5>
                        <div class="chart-container">
                            <div class="chart has-fixed-height" id="couponStats2Chart"></div>
                        </div>
                    </div>
                    @endcan
                    @can('dashboard-participantsStats')
                    <div class="col-md-6 text-center">
                        <h5 class="mb-0">Participants Validity Stats</h5>
                        <div class="chart-container">
                            <div class="chart has-fixed-height" id="participantStatsChart"></div>
                        </div>
                    </div>
                    <div class="col-md-6 text-center">
                        <h5 class="mb-0">Gender Wise Participants</h5>
                        <div class="chart-container">
                            <div class="chart has-fixed-height" id="genderWiseParticipantChart"></div>
                        </div>
                    </div>
                    @endcan
                </div>
            </div>
        </div>
    </div>
    @endcanany
    <!-- Participants Registration Chart -->
    @can('dashboard-participantsChart')
    <div class="col-md-12">
        <div class="card">
            <div class="card-header d-sm-flex align-items-sm-center py-sm-0">
                <h6 class="py-sm-3 mb-sm-0">Participants</h6>
                <div class="ms-sm-auto my-sm-auto">
                    <form method="GET" action="{{ url()->current() }}">
                        <select class="form-select wmin-200" name="month" onchange="this.form.submit()">
                            <option value="01" {{ $selectedMonth == 1 ? 'selected' : '' }}>January</option>
                            <option value="02" {{ $selectedMonth == 2 ? 'selected' : '' }}>February</option>
                            <option value="03" {{ $selectedMonth == 3 ? 'selected' : '' }}>March</option>
                            <option value="04" {{ $selectedMonth == 4 ? 'selected' : '' }}>April</option>
                            <option value="05" {{ $selectedMonth == 5 ? 'selected' : '' }}>May</option>
                            <option value="06" {{ $selectedMonth == 6 ? 'selected' : '' }}>June</option>
                            <option value="07" {{ $selectedMonth == 7 ? 'selected' : '' }}>July</option>
                            <option value="08" {{ $selectedMonth == 8 ? 'selected' : '' }}>August</option>
                            <option value="09" {{ $selectedMonth == 9 ? 'selected' : '' }}>September</option>
                            <option value="10" {{ $selectedMonth == 10 ? 'selected' : '' }}>October</option>
                            <option value="11" {{ $selectedMonth == 11 ? 'selected' : '' }}>November</option>
                            <option value="12" {{ $selectedMonth == 12 ? 'selected' : '' }}>December</option>
                        </select>
                    </form>
                </div>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="chart-container">
                            <div class="chart has-fixed-height" id="dateWiseChart"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endcan
    @can('dashboard-participantsCityWiseChart')
    <div class="col-md-12">
        <div class="card">
            <div class="card-header d-sm-flex align-items-sm-center py-sm-0">
                <h6 class="py-sm-3 mb-sm-0">City Wise Participants</h6>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="chart-container">
                            <div class="chart has-fixed-height" id="cityWiseChart"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endcan
</div>
@endsection

@section('script')
<script>
    function initEchartsDonutChart(elementId, chartData, legendData, seriesData, colorPalette, chartTitle) {
        var donutElement = document.getElementById(elementId);
        if (!donutElement) return;

        var donutChart = echarts.init(donutElement, null, { renderer: 'svg' });

        donutChart.setOption({
            color: colorPalette || [
                '#2ec7c9', '#b6a2de', '#5ab1ef',
                '#8d98b3', '#e5cf0d', '#97b552',
                '#07a2a4', '#9a7fd1', '#588dd5'
            ],
            textStyle: {
                fontFamily: 'var(--body-font-family)',
                color: 'var(--body-color)',
                fontSize: 14,
                lineHeight: 22,
                textBorderColor: 'transparent'
            },
            tooltip: {
                trigger: 'item',
                className: 'shadow-sm rounded',
                backgroundColor: 'var(--white)',
                borderColor: 'var(--gray-400)',
                padding: 5,
                textStyle: { color: '#000' },
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {
                orient: 'horizontal',
                top: 0,
                left: 'center',
                data: legendData,
                textStyle: { color: 'var(--body-color)' },
                itemStyle: { borderColor: 'transparent' },
                itemGap: 15 
            },
            series: [{
                name: chartTitle,
                type: 'pie',
                radius: ['35%', '50%'],
                center: ['50%', '50%'],
                itemStyle: { borderColor: 'var(--card-bg)' },
                label: {
                    show: true,
                    position: 'outside', // Move the labels to the side
                    formatter: '{b}: {c} ({d}%)', // Show the name, value, and percentage
                    color: 'var(--body-color)',
                    fontSize: 12,
                    fontFamily: 'var(--body-font-family)'
                },
                labelLine: {
                    show: true,
                    length: 10, // Increase the length of the label line
                    length2: 10 // Increase the second length to make the label more spaced out
                },
                data: seriesData
            }]
        });

        var triggerChartResize = function() {
            donutChart && donutChart.resize();
        };
        // On sidebar width change
        var sidebarToggle = document.querySelectorAll('.sidebar-control');
        if (sidebarToggle) {
            sidebarToggle.forEach(function(togglers) {
                togglers.addEventListener('click', triggerChartResize);
            });
        }
        // On window resize
        var resizeCharts;
        window.addEventListener('resize', function() {
            clearTimeout(resizeCharts);
            resizeCharts = setTimeout(function () {
                triggerChartResize();
            }, 200);
        });
    }

    document.addEventListener('DOMContentLoaded', function() {
        var couponStats = @json($couponStats);
        var participantsStats = @json($participantStats);
        var genderWiseParticipants = @json($genderWiseParticipants);

        // Define unique color palettes for each chart
        var couponColorPalette1 = ['#a569bd', '#FFC300'];
        var couponColorPalette2 = ['#3dc552', '#C70039'];
        var participantColorPalette = ['#3498db', '#f39c12'];
        var genderWiseParticipantColorPalette = ['#1E90FF', '#FF69B4'];

        // Initialize first chart for Total and Used with custom colors
        initEchartsDonutChart('couponStats1Chart', couponStats, 
            ['Total', 'Used'], 
            [
                { value: couponStats.totalCoupons, name: 'Total' },
                { value: couponStats.usedCoupons, name: 'Used' }
            ],
            couponColorPalette1,
            'Coupon Usage'
        );

        // Initialize second chart for Valid and Bogus with custom colors
        initEchartsDonutChart('couponStats2Chart', couponStats, 
            ['Valid', 'Duplicate'], 
            [
                { value: couponStats.validCoupons, name: 'Valid' },
                { value: couponStats.bogusCoupons, name: 'Duplicate' }
            ],
            couponColorPalette2,
            'Unique Code Validity'
        );

        // Initialize participants chart with custom colors
        initEchartsDonutChart('genderWiseParticipantChart', genderWiseParticipants, 
            ['Male', 'Female'], 
            [
                { value: genderWiseParticipants.male, name: 'Male' },
                { value: genderWiseParticipants.female, name: 'Female' }
            ],
            genderWiseParticipantColorPalette,
            'Gender Wise Participants'
        );

        // Initialize participants gender wise with custom colors
        initEchartsDonutChart('participantStatsChart', participantsStats, 
            ['Valid', 'Duplicate'], 
            [
                { value: participantsStats.validParticipants, name: 'Valid' },
                { value: participantsStats.invalidParticipants, name: 'Duplicate' }
            ],
            participantColorPalette,
            'Participants Validity'
        );
    });

    function initEchartsStackedBarChart(elementId, xData, maleData, femaleData, chartTitle) {
        var barElement = document.getElementById(elementId);
        if (!barElement) return;

        var barChart = echarts.init(barElement, null, { renderer: 'svg' });

        barChart.setOption({
            color: ['#3498db', '#e74c3c'], // Male = Blue, Female = Red
            textStyle: {
                fontFamily: 'var(--body-font-family)',
                color: 'var(--body-color)',
                fontSize: 14
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: { type: 'shadow' },
                className: 'shadow-sm rounded',
                backgroundColor: 'var(--white)',
                borderColor: 'var(--gray-400)',
                padding: 15,
                textStyle: { color: '#000' },
                formatter: function (params) {
                    let total = params
                        .filter(param => param.seriesName === 'Male' || param.seriesName === 'Female')
                        .reduce((sum, param) => sum + Number(param.value), 0);

                    let tooltipText = `<strong>${params[0].name}:</strong><br/>`;

                    params.forEach(param => {
                        tooltipText += `<strong style="color:${param.color}">${param.seriesName}:</strong> ${param.value} Participants<br/>`;
                    });

                    tooltipText += `<hr><strong>Total Participants:</strong> ${total}`;
                    return tooltipText;
                }
            },
            legend: {
                data: ['Male', 'Female'],
                textStyle: { color: 'var(--body-color)' },
                itemGap: 15 
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: xData,
                axisTick: { alignWithLabel: true },
                axisLine: { lineStyle: { color: 'var(--gray-400)' } },
                axisLabel: { 
                    color: 'var(--body-color)',
                    rotate: 45,
                    interval: 0
                }
            },
            yAxis: {
                type: 'value',
                axisLine: { lineStyle: { color: 'var(--gray-400)' } },
                splitLine: { lineStyle: { color: 'var(--gray-300)' } },
                axisLabel: { color: 'var(--body-color)' }
            },
            series: [
                {
                    name: 'Male',
                    type: 'bar',
                    stack: 'total',  // Stacked chart
                    data: maleData
                },
                {
                    name: 'Female',
                    type: 'bar',
                    stack: 'total',  // Stacked chart
                    data: femaleData
                }
            ]
        });

        // Responsive handling
        var triggerChartResize = function () {
            barChart && barChart.resize();
        };
        var resizeCharts;
        window.addEventListener('resize', function () {
            clearTimeout(resizeCharts);
            resizeCharts = setTimeout(triggerChartResize, 200);
        });
    }

    document.addEventListener('DOMContentLoaded', function () {
        var participantsMonthlyData = @json($participantsMonthlyData);

        var dates = participantsMonthlyData.map(item => item.date);
        var maleDateCounts = participantsMonthlyData.map(item => item.male_count);
        var femaleDateCounts = participantsMonthlyData.map(item => item.female_count);

        // Use stacked bar chart for date-wise data
        initEchartsStackedBarChart('dateWiseChart', dates, maleDateCounts, femaleDateCounts, 'Participants by Date');

        var cityWiseData = @json($participantsByCity);

        var cities = cityWiseData.map(item => item.city);
        var maleCounts = cityWiseData.map(item => item.male_count);
        var femaleCounts = cityWiseData.map(item => item.female_count);

        // Use stacked bar chart for city-wise data
        initEchartsStackedBarChart('cityWiseChart', cities, maleCounts, femaleCounts, 'City-wise Participants');
    });
</script>
@endsection