@extends('layouts.user_type.auth')

@section('content')
<div class="row mb-3">
  <div class="col-md-12">
    <div class="card">
      <div class="card-header pb-0 px-3">
        <div class="d-flex justify-content-between align-items-center">
          <h6>Daftar Target</h6>
          <a href="{{ route('targets.create') }}" class="btn bg-gradient-success btn-sm mb-0">Tambah Target</a>
        </div>
      </div>
      <div class="card-body px-0 pb-2">
        <div class="table-responsive">
          <table class="table table-striped table-hover align-items-center mb-0">
            <thead>
              <tr>
                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Nama Target</th>
                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Minggu Target</th>
                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Reminder Freq</th>
                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Penerima Email</th>
                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Aksi</th>
              </tr>
            </thead>
            <tbody>
              @forelse($targets as $target)
                <tr>
                  <td>
                    <div class="d-flex px-2 py-1">
                      <div class="d-flex flex-column justify-content-center">
                        <h6 class="mb-0 text-sm">{{ $target->name }}</h6>
                      </div>
                    </div>
                  </td>
                  <td>
                    <p class="text-xs font-weight-bold mb-0">{{ $target->target_week }}</p>
                  </td>
                  <td>
                    <p class="text-xs font-weight-bold mb-0">{{ $target->reminder_frequency }} Jam</p>
                  </td>
                  <td>
                    <p class="text-xs font-weight-bold mb-0">{{ implode(', ', $target->recipient_emails ?? []) }}</p>
                  </td>
                  <td class="align-middle">
                    <a href="{{ route('targets.edit', $target) }}" class="btn btn-sm bg-gradient-primary me-2">Edit</a>
                    <form action="{{ route('targets.destroy', $target) }}" method="POST" class="d-inline">
                      @csrf
                      @method('DELETE')
                      <button type="submit" class="btn btn-sm bg-gradient-danger" onclick="return confirm('Apakah Anda yakin ingin menghapus target ini?')">Hapus</button>
                    </form>
                  </td>
                </tr>
              @empty
                <tr>
                  <td colspan="5" class="text-center text-secondary">Tidak ada data.</td>
                </tr>
              @endforelse
            </tbody>
          </table>
        </div>
        <div class="px-3 mt-3 d-flex justify-content-end">
          {{ $targets->links() }}
        </div>
      </div>
    </div>
  </div>
</div>
<style>
.pagination .page-link {
  border-radius: .5rem;
}
</style>
@endsection