@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.staff.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.staff.title') }}</li>
            </ul>
        </div>
        @can('clinic.staff.create')
            <a href="{{ route('admin.dashboard.clinic.staff.create') }}" class="btn btn-sm btn-primary"><i class="bi bi-person-plus"></i>{{ trans('clinic.staff.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('user.search_placeholder') }}">
                    </div>
                </div>
                <div class="card-toolbar gap-3">
                    @if ($branches->isNotEmpty())
                        <select class="form-select form-select-solid form-select-sm w-200px" data-filter="branch_id">
                            <option value="">{{ trans('user.all_branches') }}</option>
                            @foreach ($branches as $branch)
                                <option value="{{ $branch->id }}">{{ $branch->name }}</option>
                            @endforeach
                        </select>
                    @endif
                    <select class="form-select form-select-solid form-select-sm w-150px" data-filter="status">
                        <option value="">{{ trans('user.all_statuses') }}</option>
                        <option value="1">{{ trans('user.active') }}</option>
                        <option value="0">{{ trans('user.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="staffTable">
                    <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.staff.phone') }}</th>
                        <th>{{ trans('user.role') }}</th>
                        <th>{{ trans('clinic.staff.branch') }}</th>
                        <th>{{ trans('clinic.common.status') }}</th>
                        <th>{{ trans('user.created_at') }}</th>
                        <th class="text-end">{{ 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' => 'staffTable',
        'url' => route('admin.dashboard.clinic.staff.index'),
        'columns' => [
            ['data' => 'user', 'name' => 'user'],
            ['data' => 'phone', 'name' => 'phone', 'searchable' => false],
            ['data' => 'role', 'name' => 'role', 'orderable' => false, 'searchable' => false],
            ['data' => 'branch', 'name' => 'branch', 'orderable' => false, 'searchable' => false],
            ['data' => 'status', 'name' => 'status', 'searchable' => false],
            ['data' => 'created_at', 'name' => 'created_at', 'searchable' => false],
            ['data' => 'action', 'name' => 'action', 'orderable' => false, 'searchable' => false],
        ],
        'order' => [[5, 'desc']],
    ])
@endsection