{{--
    Evaluation form partial. Rendered inside the evaluation modal.
    Inputs are named responses[<question_id>][rating|text|yes_no] so the controller can iterate.
--}}
@php
    $isPetOwner = $category === 'pet_owner';
    $title      = $isPetOwner ? 'Pet Owner Evaluation' : 'Clinic & Doctor Evaluation';
    $subTitle   = $isPetOwner
        ? 'Evaluate the pet owner for this visit (completed by the attending doctor).'
        : 'Capture pet owner feedback about the clinic and doctor (asked by reception / front desk).';
    $grad       = $isPetOwner
        ? 'linear-gradient(135deg,#5b8def 0%,#3568cf 100%)'
        : 'linear-gradient(135deg,#f6a623 0%,#e8820f 100%)';
    $accent     = $isPetOwner ? '#3568cf' : '#e8820f';
@endphp

<style>
.vc-eval-header {
    background:{{ $grad }};
    color:#fff; padding:20px 24px; margin:-15px -15px 18px -15px;
    position:relative; overflow:hidden;
}
.vc-eval-header::after {
    content:''; position:absolute; right:-30px; top:-30px;
    width:140px; height:140px; border-radius:50%;
    background:rgba(255,255,255,.08);
}
.vc-eval-header .eh-icon {
    width:46px; height:46px; border-radius:12px;
    background:rgba(255,255,255,.18); display:inline-flex;
    align-items:center; justify-content:center; font-size:21px;
    vertical-align:middle; margin-right:12px;
}
.vc-eval-header h4 { margin:0; font-weight:700; font-size:18px; display:inline-block; vertical-align:middle; }
.vc-eval-header .eh-sub { font-size:12px; opacity:.92; margin-top:8px; }
.vc-eval-pet-row {
    margin-top:12px; display:flex; flex-wrap:wrap; gap:8px;
    position:relative; z-index:1;
}
.vc-eval-pet-row .pr-chip {
    background:rgba(255,255,255,.16); border-radius:7px;
    padding:5px 11px; font-size:11.5px; backdrop-filter:blur(4px);
}
.vc-eval-pet-row .pr-chip b { font-weight:700; opacity:.8; margin-right:4px; }

.vc-eval-q {
    border:1px solid #eef1f5; border-radius:10px; padding:14px 18px; margin-bottom:11px;
    background:#fafbfc; transition:border-color .15s, box-shadow .15s;
}
.vc-eval-q:hover { border-color:#dde3ea; box-shadow:0 2px 8px rgba(15,23,42,.05); }
.vc-eval-q .q-text { font-weight:600; color:#2c3e50; margin-bottom:10px; display:block; font-size:13px; }
.vc-eval-q .q-num {
    display:inline-flex; align-items:center; justify-content:center;
    width:20px; height:20px; border-radius:50%; background:{{ $accent }};
    color:#fff; font-size:10px; font-weight:700; margin-right:8px;
}
.vc-eval-q .q-required { color:#e74c3c; font-weight:700; }

.vc-stars { font-size:26px; color:#dfe3e8; line-height:1; }
.vc-stars i { cursor:pointer; transition:color .1s, transform .1s; margin-right:5px; }
.vc-stars i:hover { transform:scale(1.15); }
.vc-stars i.hover, .vc-stars i.selected { color:#f1c40f; }
.vc-stars .rating-label {
    font-size:12px; font-weight:700; color:#64748b;
    margin-left:8px; vertical-align:3px;
}

.vc-yn-btns .btn { min-width:90px; border-radius:8px; font-weight:600; }
.vc-yn-btns .btn.active { color:#fff; }
.vc-yn-btns .btn-yes.active { background:#27ae60; border-color:#27ae60; }
.vc-yn-btns .btn-no.active  { background:#e74c3c; border-color:#e74c3c; }

.vc-eval-summary {
    background:#f8f9fa; border:1px dashed #cdd5dc; border-radius:8px;
    padding:11px 15px; margin-top:14px; font-size:12.5px; color:#5a6b7c;
}
.vc-eval-body-pad { padding:0 3px; }
</style>

<div class="vc-eval-header">
    <span class="eh-icon"><i class="fa fa-{{ $isPetOwner ? 'user' : 'hospital' }}"></i></span>
    <h4>{{ $title }}</h4>
    <div class="eh-sub">{{ $subTitle }}</div>
    <div class="vc-eval-pet-row">
        <span class="pr-chip"><b>Appointment</b> #{{ $appointment->ref_no ?: $appointment->id }}</span>
        <span class="pr-chip"><b>Pet</b> {{ optional($appointment->pet)->petname ?? '—' }}</span>
        <span class="pr-chip"><b>Owner</b> {{ optional($appointment->owner)->name ?? '—' }}</span>
        <span class="pr-chip"><b>Doctor</b> {{ optional($appointment->doctor)->name ?? '—' }}</span>
    </div>
</div>

<div class="vc-eval-body-pad">

@if($existing)
    <div class="alert alert-info" style="padding:9px 13px; font-size:12.5px; border-radius:8px;">
        <i class="fa fa-info-circle"></i>
        Previously saved on {{ $existing->updated_at->format('d M Y H:i') }}
        @if($existing->avg_rating)
            &nbsp;|&nbsp; Avg rating: <strong>{{ number_format($existing->avg_rating, 2) }}/5</strong>
        @endif
        @if($existing->flagged_for_review)
            &nbsp;|&nbsp; <span class="label label-danger">Flagged for review</span>
        @endif
        — submitting again will overwrite responses.
    </div>
@endif

<form id="vc_evaluation_form">
    @csrf
    <input type="hidden" name="category" value="{{ $category }}">

    @forelse($questions as $idx => $q)
        @php
            $existingRes = $existingByQid[$q->id] ?? null;
            $valRating = $existingRes->rating ?? null;
            $valText   = $existingRes->text_answer ?? null;
            $valYN     = isset($existingRes->yes_no_answer) ? (int)$existingRes->yes_no_answer : null;
        @endphp
        <div class="vc-eval-q">
            <span class="q-text">
                <span class="q-num">{{ $idx + 1 }}</span>
                {{ $q->question_text }}
                @if($q->is_required) <span class="q-required">*</span> @endif
            </span>

            @if($q->response_type === 'rating')
                <div class="vc-stars" data-qid="{{ $q->id }}">
                    @for($i = 1; $i <= 5; $i++)
                        <i class="fa fa-star {{ $valRating && $i <= $valRating ? 'selected' : '' }}" data-val="{{ $i }}"></i>
                    @endfor
                    <input type="hidden" name="responses[{{ $q->id }}][rating]" value="{{ $valRating }}" {{ $q->is_required ? 'data-required="1"' : '' }}>
                    <span class="rating-label" id="rating-label-{{ $q->id }}">{{ $valRating ? $valRating.'/5' : '' }}</span>
                </div>
            @elseif($q->response_type === 'yes_no')
                <div class="vc-yn-btns btn-group" data-qid="{{ $q->id }}">
                    <button type="button" class="btn btn-default btn-yes {{ $valYN === 1 ? 'active' : '' }}" data-val="1">
                        <i class="fa fa-thumbs-up"></i> Yes
                    </button>
                    <button type="button" class="btn btn-default btn-no {{ $valYN === 0 ? 'active' : '' }}" data-val="0">
                        <i class="fa fa-thumbs-down"></i> No
                    </button>
                    <input type="hidden" name="responses[{{ $q->id }}][yes_no]" value="{{ $valYN !== null ? $valYN : '' }}" {{ $q->is_required ? 'data-required="1"' : '' }}>
                </div>
            @else
                <textarea name="responses[{{ $q->id }}][text]" class="form-control" rows="2" {{ $q->is_required ? 'data-required="1"' : '' }}>{{ $valText }}</textarea>
            @endif
        </div>
    @empty
        <div class="alert alert-warning">
            No evaluation questions have been configured for this category. Please add questions from
            <strong>Settings → Evaluation Questions</strong>.
        </div>
    @endforelse

    <div class="form-group">
        <label>Overall notes <small class="text-muted">(optional)</small></label>
        <textarea name="notes" class="form-control" rows="2">{{ $existing->notes ?? '' }}</textarea>
    </div>

    <div class="vc-eval-summary">
        <i class="fa fa-info-circle" style="color:{{ $accent }};"></i>
        Appointments with an average rating below <strong>3.00 / 5</strong> are automatically flagged for management review.
    </div>
</form>

</div>{{-- /vc-eval-body-pad --}}

<script>
(function () {
    // Star rating handler
    $('#vc_evaluation_form .vc-stars').each(function () {
        var $box = $(this);
        var $stars = $box.find('i.fa-star');
        var $input = $box.find('input[type=hidden]');
        var $label = $box.find('.rating-label');

        $stars.on('mouseenter', function () {
            var v = $(this).data('val');
            $stars.removeClass('hover');
            $stars.each(function () { if ($(this).data('val') <= v) $(this).addClass('hover'); });
        }).on('mouseleave', function () { $stars.removeClass('hover'); });

        $stars.on('click', function () {
            var v = $(this).data('val');
            $stars.removeClass('selected');
            $stars.each(function () { if ($(this).data('val') <= v) $(this).addClass('selected'); });
            $input.val(v);
            $label.text(v + '/5');
        });
    });

    // Yes/No handler
    $('#vc_evaluation_form .vc-yn-btns').each(function () {
        var $box = $(this);
        $box.find('button').on('click', function () {
            $box.find('button').removeClass('active');
            $(this).addClass('active');
            $box.find('input[type=hidden]').val($(this).data('val'));
        });
    });
})();
</script>
