@extends('layouts.tenant')
@section('title', 'Repair Job ' . $repair->job_number)
@section('page-title', 'Repair Job: ' . $repair->job_number)

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2">
  <div>
    <h4 class="fw-extrabold mb-1">{{ $repair->job_number }} &middot; {{ $repair->brand }} {{ $repair->model }}</h4>
    <p class="text-muted small mb-0">Customer: <strong>{{ $repair->customer->name }}</strong> ({{ $repair->customer->mobile }})</p>
  </div>
  <div class="d-flex gap-2 flex-wrap">
    <a href="{{ route('tenant.repairs.edit', ['slug' => $slug, 'repair' => $repair->id]) }}" class="btn-outline-custom py-1"><i class="bi bi-pencil me-1"></i> Edit Order</a>
    <a href="{{ route('tenant.invoice.show', ['slug' => $slug, 'repair' => $repair->id]) }}" class="btn-primary-custom py-1"><i class="bi bi-receipt-cutoff me-1"></i> A4 Invoice</a>
    <a href="{{ route('tenant.invoice.thermal', ['slug' => $slug, 'repair' => $repair->id]) }}" target="_blank" class="btn-primary-custom py-1" style="background:linear-gradient(135deg, #10b981 0%, #059669 100%);"><i class="bi bi-printer me-1"></i> 80mm Thermal</a>
  </div>
</div>

<div class="row g-4">
  <div class="col-lg-8">
    <!-- Stepper Bar -->
    <div class="card-custom mb-4">
      <h6 class="fw-bold mb-3"><i class="bi bi-arrow-right-circle-fill text-primary me-2"></i> Current Status: {{ $repair->status_label }}</h6>
      <div class="d-flex align-items-center justify-content-between overflow-x-auto pb-2">
        @php $steps = array_keys(\App\Models\RepairJob::STATUSES); $currentStep = $repair->stepper_index; @endphp
        @foreach(\App\Models\RepairJob::STATUSES as $key => $label)
          @php $i = array_search($key, $steps); $isDone = $i < $currentStep; $isActive = $i === $currentStep; @endphp
          <div class="text-center px-2">
            <div class="rounded-circle d-flex align-items-center justify-content-center mx-auto mb-1 fw-bold fs-6 {{ $isDone ? 'bg-success text-white' : ($isActive ? 'bg-primary text-white shadow' : 'bg-body-secondary text-muted') }}" style="width:34px;height:34px;">
              {{ $isDone ? '✓' : $i + 1 }}
            </div>
            <div class="small fw-semibold text-nowrap {{ $isActive ? 'text-primary' : 'text-muted' }}" style="font-size:11px;">{{ $label }}</div>
          </div>
        @endforeach
      </div>
    </div>

    <!-- Device Details & Sensitive Passcode Security -->
    <div class="card-custom mb-4">
      <h6 class="fw-bold mb-3 border-bottom pb-2"><i class="bi bi-phone-fill text-info me-2"></i> Device Specifications &amp; Passcode Security</h6>
      <div class="row g-3">
        <div class="col-md-6">
          <span class="form-label-custom">Device Category / Brand</span>
          <div class="fw-bold fs-6">{{ $repair->device_category }} &middot; {{ $repair->brand }}</div>
        </div>
        <div class="col-md-6">
          <span class="form-label-custom">Model Name</span>
          <div class="fw-bold fs-6">{{ $repair->model }}</div>
        </div>
        @if($repair->imei)
        <div class="col-md-6">
          <span class="form-label-custom">IMEI Number</span>
          <code>{{ $repair->imei }}</code>
        </div>
        @endif
        @if($repair->serial_number)
        <div class="col-md-6">
          <span class="form-label-custom">Serial Number</span>
          <code>{{ $repair->serial_number }}</code>
        </div>
        @endif
        @if($repair->passcode)
        <div class="col-md-6">
          <span class="form-label-custom text-danger"><i class="bi bi-shield-lock-fill me-1"></i> Device Passcode / Lock Code (Encrypted)</span>
          <div class="d-flex align-items-center gap-2">
            <span class="fw-extrabold fs-6 font-monospace" id="passcodeDisplay">••••••••</span>
            <button type="button" class="btn-icon" onclick="togglePasscode('{{ addslashes($repair->passcode) }}')"><i class="bi bi-eye" id="passcodeIcon"></i></button>
          </div>
          <span class="small text-muted" style="font-size:10px;">Masked on receipts for customer privacy.</span>
        </div>
        @endif
        <div class="col-12">
          <span class="form-label-custom">Reported Complaint / Issue</span>
          <div class="p-3 bg-body-tertiary rounded border fw-semibold">{{ $repair->complaint }}</div>
        </div>
        @if($repair->technician_notes)
        <div class="col-12">
          <span class="form-label-custom">Technician Diagnostic Notes</span>
          <div class="p-3 bg-body-tertiary rounded border text-muted small">{{ $repair->technician_notes }}</div>
        </div>
        @endif
      </div>
    </div>

    <!-- Status History Audit Log -->
    <div class="card-custom mb-4">
      <h6 class="fw-bold mb-3"><i class="bi bi-clock-history text-secondary me-2"></i> Status Transition History Timeline</h6>
      <div class="space-y-2">
        @forelse($repair->statusHistory as $hist)
          <div class="d-flex justify-content-between align-items-center p-2 rounded bg-body-tertiary border small">
            <div>
              <span class="badge bg-secondary me-2">{{ strtoupper($hist->old_status ?? 'Created') }} &rarr; {{ strtoupper($hist->new_status) }}</span>
              <span class="text-muted">Changed by <strong>{{ $hist->user->name ?? 'System' }}</strong></span>
              @if($hist->notes)<span class="text-muted ms-2">({{ $hist->notes }})</span>@endif
            </div>
            <span class="text-muted" style="font-size:11px;">{{ $hist->created_at->format('d M Y, h:i A') }}</span>
          </div>
        @empty
          <div class="text-muted small py-2">No previous status transitions recorded.</div>
        @endforelse
      </div>
    </div>

    <!-- Record Payment Form -->
    <div class="card-custom">
      <h6 class="fw-bold mb-3"><i class="bi bi-cash-stack text-success me-2"></i> Record Repair Payment</h6>
      <form method="POST" action="{{ route('tenant.payments.store', ['slug' => $slug]) }}">
        @csrf
        <input type="hidden" name="repair_job_id" value="{{ $repair->id }}">
        <div class="row g-3">
          <div class="col-md-4">
            <label class="form-label-custom">Payment Amount *</label>
            <input type="number" name="amount" class="form-control-custom fw-bold text-success" step="0.01" value="{{ number_format($repair->balance_due, 2, '.', '') }}" required>
          </div>
          <div class="col-md-4">
            <label class="form-label-custom">Payment Method</label>
            <select name="payment_method" class="form-control-custom">
              <option value="cash">Cash</option>
              <option value="card">Card</option>
              <option value="transfer">Bank Transfer</option>
            </select>
          </div>
          <div class="col-md-4">
            <label class="form-label-custom">Notes</label>
            <input type="text" name="notes" class="form-control-custom" placeholder="e.g. Deposit or final settlement">
          </div>
          <div class="col-12">
            <button type="submit" class="btn-primary-custom py-2"><i class="bi bi-check-circle-fill me-1"></i> Record Payment</button>
          </div>
        </div>
      </form>
    </div>
  </div>

  <!-- Sidebar Financials & Customer Info -->
  <div class="col-lg-4">
    <div class="card-custom mb-4">
      <h6 class="fw-bold mb-3"><i class="bi bi-person-circle text-primary me-2"></i> Customer Profile</h6>
      <div class="d-flex align-items-center gap-3 mb-3">
        <div class="avatar fs-5" style="width:44px;height:44px;">{{ $repair->customer->initial }}</div>
        <div>
          <div class="fw-bold fs-6">{{ $repair->customer->name }}</div>
          <div class="text-muted small">{{ $repair->customer->mobile }}</div>
        </div>
      </div>
      <a href="{{ route('tenant.customers.show', ['slug' => $slug, 'customer' => $repair->customer->id]) }}" class="btn-outline-custom w-100 justify-content-center py-1" style="font-size:12px;">View Customer History</a>
    </div>

    <div class="card-custom mb-4">
      <h6 class="fw-bold mb-3"><i class="bi bi-calculator-fill text-success me-2"></i> Financial Balance Breakdown</h6>
      <div class="space-y-2">
        <div class="d-flex justify-content-between p-2 bg-body-tertiary rounded small">
          <span>Estimated Repair Cost:</span>
          <strong>{{ $currency_symbol }}{{ number_format($repair->estimated_cost, 2) }}</strong>
        </div>
        <div class="d-flex justify-content-between p-2 bg-body-tertiary rounded small text-success">
          <span>Advance Paid:</span>
          <strong>{{ $currency_symbol }}{{ number_format($repair->advance_paid, 2) }}</strong>
        </div>
        @foreach($repair->payments as $pmt)
          <div class="d-flex justify-content-between p-2 bg-body-tertiary rounded small text-success">
            <span>{{ ucfirst($pmt->payment_method) }} Payment:</span>
            <strong>{{ $currency_symbol }}{{ number_format($pmt->amount, 2) }}</strong>
          </div>
        @endforeach
        <hr class="my-2">
        <div class="d-flex justify-content-between p-3 rounded fs-6 fw-bold {{ $repair->balance_due > 0 ? 'bg-danger-subtle text-danger' : 'bg-success-subtle text-success' }}">
          <span>Balance Outstanding:</span>
          <span>{{ $currency_symbol }}{{ number_format($repair->balance_due, 2) }}</span>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

@push('scripts')
<script>
  let passcodeRevealed = false;
  function togglePasscode(passcode) {
    const el = document.getElementById('passcodeDisplay');
    const icon = document.getElementById('passcodeIcon');
    if (!passcodeRevealed) {
      el.innerText = passcode;
      icon.className = 'bi bi-eye-slash';
      passcodeRevealed = true;
    } else {
      el.innerText = '••••••••';
      icon.className = 'bi bi-eye';
      passcodeRevealed = false;
    }
  }
</script>
@endpush