@extends('admin.index')
@section('title')
    {{ translate("payment_transactions") }} -
@endsection
@section('header')
@endsection
@section('content')

    <div class="row">
        <div class="col-12">
            <div class="content">

                <div class="card card-body">
                    <div class="toolbar d-flex justify-content-between">
                        <div>
                            <h5 class="mb-0">{{ translate("payment_transactions") }}</h5>
                            <p class="text-sm mb-0">
                                {{ translate("manage_payment_transactions_here") }}
                            </p>
                        </div>
                        <div>
                        </div>
                    </div>
                    <table class="table table-striped" id="table1" data-locale="tr-TR" data-toolbar=".toolbar"
                        data-search="true" data-show-refresh="true" data-show-toggle="true" data-show-columns="true"
                        data-pagination="true" data-resizable="true" data-sortable="true"
                        data-show-search-clear-button="true" data-side-pagination="server"
                        data-url="{{ secure_url('admin/payment-transactions/list/ajax') }}">
                        <thead>
                            <tr>
                                <th data-sortable="true" data-field="user_id" data-formatter="userFormatter">{{ translate("user_who_made_transaction") }}</th>
                                <th data-sortable="true" data-field="payment_method">{{ translate("payment_method") }}</th>
                                <th data-sortable="true" data-field="responseMessage">{{ translate("message_from_bank") }}</th>
                                <th data-sortable="true" data-field="responseCode" data-formatter="resultFormatter">{{ translate("payment_result") }}</th>
                                <th data-sortable="true" data-field="response" data-formatter="responseFormatter">{{ translate("all_data") }}</th>
                                <th data-sortable="true" data-field="created_at" data-formatter="dateFormatter">{{ translate("date") }}</th>
                            </tr>
                        </thead>
                    </table>
                </div>

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


    <div class="modal fade" id="modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel">{{ translate("response") }}</h1><button type="button"
                        class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <pre id="pre_content" style="min-height: 400px;"></pre>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ translate("close") }}</button>
                </div>
            </div>
        </div>
    </div>

@endsection
@section('footer')
    <script>
        function userFormatter(user_id, row) {
            var html = ""

            if ( user_id != null && user_id != 0 && row.user != null ) {
                html += ("<b>"+row.user.name + " " + row.user.surname + "</b><br> <small>"+row.user.email+"</small>");
            }else{
                html += "{{ translate('user_record_not_found') }}";
            }

            return html;
        }

        function modalFormatter(element) {
            var content = $(element).data('content');
            
            const responseJson = JSON.stringify(content, null, 2)
            document.getElementById('pre_content').innerHTML = responseJson;
        }

        function responseFormatter(response, row) {
            var html = "";
            html += "";
            html += "<button type='button' class='btn btn-secondary btn-sm' data-bs-toggle='modal' data-bs-target='#modal' data-content='"+ (response) +"' onclick='modalFormatter(this)'>{{ translate('examine') }}</button>";
            return html;
        }

        function resultFormatter(responseCode, row) {
            if (responseCode == "00") {
                return "<i class='fa fa-check-circle text-success'></i> {{ translate('successful') }}";
            }
            return "<i class='fa fa-times-circle text-danger'></i> {{ translate('unsuccessful') }}";
        }

        function dateFormatter(date) {
            var date = new Date(date);
            var newDate = ("0" + (date.getDate())).slice(-2) + "/" + ("0" + (date.getMonth() + 1)).slice(-2) + "/" + date
                .getFullYear() + " " + ("0" + date.getHours()).slice(-2) + ":" + ("0" + date.getMinutes()).slice(-2) + ":" +
                ("0" + date.getMilliseconds()).slice(-2);
            return newDate;
        }
    </script>
@endsection