@extends('layouts.app')
@section('title', __('medbloodbank::lang.record_donation'))
@section('content')
<section class="content-header"><h1>@lang('medbloodbank::lang.record_donation')</h1>
    <p>@lang('medbloodbank::lang.donation_entry_help')</p>
</section>
<section class="content">
    <form class="mbb-page-form" action="{{ route('mbb.donations.store') }}" method="POST">
        @csrf
        <div class="row">
            <div class="col-md-8">
                @component('components.widget', ['class' => 'box-primary', 'title' => __('medbloodbank::lang.collection')])
                    <div class="row">
                        <div class="col-md-6 form-group">
                            <label>@lang('medbloodbank::lang.donor') *</label>
                            <select name="donor_id" id="mbb_donor_id" class="form-control" style="width:100%" required>
                                <option value="">—</option>
                                @foreach($donors as $d)
                                    <option value="{{ $d['id'] }}" data-group="{{ $d['blood_group'] }}">
                                        {{ $d['name'] }}{{ $d['mobile'] ? ' (' . $d['mobile'] . ')' : '' }}{{ $d['blood_group'] ? ' — ' . $d['blood_group'] : '' }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6 form-group">
                            <label>@lang('medbloodbank::lang.bag_no') *</label>
                            <input type="text" name="bag_no" class="form-control" required value="{{ old('bag_no') }}">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4 form-group">
                            <label>@lang('medbloodbank::lang.donation_type') *</label>
                            <select name="donation_type" class="form-control" required>
                                @foreach($donationTypes as $dt)
                                    <option value="{{ $dt }}">@lang('medbloodbank::lang.donation_type_' . $dt)</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4 form-group">
                            <label>@lang('medbloodbank::lang.product') *</label>
                            <select name="product_type" class="form-control" required>
                                @foreach($productTypes as $pt)
                                    <option value="{{ $pt }}">@lang('medbloodbank::lang.product_' . $pt)</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4 form-group">
                            <label>@lang('medbloodbank::lang.blood_group') *</label>
                            <select name="blood_group" id="mbb_blood_group" class="form-control" required>
                                @foreach($bloodGroups as $bg)
                                    <option value="{{ $bg }}">{{ $bg }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4 form-group">
                            <label>@lang('medbloodbank::lang.volume_ml')</label>
                            <input type="number" name="volume_ml" class="form-control" min="0" value="{{ old('volume_ml', 450) }}">
                        </div>
                        <div class="col-md-4 form-group">
                            <label>@lang('medbloodbank::lang.collected_at')</label>
                            <input type="datetime-local" name="collected_at" class="form-control"
                                value="{{ old('collected_at', now()->format('Y-m-d\TH:i')) }}">
                        </div>
                    </div>
                    <p class="text-muted">
                        <i class="fa fa-info-circle"></i> @lang('medbloodbank::lang.quarantine_note')
                    </p>
                @endcomponent
            </div>
            <div class="col-md-4">
                <div class="form-group">
                    <button type="submit" class="btn btn-primary btn-block">
                        <i class="fa fa-save"></i> @lang('medbloodbank::lang.save')
                    </button>
                    <a href="{{ route('mbb.donations.index') }}" class="btn btn-default btn-block">@lang('medbloodbank::lang.cancel')</a>
                </div>
            </div>
        </div>
    </form>
</section>
@endsection
@section('javascript')
<script>
$(function () {
    $('#mbb_donor_id').select2({ width: '100%' });
    // Prefill the blood group from the selected donor's known group.
    $('#mbb_donor_id').on('change', function () {
        var g = $(this).find(':selected').data('group');
        if (g) { $('#mbb_blood_group').val(g); }
    });

    $('form.mbb-page-form').on('submit', 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 = '{{ route('mbb.donations.index') }}';
                } else {
                    toastr.error(resp.msg || 'Something went wrong.');
                    $btn.prop('disabled', false);
                }
            },
            error: function (xhr) {
                $btn.prop('disabled', false);
                if (xhr.status === 422 && xhr.responseJSON) {
                    toastr.error(xhr.responseJSON.msg || 'Validation failed.');
                    var errs = xhr.responseJSON.errors || {};
                    Object.keys(errs).forEach(function (k) { toastr.error(errs[k][0]); });
                } else { toastr.error('Something went wrong.'); }
            }
        });
    });
});
</script>
@endsection
