@extends('layouts.app')
@section('title', __('medbloodbank::lang.issues'))
@section('content')
<section class="content-header"><h1>@lang('medbloodbank::lang.issues')</h1>
    <p>@lang('medbloodbank::lang.issues_help')</p>
</section>
<section class="content">
    {{-- ── Ready to issue: compatible crossmatches not yet issued ──────── --}}
    @component('components.widget', ['class' => 'box-primary', 'title' => __('medbloodbank::lang.ready_to_issue')])
        @if($pending->isEmpty())
            <p class="text-muted">@lang('medbloodbank::lang.nothing_to_issue')</p>
        @else
        <div class="table-responsive">
            <table class="table table-bordered table-striped">
                <thead><tr>
                    <th>@lang('medbloodbank::lang.recipient')</th>
                    <th>@lang('medbloodbank::lang.bag_no')</th>
                    <th>@lang('medbloodbank::lang.blood_group')</th>
                    <th>@lang('medbloodbank::lang.issue_to')</th>
                    <th>@lang('medbloodbank::lang.actions')</th>
                </tr></thead>
                <tbody>
                    @foreach($pending as $c)
                        <tr>
                            <td>{{ $c->patient_name }}</td>
                            <td>{{ $c->bag_no }}</td>
                            <td><strong>{{ $c->blood_group }}</strong></td>
                            <td>
                                <form class="mbb-issue-form form-inline" action="{{ route('mbb.issues.issue') }}" method="POST">
                                    @csrf
                                    <input type="hidden" name="crossmatch_id" value="{{ $c->id }}">
                                    <select name="issued_to" class="form-control input-sm">
                                        @foreach($issuedTo as $to)
                                            <option value="{{ $to }}" @selected($to === 'ward')>@lang('medbloodbank::lang.issued_to_' . $to)</option>
                                        @endforeach
                                    </select>
                            </td>
                            <td>
                                    <button type="submit" class="btn btn-xs btn-primary">
                                        <i class="fa fa-share"></i> @lang('medbloodbank::lang.issue_bag')
                                    </button>
                                </form>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @endif
    @endcomponent

    {{-- ── Issued / transfusing / completed ───────────────────────────── --}}
    @component('components.widget', ['class' => 'box-default', 'title' => __('medbloodbank::lang.transfusions')])
        <div class="table-responsive">
            <table class="table table-bordered table-striped" id="mbb_issues_table">
                <thead><tr>
                    <th>@lang('medbloodbank::lang.recipient')</th>
                    <th>@lang('medbloodbank::lang.bag_no')</th>
                    <th>@lang('medbloodbank::lang.blood_group')</th>
                    <th>@lang('medbloodbank::lang.issue_to')</th>
                    <th>@lang('medbloodbank::lang.issued_at')</th>
                    <th>@lang('medbloodbank::lang.status')</th>
                    <th>@lang('medbloodbank::lang.reaction')</th>
                    <th>@lang('medbloodbank::lang.actions')</th>
                </tr></thead>
            </table>
        </div>
    @endcomponent

    <div class="modal fade mbb_modal" tabindex="-1" role="dialog"></div>
</section>
@endsection
@section('javascript')
@include('medbloodbank::partials.crud_scripts')
<script>
$(function () {
    var table = $('#mbb_issues_table').DataTable({
        processing: true, serverSide: true,
        ajax: '{{ route('mbb.issues.index') }}',
        order: [[4, 'desc']],
        columns: [
            { data: 'patient_name', name: 'mbb_issues.patient_id' },
            { data: 'bag_no', name: 'mbb_donations.bag_no' },
            { data: 'blood_group', name: 'mbb_donations.blood_group' },
            { data: 'issued_to', name: 'mbb_issues.issued_to' },
            { data: 'issued_at', name: 'mbb_issues.issued_at' },
            { data: 'status', name: 'mbb_issues.status' },
            { data: 'reaction_flag', name: 'mbb_issues.reaction', orderable: false, searchable: false },
            { data: 'action', name: 'action', orderable: false, searchable: false },
        ],
    });
    window.__mbbTables.push(table);

    // Issue-bag inline forms (in the "ready to issue" panel).
    $(document).on('submit', 'form.mbb-issue-form', function (e) {
        e.preventDefault();
        var $form = $(this);
        var $btn = $form.find('button[type=submit]').prop('disabled', true);
        $.ajax({
            url: $form.attr('action'), method: 'POST', data: $form.serialize(),
            success: function (resp) {
                if (resp.success) { toastr.success(resp.msg); window.location.reload(); }
                else { toastr.error(resp.msg || 'Something went wrong.'); $btn.prop('disabled', false); }
            },
            error: function (xhr) {
                $btn.prop('disabled', false);
                toastr.error((xhr.responseJSON && xhr.responseJSON.msg) || 'Something went wrong.');
            }
        });
    });
});
</script>
@endsection
