@extends('layouts.app')

@section('title', 'Doctor-Change Requests')

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

@section('content')
<section class="content-header">
    <h1><i class="fas fa-user-md"></i> Doctor-Change Requests
        <small>Approve or reject requests to change an appointment's doctor</small>
    </h1>
</section>

<section class="content">

    <div class="row" style="margin-bottom:12px;">
        <div class="col-md-12">
            <div class="btn-group" id="status_filter" role="group">
                <button class="btn btn-sm btn-warning active" data-status="pending">
                    <i class="fa fa-clock"></i> Pending
                </button>
                <button class="btn btn-sm btn-default" data-status="approved">
                    <i class="fa fa-check"></i> Approved
                </button>
                <button class="btn btn-sm btn-default" data-status="rejected">
                    <i class="fa fa-times"></i> Rejected
                </button>
                <button class="btn btn-sm btn-default" data-status="">
                    <i class="fa fa-list"></i> All
                </button>
            </div>
        </div>
    </div>

    @component('components.widget', ['class' => 'box-primary'])
        <table class="table table-bordered table-striped" id="requests_table" style="width:100%;">
            <thead>
                <tr>
                    <th>Appointment</th>
                    <th>Patient</th>
                    <th>Doctor Change</th>
                    <th>Scope</th>
                    <th>Requested By</th>
                    <th>Reason</th>
                    <th>Requested At</th>
                    <th>Status</th>
                    <th>Reviewed</th>
                    <th>Actions</th>
                </tr>
            </thead>
        </table>
    @endcomponent
</section>

{{-- Review (approve / reject with notes) modal --}}
<div class="modal fade" id="reviewModal" 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="review_modal_title">Review Request</h4>
            </div>
            <div class="modal-body">
                <input type="hidden" id="review_request_id">
                <input type="hidden" id="review_decision">
                <p id="review_intro" class="text-muted" style="font-size:13px;"></p>
                <div class="form-group">
                    <label>Notes <small class="text-muted">(optional)</small></label>
                    <textarea id="review_notes" class="form-control" rows="3"
                              placeholder="Reason for the decision, instructions, etc."></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button class="btn btn-primary" id="btn_confirm_review">Confirm</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('javascript')
<script>
var currentStatus = 'pending';

var requestsTable = $('#requests_table').DataTable({
    processing: true,
    serverSide: true,
    order: [[6, 'desc']],
    ajax: {
        url: '{{ route('clinic.doctor-change-requests.list') }}',
        data: function (d) { d.status = currentStatus; }
    },
    columns: [
        { data: 'appointment_ref', name: 'appointment_id' },
        { data: 'pet_name',        name: 'pet_name',       orderable: false },
        { data: 'doctor_change',   name: 'doctor_change',  orderable: false },
        { data: 'scope_badge',     name: 'scope',          orderable: false },
        { data: 'requester_name',  name: 'requested_by',   orderable: false },
        { data: 'reason',          name: 'reason' },
        { data: 'requested_at',    name: 'created_at' },
        { data: 'status_badge',    name: 'status',         orderable: false },
        { data: 'reviewed_info',   name: 'reviewed_at',    orderable: false },
        { data: 'action',          name: 'action',         orderable: false, searchable: false }
    ]
});

$('#status_filter button').on('click', function () {
    $('#status_filter button').removeClass('active btn-warning').addClass('btn-default');
    $(this).removeClass('btn-default').addClass('active btn-warning');
    currentStatus = $(this).data('status');
    requestsTable.ajax.reload();
});

function openReview(id, decision) {
    $('#review_request_id').val(id);
    $('#review_decision').val(decision);
    if (decision === 'approved') {
        $('#review_modal_title').text('Approve Doctor-Change Request');
        $('#review_intro').text('Approving will immediately update the appointment\'s doctor. If the request scope is "Set as preferred", it will also become the contact\'s preferred doctor.');
        $('#btn_confirm_review').removeClass('btn-danger').addClass('btn-success').text('Approve');
    } else {
        $('#review_modal_title').text('Reject Doctor-Change Request');
        $('#review_intro').text('The appointment doctor will remain unchanged.');
        $('#btn_confirm_review').removeClass('btn-success').addClass('btn-danger').text('Reject');
    }
    $('#review_notes').val('');
    $('#reviewModal').modal('show');
}

$(document).on('click', '.btn-approve-dcr', function () { openReview($(this).data('id'), 'approved'); });
$(document).on('click', '.btn-reject-dcr',  function () { openReview($(this).data('id'), 'rejected'); });

$('#btn_confirm_review').on('click', function () {
    var id = $('#review_request_id').val();
    var decision = $('#review_decision').val();
    var url = '{{ url('clinic/doctor-change-requests') }}/' + id + '/' + decision;
    var $btn = $(this).prop('disabled', true);
    $.post(url, {
        _token: '{{ csrf_token() }}',
        review_notes: $('#review_notes').val()
    }).done(function (res) {
        if (res.success) {
            toastr.success(res.msg);
            $('#reviewModal').modal('hide');
            requestsTable.ajax.reload();
        } else {
            toastr.error(res.msg || 'Action failed');
        }
    }).fail(function (xhr) {
        toastr.error(xhr.responseJSON && xhr.responseJSON.msg ? xhr.responseJSON.msg : 'Action failed');
    }).always(function () { $btn.prop('disabled', false); });
});
</script>
@endsection
