@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.doctors.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.doctors.title') }}</li>
            </ul>
        </div>
        @can('clinic.doctors.create')
            <a href="{{ route('admin.dashboard.clinic.doctors.create') }}" class="btn btn-sm btn-primary"><i class="bi bi-plus-lg"></i>{{ trans('clinic.doctors.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

        <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.doctors.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="specialty_id">
                        <option value="">{{ trans('clinic.doctors.all_specialties') }}</option>
                        @foreach ($specialties as $specialty)
                            <option value="{{ $specialty->id }}">{{ $specialty->name }}</option>
                        @endforeach
                    </select>
                    <select class="form-select form-select-solid form-select-sm w-200px" data-filter="clinic_id">
                        <option value="">{{ trans('clinic.doctors.all_clinics') }}</option>
                        @foreach ($clinics as $clinic)
                            <option value="{{ $clinic->id }}">{{ $clinic->branch?->name }} — {{ $clinic->name }}</option>
                        @endforeach
                    </select>
                    <select class="form-select form-select-solid form-select-sm w-150px" data-filter="status">
                        <option value="">{{ trans('clinic.bookings.all_statuses') }}</option>
                        <option value="active">{{ trans('core.common.status_active') }}</option>
                        <option value="inactive">{{ trans('core.common.status_inactive') }}</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="doctorsTable">
                    <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.doctors.specialty') }}</th>
                        <th class="min-w-150px">{{ trans('clinic.doctors.clinic') }}</th>
                        <th>{{ trans('clinic.doctors.tab_ratings') }}</th>
                        <th>{{ trans('clinic.doctors.tab_bookings') }}</th>
                        <th>{{ trans('clinic.common.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' => 'doctorsTable',
        'url' => route('admin.dashboard.clinic.doctors.index'),
        'columns' => [
            ['data' => 'doctor', 'name' => 'doctor'],
            ['data' => 'specialty', 'name' => 'specialty', 'orderable' => false, 'searchable' => false],
            ['data' => 'clinics', 'name' => 'clinics', 'orderable' => false, 'searchable' => false],
            ['data' => 'rating', 'name' => 'rating', 'orderable' => false, 'searchable' => false],
            ['data' => 'bookings_count', 'name' => 'bookings_count', 'searchable' => false],
            ['data' => 'status', 'name' => 'status', 'searchable' => false],
            ['data' => 'action', 'name' => 'action', 'orderable' => false, 'searchable' => false],
        ],
        'order' => [[0, 'asc']],
    ])
@endsection