@extends('layouts.tenant')

@section('title', 'Repair Jobs')
@section('page-title', 'Repair Jobs Tracker')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2">
  <div>
    <h5 class="fw-extrabold mb-1">Device Repair Orders</h5>
    <p class="text-muted small mb-0">Track diagnosis, parts status, repair progress, and customer collection.</p>
  </div>
  <a href="{{ route('tenant.repairs.create', ['slug' => $slug]) }}" class="btn-primary-custom">
    <i class="bi bi-plus-lg"></i> New Repair Order
  </a>
</div>

<!-- Status Filter Chips Bar -->
<div class="d-flex gap-2 mb-4 overflow-x-auto pb-2">
  <a href="{{ route('tenant.repairs.index', ['slug' => $slug]) }}"
     class="{{ !request('status') ? 'btn-primary-custom' : 'btn-outline-custom' }} py-1 px-3 text-nowrap" style="font-size:12px;">
    All Repairs ({{ $totalCount }})
  </a>
  @foreach($statuses as $key => $label)
    @php $isActive = request('status') === $key; @endphp
    <a href="{{ route('tenant.repairs.index', ['slug' => $slug, 'status' => $key]) }}"
       class="{{ $isActive ? 'btn-primary-custom' : 'btn-outline-custom' }} py-1 px-3 text-nowrap" style="font-size:12px;">
      {{ $label }} ({{ $statusCounts->get($key, 0) }})
    </a>
  @endforeach
</div>

<div class="card-custom">
  <form method="GET" action="{{ route('tenant.repairs.index', ['slug' => $slug]) }}" class="row g-2 mb-3">
    @if(request('status'))<input type="hidden" name="status" value="{{ request('status') }}">@endif
    <div class="col-md-5">
      <input type="text" name="search" class="form-control-custom" placeholder="Search Job #, IMEI, S/N, customer name or phone..." value="{{ request('search') }}">
    </div>
    <div class="col-md-3">
      <input type="date" name="date" class="form-control-custom" value="{{ request('date') }}">
    </div>
    <div class="col-md-2">
      <button type="submit" class="btn-primary-custom w-100 justify-content-center py-2"><i class="bi bi-search"></i> Search</button>
    </div>
    <div class="col-md-2">
      <a href="{{ route('tenant.repairs.index', ['slug' => $slug]) }}" class="btn-outline-custom w-100 justify-content-center py-2">Reset</a>
    </div>
  </form>

  <div class="table-responsive">
    <table class="table-custom">
      <thead>
        <tr>
          <th>Job #</th>
          <th>Customer Info</th>
          <th>Device &amp; Identifiers</th>
          <th>Complaint / Issue</th>
          <th>Status</th>
          <th class="text-end">Est. Cost</th>
          <th>Expected Delivery</th>
          <th class="text-end">Actions</th>
        </tr>
      </thead>
      <tbody>
        @forelse($jobs as $job)
          <tr>
            <td class="fw-bold text-primary">{{ $job->job_number }}</td>
            <td>
              <div class="fw-bold">{{ $job->customer->name }}</div>
              <div class="text-muted small">{{ $job->customer->mobile }}</div>
            </td>
            <td>
              <div class="fw-semibold">{{ $job->brand }} {{ $job->model }}</div>
              <div class="small text-muted">
                @if($job->imei) <span>IMEI: <code>{{ Str::limit($job->imei, 12) }}</code></span> @endif
                @if($job->serial_number) <span>S/N: <code>{{ Str::limit($job->serial_number, 12) }}</code></span> @endif
              </div>
            </td>
            <td class="text-muted small">{{ Str::limit($job->complaint, 32) }}</td>
            <td>
              <form method="POST" action="{{ route('tenant.repairs.status', ['slug' => $slug, 'repair' => $job->id]) }}">
                @csrf
                <select name="status" class="form-control-custom py-1 px-2 text-capitalize" style="font-size:12px;font-weight:700;" onchange="this.form.submit()">
                  @foreach($statuses as $k => $l)
                    <option value="{{ $k }}" {{ $job->status === $k ? 'selected' : '' }}>{{ $l }}</option>
                  @endforeach
                </select>
              </form>
            </td>
            <td class="text-end fw-bold text-success">{{ $currency_symbol }}{{ number_format($job->estimated_cost, 2) }}</td>
            <td class="small">
              @if($job->expected_delivery_date)
                <span class="{{ $job->isOverdue() ? 'text-danger fw-bold' : '' }}">
                  {{ $job->expected_delivery_date->format('d M Y') }}
                  @if($job->isOverdue()) <span class="badge bg-danger ms-1">Overdue</span> @endif
                </span>
              @else —
              @endif
            </td>
            <td class="text-end">
              <a href="{{ route('tenant.repairs.show', ['slug' => $slug, 'repair' => $job->id]) }}" class="btn-icon" title="View Repair Job"><i class="bi bi-eye"></i></a>
              <a href="{{ route('tenant.repairs.edit', ['slug' => $slug, 'repair' => $job->id]) }}" class="btn-icon" title="Edit Repair Job"><i class="bi bi-pencil"></i></a>
              <form method="POST" action="{{ route('tenant.repairs.destroy', ['slug' => $slug, 'repair' => $job->id]) }}" onsubmit="return confirm('Delete this repair job?')" style="display:inline;">
                @csrf @method('DELETE')
                <button type="submit" class="btn-icon text-danger" title="Delete"><i class="bi bi-trash"></i></button>
              </form>
            </td>
          </tr>
        @empty
          <tr><td colspan="8" class="text-center text-muted py-4">No repair jobs matching criteria.</td></tr>
        @endforelse
      </tbody>
    </table>
    <div class="mt-3">{{ $jobs->links() }}</div>
  </div>
</div>
@endsection