@extends('admin.dashboard.layouts.app')
@section('main')
<div class="content-wrapper">
  <div class="card">
    <div class="card-header">

      {{-- Single Date Filter --}}
      <form method="GET" action="{{ route('appointments.index') }}" class="form-inline mb-2">
        <label class="mr-2 font-weight-bold">Single Date:</label>
        <input type="date" name="date" value="{{ $dateForInput }}" class="form-control mr-2">
        <button type="submit" class="btn btn-primary">Filter</button>
      </form>

      {{-- Date Range Filter --}}
      <form method="GET" action="{{ route('appointments.index') }}" class="form-inline">
        <label class="mr-2 font-weight-bold">From:</label>
        <input type="date" name="date_from" value="{{ $dateFromInput }}" class="form-control mr-2">
        <label class="mr-2 font-weight-bold">To:</label>
        <input type="date" name="date_to" value="{{ $dateToInput }}" class="form-control mr-2">
        <button type="submit" class="btn btn-success">Filter Range</button>
      </form>

    </div>

    {{-- Active filter info --}}
    <div class="px-3 pt-2">
      @if($dateFromInput && $dateToInput)
        <span class="badge badge-success">
          Showing: {{ \Carbon\Carbon::parse($dateFromInput)->format('d M Y') }}
          &rarr; {{ \Carbon\Carbon::parse($dateToInput)->format('d M Y') }}
        </span>
      @elseif($selectedDate)
        <span class="badge badge-primary">Showing: {{ $selectedDate }}</span>
      @endif
    </div>

    <div class="card-body">
      <table id="example1" class="table table-bordered table-hover">
       <thead>
          <tr>
            <th>#SL</th>
            <th>Date</th>   {{-- ADD THIS --}}
            <th>Organization</th>
            <th>Doctor</th>
            <th>Location</th>
            <th>Total Appointments</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody>
          @php $sl = 1; @endphp
          @foreach($appointments as $app)
          <tr>
            <td>{{ $sl++ }}</td>
            <td>{{ $app->selected_date }}</td>   {{-- ADD THIS --}}
            <td>{{ $app->organization_name }}</td>
            <td>{{ $app->doctor_name }}</td>
            <td>{{ $app->organization_location }}</td>
            <td><span class="badge badge-info">{{ $app->total_appointments }}</span></td>
           <td>
              @if($dateFromInput && $dateToInput)
                <a href="{{ route('appointments.details', [$app->organization_id, $app->doctor_id, urlencode($app->selected_date)]) }}?date_from={{ $dateFromInput }}&date_to={{ $dateToInput }}"
                   class="btn btn-outline-primary btn-sm">Details</a>
              @else
                <a href="{{ route('appointments.details', [$app->organization_id, $app->doctor_id, urlencode($app->selected_date)]) }}"
                   class="btn btn-outline-primary btn-sm">Details</a>
              @endif
            </td>
          </tr>
          @endforeach
        </tbody>
      </table>
    </div>
  </div>
</div>
@endsection