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

@extends('layouts/layoutMaster')

@section('title', 'Owner Dashboard')

@section('content')
<div class="container-fluid">
  @if (session('success'))
    <div class="alert alert-success mb-4">{{ session('success') }}</div>
  @endif

  @if($kyc_status !== 'approved')
    <!-- KYC Submission/Status Area -->
    <div class="card">
      <div class="card-header">
        <h5 class="mb-0">Property Owner Verification (KYC)</h5>
        <p class="text-muted mb-0">Please verify your identity and tax registry status before managing properties.</p>
      </div>
      <div class="card-body">
        @if($kyc_status === 'pending')
          <div class="alert alert-warning">
            Your KYC documents have been submitted and are pending review by a System Administrator.
          </div>
        @elseif($kyc_status === 'rejected')
          <div class="alert alert-danger">
            Your previous KYC verification request was rejected. Please re-submit valid details and documents.
          </div>
        @endif

        @if($kyc_status === 'pending')
          <div class="text-center py-4">
            <i class="bi bi-clock icon-32px text-warning mb-2"></i>
            <h6>Awaiting Verification Approval...</h6>
          </div>
        @else
          <!-- Submission Form -->
          <form action="{{ route('owner.kyc.submit') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="row">
              <div class="col-md-6 mb-4">
                <label for="owner_type" class="form-label">Ownership Entity Type</label>
                <select class="form-select" id="owner_type" name="owner_type" required onchange="toggleCompanyFields(this.value)">
                  <option value="individual" {{ old('owner_type') === 'individual' ? 'selected' : '' }}>Individual Owner</option>
                  <option value="company" {{ old('owner_type') === 'company' ? 'selected' : '' }}>Corporate Company</option>
                </select>
              </div>
              <div class="col-md-6 mb-4">
                <label for="tax_id" class="form-label">Tax ID (KRA PIN / VAT No)</label>
                <input type="text" class="form-control" id="tax_id" name="tax_id" placeholder="Enter your Tax ID" value="{{ old('tax_id') }}" required />
              </div>
            </div>

            <div id="companyFields" style="display: none;">
              <div class="row">
                <div class="col-md-6 mb-4">
                  <label for="company_name" class="form-label">Registered Company Name</label>
                  <input type="text" class="form-control" id="company_name" name="company_name" placeholder="Enter Company Name" value="{{ old('company_name') }}" />
                </div>
                <div class="col-md-6 mb-4">
                  <label for="registration_number" class="form-label">Company Registration Number</label>
                  <input type="text" class="form-control" id="registration_number" name="registration_number" placeholder="Enter Reg Number" value="{{ old('registration_number') }}" />
                </div>
              </div>
            </div>

            <div class="mb-4">
              <label for="kyc_doc" class="form-label">Identity Verification File (Passport / National ID / Cert of Inc. PDF/Image)</label>
              <input class="form-control" type="file" id="kyc_doc" name="kyc_doc" required />
            </div>

            <button type="submit" class="btn btn-primary">Submit KYC Details</button>
          </form>
          
          <script>
            function toggleCompanyFields(val) {
              const companyDiv = document.getElementById('companyFields');
              if (val === 'company') {
                companyDiv.style.display = 'block';
                document.getElementById('company_name').required = true;
                document.getElementById('registration_number').required = true;
              } else {
                companyDiv.style.display = 'none';
                document.getElementById('company_name').required = false;
                document.getElementById('registration_number').required = false;
              }
            }
            // Trigger initially
            window.onload = function() {
              toggleCompanyFields(document.getElementById('owner_type').value);
            };
          </script>
        @endif
      </div>
    </div>
  @else
    <!-- KYC Approved Dashboard content -->
    <!-- Owner Charts Row -->
    <div class="row mb-4">
      <div class="col-md-8">
        <div class="card h-100">
          <div class="card-header border-bottom d-flex justify-content-between align-items-center">
            <h5 class="mb-0"><i class="bi bi-bar-chart-line me-2 text-primary"></i>Revenue Analytics</h5>
            <small class="text-muted">6-Month collections overview</small>
          </div>
          <div class="card-body pt-3">
            <div id="revenueChart"></div>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card h-100 text-center">
          <div class="card-header border-bottom">
            <h5 class="mb-0">Unit Occupancy</h5>
          </div>
          <div class="card-body d-flex flex-column align-items-center justify-content-center pt-4">
            <div id="occupancyGauge"></div>
            <h3 class="fw-bold mb-0 text-primary">{{ $occupancyRate }}%</h3>
            <p class="text-muted small mt-1 mb-0">Total units leased out successfully</p>
          </div>
        </div>
      </div>
    </div>

    <!-- Properties List -->
    <div class="row">
      <!-- Properties List -->
      <div class="col-md-7 mb-4">
        <div class="card h-100">
          <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0">My Properties</h5>
            <a href="{{ route('properties.create') }}" class="btn btn-sm btn-primary">Add Property</a>
          </div>
          <div class="table-responsive text-nowrap">
            <table class="table">
              <thead>
                <tr>
                  <th>Property Name</th>
                  <th>Address</th>
                  <th>Type</th>
                  <th>Units Count</th>
                </tr>
              </thead>
              <tbody>
                @forelse($properties as $property)
                  <tr>
                    <td><strong>{{ $property->name }}</strong></td>
                    <td>{{ $property->address }}</td>
                    <td><span class="badge bg-label-secondary">{{ str_replace('_', ' ', ucfirst($property->type)) }}</span></td>
                    <td>{{ $property->units->count() }}</td>
                  </tr>
                @empty
                  <tr>
                    <td colspan="4" class="text-center py-4 text-muted">No properties registered yet.</td>
                  </tr>
                @endforelse
              </tbody>
            </table>
          </div>
        </div>
      </div>

      <!-- Pending Tenant KYC approvals -->
      <div class="col-md-5 mb-4">
        <div class="card h-100">
          <div class="card-header">
            <h5 class="mb-0">Pending Tenant Verifications</h5>
            <p class="text-muted mb-0">Approve KYC profiles for tenants leasing your properties.</p>
          </div>
          <div class="card-body p-0 table-responsive text-nowrap">
            <table class="table table-hover">
              <thead>
                <tr>
                  <th>Tenant</th>
                  <th>Type</th>
                  <th>Document</th>
                  <th>Action</th>
                </tr>
              </thead>
              <tbody>
                @forelse($pendingTenants as $tenant)
                  @php
                    $files = glob(storage_path("app/private/kyc/tenant_{$tenant->id}/document.*"));
                    $fileName = count($files) > 0 ? basename($files[0]) : 'document.pdf';
                  @endphp
                  <tr>
                    <td>
                      <div><strong>{{ $tenant->name }}</strong></div>
                      @if($tenant->tenantProfile->company_name)
                        <div class="text-muted small">{{ $tenant->tenantProfile->company_name }}</div>
                      @endif
                    </td>
                    <td>{{ ucfirst($tenant->tenantProfile->tenant_type) }}</td>
                    <td>
                      <a href="{{ route('kyc.tenant.download', ['tenant' => $tenant->id, 'file' => $fileName]) }}" class="btn btn-xs btn-outline-info">
                        View Doc
                      </a>
                    </td>
                    <td>
                      <div class="d-flex gap-1">
                        <form action="{{ route('kyc.tenant.approve', $tenant->id) }}" method="POST">
                          @csrf
                          <button type="submit" class="btn btn-xs btn-success">Approve</button>
                        </form>
                        <form action="{{ route('kyc.tenant.reject', $tenant->id) }}" method="POST">
                          @csrf
                          <button type="submit" class="btn btn-xs btn-danger">Reject</button>
                        </form>
                      </div>
                    </td>
                  </tr>
                @empty
                  <tr>
                    <td colspan="4" class="text-center py-4 text-muted">No pending tenant verifications.</td>
                  </tr>
                @endforelse
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  @endif
</div>
@endsection

@if($kyc_status === 'approved')
@section('vendor-style')
  @vite(['resources/assets/vendor/libs/apex-charts/apex-charts.scss'])
@endsection

@section('vendor-script')
  @vite(['resources/assets/vendor/libs/apex-charts/apexcharts.js'])
@endsection

@section('page-script')
<script>
  document.addEventListener('DOMContentLoaded', function() {
    // 1. Revenue Chart
    const months = @json($months ?? []);
    const chartBilled = @json($chartBilled ?? []);
    const chartPaid = @json($chartPaid ?? []);

    const revenueOptions = {
      chart: {
        type: 'bar',
        height: 280,
        toolbar: { show: false }
      },
      series: [
        { name: 'Billed (Ksh)', data: chartBilled },
        { name: 'Collected (Ksh)', data: chartPaid }
      ],
      xaxis: { categories: months },
      colors: ['#095ecd', '#28c76f'],
      plotOptions: {
        bar: { columnWidth: '40%', borderRadius: 4 }
      },
      dataLabels: { enabled: false },
      legend: { show: true, position: 'top' },
      grid: { strokeDashArray: 4 }
    };

    const revenueChart = new ApexCharts(document.querySelector('#revenueChart'), revenueOptions);
    revenueChart.render();

    // 2. Occupancy Radial Gauge
    const occupancyRate = {{ $occupancyRate ?? 0 }};
    const occupancyOptions = {
      chart: {
        type: 'radialBar',
        height: 200,
        sparkline: { enabled: true }
      },
      series: [occupancyRate],
      plotOptions: {
        radialBar: {
          startAngle: -90,
          endAngle: 90,
          track: {
            background: '#e7e7e7',
            strokeWidth: '97%',
            margin: 5
          },
          dataLabels: {
            name: { show: false },
            value: { show: false }
          }
        }
      },
      fill: {
        type: 'gradient',
        gradient: {
          shade: 'light',
          shadeIntensity: 0.4,
          inverseColors: false,
          opacityFrom: 1,
          opacityTo: 1,
          stops: [0, 50, 65, 91]
        }
      },
      labels: ['Occupancy']
    };

    const occupancyChart = new ApexCharts(document.querySelector('#occupancyGauge'), occupancyOptions);
    occupancyChart.render();
  });
</script>
@endsection
@endif