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

@extends('layouts/layoutMaster')

@section('title', 'Caretaker Facility Portal - South Front Technologies')

@section('content')
<div class="container-fluid">
  <!-- Header -->
  <div class="d-flex justify-content-between align-items-center mb-4">
    <div>
      <h4 class="mb-0">Caretaker Facility Console</h4>
      <p class="text-muted mb-0">Assigned Properties: <strong>{{ $properties->pluck('name')->implode(', ') ?: 'None' }}</strong></p>
    </div>
    <div class="d-flex gap-2">
      <a href="{{ route('inspections.index') }}" class="btn btn-outline-primary">
        <i class="bi bi-clipboard-check me-1"></i> Inspections
      </a>
      @if($properties->isNotEmpty())
        <a href="{{ route('utility-readings.bulk', $properties->first()->id) }}" class="btn btn-primary">
          <i class="bi bi-table me-1"></i> Quick Meter Entry
        </a>
      @endif
    </div>
  </div>

  <!-- Quick Action Cards for Mobile/Field Operations -->
  <div class="row g-4 mb-4">
    <div class="col-sm-6 col-lg-4">
      <div class="card h-100 bg-primary text-white">
        <div class="card-body">
          <div class="d-flex justify-content-between align-items-center mb-3">
            <h5 class="text-white mb-0">Meter Readings</h5>
            <i class="bi bi-speedometer fs-2 text-white-50"></i>
          </div>
          <p class="small text-white-50 mb-3">Bulk entry of monthly water and electricity readings for all assigned units.</p>
          @if($properties->isNotEmpty())
            <a href="{{ route('utility-readings.bulk', $properties->first()->id) }}" class="btn btn-sm btn-white text-primary fw-bold">
              Open Bulk Sheet &rarr;
            </a>
          @else
            <span class="small text-white-50">No assigned properties</span>
          @endif
        </div>
      </div>
    </div>

    <div class="col-sm-6 col-lg-4">
      <div class="card h-100 bg-warning text-white">
        <div class="card-body">
          <div class="d-flex justify-content-between align-items-center mb-3">
            <h5 class="text-white mb-0">Open Repairs</h5>
            <i class="bi bi-tools fs-2 text-white-50"></i>
          </div>
          <p class="small text-white-50 mb-3">{{ $openMaintenance->count() }} maintenance jobs requiring inspection or technician access.</p>
          <a href="{{ route('maintenance.index') }}" class="btn btn-sm btn-white text-warning fw-bold">
            View Maintenance Tickets &rarr;
          </a>
        </div>
      </div>
    </div>

    <div class="col-sm-6 col-lg-4">
      <div class="card h-100 bg-success text-white">
        <div class="card-body">
          <div class="d-flex justify-content-between align-items-center mb-3">
            <h5 class="text-white mb-0">Vacant Units Guide</h5>
            <i class="bi bi-key fs-2 text-white-50"></i>
          </div>
          <p class="small text-white-50 mb-3">{{ $vacantUnits->count() }} vacant units ready for tenant viewings and walkthroughs.</p>
          <a href="#vacantUnitsSection" class="btn btn-sm btn-white text-success fw-bold">
            Check Vacancies &rarr;
          </a>
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <!-- Vacant Units List for Viewings -->
    <div class="col-lg-6 mb-4" id="vacantUnitsSection">
      <div class="card h-100">
        <div class="card-header border-bottom">
          <h5 class="card-title mb-0"><i class="bi bi-key me-2 text-success"></i>Available Units for Letting</h5>
        </div>
        <div class="table-responsive text-nowrap">
          <table class="table table-hover">
            <thead>
              <tr>
                <th>Property</th>
                <th>Unit</th>
                <th>Monthly Rent</th>
                <th>Service Charge</th>
              </tr>
            </thead>
            <tbody>
              @forelse($vacantUnits as $unit)
                <tr>
                  <td><strong>{{ $unit->property->name }}</strong></td>
                  <td><span class="badge bg-label-info">Unit {{ $unit->unit_number }}</span></td>
                  <td>Ksh {{ number_format($unit->rental_rate, 2) }}</td>
                  <td>Ksh {{ number_format($unit->service_charge, 2) }}</td>
                </tr>
              @empty
                <tr>
                  <td colspan="4" class="text-center py-4 text-muted">No vacant units available. 100% full occupancy!</td>
                </tr>
              @endforelse
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <!-- Open Maintenance Checklist -->
    <div class="col-lg-6 mb-4">
      <div class="card h-100">
        <div class="card-header border-bottom">
          <h5 class="card-title mb-0"><i class="bi bi-tools me-2 text-warning"></i>Active Maintenance Jobs</h5>
        </div>
        <div class="card-body pt-3">
          @forelse($openMaintenance as $ticket)
            <div class="d-flex justify-content-between align-items-start border-bottom pb-2 mb-2">
              <div>
                <strong class="d-block text-heading">{{ $ticket->title }}</strong>
                <small class="text-muted">{{ $ticket->property->name }} &bull; Unit {{ $ticket->unit->unit_number }}</small>
                <div class="small text-muted">{{ \Illuminate\Support\Str::limit($ticket->description, 60) }}</div>
              </div>
              <span class="badge {{ $ticket->status === 'pending' ? 'bg-label-danger' : 'bg-label-warning' }}">
                {{ ucfirst($ticket->status) }}
              </span>
            </div>
          @empty
            <div class="text-center py-4 text-muted">
              <i class="bi bi-check-circle text-success fs-2 d-block mb-1"></i>
              No active maintenance issues on your properties.
            </div>
          @endforelse
        </div>
      </div>
    </div>
  </div>
</div>
@endsection