@extends('admin.layouts.main')

@section('title')
Consultants - Finance and Statistics
@endsection

@section('content')

<main>

    <div class="two-col">

        @include("admin.common.sidebar")

        <div class="right-sec">

            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="javascript:void(0)">{{ @trans('finance.finance') }}</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Consultant Finance</li>
                </ol>
            </nav>

            <div class="top-bar d-flex align-items-center">
                <h2>Finance and Statistics</h2>
            </div>

            <div class="top-bar d-flex justify-content-between">
                <div class="justify-content-start">
                    <div class="form-group select btm-arrow without-label d-flex align-items-center">
                        <select class="form-control" id="paymentTypes" name="paymentTypes">
                            <option value="1" @if(Request::get('selectedPaymentType')==1) selected="selected" @endif>Payment
                                Recieved</option>
                            <option value="2" @if(Request::get('selectedPaymentType')==2) selected="selected" @endif>Payment
                                to be Refunded</option>
                            <option value="3" @if(Request::get('selectedPaymentType')==3) selected="selected" @endif>
                                Refunded Payments</option>
                        </select>
                    </div>
                </div>
                <div class="justify-content-end right-table-container ml-auto">
                    <form id="frmSearchPoDateRange"
                        action="{{ route('admin.consultants.stats',['panel' => session('panel')])}}">
                        @if($params['selectedPaymentType'] != 2)
                        <input type="hidden" name="start_date" id="start_date" value="" />
                        <input type="hidden" name="end_date" id="end_date" value="" />
                        @endif
                        <input type="hidden" name="selectedPaymentType" id="selectedPaymentType"
                            value="{{ Request::get('selectedPaymentType') }}" />
                    </form>
                    @if($params['selectedPaymentType'] != 2)

                    @include('admin.modules.finance.common.finance_date_filter')

                    <div class="form-action">
                        <input type="submit" class="btn btn-em submitApplyBtn" name="submit" value="Apply">
                        @if(Request::get('start_date'))
                        <a href="{{ route('admin.consultants.stats',['panel' => Session::get('panel')]) }}"
                            class="btn btn-em mr-1">Clear</a>
                        @endif
                    </div>
                    @endif
                    <a class="btn btn-bar" href="#statistics-collapsible" role="button" data-toggle="collapse" aria-expanded="false"
                        aria-controls="statistics-collapsible" style="height: 42px !important;">
                    <i class="material-icons">bar_chart</i>
                    </a>
                </div>
            </div>

            <div class="collapse" id="statistics-collapsible">
                <div class="statistics-panel d-flex">
                    <div class="col draft">
                        <div class="stat-panel-info">
                            <h3>{{ $franchiseCurrency }} {{ localeCurrency($recievedAmount) }}</h3>
                            <p>Recieved</p>
                        </div>
                    </div>
                    <div class="col pending">
                        <div class="stat-panel-info">
                            <h3>{{ $franchiseCurrency }} {{ localeCurrency($toBeRefundedAmount) }}</h3>
                            <p>To Be Refunded</p>
                        </div>
                    </div>
                    <div class="col paid">
                        <div class="stat-panel-info">
                            <h3>{{ $franchiseCurrency }} {{ localeCurrency($refundedAmount) }}</h3>
                            <p>Refunded</p>
                        </div>
                    </div>
                </div>
            </div>


            <div class="table-wrapper">

                @if(!blank($orders))
                <div class="table-data">
                    <div class="table-responsive three-col-fix table-bordered">

                        <table class="table" id="mtcTable">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Plan</th>
                                    <th>Amount</th>
                                    <th>Date</th>
                                    @if($params['selectedPaymentType'] == 1)
                                    <th>Trans ID</th>
                                    <th>Trans Ref</th>
                                    @elseif($params['selectedPaymentType'] == 2)
                                    <th>Reason</th>
                                    <th>Action</th>
                                    @elseif($params['selectedPaymentType'] == 3)
                                    <th>Redund Details</th>
                                    @endif
                                </tr>
                            </thead>

                            <tbody>
                                @foreach($orders as $order)
                                <tr>
                                    <td><a class="d-block text-underlined"
                                            href="{{ route('admin.candidates.show',['panel' => Session::get('panel'), 'id' => $order->consultant->id]) }}"
                                            target="_blank">{{ $order->consultant->present()->name }}</a></td>
                                    <td>{{ $order->plan->name }}</td>
                                    <td>{{ $franchiseCurrency }} {{ localeCurrency($order->price) }}</td>
                                    <td>{{ $order->created_at_formatted }}</td>
                                    @if($params['selectedPaymentType'] == 1)
                                    <td>{{ $order->reference ?? '-' }}</td>
                                    <td>
                                        @if($order->data)
                                        @php
                                        $data = json_decode($order->data);
                                        echo $data->transid;
                                        @endphp
                                        @else
                                        -
                                        @endif
                                    </td>
                                    @elseif($params['selectedPaymentType'] == 2)
                                    <td>{{ $order->consultant->consultant_profile->reject_reason}}</td>
                                    <td class="act-btn">
                                        <a href="#" title="Refund" class="btn btn-view btnRefund">
                                            <img src="{{ asset('img/refund-64.png') }}"
                                                data-id="{{ $order->consultant->id }}" />
                                        </a>
                                    </td>
                                    @elseif($params['selectedPaymentType'] == 3)
                                    <td class="act-btn">
                                        <a href="javascript:void(0)" title="View" class="btn btn-view"
                                            data-toggle="modal" data-target="#refundDetails"
                                            data-amount="TZS {{ localeCurrency($order->consultant->consultant_refund->amount) }}"
                                            data-date="{{ \Carbon\Carbon::parse($order->consultant->consultant_refund->refund_date)->format(config('custom.formats.date'))}}"
                                            data-reason="{{ $order->consultant->consultant_refund->reason}}"
                                            data-transaction-details="{{ $order->consultant->consultant_refund->transaction_details}}">
                                            <i class="material-icons">remove_red_eye</i>
                                        </a>
                                    </td>
                                    @endif
                                </tr>
                                @endforeach
                            </tbody>

                        </table>
                    </div>
                </div>
                @else
                <div class="row">
                    <div class="col-md-12">
                        <div class="alert alert-warning" role="alert">
                            {{ @trans('finance.no_records_to_show') }}
                        </div>
                    </div>
                </div>
                @endif
            </div>
        </div>
    </div>
</main>
@endsection

@push('pageJs')
<script type="text/javascript">
    $(document).ready(function() {

        $('.btnRefund').on('click', function(e) {
            var consultant_id = $(e.target).attr('data-id');
            console.log(consultant_id);
            $('#refundModal #consultant_id').val(consultant_id);
            $('#refundModal').modal('show');
        });

        $('.btnSubmitRefund').on('click', function(e) {
            e.preventDefault();
            if ($('#frmRefund').valid()) {
                $(this).attr('disabled', true).text('Please wait...');
                $('#frmRefund').submit();
            }
        })

        $('#refundModal').on('hidden.bs.modal', function(e) {
            $('#frmRefund').trigger('reset');
            $('#frmRefund').find('.form-control').removeClass('invalid-feedback');
            $('#frmRefund').find('.form-control').removeClass('is-invalid');
            $('#frmRefund').find('.invalid-feedback').remove();
        });

        $('#refundDetails').on('show.bs.modal', function(e) {
            var button = $(e.relatedTarget)
            var amount = button.attr('data-amount')
            var date = button.attr('data-date')
            var transaction_details = button.attr('data-transaction-details')
            var reason = button.attr('data-reason')

            var modal = $(this)
            modal.find('.amount').text(amount);
            modal.find('.refund_date').text(date);
            modal.find('.reason').text(reason);
            modal.find('.transaction_details').text(transaction_details);
        });



        $('#frmRefund').validate({
            rules: {
                amount: {
                    required: true
                },
                refund_date: {
                    required: true
                },
                reason: {
                    required: true
                },
                transaction_details: {
                    required: true
                }
            },
            messages: {
                amount: {
                    required: 'Refund Amount is required'
                },
                refund_date: {
                    required: 'Refund date is required'
                },
                reason: {
                    required: 'Reason is required'
                },
                transaction_details: {
                    required: 'Transaction Details is required'
                }
            },
            ignore: [],
            errorElement: 'span',
            errorPlacement: function(error, element) {
                if (element.hasClass('select-two')) {
                    error.insertAfter(element.next('.select2-container'));
                } else {
                    error.insertAfter(element);
                }
            },
            errorClass: 'invalid-feedback',
            invalidHandler: function(event, validator) {
                var offset = $(validator.errorList[0].element).offset().top;
                $('html, body').animate({
                    scrollTop: offset - 100
                }, 100);
            },

        });


        var today = new Date();
        $("#refund_date").datepicker({
            autoHide: true,
            format: 'dd/mm/yyyy',
            zIndex: 2048,
            date: null,
            endDate: today.getDate() + '/' + (today.getMonth() + 1) + '/' + today
                .getFullYear(),
        });

        @if($params['selectedPaymentType'] != 2)

		$('.submitApplyBtn').on('click', function() {
			$('#start_date').val(moment($('#cal_start_date').datepicker('getDate')).format('YYYY-MM'));
            $('#end_date').val(moment($('#cal_end_date').datepicker('getDate')).format('YYYY-MM'));
            $('#selectedPaymentType').val($('#paymentTypes').val());
			$('#frmSearchPoDateRange').submit();
		});
        @endif

        $('#paymentTypes').on('change', function() {
            @if($params['selectedPaymentType'] != 2)
            $('#start_date').val(moment($('#cal_start_date').datepicker('getDate')).format('YYYY-MM'));
            $('#end_date').val(moment($('#cal_end_date').datepicker('getDate')).format('YYYY-MM'));
            @endif
            $('#selectedPaymentType').val($('#paymentTypes').val());
            $('#frmSearchPoDateRange').submit();
        });


        // snackbar message
        @if(Session::has('message')) Snackbar.show({
            pos: 'bottom-right',
            text: "{!! session('message') !!}",
            actionText: 'Okay'
        });
        @endif
    });
</script>
@endpush

@push('pageModals')
<div class="modal fade" id="refundModal" data-backdrop="static">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">


            <form id="frmRefund" action="{{ route('admin.consultants.refund',['panel' => Session::get('panel')]) }}"
                method="post" autocomplete="off">

                <input type="hidden" name="consultant_id" id="consultant_id" value="" />

                @csrf

                <!-- Modal Header -->
                <div class="modal-header">
                    <h4 class="modal-title body-font-size">Refund</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <!-- Modal body -->
                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="form-group required">
                                <label class="control-label">Amount</label>
                                <input type="text" name="amount" id="amount" class="form-control"
                                    placeholder="Amount" />
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-group required">
                                <label class="control-label">Refund Date</label>
                                <input type="text" name="refund_date" id="refund_date" class="form-control"
                                    placeholder="Refund date" />
                            </div>
                        </div>
                        <div class="col-sm-12">
                            <div class="form-group required">
                                <label class="control-label">Reason</label>
                                <textarea id="reason" name="reason" class="form-control"></textarea>
                            </div>
                        </div>
                        <div class="col-sm-12">
                            <div class="form-group required">
                                <label class="control-label">Transaction Details</label>
                                <textarea id="transaction_details" name="transaction_details"
                                    class="form-control"></textarea>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Modal footer -->
                <div class="modal-footer justify-content-center border-0">
                    <button type="submit" class="btn btn-primary-em btnSubmitRefund">Submit</button>
                </div>

            </form>

        </div>
    </div>
</div>


<div class="modal fade" id="refundDetails" data-backdrop="static">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">


            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title body-font-size">Refund Details</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- Modal body -->
            <div class="modal-body">
                <div class="row">
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label class="control-label">Amount</label>
                            <p class="display-info amount"></p>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label class="control-label">Refund Date</label>
                            <p class="display-info refund_date"></p>
                        </div>
                    </div>
                    <div class="col-sm-12">
                        <div class="form-group">
                            <label class="control-label">Reason</label>
                            <p class="display-info reason"></p>
                        </div>
                    </div>
                    <div class="col-sm-12">
                        <div class="form-group">
                            <label class="control-label">Transaction Details</label>
                            <p class="display-info transaction_details"></p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Modal footer -->
            <div class="modal-footer justify-content-center border-0">
                <button type="submit" class="btn btn-primary-em" data-dismiss="modal">Okay</button>
            </div>

        </div>
    </div>
</div>


@endpush