@extends('dashboard.admin.layouts.master')

@php
    $dayKeys = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'];
    $money = fn ($amount) => number_format((float) $amount, 2);
@endphp

@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.details') }}</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"><a href="{{ route('admin.dashboard.clinic.doctors.index') }}" class="text-muted text-hover-primary">{{ trans('clinic.doctors.title') }}</a></li>
                <li class="breadcrumb-item"><span class="bullet bg-gray-400 w-5px h-2px"></span></li>
                <li class="breadcrumb-item text-muted">{{ $doctor->name }}</li>
            </ul>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ route('admin.dashboard.clinic.doctors.index') }}" class="btn btn-sm btn-light">{{ trans('clinic.common.back') }}</a>
            @can('clinic.schedules.view')
                <a href="{{ route('admin.dashboard.clinic.doctors.schedule.edit', $doctor) }}" class="btn btn-sm btn-light-primary"><i class="bi bi-calendar-week"></i>{{ trans('clinic.doctors.schedule') }}</a>
            @endcan
            @can('clinic.doctors.edit')
                <a href="{{ route('admin.dashboard.clinic.doctors.edit', $doctor) }}" class="btn btn-sm btn-warning"><i class="bi bi-pencil"></i>{{ trans('core.common.edit') }}</a>
            @endcan
        </div>
    </div>
@endsection

@section('content')
    <div id="kt_app_content_container" class="app-container container-xxl">

        {{-- Header card --}}
        <div class="card mb-6">
            <div class="card-body pt-9 pb-0">
                <div class="d-flex flex-wrap flex-sm-nowrap">
                    <div class="me-7 mb-4">
                        <div class="symbol symbol-100px symbol-lg-130px symbol-fixed position-relative">
                            <img src="{{ $doctor->photo_path ? asset($doctor->photo_path) : asset('assets/media/avatars/blank.png') }}" alt="{{ $doctor->name }}" style="object-fit: cover">
                            <div class="position-absolute translate-middle bottom-0 start-100 mb-6 bg-{{ $doctor->status === 'active' ? 'success' : 'danger' }} rounded-circle border border-4 border-body h-20px w-20px"></div>
                        </div>
                    </div>
                    <div class="flex-grow-1">
                        <div class="d-flex justify-content-between align-items-start flex-wrap mb-2">
                            <div class="d-flex flex-column">
                                <div class="d-flex align-items-center mb-2">
                                    <span class="text-gray-900 fs-2 fw-bold me-2">{{ $doctor->name }}</span>
                                    <span class="badge badge-light-{{ $doctor->status === 'active' ? 'success' : 'danger' }}">{{ trans('core.common.status_' . ($doctor->status === 'active' ? 'active' : 'inactive')) }}</span>
                                </div>
                                <div class="d-flex flex-wrap fw-semibold fs-6 mb-4 pe-2 gap-5 text-gray-500">
                                    <span><i class="bi bi-heart-pulse me-1"></i>{{ $doctor->specialty?->name ?? '—' }}</span>
                                    @if ($doctor->phone)<span dir="ltr"><i class="bi bi-telephone me-1"></i>{{ $doctor->phone }}</span>@endif
                                    <span><i class="bi bi-envelope me-1"></i>{{ $doctor->email }}</span>
                                    @if ($doctor->years_experience)<span><i class="bi bi-award me-1"></i>{{ trans('clinic.doctors.years_count', ['count' => $doctor->years_experience]) }}</span>@endif
                                </div>
                            </div>
                        </div>

                        <div class="d-flex flex-wrap gap-4 mb-6">
                            @foreach (array_filter([
                                ['bi-calendar-check', 'primary', $summary['total'], trans('clinic.doctors.stat_bookings')],
                                ['bi-hourglass-split', 'warning', $summary['upcoming'], trans('clinic.doctors.stat_upcoming')],
                                ['bi-camera-video', 'info', $summary['online'], trans('clinic.doctors.stat_online')],
                                ['bi-star-fill', 'warning', $summary['rating'] !== null ? $summary['rating'] . ' / 5' : '—', trans('clinic.doctors.stat_rating', ['count' => $summary['reviews_count']])],
                                $canSeeMoney ? ['bi-cash-coin', 'success', $money($summary['doctor_share']), trans('clinic.doctors.stat_doctor_share')] : null,
                            ]) as [$icon, $color, $value, $label])
                                <div class="border border-gray-300 border-dashed rounded min-w-150px py-3 px-4">
                                    <div class="d-flex align-items-center">
                                        <i class="bi {{ $icon }} fs-3 text-{{ $color }} me-2"></i>
                                        <div class="fs-2 fw-bold" dir="ltr">{{ $value }}</div>
                                    </div>
                                    <div class="fw-semibold fs-7 text-gray-500">{{ $label }}</div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>

                <ul class="nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bold" role="tablist">
                    <li class="nav-item"><a class="nav-link text-active-primary py-5 me-6 active" data-bs-toggle="tab" href="#doctor_main">{{ trans('clinic.doctors.tab_main') }}</a></li>
                    <li class="nav-item"><a class="nav-link text-active-primary py-5 me-6" data-bs-toggle="tab" href="#doctor_ratings">{{ trans('clinic.doctors.tab_ratings') }} <span class="badge badge-light-warning ms-1">{{ $summary['reviews_count'] }}</span></a></li>
                    <li class="nav-item"><a class="nav-link text-active-primary py-5 me-6" data-bs-toggle="tab" href="#doctor_bookings" data-load-table="all">{{ trans('clinic.doctors.tab_bookings') }}</a></li>
                    <li class="nav-item"><a class="nav-link text-active-primary py-5 me-6" data-bs-toggle="tab" href="#doctor_online" data-load-table="online">{{ trans('clinic.doctors.tab_online') }}</a></li>
                    @if ($canSeeMoney)
                        <li class="nav-item"><a class="nav-link text-active-primary py-5 me-6" data-bs-toggle="tab" href="#doctor_account" data-load-account>{{ trans('clinic.doctors.tab_account') }}</a></li>
                    @endif
                </ul>
            </div>
        </div>

        <div class="tab-content">
            {{-- Main data --}}
            <div class="tab-pane fade show active" id="doctor_main">
                <div class="row g-6">
                    <div class="col-lg-5">
                        <div class="card card-flush h-100">
                            <div class="card-header"><h3 class="card-title">{{ trans('clinic.doctors.professional_info') }}</h3></div>
                            <div class="card-body pt-0">
                                @foreach ([
                                    [trans('clinic.doctors.specialty'), $doctor->specialty?->name],
                                    [trans('clinic.doctors.years_experience'), $doctor->years_experience],
                                    [trans('clinic.doctors.phone'), $doctor->phone],
                                    [trans('clinic.doctors.email'), $doctor->email],
                                    [trans('clinic.doctors.joined'), $doctor->created_at?->format('Y-m-d')],
                                ] as [$label, $value])
                                    <div class="d-flex py-3 border-bottom border-gray-200">
                                        <span class="text-muted w-150px flex-shrink-0">{{ $label }}</span>
                                        <span class="fw-semibold text-gray-800" dir="auto">{{ $value ?: '—' }}</span>
                                    </div>
                                @endforeach
                                @foreach ([[trans('clinic.doctors.bio'), $doctor->bio], [trans('clinic.doctors.qualifications'), $doctor->qualifications]] as [$label, $value])
                                    @if ($value)
                                        <div class="mt-5">
                                            <div class="text-muted mb-2">{{ $label }}</div>
                                            <div class="text-gray-800 lh-lg">{!! nl2br(e($value)) !!}</div>
                                        </div>
                                    @endif
                                @endforeach
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-7">
                        <div class="card card-flush h-100">
                            <div class="card-header"><h3 class="card-title">{{ trans('clinic.doctors.clinics_and_schedule') }}</h3></div>
                            <div class="card-body pt-0">
                                @forelse ($clinics as $pivot)
                                    <div class="border border-dashed rounded p-5 mb-5">
                                        <div class="d-flex justify-content-between flex-wrap gap-2 mb-4">
                                            <div>
                                                <div class="fw-bold fs-5">{{ $pivot->clinicProfile?->name }}</div>
                                                <div class="text-muted fs-7"><i class="bi bi-geo-alt"></i> {{ $pivot->clinicProfile?->branch?->name }}</div>
                                            </div>
                                            <span class="badge badge-light-{{ $pivot->is_active ? 'success' : 'secondary' }} align-self-start">{{ trans('core.common.status_' . ($pivot->is_active ? 'active' : 'inactive')) }}</span>
                                        </div>
                                        <div class="d-flex flex-wrap gap-3 mb-4">
                                            @foreach (\App\Services\Clinic\DoctorProfileService::TYPES as $type)
                                                <span class="badge badge-light fs-7 py-2 px-3">
                                                    {{ trans('clinic.bookings.' . $type) }}:
                                                    <strong class="ms-1">{{ isset($pivot->prices[$type]) ? $money($pivot->prices[$type]->total_price) : '—' }}</strong>
                                                </span>
                                            @endforeach
                                        </div>
                                        @if ($pivot->schedules->isEmpty())
                                            <div class="text-muted fs-7">{{ trans('clinic.doctors.no_schedule') }}</div>
                                        @else
                                            <div class="table-responsive">
                                                <table class="table table-sm table-row-dashed align-middle mb-0 fs-7">
                                                    @foreach ($pivot->schedules->groupBy('day_of_week') as $day => $periods)
                                                        <tr>
                                                            <td class="fw-semibold w-100px">{{ trans('clinic.doctors.days.' . ($dayKeys[$day] ?? 'sunday')) }}</td>
                                                            <td>
                                                                @foreach ($periods as $period)
                                                                    <span class="badge badge-light-primary me-1" dir="ltr">{{ substr($period->start_time, 0, 5) }} - {{ substr($period->end_time, 0, 5) }}</span>
                                                                @endforeach
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                </table>
                                            </div>
                                        @endif
                                    </div>
                                @empty
                                    <div class="text-muted">{{ trans('clinic.doctors.no_clinics') }}</div>
                                @endforelse
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Ratings --}}
            <div class="tab-pane fade" id="doctor_ratings">
                <div class="row g-6">
                    <div class="col-lg-4">
                        <div class="card card-flush">
                            <div class="card-body text-center">
                                <div class="fs-3x fw-bolder text-gray-900">{{ $summary['rating'] ?? '—' }}</div>
                                <div class="mb-2">@include('dashboard.admin.Site.feedback.partials.stars', ['rating' => (int) round($summary['rating'] ?? 0)])</div>
                                <div class="text-muted mb-7">{{ trans('clinic.doctors.reviews_count', ['count' => $summary['reviews_count']]) }}</div>
                                @foreach ($distribution as $stars => $count)
                                    <div class="d-flex align-items-center gap-3 mb-2">
                                        <span class="w-25px fw-bold">{{ $stars }} <i class="bi bi-star-fill text-warning fs-8"></i></span>
                                        <div class="progress h-8px flex-grow-1"><div class="progress-bar bg-warning" style="width: {{ $summary['reviews_count'] ? round($count * 100 / $summary['reviews_count']) : 0 }}%"></div></div>
                                        <span class="w-25px text-muted">{{ $count }}</span>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-8">
                        <div class="card card-flush">
                            <div class="card-body">
                                @forelse ($reviews as $review)
                                    <div class="d-flex gap-4 py-4 {{ $loop->last ? '' : 'border-bottom border-gray-200' }}">
                                        <div class="symbol symbol-40px symbol-circle"><span class="symbol-label bg-light-primary text-primary fw-bold">{{ mb_substr((string) $review->booking?->patient?->name, 0, 1) }}</span></div>
                                        <div class="flex-grow-1">
                                            <div class="d-flex justify-content-between flex-wrap">
                                                <span class="fw-bold text-gray-800">{{ $review->booking?->patient?->name ?? '—' }}</span>
                                                <span class="text-muted fs-7" dir="ltr">{{ $review->created_at?->format('Y-m-d') }}</span>
                                            </div>
                                            @include('dashboard.admin.Site.feedback.partials.stars', ['rating' => (int) $review->doctor_rating])
                                            @if ($review->doctor_comment)
                                                <p class="text-gray-700 mt-2 mb-0">{{ $review->doctor_comment }}</p>
                                            @endif
                                        </div>
                                    </div>
                                @empty
                                    <div class="text-center text-muted py-10"><i class="bi bi-star fs-3x d-block mb-3"></i>{{ trans('clinic.doctors.no_reviews') }}</div>
                                @endforelse
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Bookings (all types) and online bookings: same server-side table --}}
            @foreach (['all' => 'doctor_bookings', 'online' => 'doctor_online'] as $scope => $paneId)
                <div class="tab-pane fade" id="{{ $paneId }}">
                    <div class="card card-flush">
                        <div class="card-header border-0 pt-6 align-items-center">
                            <div class="card-toolbar gap-3 flex-wrap">
                                @if ($scope === 'all')
                                    <select class="form-select form-select-solid form-select-sm w-175px" data-filter="type">
                                        <option value="">{{ trans('clinic.doctors.all_types') }}</option>
                                        @foreach (\App\Services\Clinic\DoctorProfileService::TYPES as $type)
                                            <option value="{{ $type }}">{{ trans('clinic.bookings.' . $type) }}</option>
                                        @endforeach
                                    </select>
                                @endif
                                <select class="form-select form-select-solid form-select-sm w-175px" data-filter="status">
                                    <option value="">{{ trans('clinic.bookings.all_statuses') }}</option>
                                    @foreach (['pending', 'confirmed', 'completed', 'cancelled'] as $status)
                                        <option value="{{ $status }}">{{ trans('clinic.bookings.statuses.' . $status) }}</option>
                                    @endforeach
                                </select>
                                <input type="date" class="form-control form-control-solid form-control-sm w-150px" data-filter="from" title="{{ trans('clinic.doctors.from') }}">
                                <input type="date" class="form-control form-control-solid form-control-sm w-150px" data-filter="to" title="{{ trans('clinic.doctors.to') }}">
                            </div>
                        </div>
                        <div class="card-body pt-0">
                            <table class="table align-middle table-row-dashed fs-6 gy-4 w-100" data-bookings-table="{{ $scope }}">
                                <thead>
                                <tr class="text-start text-muted fw-bold fs-7 text-uppercase gs-0">
                                    <th>{{ trans('clinic.bookings.date') }}</th>
                                    <th class="min-w-150px">{{ trans('clinic.bookings.patient') }}</th>
                                    <th>{{ trans('clinic.doctors.clinic') }}</th>
                                    <th>{{ trans('clinic.bookings.type') }}</th>
                                    <th>{{ trans('clinic.doctors.price') }}</th>
                                    <th>{{ trans('clinic.doctors.doctor_share') }}</th>
                                    <th>{{ trans('clinic.bookings.status') }}</th>
                                    <th class="text-end"></th>
                                </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            @endforeach

            {{-- Account --}}
            @if ($canSeeMoney)
                <div class="tab-pane fade" id="doctor_account">
                    <div class="card card-flush mb-6">
                        <div class="card-body d-flex flex-wrap align-items-end gap-4">
                            <div>
                                <label class="form-label">{{ trans('clinic.doctors.from') }}</label>
                                <input type="date" id="accountFrom" class="form-control form-control-solid" value="{{ now()->startOfMonth()->toDateString() }}">
                            </div>
                            <div>
                                <label class="form-label">{{ trans('clinic.doctors.to') }}</label>
                                <input type="date" id="accountTo" class="form-control form-control-solid" value="{{ now()->endOfMonth()->toDateString() }}">
                            </div>
                            <button type="button" class="btn btn-primary" id="accountLoad"><i class="bi bi-funnel"></i>{{ trans('clinic.doctors.show_account') }}</button>
                            <button type="button" class="btn btn-light" onclick="window.print()"><i class="bi bi-printer"></i>{{ trans('clinic.doctors.print') }}</button>
                        </div>
                    </div>
                    <div id="accountBody"></div>
                </div>
            @endif
        </div>
    </div>
@endsection

@section('js')
    <script>
        $(function () {
            var tables = {};

            function bookingsTable(scope) {
                if (tables[scope]) { return; }
                var $table = $('[data-bookings-table="' + scope + '"]');
                var $pane = $table.closest('.tab-pane');
                tables[scope] = $table.DataTable({
                    processing: true,
                    serverSide: true,
                    dom: "<'table-responsive'tr><'row align-items-center mt-5'<'col-sm-12 col-md-5 d-flex align-items-center gap-3'li><'col-sm-12 col-md-7 d-flex justify-content-end'p>>",
                    ajax: {
                        url: @json(route('admin.dashboard.clinic.doctors.bookings', $doctor)),
                        data: function (d) {
                            d.type = scope === 'online' ? 'online' : $pane.find('[data-filter="type"]').val();
                            d.status = $pane.find('[data-filter="status"]').val();
                            d.from = $pane.find('[data-filter="from"]').val();
                            d.to = $pane.find('[data-filter="to"]').val();
                        }
                    },
                    columns: [
                        {data: 'scheduled_at', name: 'scheduled_at', searchable: false},
                        {data: 'patient', name: 'patient', orderable: false},
                        {data: 'clinic', name: 'clinic', orderable: false, searchable: false},
                        {data: 'type', name: 'type', searchable: false},
                        {data: 'price', name: 'price', searchable: false},
                        {data: 'doctor_share_amount', name: 'doctor_share_amount', searchable: false},
                        {data: 'status', name: 'status', searchable: false},
                        {data: 'action', name: 'action', orderable: false, searchable: false},
                    ],
                    order: [[0, 'desc']],
                    language: {lengthMenu: '_MENU_'}
                });
                $pane.on('change', '[data-filter]', function () { tables[scope].ajax.reload(); });
            }

            // Tables and the account load the first time their tab opens.
            $('[data-load-table]').on('shown.bs.tab', function () { bookingsTable(this.dataset.loadTable); });

            function loadAccount() {
                $('#accountBody').html('<div class="text-center py-10"><span class="spinner-border text-primary"></span></div>')
                    .load(@json(route('admin.dashboard.clinic.doctors.account', $doctor)) + '?' + $.param({from: $('#accountFrom').val(), to: $('#accountTo').val()}));
            }
            $('[data-load-account]').one('shown.bs.tab', loadAccount);
            $('#accountLoad').on('click', loadAccount);
        });
    </script>
@endsection