@php
$configData = Helper::appClasses();
@endphp

@extends('layouts/layoutMaster')

@section('title', 'Property Manager Portal - South Front Technologies')

@section('content')
<div class="container-fluid">
  <!-- Welcome banner -->
  <div class="d-flex justify-content-between align-items-center mb-4">
    <div>
      <h4 class="mb-0">Property Operations Hub</h4>
      <p class="text-muted mb-0">Welcome back, <strong>{{ auth()->user()->name }}</strong> &bull; Managing {{ $properties->count() }} Properties ({{ $properties->pluck('name')->implode(', ') ?: 'None' }})</p>
    </div>
    <div class="d-flex gap-2">
      <a href="{{ route('properties.index') }}" class="btn btn-outline-primary">
        <i class="bi bi-building me-1"></i> My Properties
      </a>
      <a href="{{ route('leases.create') }}" class="btn btn-primary">
        <i class="bi bi-plus-lg me-1"></i> Draft Lease
      </a>
    </div>
  </div>

  <!-- Key Metrics Row -->
  <div class="row g-4 mb-4">
    <div class="col-sm-6 col-xl-3">
      <div class="card card-border-shadow-primary h-100">
        <div class="card-body">
          <div class="d-flex align-items-center mb-2 pb-1">
            <div class="avatar me-2">
              <span class="avatar-initial rounded bg-label-primary"><i class="bi bi-building fs-4"></i></span>
            </div>
            <h4 class="ms-1 mb-0">{{ $properties->count() }}</h4>
          </div>
          <p class="mb-1 fw-semibold text-heading">Managed Properties</p>
          <small class="text-muted">Total units: {{ $totalUnits }}</small>
        </div>
      </div>
    </div>

    <div class="col-sm-6 col-xl-3">
      <div class="card card-border-shadow-success h-100">
        <div class="card-body">
          <div class="d-flex align-items-center mb-2 pb-1">
            <div class="avatar me-2">
              <span class="avatar-initial rounded bg-label-success"><i class="bi bi-house-door-check fs-4"></i></span>
            </div>
            <h4 class="ms-1 mb-0">{{ $occupancyRate }}%</h4>
          </div>
          <p class="mb-1 fw-semibold text-heading">Portfolio Occupancy</p>
          <small class="text-success fw-semibold">{{ $occupiedUnits }} occupied</small>
          <small class="text-muted">/ {{ $totalUnits - $occupiedUnits }} vacant</small>
        </div>
      </div>
    </div>

    <div class="col-sm-6 col-xl-3">
      <div class="card card-border-shadow-info h-100">
        <div class="card-body">
          <div class="d-flex align-items-center mb-2 pb-1">
            <div class="avatar me-2">
              <span class="avatar-initial rounded bg-label-info"><i class="bi bi-file-earmark-check fs-4"></i></span>
            </div>
            <h4 class="ms-1 mb-0">{{ $activeLeases->count() }}</h4>
          </div>
          <p class="mb-1 fw-semibold text-heading">Active Leases</p>
          <small class="text-muted">Live tenancies in portfolio</small>
        </div>
      </div>
    </div>

    <div class="col-sm-6 col-xl-3">
      <div class="card card-border-shadow-warning h-100">
        <div class="card-body">
          <div class="d-flex align-items-center mb-2 pb-1">
            <div class="avatar me-2">
              <span class="avatar-initial rounded bg-label-warning"><i class="bi bi-tools fs-4"></i></span>
            </div>
            <h4 class="ms-1 mb-0">{{ $openMaintenance->count() }}</h4>
          </div>
          <p class="mb-1 fw-semibold text-heading">Pending Maintenance</p>
          <small class="text-muted">Tickets requiring attention</small>
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <!-- Active Leases Pipeline -->
    <div class="col-lg-7 mb-4">
      <div class="card h-100">
        <div class="card-header d-flex justify-content-between align-items-center border-bottom">
          <h5 class="card-title mb-0"><i class="bi bi-people me-2 text-primary"></i>Managed Property Tenancies</h5>
          <a href="{{ route('leases.index') }}" class="btn btn-sm btn-outline-primary">View All</a>
        </div>
        <div class="table-responsive text-nowrap">
          <table class="table table-hover">
            <thead>
              <tr>
                <th>Property & Unit</th>
                <th>Tenant</th>
                <th>Cycle</th>
                <th>Lease Expiry</th>
                <th>Action</th>
              </tr>
            </thead>
            <tbody>
              @forelse($activeLeases->take(5) as $lease)
                <tr>
                  <td>
                    <strong>{{ $lease->unit->property->name }}</strong>
                    <div class="text-muted small">Unit: {{ $lease->unit->unit_number }}</div>
                  </td>
                  <td>
                    <strong>{{ $lease->tenant->name }}</strong>
                    <div class="text-muted small">{{ $lease->tenant->phone_number ?? 'No phone' }}</div>
                  </td>
                  <td><span class="badge bg-label-secondary text-capitalize">{{ $lease->billing_cycle }}</span></td>
                  <td>{{ $lease->end_date->format('d M Y') }}</td>
                  <td>
                    <a href="{{ route('leases.show', $lease->id) }}" class="btn btn-xs btn-outline-primary">Details</a>
                  </td>
                </tr>
              @empty
                <tr>
                  <td colspan="5" class="text-center py-4 text-muted">No active leases recorded under your properties.</td>
                </tr>
              @endforelse
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <!-- Open Maintenance Tickets -->
    <div class="col-lg-5 mb-4">
      <div class="card h-100">
        <div class="card-header d-flex justify-content-between align-items-center border-bottom">
          <h5 class="card-title mb-0"><i class="bi bi-tools me-2 text-warning"></i>Maintenance Dispatch</h5>
          <a href="{{ route('maintenance.index') }}" class="btn btn-sm btn-outline-warning">View All</a>
        </div>
        <div class="card-body pt-3">
          @forelse($openMaintenance as $ticket)
            <div class="d-flex align-items-start border-bottom pb-3 mb-3">
              <div class="avatar me-3 flex-shrink-0">
                <span class="avatar-initial rounded bg-label-{{ $ticket->status === 'pending' ? 'danger' : 'warning' }}">
                  <i class="bi bi-tools"></i>
                </span>
              </div>
              <div class="d-flex justify-content-between w-100 flex-wrap gap-2">
                <div>
                  <h6 class="mb-0">{{ $ticket->title }}</h6>
                  <small class="text-muted">{{ $ticket->property->name }} &bull; Unit {{ $ticket->unit->unit_number }}</small>
                  <div class="small mt-1 text-muted">Tenant: {{ $ticket->tenant->name }}</div>
                </div>
                <div class="text-end">
                  <span class="badge {{ $ticket->status === 'pending' ? 'bg-label-danger' : 'bg-label-warning' }} mb-1">
                    {{ ucfirst($ticket->status) }}
                  </span>
                  <div>
                    <a href="{{ route('maintenance.show', $ticket->id) }}" class="btn btn-xs btn-outline-secondary">Assign</a>
                  </div>
                </div>
              </div>
            </div>
          @empty
            <div class="text-center py-4 text-muted">
              <i class="bi bi-check-lg text-success fs-2 d-block mb-1"></i>
              No pending maintenance tickets.
            </div>
          @endforelse
        </div>
      </div>
    </div>
  </div>
</div>
@endsection