@extends('dashboard.admin.layouts.master')

@section('toolbar')
    <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
        <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
            <h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0">{{ trans('clinic.followups.worklist_title') }}</h1>
            <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                <li class="breadcrumb-item text-muted"><a href="{{ route('admin.dashboard.clinic.home') }}" class="text-muted text-hover-primary">{{ trans('Toolbar.home') }}</a></li>
                <li class="breadcrumb-item"><span class="bullet bg-gray-400 w-5px h-2px"></span></li>
                <li class="breadcrumb-item text-muted">{{ trans('clinic.followups.title') }}</li>
            </ul>
        </div>
    </div>
@endsection

@section('content')
    <div id="kt_app_content_container" class="app-container container-xxl">
        @if (session('success'))
            <div class="alert alert-success mb-5">{{ session('success') }}</div>
        @endif

        <div class="row g-5 mb-7">
            <div class="col-md-6">
                <div class="card card-flush h-100"><div class="card-body d-flex align-items-center py-6">
                    <span class="symbol symbol-50px me-5"><span class="symbol-label bg-light-warning"><i class="bi bi-arrow-repeat fs-2x text-warning"></i></span></span>
                    <div><div class="fs-2hx fw-bold text-gray-900 lh-1">{{ $pendingCount }}</div><div class="text-muted fw-semibold mt-1">{{ trans('clinic.followups.pending_count') }}</div></div>
                </div></div>
            </div>
            <div class="col-md-6">
                <div class="card card-flush h-100"><div class="card-body d-flex align-items-center py-6">
                    <span class="symbol symbol-50px me-5"><span class="symbol-label bg-light-danger"><i class="bi bi-exclamation-triangle fs-2x text-danger"></i></span></span>
                    <div><div class="fs-2hx fw-bold text-gray-900 lh-1">{{ $overdueCount }}</div><div class="text-muted fw-semibold mt-1">{{ trans('clinic.followups.overdue_count') }}</div></div>
                </div></div>
            </div>
        </div>

        <div class="card card-flush">
            <div class="card-header border-0 pt-6 align-items-center">
                <div class="card-title">
                    <div class="d-flex align-items-center position-relative my-1">
                        <i class="bi bi-search fs-5 position-absolute ms-4 text-muted"></i>
                        <input type="text" id="tableSearch" class="form-control form-control-solid w-250px ps-12" placeholder="{{ trans('clinic.followups.search_placeholder') }}">
                    </div>
                </div>
                <div class="card-toolbar gap-3 flex-wrap">
                    <select class="form-select form-select-solid form-select-sm w-175px" data-filter="status">
                        @foreach (['pending', 'scheduled', 'cancelled'] as $option)
                            <option value="{{ $option }}">{{ trans('clinic.followups.statuses.' . $option) }}</option>
                        @endforeach
                        <option value="all">{{ trans('clinic.bookings.all_statuses') }}</option>
                    </select>
                    <select class="form-select form-select-solid form-select-sm w-175px" data-filter="due">
                        <option value="">{{ trans('clinic.followups.due_any') }}</option>
                        <option value="overdue">{{ trans('clinic.followups.overdue') }}</option>
                        <option value="week">{{ trans('clinic.followups.due_week') }}</option>
                        <option value="none">{{ trans('clinic.followups.no_due_date') }}</option>
                    </select>
                    <select class="form-select form-select-solid form-select-sm w-175px" data-filter="doctor_id">
                        <option value="">{{ trans('clinic.bookings.all_doctors') }}</option>
                        @foreach ($doctors as $doctor)
                            <option value="{{ $doctor->id }}">{{ $doctor->name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="card-body pt-0">
                <table class="table align-middle table-row-dashed fs-6 gy-4 w-100" id="followupsTable">
                    <thead>
                    <tr class="text-start text-muted fw-bold fs-7 text-uppercase gs-0">
                        <th class="min-w-150px">{{ trans('clinic.followups.patient') }}</th>
                        <th>{{ trans('clinic.followups.doctor') }}</th>
                        <th>{{ trans('clinic.followups.clinic') }}</th>
                        <th>{{ trans('clinic.followups.last_visit') }}</th>
                        <th>{{ trans('clinic.followups.due_date') }}</th>
                        <th>{{ trans('clinic.followups.status') }}</th>
                        <th class="text-end min-w-150px">{{ trans('clinic.common.actions') }}</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('js')
    @include('dashboard.admin.partials.crud-table-js')
    @include('dashboard.admin.partials.server-table', [
        'tableId' => 'followupsTable',
        'url' => route('admin.dashboard.clinic.followups.index'),
        'columns' => [
            ['data' => 'patient', 'name' => 'patient', 'orderable' => false],
            ['data' => 'doctor', 'name' => 'doctor', 'orderable' => false, 'searchable' => false],
            ['data' => 'clinic', 'name' => 'clinic', 'orderable' => false, 'searchable' => false],
            ['data' => 'last_visit', 'name' => 'last_visit', 'orderable' => false, 'searchable' => false],
            ['data' => 'due_date', 'name' => 'due_date', 'searchable' => false],
            ['data' => 'status', 'name' => 'status', 'searchable' => false],
            ['data' => 'action', 'name' => 'action', 'orderable' => false, 'searchable' => false],
        ],
        'order' => [[4, 'asc']],
    ])
@endsection