@extends('crm.master')

@section('title', $customer->name)

@php
  $nameParts = preg_split('/\s+/', trim((string) $customer->name), 2);
  $firstName = $nameParts[0] ?? '';
  $lastName = $nameParts[1] ?? '';
  $statusClass = $customer->status === 'active' ? 'customer-status-dot active' : 'customer-status-dot inactive';
@endphp

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
  @include('crm.components.alerts')

  <div class="customer-profile-page">
    <div class="customer-profile-header">
      <div class="customer-profile-title-wrap">
        <div>
          <h3 class="customer-profile-title mb-1">Customer Profile</h3>
          <div class="customer-profile-status">
            <span class="{{ $statusClass }}"></span>
            {{ strtoupper($customer->status ?: 'inactive') }}
          </div>
        </div>
      </div>

      <div class="customer-profile-actions">
        <a href="{{ route('crm.customers.index') }}" class="btn btn-outline-secondary btn-sm">
          <i class="ti tabler-arrow-left me-1"></i> Back
        </a>
        <a href="{{ route('crm.booking.index') }}" class="btn btn-primary btn-sm">
          <i class="ti tabler-plus me-1"></i> New Booking
        </a>
        <a href="{{ route('crm.customers.edit', $customer->hash_id) }}" class="btn btn-outline-secondary btn-sm">
          <i class="ti tabler-edit me-1"></i> Edit
        </a>
        <button type="button" class="btn btn-outline-secondary btn-sm" data-bs-toggle="modal" data-bs-target="#archiveModal">
          <i class="ti tabler-archive me-1"></i> Archive
        </button>
      </div>
    </div>

    <div class="card customer-profile-card mb-4">
      <div class="card-body p-4 p-lg-5">
        <div class="row g-3">
          <div class="col-lg-6">
            <label class="customer-field-label">First Name</label>
            <input type="text" class="form-control customer-field-input" value="{{ $firstName }}" readonly>
          </div>
          <div class="col-lg-6">
            <label class="customer-field-label">Last Name</label>
            <input type="text" class="form-control customer-field-input" value="{{ $lastName }}" readonly>
          </div>

          <div class="col-12">
            <label class="customer-field-label">Email</label>
            <input type="text" class="form-control customer-field-input" value="{{ $customer->email }}" readonly>
          </div>

          <div class="col-lg-6">
            <label class="customer-field-label">Phone</label>
            <input type="text" class="form-control customer-field-input" value="{{ $customer->phone }}" readonly>
          </div>
          <div class="col-lg-6">
            <label class="customer-field-label">Language</label>
            <input type="text" class="form-control customer-field-input" value="English" readonly>
          </div>

          <div class="col-lg-6">
            <label class="customer-field-label">Country</label>
            <input type="text" class="form-control customer-field-input" value="{{ $customer->country }}" readonly>
          </div>
          <div class="col-lg-6">
            <label class="customer-field-label">Region</label>
            <input type="text" class="form-control customer-field-input" value="{{ $customer->state }}" readonly>
          </div>

          <div class="col-lg-6">
            <label class="customer-field-label">Address</label>
            <input type="text" class="form-control customer-field-input" value="{{ $customer->address }}" readonly>
          </div>
          <div class="col-lg-6">
            <label class="customer-field-label">City</label>
            <input type="text" class="form-control customer-field-input" value="{{ $customer->city }}" readonly>
          </div>

          <div class="col-lg-6">
            <label class="customer-field-label">ZIP/Postal Code</label>
            <input type="text" class="form-control customer-field-input" value="{{ $customer->postal_code }}" readonly>
          </div>
          <div class="col-lg-6">
            <label class="customer-field-label">Customer ID</label>
            <input type="text" class="form-control customer-field-input" value="{{ $customer->hash_id }}" readonly>
          </div>

          <div class="col-lg-6">
            <label class="customer-field-label">Bookings</label>
            <input type="text" class="form-control customer-field-input" value="{{ $customer->bookings_count }}" readonly>
          </div>
          <div class="col-lg-6">
            <label class="customer-field-label">Total Spent</label>
            <input type="text" class="form-control customer-field-input" value="${{ number_format((float) ($customer->bookings_total ?? 0), 2) }}" readonly>
          </div>

          @if($customer->notes)
            <div class="col-12">
              <label class="customer-field-label">Notes</label>
              <textarea class="form-control customer-field-input" rows="3" readonly>{{ $customer->notes }}</textarea>
            </div>
          @endif
        </div>
      </div>
    </div>

    <div class="card customer-bookings-card crm-grid-card">
      <div class="card-header bg-white border-0 pt-4 px-4">
        <h5 class="mb-0">Bookings</h5>
      </div>
      <div class="card-body pt-2 px-0 pb-0">
        <div class="table-responsive crm-grid-wrap">
          <table class="table customer-bookings-table mb-0 crm-grid-table">
            <thead>
              <tr>
                <th class="ps-4">ID</th>
                <th>Customer Type</th>
                <th>Booking</th>
                <th>Booking Date</th>
                <th>Created</th>
                <th>Amount</th>
                <th>Status</th>
                <th class="pe-4">Action</th>
              </tr>
            </thead>
            <tbody>
              @forelse($customer->bookings as $booking)
                @php
                  $firstItem = $booking->items->first();
                @endphp
                <tr>
                  <td class="ps-4">
                    <a href="{{ route('crm.booking.confirmation', $booking->booking_number) }}" class="booking-id-link">
                      <strong>#{{ $booking->id }}</strong>
                      <span>{{ $booking->booking_number }}</span>
                    </a>
                  </td>
                  <td>{{ ucfirst($booking->source ?: 'Booker') }}</td>
                  <td>
                    <div class="booking-main-cell">
                      <strong>{{ $booking->customer_name ?: $customer->name }}</strong>
                      <span>{{ $firstItem?->product_name ?: 'Booking item' }}</span>
                    </div>
                  </td>
                  <td>{{ $booking->start_datetime?->format('m/d/y') ?: '-' }}</td>
                  <td>
                    <div class="booking-created-cell">
                      <div>{{ $booking->created_at?->format('m/d/y') ?: '-' }}</div>
                      <span>{{ $booking->created_at?->format('h:i A') ?: '' }}</span>
                    </div>
                  </td>
                  <td>${{ number_format((float) $booking->total_amount, 2) }}</td>
                  <td>
                    <span class="status-pill {{ $booking->status_badge }}">
                      {{ $booking->status_label }}
                    </span>
                  </td>
                  <td class="pe-4">
                    <a href="{{ route('crm.booking.confirmation', $booking->booking_number) }}" class="btn btn-sm btn-outline-secondary">
                      View
                    </a>
                  </td>
                </tr>
              @empty
                <tr>
                  <td colspan="8" class="text-center text-muted py-5">No bookings found for this customer.</td>
                </tr>
              @endforelse
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="archiveModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Archive Customer</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        This will set <strong>{{ $customer->name }}</strong> to inactive.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
        <form action="{{ route('crm.customers.update', $customer->hash_id) }}" method="POST">
          @csrf
          @method('PUT')
          <input type="hidden" name="name" value="{{ $customer->name }}">
          <input type="hidden" name="email" value="{{ $customer->email }}">
          <input type="hidden" name="phone" value="{{ $customer->phone }}">
          <input type="hidden" name="address" value="{{ $customer->address }}">
          <input type="hidden" name="city" value="{{ $customer->city }}">
          <input type="hidden" name="country" value="{{ $customer->country }}">
          <input type="hidden" name="state" value="{{ $customer->state }}">
          <input type="hidden" name="postal_code" value="{{ $customer->postal_code }}">
          <input type="hidden" name="notes" value="{{ $customer->notes }}">
          <input type="hidden" name="status" value="inactive">
          <button type="submit" class="btn btn-warning">Archive</button>
        </form>
      </div>
    </div>
  </div>
</div>
@endsection

<style>
.customer-profile-page {
  max-width: 1180px;
}

.customer-profile-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.customer-profile-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: #1e2a39;
}

.customer-profile-status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: #536275;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.customer-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
}

.customer-status-dot.active {
  background: #77bb22;
}

.customer-status-dot.inactive {
  background: #8d9aad;
}

.customer-profile-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.customer-profile-card {
  border: 1px solid #e5e9f2;
  box-shadow: 0 10px 28px rgba(27, 39, 51, 0.04);
}

.customer-field-label {
  display: block;
  margin-bottom: 0.45rem;
  color: #4c5b6c;
  font-size: 0.76rem;
  font-weight: 700;
}

.customer-field-input[readonly] {
  background: #fff;
  border-color: #d8e0eb;
  min-height: 42px;
  color: #1e2a39;
}

.booking-id-link,
.booking-main-cell {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.booking-id-link span,
.booking-main-cell span,
.booking-created-cell span {
  color: #6f7d90;
  font-size: 0.76rem;
}

.booking-id-link {
  color: #1f4f8d;
  text-decoration: none;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1;
}

.status-pill.success {
  background: #e6f6ea;
  color: #1b7f3b;
}

.status-pill.primary {
  background: #e7f0ff;
  color: #2759c3;
}

.status-pill.info {
  background: #e5f7fb;
  color: #0f7f96;
}

.status-pill.warning {
  background: #fff4df;
  color: #a56900;
}

.status-pill.secondary,
.status-pill.dark {
  background: #eef2f6;
  color: #556274;
}

.status-pill.danger {
  background: #fde7ea;
  color: #b4233a;
}
</style>