@extends('backEnd.layouts.master')
@section('title', 'Dashboard')

@push('styles')
<style>
.dash-courier-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
@media (min-width: 576px) { .dash-courier-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .dash-courier-grid { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1200px) { .dash-courier-grid { grid-template-columns: repeat(5, 1fr); gap: 14px; } }

.dash-courier-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    border-top-width: 4px;
    border-top-style: solid;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    padding: 16px 12px;
    min-height: 92px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: transform .18s ease, box-shadow .18s ease;
}
.dash-courier-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}
.dash-courier-icon {
    font-size: 14px;
    margin-bottom: 6px;
    opacity: .85;
}
.dash-courier-num {
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 6px;
}
.dash-courier-label {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    line-height: 1.35;
}

.dash-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
@media (min-width: 992px) { .dash-summary-grid { grid-template-columns: repeat(4, 1fr); } }

.dash-summary-card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
    padding: 24px 18px;
    min-height: 132px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    transition: transform .18s ease, box-shadow .18s ease;
}
.dash-summary-card--warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}
.dash-summary-card--primary {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}
.dash-summary-card--danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}
.dash-summary-card--success {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}
a:hover .dash-summary-card,
.dash-summary-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
}
.dash-summary-num {
    font-size: 40px;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 10px;
    color: #fff;
}
.dash-summary-label {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
}
.dash-summary-label i {
    opacity: .9;
}

.dash-quick-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
@media (min-width: 576px) { .dash-quick-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px) { .dash-quick-grid { grid-template-columns: repeat(6, 1fr); } }

.dash-quick-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
    padding: 22px 14px;
    min-height: 118px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.dash-quick-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
    border-color: #cbd5e1;
}
.dash-quick-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 12px;
}
.dash-quick-label {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.3;
}
</style>
@endpush

@section('content')
<div class="page-content">
<div class="container-fluid">

{{-- ========== Header + Date Filter ========== --}}
<div class="row align-items-center mb-3">
  <div class="col-md-5">
    <h4 class="fw-bold mb-0"><i class="fas fa-tachometer-alt me-2 text-success"></i>Dashboard</h4>
    <p class="text-muted mb-0 small">{{ now()->format('l, d F Y') }}</p>
  </div>
  <div class="col-md-7">
    <form method="GET" class="d-flex flex-wrap gap-2 justify-content-md-end align-items-center" id="filterForm">
      <select name="filter" class="form-select form-select-sm" style="width:auto;" onchange="this.form.submit()">
        <option value="today"     @selected($filter==='today')>Today</option>
        <option value="yesterday" @selected($filter==='yesterday')>Yesterday</option>
        <option value="week"      @selected($filter==='week')>This Week</option>
        <option value="month"     @selected($filter==='month')>This Month</option>
        <option value="year"      @selected($filter==='year')>This Year</option>
        <option value="custom"    @selected($filter==='custom')>Custom</option>
      </select>
      @if($filter === 'custom')
      <input type="date" name="start_date" class="form-control form-control-sm" style="width:140px;"
             value="{{ request('start_date', now()->format('Y-m-d')) }}">
      <input type="date" name="end_date" class="form-control form-control-sm" style="width:140px;"
             value="{{ request('end_date', now()->format('Y-m-d')) }}">
      <button class="btn btn-primary btn-sm">Filter</button>
      @endif
    </form>
  </div>
</div>

{{-- ========== Courier Status Grid ========== --}}
<div class="dash-courier-grid mb-4">
  @php
  $courierItems = [
    ['label'=>'Total',               'count'=>$courierStats['total'],             'color'=>'#3b82f6','icon'=>'fa-shopping-bag'],
    ['label'=>'Accepted',            'count'=>$courierStats['accepted'],          'color'=>'#10b981','icon'=>'fa-check'],
    ['label'=>'Collected',           'count'=>$courierStats['collected'],         'color'=>'#06b6d4','icon'=>'fa-hand-holding'],
    ['label'=>'Packed',              'count'=>$courierStats['packed'],            'color'=>'#8b5cf6','icon'=>'fa-box'],
    ['label'=>'Cancelled',           'count'=>$courierStats['cancelled'],         'color'=>'#ef4444','icon'=>'fa-ban'],
    ['label'=>'Courier Pending',     'count'=>$courierStats['courier_pending'],   'color'=>'#f59e0b','icon'=>'fa-clock'],
    ['label'=>'Courier Delivered',   'count'=>$courierStats['courier_delivered'], 'color'=>'#059669','icon'=>'fa-truck'],
    ['label'=>'Courier Partial',     'count'=>$courierStats['courier_partial'],   'color'=>'#d97706','icon'=>'fa-box-open'],
    ['label'=>'Courier Cancelled',   'count'=>$courierStats['courier_cancelled'], 'color'=>'#dc2626','icon'=>'fa-times'],
    ['label'=>'Courier Unknown',     'count'=>$courierStats['courier_unknown'],   'color'=>'#9ca3af','icon'=>'fa-question'],
  ];
  @endphp
  @foreach($courierItems as $item)
  <div class="dash-courier-card" style="border-top-color:{{ $item['color'] }}">
    <i class="fas {{ $item['icon'] }} dash-courier-icon" style="color:{{ $item['color'] }}"></i>
    <div class="dash-courier-num" style="color:{{ $item['color'] }}">{{ $item['count'] }}</div>
    <div class="dash-courier-label">{{ $item['label'] }}</div>
  </div>
  @endforeach
</div>

{{-- ========== Summary Cards ========== --}}
<div class="dash-summary-grid mb-4">
  <div class="dash-summary-card dash-summary-card--warning">
    <div class="dash-summary-num">{{ $courierStats['courier_pending'] ?? 0 }}</div>
    <div class="dash-summary-label"><i class="fas fa-truck me-1"></i>Courier Pending</div>
  </div>
  <a href="{{ route('admin.orders.index') }}" class="text-decoration-none">
    <div class="dash-summary-card dash-summary-card--primary">
      <div class="dash-summary-num">{{ number_format($stats['website_orders']) }}</div>
      <div class="dash-summary-label"><i class="fas fa-globe me-1"></i>Website Orders</div>
    </div>
  </a>
  <div class="dash-summary-card dash-summary-card--danger">
    <div class="dash-summary-num">{{ $stats['incomplete_orders'] }}</div>
    <div class="dash-summary-label"><i class="fas fa-hourglass-half me-1"></i>Incomplete Orders</div>
  </div>
  <a href="{{ route('admin.products.index') }}" class="text-decoration-none">
    <div class="dash-summary-card dash-summary-card--success">
      <div class="dash-summary-num">{{ $stats['active_products'] }}</div>
      <div class="dash-summary-label"><i class="fas fa-box me-1"></i>Published Products</div>
    </div>
  </a>
</div>

{{-- ========== Quick Links ========== --}}
<div class="dash-quick-grid mb-4">
  @php
  use App\Services\SubscriptionModuleService;

  $quickLinks = array_values(array_filter([
    ['label'=>'View Store',      'icon'=>'fa-store',        'url'=>\App\Support\AppUrl::shopRoute('frontend.home'),           'color'=>'#10b981', 'module'=>'frontend'],
    ['label'=>'Orders',          'icon'=>'fa-shopping-cart','url'=>route('admin.orders.index'),     'color'=>'#3b82f6', 'module'=>'orders'],
    ['label'=>'Products',        'icon'=>'fa-box',          'url'=>route('admin.products.index'),    'color'=>'#8b5cf6', 'module'=>'products'],
    ['label'=>'Visitors',        'icon'=>'fa-eye',          'url'=>url('admin/visitors'),            'color'=>'#06b6d4', 'module'=>'social'],
    ['label'=>'Leads',           'icon'=>'fa-user-tag',     'url'=>url('admin/leads'),               'color'=>'#f59e0b', 'module'=>'social'],
    ['label'=>'Customers',       'icon'=>'fa-users',        'url'=>route('admin.customers.index'),   'color'=>'#ec4899', 'module'=>'customers'],
    ['label'=>'Analytics',       'icon'=>'fa-chart-pie',    'url'=>route('admin.reports.analytics'), 'color'=>'#ef4444', 'module'=>'reports'],
    ['label'=>'Inventory',       'icon'=>'fa-warehouse',    'url'=>route('admin.inventory.index'),   'color'=>'#d97706', 'module'=>'products'],
    ['label'=>'Coupons',         'icon'=>'fa-ticket-alt',   'url'=>route('admin.coupons.index'),     'color'=>'#059669', 'module'=>'products'],
    ['label'=>'WhatsApp Auto',   'icon'=>'fab fa-whatsapp', 'url'=>route('admin.social.whatsapp'),   'color'=>'#25d366', 'module'=>'social'],
    ['label'=>'Settings',        'icon'=>'fa-cog',          'url'=>route('admin.settings.general'),  'color'=>'#6b7280', 'module'=>null],
    ['label'=>'Add Product',     'icon'=>'fa-plus-circle',  'url'=>route('admin.products.create'),   'color'=>'#2563eb', 'module'=>'products'],
  ], fn ($ql) => empty($ql['module']) || SubscriptionModuleService::enabled($ql['module'])));
  @endphp
  @foreach($quickLinks as $ql)
  <a href="{{ $ql['url'] }}" class="text-decoration-none">
    <div class="dash-quick-card">
      <div class="dash-quick-icon" style="background:{{ $ql['color'] }}18;color:{{ $ql['color'] }}">
        <i class="{{ str_starts_with($ql['icon'], 'fab ') ? $ql['icon'] : 'fas ' . $ql['icon'] }}"></i>
      </div>
      <div class="dash-quick-label">{{ $ql['label'] }}</div>
    </div>
  </a>
  @endforeach
</div>

{{-- ========== Charts Row ========== --}}
<div class="row g-3 mb-4">
  {{-- Year Chart --}}
  <div class="col-lg-8">
    <div class="card border-0 shadow-sm">
      <div class="card-header bg-white fw-semibold d-flex justify-content-between">
        <span><i class="fas fa-chart-bar me-2 text-primary"></i>This Year Chart</span>
        <span class="text-muted small">Monthly Revenue (৳)</span>
      </div>
      <div class="card-body">
        <canvas id="yearChart" height="90"></canvas>
      </div>
    </div>
  </div>
  {{-- Week Chart --}}
  <div class="col-lg-4">
    <div class="card border-0 shadow-sm">
      <div class="card-header bg-white fw-semibold">
        <i class="fas fa-chart-line me-2 text-success"></i>This Week Orders
      </div>
      <div class="card-body">
        <canvas id="weekChart" height="130"></canvas>
      </div>
    </div>
  </div>
</div>

{{-- ========== Recent Orders + Stats ========== --}}
<div class="row g-3">
  <div class="col-lg-8">
    <div class="card border-0 shadow-sm">
      <div class="card-header bg-white d-flex justify-content-between align-items-center">
        <span class="fw-semibold"><i class="fas fa-list me-2"></i>Recent Orders</span>
        <a href="{{ route('admin.orders.index') }}" class="btn btn-sm btn-outline-primary">View All</a>
      </div>
      <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
          <thead class="table-light">
            <tr>
              <th>Invoice</th><th>Customer</th><th>Amount</th>
              <th>Status</th><th>Date</th><th>Action</th>
            </tr>
          </thead>
          <tbody>
          @forelse($recentOrders as $order)
          <tr>
            <td><strong>#{{ $order->invoice_id }}</strong></td>
            <td>
              {{ $order->customer_name }}<br>
              <small class="text-muted">{{ $order->customer_phone }}</small>
            </td>
            <td><strong>৳{{ number_format($order->amount) }}</strong></td>
            <td>
              @php
              $sMap  = [0=>'Pending',1=>'Confirmed',2=>'Processing',3=>'Shipped',4=>'Delivered',5=>'Cancelled',6=>'Returned'];
              $sCls  = [0=>'bg-warning text-dark',1=>'bg-primary',2=>'bg-info',3=>'bg-cyan',4=>'bg-success',5=>'bg-danger',6=>'bg-secondary'];
              @endphp
              <span class="badge {{ $sCls[$order->order_status] ?? 'bg-secondary' }}">
                {{ $sMap[$order->order_status] ?? 'Unknown' }}
              </span>
            </td>
            <td class="small text-muted">{{ $order->created_at->format('d M') }}</td>
            <td>
              <a href="{{ route('admin.orders.show', $order->id) }}" class="btn btn-sm btn-outline-primary">
                <i class="fas fa-eye"></i>
              </a>
            </td>
          </tr>
          @empty
          <tr>
            <td colspan="6" class="text-center py-4 text-muted">
              <i class="fas fa-shopping-cart fa-2x mb-2 d-block opacity-25"></i>No orders yet
            </td>
          </tr>
          @endforelse
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <div class="col-lg-4">
    {{-- Quick Stats --}}
    <div class="card border-0 shadow-sm mb-3">
      <div class="card-header bg-white fw-semibold">
        <i class="fas fa-box me-2"></i>Product Stats
      </div>
      <div class="card-body p-0">
        @php
        $pStats = [
          ['icon'=>'fa-boxes','color'=>'text-primary','label'=>'Total Products','val'=>$stats['total_products']],
          ['icon'=>'fa-check-circle','color'=>'text-success','label'=>'Active','val'=>$stats['active_products']],
          ['icon'=>'fa-exclamation-triangle','color'=>'text-warning','label'=>'Low Stock (≤5)','val'=>$stats['low_stock_products']],
          ['icon'=>'fa-times-circle','color'=>'text-danger','label'=>'Out of Stock','val'=>$stats['out_of_stock']],
          ['icon'=>'fa-users','color'=>'text-info','label'=>'Total Customers','val'=>$stats['total_customers']],
          ['icon'=>'fa-user-tag','color'=>'text-orange','label'=>'Leads','val'=>$stats['total_leads']],
          ['icon'=>'fa-eye','color'=>'text-cyan','label'=>"Today's Visitors",'val'=>$stats['today_visitors']],
        ];
        @endphp
        @foreach($pStats as $ps)
        <div class="d-flex justify-content-between align-items-center px-3 py-2 border-bottom">
          <span class="small"><i class="fas {{ $ps['icon'] }} {{ $ps['color'] }} me-2"></i>{{ $ps['label'] }}</span>
          <strong>{{ $ps['val'] }}</strong>
        </div>
        @endforeach
      </div>
    </div>

    {{-- Top Products --}}
    <div class="card border-0 shadow-sm">
      <div class="card-header bg-white fw-semibold">
        <i class="fas fa-fire me-2 text-danger"></i>Top Products
      </div>
      <div class="card-body p-0">
        @forelse($topProducts as $product)
        <div class="d-flex align-items-center px-3 py-2 border-bottom">
          @if($product->thumbnail)
          <img src="{{ asset($product->thumbnail) }}" width="36" height="36"
               class="rounded me-2" style="object-fit:cover;">
          @else
          <div class="rounded me-2 bg-light d-flex align-items-center justify-content-center"
               style="width:36px;height:36px;"><i class="fas fa-box text-muted small"></i></div>
          @endif
          <div class="flex-grow-1 overflow-hidden">
            <div class="fw-semibold text-truncate" style="font-size:12px;">{{ $product->name }}</div>
            <small class="text-muted">Stock: {{ $product->stock }}</small>
          </div>
          <span class="badge bg-success-subtle text-success ms-2">{{ (int)$product->sold_qty }} sold</span>
        </div>
        @empty
        <div class="text-center py-3 text-muted small">No products yet</div>
        @endforelse
      </div>
    </div>
  </div>
</div>

</div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
// Year Chart
new Chart(document.getElementById('yearChart'), {
  type: 'bar',
  data: {
    labels: {!! json_encode($chartMonths) !!},
    datasets: [{
      label: 'Revenue (৳)',
      data: {!! json_encode($chartRevenue) !!},
      backgroundColor: 'rgba(37,99,235,0.7)',
      borderRadius: 4,
    }]
  },
  options: {
    responsive: true,
    plugins: { legend: { display: false } },
    scales: {
      y: { ticks: { callback: v => '৳' + v.toLocaleString() }, grid: { color: '#f1f5f9' } },
      x: { grid: { display: false } }
    }
  }
});

// Week Chart
new Chart(document.getElementById('weekChart'), {
  type: 'line',
  data: {
    labels: {!! json_encode($chartWeekLabels) !!},
    datasets: [{
      label: 'Orders',
      data: {!! json_encode($chartWeekData) !!},
      borderColor: '#10b981',
      backgroundColor: 'rgba(16,185,129,0.1)',
      tension: 0.4,
      fill: true,
      pointBackgroundColor: '#10b981',
    }]
  },
  options: {
    responsive: true,
    plugins: { legend: { display: false } },
    scales: {
      y: { beginAtZero: true, ticks: { stepSize: 1 }, grid: { color: '#f1f5f9' } },
      x: { grid: { display: false } }
    }
  }
});
</script>
@endpush
@endsection