@extends('admin._layouts.master')

@section('content')

    {!! html()->model($item)->form($method, $action)->open() !!}

    <div class="row">
        <div class="col-md-6">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">@transTitleCase('ui.create.title', [
                         'model_name' => trans('models.service_fee_type.model_name')
                     ])</h3>
                </div>
                <div class="box-body">
                    @formGroup(
                        transUc('models.generic.name'),
                        html()->text('name')->attribute('tabindex', 1),
                        $item->name
                    )

                    @formGroup(
                        transUc('models.transaction.type'),
                        html()->select('type', $typeList)->attribute('tabindex', 2),
                        $item->type
                    )

                    @formGroup(
                        transUc('generic.amount'),
                        html()->number('amount', null, 0, null, 0.01)->attribute('tabindex', 3),
                        $item->amount,
                        true,
                        [
                            'prepend-icon' => 'percent',
                            'prepend-text' => currencySymbol('lg')
                        ]
                    )

                    <div class="formula-section">

                        @formGroup(
                            transUc('models.service_fee_type.formula'),
                            html()->select('formula', $formulaList)->attribute('tabindex', 4),
                            $item->uom
                        )

                        <div class="formula-toggle simple" style="display: {{ $item->formula === 'simple' ? 'block' : 'none' }};">
                            <h4>@trans('Simple VAT and Service Fee calculation')</h4>
                            @trans('Service Fee and VAT are both calculated on the base price, then added to the price.')
                            <br>
                            <br>
                            <table>
                                <tr>
                                    <th>@transUc('generic.financial.vat')</th>
                                    <td> &nbsp; = &nbsp; @transTitleCase('models.product.product_price')
                                        <b>&nbsp;x&nbsp;</b> @trans('generic.financial.vat_percentage')</td>
                                </tr>
                                <tr>
                                    <th>@transUc('generic.financial.service_fee')</th>
                                    <td> &nbsp; = &nbsp; @transTitleCase('models.product.product_price')
                                        <b>&nbsp;x&nbsp;</b> @transTitleCase('generic.financial.service_fee_percentage')</td>
                                </tr>
                            </table>
                        </div>
                        <div class="formula-toggle vat_on_top" style="display: {{ $item->formula === 'vat_on_top' ? 'block' : 'none' }};">
                            <h4>@trans('VAT on top of Service Fee')</h4>
                            @trans('Service Fee is added to the price, and VAT is calculated on top the sum. Service Fee increases the VAT (Service Fee is taxed) in this formula.')
                            <br>
                            <br>
                            <table>
                                <tr>
                                    <th>@transUc('generic.financial.service_fee')</th>
                                    <td> &nbsp; = &nbsp; @transTitleCase('models.product.product_price')
                                        <b>&nbsp;x&nbsp;</b> @transTitleCase('generic.financial.service_fee_percentage')</td>
                                </tr>
                                <tr>
                                    <th>@transUc('generic.financial.vat')</th>
                                    <td> &nbsp; = &nbsp; <b>(</b> @transTitleCase('models.product.product_price')
                                        <b>&nbsp;+&nbsp;</b> @transTitleCase('generic.financial.service_fee') <b>)</b>
                                        <b>&nbsp;x&nbsp;</b> @trans('generic.financial.vat_percentage')</td>
                                </tr>
                            </table>
                        </div>
                        <div class="formula-toggle sf_on_top" style="display: {{ $item->formula === 'sf_on_top' ? 'block' : 'none' }};">
                            <h4>
                                <span data-toggle="tooltip" title="@trans('Ineffective if the Service Fee is FIXED amount.')">
                                @trans('Service Fee on top of VAT') <small><i class="fa fa-exclamation-circle"></i></small>
                                </span>
                            </h4>
                            @trans('VAT is added to the price, and Service Fee is calculated on top the sum. VAT increases the Service Fee in this formula.')
                            <br>
                            <br>
                            <table>
                                <tr>
                                    <th>@transUc('generic.financial.vat')</th>
                                    <td> &nbsp; = &nbsp; @transTitleCase('models.product.product_price')
                                        <b>&nbsp;x&nbsp;</b> @trans('generic.financial.vat_percentage')</td>
                                </tr>
                                <tr>
                                    <th>@transUc('generic.financial.service_fee')</th>
                                    <td> &nbsp; = &nbsp; <b>(</b> @transTitleCase('models.product.product_price')
                                        <b>&nbsp;+&nbsp;</b> @transUc('generic.financial.vat') <b>)</b>
                                        <b>&nbsp;x&nbsp;</b> @transTitleCase('generic.financial.service_fee_percentage')</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12">
            <div class="box box-primary">
                <div class="box-body">
                    @include('admin._partials.form-submit')
                </div>
            </div>
        </div>
    </div>

    {!! html()->form()->close() !!}

@endsection


@push('scripts')
    <script>
        $(function () {
            let $typeInput    = $('select[name="type"]')
            let $amountInput  = $('input[name="amount"]')
            let $amountSymbol = $amountInput.siblings('.input-group-addon').children('.input-group-text')

            let $formulaInput   = $('select[name="formula"]')
            let $formulaSection = $('.formula-section')

            // we need to show either percent sign or currency symbol near `amount` input based on the `type` choice.
            $typeInput.change(function () {
                let val = $typeInput.val()
                $amountSymbol.find('i.fa').hide()

                if (val === 'fixed') {
                    $amountSymbol.find('i.fa-lg').show()
                } else {
                    $amountSymbol.find('i.fa-percent').show()
                }

                $amountSymbol.parent().glow()
            })

            // show formula description for the selected formula
            // hide other formula descriptions
            $formulaInput.change(function () {
                let val = $formulaInput.val()

                $formulaSection.find('.formula-toggle').hide(0)
                $formulaSection.find('.formula-toggle.' + val).show().glow()
            })

            $amountSymbol.find('i.fa').hide()
            if ($typeInput.val() === 'fixed') {
                $amountSymbol.find('i.fa-lg').show()
            } else {
                $amountSymbol.find('i.fa-percent').show()
            }
        })
    </script>
@endpush