@extends('layouts.app')

@push('styles')
<link rel="stylesheet" href="{{ asset('css/TbSection/preTbRecord.css') }}">
<style>
  .pretb-manage-table th.actions-col,
  .pretb-manage-table td.actions-col {
    min-width: 204px;
    white-space: nowrap;
  }
  .pretb-manage-table th.required-col,
  .pretb-manage-table td.required-col {
    width: 170px;
    max-width: 170px;
  }
  .pretb-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: nowrap;
  }
  .pretb-actions form {
    margin: 0;
  }
  .pretb-actions .btn {
    width: 58px;
    min-width: 58px;
    height: 30px;
    padding: 0.2rem 0.35rem;
    line-height: 1.1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
  }
  .pretb-required-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-width: 0;
    max-width: 160px;
  }
  .pretb-required-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    font-size: 0.75rem;
    line-height: 1.25;
    color: #dbe8f7;
    background: rgba(255, 255, 255, 0.04);
    white-space: nowrap;
  }
  .pretb-required-chip.is-missing {
    border-color: #ff6b6b;
    color: #ffd5d5;
    background: rgba(188, 32, 32, 0.24);
  }
  .pretb-required-chip.is-off {
    opacity: 0.72;
  }
  @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>
            @if (!empty($recentOnly))
            <small class="d-block text-warning">Showing only last 60 days (from {{ \Carbon\Carbon::parse($recentCutoff)->format('d-m-Y') }})</small>
            @endif
          </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-3">
              <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-3">
              <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-3">
              <label for="filter_md" class="form-label">MD</label>
              <select class="form-select" id="filter_md" name="md">
                <option value=""></option>
                @foreach (($mdInitials ?? []) as $mdInitial)
                <option value="{{ $mdInitial }}" {{ ($filters['md'] ?? '') === (string) $mdInitial ? 'selected' : '' }}>{{ $mdInitial }}</option>
                @endforeach
              </select>
            </div>
            <div class="col-12 col-md-3 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>
          @if (empty($recentOnly))
          <div class="mt-2 text-info small">
            Search results include all matching records, including older and completed visits.
          </div>
          @endif

          <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="required-col">Required</th>
                  <th class="text-end actions-col">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">
                    @php
                    $modeLabels = [
                    '1' => 'General',
                    '2' => 'PLHIV',
                    '3' => 'Diabetes',
                    '7' => 'Diabetes',
                    '4' => 'Remote (ICMV)',
                    '5' => 'Remote (TB mobile)',
                    '6' => 'Contact tracing',
                    ];
                    $modeValues = array_filter(array_map('trim', explode(',', (string) $r->mode_of_entry)));
                    @endphp
                    {{ empty($modeValues) ? '' : implode(', ', array_map(fn($value) => $modeLabels[$value] ?? $value, $modeValues)) }}
                  </td>
                  <td class="tablet-hide-col">{{ $r->updated_at ? $r->updated_at->format('d-m-Y H:i') : '' }}</td>
                  <td class="required-col">
                    @php
                    $isFilled = static function ($value): bool {
                    if (is_null($value)) return false;
                    if (is_string($value)) return trim($value) !== '';
                    return true;
                    };
                    $commentText = strtolower((string) ($r->comment ?? ''));
                    $skipFieldMissing = [
                    'md_diagnosis' => str_contains($commentText, 'md other:'),
                    'radiologist_result' => str_contains($commentText, 'radiologist other:'),
                    ];

                    $statusDefinitions = [
                    ['label' => 'Chest X-ray', 'toggle' => 'chest_xray', 'fields' => ['chest_xray_date' => 'Date', 'chest_xray_fac' => 'Facility', 'md_diagnosis' => 'MD diagnosis']],
                    ['label' => 'Radiologist requested', 'toggle' => 'radio_request', 'fields' => ['radio_request_date' => 'Date', 'radiologist_result' => 'Result']],
                    ['label' => 'Sputum AFB', 'toggle' => 'sputum_afb', 'fields' => ['sputum_afb_date' => 'Date', 'sputum_afb_res' => 'Result']],
                    ['label' => 'GeneXpert', 'toggle' => 'genexpert', 'fields' => ['genexpert_date' => 'Date', 'genexpert_res' => 'Result']],
                    ['label' => 'Truenat', 'toggle' => 'truenat', 'fields' => ['truenat_date' => 'Date', 'truenat_res' => 'Result']],
                    ['label' => 'HIV (determine)', 'toggle' => 'hiv_det', 'fields' => ['hiv_det_date' => 'Date', 'hiv_det_res' => 'Result']],
                    ['label' => 'Antibiotics', 'toggle' => 'antibiotics', 'fields' => ['antibiotic_date' => 'Date', 'drug' => 'Drug']],
                    ['label' => 'TB treatment', 'toggle' => 'tb_treat', 'fields' => ['tb_treat_date' => 'Date', 'tb_treat_regimen' => 'Regimen']],
                    ];
                    $missingStatuses = [];
                    foreach ($statusDefinitions as $definition) {
                    $enabled = (string) data_get($r, $definition['toggle']) === '1';
                    if (!$enabled) {
                    continue;
                    }
                    $missingFields = [];
                    foreach ($definition['fields'] as $field => $fieldLabel) {
                    if (!empty($skipFieldMissing[$field])) {
                    continue;
                    }
                    if (!$isFilled(data_get($r, $field))) {
                    $missingFields[] = $fieldLabel;
                    }
                    }
                    if (!empty($missingFields)) {
                    $missingStatuses[] = [
                    'label' => $definition['label'],
                    'missing' => $missingFields,
                    ];
                    }
                    }
                    @endphp
                    @if (empty($missingStatuses))
                    <span class="text-muted">-</span>
                    @else
                    <div class="pretb-required-grid">
                      @foreach ($missingStatuses as $status)
                      <span
                        class="pretb-required-chip is-missing"
                        title="Missing: {{ implode(', ', $status['missing']) }}">
                        {{ $status['label'] }}
                      </span>
                      @endforeach
                    </div>
                    @endif
                  </td>
                  <td class="text-end actions-col">
                    <div class="pretb-actions">
                      <a href="{{ route('pretb_record.export_pdf', $r, false) }}"
                        class="btn btn-sm btn-outline-success"
                        target="_blank"
                        rel="noopener"
                        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>
                      <form method="POST"
                        action="{{ route('pretb_record.destroy', $r) }}"
                        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>
                    </div>
                  </td>
                </tr>
                @empty
                <tr>
                  <td colspan="8" 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