@extends('layouts.master')
@section('title', __("tr.Payment"))
@section('titleicon', "icon-cog3" )

@section('content')
    <!-- BEGIN .main-content -->
    <div class="main-content">

        @if(Session::has('alert'))
            <div>
                <div class="alert custom alert-danger" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                    <i class="icon-warning2"></i><strong>Error! </strong>{{session()->pull('alert')[0]}}
                </div>
            </div>
        @endif

        <div class='modal fade' id='currency_preference_modal' tabindex='-1' role='dialog' aria-labelledby='currency_preference_modal' aria-hidden='true'>
            <form action="" method="post" enctype='multipart/form-data'>
                {{ csrf_field() }}
                <div class='modal-dialog' role='document'>
                    <div class='modal-content'>
                        <div class='modal-header'>
                            <div class="col-11 p-0">
                                <h5 class='modal-title' id='currency_preference_modal'>
                                    @lang('tr.Currency Preference')
                                </h5>
                            </div>
                            <div class="col-1 p-0">
                                <button type='button' class='close' data-dismiss='modal' aria-label='Close'>
                                    <span aria-hidden='true'>&times;</span>
                                </button>
                            </div>
                        </div>
                        <div class='modal-body'>
                            <input type="hidden" class="form-control" value="0" name="id" id="id" />

                            <div class="row">
                                <div class="form-group col-12">                                        
                                    <select name="currency" id="currency" class="form-control">
                                        <option value="">@lang('tr.Select Currency Preference')</option>
                                        <option value="GBP" id="gbp_option">GBP</option>
                                        <option value="USD" id="usd_option">USD</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div>
                            <div id='progress_bar' style="background-color: green; width: 0%; height: 2px;"></div>
                        </div>
                        <div class='modal-footer'>
                            <button type='submit' class='btn btn-primary' id='action'>@lang('tr.Submit') <span id="progress_text"></span></button>
                            <button type='button' class='btn btn-light' id='close' data-dismiss='modal'>@lang('tr.Cancel')</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>

        <div class="col-lg-12 col-xs-12 col-md-12 col-sm-12">
            <div class="row">

                @foreach ($statistics->totals as $currency => $total)
                    <div class="col-md-3">
                        <div class="card">
                            <div class="card-body">
                                <div class="stats-widget">
                                    <div class="stats-widget-header">
                                        <i class="icon-coin-pound"></i>
                                    </div>
                                    <div class="stats-widget-body">
                                        <!-- Row start -->
                                        <ul class="row no-gutters">
                                            <li class="col-xl-5 col-lg-5 col-md-5 col-sm-5 col">
                                                <h6 class="blog-title">@lang('tr.Required')</h6>
                                            </li>
                                            <li class="col-xl-7 col-lg-7 col-md-7 col-sm-7 col">
                                                <h4 class="total">{{$total}} {{ $currency }}</h4>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach

                <div class="col-md-3">
                    <div class="card">
                        <div class="card-body">
                            <div class="stats-widget">
                                <div class="stats-widget-header">
                                    <i class="icon-coin-pound"></i>
                                </div>
                                <div class="stats-widget-body">
                                    <!-- Row start -->
                                    <ul class="row no-gutters">
                                        <li class="col-xl-7 col-lg-7 col-md-7 col-sm-7 col">
                                            <h6 class="blog-title">@lang('tr.Credit')</h6>
                                        </li>
                                        <li class="col-xl-5 col-lg-5 col-md-5 col-sm-5 col">
                                            <h4 class="total">{{ $student->financialCredit() }} {{ \App\StudentFee::CURRENCY_EGP }}</h4>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                @if($feesCredit>0)
                    <div class="col-md-3">
                        <div class="card">
                            <div class="card-body">
                                <div class="stats-widget">
                                    <div class="stats-widget-header">
                                        <i class="icon-coin-pound"></i>
                                    </div>
                                    <div class="stats-widget-body">
                                        <!-- Row start -->
                                        <ul class="row no-gutters">
                                            <li class="col-xl-7 col-lg-7 col-md-7 col-sm-7 col">
                                                <h6 class="blog-title">@lang('tr.Fees Credit')</h6>
                                            </li>
                                            <li class="col-xl-5 col-lg-5 col-md-5 col-sm-5 col">
                                                <h4 class="total">{{ $feesCredit }} {{ \App\StudentFee::CURRENCY_EGP }}</h4>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif

            </div>
        </div>
        @if(count($statistics->totals)>0)
            <div class="col-lg-12 col-xs-12 col-md-12 col-sm-12">
                <div class="card">
                    <div class="card-body">
                        <form action="{{route('pay_student_fee')}}" method='post'>
                            @csrf
                            <div class="row gutters">
                                <input type="hidden" class="form-control" value="{{$student->financialCredit()}}"
                                       id="total_credit" name="total_credit"/>
                                <input type="hidden" class="form-control" value="0" id="amount" name="total_amount"/>
                                <div class="form-group col-md-6">
                                    <select class="form-control" id="studentUnPaidPaymemts" name="studentPaymentId">
                                        @foreach($unPaidPayments as $payment)
                                            @php($amount = $payment->amount - $payment->paid)
                                            <option value="{{$payment->id}}"
                                                    amount="{{$amount}}"
                                                    service_name="{{$payment->service_name}}"
                                                    service_flags="{{$payment->service_flags}}" >{{"#$payment->id | $payment->service_name | $payment->term_name | $amount $payment->currency"}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="row gutters col-md-4">
                                    <div class="form-group col-md-2 change_amount_div">
                                        <button type="button" action-type="decrement" class="btn btn-sm btn-danger form-control change_amount">
                                            <i class="icon-minus"></i>
                                        </button>
                                    </div>
                                    <div class="form-group col-md-8">
                                        <input type="text" id="amount_text" class="form-control" value="0" readonly>
                                    </div>
                                    <div class="form-group col-md-2 change_amount_div">
                                        <button type="button" action-type="increment" class="btn btn-sm btn-success form-control change_amount">
                                            <i class="icon-plus"></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="form-group col-md-2">
                                    <button type='submit' id="payment_submit" class='btn btn-primary form-control'
                                            id='action'>@lang('tr.Pay Now')</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        @endif
        @php($methodsList = 'App\StudentFee'::methodsList())
        @php($statusList = 'App\StudentFee'::statusList())

        <div class="col-lg-12 col-xs-12 col-md-12 col-sm-12">
            <div class="card">
                <div class="card-body">
                    <table id="data_table" class="display" style="width:100%">
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>Term</th>
                            <th>@lang('tr.Type')</th>
                            <th width="50%">@lang('tr.Payment')</th>
                            <th>@lang('tr.Status')</th>
                            <th width="10%"></th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach($payments as $payment)
                            @php($color = "")
                            @if($payment->isDue())

                                @php($color = "color: red;" )

                            @endif

                            <tr style="{{$color}}" id="{{$payment->id}}" student_id="{{$payment->student_id}}"
                                user_name="{{$payment->user_name}}" service_id="{{$payment->service_id}}"
                                method="{{$payment->method}}" amount="{{$payment->amount}}"
                                due_date="{{$payment->due_date}}" term_id="{{$payment->term_id}}"
                                notes="{{$payment->notes}}">
                                <td>{{$payment->id}}</td>
                                <td>{{$payment->term_name}}</td>
                                <td>{{$payment->service_name}}</td>
                                <td>
                                    <b>@lang('tr.Amount')</b>: {{$payment->paid}} of {{$payment->amount}} {{ $payment->currency }}
                                    <br/>
                                    <b>@lang('tr.Method')</b>: {{$methodsList[$payment->method]}}<br/>
                                    <b>@lang('tr.Due Date')</b>: {{$payment->due_date}}<br/>
                                    @if($payment->currency_preference)
                                        <b>@lang('tr.Currency Preference')</b>: {{ $payment->currency_preference }} ({{ $payment->preferred_amount }})<br/>
                                    @endif
                                    @if($student->isPostgraduate())
                                        <b>@lang('tr.Notes')</b>:
                                        @if($payment->notes)
                                            <div dir='rtl'
                                                 style='text-align: right; background-color: lightgray; padding: 5px;'>
                                                @if(isMultilineText($payment->notes))
                                                    {!! formatMultilineList($payment->notes) !!}
                                                @else
                                                    {{$payment->notes}}
                                                @endif
                                            </div>
                                        @endif
                                    @endif
                                    @if($payment->canChangeCurrencyPreference())
                                        <br/>
                                        <a class='currency_preference' data-payment="{{ $payment }}" style="text-decoration:none; font-size: 12px; color:red;" href='javascript:void(0)'>@lang('tr.CHEP UEL unpaid tuition fees message')</a>
                                        <br/>
                                    @endif
                                </td>
                                <td>
                                    @if($payment->status=='App\StudentFee'::STATUS_UNPAID)
                                        <span class='badge badge-danger' style="width: 100px">{{$statusList[$payment->status]}}</span>
                                    @elseif($payment->status=='App\StudentFee'::STATUS_PARTIALLY_PAID)
                                        <span class='badge badge-primary' style="width: 100px">{{$statusList[$payment->status]}}</span>
                                    @elseif($payment->status=='App\StudentFee'::STATUS_FREEZE)
                                        <span class='badge badge-warning' style="width: 100px">{{$statusList[$payment->status]}}</span>
                                    @else
                                        <span class='badge badge-success' style="width: 100px">{{$statusList[$payment->status]}}</span>
                                    @endif
                                </td>
                                <td>
                                    @if($payment->canChangeCurrencyPreference())
                                        <span class='action-column'>
                                            <a class='currency_preference' data-payment="{{ $payment }}" style="text-decoration:none;" href='javascript:void(0)' title="@lang('tr.Currency Preference')"><i class='icon-arrow-repeat-outline'></i></a>
                                        </span>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>
    <!-- END: .main-content -->
@endsection

@section('pagejs')
    <script type="text/javascript">

        function validateAmount() {

            let serviceFlags = $("#studentUnPaidPaymemts").find('option:selected').attr("service_flags");
            if((serviceFlags & {{ 'App\Service'::FLAG_PARTIAL_PAYMENT }})!=0) {

                let selectedAmount = $("#studentUnPaidPaymemts").find('option:selected').attr("amount");
                let currentValue = parseFloat($('#amount').val());
                let remaining = (currentValue % 1000).toFixed(2);

                if(currentValue > selectedAmount) {
                    currentValue = selectedAmount;
                }

                if(remaining > 0 && selectedAmount != currentValue) {
                    currentValue -= remaining;
                }

                if((selectedAmount - currentValue) < 1000) {
                    currentValue = selectedAmount;
                }

                if(currentValue < 1000 && selectedAmount != currentValue) {
                    currentValue = 1000;
                }

                $('#amount').val(parseFloat(currentValue).toFixed(2));
            }
        }

        function updateAmountText(isChanged=false) {

            var amount = $("#amount").val();
            var selectedAmount = $("#studentUnPaidPaymemts option:selected").attr('amount');

            if(amount <= 0 || parseFloat(amount) > parseFloat(selectedAmount) || isChanged) {
                $("#amount_text").val(selectedAmount);
                $("#amount").val(selectedAmount)
            }
            else {
                $("#amount_text").val(amount);
            }
        }

        $(document).ready(function () {

            updateAmountText();
            let serviceFlags = $("#studentUnPaidPaymemts").find('option:selected').attr("service_flags");
            if((serviceFlags & {{ 'App\Service'::FLAG_PARTIAL_PAYMENT }})!=0) {
                $(".change_amount_div").show();
            }
            else {
                $(".change_amount_div").hide();
            }

            var table = $('#data_table').DataTable({"ordering": false});

            $('#studentUnPaidPaymemts').on('change', function () {

                updateAmountText(true);
                let serviceFlags = $("#studentUnPaidPaymemts").find('option:selected').attr("service_flags");
                if((serviceFlags & {{ 'App\Service'::FLAG_PARTIAL_PAYMENT }})!=0) {
                    $(".change_amount_div").show();
                }
                else {
                    $(".change_amount_div").hide();
                }
            });

            $('#payment_submit').on('click', function () {

                let serviceFlags = $("#studentUnPaidPaymemts").find('option:selected').attr("service_flags");
                if((serviceFlags & {{ 'App\Service'::FLAG_PARTIAL_PAYMENT }})!=0) {
                    validateAmount()
                    updateAmountText();
                }
                else {
                    $("#amount").val($("#studentUnPaidPaymemts").find('option:selected').attr("amount"));
                }
            });
            
            $(document).on("click", ".currency_preference", function () {

                var data = $(this).data('payment');
                var modal = $('#currency_preference_modal').clone();
                var action = '{{ route('currency_preference_payment') }}';

                modal.find('form').attr('action', action);

                modal.execModal({
                    progressBar: 'progress_bar',
                    progressText: 'progress_text',
                }, function(response){
                    location.reload();
                }, function(response){
                    showRepsonseErrors(response);
                }, function(dialog) {
                    if(data) {
                        dialog.find("#id").val(data.id);
                        dialog.find("#currency").val(data.currency_preference);
                        dialog.find("#gbp_option").text(`GBP (${data.currency_amounts?.gbp})`);
                        dialog.find("#usd_option").text(`USD (${data.currency_amounts?.usd})`);
                    }
                });
            });
            
            // $('#payment_submit').on('click', function () {
            $(document).on("click", ".change_amount", function () {

                let serviceFlags = $("#studentUnPaidPaymemts").find('option:selected').attr("service_flags");
                if((serviceFlags & {{ 'App\Service'::FLAG_PARTIAL_PAYMENT }})!=0) {

                    let selectedAmount = $("#studentUnPaidPaymemts").find('option:selected').attr("amount");
                    let currentValue = parseFloat($('#amount').val());
                    if($(this).attr('action-type') == 'increment') {

                        currentValue += parseFloat(1000.00);
                        if (currentValue > selectedAmount || (selectedAmount - currentValue < 1000))
                            currentValue = parseFloat(selectedAmount);
                    }
                    else if($(this).attr('action-type') == 'decrement') {

                        currentValue -= parseFloat(1000.00);
                        if (currentValue < 1000)
                            currentValue = 1000;
                    }

                    var remaining = (currentValue % 1000).toFixed(2);
                    currentValue = parseFloat(currentValue.toFixed(2) - remaining);

                    $('#amount').val(currentValue)

                    validateAmount()
                    updateAmountText();
                }
            });
        });
    </script>
@endsection