@extends('admin.layouts.app')

@section('page-title', 'Profile')

@section('content')
<div class="container-fluid px-0 bg-transparent">
  <style>
    /* ── HEADER ── */
    .profile-header {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 1.5rem;
      padding: 32px 36px;
      background: linear-gradient(120deg, #4e73df 60%, #1cc88a 100%);
      border-radius: 22px;
      color: white;
      box-shadow: 0 10px 36px rgba(78,115,223,0.22);
      margin-bottom: 28px;
      position: relative;
      overflow: hidden;
    }
    .profile-header::before {
      content:"";position:absolute;top:-60px;right:-60px;
      width:220px;height:220px;
      background:rgba(255,255,255,0.08);border-radius:50%;
    }
    .profile-header::after {
      content:"";position:absolute;bottom:-80px;right:180px;
      width:180px;height:180px;
      background:rgba(255,255,255,0.05);border-radius:50%;
    }

    .avatar-initials {
      width:100px;height:100px;border-radius:50%;
      border:4px solid rgba(255,255,255,0.75);
      box-shadow:0 6px 24px rgba(0,0,0,0.18);
      background:#fff;z-index:1;flex-shrink:0;
      display:flex;align-items:center;justify-content:center;
      font-size:2.6rem;font-weight:800;color:#4e73df;
      letter-spacing:-1px;
    }

    .main-info { display:flex;flex-direction:column;gap:14px;z-index:1;flex:1; }
    .main-row  { display:flex;flex-wrap:wrap;gap:18px;align-items:flex-start; }
    .field-group { min-width:160px; }

    .ph-label {
      font-size:0.72rem;color:rgba(255,255,255,0.65);
      font-weight:600;text-transform:uppercase;letter-spacing:0.07em;margin-bottom:3px;
    }
    .ph-value {
      font-size:0.95rem;font-weight:600;color:#fff;
      background:rgba(255,255,255,0.12);border-radius:9px;
      padding:6px 13px;border:1.5px solid rgba(255,255,255,0.2);
      backdrop-filter:blur(4px);
    }

    .type-badge {
      display:inline-block;padding:4px 14px;border-radius:50px;
      font-size:0.72rem;font-weight:700;letter-spacing:0.07em;text-transform:uppercase;
    }
    .type-admin { background:rgba(255,210,60,0.22);color:#ffe066;border:1px solid rgba(255,220,80,0.4); }
    .type-staff { background:rgba(100,255,180,0.18);color:#a0ffda;border:1px solid rgba(100,255,180,0.35); }

    .status-dot {
      display:inline-block;width:9px;height:9px;
      border-radius:50%;margin-right:5px;
    }
    .status-active   { background:#22c55e;box-shadow:0 0 5px #22c55e; }
    .status-inactive { background:#ef4444;box-shadow:0 0 5px #ef4444; }

    /* ── STATS ── */
    .profile-stats-row { display:flex;flex-wrap:wrap;gap:16px;margin-bottom:24px; }

    .stat-card {
      background:#fff;border-radius:16px;
      box-shadow:0 3px 18px rgba(60,80,120,0.07);
      padding:20px 22px;
      transition:all 0.3s ease;
      position:relative;
      flex:1 1 160px;
      overflow:hidden;
    }
    .stat-card::after {
      content:"";position:absolute;
      top:-25px;right:-25px;
      width:80px;height:80px;
      border-radius:50%;
      opacity:0.35;
    }

    /* Per-card accent colors */
    .stat-card.sc-blue   { border-top:3px solid #4e73df; }
    .stat-card.sc-blue::after   { background:linear-gradient(135deg,#c4d7ff,#e9f0ff); }

    .stat-card.sc-green  { border-top:3px solid #1cc88a; }
    .stat-card.sc-green::after  { background:linear-gradient(135deg,#bbf7d0,#dcfce7); }

    .stat-card.sc-yellow { border-top:3px solid #f6c23e; }
    .stat-card.sc-yellow::after { background:linear-gradient(135deg,#fef9c3,#fef08a); }

    .stat-card.sc-red    { border-top:3px solid #e74a3b; }
    .stat-card.sc-red::after    { background:linear-gradient(135deg,#fee2e2,#fecaca); }

    .stat-card.sc-purple { border-top:3px solid #8b5cf6; }
    .stat-card.sc-purple::after { background:linear-gradient(135deg,#ede9fe,#ddd6fe); }

    .stat-card.sc-teal   { border-top:3px solid #0ea5e9; }
    .stat-card.sc-teal::after   { background:linear-gradient(135deg,#e0f2fe,#bae6fd); }

    .stat-card:hover { transform:translateY(-5px);box-shadow:0 10px 30px rgba(78,115,223,0.15); }

    .stat-icon-wrap {
      width:42px;height:42px;border-radius:11px;
      display:flex;align-items:center;justify-content:center;
      font-size:1.25rem;margin-bottom:10px;
    }
    .sc-blue   .stat-icon-wrap { background:#eff6ff; }
    .sc-green  .stat-icon-wrap { background:#f0fdf4; }
    .sc-yellow .stat-icon-wrap { background:#fefce8; }
    .sc-red    .stat-icon-wrap { background:#fef2f2; }
    .sc-purple .stat-icon-wrap { background:#faf5ff; }
    .sc-teal   .stat-icon-wrap { background:#f0f9ff; }

    .stat-label {
      font-size:0.78rem;color:#8b96ad;font-weight:600;
      text-transform:uppercase;letter-spacing:0.06em;
      margin-bottom:4px;display:block;
    }
    .stat-value {
      font-size:1.7rem;font-weight:800;color:#1b2330;
      line-height:1;margin-bottom:6px;
    }
    .stat-footer { font-size:0.78rem;color:#94a3b8; }
    .positive { color:#16a34a; }
    .negative { color:#dc2626; }

    /* ── PROFESSIONAL INFO ── */
    .pro-section { margin-bottom:26px; }
    .pro-section-title {
      font-size:0.88rem;font-weight:700;color:#1b2330;
      border-left:4px solid #4e73df;padding-left:9px;margin-bottom:14px;
      display:flex;align-items:center;gap:7px;
    }
    .pro-grid { display:flex;flex-wrap:wrap;gap:14px; }
    .pro-box {
      background:#fff;border-radius:14px;
      padding:16px 20px;
      box-shadow:0 2px 14px rgba(60,80,120,0.07);
      border:1px solid #e8edf5;
      transition:all 0.25s cubic-bezier(.4,0,.2,1);
      flex:1 1 160px;min-width:0;
      position:relative;overflow:hidden;
    }
    .pro-box::before {
      content:"";
      position:absolute;top:0;left:0;right:0;height:3px;
      background:linear-gradient(90deg,#4e73df,#1cc88a);
      opacity:0;transition:opacity 0.25s;
    }
    .pro-box:hover { transform:translateY(-4px);box-shadow:0 8px 28px rgba(78,115,223,0.15);border-color:#c7d4f8; }
    .pro-box:hover::before { opacity:1; }

    .box-icon  { font-size:1.3rem;margin-bottom:7px;display:inline-block; }
    .box-label { font-size:0.68rem;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:4px; }
    .box-value { font-size:0.95rem;font-weight:700;color:#1b2330;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }

    /* ── BOTTOM CARDS ── */
    .profile-grid-row { display:flex;flex-wrap:wrap;gap:18px;margin-bottom:10px; }
    .profile-card {
      background:#fff;border-radius:16px;
      box-shadow:0 3px 18px rgba(60,80,120,0.07);
      padding:22px;transition:all 0.3s ease;flex:1 1 220px;
    }
    .profile-card:hover { transform:translateY(-4px);box-shadow:0 8px 28px rgba(78,115,223,0.14); }
    .profile-card h6 {
      font-size:1rem;font-weight:700;margin-bottom:14px;color:#1b2330;
      border-left:4px solid #4e73df;padding-left:9px;
    }
    .activity-list,.quick-action-list { list-style:none;padding:0;margin:0; }
    .activity-list li,.quick-action-list li {
      padding:9px 6px;font-size:0.92rem;border-bottom:1px solid #f2f4f8;
      display:flex;align-items:center;gap:8px;transition:0.2s ease;border-radius:6px;
    }
    .activity-list li:hover { background:#f4f7ff;padding-left:10px; }
    .quick-action-list li a {
      text-decoration:none;color:#2563eb;font-weight:600;
      display:flex;align-items:center;gap:8px;transition:0.2s ease;width:100%;
    }
    .quick-action-list li a:hover { color:#1e40af;transform:translateX(5px); }

    @media (max-width:900px) {
      .profile-header,.profile-stats-row,.profile-grid-row { flex-direction:column; }
      .avatar-initials { margin:0 auto; }
      .main-row { justify-content:center; }
      .pro-grid { flex-direction:column; }
      .pro-box { flex:unset;width:100%; }
    }
  </style>

  @php
    $user             = $user ?? Auth::guard('admin')->user();
    $isAdmin          = $user->type === 'admin';
    $initials         = strtoupper(substr($user->name ?? 'U', 0, 1));
    $joiningFormatted = $user->joining_date
        ? \Carbon\Carbon::parse($user->joining_date)->format('d M Y')
        : '—';
    $isActive = ($user->status ?? 'active') === 'active';

    // stats — controller मधून येतात, fallback 0
    $s = $stats ?? [];
    $totalContainers = $s['total_containers'] ?? 0;
    $totalInvoices   = $s['total_invoices']   ?? 0;
    $paidInvoices    = $s['paid_invoices']     ?? 0;
    $pendingInvoices = $s['pending_invoices']  ?? 0;
    $totalCustomers  = $s['total_customers']   ?? 0;
    $totalMarklist   = $s['total_marklist']    ?? 0;
    $activeMarklist  = $s['active_marklist']   ?? 0;
  @endphp

  {{-- ════════ PROFILE HEADER ════════ --}}
  <div class="profile-header">
    <div class="avatar-initials">{{ $initials }}</div>

    <div class="main-info">
      {{-- Row 1 --}}
      <div class="main-row">
        <div class="field-group">
          <div class="ph-label">Full Name</div>
          <div class="ph-value" style="font-size:1.05rem;">{{ $user->name ?? '—' }}</div>
        </div>
        <div class="field-group">
          <div class="ph-label">Account Type</div>
          <div class="ph-value" style="padding:4px 10px;">
            <span class="type-badge {{ $isAdmin ? 'type-admin' : 'type-staff' }}">
              {{ $isAdmin ? '⭐ Admin' : '👤 Staff' }}
            </span>
          </div>
        </div>
        <div class="field-group">
          <div class="ph-label">Status</div>
          <div class="ph-value">
            <span class="status-dot {{ $isActive ? 'status-active' : 'status-inactive' }}"></span>
            {{ ucfirst($user->status ?? 'active') }}
          </div>
        </div>
        @if($user->employee_id)
        <div class="field-group">
          <div class="ph-label">Employee ID</div>
          <div class="ph-value" style="font-family:monospace;letter-spacing:0.05em;">{{ $user->employee_id }}</div>
        </div>
        @endif
      </div>

      {{-- Row 2 --}}
      <div class="main-row">
        <div class="field-group">
          <div class="ph-label">Email</div>
          <div class="ph-value" style="font-size:0.88rem;">{{ $user->email ?? '—' }}</div>
        </div>
        <div class="field-group">
          <div class="ph-label">Phone</div>
          <div class="ph-value">{{ $user->phone ?? '—' }}</div>
        </div>
        @if($user->department)
        <div class="field-group">
          <div class="ph-label">Department</div>
          <div class="ph-value">{{ $user->department }}</div>
        </div>
        @endif
        @if($user->designation)
        <div class="field-group">
          <div class="ph-label">Designation</div>
          <div class="ph-value">{{ $user->designation }}</div>
        </div>
        @endif
        @if($user->address)
        <div class="field-group" style="min-width:220px;">
          <div class="ph-label">Address</div>
          <div class="ph-value" style="font-size:0.88rem;">{{ $user->address }}</div>
        </div>
        @endif
      </div>
    </div>
  </div>

  {{-- ════════ PROFESSIONAL INFO ════════ --}}
  <div class="pro-section">
    <div class="pro-section-title">🏢 Professional Information</div>
    <div class="pro-grid">

      @if($user->employee_id)
      <div class="pro-box">
        <div class="box-icon">🪪</div>
        <div class="box-label">Employee ID</div>
        <div class="box-value" style="font-family:monospace;">{{ $user->employee_id }}</div>
      </div>
      @endif

      @if($user->username)
      <div class="pro-box">
        <div class="box-icon">👤</div>
        <div class="box-label">Username</div>
        <div class="box-value">{{ $user->username }}</div>
      </div>
      @endif

      @if($user->role)
      <div class="pro-box">
        <div class="box-icon">🎯</div>
        <div class="box-label">Role</div>
        <div class="box-value">{{ $user->role }}</div>
      </div>
      @endif

      @if($user->department)
      <div class="pro-box">
        <div class="box-icon">🏬</div>
        <div class="box-label">Department</div>
        <div class="box-value">{{ $user->department }}</div>
      </div>
      @endif

      @if($user->designation)
      <div class="pro-box">
        <div class="box-icon">📋</div>
        <div class="box-label">Designation</div>
        <div class="box-value">{{ $user->designation }}</div>
      </div>
      @endif

      <div class="pro-box">
        <div class="box-icon">📅</div>
        <div class="box-label">Joining Date</div>
        <div class="box-value">{{ $joiningFormatted }}</div>
      </div>

      @if($user->emergency_phone)
      <div class="pro-box">
        <div class="box-icon">🆘</div>
        <div class="box-label">Emergency Phone</div>
        <div class="box-value">{{ $user->emergency_phone }}</div>
      </div>
      @endif

      @if($user->additional_info)
      <div class="pro-box" style="flex:2 1 320px;">
        <div class="box-icon">📝</div>
        <div class="box-label">Additional Info</div>
        <div class="box-value" style="font-size:0.88rem;font-weight:500;color:#475569;white-space:normal;">{{ $user->additional_info }}</div>
      </div>
      @endif

    </div>
  </div>

  {{-- ════════ REAL STATS ════════ --}}
  <div class="profile-stats-row">

    <div class="stat-card sc-blue">
      <div class="stat-icon-wrap">📦</div>
      <span class="stat-label">Total Containers</span>
      <div class="stat-value">{{ number_format($totalContainers) }}</div>
      <div class="stat-footer">All containers in system</div>
    </div>

    <div class="stat-card sc-green">
      <div class="stat-icon-wrap">🧾</div>
      <span class="stat-label">Total Invoices</span>
      <div class="stat-value">{{ number_format($totalInvoices) }}</div>
      <div class="stat-footer positive">
        {{ $paidInvoices }} paid
      </div>
    </div>

    <div class="stat-card sc-yellow">
      <div class="stat-icon-wrap">⏳</div>
      <span class="stat-label">Pending Invoices</span>
      <div class="stat-value" style="color:#d97706;">{{ number_format($pendingInvoices) }}</div>
      <div class="stat-footer">Awaiting payment</div>
    </div>

    <div class="stat-card sc-teal">
      <div class="stat-icon-wrap">✅</div>
      <span class="stat-label">Paid Invoices</span>
      <div class="stat-value" style="color:#0ea5e9;">{{ number_format($paidInvoices) }}</div>
      <div class="stat-footer positive">
        @if($totalInvoices > 0)
          {{ round(($paidInvoices / $totalInvoices) * 100, 1) }}% success rate
        @else
          No invoices yet
        @endif
      </div>
    </div>

    <div class="stat-card sc-purple">
      <div class="stat-icon-wrap">👥</div>
      <span class="stat-label">Total Customers</span>
      <div class="stat-value" style="color:#8b5cf6;">{{ number_format($totalCustomers) }}</div>
      <div class="stat-footer">Registered customers</div>
    </div>

    <div class="stat-card sc-red">
      <div class="stat-icon-wrap">🏷️</div>
      <span class="stat-label">Mark List</span>
      <div class="stat-value" style="color:#e74a3b;">{{ number_format($totalMarklist) }}</div>
      <div class="stat-footer positive">
        {{ $activeMarklist }} active
      </div>
    </div>

  </div>

  {{-- ════════ BOTTOM CARDS ════════ --}}
  <div class="profile-grid-row">
    <div class="profile-card">
      <h6>Recent Activity</h6>
      <ul class="activity-list">
        <li>📦 Shipment #SH-2024-001 delivered <span style="color:#a1a5ad;font-size:0.85em;margin-left:auto;">5 min ago</span></li>
        <li>📝 New shipment #SH-2024-002 created <span style="color:#a1a5ad;font-size:0.85em;margin-left:auto;">13 min ago</span></li>
        <li>⏰ Delay reported for #SH-2024-003 <span style="color:#a1a5ad;font-size:0.85em;margin-left:auto;">1 hr ago</span></li>
      </ul>
    </div>
    <div class="profile-card">
      <h6>Quick Actions</h6>
      <ul class="quick-action-list">
        <li><a href="#">➕ Create Shipment</a></li>
        <li><a href="#">🔍 Track Package</a></li>
        <li><a href="#">👥 Add Customer</a></li>
        <li><a href="#">📊 View Reports</a></li>
      </ul>
    </div>
  </div>

</div>
@endsection