@section('title', __('adminWords.dashboard'))
@extends('layouts.superadmin')

@section('content')
    <!-- Container Start -->

    <!-- Page Title Start -->
    <div class="row">
        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
            <div class="page-title-wrapper">
                <div class="page-title-box">
                    <h4 class="page-title bold">{{ __('adminWords.dashboard') }}</h4>
                </div>
                <div class="breadcrumb-list">
                    <ul>
                        <li class="breadcrumb-link">
                            <a class="text-gradient" href="{{ url('/admin') }}">
                                <i class="fas fa-home mr-2"></i>{{ __('adminWords.dashboard') }}
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- Dashboard Start -->
    <div class="d-flex row">
        <div class="col-md-6">
            <!-- Start Card-->
            <div class="card rounded-5 border-0">
                {{-- <a href="{{ url('users') }}" target="_blank"> --}}
                <div class="card-body d-flex align-items-center">
                    <div class="icon-info">
                        <i class="bi bi-people text-gradient" style="font-size: 4rem"></i>
                    </div>
                    <div class="icon-info-text">
                        <h5 class="ad-title">{{ __('adminWords.users') }}</h5>
                        <h4 class="ad-card-title">{{ $countUser }}</h4>
                    </div>
                </div>
                {{-- </a> --}}
            </div>
        </div>
        <!-- Start Card-->
        <div class="col-md-6">
            <div class="card rounded-5 border-0">
                {{-- <a href="{{ url('audio') }}" target="_blank"> --}}
                <div class="card-body d-flex align-items-center">
                    <div class="icon-info">
                        <i class="bi bi-music-note-beamed text-gradient" style="font-size: 4rem"></i>
                    </div>
                    <div class="icon-info-text">
                        <h5 class="ad-title">
                            {{-- {{ __('adminWords.song') }} --}}
                            Fichiers audio
                        </h5>
                        <h4 class="ad-card-title">{{ $countAudio }}</h4>
                    </div>
                </div>
                {{-- </a> --}}
            </div>
        </div>
    </div>

    <div class="dash-graph-wrapper">
        <div class="row">
            <div class="col-xl-12 col-lg-12 col-md-12">
                <div class="card rounded-5 border-0 chart-card">
                    <div class="card-header rounded-top-5">
                        <h4 class="has-btn">
                            {{ __('adminWords.monthly_user') . ' ' . date('Y') }}
                        </h4>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-xl-12 col-lg-12 col-md-12">
                                <div class="chart-holder">
                                    <div id="chartG"></div>
                                    <input type="hidden" id="userMonthCount" value="{{ json_encode($userMonthCount) }}"
                                        data-label="{{ __('adminWords.monthly_user') . date('Y') }}">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>


    @if (isset($settings['latest_subs']) && $settings['latest_subs'] == 1)
        <!-- Latest Subscription -->
        <div class="row">
            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                <div class="card chart-card">
                    <div class="card-header">
                        <h4 class="has-btn">{{ __('adminWords.latest_subs') }}
                            <span>
                                <a href="{{ url('subscription') }}" class="effect-btn btn btn-primary sm-btn"
                                    target="_blank">{{ __('adminWords.all') . ' ' . __('adminWords.subscriptions') }}</a>
                            </span>
                        </h4>
                    </div>
                    <div class="card-body pb-4">
                        <div class="chart-holder">
                            <div class="table-responsive">
                                <table class="table align-middle table-hover table-bordered mb-0">
                                    <thead class="table-light">
                                        <tr>
                                            <th scope="col">#</th>
                                            <th scope="col">{{ __('adminWords.txn_id') }}</th>
                                            <th scope="col">{{ __('adminWords.customer_name') }}</th>
                                            <th scope="col">{{ __('adminWords.quantity') }}</th>
                                            <th scope="col">{{ __('adminWords.payment_method') }}</th>
                                            <th scope="col">{{ __('adminWords.total_price') }}</th>
                                            <th scope="col">{{ __('adminWords.txn_date') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @if (sizeof($recent_subscription) > 0)
                                            @foreach ($recent_subscription as $index => $subscription)
                                                @php
                                                    $getPlan = select([
                                                        'column' => 'plan_name',
                                                        'table' => 'plans',
                                                        'where' => ['id' => $subscription->plan_id],
                                                    ]);
                                                    $subs = json_decode($subscription->payment_data)[0];
                                                    $arr = [];
                                                    if (strpos($subs->payment_gateway, '_') !== false) {
                                                        $arr = explode('_', $subs->payment_gateway);
                                                    }
                                                @endphp
                                                <tr>
                                                    <td>{{ $index + 1 }}</td>
                                                    <td>
                                                        <a href="{{ url('user/invoice/' . $subscription->id . '/' . $subs->order_id . '/1') }}"
                                                            target="_blank" class="text-decoration-none">
                                                            {{ $subs->order_id }}
                                                        </a>
                                                    </td>
                                                    <td>{{ $subs->user_name }}</td>
                                                    <td>1</td>
                                                    <td>
                                                        <span class="badge rounded-pill bg-info text-dark">
                                                            {{ !empty($arr) ? ucfirst($arr[0]) . ' ' . ucfirst($arr[1]) : $subs->payment_gateway }}
                                                        </span>
                                                    </td>
                                                    <td>{{ $subs->currency . $subs->amount }}</td>
                                                    <td>
                                                        <span class="badge rounded-pill bg-success">
                                                            {{ date('d-m-Y', strtotime($subscription->created_at)) }}
                                                        </span>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        @else
                                            <tr>
                                                <td colspan="7" class="text-center text-muted py-4">
                                                    {{ __('adminWords.no_data') }}</td>
                                            </tr>
                                        @endif
                                    </tbody>
                                </table>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif


    <div class="dash-recent-data-wrapper">

        <!-- HTML New -->
        <div class="row">
            <div class="col-xl-8 col-lg-8 col-md-12 col-sm-12 col-12">
                <div class="card rounded-5 border-0 chart-card">
                    <div class="card-header rounded-top-5">
                        <div class="row">
                            <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12">
                                <h4>Audios récents</h4>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="tab-content">
                            <div class="tab-pane fade show active" id="tabA" role="tabpanel"
                                aria-labelledby="tabA-tab">
                                <div class="tab-wrapper">
                                    <div class="content-holder audio-alubm-wrapper">
                                        <div class="table-responsive">
                                            <table class="table align-middle table-hover mb-0">
                                                <tbody>
                                                    @php
                                                        $song = 1;
                                                        $albm = 1;
                                                        $user = 1;
                                                    @endphp

                                                    @if (sizeof($recent_track) > 0)
                                                        @foreach ($recent_track as $track)
                                                            <tr>
                                                                <td class="fw-semibold">{{ $song++ }}</td>

                                                                <td>
                                                                    <span class="img-thumb">
                                                                        <img src="{{ asset('images/add-to-queue.png') }}"
                                                                            alt="" class="img-fluid rounded"
                                                                            style="width: 40px; height: 40px;">
                                                                    </span>
                                                                </td>

                                                                <td>
                                                                    <span
                                                                        class="text-desc">{{ $track->audio_title }}</span>
                                                                </td>

                                                                <td class="text-end">
                                                                    <span class="badge rounded-pill bg-success">
                                                                        {{ date('d-m-Y', strtotime($track->created_at)) }}
                                                                    </span>
                                                                </td>
                                                            </tr>
                                                        @endforeach
                                                    @else
                                                        <tr>
                                                            <td colspan="4" class="text-center text-muted py-4">
                                                                {{ __('frontWords.no_track') }}
                                                            </td>
                                                        </tr>
                                                    @endif
                                                </tbody>
                                            </table>
                                        </div>


                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="tabB" role="tabpanel" aria-labelledby="tabB-tab">
                                <div class="tab-wrapper">
                                    <div class="content-holder audio-alubm-wrapper">
                                        <div class="table-responsive">
                                            <table class="table table-styled mb-0">
                                                <tbody>
                                                    @if (sizeof($recent_album) > 0)
                                                        @foreach ($recent_album as $album)
                                                            <tr>
                                                                <td>
                                                                    {{ $albm++ }}
                                                                </td>
                                                                <td>
                                                                    <span class="img-thumb">
                                                                        <img
                                                                            src="{{ asset('images/album/' . $album->image) }}" />
                                                                    </span>
                                                                </td>
                                                                <td>
                                                                    <span class="text-desc">
                                                                        <span>{{ $album->album_name }}</span>
                                                                    </span>
                                                                </td>
                                                                <td class="text-right">
                                                                    <label class="mb-0 badge badge-success toltiped "
                                                                        title=""
                                                                        data-original-title="{{ date('d-m-Y', strtotime($album->created_at)) }}">{{ date('d-m-Y', strtotime($album->created_at)) }}</label>
                                                                </td>
                                                            </tr>
                                                        @endforeach
                                                    @else
                                                        <p>{{ __('frontWords.no_album') }}</p>
                                                    @endif

                                                </tbody>
                                            </table>
                                        </div>
                                        {{-- <div class="view-btn-wrap">
                                                <a href="{{ url('album') }}" class="effect-btn btn btn-primary mt-2" target="_blank">
                                                    {{ __('adminWords.view_all').' '.__('adminWords.album') }}
                                                </a>                                                
                                            </div> --}}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12">
                <div class="card rounded-5 border-0">
                    <div class="card-header rounded-top-5">
                        <h4 class="card-title">{{ __('adminWords.recent_users') }}</h4>
                    </div>
                    <div class="card-body">
                        <div class="chart-holder">
                            <div class="table-responsive">
                                <table class="table align-middle table-hover mb-0">
                                    <tbody>
                                        @php
                                            $user = 1;
                                        @endphp

                                        @if (sizeof($recent_users) > 0)
                                            @foreach ($recent_users as $users)
                                                <tr>
                                                    <td class="fw-semibold">{{ $user++ }}</td>

                                                    <td>
                                                        <span class="img-thumb">
                                                            @if (!empty($users->image))
                                                                <img src="{{ asset('media/user/' . $users->image) }}"
                                                                    alt="User" class="rounded-circle"
                                                                    style="width: 40px; height: 40px; object-fit: cover;">
                                                            @else
                                                                <img src="{{ asset('images/user/user1-1651222429.webp') }}"
                                                                    alt="User" class="rounded-circle"
                                                                    style="width: 40px; height: 40px; object-fit: cover;">
                                                            @endif
                                                        </span>
                                                    </td>

                                                    <td>
                                                        <span class="text-desc">{{ $users->name }}</span>
                                                    </td>

                                                    <td class="text-end">
                                                        <span class="badge rounded-pill bg-success">
                                                            {{ date('d-m-Y', strtotime($users->created_at)) }}
                                                        </span>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        @else
                                            <tr>
                                                <td colspan="4" class="text-center text-muted py-4">
                                                    {{ __('frontWords.no_user') }}
                                                </td>
                                            </tr>
                                        @endif
                                    </tbody>
                                </table>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('script')
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const userData = JSON.parse(document.getElementById('userMonthCount').value);

            const options = {
                chart: {
                    type: 'line', // ou 'bar'
                    height: 350,
                    toolbar: {
                        show: false
                    }
                },
                series: [{
                    name: '{{ __('adminWords.users') }}',
                    data: userData
                }],
                xaxis: {
                    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov',
                        'Dec'
                    ],
                    labels: {
                        style: {
                            colors: '#6c757d',
                            fontSize: '12px'
                        }
                    }
                },
                yaxis: {
                    labels: {
                        style: {
                            colors: '#6c757d',
                            fontSize: '12px'
                        }
                    }
                },
                stroke: {
                    curve: 'smooth',
                    width: 3
                },
                fill: {
                    type: 'gradient',
                    gradient: {
                        shade: 'light',
                        type: 'linear',
                        gradientToColors: ['#6c3483'],
                        stops: [0, 100],
                        colorStops: [{
                                offset: 0,
                                color: '#b7410e',
                                opacity: 1
                            },
                            {
                                offset: 100,
                                color: '#6c3483',
                                opacity: 1
                            }
                        ]
                    }
                },
                colors: ['#b7410e'],
                grid: {
                    borderColor: '#e0e0e0'
                },
                tooltip: {
                    theme: 'light'
                }
            };

            const chart = new ApexCharts(document.querySelector("#chartG"), options);
            chart.render();

        });
    </script>


@endsection