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

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-3 pb-3 border-bottom">
  <div class="d-flex align-items-center gap-3">
    <div class="rounded-3 d-flex align-items-center justify-content-center text-white flex-shrink-0 shadow-sm" style="width:48px;height:48px;background:linear-gradient(135deg, #4f46e5, #4338ca);">
      <i class="bi bi-pencil-square fs-4"></i>
    </div>
    <div>
      <div class="d-flex align-items-center gap-2">
        <h4 class="fw-extrabold text-body mb-0" style="letter-spacing:-0.4px;">Edit Repair Order &middot; {{ $repair->job_number }}</h4>
        <span class="badge bg-info-subtle text-info-emphasis border border-info-subtle rounded-pill px-2.5 py-1 small fw-bold" style="font-size:11px;">{{ $repair->status_label }}</span>
      </div>
      <p class="text-muted small mb-0 mt-0.5">{{ $repair->brand }} {{ $repair->model }} &middot; Customer: <strong>{{ $repair->customer->name }}</strong></p>
    </div>
  </div>
  <a href="{{ route('tenant.repairs.show', ['slug' => $slug, 'repair' => $repair->id]) }}" class="btn-outline-custom py-2 px-3">
    <i class="bi bi-arrow-left me-1"></i> Back to Repair
  </a>
</div>

@if($errors->any())
<div class="alert alert-danger mb-3 shadow-sm rounded-3">
  <div class="fw-bold mb-1"><i class="bi bi-exclamation-triangle-fill me-2"></i>Please resolve the following errors:</div>
  <ul class="mb-0 ps-3 small">
    @foreach($errors->all() as $error)
      <li>{{ $error }}</li>
    @endforeach
  </ul>
</div>
@endif

<form method="POST" action="{{ route('tenant.repairs.update', ['slug' => $slug, 'repair' => $repair->id]) }}">
@csrf @method('PUT')
<div class="row g-3">
  <div class="col-12 col-lg-8">
    <div class="card-custom mb-3">
      <div class="section-title">Device &amp; Customer Information</div>
      <div class="row g-3">
        <div class="col-12">
          <label class="form-label-custom">Customer *</label>
          <select class="form-control-custom" name="customer_id" required>
            @foreach($customers as $c)
            <option value="{{ $c->id }}" {{ old('customer_id', $repair->customer_id) == $c->id ? 'selected' : '' }}>
              {{ $c->name }} — {{ $c->mobile }}
            </option>
            @endforeach
          </select>
          @error('customer_id')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
        </div>
        <div class="col-12 col-md-4">
          <label class="form-label-custom">Device Category</label>
          <select class="form-control-custom" name="device_category">
            @foreach(['Mobile', 'Tablet', 'Laptop', 'Smartwatch', 'Other'] as $cat)
              <option value="{{ $cat }}" {{ old('device_category', $repair->device_category ?? 'Mobile') == $cat ? 'selected' : '' }}>{{ $cat }}</option>
            @endforeach
          </select>
          @error('device_category')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
        </div>
        <div class="col-6 col-md-4">
          <label class="form-label-custom">Brand *</label>
          <input class="form-control-custom" name="brand" value="{{ old('brand', $repair->brand) }}" required>
          @error('brand')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
        </div>
        <div class="col-6 col-md-4">
          <label class="form-label-custom">Model *</label>
          <input class="form-control-custom" name="model" value="{{ old('model', $repair->model) }}" required>
          @error('model')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
        </div>
        <div class="col-6">
          <label class="form-label-custom">IMEI Number</label>
          <input class="form-control-custom" name="imei" value="{{ old('imei', $repair->imei) }}" placeholder="15-digit IMEI" maxlength="20">
          @error('imei')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
        </div>
        <div class="col-6">
          <label class="form-label-custom">Serial Number</label>
          <input class="form-control-custom" name="serial_number" value="{{ old('serial_number', $repair->serial_number) }}" placeholder="Device S/N">
          @error('serial_number')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
        </div>
        <div class="col-6">
          <label class="form-label-custom">Color</label>
          <input class="form-control-custom" name="color" value="{{ old('color', $repair->color) }}" placeholder="e.g. Black">
          @error('color')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
        </div>
        <div class="col-6">
          <label class="form-label-custom">Passcode / PIN <small class="text-muted">(Encrypted)</small></label>
          <input class="form-control-custom" name="passcode" value="{{ old('passcode', $repair->passcode) }}" placeholder="Lock code">
          @error('passcode')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
        </div>
        <div class="col-12">
          <label class="form-label-custom">Device Condition</label>
          <input class="form-control-custom" name="device_condition" value="{{ old('device_condition', $repair->device_condition) }}" placeholder="Scratch marks, minor dents, back glass cracked…">
          @error('device_condition')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
        </div>
        <div class="col-12">
          <label class="form-label-custom">Accessories</label>
          <input class="form-control-custom" name="accessories" value="{{ old('accessories', $repair->accessories) }}" placeholder="Charger, Box, Case, SIM tool…">
          @error('accessories')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
        </div>
      </div>
    </div>
    <div class="card-custom mb-3">
      <div class="section-title">Fault &amp; Notes</div>
      <div class="row g-3">
        <div class="col-12">
          <label class="form-label-custom">Customer Complaint *</label>
          <textarea class="form-control-custom" name="complaint" rows="3" required>{{ old('complaint', $repair->complaint) }}</textarea>
          @error('complaint')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
        </div>
        <div class="col-12">
          <label class="form-label-custom">Technician Notes</label>
          <textarea class="form-control-custom" name="technician_notes" rows="2">{{ old('technician_notes', $repair->technician_notes) }}</textarea>
          @error('technician_notes')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
        </div>
      </div>
    </div>
  </div>
  <div class="col-12 col-lg-4">
    <div class="card-custom mb-3">
      <div class="section-title">Status &amp; Cost</div>
      <div class="row g-3">
        <div class="col-12">
          <label class="form-label-custom">Status</label>
          <select class="form-control-custom" name="status">
            @foreach(\App\Models\RepairJob::STATUSES as $key => $label)
            <option value="{{ $key }}" {{ old('status', $repair->status) === $key ? 'selected' : '' }}>{{ $label }}</option>
            @endforeach
          </select>
          @error('status')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
        </div>
        <div class="col-12">
          <label class="form-label-custom">Estimated Cost *</label>
          <div style="position:relative;">
            <span style="position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-muted);font-weight:600;">{{ $tenant->currency_symbol ?? '$' }}</span>
            <input class="form-control-custom" style="padding-left:28px;" name="estimated_cost" type="number" step="0.01" min="0" value="{{ old('estimated_cost', $repair->estimated_cost) }}" placeholder="0.00" required>
          </div>
          @error('estimated_cost')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
        </div>
        <div class="col-12">
          <label class="form-label-custom">Advance Paid</label>
          <div style="position:relative;">
            <span style="position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-muted);font-weight:600;">{{ $tenant->currency_symbol ?? '$' }}</span>
            <input class="form-control-custom" style="padding-left:28px;" name="advance_paid" type="number" step="0.01" min="0" value="{{ old('advance_paid', $repair->advance_paid) }}" placeholder="0.00">
          </div>
          @error('advance_paid')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
        </div>
        <div class="col-12">
          <label class="form-label-custom">Received Date *</label>
          <input class="form-control-custom" name="received_date" type="date" value="{{ old('received_date', $repair->received_date?->toDateString()) }}" required>
          @error('received_date')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
        </div>
        <div class="col-12">
          <label class="form-label-custom">Expected Delivery</label>
          <input class="form-control-custom" name="expected_delivery_date" type="date" value="{{ old('expected_delivery_date', $repair->expected_delivery_date?->toDateString()) }}">
          @error('expected_delivery_date')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
        </div>
        <div class="col-12">
          <label class="form-label-custom">Technician</label>
          <select class="form-control-custom" name="technician_id">
            <option value="">— No technician —</option>
            @foreach($technicians as $tech)
            <option value="{{ $tech->id }}" {{ old('technician_id', $repair->technician_id) == $tech->id ? 'selected' : '' }}>{{ $tech->name }}</option>
            @endforeach
          </select>
          @error('technician_id')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
        </div>
      </div>
    </div>
    <div class="d-flex flex-column gap-2">
      <button type="submit" class="btn-primary-custom w-100" style="justify-content:center;">
        <i class="bi bi-check2-circle"></i> Save Changes
      </button>
      <button type="submit" name="action" value="stay" class="btn-outline-custom w-100" style="justify-content:center;">
        <i class="bi bi-floppy"></i> Save &amp; Keep Editing
      </button>
    </div>
  </div>
</div>
</form>
@endsection