@extends('frontend.layouts.main')
@section('main-container')

@section('title','Health Card Record')
@section('description','Health Card')
    
<!-- ========== MAIN CONTENT ========== -->

<hr


<section class="rt-cta-area">
    <div class="container">
    <div class="row">
            <div class="col-12 text-center">
                <form action="{{ route('tracked') }}" method="POST" id="track_card_form">
                    @csrf
                    <div class="form-group">
                        <input type="text" id="card_number" name="card_number" required class="form-control" placeholder="Cnic,R.Number" required style="width: 300px; margin: 0 auto; text-align: center; margin-top: 20px;">
                        <button id="track_card" class="btn btn-primary" style="margin-top: 20px;">Track Card</button>
                    </div>
                    </form>
          
    
            </div><!-- /.col-12 -->
        </div><!-- /.row -->
        <div class="row">
            <div class="col-12">



            @isset($results)

@if($results->isEmpty())
        <p>No results found.</p>
    @else
    <table class="table table-striped table-hover">
                <thead>
                    <tr>
                        <th>Sr.no</th>
                        <th>Name</th>
                        <th>CNIC</th>
                        <th>Contact</th>
                    </tr>
                </thead>
                <tbody id="card_table_body">
                @foreach($results as $item)
                
                    <tr>
                    <td id="card_expiry_date_display">{{ $item->registrationno }}</td>
                        <td id="card_number_display">{{ $item->name }}</td>
                        <td id="card_type_display">{{ $item->cnic }}</td>
                        <td id="card_status_display">{{ $item->contact }}</td>
                       
                    </tr>


                @endforeach
            </tbody>
        </table>
    @endif
    @endisset


               
         

            </div><!-- /.col-12 -->
        </div><!-- /.row -->
    </div><!-- /.container -->


</section>
<div class="spacer-bottom"></div><!-- /.spacer-bottom -->




<!-- ========== END MAIN CONTENT ========== -->
@endsection