@extends('layout_dashboard')
@section('title', $title ?? '')
@section('content')

<div class="container-xxl flex-grow-1 container-p-y">
    <div class="row mb-4">
        <div class="col-12">
            <form action="{{ route('psychologist.index') }}" class="d-flex">
                <div class="input-group input-group-merge me-2">
                    <span class="input-group-text"><i class="ti ti-search"></i></span>
                    <input type="text" name="search" value="{{ request('search') }}"  class="form-control" placeholder="Masukkan Nama Psikolog" autocomplete="off">
                </div>
                <button type="submit" class="btn btn-dark"> Cari </button>
            </form>
        </div>
    </div>
    <div class="row mb-2">
        <div class="col-12">
            @foreach ( $psychologists as $p)
                <div class="card card-body border shadow-none mb-3">
                    <div class="row">
                        <div class="col-sm-2 align-self-center text-center px-3">
                            <div class="ratio ratio-1x1 mb-2">
                                <img src="{{ my_avatar_path($p->user) }}"
                                    class="w-100 rounded-circle" style="object-fit: cover; object-position:center;"
                                    alt="">
                            </div>
                        </div>
                        <div class="col">
                            <div class="mb-2">
                                <span class="badge rounded-pill bg-primary mb-2">{{ $p->type }}</span>
                                <span class="badge rounded-pill bg-info mb-2">Tersedia</span>
                            </div>
                            <div class="row mb-2">
                                <h4 class="font-weight-bolder mb-2">{{ $p->user->name }}</h4>
                            </div>
                            <div class="row">
                                <div class="col-sm">
                                    <span class="me-4 text-sm">
                                        <i class="fas fa-users me-2 text-info"></i>
                                        {{ $p->session ?? 0 }} + Sesi
                                    </span>
                                </div>
                                <div class="col-sm">
                                    <span class="me-4 text-sm">
                                        <i class="fas fa-thumbs-up me-2 text-primary"></i>
                                        100% Terbantu ({{ $p->review ?? 0 }} Ulasan)
                                    </span>
                                </div>
                                <div class="col-sm">
                                    <span class="me-4 text-sm">
                                        <i class="fas fa-briefcase me-2 text-warning"></i>
                                        {{ $p->experience ?? '-' }}
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-2 d-flex justify-content-center align-items-center"> 
                            <a href="{{ route('psychologist.show', $p->user->username) }}" class="btn btn-primary rounded-pill mt-2 mb-0" type="button">
                                <span>Lihat Selengkapnya</span>
                            </a>
                        </div>
                    </div>
                </div>
            @endforeach
            <div class="d-flex justify-content-center">
                {{ $psychologists->appends(request()->input())->links('pagination::bootstrap-5') }}
            </div>
        </div>
    </div>
</div>

@endsection

@section('css')
@endsection

@section('js')
@endsection