@extends('layouts.app')
@section('title',$subcontractor->name)
@section('page-title','Subcontractor Detail')
@section('content')
<div class="d-flex justify-content-between mb-3">
  <a href="{{ route('subcontractors.index') }}" class="btn btn-sm btn-outline-secondary"><i class="bi bi-arrow-left"></i> Back</a>
  <a href="{{ route('subcontractors.edit',$subcontractor) }}" class="btn btn-sm btn-outline-primary"><i class="bi bi-pencil"></i> Edit</a>
</div>
<div class="row g-3">
  <div class="col-md-5">
    <div class="card stat-card p-3">
      <h6 class="fw-bold">{{ $subcontractor->name }}</h6>
      <dl class="row small mb-0">
        <dt class="col-5 text-muted">Trade</dt><dd class="col-7">{{ $subcontractor->trade }}</dd>
        <dt class="col-5 text-muted">Phone</dt><dd class="col-7">{{ $subcontractor->phone ?? '-' }}</dd>
        <dt class="col-5 text-muted">Project</dt><dd class="col-7">{{ $subcontractor->project->name ?? '-' }}</dd>
        <dt class="col-5 text-muted">Status</dt><dd class="col-7"><span class="badge bg-{{ $subcontractor->status==='active'?'success':'secondary' }}">{{ $subcontractor->status }}</span></dd>
        <dt class="col-5 text-muted">Agreed</dt><dd class="col-7 fw-semibold">GH₵ {{ number_format($subcontractor->agreed_amount,2) }}</dd>
        <dt class="col-5 text-muted">Paid</dt><dd class="col-7 text-success fw-semibold">GH₵ {{ number_format($subcontractor->amount_paid,2) }}</dd>
        <dt class="col-5 text-muted">Balance</dt><dd class="col-7 text-danger fw-bold">GH₵ {{ number_format($subcontractor->balance,2) }}</dd>
      </dl>
      @if($subcontractor->scope_of_work)<div class="mt-2"><small class="text-muted">Scope:</small><p class="small mb-0">{{ $subcontractor->scope_of_work }}</p></div>@endif
    </div>
  </div>
  <div class="col-md-7">
    <div class="card stat-card">
      <div class="card-header bg-white d-flex justify-content-between align-items-center">
        <span class="fw-semibold">Payment History</span>
        <button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#payModal"><i class="bi bi-plus-lg me-1"></i>Add Payment</button>
      </div>
      <div class="table-responsive"><table class="table mb-0">
        <thead><tr><th>Date</th><th>Amount</th><th>Mode</th><th>Ref</th><th>Remarks</th></tr></thead>
        <tbody>
          @forelse($subcontractor->payments as $pay)
          <tr><td class="small">{{ $pay->date->format('d/m/Y') }}</td><td class="fw-semibold small">GH₵ {{ number_format($pay->amount,2) }}</td><td class="small">{{ $pay->payment_mode }}</td><td class="small">{{ $pay->reference ?? '-' }}</td><td class="small">{{ $pay->remarks ?? '-' }}</td></tr>
          @empty<tr><td colspan="5" class="text-center py-3 text-muted">No payments yet.</td></tr>
          @endforelse
        </tbody>
      </table></div>
    </div>
  </div>
</div>
<div class="modal fade" id="payModal" tabindex="-1"><div class="modal-dialog"><div class="modal-content">
  <div class="modal-header"><h5 class="modal-title">Add Payment — {{ $subcontractor->name }}</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
  <form method="POST" action="{{ route('subcontractors.payment',$subcontractor) }}">@csrf
    <div class="modal-body row g-3">
      <div class="col-md-6"><label class="form-label">Date *</label><input name="date" type="date" class="form-control" value="{{ today()->format('Y-m-d') }}" required></div>
      <div class="col-md-6"><label class="form-label">Amount (GH₵) *</label><input name="amount" type="number" step="0.01" class="form-control" required></div>
      <div class="col-md-6"><label class="form-label">Payment Mode *</label><select name="payment_mode" class="form-select" required><option>momo</option><option>hubtel</option><option>cash</option><option>bank_transfer</option></select></div>
      <div class="col-md-6"><label class="form-label">Reference</label><input name="reference" class="form-control"></div>
      <div class="col-12"><label class="form-label">Remarks</label><textarea name="remarks" class="form-control" rows="2"></textarea></div>
    </div>
    <div class="modal-footer"><button class="btn btn-primary">Save Payment</button><button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button></div>
  </form>
</div></div></div>
@endsection