@php
    use App\Course;
    use App\OrderItems;
    use App\Enumerables\Currency;

    /**
    * @var Course $course
    * @var OrderItems $orderItem
    */
    $currency = $orderItem->currency;
    $currencySign = $orderItem->currency == Currency::GBP ? '£ ' : '¥ ';
    $discountedPrice = $course->currentPriceListPrice($currency);
    $applicationFees = $course->thirdPartyFee($currency);
    $serviceFees = $course->originalPriceListPrice($currency);
    //need to remove comma for javascript validations
    $total = number_format($applicationFees + $discountedPrice, 2, '.', '');
    $discount = number_format($serviceFees - $discountedPrice, 2, '.', '');
    $serviceDepositFeesRefund = number_format($orderItem->serviceFees + $orderItem->depositFees - $orderItem->discountValue - $orderItem->discountEvent, 2, '.', '');
    $orderItem->applicationFees = number_format($orderItem->applicationFees, 2, '.', '');
    $isApplicationFeesOrder = $orderItem->isApplicationFeesOrder();
@endphp

<div class="row mt-20">
    <div class="col-sm-12 rowcontainer">
        <div class="col-sm-1">{{__('Application Fee')}}</div>
        <div class="col-sm-4">
            @if($isApplicationFeesOrder)
                {{$currencySign.$applicationFees}}
            @else
                {{__('N/A')}}
            @endif
        </div>
        <div class="col-sm-1">{{__('Service Fee/Deposit')}}</div>
        <div class="col-sm-4">
            @if($discountedPrice != $serviceFees)
                {!!$currencySign.'<s>'.$serviceFees.'</s> / '.$discountedPrice!!}
            @else
                {{$serviceFees}}
            @endif
        </div>
        <div class="col-sm-1">{{__('Total')}}</div>
        <div class="col-sm-1">{{$currencySign.$total}}</div>
    </div>
</div>

<div class="row mt-20">
    <div class="col-sm-12 rowcontainer">
        <div class="col-sm-1">{{__('Discount')}}</div>
        <div class="col-sm-4">{{$currencySign.$discount}}</div>
        <div class="col-sm-1">{{__('Payable amount')}}</div>
        <div class="col-sm-4">{{$currencySign.$total}}</div>
    </div>
</div>

<div class="row mt-20">
    <div class="col-sm-12 rowcontainer">
        <label class="col-sm-1">{{__('Spread processing')}}</label>
        <div class="col-sm-2" id="courseChangeType1">
            <input
                type="radio"
                class="dynamic-validation"
                name="chargeRefundRadio"
                value="none"
                data-form="none"
                id="chargeRefundRadio1"
                data-validation-container="courseChangeType1"
                required
            >
            <label for="chargeRefundRadio1">{{__('No charge/refund')}}</label>
        </div>
        <div class="col-sm-2" id="courseChangeType2">
            <input
                type="radio"
                class="dynamic-validation"
                name="chargeRefundRadio"
                value="charge"
                data-form="chargeForm"
                id="chargeRefundRadio2"
                data-validation-container="courseChangeType2"
                required
            >
            <label for="chargeRefundRadio2">{{__('Charge user')}}</label>
        </div>
        <div class="col-sm-2" id="courseChangeType3">
            <input
                type="radio"
                class="dynamic-validation"
                name="chargeRefundRadio"
                value="refund"
                data-form="refundForm"
                id="chargeRefundRadio3"
                data-validation-container="courseChangeType3"
                required
            >
            <label for="chargeRefundRadio3">{{__('Refund user')}}</label>
        </div>
    </div>
</div>

<div id="none" class="changeForms hidden">
    <div class="row mt-20">
        <div class="col-sm-12 rowcontainer">
            @if($isApplicationFeesOrder)
                <label class="col-sm-1" for="applicationFeeNoneCharge">
                    {{__('Application Fee Charge')}}
                </label>
                <div class="col-sm-2">
                    <input
                        type="number"
                        class="form-control dynamic-validation"
                        data-counter="total1"
                        name="applicationFeeNoneCharge"
                        id="applicationFeeNoneCharge"
                        placeholder="{{__('Please enter a charge amount')}}"
                        value="{{number_format($applicationFees,2,'.','')}}"
                        max="{{number_format($applicationFees,2,'.','')}}"
                        data-required-if='{"name":"chargeRefundRadio", "isValue":"none"}'
                    >
                </div>
            @endif

            <label class="col-sm-1" for="serviceFeeNoneCharge">
                {{__('Service Fee Charge')}}
            </label>
            <div class="col-sm-2">
                <input
                    type="number"
                    class="form-control dynamic-validation"
                    data-counter="total1"
                    name="serviceFeeNoneCharge"
                    id="serviceFeeNoneCharge"
                    placeholder="{{__('Please enter a charge amount')}}"
                    value="{{number_format($discountedPrice, 2, '.','')}}"
                    max="{{number_format($discountedPrice, 2, '.','')}}"
                    data-required-if='{"name":"chargeRefundRadio", "isValue":"none"}'
                >
            </div>

            @if($isApplicationFeesOrder)
                <label class="col-sm-1" for="depositFeeNoneCharge">
                    {{__('Deposit Fee Charge')}}
                </label>
                <div class="col-sm-2">
                    <input
                        type="number"
                        class="form-control"
                        data-counter="total1"
                        name="depositFeeNoneCharge"
                        id="depositFeeNoneCharge"
                        placeholder="{{__('Please enter a charge amount')}}"
                        value="0"
                        min="0"
                        data-required-if='{"name":"chargeRefundRadio", "isValue":"none"}'
                    >
                </div>
            @endif

            <label class="col-sm-1 text-right" for="total1">
                {{__('Total')}} {{$currencySign}}
            </label>
            <div class="col-sm-2">
                <input
                    type="number"
                    class="form-control dynamic-validation"
                    max="{{number_format($total, 2, '.','')}}"
                    name="total1"
                    id="total1"
                    value="{{number_format($total, 2, '.','')}}"
                    readonly="readonly"
                    data-required-if='{"name":"chargeRefundRadio", "isValue":"none"}'
                >
            </div>
        </div>
    </div>

    <div class="row mt-20">
        <div class="col-sm-12 rowcontainer">
            @if($isApplicationFeesOrder)
                <label class="col-sm-1" for="applicationFeeNoneRefund">
                    {{__('Application Fee Refund of Original Course')}}
                </label>
                <div class="col-sm-3">
                    <input
                        type="number"
                        class="form-control dynamic-validation"
                        data-counter="total2"
                        name="applicationFeeNoneRefund"
                        placeholder="{{__('Please enter a refund amount')}}"
                        value="{{number_format($orderItem->applicationFees, 2, '.','')}}"
                        max="{{number_format($orderItem->applicationFees, 2, '.','')}}"
                        data-required-if='{"name":"chargeRefundRadio", "isValue":"none"}'
                        id="applicationFeeNoneRefund"
                    >
                </div>
            @endif

            <label class="col-sm-1" for="serviceFeeNoneRefund">
                {{__('Service Fee/Deposit Refund of Original Course')}}
            </label>
            <div class="col-sm-3">
                <input
                    type="number"
                    class="form-control dynamic-validation"
                    data-counter="total2"
                    name="serviceFeeNoneRefund"
                    placeholder="{{__('Please enter a refund amount')}}"
                    value="{{number_format($serviceDepositFeesRefund, 2, '.','')}}"
                    max="{{number_format($serviceDepositFeesRefund, 2, '.','')}}"
                    data-required-if='{"name":"chargeRefundRadio", "isValue":"none"}'
                    id="serviceFeeNoneRefund"
                >
            </div>

            <div class="col-sm-1"></div>

            <label class="col-sm-1 text-right" for="total2">
                {{__('Total')}} {{$currencySign}}
            </label>
            <div class="col-sm-2">
                <input
                    type="number"
                    class="form-control dynamic-validation"
                    max="{{number_format($orderItem->discountedValue(), 2, '.','')}}"
                    name="total2"
                    id="total2"
                    value="{{number_format($orderItem->discountedValue(), 2, '.','')}}"
                    readonly="readonly"
                    data-required-if='{"name":"chargeRefundRadio", "isValue":"none"}'
                >
            </div>
        </div>
    </div>
</div>

<div id="chargeForm" class="changeForms hidden">
    <div class="row mt-20" id="currencyContainer">
        <div class="col-sm-12 rowcontainer">
            <label class="col-sm-1">{{__('New Course Currency')}}</label>
            <div class="col-sm-2">
                <input
                    type="radio"
                    class="dynamic-validation"
                    name="currency"
                    value="{{\App\Enumerables\Currency::GBP}}"
                    id="currency_gbp"
                    data-currency-sign="£"
                    @if($orderItem->currency == \App\Enumerables\Currency::GBP) checked="checked" @endif
                    data-required-if='{"name":"chargeRefundRadio", "isValue":"charge"}'
                >
                <label for="currency_gbp">GBP</label>
            </div>
            <div class="col-sm-2">
                <input
                    type="radio"
                    class="dynamic-validation"
                    name="currency"
                    value="{{\App\Enumerables\Currency::CNY}}"
                    id="currency_cny"
                    data-currency-sign="¥"
                    @if($orderItem->currency != \App\Enumerables\Currency::GBP) checked="checked" @endif
                    data-required-if='{"name":"chargeRefundRadio", "isValue":"charge"}'
                >
                <label for="currency_cny">CNY</label>
            </div>

            <label class="col-sm-1" for="exchangeRate">
                {{__('Exchange Rate')}}
            </label>
            <div class="col-sm-2">
                <input
                    type="number"
                    class="form-control dynamic-validation"
                    name="exchangeRate"
                    id="exchangeRate"
                    value="1"
                    min="0.001"
                    data-required-if='{"name":"chargeRefundRadio", "isValue":"charge"}'
                >
            </div>
        </div>
    </div>

    <div class="row mt-20">
        <div class="col-sm-12 rowcontainer">
            <label class="col-sm-1">{{__('Pay the difference')}}</label>
            <div class="col-sm-2" id="chargeRadioType1">
                <input
                    type="radio"
                    class="dynamic-validation"
                    name="chargeMethod"
                    value="original"
                    id="chargeRadio1"
                    data-validation-container="chargeRadioType1"
                    data-required-if='{"name":"chargeRefundRadio", "isValue":"charge"}'
                >
                <label for="chargeRadio1">{{__('Generate online payment orders')}}</label>
            </div>
            <div class="col-sm-2" id="chargeRadioType2">
                <input
                    type="radio"
                    class="dynamic-validation"
                    name="chargeMethod"
                    value="offline"
                    id="chargeRadio2"
                    data-validation-container="chargeRadioType2"
                    data-required-if='{"name":"chargeRefundRadio", "isValue":"charge"}'
                >
                <label for="chargeRadio2">{{__('Offline payment generation order')}}</label>
            </div>
        </div>
    </div>

    <div class="row mt-20" id="newCourseData">
        @include('work_bench.order_details.change_course_new_course_row')
    </div>

    <div class="row mt-20">
            <div class="col-sm-12 rowcontainer">
                <label class="col-sm-1" for="applicationFeeChargeRefund">
                    {{__('Application Fee Refund of Original Course')}}
                </label>
                <div class="col-sm-3">
                    <input
                        type="number"
                        class="form-control dynamic-validation"
                        data-counter="total5"
                        name="applicationFeeChargeRefund"
                        id="applicationFeeChargeRefund"
                        placeholder="{{__('Please enter a refund amount')}}"
                        value="{{number_format($orderItem->applicationFees,2,'.','')}}"
                        max="{{number_format($orderItem->applicationFees,2,'.','')}}"
                        data-required-if='{"name":"chargeRefundRadio", "isValue":"charge"}'
                    >
                </div>
                <label class="col-sm-1" for="serviceFeeChargeRefund">
                    {{__('Service Fee/Deposit Refund of Original Course')}}
                </label>
                <div class="col-sm-3">
                    <input
                        type="number"
                        class="form-control dynamic-validation"
                        data-counter="total5"
                        name="serviceFeeChargeRefund"
                        id="serviceFeeChargeRefund"
                        placeholder="{{__('Please enter a refund amount')}}"
                        value="{{number_format($serviceDepositFeesRefund,2,'.','')}}"
                        max="{{number_format($serviceDepositFeesRefund,2,'.','')}}"
                        data-required-if='{"name":"chargeRefundRadio", "isValue":"charge"}'
                    >
                </div>
                <div class="col-sm-1"></div>
                <label class="col-sm-1 text-right" for="total5">
                    {{__('Total')}} {{$currencySign}}
                </label>
                <div class="col-sm-2">
                    <input
                        type="number"
                        class="form-control dynamic-validation"
                        name="total5"
                        id="total5"
                        value="{{number_format($orderItem->discountedValue(),2,'.','')}}"
                        max="{{number_format($orderItem->discountedValue(),2,'.','')}}"
                        readonly="readonly"
                        data-total="to-pay-total"
                        data-total-type="deduct"
                        data-required-if='{"name":"chargeRefundRadio", "isValue":"charge"}'
                    >
                </div>
            </div>
    </div>

    <div class="row mt-20">
        <div class="col-sm-12 rowcontainer">
            <div class="col-sm-8"></div>
            <label class="col-sm-2 text-right" for="to-pay-total">
                {{__('To Charge Total')}} <span class="currency-sign">{{$currencySign}}</span>
            </label>
            <div class="col-sm-2">
                <input
                    type="number"
                    class="form-control dynamic-validation"
                    name="to-pay-total"
                    id="to-pay-total"
                    value="{{number_format(($total - $orderItem->discountedValue()), 2, '.', '')}}"
                    min="0"
                    readonly="readonly"
                    data-required-if='{"name":"chargeRefundRadio", "isValue":"charge"}'
                >
            </div>
        </div>
    </div>
</div>

<div id="refundForm" class="changeForms hidden">
    <div class="row mt-20">
        <div class="col-sm-12 rowcontainer">
            <label class="col-sm-1">{{__('Refund Method')}}</label>
            <div class="col-sm-2" id="refundRadioType1">
                <input
                    type="radio"
                    class="dynamic-validation"
                    name="refundMethod"
                    value="original"
                    id="radio1"
                    data-validation-container="refundRadioType1"
                    data-required-if='{"name":"chargeRefundRadio", "isValue":"refund"}'
                    @if(!$refundMethodValidation) readonly="readonly" @endif
                >
                <label for="radio1">{{__('Refund through original payment method')}}</label>
            </div>
            <div class="col-sm-2" id="refundRadioType2">
                <input
                        type="radio"
                        class="dynamic-validation"
                        name="refundMethod"
                        value="offline"
                        id="radio2"
                        data-validation-container="refundRadioType2"
                        data-required-if='{"name":"chargeRefundRadio", "isValue":"refund"}'
                        @if(!$refundMethodValidation) checked="checked" @endif
                >
                <label for="radio2">{{__('Offline Refund')}}</label>
            </div>
        </div>
    </div>

    <div class="row mt-20">
        <div class="col-sm-12 rowcontainer">
            <label class="col-sm-1" for="applicationFeeRefundCharge">
                {{__('Application Fee Charge')}}
            </label>
            <div class="col-sm-2">
                <input
                    type="number"
                    class="form-control dynamic-validation"
                    data-counter="total6"
                    name="applicationFeeRefundCharge"
                    id="applicationFeeRefundCharge"
                    placeholder="{{__('Please enter a charge amount')}}"
                    value="{{number_format($applicationFees,2, '.','')}}"
                    max="{{number_format($applicationFees,2, '.','')}}"
                    data-required-if='{"name":"chargeRefundRadio", "isValue":"refund"}'
                >
            </div>
            <label class="col-sm-1" for="serviceFeeRefundCharge">
                {{__('Service Fee Charge')}}
            </label>
            <div class="col-sm-2">
                <input
                    type="number"
                    class="form-control dynamic-validation"
                    data-counter="total6"
                    name="serviceFeeRefundCharge"
                    id="serviceFeeRefundCharge"
                    placeholder="{{__('Please enter a charge amount')}}"
                    value="{{number_format($discountedPrice,2, '.','')}}"
                    max="{{number_format($discountedPrice,2, '.','')}}"
                    data-required-if='{"name":"chargeRefundRadio", "isValue":"refund"}'
                >
            </div>
            <label class="col-sm-1" for="depositFeeRefundCharge">
                {{__('Deposit Fee Charge')}}
            </label>
            <div class="col-sm-2">
                <input
                    type="number"
                    class="form-control dynamic-validation"
                    data-counter="total6"
                    name="depositFeeRefundCharge"
                    id="depositFeeRefundCharge"
                    placeholder="{{__('Please enter a charge amount')}}"
                    value="0.00"
                    min="0"
                    data-required-if='{"name":"chargeRefundRadio", "isValue":"refund"}'
                >
            </div>
            <label class="col-sm-1 text-right" for="total6">
                {{__('Total')}} {{$currencySign}}
            </label>
            <div class="col-sm-2">
                <input
                    type="number"
                    class="form-control dynamic-validation"
                    name="total6"
                    id="total6"
                    value="{{number_format($total,2, '.','')}}"
                    max="{{number_format($total,2, '.','')}}"
                    readonly="readonly"
                    data-total="to-refund-total"
                    data-total-type="deduct"
                    data-required-if='{"name":"chargeRefundRadio", "isValue":"refund"}'
                >
            </div>
        </div>
    </div>

    <div class="row mt-20">
        <div class="col-sm-12 rowcontainer">
            <label class="col-sm-1" for="applicationFeeRefund">
                {{__('Application Fee Refund of Original Course')}}
            </label>
            <div class="col-sm-3">
                <input
                    type="number"
                    class="form-control dynamic-validation"
                    data-counter="total4"
                    name="applicationFeeRefund"
                    id="applicationFeeRefund"
                    placeholder="{{__('Please enter a refund amount')}}"
                    value="{{number_format($orderItem->applicationFees,2, '.','')}}"
                    max="{{number_format($orderItem->applicationFees,2, '.','')}}"
                    data-required-if='{"name":"chargeRefundRadio", "isValue":"refund"}'
                >
            </div>
            <label class="col-sm-1" for="serviceFeeRefund">
                {{__('Service Fee/Deposit Refund of Original Course')}}
            </label>
            <div class="col-sm-3">
                <input
                    type="number"
                    class="form-control dynamic-validation"
                    data-counter="total4"
                    name="serviceFeeRefund"
                    id="serviceFeeRefund"
                    placeholder="{{__('Please enter a refund amount')}}"
                    value="{{number_format($serviceDepositFeesRefund,2, '.','')}}"
                    max="{{number_format($serviceDepositFeesRefund,2, '.','')}}"
                    data-required-if='{"name":"chargeRefundRadio", "isValue":"refund"}'
                >
            </div>
            <label class="col-sm-1"></label>
            <label class="col-sm-1 text-right" for="total4">
                {{__('Total')}} {{$currencySign}}
            </label>
            <div class="col-sm-2">
                <input
                        type="number"
                        class="form-control dynamic-validation"
                        name="total4"
                        id="total4"
                        value="{{number_format($orderItem->discountedValue(),2, '.','')}}"
                        max="{{number_format($orderItem->discountedValue(),2, '.','')}}"
                        readonly="readonly"
                        data-total="to-refund-total"
                        data-total-type="add"
                        data-required-if='{"name":"chargeRefundRadio", "isValue":"refund"}'
                >
            </div>
        </div>
    </div>

    <div class="row mt-20">
        <div class="col-sm-12 rowcontainer">
            <div class="col-sm-8"></div>
            <label class="col-sm-2 text-right" for="to-refund-total">
                {{__('To Refund Total')}} {{$currencySign}}
            </label>
            <div class="col-sm-2">
                <input
                    type="number"
                    class="form-control dynamic-validation"
                    id="to-refund-total"
                    name="to-refund-total"
                    value="{{number_format($orderItem->discountedValue() - $total, 2, '.','')}}"
                    min="0"
                    readonly="readonly"
                    data-required-if='{"name":"chargeRefundRadio", "isValue":"refund"}'
                >
            </div>
        </div>
    </div>
</div>
<script>
    $(document).on('change', 'input[name="currency"]', function () {
        $('.currency-sign').text($(this).attr('data-currency-sign'));

        $.ajax({
            type: 'POST',
            url: "{{route('getNewChangedCourseData')}}",
            data: {
                '_token': '{{csrf_token()}}',
                'currency': $(this).val(),
                'courseId': $('#courseFilter').attr('data-id'),
            },
            success: function (data) {
                if (!data || !data.status) {
                    displayNotification('Course Data Not Found', "danger", 5000);
                } else {
                    $('#newCourseData').html(data.view);
                    recalculateTotal('to-pay-total');
                }
            }
        })
    }).on('change', 'input[name="exchangeRate"]', function () {
        recalculateTotal('to-pay-total');
    }).on('click', 'input[name="chargeRefundRadio"]', function () {
        $('.changeForms').addClass('hidden');
        $('#' + $(this).attr('data-form')).removeClass('hidden');
    }).on('change', '[data-counter]', function () {
        $(this).parent().removeClass('error');
        var counterID = $(this).attr('data-counter');
        var total = 0;
        $('input[data-counter="' +counterID + '"]').each(function () {
            var value = $(this).val();
            value = parseFloat(value);
            value = (value && value > 0) ? value : 0;
            $(this).val(value.toFixed(2));
            total += value;
        });

        var target = $('#' + counterID);

        target.val(total.toFixed(2));
        recalculateTotal(target.attr('data-total'))
    }).on('change', 'input[name=refundMethod]', function () {
        $('input[name="refundMethod"]').parent().removeClass('error');
    }).on('change', 'input[name=chargeRefundRadio]', function () {
        $('input[name="chargeRefundRadio"]').parent().removeClass('error');
    });

    function recalculateTotal(id) {
        var total = 0;
        var exchangeRate = parseFloat($('#exchangeRate').val());

        $('input[data-total="' + id + '"]').each(function () {
            var isNewCourse = $(this).attr('data-is-new-course');
            var value = parseFloat($(this).val());
            value = (!isNewCourse || isNewCourse == 0) ? value * exchangeRate : value; //apply exchange rate on old course
            var action = $(this).attr('data-total-type');
            if (action === 'add') {
                total += value;
            } else if (action === 'deduct') {
                total -= value;
            }
        });

        $('#' + id).val(total.toFixed(2));
    }
</script>