@extends('layouts.app')

@section('title', 'Evaluation Questions')

@section('css')
@include('clinicCore::partials._mobile_responsive')
@endsection

@section('content')
<section class="content-header">
    <h1><i class="fas fa-star-half-alt"></i> Evaluation Questions
        <small>Manage doctor &amp; patient / guardian evaluation forms</small>
    </h1>
</section>

<section class="content">

    <div class="row" style="margin-bottom:10px;">
        <div class="col-md-8">
            <ul class="nav nav-tabs" id="eq-tabs" role="tablist">
                <li role="presentation" class="active">
                    <a href="#" data-category="pet_owner"><i class="fa fa-user"></i> Patient Evaluation
                        <small class="text-muted">(filled by doctor)</small>
                    </a>
                </li>
                <li role="presentation">
                    <a href="#" data-category="clinic"><i class="fa fa-hospital"></i> Clinic / Doctor Evaluation
                        <small class="text-muted">(filled by receptionist, on behalf of patient)</small>
                    </a>
                </li>
            </ul>
        </div>
        <div class="col-md-4 text-right">
            <button class="btn btn-primary" data-toggle="modal" data-target="#questionModal">
                <i class="fa fa-plus"></i> Add Question
            </button>
        </div>
    </div>

    @component('components.widget', ['class' => 'box-primary'])
        <table class="table table-bordered table-striped" id="questions_table" style="width:100%;">
            <thead>
                <tr>
                    <th style="width:50px;">Order</th>
                    <th>Question</th>
                    <th style="width:90px;">Type</th>
                    <th style="width:90px;">Required</th>
                    <th style="width:90px;">Source</th>
                    <th style="width:90px;">Status</th>
                    <th style="width:100px;">Actions</th>
                </tr>
            </thead>
        </table>
    @endcomponent
</section>

{{-- Add/Edit Modal --}}
<div class="modal fade" id="questionModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" style="font-size:15px;">&times;</button>
                <h4 class="modal-title" id="question_modal_title">Add Question</h4>
            </div>
            <div class="modal-body">
                <input type="hidden" id="question_id">
                <input type="hidden" id="question_category" value="pet_owner">

                <div class="form-group">
                    <label>Question <span class="text-danger">*</span></label>
                    <textarea id="q_text" class="form-control" rows="2" required></textarea>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Response Type</label>
                            <select id="q_response_type" class="form-control">
                                <option value="rating">Rating (1–5 stars)</option>
                                <option value="yes_no">Yes / No</option>
                                <option value="text">Free text</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>Sort order</label>
                            <input type="number" id="q_sort_order" class="form-control" value="0">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>Status</label>
                            <select id="q_status" class="form-control">
                                <option value="active">Active</option>
                                <option value="inactive">Inactive</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label><input type="checkbox" id="q_is_required"> Required</label>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button class="btn btn-primary" id="btn_save_question">Save</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('javascript')
<script>
var currentCategory = 'pet_owner';

var questionsTable = $('#questions_table').DataTable({
    processing: true,
    serverSide: true,
    ajax: {
        url: '{{ route('clinic.evaluation-questions.list') }}',
        data: function (d) { d.category = currentCategory; }
    },
    order: [[0, 'asc']],
    columns: [
        { data: 'sort_order', name: 'sort_order' },
        { data: 'question_text', name: 'question_text' },
        { data: 'response_type_badge', name: 'response_type', orderable: false },
        { data: 'required_badge', name: 'is_required', orderable: false },
        { data: 'source_badge', name: 'business_id', orderable: false, searchable: false },
        { data: 'status_badge', name: 'status', orderable: false },
        { data: 'action', name: 'action', orderable: false, searchable: false }
    ]
});

$('#eq-tabs a').on('click', function (e) {
    e.preventDefault();
    $('#eq-tabs li').removeClass('active');
    $(this).parent().addClass('active');
    currentCategory = $(this).data('category');
    $('#question_category').val(currentCategory);
    questionsTable.ajax.reload();
});

$('[data-target="#questionModal"]').on('click', function () {
    $('#question_modal_title').text('Add Question');
    $('#question_id').val('');
    $('#q_text').val('');
    $('#q_response_type').val('rating');
    $('#q_sort_order').val(0);
    $('#q_status').val('active');
    $('#q_is_required').prop('checked', false);
    $('#question_category').val(currentCategory);
});

$(document).on('click', '.btn-edit-question', function () {
    var id = $(this).data('id');
    $.get('{{ url('clinic/evaluation-questions') }}/' + id + '/edit', function (d) {
        $('#question_modal_title').text('Edit Question');
        $('#question_id').val(d.id);
        $('#question_category').val(d.category);
        $('#q_text').val(d.question_text);
        $('#q_response_type').val(d.response_type);
        $('#q_sort_order').val(d.sort_order);
        $('#q_status').val(d.status);
        $('#q_is_required').prop('checked', d.is_required == 1);
        $('#questionModal').modal('show');
    });
});

$('#btn_save_question').on('click', function () {
    var id = $('#question_id').val();
    var url = id ? '{{ url('clinic/evaluation-questions') }}/' + id + '/update' : '{{ route('clinic.evaluation-questions.store') }}';
    $.ajax({
        url: url, method: 'POST',
        data: {
            _token: '{{ csrf_token() }}',
            category: $('#question_category').val(),
            question_text: $('#q_text').val(),
            response_type: $('#q_response_type').val(),
            sort_order: $('#q_sort_order').val(),
            status: $('#q_status').val(),
            is_required: $('#q_is_required').is(':checked') ? 1 : 0
        },
        success: function (res) {
            if (res.success) {
                $('#questionModal').modal('hide');
                toastr.success(res.msg);
                if (res.promoted) toastr.info('System default was copied as a business override.');
                questionsTable.ajax.reload();
            }
        },
        error: function (xhr) { toastr.error(xhr.responseJSON?.message ?? 'Error'); }
    });
});

$(document).on('click', '.btn-delete-question', function () {
    if (!confirm('Delete this question?')) return;
    $.ajax({
        url: '{{ url('clinic/evaluation-questions') }}/' + $(this).data('id'),
        method: 'DELETE',
        data: { _token: '{{ csrf_token() }}' },
        success: function (res) {
            if (res.success) { toastr.success(res.msg); questionsTable.ajax.reload(); }
        },
        error: function (xhr) { toastr.error(xhr.responseJSON?.msg ?? 'Error'); }
    });
});
</script>
@endsection
