@extends('layouts.app')
@section('title', 'ダッシュボード')
@section('page-title', 'ダッシュボード')
@section('content')

@if(!empty($showSetupGuide))
<style>
.setup-guide-bubble {
  position: relative;
  max-width: 620px;
  margin: 0 0 16px 0;
  background: #fff7e6;
  border: 1.5px solid #f0b429;
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 4px 14px rgba(240, 180, 41, 0.18);
  animation: sgbPulse 2s ease-in-out infinite;
}
@keyframes sgbPulse {
  0%, 100% { box-shadow: 0 4px 14px rgba(240, 180, 41, 0.18); }
  50% { box-shadow: 0 4px 22px rgba(240, 180, 41, 0.42); }
}
.setup-guide-bubble .sgb-tail {
  position: absolute;
  top: -11px;
  left: 196px;
  width: 20px;
  height: 20px;
  background: #fff7e6;
  border-left: 1.5px solid #f0b429;
  border-top: 1.5px solid #f0b429;
  transform: rotate(45deg);
}
.setup-guide-bubble .sgb-ic {
  width: 42px; height: 42px; border-radius: 50%;
  background: #fde9b8; color: #b5730a;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem; flex: none;
}
.setup-guide-bubble .sgb-body { flex: 1; min-width: 0; }
.setup-guide-bubble .sgb-title { font-weight: 700; font-size: 1.02rem; color: #8a5a00; }
.setup-guide-bubble .sgb-sub { font-size: 0.83rem; color: #7a6a45; margin-top: 2px; line-height: 1.45; }
.setup-guide-bubble .sgb-btn {
  flex: none; background: #f0a020; color: #fff; font-weight: 700;
  font-size: 0.88rem; padding: 8px 18px; border-radius: 9px;
  text-decoration: none; white-space: nowrap;
}
.setup-guide-bubble .sgb-btn:hover { background: #dd8c0a; color: #fff; }
@media (max-width: 768px) {
  .setup-guide-bubble { margin-left: 0; flex-wrap: wrap; }
  .setup-guide-bubble .sgb-tail { left: 24px; }
  .setup-guide-bubble .sgb-btn { width: 100%; text-align: center; }
}
</style>
<div class="setup-guide-bubble" role="note">
  <span class="sgb-tail" aria-hidden="true"></span>
  <div class="sgb-ic" aria-hidden="true"><i class="bi bi-stars"></i></div>
  <div class="sgb-body">
    <div class="sgb-title">まずはここから始めましょう！</div>
    <div class="sgb-sub">上のメニュー「初期設定」で会社情報などを登録すると、ページ作成や配信が使えるようになります。</div>
  </div>
  <a href="{{ route('setting.setup') }}" class="sgb-btn">初期設定を始める</a>
</div>
@endif

{{-- 配信の稼働状況（cron / キューが止まっていないか。監査 M12） --}}
@include('partials._delivery_heartbeat')

{{-- 統計カード --}}
<div class="row g-3 mb-4">
  <div class="col-md-3">
    <div class="card">
      <div class="card-body">
        <div class="d-flex justify-content-between align-items-center">
          <div>
            <div class="text-muted small mb-1">ファネル数</div>
            <div class="fs-3 fw-bold">{{ $funnelCount ?? 0 }}</div>
          </div>
          <div style="width:48px;height:48px;background:#f0eeff;border-radius:12px;display:flex;align-items:center;justify-content:center;">
            <i class="bi bi-funnel" style="font-size:1.5rem;color:#6c5ce7;"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="card">
      <div class="card-body">
        <div class="d-flex justify-content-between align-items-center">
          <div>
            <div class="text-muted small mb-1">今月の売上</div>
            <div class="fs-3 fw-bold">¥{{ number_format($monthlyRevenue ?? 0) }}</div>
          </div>
          <div style="width:48px;height:48px;background:#e8f5e9;border-radius:12px;display:flex;align-items:center;justify-content:center;">
            <i class="bi bi-currency-yen" style="font-size:1.5rem;color:#2e7d32;"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="card">
      <div class="card-body">
        <div class="d-flex justify-content-between align-items-center">
          <div>
            <div class="text-muted small mb-1">総読者数</div>
            <div class="fs-3 fw-bold">{{ $subscriberCount ?? 0 }}</div>
          </div>
          <div style="width:48px;height:48px;background:#e3f2fd;border-radius:12px;display:flex;align-items:center;justify-content:center;">
            <i class="bi bi-people" style="font-size:1.5rem;color:#1565c0;"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="card">
      <div class="card-body">
        <div class="d-flex justify-content-between align-items-center">
          <div>
            <div class="text-muted small mb-1">今月の注文数</div>
            <div class="fs-3 fw-bold">{{ $monthlyOrders ?? 0 }}件</div>
          </div>
          <div style="width:48px;height:48px;background:#fff3e0;border-radius:12px;display:flex;align-items:center;justify-content:center;">
            <i class="bi bi-bag-check" style="font-size:1.5rem;color:#e65100;"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="row g-3">
  {{-- 最近のファネル --}}
  <div class="col-md-6">
    <div class="card h-100">
      <div class="card-header d-flex justify-content-between align-items-center">
        <span class="fw-semibold">最近のファネル</span>
        <a href="{{ route('funnel.index') }}" class="btn btn-sm btn-outline-primary">すべて見る</a>
      </div>
      <div class="card-body p-0">
        @if(isset($recentFunnels) && $recentFunnels->isNotEmpty())
        <ul class="list-group list-group-flush">
          @foreach($recentFunnels as $funnel)
          <li class="list-group-item d-flex justify-content-between align-items-center">
            <div>
              <div class="fw-semibold small">{{ $funnel->name }}</div>
              <div class="text-muted" style="font-size:0.75rem;">{{ $funnel->pages()->count() }}ページ</div>
            </div>
            <a href="{{ route('funnel.page.index', $funnel) }}" class="btn btn-sm btn-outline-secondary">開く</a>
          </li>
          @endforeach
        </ul>
        @else
        <div class="text-center py-4 text-muted small">ファネルがありません</div>
        @endif
      </div>
    </div>
  </div>

  {{-- 最近の売上 --}}
  <div class="col-md-6">
    <div class="card h-100">
      <div class="card-header d-flex justify-content-between align-items-center">
        <span class="fw-semibold">最近の売上</span>
        <a href="{{ route('order.index') }}" class="btn btn-sm btn-outline-primary">すべて見る</a>
      </div>
      <div class="card-body p-0">
        @if(isset($recentOrders) && $recentOrders->isNotEmpty())
        <ul class="list-group list-group-flush">
          @foreach($recentOrders as $order)
          <li class="list-group-item d-flex justify-content-between align-items-center">
            <div>
              <div class="fw-semibold small">{{ $order->buyer_name }}</div>
              <div class="text-muted" style="font-size:0.75rem;">{{ $order->created_at->format('m/d H:i') }}</div>
            </div>
            <span class="fw-bold text-success">¥{{ number_format($order->amount) }}</span>
          </li>
          @endforeach
        </ul>
        @else
        <div class="text-center py-4 text-muted small">売上データがありません</div>
        @endif
      </div>
    </div>
  </div>
</div>

@endsection