@php use App\Library\Tool; @endphp
@extends('layouts/contentLayoutMaster')

@section('title', __('locale.menu.Dashboard'))

@section('vendor-style')
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/charts/apexcharts.css')) }}">
@endsection

@section('page-style')
    <link rel="stylesheet" href="{{ asset(mix('css/base/pages/dashboard-ecommerce.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('css/base/plugins/charts/chart-apex.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('css/base/pages/analytics-reports.css')) }}">
@endsection


@section('content')
    <section>

        {{-- ── Announcements ─────────────────────────────────────────────────── --}}
        @unless($userAnnouncements->isEmpty())
            <div class="row match-height">
                <div class="col-12 announcement-card">
                    <div class="card">
                        <div class="card-header">
                            <div class="d-flex align-items-center">
                                <h4 class="card-title">{{ __('locale.menu.Announcements') }}</h4>
                            </div>
                            <a href="#" class="mark_read h5 text-muted text-uppercase">
                                <i data-feather="x-circle" class="font-medium-3 cursor-pointer"></i>
                                {{ __('locale.buttons.close') }}
                            </a>
                        </div>
                        <hr class="my-0">
                        <div class="card-body alert-primary">
                            <ul class="timeline ms-50">
                                @foreach($userAnnouncements as $announcement)
                                    @if($announcement->pivot->read_at === null)
                                        <li class="timeline-item">
                                            <span class="timeline-point timeline-point-indicator"></span>
                                            <div class="timeline-event">
                                                <div class="d-flex justify-content-between flex-sm-row flex-column mb-sm-0 mb-1">
                                                    <a href="{{ route('user.account.announcement.view', $announcement->uid) }}">
                                                        <h6>{{ $announcement->title }}</h6>
                                                    </a>
                                                    <span class="timeline-event-time me-1">{{ $announcement->created_at->diffForHumans() }}</span>
                                                </div>
                                                <p>{!! $announcement->description !!}</p>
                                            </div>
                                        </li>
                                    @endif
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        @endunless

        {{-- ── Sub-account parent login banner ──────────────────────────────── --}}
        @php $isAdminImpersonation = session()->has('admin_user_id') && session()->has('temp_user_id'); @endphp
        @if(Auth::check() && Auth::user()->parent_id !== null && !$isAdminImpersonation)
            <div class="row match-height">
                <div class="col-12 announcement-card">
                    <div class="card border shadow-sm">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h4 class="card-title mb-0">{{ __('locale.sub_accounts.manage_account') }}</h4>
                            <a href="#" class="mark_read h5 text-muted text-uppercase">
                                <i data-feather="x-circle" class="font-medium-3 cursor-pointer"></i>
                                {{ __('locale.buttons.close') }}
                            </a>
                        </div>
                        <hr class="my-0">
                        <div class="card-body alert-primary text-center">
                            <p class="mb-2">{{ __('locale.sub_accounts.login_as_parent_message') }}</p>
                            <a href="{{ route('user.account.login_as', Auth::user()->parent->uid) }}"
                               class="btn btn-primary">
                                {{ __('locale.sub_accounts.login_as_parent') }}:
                                <strong>{{ Auth::user()->parent->displayName() }}</strong>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        {{-- ── Welcome + plan + SMS pie ──────────────────────────────────────── --}}
        <div class="row match-height">
            <div class="col-sm-8 col-12">
                <div class="card">
                    <div class="card-header"></div>
                    <div class="card-body">
                        <h3 class="text-primary">{{ \App\Helpers\Helper::greetingMessage() }}</h3>
                        <p class="font-medium-2 mt-2">{{ __('locale.description.dashboard', ['brandname' => config('app.name')]) }}</p>
                        <div class="d-flex flex-wrap justify-content-center gap-2">
                            @can('sms_quick_send')
                                <a href="{{ route('customer.sms.quick_send') }}"
                                   class="btn btn-sm btn-warning text-nowrap">
                                    <i data-feather="send"></i> <span>{{ __('locale.menu.Quick Send') }}</span>
                                </a>
                            @endcan
                            @can('sms_campaign_builder')
                                <a href="{{ route('customer.sms.campaign_builder') }}"
                                   class="btn btn-sm btn-success text-nowrap">
                                    <i data-feather="server"></i>
                                    <span>{{ __('locale.menu.Campaign Builder') }}</span>
                                </a>
                            @endcan
                            @can('sms_bulk_messages')
                                <a href="{{ route('customer.sms.import') }}"
                                   class="btn btn-sm btn-primary text-nowrap">
                                    <i data-feather="file-text"></i>
                                    <span>{{ __('locale.menu.Send Using File') }}</span>
                                </a>
                            @endcan
                            @can('view_contact_group')
                                <a href="{{ route('customer.contacts.index') }}"
                                   class="btn btn-sm btn-info text-nowrap">
                                    <i data-feather="user"></i>
                                    <span>{{ __('locale.contacts.contact_groups') }}</span>
                                </a>
                            @endcan
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-sm-4 col-12">
                <div class="card">
                    <div class="card-body">
                        <h3 class="text-primary">{{ __('locale.labels.current_plan') }}</h3>
                        @if(isset(Auth::user()->customer) && Auth::user()->customer->activeSubscription() == null)
                            <h3 class="mt-1 text-danger">{{ __('locale.subscription.no_active_subscription') }}</h3>
                        @elseif(isset(Auth::user()->customer))
                            <p class="mb-2 mt-1 font-medium-2">{!! __('locale.subscription.you_are_currently_subscribed_to_plan', [
                                'plan'    => auth()->user()->customer->subscription->plan->name,
                                'price'   => Tool::format_price(auth()->user()->customer->subscription->plan->price, auth()->user()->customer->subscription->plan->currency->format),
                                'remain'  => Tool::formatHumanTime(auth()->user()->customer->subscription->current_period_ends_at),
                                'end_at'  => Tool::customerDateTime(auth()->user()->customer->subscription->current_period_ends_at),
                            ]) !!}</p>
                        @endif
                        <div class="d-flex justify-content-between">
                            <a href="{{ route('customer.subscriptions.index') }}" class="btn btn-sm btn-primary me-1">
                                <i data-feather="info"></i> {{ __('locale.labels.more_info') }}
                            </a>
                            @if(isset(Auth::user()->customer) && Auth::user()->customer->activeSubscription())
                                <a href="{{ route('customer.subscriptions.change_plan', auth()->user()->customer->subscription->uid) }}"
                                   class="btn btn-sm btn-info">
                                    <i data-feather="credit-card"></i> {{ __('locale.labels.packages') }}
                                </a>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

        </div>

        {{-- ── Stat cards row 1 ───────────────────────────────────────────────── --}}
        <div class="row match-height">
            @foreach([
                ['value' => $customerDashboardWidgets['campaign_not_done'], 'total' => $customerDashboardWidgets['campaign_total'],
                 'label' => Str::plural(__('locale.menu.Campaigns')),       'route' => route('customer.reports.campaigns'),
                 'icon' => 'pie-chart',       'color' => 'bg-light-info',    'iconColor' => 'text-info'],
                ['value' => $deliveredCount,   'total' => $total_sms_sent,
                 'label' => __('locale.labels.delivered'),                   'route' => route('customer.reports.all'),
                 'icon' => 'phone-outgoing',  'color' => 'bg-light-success', 'iconColor' => 'text-success'],
                ['value' => $undeliveredCount, 'total' => $total_sms_sent,
                 'label' => __('locale.labels.failed'),                      'route' => route('customer.reports.all'),
                 'icon' => 'x-square',        'color' => 'bg-light-danger',  'iconColor' => 'text-danger'],
                ['value' => $customerDashboardWidgets['sms_templates_count'], 'total' => null,
                 'label' => Str::plural(__('locale.permission.sms_template')),'route' => route('customer.templates.index'),
                 'icon' => 'inbox',           'color' => 'bg-light-warning', 'iconColor' => 'text-warning'],
            ] as $card)
                <div class="col-lg-3 col-sm-6 col-12">
                    <div class="card">
                        <div class="card-header">
                            <div>
                                <h2 class="fw-bolder mb-0">
                                    @if($card['total'] !== null)
                                        <sup>{{ $card['value'] }}</sup> / {{ $card['total'] }}
                                    @else
                                        {{ $card['value'] }}
                                    @endif
                                </h2>
                                <p class="card-text">{{ $card['label'] }}</p>
                            </div>
                            <a href="{{ $card['route'] }}">
                                <div class="avatar {{ $card['color'] }} p-50 m-0">
                                    <div class="avatar-content">
                                        <i data-feather="{{ $card['icon'] }}"
                                           class="{{ $card['iconColor'] }} font-medium-5"></i>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        {{-- ── Stat cards row 2 ───────────────────────────────────────────────── --}}
        @php $hasActiveSub = isset(Auth::user()->customer) && Auth::user()->customer->activeSubscription() != null; @endphp
        <div class="row match-height">
            @foreach([
                ['value' => $hasActiveSub ? Tool::format_number($customerDashboardWidgets['contact_groups_count']) : 0, 'total' => null,
                 'label' => __('locale.contacts.contact_groups'), 'route' => route('customer.contacts.index'),
                 'icon' => 'users',         'color' => 'bg-light-primary', 'iconColor' => 'text-primary'],
                ['value' => $hasActiveSub ? Tool::format_number($customerDashboardWidgets['contacts_count']) : 0, 'total' => null,
                 'label' => __('locale.menu.Contacts'),           'route' => route('customer.contacts.index'),
                 'icon' => 'user',          'color' => 'bg-light-success', 'iconColor' => 'text-success'],
                ['value' => $customerDashboardWidgets['invoice_open'], 'total' => $customerDashboardWidgets['invoice_total'],
                 'label' => Str::plural(__('locale.menu.Invoices')), 'route' => route('customer.subscriptions.index'),
                 'icon' => 'shopping-cart', 'color' => 'bg-light-info',    'iconColor' => 'text-info'],
                ['value' => $customerDashboardWidgets['blacklist_count'], 'total' => null,
                 'label' => Str::plural(__('locale.menu.Blacklist')), 'route' => route('customer.blacklists.index'),
                 'icon' => 'user-x',        'color' => 'bg-light-danger',  'iconColor' => 'text-danger'],
            ] as $card)
                <div class="col-lg-3 col-sm-6 col-12">
                    <div class="card">
                        <div class="card-header">
                            <div>
                                <h2 class="fw-bolder mb-0">
                                    @if($card['total'] !== null)
                                        <sup>{{ $card['value'] }}</sup> / {{ $card['total'] }}
                                    @else
                                        {{ $card['value'] }}
                                    @endif
                                </h2>
                                <p class="card-text">{{ $card['label'] }}</p>
                            </div>
                            <a href="{{ $card['route'] }}">
                                <div class="avatar {{ $card['color'] }} p-50 m-0">
                                    <div class="avatar-content">
                                        <i data-feather="{{ $card['icon'] }}"
                                           class="{{ $card['iconColor'] }} font-medium-5"></i>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        {{-- ── SMS type chart sections (permission-gated) ────────────────────── --}}
        {{-- Each entry: [sms_type, permissions_needed] --}}
        @php
            $smsChartTypes = [
                'plain'    => ['quick_send', 'sms_campaign_builder', 'sms_bulk_messages'],
                'unicode'  => ['quick_send', 'sms_campaign_builder', 'sms_bulk_messages'],
                'voice'    => ['voice_campaign_builder', 'voice_quick_send', 'voice_bulk_messages'],
                'mms'      => ['mms_campaign_builder', 'mms_quick_send', 'mms_bulk_messages'],
                'whatsapp' => ['whatsapp_campaign_builder', 'whatsapp_quick_send', 'whatsapp_bulk_messages'],
                'viber'    => ['viber_campaign_builder', 'viber_quick_send', 'viber_bulk_messages'],
                'otp'      => ['otp_campaign_builder', 'otp_quick_send', 'otp_bulk_messages'],
            ];
        @endphp

        @foreach($smsChartTypes as $type => $permissions)
            @canany($permissions)
                <div class="row match-height">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <h4 class="card-title text-uppercase">{{ __('locale.labels.sms_statistics', ['sms_type' => __('locale.labels.' . $type . '_sms')]) }}</h4>
                            </div>
                            <div class="card-body">
                                <div id="{{ $type }}_sms_data"></div>
                            </div>
                        </div>
                    </div>
                </div>
            @endcanany
        @endforeach

    </section>
@endsection


@section('vendor-script')
    <script src="{{ asset(mix('vendors/js/charts/apexcharts.min.js')) }}"></script>
@endsection


@section('page-script')
    <script src="{{ asset(mix('js/scripts/analytics/dashboard-widgets.js')) }}"></script>
    <script>
      $(window).on("load", function() {

        const $strok_color = "#b9c3cd";
        const $label_color = "#e7eef7";
        const $purple = "#df87f2";
        const $textMutedColor = "#b9b9c3";
        const $stroke_color_2 = "#d0ccff";

        // ── Mark-all-read handler ────────────────────────────────────────────────
        $(".mark_read").on("click", function(e) {
          e.stopPropagation();
          $.ajax({
            url: "{{ route('user.account.announcement.mark-all-as-read') }}",
            type: "POST",
            data: { _token: "{{ csrf_token() }}" },
            success: function(response) {
              if (response.success || response.status === "success") {
                $(".announcement-card").fadeOut(400);
                if (typeof response.unread_count !== "undefined") {
                  $(".announcement-unread-badge").toggle(response.unread_count > 0).text(response.unread_count > 0 ? response.unread_count : "");
                }
              } else {
                toastr["warning"](response.message, "{{ __('locale.labels.attention') }}", {
                  closeButton: true, positionClass: "toast-top-right", progressBar: true, newestOnTop: true, rtl: isRtl
                });
              }
            },
            error: function(error) {
              toastr["warning"](error.responseText, "{{ __('locale.labels.attention') }}", {
                closeButton: true, positionClass: "toast-top-right", progressBar: true, newestOnTop: true, rtl: isRtl
              });
            }
          });
        });

        // ── Shared line-chart config factory ────────────────────────────────────
        function createChartOptions(height, xAxis, dataSet) {
          return {
            chart: { height: height, toolbar: { show: false }, zoom: { enabled: false }, type: "line", offsetX: -10 },
            stroke: { curve: "smooth", dashArray: [0, 5, 12], width: [5, 7, 5] },
            grid: { borderColor: $label_color, padding: { top: -20, bottom: -10, left: 20 } },
            legend: { show: false },
            colors: [$stroke_color_2, $strok_color, $purple],
            fill: {
              type: "gradient",
              gradient: {
                shade: "dark", inverseColors: false,
                gradientToColors: [window.colors.solid.primary, $strok_color, $stroke_color_2],
                shadeIntensity: 1, type: "horizontal", opacityFrom: 1, opacityTo: 1, stops: [0, 100, 100, 100]
              }
            },
            markers: { size: 0, hover: { size: 5 } },
            xaxis: {
              labels: { style: { colors: $textMutedColor, fontSize: "1rem" } },
              axisTicks: { show: false },
              categories: xAxis,
              axisBorder: { show: false },
              tickPlacement: "on"
            },
            yaxis: {
              tickAmount: 5,
              labels: {
                style: { colors: $textMutedColor, fontSize: "1rem" },
                formatter: function(val) {
                  return val > 999 ? (val / 1000).toFixed(0) + "k" : val;
                }
              }
            },
            tooltip: { x: { show: false } },
            series: dataSet
          };
        }

        const smsCharts = {};
          @foreach(['plain','unicode','voice','mms','whatsapp','viber','otp'] as $type)
            smsCharts["{{ $type }}"] = {
            xAxis: {!! $charts[$type]->xAxis() !!},
            dataSet: {!! $charts[$type]->dataSet() !!}
          };
          @endforeach

        // Render only chart containers that exist in the DOM (permission-gated)
        Object.keys(smsCharts).forEach(function(type) {
          const el = document.querySelector("#" + type + "_sms_data");
          if (el) new ApexCharts(el, createChartOptions(240, smsCharts[type].xAxis, smsCharts[type].dataSet)).render();
        });
      });
    </script>
@endsection