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

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

            <div class="card card-body">
                <div class="toolbar d-flex justify-content-between">
                    <div>
                        <h5 class="mb-0">{{ translate("order_list_title") }}</h5>
                        <p class="text-sm mb-0">
                            {{ translate("order_list_description") }}
                        </p>
                    </div>
                    <div>
                    </div>
                </div>
                <table class="table" 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/orders/list/ajax') }}">
                    <thead>
                        <tr>
                            <th data-sortable="true" data-field="order_number">{{ translate("order_number_label") }}</th>
                            <th data-sortable="true" data-field="user.name" data-formatter="userFormatter">{{ translate("full_name_label") }}</th>
                            <th data-sortable="true" data-field="price" data-formatter="priceFormatter">{{ translate("amount_label") }}</th>
                            <th data-sortable="true" data-field="order_products_count">{{ translate("product_count_label") }}</th>
                            <th data-sortable="true" data-field="status" data-formatter="orderStatusFormatter">{{ translate("order_status_label") }}</th>
                            <th data-sortable="true" data-field="payment_status" data-formatter="paymentStatusFormatter">{{ translate("payment_status_label") }}</th>
                            <th data-sortable="true" data-field="created_at" data-formatter="dateFormatter">{{ translate("created_at_label") }}</th>
                            <th data-formatter="buttonFormatter">{{ translate("edit_label") }}</th>
                        </tr>
                    </thead>
                </table>
            </div>

        </div>
    </div>
@endsection
@section('footer')
    <script>
        function orderStatusFormatter(status, row) {
            var html = "";
            if (status == 0) {
                html = "<span class='badge badge-sm bg-warning'>{{ translate('pending_label') }}</span>";
            } else if (status == 1) {
                html = "<span class='badge badge-sm bg-gradient-success'>{{ translate('approved_label') }}</span>";
            } else if (status == 2) {
                html = "<span class='badge badge-sm bg-gradient-danger'>{{ translate('rejected_label') }}</span>";
            }

            // return product request
            if (row.return_product_request_count > 0 && row.status != 2) {
                html +=
                    " <span class='badge badge-sm bg-gradient-danger' data-bs-toggle='tooltip' data-bs-title='{{ translate('return_request_label') }}'>" +
                    row.return_product_request_count + "</span>";
            }

            return html;
        }

        function paymentStatusFormatter(payment_status, row) {
            var html = "";
            if (payment_status == 0) {
                html = "<span class='badge badge-sm bg-warning'>{{ translate('pending_label') }}</span>";
            } else if (payment_status == 1) {
                html = "<span class='badge badge-sm bg-success'>{{ translate('payment_received_label') }}</span>";
            } else if (payment_status == 2) {
                html = "<span class='badge badge-sm bg-danger'>{{ translate('payment_refunded_label') }}</span>";
            } else {
                html = "<span class='badge badge-sm bg-secondary'>{{ translate('unknown_label') }}</span>";
            }

            return html;
        }

        function priceFormatter(price, row) {
            var html = "";
            if (row.currency != null) {
                html = row.currency.symbol + "" + formatMoney(price);
            } else {
                html = formatMoney(price);
            }
            return html;
        }

        function userFormatter(name, row) {
            var fullname = "";
            var email = "";
            if (row.user != null) {
                fullname = (row.user.name ?? '') + " " + (row.user.surname ?? '');
                email = (row.user.email ?? '');
            } else {
                if (row.user_information != null) {
                    fullname = ('{{ translate('unregistered_member_label') }}');
                    email = (row.user_information.email ?? '');
                }
            }

            var html = "";
            html += '<div class="d-flex px-2 py-1">';
            html += '<div>';
            html += '<img src="/images/icons/special/user.png" class="avatar bg-light avatar-sm me-3" alt="' + fullname +
                '">';
            html += '</div>';
            html += '<div class="d-flex flex-column justify-content-center">';
            html += '<h6 class="mb-0 text-sm">' + fullname + '</h6>';
            html += '<p class="text-xs text-secondary mb-0">' + email + '</p>';
            html += '</div>';
            html += '</div>';

            return html;
        }

        function buttonFormatter(id, row) {
            var url = "{{ url('admin/orders/detail') }}" + "/" + row.id;
            return '<div class="btn-group btn-block" role="group" aria-label="editremove"><a href="' + url +
                '" class="btn btn-sm btn-primary"> <i class="far fa-eye"></i> </a> <button type="button" class="btn btn-sm btn-outline-danger btn-remove-item" data-id="' +
                row.id + '" data-item-type="order"> <i class="fas fa-trash-alt"></i> </button></div>';

        }

        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