@extends('layouts.admin')

@section('title', 'Dashboard')
@section('heading', 'Work flow dashboard')
@section('breadcrumb')
  <li class="breadcrumb-item active">Dashboard</li>
@endsection

@section('content')
  @php
    $cards = [
      ['label' => 'Inbox', 'value' => $stats['inbox'], 'url' => route('admin.workflow.index', ['tab' => 'inbox']), 'color' => '#4d9eed'],
      ['label' => 'Created by me', 'value' => $stats['sent'], 'url' => route('admin.workflow.index', ['tab' => 'sent']), 'color' => '#7c4dff'],
      ['label' => 'Sent back', 'value' => $stats['sent_back'], 'url' => route('admin.workflow.index', ['tab' => 'sent_back']), 'color' => '#e0a045'],
      ['label' => 'Completed', 'value' => $stats['completed'], 'url' => route('admin.workflow.index', ['tab' => 'completed']), 'color' => '#3cba6f'],
      ['label' => 'Overdue', 'value' => $stats['overdue'], 'url' => route('admin.workflow.index'), 'color' => '#e95f71'],
      ['label' => 'High or urgent', 'value' => $stats['urgent_open'], 'url' => route('admin.workflow.index'), 'color' => '#ff6b6b'],
    ];
    $barColors = [
      'in_progress' => '#4d9eed',
      'pending' => '#8d939c',
      'sent_back' => '#e0a045',
      'completed' => '#3cba6f',
      'cancelled' => '#6c727a',
    ];
    $shortLabels = [
      'in_progress' => 'In progress',
      'pending' => 'Pending',
      'sent_back' => 'Sent back',
      'completed' => 'Completed',
      'cancelled' => 'Cancelled',
    ];
    $chartLabels = [];
    $chartColors = [];
    foreach ($statusChart as $row) {
      $chartLabels[] = $shortLabels[$row['key']] ?? $row['label'];
      $chartColors[] = $barColors[$row['key']] ?? '#4d9eed';
    }
  @endphp

  <style>
    .fx-dash { margin-bottom: 8px; }
    .fx-stats {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 16px;
      margin-bottom: 16px;
    }
    .fx-stat {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 112px;
      padding: 18px 18px 16px;
      background: #2d3035;
      color: #fff;
      text-decoration: none;
      border-left: 3px solid #4d9eed;
    }
    .fx-stat:hover,
    .fx-stat:focus { background: #363a40; color: #fff; text-decoration: none; }
    .fx-stat-label {
      display: block;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: .04em;
      text-transform: uppercase;
      color: #b7bcc3;
      line-height: 1.35;
    }
    .fx-stat-value {
      display: block;
      margin-top: 14px;
      font-size: 32px;
      font-weight: 700;
      line-height: 1;
    }
    .fx-split,
    .fx-tables {
      display: grid;
      gap: 16px;
      margin-bottom: 16px;
    }
    .fx-split { grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); }
    .fx-tables { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fx-split .block,
    .fx-tables .block { margin-bottom: 0; height: 100%; }
    .fx-bar {
      display: grid;
      grid-template-columns: 108px minmax(0, 1fr) 32px;
      column-gap: 14px;
      align-items: center;
      margin-bottom: 14px;
    }
    .fx-bar:last-child { margin-bottom: 0; }
    .fx-bar-label {
      font-size: 13px;
      color: #dee2e6;
      white-space: nowrap;
    }
    .fx-bar-track {
      height: 8px;
      background: #1c1e21;
      border-radius: 99px;
      overflow: hidden;
    }
    .fx-bar-fill { height: 100%; border-radius: 99px; min-width: 0; }
    .fx-bar-count {
      font-size: 13px;
      font-weight: 700;
      text-align: right;
      color: #fff;
    }
    .fx-chart {
      position: relative;
      height: 250px;
    }
    .fx-tables .table { margin-bottom: 0; }
    .fx-tables .table td,
    .fx-tables .table th { white-space: nowrap; }
    @media (max-width: 1199px) {
      .fx-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }
    @media (max-width: 991px) {
      .fx-split,
      .fx-tables { grid-template-columns: minmax(0, 1fr); }
    }
    @media (max-width: 575px) {
      .fx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .fx-stat-value { font-size: 26px; }
    }
  </style>

  <div class="fx-dash">
    <div class="fx-stats">
      @foreach($cards as $card)
        <a class="fx-stat" href="{{ $card['url'] }}" style="border-left-color: {{ $card['color'] }}">
          <span class="fx-stat-label">{{ $card['label'] }}</span>
          <span class="fx-stat-value">{{ $card['value'] }}</span>
        </a>
      @endforeach
    </div>

    <div class="fx-split">
      <div class="block">
        <div class="title"><strong>Tasks by status</strong></div>
        @foreach($statusChart as $row)
          @php
            $color = $barColors[$row['key']] ?? '#4d9eed';
            $width = $statusMax > 0 ? round(($row['total'] / $statusMax) * 100) : 0;
          @endphp
          <div class="fx-bar">
            <div class="fx-bar-label">{{ $shortLabels[$row['key']] ?? $row['label'] }}</div>
            <div class="fx-bar-track">
              <div class="fx-bar-fill" style="width: {{ $width }}%; background: {{ $color }};"></div>
            </div>
            <div class="fx-bar-count">{{ $row['total'] }}</div>
          </div>
        @endforeach
      </div>
      <div class="block">
        <div class="title"><strong>Status mix</strong></div>
        <div class="fx-chart">
          <canvas id="statusChart"></canvas>
        </div>
      </div>
    </div>

    <div class="fx-tables">
      <div class="block">
        <div class="title"><strong>Waiting on you</strong></div>
        @include('admin.workflow.partials.task_table', ['tasks' => $inboxTasks, 'empty' => 'Nothing is waiting on you.', 'compact' => true])
      </div>
      <div class="block">
        <div class="title"><strong>Recent tasks</strong></div>
        @include('admin.workflow.partials.task_table', ['tasks' => $recent, 'empty' => 'No tasks yet.', 'compact' => true])
      </div>
    </div>
  </div>
@endsection

@push('scripts')
  <script src="{{ asset('admin_html/vendor/chart.js/Chart.min.js') }}"></script>
  <script>
    new Chart(document.getElementById('statusChart'), {
      type: 'doughnut',
      data: {
        labels: @json($chartLabels),
        datasets: [{
          data: @json(array_column($statusChart, 'total')),
          backgroundColor: @json($chartColors),
          borderWidth: 0
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        legend: {
          position: 'bottom',
          labels: { fontColor: '#dee2e6', boxWidth: 12, padding: 16 }
        }
      }
    });
  </script>
@endpush