@extends('admin.layouts.app')

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

@section('content')
<div class="container-fluid px-0 bg-transparent">
  <style>
    body {
      background: linear-gradient(135deg, #f2f6ff, #fefefe);
      font-family: "Poppins", sans-serif;
    }

    /* PROFILE HEADER */
    .profile-header {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      flex-wrap: wrap;
      gap: 1rem;
      padding: 36px 32px;
      background: linear-gradient(120deg, #4e73df 68%, #1cc88a 100%);
      border-radius: 20px;
      color: white;
      box-shadow: 0 8px 28px rgba(24,40,90,0.09);
      margin-bottom: 34px;
      position: relative;
      min-height: 140px;
    }
    .profile-header::after {
      content: "";
      position: absolute;
      top: -58px;
      right: -85px;
      width: 210px;
      height: 210px;
      background: rgba(255,255,255,0.14);
      border-radius: 50%;
    }
    .avatar {
      width: 98px;
      height: 98px;
      border-radius: 50%;
      object-fit: cover;
      border: 4px solid rgba(255,255,255,0.7);
      box-shadow: 0 5px 20px rgba(0,0,0,0.15);
      background: #fff;
      z-index: 1;
    }
    .main-info {
      display: flex;
      flex-direction: column;
      gap: 10px;
      z-index: 1;
      flex: 1;
    }
    .main-row {
      display: flex;
      flex-wrap: wrap;
      gap: 25px;
    }
    .field-group {
      min-width: 210px;
    }
    .label {
      font-size: 0.9rem;
      color: #dbe7f4;
      font-weight: 500;
    }
    .value {
      font-size: 1.1rem;
      font-weight: 600;
      color: #fff;
      background: rgba(255,255,255,0.13);
      border-radius: 8px;
      padding: 6px 12px;
      border: 1.5px solid rgba(255,255,255,0.18);
      transition: background 0.13s;
    }
    .value:hover { background: rgba(255,255,255,0.22); }

    /* STATS + CARDS COMMON */
    .profile-stats-row, .profile-grid-row {
      display: flex;
      flex-wrap: wrap;
      gap: 18px;
      margin-bottom: 20px;
    }
    .stat-card, .profile-card {
      background: #fff;
      border-radius: 14px;
      box-shadow: 0 3px 18px rgba(60,80,120,0.08);
      padding: 20px;
      transition: all 0.3s ease;
      position: relative;
      flex: 1 1 200px;
    }
    .stat-card:hover, .profile-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 6px 25px rgba(50,70,120,0.18);
    }

    /* STATS */
    .stat-card::before {
      content: "";
      position: absolute;
      top: -20px;
      right: -20px;
      width: 90px;
      height: 90px;
      background: linear-gradient(135deg, #c4d7ff, #e9f0ff);
      border-radius: 50%;
      opacity: 0.25;
    }
    .stat-label {
      font-size: 0.9rem;
      color: #8b96ad;
      font-weight: 500;
    }
    .stat-value {
      font-size: 1.6rem;
      font-weight: 700;
      display: flex;
      align-items: center;
      color: #1b2330;
    }
    .stat-footer { font-size: 0.9rem; }
    .positive { color: #23a25d; }
    .negative { color: #e54141; }
    .neutral { color: #9a9ea8; }

    /* PROFILE CARDS */
    .profile-card h6 {
      font-size: 1.1rem;
      font-weight: 600;
      margin-bottom: 12px;
      color: #1b2330;
      border-left: 4px solid #3767f4;
      padding-left: 8px;
    }
    .activity-list, .quick-action-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .activity-list li, .quick-action-list li {
      padding: 9px 2px;
      font-size: 1rem;
      border-bottom: 1px solid #f2f4f8;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: 0.2s ease;
    }
    .activity-list li:hover { background: #f7faff; border-radius: 6px; }
    .quick-action-list li a {
      text-decoration: none;
      color: #2563eb;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: 0.2s ease;
    }
    .quick-action-list li a:hover { color: #1e40af; transform: translateX(4px); }

    @media (max-width: 1000px) {
      .profile-header, .profile-stats-row, .profile-grid-row {
        flex-direction: column;
        text-align: center;
      }
      .avatar { margin: 0 auto 15px; }
      .main-row { justify-content: center; }
    }
  </style>

  <!-- PROFILE HEADER -->
  <div class="profile-header">
    <img src="https://i.pravatar.cc/100" class="avatar" alt="Avatar" />
    <div class="main-info">
      <div class="main-row">
        <div class="field-group">
          <div class="label">Name</div>
          <div class="value">John Doe</div>
        </div>
        <div class="field-group">
          <div class="label">Email</div>
          <div class="value">john@example.com</div>
        </div>
        <div class="field-group">
          <div class="label">Mobile No</div>
          <div class="value">+91 12345 54321</div>
        </div>
      </div>
      <div class="main-row">
        <div class="field-group">
          <div class="label">Company Name</div>
          <div class="value">XYZ Infotech</div>
        </div>
        <div class="field-group" style="min-width:260px;">
          <div class="label">Company Address</div>
          <div class="value">XYZ Infotech, East Andheri, Mumbai 400 001</div>
        </div>
      </div>
    </div>
  </div>

  <!-- STATS ROW -->
  <div class="profile-stats-row">
    <div class="stat-card">
      <span class="stat-label">Total Shipment</span>
      <span class="stat-value">📦 1,250</span>
      <div class="stat-footer positive">+12% vs last month</div>
    </div>
    <div class="stat-card">
      <span class="stat-label">In Transit</span>
      <span class="stat-value" style="color:#2563eb;">🚚 320</span>
      <div class="stat-footer neutral">65% of capacity</div>
    </div>
    <div class="stat-card">
      <span class="stat-label">At Customs</span>
      <span class="stat-value" style="color:#f59e0b;">🛄 85</span>
      <div class="stat-footer neutral">Avg 2.3 days processing</div>
    </div>
    <div class="stat-card">
      <span class="stat-label">Delayed</span>
      <span class="stat-value" style="color:#e11d48;">⏰ 55</span>
      <div class="stat-footer negative">-8% vs last month</div>
    </div>
    <div class="stat-card">
      <span class="stat-label">Delivered</span>
      <span class="stat-value" style="color:#22c55e;">✅ 780</span>
      <div class="stat-footer positive">98.2% success rate</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.9em;margin-left:8px;">5 min ago</span></li>
        <li>📝 New shipment #SH-2024-002 <span style="color:#a1a5ad;font-size:0.9em;margin-left:8px;">13 min ago</span></li>
        <li>⏰ Delay for #SH-2024-003 <span style="color:#a1a5ad;font-size:0.9em;margin-left:8px;">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