@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.patients.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.patients.title') }}</li>
            </ul>
        </div>
        @can('clinic.patients.create')
            <a href="{{ route('admin.dashboard.clinic.patients.create') }}" class="btn btn-sm btn-primary"><i class="bi bi-person-plus"></i>{{ trans('clinic.patients.add') }}</a>
        @endcan
    </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
        @if (session('error'))
            <div class="alert alert-danger mb-5">{{ session('error') }}</div>
        @endif

        <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" value="{{ $search }}" class="form-control form-control-solid w-275px ps-12" placeholder="{{ trans('clinic.patients.search_placeholder') }}">
                    </div>
                </div>
                <div class="card-toolbar">
                    <select class="form-select form-select-solid form-select-sm w-200px" data-filter="bookings">
                        <option value="">{{ trans('clinic.patients.filter_all') }}</option>
                        <option value="upcoming">{{ trans('clinic.patients.filter_upcoming') }}</option>
                        <option value="with">{{ trans('clinic.patients.filter_with_bookings') }}</option>
                        <option value="without">{{ trans('clinic.patients.filter_without_bookings') }}</option>
                    </select>
                </div>
            </div>
            <div class="card-body pt-0">
                <table class="table align-middle table-row-dashed fs-6 gy-4 w-100" id="patientsTable">
                    <thead>
                    <tr class="text-start text-muted fw-bold fs-7 text-uppercase gs-0">
                        <th class="min-w-225px">{{ trans('clinic.common.name') }}</th>
                        <th>{{ trans('clinic.patients.phone') }}</th>
                        <th>{{ trans('clinic.patients.bookings_count') }}</th>
                        <th>{{ trans('clinic.patients.last_visit') }}</th>
                        <th>{{ trans('clinic.patients.registered') }}</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' => 'patientsTable',
        'url' => route('admin.dashboard.clinic.patients.index'),
        'columns' => [
            ['data' => 'patient', 'name' => 'patient'],
            ['data' => 'phone', 'name' => 'phone', 'searchable' => false],
            ['data' => 'clinic_bookings_count', 'name' => 'clinic_bookings_count', 'searchable' => false],
            ['data' => 'last_visit_at', 'name' => 'last_visit_at', 'searchable' => false],
            ['data' => 'created_at', 'name' => 'created_at', 'searchable' => false],
            ['data' => 'action', 'name' => 'action', 'orderable' => false, 'searchable' => false],
        ],
        'order' => [[4, 'desc']],
    ])
    @if ($search !== '')
        <script>
            // Links like ?q=... (from the clinic home) open the list already searched.
            $(function () { window.ServerTables.patientsTable.search(@json($search)).draw(); });
        </script>
    @endif
@endsection