@extends('layouts.admin')
@section('title', $client->name)
@section('content')
<div class="d-flex justify-content-between align-items-start mb-3 flex-wrap gap-2">
  <div>
    <h5 class="fw-bold mb-1">{{ $client->name }}
      <span class="badge {{ $client->type==='maintenance'?'bg-primary':($client->type==='non_maintenance'?'bg-warning text-dark':'bg-secondary') }} ms-2">{{ $client->type_label }}</span>
      <span class="badge bg-light text-dark border ms-1">{{ $client->division }}</span>
      @if(!$client->is_active)<span class="badge bg-danger ms-1">Nonaktif</span>@endif
    </h5>
    <div class="text-muted small">{{ $client->address ?? 'Alamat belum diisi' }}</div>
  </div>
  <div class="d-flex gap-2">
    <a href="{{ route('admin.tickets.create',['client_id'=>$client->id]) }}" class="btn btn-primary btn-sm"><i class="fas fa-plus me-1"></i>Tiket</a>
    <a href="{{ route('admin.visits.create',['client_id'=>$client->id]) }}" class="btn btn-success btn-sm"><i class="fas fa-calendar-plus me-1"></i>Kunjungan</a>
    <a href="{{ route('admin.invoices.create',['client_id'=>$client->id]) }}" class="btn btn-warning btn-sm"><i class="fas fa-file-invoice me-1"></i>Invoice</a>
    <a href="{{ route('admin.clients.edit',$client) }}" class="btn btn-outline-secondary btn-sm"><i class="fas fa-edit"></i></a>
    @if(auth()->user()->role === 'admin')
    <form action="{{ route('admin.clients.destroy',$client) }}" method="POST" onsubmit="return confirm('Hapus klien ini beserta semua data terkait (tiket, invoice, kunjungan)?')" style="display:inline">@csrf @method('DELETE')<button class="btn btn-sm btn-outline-danger"><i class="fas fa-trash"></i></button></form>
    @endif
  </div>
</div>

<div class="row g-3 mb-3">
  <div class="col-md-3"><div class="card p-3 text-center"><div class="text-muted small">Tiket Bulan Ini</div><div class="fw-bold fs-4">{{ $client->tickets->count() }}</div></div></div>
  @if($client->type==='maintenance')
  <div class="col-md-3"><div class="card p-3 text-center"><div class="text-muted small">Kunjungan Bulan Ini</div><div class="fw-bold fs-4">{{ $visitThisMonth }} / {{ $client->max_visits_per_month }}</div></div></div>
  <div class="col-md-3"><div class="card p-3 text-center"><div class="text-muted small">Sisa Kunjungan</div><div class="fw-bold fs-4 {{ $remainingVisit===0?'text-danger':'' }}">{{ $remainingVisit }}</div></div></div>
  <div class="col-md-3"><div class="card p-3 text-center"><div class="text-muted small">Biaya/Bulan</div><div class="fw-bold fs-5">Rp {{ number_format($client->monthly_fee,0,',','.') }}</div></div></div>
  @else
  <div class="col-md-3"><div class="card p-3 text-center"><div class="text-muted small">Email</div><div class="small">{{ $client->email ?? '—' }}</div></div></div>
  <div class="col-md-3"><div class="card p-3 text-center"><div class="text-muted small">Telepon</div><div class="small">{{ $client->phone ?? '—' }}</div></div></div>
  <div class="col-md-3"><div class="card p-3 text-center"><div class="text-muted small">PIC</div><div class="small">{{ $client->pic_name ?? '—' }}</div></div></div>
  @endif
</div>

<ul class="nav nav-tabs mb-3" id="clientTab">
  <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#tiket">Tiket Terbaru</a></li>
  <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#users">User ({{ $client->users->count() }})</a></li>
  <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#devices">Perangkat ({{ $client->devices->count() }})</a></li>
  <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#invoices">Invoice</a></li>
  <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#isp">ISP</a></li>
</ul>

<div class="tab-content">
  {{-- TIKET TAB --}}
  <div class="tab-pane fade show active" id="tiket">
    <div class="card">
      <div class="table-responsive">
        <table class="table table-hover mb-0">
          <thead><tr><th>No. Tiket</th><th>Subjek</th><th>Prioritas</th><th>Status</th><th>SLA</th><th>Dibuat</th></tr></thead>
          <tbody>
          @forelse($client->tickets as $t)
          <tr>
            <td><a href="{{ route('admin.tickets.show',$t) }}" class="fw-semibold text-decoration-none text-primary">{{ $t->ticket_number }}</a></td>
            <td>{{ $t->subject }}</td>
            <td><span class="badge bg-{{ $t->priority_badge }}">{{ strtoupper($t->priority) }}</span></td>
            <td><span class="badge bg-{{ $t->status_badge }}">{{ str_replace('_',' ',strtoupper($t->status)) }}</span></td>
            <td>@if($t->sla_status==='breach')<span class="badge badge-breach">BREACH</span>@elseif($t->sla_status==='warning')<span class="badge badge-warning">WARNING</span>@endif</td>
            <td class="text-muted small">{{ $t->created_at->format('d/m/Y') }}</td>
          </tr>
          @empty<tr><td colspan="6" class="text-center text-muted py-4">Belum ada tiket</td></tr>
          @endforelse
          </tbody>
        </table>
      </div>
    </div>
  </div>

  {{-- USERS TAB --}}
  <div class="tab-pane fade" id="users">
    <div class="card">
      <div class="card-header d-flex justify-content-between">
        <span>User Klien</span>
        <button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#addUserModal"><i class="fas fa-plus me-1"></i>Tambah User</button>
      </div>
      <div class="table-responsive">
        <table class="table table-hover mb-0">
          <thead><tr><th>Nama</th><th>Dept / Jabatan</th><th>Kontak</th><th>Login</th><th></th></tr></thead>
          <tbody>
          @forelse($client->users as $u)
          <tr>
            <td class="fw-semibold small">{{ $u->name }}</td>
            <td class="text-muted small">{{ $u->department ?? '—' }} / {{ $u->position ?? '—' }}</td>
            <td class="small">{{ $u->email ?? '' }} {{ $u->phone ?? '' }}</td>
            <td>@if($u->can_login)<span class="badge badge-ok">Bisa Login</span>@else<span class="badge bg-secondary">Tidak</span>@endif</td>
            <td>
              @if(auth()->user()->role === 'admin')
              <form action="{{ route('admin.clients.users.destroy',[$client,$u]) }}" method="POST" onsubmit="return confirm('Hapus user ini?')">
                @csrf @method('DELETE')
                <button class="btn btn-sm btn-outline-danger"><i class="fas fa-trash"></i></button>
              </form>
              @endif
            </td>
          </tr>
          @empty<tr><td colspan="5" class="text-center text-muted py-4">Belum ada user</td></tr>
          @endforelse
          </tbody>
        </table>
      </div>
    </div>
  </div>

  {{-- DEVICES TAB --}}
  <div class="tab-pane fade" id="devices">
    <div class="card">
      <div class="card-header d-flex justify-content-between">
        <span>Inventaris Perangkat</span>
        <button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#addDeviceModal"><i class="fas fa-plus me-1"></i>Tambah Perangkat</button>
      </div>
      <div class="table-responsive">
        <table class="table table-hover mb-0">
          <thead><tr><th>Tipe</th><th>Merk / Model</th><th>Serial</th><th>Spesifikasi</th><th>Kondisi</th><th>User</th><th></th></tr></thead>
          <tbody>
          @forelse($client->devices as $d)
          <tr>
            <td><span class="badge bg-light text-dark border">{{ strtoupper($d->type) }}</span></td>
            <td class="small fw-semibold">{{ $d->brand }} {{ $d->model }}</td>
            <td class="text-muted small">{{ $d->serial_number ?? '—' }}</td>
            <td class="small" style="max-width:160px;white-space:pre-wrap;font-size:11px">{{ $d->specs ?? '—' }}</td>
            <td>
              <span class="badge {{ $d->condition==='good'?'badge-ok':($d->condition==='fair'?'badge-warning':'badge-breach') }}">
                {{ strtoupper($d->condition) }}
              </span>
            </td>
            <td class="small">{{ $d->clientUser?->name ?? '—' }}</td>
            <td>
              @if(auth()->user()->role === 'admin')
              <form action="{{ route('admin.clients.devices.destroy',[$client,$d]) }}" method="POST" onsubmit="return confirm('Hapus perangkat ini?')">
                @csrf @method('DELETE')
                <button class="btn btn-sm btn-outline-danger"><i class="fas fa-trash"></i></button>
              </form>
              @endif
            </td>
          </tr>
          @empty<tr><td colspan="7" class="text-center text-muted py-4">Belum ada perangkat</td></tr>
          @endforelse
          </tbody>
        </table>
      </div>
    </div>
  </div>

  {{-- INVOICES TAB --}}
  <div class="tab-pane fade" id="invoices">
    <div class="card">
      <div class="table-responsive">
        <table class="table table-hover mb-0">
          <thead><tr><th>No. Invoice</th><th>Tipe</th><th>Total</th><th>Status</th><th>Jatuh Tempo</th><th></th></tr></thead>
          <tbody>
          @forelse($client->invoices as $inv)
          <tr>
            <td><a href="{{ route('admin.invoices.show',$inv) }}" class="fw-semibold text-decoration-none text-primary">{{ $inv->invoice_number }}</a></td>
            <td class="small">{{ strtoupper($inv->type) }}</td>
            <td class="small fw-semibold">Rp {{ number_format($inv->total,0,',','.') }}</td>
            <td>
              <span class="badge {{ ['draft'=>'bg-secondary','sent'=>'bg-primary','paid'=>'bg-success','overdue'=>'bg-danger','partial'=>'bg-warning text-dark'][$inv->status]??'bg-secondary' }}">
                {{ strtoupper($inv->status) }}
              </span>
            </td>
            <td class="small {{ $inv->status==='overdue'?'text-danger fw-bold':'' }}">{{ $inv->due_date->format('d/m/Y') }}</td>
            <td><a href="{{ route('admin.invoices.show',$inv) }}" class="btn btn-sm btn-outline-primary"><i class="fas fa-eye"></i></a></td>
          </tr>
          @empty<tr><td colspan="6" class="text-center text-muted py-4">Belum ada invoice</td></tr>
          @endforelse
          </tbody>
        </table>
      </div>
    </div>
  </div>

  {{-- ISP TAB --}}
  <div class="tab-pane fade" id="isp">
    <div class="d-flex justify-content-end mb-2">
      <a href="{{ route('admin.clients.isp',$client) }}" class="btn btn-sm btn-primary"><i class="fas fa-wifi me-1"></i>Kelola ISP</a>
    </div>
    @foreach($client->isps as $isp)
    <div class="card mb-2">
      <div class="card-body py-2">
        <div class="d-flex justify-content-between">
          <div>
            <span class="fw-semibold">{{ $isp->provider_name }}</span>
            <span class="text-muted small ms-2">{{ $isp->package }} · {{ $isp->bandwidth }}</span>
          </div>
          <span class="badge {{ $isp->is_active?'badge-ok':'bg-secondary' }}">{{ $isp->is_active?'Aktif':'Nonaktif' }}</span>
        </div>
        @if($isp->incidents->where('status','ongoing')->count())
          <div class="mt-1"><span class="badge badge-breach"><i class="fas fa-exclamation-triangle me-1"></i>INTERNET DOWN</span></div>
        @endif
      </div>
    </div>
    @endforeach
  </div>
</div>

{{-- Add User Modal --}}
<div class="modal fade" id="addUserModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header"><h6 class="modal-title fw-bold">Tambah User Klien</h6><button class="btn-close" data-bs-dismiss="modal"></button></div>
      <form action="{{ route('admin.clients.users.store',$client) }}" method="POST">@csrf
      <div class="modal-body">
        <div class="mb-2"><label class="form-label small fw-semibold">Nama *</label><input type="text" name="name" class="form-control form-control-sm" required></div>
        <div class="row g-2">
          <div class="col-6"><label class="form-label small fw-semibold">Email</label><input type="email" name="email" class="form-control form-control-sm"></div>
          <div class="col-6"><label class="form-label small fw-semibold">No. HP</label><input type="text" name="phone" class="form-control form-control-sm"></div>
          <div class="col-6"><label class="form-label small fw-semibold">Departemen</label><input type="text" name="department" class="form-control form-control-sm"></div>
          <div class="col-6"><label class="form-label small fw-semibold">Jabatan</label><input type="text" name="position" class="form-control form-control-sm"></div>
        </div>
        <div class="mt-2 form-check">
          <input type="checkbox" name="can_login" value="1" class="form-check-input" id="canLogin">
          <label class="form-check-label small" for="canLogin">Aktifkan login portal</label>
        </div>
        <div class="mt-2"><label class="form-label small fw-semibold">Password Portal</label><input type="password" name="password" class="form-control form-control-sm"></div>
      </div>
      <div class="modal-footer"><button class="btn btn-primary btn-sm">Simpan</button></div>
      </form>
    </div>
  </div>
</div>

{{-- Add Device Modal --}}
<div class="modal fade" id="addDeviceModal" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header"><h6 class="modal-title fw-bold">Tambah Perangkat</h6><button class="btn-close" data-bs-dismiss="modal"></button></div>
      <form action="{{ route('admin.clients.devices.store',$client) }}" method="POST">@csrf
      <div class="modal-body">
        <div class="row g-2">
          <div class="col-md-6">
            <label class="form-label small fw-semibold">User Pemilik</label>
            <select name="client_user_id" class="form-select form-select-sm">
              <option value="">-- Tidak ada --</option>
              @foreach($client->users as $u)<option value="{{ $u->id }}">{{ $u->name }}</option>@endforeach
            </select>
          </div>
          <div class="col-md-6">
            <label class="form-label small fw-semibold">Tipe *</label>
            <select name="type" class="form-select form-select-sm" required>
              @foreach(['laptop','pc','printer','router','switch','cctv','other'] as $t)
              <option value="{{ $t }}">{{ strtoupper($t) }}</option>
              @endforeach
            </select>
          </div>
          <div class="col-md-4"><label class="form-label small fw-semibold">Merk</label><input type="text" name="brand" class="form-control form-control-sm"></div>
          <div class="col-md-4"><label class="form-label small fw-semibold">Model</label><input type="text" name="model" class="form-control form-control-sm"></div>
          <div class="col-md-4"><label class="form-label small fw-semibold">Serial Number</label><input type="text" name="serial_number" class="form-control form-control-sm"></div>
          <div class="col-md-8"><label class="form-label small fw-semibold">Spesifikasi</label><textarea name="specs" class="form-control form-control-sm" rows="2" placeholder="RAM, CPU, Storage..."></textarea></div>
          <div class="col-md-4">
            <label class="form-label small fw-semibold">Kondisi</label>
            <select name="condition" class="form-select form-select-sm">
              <option value="good">Good</option><option value="fair">Fair</option><option value="poor">Poor</option>
            </select>
          </div>
          <div class="col-md-6"><label class="form-label small fw-semibold">Tgl Pembelian</label><input type="date" name="purchase_date" class="form-control form-control-sm"></div>
          <div class="col-12"><label class="form-label small fw-semibold">Catatan</label><textarea name="notes" class="form-control form-control-sm" rows="2"></textarea></div>
        </div>
      </div>
      <div class="modal-footer"><button class="btn btn-primary btn-sm">Simpan</button></div>
      </form>
    </div>
  </div>
</div>
@endsection
