@extends('layouts.app')

@section('title', 'Customer Profile')

@section('breadcrumbs')
  <nav class="flex" aria-label="Breadcrumb">
    <ol class="inline-flex items-center space-x-1">
      <li>
        <a href="{{ route('dashboard') }}" class="text-slate-700 hover:text-primary-600">Dashboard</a>
      </li>
      <li>
        <svg class="w-4 h-4 text-slate-400" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
        </svg>
      </li>
      <li>
        <a href="{{ route('customers.index') }}" class="text-slate-700 hover:text-primary-600">Customers</a>
      </li>
      <li>
        <svg class="w-4 h-4 text-slate-400" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
        </svg>
      </li>
      <li>
        <span class="text-slate-700 font-medium">John Doe</span>
      </li>
    </ol>
  </nav>
@endsection

@section('content')
<div class="space-y-6">
  <!-- Header with Actions -->
  <div class="flex items-center justify-between">
    <div>
      <h1 class="text-3xl font-bold text-slate-900">John Doe</h1>
      <p class="text-slate-600 mt-1">Customer ID: CUST001</p>
    </div>
    <div class="flex space-x-3">
      <a href="{{ route('customers.edit', 1) }}" class="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors duration-200">Edit</a>
      <button class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors duration-200">Delete</button>
    </div>
  </div>

  <!-- Profile Cards -->
  <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
    <!-- Contact Info -->
    <div class="bg-white rounded-lg shadow-sm border border-slate-200 p-6">
      <h3 class="font-semibold text-slate-900 mb-4">Contact Information</h3>
      <div class="space-y-3 text-sm">
        <div>
          <p class="text-slate-600">Email</p>
          <p class="font-medium text-slate-900">john@example.com</p>
        </div>
        <div>
          <p class="text-slate-600">Phone</p>
          <p class="font-medium text-slate-900">+1 (555) 123-4567</p>
        </div>
        <div>
          <p class="text-slate-600">Country</p>
          <p class="font-medium text-slate-900">United States</p>
        </div>
      </div>
    </div>

    <!-- Statistics -->
    <div class="bg-white rounded-lg shadow-sm border border-slate-200 p-6">
      <h3 class="font-semibold text-slate-900 mb-4">Statistics</h3>
      <div class="space-y-3 text-sm">
        <div>
          <p class="text-slate-600">Total Visits</p>
          <p class="text-2xl font-bold text-slate-900">12</p>
        </div>
        <div>
          <p class="text-slate-600">Nights Stayed</p>
          <p class="text-2xl font-bold text-slate-900">45</p>
        </div>
      </div>
    </div>

    <!-- Spending -->
    <div class="bg-white rounded-lg shadow-sm border border-slate-200 p-6">
      <h3 class="font-semibold text-slate-900 mb-4">Total Spending</h3>
      <div class="space-y-3 text-sm">
        <div>
          <p class="text-slate-600">Lifetime Value</p>
          <p class="text-2xl font-bold text-green-600">$18,500</p>
        </div>
        <div>
          <p class="text-slate-600">Average Spend</p>
          <p class="text-lg font-medium text-slate-900">$1,542</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Reservation History -->
  <div class="bg-white rounded-lg shadow-sm border border-slate-200 p-6">
    <h3 class="font-semibold text-slate-900 mb-4">Reservation History</h3>
    <div class="overflow-x-auto">
      <table class="w-full text-sm">
        <thead class="bg-slate-50">
          <tr>
            <th class="px-4 py-3 text-left font-semibold text-slate-700">Reservation #</th>
            <th class="px-4 py-3 text-left font-semibold text-slate-700">Check-in</th>
            <th class="px-4 py-3 text-left font-semibold text-slate-700">Check-out</th>
            <th class="px-4 py-3 text-left font-semibold text-slate-700">Nights</th>
            <th class="px-4 py-3 text-left font-semibold text-slate-700">Total</th>
            <th class="px-4 py-3 text-left font-semibold text-slate-700">Status</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-slate-200">
          @for ($i = 0; $i < 8; $i++)
            <tr class="hover:bg-slate-50">
              <td class="px-4 py-3">RES-2024-{{ str_pad(1001 + $i, 5, '0', STR_PAD_LEFT) }}</td>
              <td class="px-4 py-3">{{ now()->subMonths($i)->format('M d, Y') }}</td>
              <td class="px-4 py-3">{{ now()->subMonths($i)->addDays(3)->format('M d, Y') }}</td>
              <td class="px-4 py-3">{{ 3 + ($i % 2) }}</td>
              <td class="px-4 py-3 font-medium">${{ 1200 + ($i * 100) }}</td>
              <td class="px-4 py-3">
                @if ($i === 0)
                  <span class="px-2 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">Upcoming</span>
                @else
                  <span class="px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">Completed</span>
                @endif
              </td>
            </tr>
          @endfor
        </tbody>
      </table>
    </div>
  </div>

  <!-- Complete Info -->
  <div class="bg-white rounded-lg shadow-sm border border-slate-200 p-6">
    <h3 class="font-semibold text-slate-900 mb-4">Complete Information</h3>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <div>
        <p class="text-sm text-slate-600">Address</p>
        <p class="font-medium text-slate-900">123 Main Street, Los Angeles, CA 90210</p>
      </div>
      <div>
        <p class="text-sm text-slate-600">Passport Number</p>
        <p class="font-medium text-slate-900">P123456789</p>
      </div>
      <div>
        <p class="text-sm text-slate-600">Date of Birth</p>
        <p class="font-medium text-slate-900">May 15, 1980</p>
      </div>
      <div>
        <p class="text-sm text-slate-600">Status</p>
        <span class="px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">Active</span>
      </div>
      <div class="md:col-span-2">
        <p class="text-sm text-slate-600">Special Notes</p>
        <p class="font-medium text-slate-900">Preferred guest. Likes ocean view rooms. VIP status.</p>
      </div>
    </div>
  </div>
</div>
@endsection