@extends('layouts.app')

@push('styles')
<link rel="stylesheet" href="{{ asset('css/TbSection/preTbRecord.css') }}">
<style>
  @media (min-width: 768px) and (max-width: 1024px) {
    .pretb-manage-table .tablet-hide-col {
      display: none !important;
    }
  }
</style>
@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 pretb-manage-table">
              <thead>
                <tr>
                  <th class="tablet-hide-col">ID</th>
                  <th>CID</th>
                  <th>Name</th>
                  <th>Date of screening</th>
                  <th class="tablet-hide-col">Mode</th>
                  <th class="tablet-hide-col">Updated</th>
                  <th class="text-end">Actions</th>
                </tr>
              </thead>
              <tbody>
                @forelse ($records as $r)
                <tr>
                  <td class="tablet-hide-col">{{ $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 class="tablet-hide-col">{{ $r->mode_of_entry }}</td>
                  <td class="tablet-hide-col">{{ $r->updated_at ? $r->updated_at->format('d-m-Y H:i') : '' }}</td>
                  <td class="text-end">
                    <a href="{{ route('pretb_record.export_pdf', $r) }}"
                      class="btn btn-sm btn-outline-success"
                      data-tablet-confirm="Export this visit as PDF?">PDF</a>
                    <a href="{{ route('pretb_record.edit', $r) }}"
                      class="btn btn-sm btn-outline-light"
                      data-tablet-confirm="Open this visit for editing?">Edit</a>
                    <a href="{{ route('pretb_record.new_visit', $r) }}"
                      class="btn btn-sm btn-outline-info"
                      data-tablet-confirm="Create a new visit from this patient?">New visit</a>
                    <form method="POST"
                      action="{{ route('pretb_record.destroy', $r) }}"
                      class="d-inline"
                      data-tablet-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

@push('scripts')
<script>
  (() => {
    const isTabletViewport = () => window.matchMedia('(min-width: 768px) and (max-width: 1024px)').matches;

    document.querySelectorAll('[data-tablet-confirm]').forEach((el) => {
      const message = el.getAttribute('data-tablet-confirm') || 'Are you sure?';

      if (el.tagName === 'FORM') {
        el.addEventListener('submit', (event) => {
          if (!isTabletViewport()) return;
          if (!window.confirm(message)) {
            event.preventDefault();
          }
        });
        return;
      }

      el.addEventListener('click', (event) => {
        if (!isTabletViewport()) return;
        if (!window.confirm(message)) {
          event.preventDefault();
        }
      });
    });
  })();
</script>
@endpush