@extends('layouts.app')

@push('styles')
<link rel="stylesheet" href="{{ asset('css/TbSection/preTbRecord.css') }}">
@endpush

@section('content')
@auth
<div class="container-fluid pre-tb-record-container">
  <div class="row justify-content-center">
    <div class="col-12">
      <div class="card pre-tb-card shadow-sm mx-auto">
        <div class="card-header d-flex justify-content-between align-items-center">
          <div>
            <h2 class="mb-0">Pre-TB records</h2>
            <small class="text-muted">Search and update visits</small>
          </div>
          <div class="d-flex flex-nowrap align-items-center gap-2">
            <a href="{{ route('pretb_record.create') }}" class="btn btn-outline-light btn-sm">New record</a>
          </div>
        </div>

        <div class="card-body">
          @if (session('status'))
          <div class="alert alert-success">
            {{ session('status') }}
          </div>
          @endif

          <form method="GET" action="{{ route('pretb_record.manage') }}" class="row g-3 align-items-end">
            <div class="col-12 col-md-4">
              <label for="filter_cid" class="form-label">CID</label>
              <input type="text"
                class="form-control"
                id="filter_cid"
                name="cid"
                value="{{ $filters['cid'] ?? '' }}"
                placeholder="7124000001">
            </div>
            <div class="col-12 col-md-4">
              <label for="filter_name" class="form-label">Name</label>
              <input type="text"
                class="form-control"
                id="filter_name"
                name="name"
                value="{{ $filters['name'] ?? '' }}"
                placeholder="search…">
            </div>
            <div class="col-12 col-md-4 d-flex gap-2">
              <button type="submit" class="btn btn-primary">Search</button>
              <a href="{{ route('pretb_record.manage') }}" class="btn btn-outline-light">Reset</a>
            </div>
          </form>

          <hr class="my-4">

          <div class="table-responsive">
            <table class="table table-dark table-striped align-middle mb-0">
              <thead>
                <tr>
                  <th>ID</th>
                  <th>CID</th>
                  <th>Name</th>
                  <th>Date of screening</th>
                  <th>Mode</th>
                  <th>Updated</th>
                  <th class="text-end">Actions</th>
                </tr>
              </thead>
              <tbody>
                @forelse ($records as $r)
                <tr>
                  <td>{{ $r->id }}</td>
                  <td>{{ $r->cid }}</td>
                  <td>{{ $r->name }}</td>
                  <td>{{ $r->date_of_screening ? $r->date_of_screening->format('d-m-Y') : '' }}</td>
                  <td>{{ $r->mode_of_entry }}</td>
                  <td>{{ $r->updated_at ? $r->updated_at->format('d-m-Y H:i') : '' }}</td>
                  <td class="text-end">
                    <a href="{{ route('pretb_record.edit', $r) }}" class="btn btn-sm btn-outline-light">Edit</a>
                    <a href="{{ route('pretb_record.new_visit', $r) }}" class="btn btn-sm btn-outline-info">New visit</a>
                    <form method="POST"
                      action="{{ route('pretb_record.destroy', $r) }}"
                      class="d-inline"
                      onsubmit="return confirm('Delete this Pre-TB record? This cannot be undone.');">
                      @csrf
                      @method('DELETE')
                      <button type="submit" class="btn btn-sm btn-outline-danger">Delete</button>
                    </form>
                  </td>
                </tr>
                @empty
                <tr>
                  <td colspan="7" class="text-center text-muted py-4">No records found.</td>
                </tr>
                @endforelse
              </tbody>
            </table>
          </div>

          <div class="mt-3">
            {{ $records->links() }}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
@endauth
@endsection