@extends('layouts.tenant')

@section('title', 'Reports & Financial Analytics')
@section('page-title', 'Financial & Operational Reports')

@section('content')
<!-- Printable Header (Visible Only When Printing) -->
<div class="printable-header d-none d-print-block mb-4 pb-3 border-bottom">
  <div class="d-flex justify-content-between align-items-start">
    <div>
      <h3 class="fw-bold mb-1 text-dark">{{ $tenant->name }}</h3>
      <div class="small text-muted">{{ $tenant->address ?? 'Main Branch' }}</div>
      <div class="small text-muted">Phone: {{ $tenant->phone ?? 'N/A' }} | Email: {{ $tenant->email ?? 'N/A' }}</div>
    </div>
    <div class="text-end">
      <h4 class="fw-extrabold text-uppercase text-primary mb-1">Financial &amp; Operational Report</h4>
      <div class="small text-muted">Period: <strong>{{ $startDate->format('d M Y') }}</strong> to <strong>{{ $endDate->format('d M Y') }}</strong></div>
      <div class="small text-muted">Generated: {{ now()->format('d M Y, H:i') }}</div>
      @if($staffId)
        <div class="badge bg-secondary mt-1">Staff Filter Applied</div>
      @endif
    </div>
  </div>
</div>

<!-- Screen Filter Controls (Hidden When Printing) -->
<div class="card-custom mb-4 d-print-none">
  <form method="GET" action="{{ route('tenant.reports.index', ['slug' => $slug]) }}" class="row g-3 align-items-end">
    <div class="col-md-3">
      <label class="form-label-custom">Start Date</label>
      <input type="date" name="start_date" class="form-control-custom" value="{{ request('start_date', $startDate->format('Y-m-d')) }}">
    </div>
    <div class="col-md-3">
      <label class="form-label-custom">End Date</label>
      <input type="date" name="end_date" class="form-control-custom" value="{{ request('end_date', $endDate->format('Y-m-d')) }}">
    </div>
    <div class="col-md-3">
      <label class="form-label-custom">Filter by Staff Member</label>
      <select name="staff_id" class="form-control-custom">
        <option value="">-- All Staff &amp; Technicians --</option>
        @foreach($staffList as $st)
          <option value="{{ $st->id }}" {{ request('staff_id') == $st->id ? 'selected' : '' }}>{{ $st->name }} ({{ ucfirst($st->role) }})</option>
        @endforeach
      </select>
    </div>
    <div class="col-md-3 d-flex gap-2">
      <button type="submit" class="btn-primary-custom w-100 justify-content-center py-2"><i class="bi bi-funnel-fill me-1"></i> Apply Filter</button>
      <button type="button" class="btn-outline-custom py-2 px-3 text-nowrap" onclick="window.print()"><i class="bi bi-printer-fill me-1"></i> Print Report</button>
    </div>
  </form>
</div>

<!-- Revenue Key Metric Cards -->
<div class="row g-3 mb-4">
  <div class="col-md-4 col-sm-6">
    <div class="card-custom p-3 border-start border-4 border-primary">
      <div class="text-muted small uppercase fw-bold mb-1">Total Gross Revenue</div>
      <div class="fs-3 fw-extrabold text-primary">{{ $currency_symbol }}{{ number_format($grandTotalRevenue, 2) }}</div>
      <div class="small text-muted mt-1">Assembly + Device Sales + Repairs</div>
    </div>
  </div>

  <div class="col-md-4 col-sm-6">
    <div class="card-custom p-3 border-start border-4 border-success">
      <div class="text-muted small uppercase fw-bold mb-1">Cash &amp; Payments Collected</div>
      <div class="fs-3 fw-extrabold text-success">{{ $currency_symbol }}{{ number_format($totalCashCollected, 2) }}</div>
      <div class="small text-muted mt-1">Actual Paid Amounts Received</div>
    </div>
  </div>

  <div class="col-md-4 col-sm-6">
    <div class="card-custom p-3 border-start border-4 border-danger">
      <div class="text-muted small uppercase fw-bold mb-1">Outstanding Receivables</div>
      <div class="fs-3 fw-extrabold text-danger">{{ $currency_symbol }}{{ number_format($totalReceivables, 2) }}</div>
      <div class="small text-muted mt-1">Unpaid Balance / Credit Debt</div>
    </div>
  </div>
</div>

<div class="row g-3 mb-4">
  <div class="col-md-4">
    <div class="card-custom p-3 border-start border-4 border-info">
      <div class="text-muted small uppercase fw-bold mb-1">Assembly POS Sales</div>
      <div class="fs-4 fw-extrabold text-info">{{ $currency_symbol }}{{ number_format($totalAssemblySales, 2) }}</div>
      <div class="small text-muted mt-1">{{ $totalAssemblyCount }} Invoices Completed</div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card-custom p-3 border-start border-4 border-warning">
      <div class="text-muted small uppercase fw-bold mb-1">Device Sales</div>
      <div class="fs-4 fw-extrabold text-warning">{{ $currency_symbol }}{{ number_format($totalDeviceSales, 2) }}</div>
      <div class="small text-muted mt-1">{{ $totalDeviceCount }} Serialized Devices Sold</div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card-custom p-3 border-start border-4 border-secondary">
      <div class="text-muted small uppercase fw-bold mb-1">Repair Estimated Revenue</div>
      <div class="fs-4 fw-extrabold text-dark">{{ $currency_symbol }}{{ number_format($totalRepairRevenue, 2) }}</div>
      <div class="small text-muted mt-1">{{ $totalRepairs }} Total Jobs Logged</div>
    </div>
  </div>
</div>

<!-- Detailed Revenue & Repair Breakdown -->
<div class="row g-3 mb-4">
  <!-- Repair Lifecycle Breakdown -->
  <div class="col-lg-7">
    <div class="card-custom h-100">
      <h6 class="fw-bold mb-3"><i class="bi bi-tools text-primary me-2"></i> Repair Lifecycle &amp; Status Breakdown</h6>
      
      <div class="row text-center g-2 mb-3">
        <div class="col-3">
          <div class="p-2 bg-body-tertiary rounded border">
            <div class="small text-muted">Total Logged</div>
            <div class="fw-bold fs-5">{{ $totalRepairs }}</div>
          </div>
        </div>
        <div class="col-3">
          <div class="p-2 bg-warning-subtle rounded border border-warning">
            <div class="small text-warning-emphasis">In Progress</div>
            <div class="fw-bold fs-5 text-warning">{{ $pendingRepairs }}</div>
          </div>
        </div>
        <div class="col-3">
          <div class="p-2 bg-success-subtle rounded border border-success">
            <div class="small text-success-emphasis">Ready/Repaired</div>
            <div class="fw-bold fs-5 text-success">{{ $completedRepairs }}</div>
          </div>
        </div>
        <div class="col-3">
          <div class="p-2 bg-secondary-subtle rounded border">
            <div class="small text-secondary">Delivered</div>
            <div class="fw-bold fs-5 text-secondary">{{ $deliveredRepairs }}</div>
          </div>
        </div>
      </div>

      <div class="p-3 bg-body-tertiary rounded border mb-3">
        <div class="d-flex justify-content-between align-items-center mb-1">
          <span class="fw-semibold">Estimated Repair Jobs Value:</span>
          <strong class="fs-5 text-primary">{{ $currency_symbol }}{{ number_format($totalRepairRevenue, 2) }}</strong>
        </div>
      </div>
    </div>
  </div>

  <!-- Device Sales Category Breakdown -->
  <div class="col-lg-5">
    <div class="card-custom h-100">
      <h6 class="fw-bold mb-3"><i class="bi bi-phone-vibrate text-warning me-2"></i> Device Sales by Type</h6>
      <table class="table-custom">
        <thead>
          <tr>
            <th>Device Type</th>
            <th class="text-center">Units Sold</th>
            <th class="text-end">Total Value</th>
          </tr>
        </thead>
        <tbody>
          @forelse($deviceBreakdown as $db)
            <tr>
              <td class="fw-semibold">{{ $db->device_type }}</td>
              <td class="text-center"><span class="badge bg-primary fs-6">{{ $db->count }}</span></td>
              <td class="text-end fw-bold text-success">{{ $currency_symbol }}{{ number_format($db->total, 2) }}</td>
            </tr>
          @empty
            <tr><td colspan="3" class="text-center text-muted py-3">No device sales recorded in this date range.</td></tr>
          @endforelse
        </tbody>
      </table>
    </div>
  </div>
</div>

<!-- Payment Method Distribution -->
<div class="card-custom mb-4">
  <h6 class="fw-bold mb-3"><i class="bi bi-credit-card-2-front-fill text-success me-2"></i> Payment Method Revenue Distribution</h6>
  <div class="table-responsive">
    <table class="table-custom">
      <thead>
        <tr>
          <th>Payment Method</th>
          <th class="text-center">Transaction Count</th>
          <th class="text-end">Paid Amount Collected</th>
          <th class="text-end">Total Invoice Value</th>
        </tr>
      </thead>
      <tbody>
        @forelse($assemblyPaymentBreakdown as $pm)
          <tr>
            <td class="fw-bold text-capitalize">
              <i class="bi bi-wallet2 text-primary me-2"></i> {{ $pm->payment_method }}
            </td>
            <td class="text-center"><span class="badge bg-secondary fs-6">{{ $pm->count }}</span></td>
            <td class="text-end fw-bold text-success">{{ $currency_symbol }}{{ number_format($pm->total_paid, 2) }}</td>
            <td class="text-end fw-bold">{{ $currency_symbol }}{{ number_format($pm->total_grand, 2) }}</td>
          </tr>
        @empty
          <tr><td colspan="4" class="text-center text-muted py-3">No payment records found for this period.</td></tr>
        @endforelse
      </tbody>
    </table>
  </div>
</div>

<!-- Staff & Technician Performance Table -->
<div class="card-custom mb-4">
  <h6 class="fw-bold mb-3"><i class="bi bi-people-fill text-info me-2"></i> Staff &amp; Technician Sales Performance</h6>
  <div class="table-responsive">
    <table class="table-custom">
      <thead>
        <tr>
          <th>Staff Member</th>
          <th>Role</th>
          <th class="text-end">Assembly POS Sales</th>
          <th class="text-end">Device Sales</th>
          <th class="text-center">Repairs Count</th>
          <th class="text-end">Total Combined Sales</th>
        </tr>
      </thead>
      <tbody>
        @foreach($staffPerformance as $sp)
          <tr>
            <td class="fw-bold">{{ $sp['name'] }}</td>
            <td><span class="badge bg-secondary-subtle text-secondary">{{ ucfirst($sp['role']) }}</span></td>
            <td class="text-end">{{ $currency_symbol }}{{ number_format($sp['assembly_sales'], 2) }}</td>
            <td class="text-end">{{ $currency_symbol }}{{ number_format($sp['device_sales'], 2) }}</td>
            <td class="text-center"><span class="badge bg-info fs-6">{{ $sp['repairs_count'] }}</span></td>
            <td class="text-end fw-extrabold text-primary fs-6">{{ $currency_symbol }}{{ number_format($sp['total_sales'], 2) }}</td>
          </tr>
        @endforeach
      </tbody>
    </table>
  </div>
</div>

<!-- Printable Footer (Visible Only When Printing) -->
<div class="printable-footer d-none d-print-block mt-4 pt-3 border-top text-center text-muted small">
  <div>Report generated automatically by {{ config('app.name', 'SaaS Phone Shop System') }}. Page 1 of 1</div>
</div>
@endsection

@push('styles')
<style>
  @media print {
    /* Hide non-printable elements */
    #sidebar, #topbar, .btn, .d-print-none, .alert-toast { display: none !important; }
    #main { margin-left: 0 !important; }
    body { background: #ffffff !important; color: #000000 !important; font-size: 12px; }
    .page-content { padding: 0 !important; }
    .card-custom { border: 1px solid #ddd !important; box-shadow: none !important; margin-bottom: 15px !important; }
    .table-custom td, .table-custom th { padding: 6px 8px !important; font-size: 11px !important; }
    .printable-header, .printable-footer { display: block !important; }
    @page { size: A4 portrait; margin: 1.5cm; }
  }
</style>
@endpush