@php
use Illuminate\Support\Facades\Auth;
$configData = Helper::appClasses();
@endphp

@extends('layouts/layoutMaster')

@section('title', $property->name . ' - Property Details')

@section('content')
<div class="container-fluid">
  @if (session('success'))
    <div class="alert alert-success alert-dismissible fade show mb-4" role="alert">
      <i class="bi bi-check-circle me-2"></i>{{ session('success') }}
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
  @endif
  @if (session('error'))
    <div class="alert alert-danger alert-dismissible fade show mb-4" role="alert">
      <i class="bi bi-exclamation-triangle me-2"></i>{{ session('error') }}
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
  @endif

  <!-- Back button and Header -->
  <div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2">
    <div>
      <h4 class="mb-0 fw-bold">{{ $property->name }}</h4>
      <p class="text-muted mb-0"><i class="bi bi-geo-alt me-1 text-danger"></i>{{ $property->address }}</p>
    </div>
    <div class="d-flex gap-2">
      <a href="{{ route('utility-readings.bulk', $property->id) }}" class="btn btn-outline-primary btn-sm">
        <i class="bi bi-speedometer2 me-1"></i> Bulk Meter Readings
      </a>
      <a href="{{ route('properties.index') }}" class="btn btn-outline-secondary btn-sm">
        <i class="bi bi-arrow-left me-1"></i> Back to Properties
      </a>
    </div>
  </div>

  <div class="row">
    <!-- Property Info Banner -->
    <div class="col-12 mb-4">
      <div class="card shadow-sm border-0">
        <div class="card-body py-3">
          <div class="row align-items-center g-3">
            <div class="col-6 col-md-3 border-end">
              <span class="text-muted d-block small text-uppercase fw-semibold">Property Category</span>
              @php
                $categoryBadges = [
                  'residential_apartment' => ['bg' => 'bg-label-primary', 'icon' => 'bi-houses-fill', 'label' => 'Residential Apartment'],
                  'commercial_office' => ['bg' => 'bg-label-info', 'icon' => 'bi-building-fill', 'label' => 'Commercial Office'],
                  'commercial_mall' => ['bg' => 'bg-label-success', 'icon' => 'bi-shop-window', 'label' => 'Retail Mall / Shopping'],
                  'industrial_warehouse' => ['bg' => 'bg-label-warning', 'icon' => 'bi-truck-front-fill', 'label' => 'Industrial / Warehouse'],
                  'other' => ['bg' => 'bg-label-secondary', 'icon' => 'bi-grid-fill', 'label' => 'Mixed Use / Serviced'],
                ];
                $badgeMeta = $categoryBadges[$property->type] ?? ['bg' => 'bg-label-secondary', 'icon' => 'bi-buildings', 'label' => ucfirst($property->type)];
              @endphp
              <div class="mt-1">
                <span class="badge {{ $badgeMeta['bg'] }} fs-6">
                  <i class="bi {{ $badgeMeta['icon'] }} me-1"></i> {{ $badgeMeta['label'] }}
                </span>
              </div>
            </div>
            <div class="col-6 col-md-3 border-end ps-md-4">
              <span class="text-muted d-block small text-uppercase fw-semibold">Property Owner</span>
              <strong class="text-heading fs-6 d-block mt-1">{{ $property->owner->name ?? 'N/A' }}</strong>
            </div>
            <div class="col-6 col-md-3 border-end ps-md-4">
              <span class="text-muted d-block small text-uppercase fw-semibold">Commission Rate</span>
              <strong class="text-heading fs-6 d-block mt-1">{{ $property->commission_rate }}%</strong>
            </div>
            <div class="col-6 col-md-3 ps-md-4">
              <span class="text-muted d-block small text-uppercase fw-semibold">Registered Units</span>
              <strong class="text-primary fs-6 d-block mt-1">
                <i class="bi bi-door-open me-1"></i>{{ $units->count() }} Units
                <span class="badge bg-label-success ms-2 small">{{ $units->where('status', 'vacant')->count() }} Vacant</span>
              </strong>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Left side: Units Management Table -->
    <div class="col-lg-8 mb-4">
      <div class="card shadow-sm border-0 h-100">
        <div class="card-header border-bottom py-3 d-flex justify-content-between align-items-center flex-wrap gap-2">
          <div>
            <h5 class="mb-0 fw-bold"><i class="bi bi-door-open-fill text-primary me-2"></i>Units Registry</h5>
            <small class="text-muted">Detailed unit specifications, floor locations, and utility meters</small>
          </div>
          @if(in_array(auth()->user()->role, ['admin', 'owner', 'manager']))
            <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#addUnitModal">
              <i class="bi bi-plus-circle me-1"></i> Add Unit with Specs
            </button>
          @endif
        </div>
        <div class="table-responsive text-nowrap">
          <table class="table table-hover align-middle mb-0">
            <thead class="table-light">
              <tr>
                <th>Unit & Location</th>
                <th>Specifications & Specs</th>
                <th>Utility Meters</th>
                <th>Monthly Gross Rent</th>
                <th>Status</th>
                @if(in_array(auth()->user()->role, ['admin', 'owner', 'manager']))
                  <th class="text-end">Actions</th>
                @endif
              </tr>
            </thead>
            <tbody>
              @forelse($units as $unit)
                <tr>
                  <td>
                    <div class="d-flex align-items-center">
                      <div class="avatar avatar-sm me-2 bg-label-primary rounded p-1 text-center">
                        <i class="bi bi-door-closed fs-5"></i>
                      </div>
                      <div>
                        <strong class="text-heading">{{ $unit->unit_number }}</strong>
                        @if($unit->wing_or_block || $unit->floor_level)
                          <div class="small text-muted">
                            {{ implode(' • ', array_filter([$unit->wing_or_block, $unit->floor_level])) }}
                          </div>
                        @endif
                      </div>
                    </div>
                  </td>

                  <td>
                    <div>
                      <span class="badge bg-label-secondary mb-1">
                        {{ $unit->category_summary }}
                      </span>
                      @if($unit->furnishing_status && $unit->furnishing_status !== 'unfurnished')
                        <span class="badge bg-label-info mb-1">{{ ucwords(str_replace('_', ' ', $unit->furnishing_status)) }}</span>
                      @endif
                      @if($unit->parking_slots)
                        <div class="small text-muted" title="{{ $unit->parking_slots }}">
                          <i class="bi bi-p-square me-1"></i>{{ Str::limit($unit->parking_slots, 20) }}
                        </div>
                      @endif
                    </div>
                  </td>

                  <td>
                    <div class="small">
                      @if($unit->electricity_meter_no)
                        <div class="text-nowrap" title="Electricity Meter">
                          <i class="bi bi-lightning-charge text-warning me-1"></i><span class="font-monospace">{{ $unit->electricity_meter_no }}</span>
                        </div>
                      @endif
                      @if($unit->water_meter_no)
                        <div class="text-nowrap" title="Water Sub-meter">
                          <i class="bi bi-droplet text-primary me-1"></i><span class="font-monospace">{{ $unit->water_meter_no }}</span>
                        </div>
                      @endif
                      @if(!$unit->electricity_meter_no && !$unit->water_meter_no)
                        <span class="text-muted fst-italic">No meters assigned</span>
                      @endif
                    </div>
                  </td>

                  <td>
                    <strong class="text-primary fs-6">Ksh {{ number_format($unit->gross_rent, 2) }}</strong>
                    <div class="small text-muted">
                      Rent: {{ number_format($unit->rental_rate) }} | SC: {{ number_format($unit->service_charge) }}
                    </div>
                  </td>

                  <td>
                    @php
                      $statusClasses = [
                        'vacant' => 'bg-label-success',
                        'occupied' => 'bg-label-primary',
                        'maintenance' => 'bg-label-danger',
                      ];
                    @endphp
                    <span class="badge {{ $statusClasses[$unit->status] ?? 'bg-label-secondary' }}">
                      {{ ucfirst($unit->status) }}
                    </span>
                  </td>

                  @if(in_array(auth()->user()->role, ['admin', 'owner', 'manager']))
                    <td class="text-end">
                      <div class="btn-group btn-group-sm">
                        <!-- Specs Details Modal Trigger -->
                        <button type="button" class="btn btn-outline-info btn-view-specs"
                                data-unit="{{ json_encode($unit) }}"
                                data-summary="{{ $unit->category_summary }}"
                                data-proptype="{{ $property->type }}"
                                title="View Complete Specs">
                          <i class="bi bi-card-checklist"></i> Specs
                        </button>

                        <!-- Edit Unit Trigger -->
                        <button type="button" class="btn btn-outline-primary btn-edit-unit"
                                data-unit="{{ json_encode($unit) }}"
                                data-update-url="{{ route('units.update', $unit->id) }}"
                                title="Edit Unit Details">
                          <i class="bi bi-pencil"></i>
                        </button>

                        <!-- Delete Unit -->
                        <form action="{{ route('units.destroy', $unit->id) }}" method="POST" class="d-inline" onsubmit="return confirm('Are you sure you want to delete unit {{ $unit->unit_number }}?');">
                          @csrf
                          @method('DELETE')
                          <button type="submit" class="btn btn-outline-danger" title="Delete Unit">
                            <i class="bi bi-trash"></i>
                          </button>
                        </form>
                      </div>
                    </td>
                  @endif
                </tr>
              @empty
                <tr>
                  <td colspan="6" class="text-center py-5 text-muted">
                    <i class="bi bi-door-closed display-6 d-block text-secondary mb-2"></i>
                    No units registered in this property yet.
                    @if(in_array(auth()->user()->role, ['admin', 'owner', 'manager']))
                      <div class="mt-2">
                        <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#addUnitModal">
                          <i class="bi bi-plus-circle me-1"></i> Register First Unit
                        </button>
                      </div>
                    @endif
                  </td>
                </tr>
              @endforelse
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <!-- Right side: Quick Add Form & Staff Management -->
    <div class="col-lg-4">
      <!-- Quick Unit Add Card -->
      @if(in_array(auth()->user()->role, ['admin', 'owner', 'manager']))
        <div class="card shadow-sm border-0 mb-4">
          <div class="card-header border-bottom py-3 d-flex justify-content-between align-items-center">
            <h5 class="mb-0 fw-bold"><i class="bi bi-plus-square me-2 text-primary"></i>Quick Add Unit</h5>
            <button type="button" class="btn btn-xs btn-outline-primary" data-bs-toggle="modal" data-bs-target="#addUnitModal">
              Full Specs <i class="bi bi-arrows-angle-expand ms-1"></i>
            </button>
          </div>
          <div class="card-body pt-3">
            <form action="{{ route('units.store', $property->id) }}" method="POST">
              @csrf
              <div class="row g-2 mb-3">
                <div class="col-7">
                  <label for="quick_unit_number" class="form-label small fw-semibold">Unit Number / Code *</label>
                  <input type="text" class="form-control form-control-sm" id="quick_unit_number" name="unit_number" placeholder="e.g. Apt 204, Shop G2" required />
                </div>
                <div class="col-5">
                  <label for="quick_floor_level" class="form-label small fw-semibold">Floor Level</label>
                  <input type="text" class="form-control form-control-sm" id="quick_floor_level" name="floor_level" placeholder="e.g. 2nd Floor" />
                </div>
              </div>

              <div class="row g-2 mb-3">
                <div class="col-6">
                  <label for="quick_rental_rate" class="form-label small fw-semibold">Monthly Rent (Ksh) *</label>
                  <input type="number" step="0.01" class="form-control form-control-sm" id="quick_rental_rate" name="rental_rate" placeholder="35000.00" required />
                </div>
                <div class="col-6">
                  <label for="quick_service_charge" class="form-label small fw-semibold">Service Charge (Ksh)</label>
                  <input type="number" step="0.01" class="form-control form-control-sm" id="quick_service_charge" name="service_charge" placeholder="4000.00" value="0.00" />
                </div>
              </div>

              <!-- Quick category hints -->
              @if($property->type === 'residential_apartment')
                <div class="row g-2 mb-3">
                  <div class="col-6">
                    <label class="form-label small fw-semibold">Bedrooms</label>
                    <select class="form-select form-select-sm" name="bedrooms">
                      <option value="">Select</option>
                      <option value="0">Studio</option>
                      <option value="1">1 Bed</option>
                      <option value="2">2 Beds</option>
                      <option value="3">3 Beds</option>
                      <option value="4">4+ Beds</option>
                    </select>
                  </div>
                  <div class="col-6">
                    <label class="form-label small fw-semibold">Bathrooms</label>
                    <input type="number" step="0.5" class="form-control form-control-sm" name="bathrooms" placeholder="e.g. 2.0" />
                  </div>
                </div>
              @elseif($property->type === 'commercial_office')
                <div class="row g-2 mb-3">
                  <div class="col-6">
                    <label class="form-label small fw-semibold">Floor Area (sqft)</label>
                    <input type="number" step="0.01" class="form-control form-control-sm" name="floor_area_sqft" placeholder="e.g. 1500" />
                  </div>
                  <div class="col-6">
                    <label class="form-label small fw-semibold">Workstations</label>
                    <input type="number" class="form-control form-control-sm" name="spec_workstations_capacity" placeholder="e.g. 15" />
                  </div>
                </div>
              @elseif($property->type === 'industrial_warehouse')
                <div class="row g-2 mb-3">
                  <div class="col-6">
                    <label class="form-label small fw-semibold">Floor Area (sqft)</label>
                    <input type="number" step="0.01" class="form-control form-control-sm" name="floor_area_sqft" placeholder="e.g. 5000" />
                  </div>
                  <div class="col-6">
                    <label class="form-label small fw-semibold">Clear Height (m)</label>
                    <input type="number" step="0.1" class="form-control form-control-sm" name="spec_clear_height_meters" placeholder="e.g. 9.0" />
                  </div>
                </div>
              @endif

              <div class="row g-2 mb-3">
                <div class="col-6">
                  <label class="form-label small fw-semibold">Electricity Meter #</label>
                  <input type="text" class="form-control form-control-sm" name="electricity_meter_no" placeholder="KPLC meter / token #" />
                </div>
                <div class="col-6">
                  <label class="form-label small fw-semibold">Water Meter #</label>
                  <input type="text" class="form-control form-control-sm" name="water_meter_no" placeholder="Sub-meter serial" />
                </div>
              </div>

              <button type="submit" class="btn btn-primary btn-sm w-100">
                <i class="bi bi-check2-circle me-1"></i> Quick Add Unit
              </button>
            </form>
          </div>
        </div>
      @endif

      <!-- Management Staff Section -->
      <div class="card shadow-sm border-0 mb-4">
        <div class="card-header border-bottom py-3">
          <h5 class="mb-0 fw-bold"><i class="bi bi-people-fill text-info me-2"></i>Management Staff</h5>
          <small class="text-muted">Assigned managers & caretakers for this property</small>
        </div>
        <div class="card-body pt-3">
          <ul class="list-group list-group-flush mb-3">
            @forelse($assignedStaff as $staffMember)
              <li class="list-group-item px-0 py-2 d-flex justify-content-between align-items-center">
                <div>
                  <strong class="text-heading">{{ $staffMember->name }}</strong>
                  <span class="badge bg-label-info ms-2">{{ ucfirst($staffMember->pivot->role) }}</span>
                  <div class="text-muted small"><i class="bi bi-envelope me-1"></i>{{ $staffMember->email }}</div>
                </div>
                @if(in_array(auth()->user()->role, ['admin', 'owner']))
                  <form action="{{ route('properties.detach', ['property' => $property->id, 'user' => $staffMember->id]) }}" method="POST" onsubmit="return confirm('Remove staff assignment?');">
                    @csrf
                    <button type="submit" class="btn btn-xs btn-outline-danger" title="Remove"><i class="bi bi-x-lg"></i></button>
                  </form>
                @endif
              </li>
            @empty
              <li class="list-group-item px-0 text-center text-muted py-3">No management staff assigned yet.</li>
            @endforelse
          </ul>

          @if(in_array(auth()->user()->role, ['admin', 'owner']))
            <form action="{{ route('properties.assign', $property->id) }}" method="POST">
              @csrf
              <div class="mb-2">
                <label for="assign_user_id" class="form-label small fw-semibold">Assign Staff Member</label>
                <select class="form-select select2" id="assign_user_id" name="user_id" data-placeholder="Search manager or caretaker..." required>
                  <option value="" disabled selected>Search & select staff member...</option>
                  @foreach($staff as $member)
                    <option value="{{ $member->id }}">{{ $member->name }} ({{ ucfirst($member->role) }})</option>
                  @endforeach
                </select>
              </div>
              <button type="submit" class="btn btn-outline-primary btn-sm w-100">Assign Staff</button>
            </form>
          @endif
        </div>
      </div>

      <!-- Service Providers Section -->
      <div class="card shadow-sm border-0">
        <div class="card-header border-bottom py-3">
          <h5 class="mb-0 fw-bold"><i class="bi bi-tools text-success me-2"></i>Service Providers</h5>
          <small class="text-muted">Approved contractors & technicians</small>
        </div>
        <div class="card-body pt-3">
          <ul class="list-group list-group-flush mb-3">
            @forelse($assignedProviders as $provider)
              <li class="list-group-item px-0 py-2 d-flex justify-content-between align-items-center">
                <div>
                  <strong class="text-heading">{{ $provider->name }}</strong>
                  <span class="badge bg-label-success ms-2">{{ $provider->pivot->category }}</span>
                  <div class="text-muted small"><i class="bi bi-telephone me-1"></i>{{ $provider->phone_number ?? $provider->email }}</div>
                </div>
                @if(in_array(auth()->user()->role, ['admin', 'owner']))
                  <form action="{{ route('properties.providers.detach', ['property' => $property->id, 'provider' => $provider->id]) }}" method="POST" onsubmit="return confirm('Remove service provider?');">
                    @csrf
                    <button type="submit" class="btn btn-xs btn-outline-danger" title="Remove"><i class="bi bi-x-lg"></i></button>
                  </form>
                @endif
              </li>
            @empty
              <li class="list-group-item px-0 text-center text-muted py-3">No service providers assigned yet.</li>
            @endforelse
          </ul>

          @if(in_array(auth()->user()->role, ['admin', 'owner']))
            <form action="{{ route('properties.providers.assign', $property->id) }}" method="POST">
              @csrf
              <div class="mb-2">
                <label for="provider_id" class="form-label small fw-semibold">Select Provider</label>
                <select class="form-select select2" id="provider_id" name="provider_id" data-placeholder="Search contractor or provider..." required>
                  <option value="" disabled selected>Search & select provider...</option>
                  @foreach($providers as $providerOption)
                    <option value="{{ $providerOption->id }}">{{ $providerOption->name }}</option>
                  @endforeach
                </select>
              </div>
              <div class="mb-2">
                <label for="category" class="form-label small fw-semibold">Service Specialty</label>
                <input type="text" class="form-control form-control-sm" id="category" name="category" placeholder="e.g. Plumbing, Electrical, HVAC" required />
              </div>
              <button type="submit" class="btn btn-outline-success btn-sm w-100">Assign Provider</button>
            </form>
          @endif
        </div>
      </div>
    </div>
  </div>
</div>

<!-- ============================================================== -->
<!-- MODAL: ADD UNIT WITH CATEGORY SPECIFICATIONS                   -->
<!-- ============================================================== -->
<div class="modal fade" id="addUnitModal" tabindex="-1" aria-labelledby="addUnitModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-scrollable">
    <div class="modal-content border-0 shadow">
      <div class="modal-header bg-primary text-white">
        <h5 class="modal-title text-white" id="addUnitModalLabel">
          <i class="bi bi-plus-circle me-2"></i>Register Unit with Detailed Specifications
        </h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>

      <form action="{{ route('units.store', $property->id) }}" method="POST">
        @csrf
        <div class="modal-body p-4">
          <!-- 1. General Identification & Rent -->
          <h6 class="text-primary border-bottom pb-2 mb-3 fw-bold">
            <i class="bi bi-geo-alt me-1"></i>1. Core Identification & Financials
          </h6>
          <div class="row g-3 mb-4">
            <div class="col-md-4">
              <label class="form-label fw-semibold">Unit Number / Code *</label>
              <input type="text" class="form-control" name="unit_number" placeholder="e.g. Apt 104, Shop 2A, Bay 14" required />
            </div>
            <div class="col-md-4">
              <label class="form-label fw-semibold">Floor / Level</label>
              <input type="text" class="form-control" name="floor_level" placeholder="e.g. Ground Floor, 3rd Floor" />
            </div>
            <div class="col-md-4">
              <label class="form-label fw-semibold">Wing / Block / Sector</label>
              <input type="text" class="form-control" name="wing_or_block" placeholder="e.g. Block A, East Wing" />
            </div>

            <div class="col-md-4">
              <label class="form-label fw-semibold">Monthly Base Rent (Ksh) *</label>
              <div class="input-group">
                <span class="input-group-text">Ksh</span>
                <input type="number" step="0.01" class="form-control" name="rental_rate" placeholder="35000.00" required />
              </div>
            </div>
            <div class="col-md-4">
              <label class="form-label fw-semibold">Service Charge (Ksh)</label>
              <div class="input-group">
                <span class="input-group-text">Ksh</span>
                <input type="number" step="0.01" class="form-control" name="service_charge" placeholder="4000.00" value="0.00" />
              </div>
            </div>
            <div class="col-md-4">
              <label class="form-label fw-semibold">Furnishing Status</label>
              <select class="form-select" name="furnishing_status">
                <option value="unfurnished" selected>Unfurnished</option>
                <option value="semi_furnished">Semi-Furnished</option>
                <option value="furnished">Fully Furnished</option>
                <option value="shell_and_core">Shell & Core</option>
              </select>
            </div>
          </div>

          <!-- 2. Category-Specific Specifications -->
          <h6 class="text-primary border-bottom pb-2 mb-3 fw-bold">
            <i class="bi bi-sliders me-1"></i>2. {{ $badgeMeta['label'] }} Specifications
          </h6>

          @if($property->type === 'residential_apartment')
            <!-- RESIDENTIAL FIELDS -->
            <div class="row g-3 mb-4">
              <div class="col-md-3">
                <label class="form-label fw-semibold">Bedrooms</label>
                <select class="form-select" name="bedrooms">
                  <option value="">Select Bedrooms</option>
                  <option value="0">Studio (0 Bed)</option>
                  <option value="1">1 Bedroom</option>
                  <option value="2">2 Bedrooms</option>
                  <option value="3">3 Bedrooms</option>
                  <option value="4">4 Bedrooms</option>
                  <option value="5">5+ Bedrooms</option>
                </select>
              </div>
              <div class="col-md-3">
                <label class="form-label fw-semibold">Bathrooms</label>
                <input type="number" step="0.5" class="form-control" name="bathrooms" placeholder="e.g. 2.0" />
              </div>
              <div class="col-md-3">
                <label class="form-label fw-semibold">Floor Area (Sq.Ft)</label>
                <input type="number" step="0.01" class="form-control" name="floor_area_sqft" placeholder="e.g. 1250" />
              </div>
              <div class="col-md-3">
                <label class="form-label fw-semibold">Balconies Count</label>
                <input type="number" min="0" class="form-control" name="spec_balconies_count" placeholder="e.g. 1" />
              </div>

              <div class="col-md-4">
                <label class="form-label fw-semibold">Water Heating</label>
                <select class="form-select" name="spec_water_heating">
                  <option value="">Select heating</option>
                  <option value="solar">Solar Water Heating</option>
                  <option value="instant">Instant Shower Head</option>
                  <option value="geyser">Electric Geyser Boiler</option>
                  <option value="solar_and_geyser">Hybrid Solar + Geyser</option>
                </select>
              </div>
              <div class="col-md-4">
                <label class="form-label fw-semibold">Pet Policy</label>
                <select class="form-select" name="spec_pet_policy">
                  <option value="allowed">Pets Allowed</option>
                  <option value="cats_only">Cats Only</option>
                  <option value="no_pets">Strictly No Pets</option>
                </select>
              </div>
              <div class="col-md-4 d-flex align-items-center gap-3 pt-3">
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" name="spec_dsq" value="1" id="add_spec_dsq" />
                  <label class="form-check-label fw-semibold" for="add_spec_dsq">Includes DSQ (Servant Quarter)</label>
                </div>
              </div>
            </div>

          @elseif($property->type === 'commercial_office')
            <!-- COMMERCIAL OFFICE FIELDS -->
            <div class="row g-3 mb-4">
              <div class="col-md-4">
                <label class="form-label fw-semibold">Floor Area (Sq.Ft) *</label>
                <input type="number" step="0.01" class="form-control" name="floor_area_sqft" placeholder="e.g. 2400" />
              </div>
              <div class="col-md-4">
                <label class="form-label fw-semibold">Workstations Capacity</label>
                <input type="number" min="0" class="form-control" name="spec_workstations_capacity" placeholder="e.g. 20 desks" />
              </div>
              <div class="col-md-4">
                <label class="form-label fw-semibold">Meeting Rooms Count</label>
                <input type="number" min="0" class="form-control" name="spec_meeting_rooms_count" placeholder="e.g. 2" />
              </div>

              <div class="col-md-4">
                <label class="form-label fw-semibold">Generator Backup Allocation (KVA)</label>
                <input type="number" min="0" class="form-control" name="spec_backup_generator_kva" placeholder="e.g. 50" />
              </div>
              <div class="col-md-8 d-flex flex-wrap gap-4 pt-3">
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" name="spec_private_kitchenette" value="1" id="add_private_kitchenette" />
                  <label class="form-check-label fw-semibold" for="add_private_kitchenette">Private Kitchenette / Pantry</label>
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" name="spec_private_washrooms" value="1" id="add_private_washrooms" />
                  <label class="form-check-label fw-semibold" for="add_private_washrooms">Private Restrooms</label>
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" name="spec_server_room_ready" value="1" id="add_server_room_ready" />
                  <label class="form-check-label fw-semibold" for="add_server_room_ready">Server Room Ready (AC+LAN)</label>
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" name="spec_hvac_installed" value="1" id="add_hvac_installed" />
                  <label class="form-check-label fw-semibold" for="add_hvac_installed">Central HVAC / AC Units</label>
                </div>
              </div>
            </div>

          @elseif($property->type === 'commercial_mall')
            <!-- COMMERCIAL MALL / RETAIL FIELDS -->
            <div class="row g-3 mb-4">
              <div class="col-md-4">
                <label class="form-label fw-semibold">Retail Classification</label>
                <select class="form-select" name="unit_type">
                  <option value="retail_shop">Standard Retail Shop</option>
                  <option value="restaurant_cafe">Restaurant / Café</option>
                  <option value="food_court_stall">Food Court Stall</option>
                  <option value="anchor_store">Anchor Supermarket / Store</option>
                  <option value="kiosk">Atrium Kiosk / Booth</option>
                  <option value="pharmacy_clinic">Pharmacy / Clinic</option>
                  <option value="banking_hall">Banking Hall / ATM Space</option>
                </select>
              </div>
              <div class="col-md-4">
                <label class="form-label fw-semibold">Floor Area (Sq.Ft)</label>
                <input type="number" step="0.01" class="form-control" name="floor_area_sqft" placeholder="e.g. 850" />
              </div>
              <div class="col-md-4">
                <label class="form-label fw-semibold">Glass Frontage Width (Meters)</label>
                <input type="number" step="0.1" class="form-control" name="spec_frontage_width_meters" placeholder="e.g. 6.5" />
              </div>

              <div class="col-md-4">
                <label class="form-label fw-semibold">Mall Promenade Zone</label>
                <input type="text" class="form-control" name="spec_mall_zone" placeholder="e.g. Main Atrium, Food Court" />
              </div>
              <div class="col-md-4">
                <label class="form-label fw-semibold">Commercial Power (KVA)</label>
                <input type="number" class="form-control" name="spec_power_kva_rating" placeholder="e.g. 45" />
              </div>
              <div class="col-md-4 d-flex flex-wrap gap-3 pt-3">
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" name="spec_has_grease_trap" value="1" id="add_has_grease_trap" />
                  <label class="form-check-label fw-semibold" for="add_has_grease_trap">Grease Trap Installed (F&B)</label>
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" name="spec_exhaust_ducting_installed" value="1" id="add_exhaust_ducting" />
                  <label class="form-check-label fw-semibold" for="add_exhaust_ducting">Kitchen Exhaust Ducting</label>
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" name="spec_three_phase_power" value="1" id="add_three_phase" />
                  <label class="form-check-label fw-semibold" for="add_three_phase">3-Phase Power</label>
                </div>
              </div>
            </div>

          @elseif($property->type === 'industrial_warehouse')
            <!-- INDUSTRIAL / WAREHOUSE FIELDS -->
            <div class="row g-3 mb-4">
              <div class="col-md-3">
                <label class="form-label fw-semibold">Floor Area (Sq.Ft) *</label>
                <input type="number" step="0.01" class="form-control" name="floor_area_sqft" placeholder="e.g. 6000" />
              </div>
              <div class="col-md-3">
                <label class="form-label fw-semibold">Clear Eaves Height (m)</label>
                <input type="number" step="0.1" class="form-control" name="spec_clear_height_meters" placeholder="e.g. 9.5" />
              </div>
              <div class="col-md-3">
                <label class="form-label fw-semibold">Loading Docks Count</label>
                <input type="number" class="form-control" name="spec_loading_docks_count" placeholder="e.g. 2" />
              </div>
              <div class="col-md-3">
                <label class="form-label fw-semibold">Floor Load Capacity (Tons/m²)</label>
                <input type="number" step="0.1" class="form-control" name="spec_floor_load_capacity_tons" placeholder="e.g. 5.0" />
              </div>

              <div class="col-md-4">
                <label class="form-label fw-semibold">Mezzanine Office Area (Sq.Ft)</label>
                <input type="number" step="0.01" class="form-control" name="spec_mezzanine_office_sqft" placeholder="e.g. 450" />
              </div>
              <div class="col-md-8 d-flex flex-wrap gap-4 pt-3">
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" name="spec_dock_levelers" value="1" id="add_dock_levelers" />
                  <label class="form-check-label fw-semibold" for="add_dock_levelers">Dock Levelers Installed</label>
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" name="spec_sprinkler_system" value="1" id="add_sprinklers" />
                  <label class="form-check-label fw-semibold" for="add_sprinklers">Overhead Sprinkler System</label>
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" name="spec_heavy_truck_access" value="1" id="add_truck_access" />
                  <label class="form-check-label fw-semibold" for="add_truck_access">40ft Articulated Truck Access</label>
                </div>
              </div>
            </div>

          @else
            <!-- MIXED USE / GENERAL FIELDS -->
            <div class="row g-3 mb-4">
              <div class="col-md-4">
                <label class="form-label fw-semibold">Unit Type / Usage</label>
                <input type="text" class="form-control" name="unit_type" placeholder="e.g. Serviced Suite, Studio, Office" />
              </div>
              <div class="col-md-4">
                <label class="form-label fw-semibold">Floor Area (Sq.Ft)</label>
                <input type="number" step="0.01" class="form-control" name="floor_area_sqft" placeholder="e.g. 800" />
              </div>
              <div class="col-md-4">
                <label class="form-label fw-semibold">Bed Configuration</label>
                <input type="text" class="form-control" name="spec_bed_configuration" placeholder="e.g. 1 King Bed" />
              </div>
              <div class="col-md-6">
                <label class="form-label fw-semibold">Short-Term Daily Rate (Ksh)</label>
                <input type="number" step="0.01" class="form-control" name="spec_daily_rate" placeholder="e.g. 6000.00" />
              </div>
              <div class="col-md-6">
                <label class="form-label fw-semibold">Wi-Fi SSID / Access Name</label>
                <input type="text" class="form-control" name="spec_wifi_ssid" placeholder="e.g. Horizon_Guest" />
              </div>
            </div>
          @endif

          <!-- 3. Utilities, Parking & Access -->
          <h6 class="text-primary border-bottom pb-2 mb-3 fw-bold">
            <i class="bi bi-speedometer me-1"></i>3. Utilities, Parking & Access Control
          </h6>
          <div class="row g-3">
            <div class="col-md-4">
              <label class="form-label fw-semibold">Electricity Meter # / Token Account</label>
              <div class="input-group">
                <span class="input-group-text"><i class="bi bi-lightning-charge text-warning"></i></span>
                <input type="text" class="form-control" name="electricity_meter_no" placeholder="e.g. KPLC-104928" />
              </div>
            </div>
            <div class="col-md-4">
              <label class="form-label fw-semibold">Water Meter # / Sub-meter</label>
              <div class="input-group">
                <span class="input-group-text"><i class="bi bi-droplet text-primary"></i></span>
                <input type="text" class="form-control" name="water_meter_no" placeholder="e.g. SUB-WAT-401" />
              </div>
            </div>
            <div class="col-md-4">
              <label class="form-label fw-semibold">Key Tag / Lock Code</label>
              <div class="input-group">
                <span class="input-group-text"><i class="bi bi-key text-secondary"></i></span>
                <input type="text" class="form-control" name="key_code" placeholder="e.g. TAG-B12, PIN-401" />
              </div>
            </div>
            <div class="col-md-12">
              <label class="form-label fw-semibold">Allocated Parking Bays / Slots</label>
              <input type="text" class="form-control" name="parking_slots" placeholder="e.g. Bay #P104, #P105 (Basement 1)" />
            </div>
          </div>
        </div>

        <div class="modal-footer bg-light">
          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary">
            <i class="bi bi-check2-circle me-1"></i> Save & Register Unit
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- ============================================================== -->
<!-- MODAL: UNIT SPECIFICATIONS QUICK VIEWER                        -->
<!-- ============================================================== -->
<div class="modal fade" id="unitSpecsModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-md modal-dialog-centered">
    <div class="modal-content border-0 shadow">
      <div class="modal-header bg-dark text-white">
        <h5 class="modal-title text-white" id="specsModalTitle">Unit Specifications</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body p-4" id="specsModalBody">
        <!-- Injected via JavaScript -->
      </div>
      <div class="modal-footer bg-light">
        <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<!-- ============================================================== -->
<!-- MODAL: EDIT UNIT DETAILS & SPECS                               -->
<!-- ============================================================== -->
<div class="modal fade" id="editUnitModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-scrollable">
    <div class="modal-content border-0 shadow">
      <div class="modal-header bg-primary text-white">
        <h5 class="modal-title text-white" id="editUnitModalTitle">
          <i class="bi bi-pencil-square me-2"></i>Edit Unit Details
        </h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>

      <form id="editUnitForm" method="POST">
        @csrf
        @method('PUT')
        <div class="modal-body p-4">
          <div class="row g-3 mb-3">
            <div class="col-md-4">
              <label class="form-label fw-semibold">Unit Number / Code *</label>
              <input type="text" class="form-control" id="edit_unit_number" name="unit_number" required />
            </div>
            <div class="col-md-4">
              <label class="form-label fw-semibold">Floor Level</label>
              <input type="text" class="form-control" id="edit_floor_level" name="floor_level" />
            </div>
            <div class="col-md-4">
              <label class="form-label fw-semibold">Wing / Block</label>
              <input type="text" class="form-control" id="edit_wing_or_block" name="wing_or_block" />
            </div>

            <div class="col-md-4">
              <label class="form-label fw-semibold">Monthly Base Rent (Ksh) *</label>
              <input type="number" step="0.01" class="form-control" id="edit_rental_rate" name="rental_rate" required />
            </div>
            <div class="col-md-4">
              <label class="form-label fw-semibold">Service Charge (Ksh)</label>
              <input type="number" step="0.01" class="form-control" id="edit_service_charge" name="service_charge" />
            </div>
            <div class="col-md-4">
              <label class="form-label fw-semibold">Status</label>
              <select class="form-select" id="edit_status" name="status">
                <option value="vacant">Vacant</option>
                <option value="occupied">Occupied</option>
                <option value="maintenance">Under Maintenance</option>
              </select>
            </div>

            <div class="col-md-4">
              <label class="form-label fw-semibold">Furnishing Status</label>
              <select class="form-select" id="edit_furnishing_status" name="furnishing_status">
                <option value="unfurnished">Unfurnished</option>
                <option value="semi_furnished">Semi-Furnished</option>
                <option value="furnished">Fully Furnished</option>
                <option value="shell_and_core">Shell & Core</option>
              </select>
            </div>
            <div class="col-md-4">
              <label class="form-label fw-semibold">Floor Area (Sq.Ft)</label>
              <input type="number" step="0.01" class="form-control" id="edit_floor_area_sqft" name="floor_area_sqft" />
            </div>
            <div class="col-md-4">
              <label class="form-label fw-semibold">Parking Slots</label>
              <input type="text" class="form-control" id="edit_parking_slots" name="parking_slots" />
            </div>

            <div class="col-md-4">
              <label class="form-label fw-semibold">Electricity Meter #</label>
              <input type="text" class="form-control" id="edit_electricity_meter_no" name="electricity_meter_no" />
            </div>
            <div class="col-md-4">
              <label class="form-label fw-semibold">Water Meter #</label>
              <input type="text" class="form-control" id="edit_water_meter_no" name="water_meter_no" />
            </div>
            <div class="col-md-4">
              <label class="form-label fw-semibold">Key Tag / Lock Code</label>
              <input type="text" class="form-control" id="edit_key_code" name="key_code" />
            </div>
          </div>
        </div>

        <div class="modal-footer bg-light">
          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary">
            <i class="bi bi-floppy me-1"></i> Update Unit Details
          </button>
        </div>
      </form>
    </div>
  </div>
</div>
@endsection

@section('page-script')
<script>
  document.addEventListener('DOMContentLoaded', function() {
    // 1. View Specs Modal Handler
    document.querySelectorAll('.btn-view-specs').forEach(function(btn) {
      btn.addEventListener('click', function() {
        const unit = JSON.parse(this.getAttribute('data-unit'));
        const summary = this.getAttribute('data-summary');
        const specs = unit.specifications || {};

        document.getElementById('specsModalTitle').innerHTML = `
          <i class="bi bi-door-open me-2"></i>Unit ${unit.unit_number} Specifications
        `;

        let specsHtml = `
          <div class="mb-3 text-center pb-3 border-bottom">
            <h4 class="mb-1 text-primary">Unit ${unit.unit_number}</h4>
            <span class="badge bg-label-info fs-6">${summary}</span>
            <div class="text-muted small mt-1">
              ${unit.floor_level ? unit.floor_level : ''} ${unit.wing_or_block ? '• ' + unit.wing_or_block : ''}
            </div>
          </div>

          <table class="table table-sm table-borderless mb-0">
            <tbody>
              <tr>
                <td class="text-muted" style="width: 45%;">Gross Rent:</td>
                <td><strong class="text-success">Ksh ${(parseFloat(unit.rental_rate) + parseFloat(unit.service_charge)).toLocaleString('en-KE', {minimumFractionDigits: 2})}</strong></td>
              </tr>
              <tr>
                <td class="text-muted">Furnishing:</td>
                <td><span class="badge bg-label-secondary text-capitalize">${(unit.furnishing_status || 'unfurnished').replace('_', ' ')}</span></td>
              </tr>
              <tr>
                <td class="text-muted">Floor Area:</td>
                <td>${unit.floor_area_sqft ? Number(unit.floor_area_sqft).toLocaleString() + ' sqft' : 'Not recorded'}</td>
              </tr>
              <tr>
                <td class="text-muted">Electricity Meter:</td>
                <td>${unit.electricity_meter_no ? '<span class="font-monospace text-warning"><i class="bi bi-lightning-charge me-1"></i>' + unit.electricity_meter_no + '</span>' : '<span class="text-muted">None</span>'}</td>
              </tr>
              <tr>
                <td class="text-muted">Water Meter:</td>
                <td>${unit.water_meter_no ? '<span class="font-monospace text-primary"><i class="bi bi-droplet me-1"></i>' + unit.water_meter_no + '</span>' : '<span class="text-muted">None</span>'}</td>
              </tr>
              <tr>
                <td class="text-muted">Parking Bay:</td>
                <td>${unit.parking_slots ? '<i class="bi bi-p-square me-1"></i>' + unit.parking_slots : '<span class="text-muted">None</span>'}</td>
              </tr>
              <tr>
                <td class="text-muted">Key / Access Code:</td>
                <td>${unit.key_code ? '<span class="font-monospace"><i class="bi bi-key me-1"></i>' + unit.key_code + '</span>' : '<span class="text-muted">None</span>'}</td>
              </tr>
        `;

        if (Object.keys(specs).length > 0) {
          specsHtml += `
              <tr><td colspan="2" class="pt-3"><strong class="text-primary border-bottom d-block pb-1">Additional Category Details</strong></td></tr>
          `;
          for (const [key, value] of Object.entries(specs)) {
            const formattedKey = key.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
            let displayVal = value;
            if (typeof value === 'boolean') {
              displayVal = value ? '<span class="badge bg-label-success">Yes</span>' : '<span class="badge bg-label-secondary">No</span>';
            }
            specsHtml += `
              <tr>
                <td class="text-muted">${formattedKey}:</td>
                <td><strong>${displayVal}</strong></td>
              </tr>
            `;
          }
        }

        specsHtml += `
            </tbody>
          </table>
        `;

        document.getElementById('specsModalBody').innerHTML = specsHtml;
        const modal = new bootstrap.Modal(document.getElementById('unitSpecsModal'));
        modal.show();
      });
    });

    // 2. Edit Unit Modal Handler
    document.querySelectorAll('.btn-edit-unit').forEach(function(btn) {
      btn.addEventListener('click', function() {
        const unit = JSON.parse(this.getAttribute('data-unit'));
        const updateUrl = this.getAttribute('data-update-url');

        document.getElementById('editUnitForm').setAttribute('action', updateUrl);
        document.getElementById('edit_unit_number').value = unit.unit_number || '';
        document.getElementById('edit_floor_level').value = unit.floor_level || '';
        document.getElementById('edit_wing_or_block').value = unit.wing_or_block || '';
        document.getElementById('edit_rental_rate').value = unit.rental_rate || '0';
        document.getElementById('edit_service_charge').value = unit.service_charge || '0';
        document.getElementById('edit_status').value = unit.status || 'vacant';
        document.getElementById('edit_furnishing_status').value = unit.furnishing_status || 'unfurnished';
        document.getElementById('edit_floor_area_sqft').value = unit.floor_area_sqft || '';
        document.getElementById('edit_parking_slots').value = unit.parking_slots || '';
        document.getElementById('edit_electricity_meter_no').value = unit.electricity_meter_no || '';
        document.getElementById('edit_water_meter_no').value = unit.water_meter_no || '';
        document.getElementById('edit_key_code').value = unit.key_code || '';

        const modal = new bootstrap.Modal(document.getElementById('editUnitModal'));
        modal.show();
      });
    });
  });
</script>
@endsection