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

<div class="container-xxl container-p-y">

    @include('parts.alert')

    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card card-body border shadow-none mb-4 mb-md-0">
                <div class="w-50 mx-auto mb-3">
                    <div class="ratio ratio-1x1">
                        <img src="{{ my_avatar_path($psychologist->user) }}" class="w-100 rounded-circle" style="object-fit: cover; object-position:center" alt="">
                    </div>
                </div>
                <small class="bg-gradient text-main-blue text-center">{{ $psychologist->type }}</small>
                <div class="row justify-content-around">
                    <div class="col-md-11">
                        <p class="fw-bold text-center">{{ $psychologist->user->name }}</p>
                        <div>
                            <div class="d-flex align-items-center mb-0">
                                <i class="fas fa-users me-2 text-primary"></i>
                                <span>{{ $psychologist->session }} + Sesi</span>
                            </div>
                            <div class="d-flex align-items-center mb-0">
                                <i class="fas fa-thumbs-up me-2 text-primary"></i>
                                <span>100% Terbantu ({{ $psychologist->review }} Ulasan)</span>
                            </div>
                            <div class="d-flex align-items-center mb-0">
                                <i class="fas fa-briefcase me-2 text-warning"></i>
                                <span>{{ $psychologist->experience }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <a href="#schedule" role="button" class="btn btn-sm btn-primary rounded-pill mb-0 me-1 mt-3" style="text-transform: none">
                    Cari Jadwal
                </a>
            </div>
        </div>
        <div class="col-md-9">
            <div class="card card-body border shadow-none mb-4">
                <h5 class="mb-4">Detail Psikolog</h5>
                <div class="d-flex flex-inline mb-4">
                    <span>
                        <p class="font-weight-bold m-0 text-dark">SIPP</p>
                        <div class="small">{{ $psychologist->sipp }}</div>
                    </span>
                    <span class="ms-4">
                        <p class="font-weight-bold m-0 text-dark">STR</p>
                        <div class="small">{{ $psychologist->str }}</div>
                    </span>
                </div>
                <p>
                    <span class="d-none d-sm-flex">
                        {{ $psychologist->description}}
                    </span>
                </p>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="card card-body flex-fill border shadow-none mb-4">
                        <h5 class="mb-4">Pendidikan</h5>
                        @foreach ( $psychologist->user->educations as $e)
                            <div class=" mb-3">
                                <p class="font-weight-bold mb-0 text-dark">{{ $e->university }}</p>
                                <p class="mb-0">{{ $e->year_start }} - {{ $e->year_end }} {{ $e->study_program }}</p>
                            </div>
                        @endforeach
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card card-body flex-fill border shadow-none mb-4">
                        <h5 class="mb-3">Topik Keahlian</h5>
                        <div>
                            @foreach ( $psychologist->user->topics as $tp)
                            <a href="{{ route('psychologist.index') }}?topic={{ $tp->slug }}" class="badge rounded-pill bg-label-dark me-2 mb-2">{{ $tp->name }}</a>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
            <div id="schedule" class="card card-body border shadow-none mb-4">
                <h5 class="mb-3">Jadwal dan Layanan Tersedia</h5>
                <div class="row">
                    @foreach ($schedules as $s)
                        <div class="col-md-3">
                            <div class="card bg-dark text-white text-center mb-2 py-2 px-3" 
                                @if ($s->schedule_assigned->isNotEmpty())
                                @else
                                    data-bs-toggle="modal" 
                                    data-bs-target="#assignedModal"
                                    data-schedule-id="{{ $s->id }}"
                                    style="cursor: pointer;"
                                @endif 
                            >
                                
                                <span class="fw-bold text-white" style="text-transform:none;">
                                    {{ my_timestamp_to_id($s->datetime_start)['date'] }}
                                </span>
                                <hr class="m-1">
                                <span class="font-weight-light text-white" style="text-transform:none;">
                                    {{ my_timestamp_to_id($s->datetime_start)['time'] }} - {{ my_timestamp_to_id($s->datetime_end)['time'] }} WIB
                                </span>
                
                                @if ($s->schedule_assigned->isNotEmpty())
                                    <div class="bg-danger rounded-pill text-white m-2">Tidak Tersedia</div>
                                @else
                                    <div class="bg-success rounded-pill text-white m-2">Tersedia</div>
                                @endif
                            </div>
                        </div>
                    @endforeach
                </div>                
            </div>
            <div class="card card-body mt-4 border shadow-none">
                <h5 class="mb-3">Ulasan</h5>
                <div>
                    @foreach ($reviews as $r)
                        <div class="border-bottom p-3 text-dark service-list">
                            <div class="row">
                                <div class="col-12 col-md-9">
                                    <div class="d-flex align-items-center mb-3">
                                        <div class="">
                                            <img src="{{ my_avatar_path($r->schedule_assigned->user) }}" alt="Avatar" class="rounded-circle shadow" style="width: 50px; height: 50px;">
                                        </div>
                                        <div class="ms-3">
                                            <span class="fw-bold">{{ $r->schedule_assigned->user->name }}</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 col-md-3 text-end">
                                    <small class="text-xs text-muted">{{ my_timestamp_to_id($r->created_at)['date'] }}</small>
                                </div>
                            </div>
                            <p><span class="fw-bold">{{ $r->schedule_assigned->schedule->service->name }}</span> | <span class="">{{ $r->schedule_assigned->schedule->user->psychologist->type }}</span> <span>{!! my_review_stars_html($r->rating) !!}</span></p>
                            <p>{{ $r->comment }}</p>
                        </div>
                    @endforeach
                    <div class="d-flex justify-content-center">
                        {{ $reviews->appends(request()->input())->links('pagination::bootstrap-5') }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="assignedModal" tabindex="-1" aria-labelledby="approvedModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="modal-title w-100 text-center pt-4" id="approvedModalLabel">Konfirmasi Pengajuan</h2>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="assignedForm" method="POST" action="">
                @csrf
                <div class="modal-body p-0 pb-2">
                    <div class="text-center p-0">
                        <p class="p-0">Apakah Anda yakin ingin memilih jadwal di tanggal dan jam ini?</p>
                    </div>
                    <input type="hidden" name="id" id="confirmed_id" value="">
                    <input type="hidden" name="status" value="confirmed">
                    <div class="form-group m-2">
                        <label>Catatan/Keluhan</label>
                        <div class="controls">
                            <textarea name="note_user" class="form-control" style="height: 120px;">{{ old('note_user') }}</textarea>
                        </div>
                    </div>
                </div>
                <div class="modal-footer d-flex justify-content-center">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-success">Ya, Pilih</button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@section('css')
@endsection

@section('js')

<script>
    document.addEventListener('DOMContentLoaded', function () {
    var assignedModal = document.getElementById('assignedModal');
    assignedModal.addEventListener('show.bs.modal', function (event) {
        var button = event.relatedTarget;
        var scheduleId = button.getAttribute('data-schedule-id');
        var form = document.getElementById('assignedForm');
        form.action = '/schedule/' + scheduleId + '/assign';
    });
});

</script>

@endsection